inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-15316] - Refactored UserInfoComponent to get typography from theme (#8937)

Browse Source 
* [AAE-15316] - Refactored UserInfoComponent to get typography from theme

* AAE-15316: Code improvements
This commit is contained in:
Ehsan Rezaei 2023-10-02 16:29:32 +02:00 committed by GitHub
parent c2d45e10f8
commit e21ad3ca02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 28 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
lib/content-services/src/lib/content-user-info/content-user-info.component.html
View File

@ -55,22 +55,21 @@
[outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="adf-userinfo-title" id="ecm-username">{{ecmUser | fullName}}</div>
<div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<span id="ecm-full-name"
class="adf-userinfo__detail-title">{{ecmUser | fullName}}</span>
<span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
<a class="adf-userinfo__detail-profile" href="#/profile">
<h2 id="ecm-full-name"
class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
<span id="ecm-email"> {{ecmUser.email}} </span>
<a href="#/profile">
{{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
<div class="adf-userinfo-detail">
<span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
<span id="ecm-job-title"
class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
<span id="ecm-job-title"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
</span>
</div>
</div>
@ -90,16 +89,15 @@
<div
[outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="adf-userinfo-title" id="identity-username">{{identityUser | fullName}}</div>
<div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<span id="identity-full-name"
class="adf-userinfo__detail-title">{{identityUser | fullName}}</span>
<span class="adf-userinfo__detail-profile"
id="identity-email"> {{identityUser.email}} </span>
<a class="adf-userinfo__detail-profile" href="#/profile">
<h2 id="identity-full-name"
class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
<span id="identity-email"> {{identityUser.email}} </span>
<a href="#/profile">
{{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
</div>

24
lib/content-services/src/lib/content-user-info/content-user-info.component.scss
View File

@ -84,10 +84,6 @@
}
&-userinfo-supporting-text {
font-size: var(--theme-body-1-font-size);
font-weight: 400;
letter-spacing: 0;
line-height: 18px;
overflow: hidden;
padding: 32px;
column-count: 2;
@ -99,28 +95,8 @@
}
}
&-userinfo-title {
font-size: var(--theme-title-font-size);
}
&-userinfo__detail-profile {
align-items: flex-start;
font-size: var(--theme-body-1-font-size);
font-weight: 400;
letter-spacing: 0;
line-height: 18px;
display: block;
padding: 0;
margin: 0;
}
&-userinfo__detail-title {
text-overflow: ellipsis;
font-size: var(--theme-subheading-2-font-size);
font-weight: 400;
letter-spacing: 0.04em;
line-height: 20px;
align-items: flex-start;
}
&-userinfo__secondary-info {

14
lib/core/src/lib/identity-user-info/identity-user-info.component.html
View File

@ -24,18 +24,14 @@
<mat-card class="adf-userinfo-card">
<mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div class="adf-userinfo-title" id="identity-username">{{identityUser | fullName}}</div>
<div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<span id="identity-full-name"
class="adf-userinfo__detail-title">{{identityUser | fullName}}</span>
<span class="adf-userinfo__detail-profile"
id="identity-email"> {{identityUser.email}} </span>
<a class="adf-userinfo__detail-profile" href="#/profile">
{{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
<h2 id="identity-full-name"
class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
<span id="identity-email"> {{identityUser.email}} </span>
<a href="#/profile"> {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
</mat-card-content>
</mat-card>

70
lib/core/src/lib/identity-user-info/identity-user-info.component.scss
View File

@ -31,18 +31,6 @@
line-height: var(--adf-identity-user-info-line-height);
}
&-userinfo-profile-image {
background: var(--adf-identity-user-info-background);
text-align: center;
border-radius: 90%;
width: var(--adf-identity-user-info-width);
height: var(--adf-identity-user-info-height);
margin-right: 0;
cursor: pointer;
vertical-align: middle;
margin-left: 0;
}
&-userinfo-profile-container {
display: inline-block;
}
@ -84,51 +72,19 @@
}
&-userinfo-supporting-text {
font-size: var(--theme-body-1-font-size);
font-weight: 400;
letter-spacing: 0;
line-height: 18px;
overflow: hidden;
padding: 32px;
column-count: 2;
display: flex;
justify-content: space-between;
flex-direction: column;
@media screen and (max-width: 599px) {
padding: 10px;
}
}
&-userinfo-title {
font-size: var(--theme-title-font-size);
}
&-userinfo__detail-profile {
align-items: flex-start;
font-size: var(--theme-body-1-font-size);
font-weight: 400;
letter-spacing: 0;
line-height: 18px;
display: block;
padding: 0;
margin: 0;
}
&-userinfo__detail-title {
text-overflow: ellipsis;
font-size: var(--theme-subheading-2-font-size);
font-weight: 400;
letter-spacing: 0.04em;
line-height: 20px;
align-items: flex-start;
}
&-userinfo__secondary-info {
font-size: var(--theme-body-1-font-size);
font-weight: 400;
letter-spacing: 0;
line-height: 18px;
align-items: flex-end;
}
&-userinfo-profile-picture {
@ -141,36 +97,14 @@
margin-right: 8px;
}
&-userinfo-profile-initials {
text-transform: uppercase;
background-size: cover;
background-color: var(--adf-identity-user-info-background);
border-radius: 50%;
height: 80px;
width: 80px;
margin-left: 0;
margin-right: 8px;
font-size: 35px;
font-weight: 400;
letter-spacing: 0;
line-height: 78px;
overflow: hidden;
display: flex;
justify-content: space-around;
}
&-userinfo-button-profile {
display: inline-block;
border: 0;
vertical-align: middle;
}
&-userinfo-detail {
text-align: left;
}
&-hide-tab .mat-tab-label-active {
display: none !important;
display: none;
}
}

22
lib/process-services/src/lib/process-user-info/process-user-info.component.html
View File

@ -52,20 +52,19 @@
[outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="adf-userinfo-title" id="ecm-username">{{ecmUser | fullName}}</div>
<div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<span id="ecm-full-name"
class="adf-userinfo__detail-title">{{ecmUser | fullName}}</span>
<span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
<h2 id="ecm-full-name"
class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
<span id="ecm-email"> {{ecmUser.email}} </span>
</div>
<div class="adf-userinfo-detail">
<span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
<span id="ecm-job-title"
class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
<span id="ecm-job-title"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
</span>
</div>
</div>
@ -84,20 +83,19 @@
<div
[outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="adf-userinfo-title" id="bpm-username">{{bpmUser | fullName}}</div>
<div class="mat-title" id="bpm-username">{{bpmUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<span id="bpm-full-name"
class="adf-userinfo__detail-title">{{ bpmUser | fullName }}</span>
<span class="adf-userinfo__detail-profile" id="bpm-email"> {{bpmUser.email}} </span>
<h2 id="bpm-full-name"
class="adf-userinfo__detail-title">{{ bpmUser | fullName }}</h2>
<span id="bpm-email"> {{bpmUser.email}} </span>
</div>
<div class="adf-userinfo-detail">
<span id="bpm-tenant" class="adf-userinfo__secondary-info">
{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}
<span
class="adf-userinfo__detail-profile">{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
<span>{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
</span>
</div>
</div>

24
lib/process-services/src/lib/process-user-info/process-user-info.component.scss
View File

@ -84,10 +84,6 @@
}
&-userinfo-supporting-text {
font-size: var(--theme-body-1-font-size);
font-weight: 400;
letter-spacing: 0;
line-height: 18px;
overflow: hidden;
padding: 32px;
column-count: 2;
@ -99,28 +95,8 @@
}
}
&-userinfo-title {
font-size: var(--theme-title-font-size);
}
&-userinfo__detail-profile {
align-items: flex-start;
font-size: var(--theme-body-1-font-size);
font-weight: 400;
letter-spacing: 0;
line-height: 18px;
display: block;
padding: 0;
margin: 0;
}
&-userinfo__detail-title {
text-overflow: ellipsis;
font-size: var(--theme-subheading-2-font-size);
font-weight: 400;
letter-spacing: 0.04em;
line-height: 20px;
align-items: flex-start;
}
&-userinfo__secondary-info {