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

fix userinfo on mobile devices and small refactoring name scss method (#2558)

Browse Source
This commit is contained in:
Eugenio Romano
2017-10-26 22:52:37 +01:00
committed by GitHub
parent 90403bab32
commit 1fd45ba1bd
52 changed files with 152 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
demo-shell-ng2/.gitignore vendored
View File

@@ -52,7 +52,9 @@ app/**/*.d.ts
!app/js/Polyline.js !app/js/Polyline.js
.idea .idea
src/versions.json **/versions.json
dist/ dist/
coverage/ coverage/

22
demo-shell-ng2/src/styles.scss Normal file
View File

@@ -0,0 +1,22 @@
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
body {
font-family: Roboto, Arial, sans-serif;
margin: 0;
}
.basic-container {
padding: 5px;
}
.version-info {
font-size: 8pt;
float: right;
}
/**
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/

15
docs/theming.md
View File

@@ -107,3 +107,18 @@ $dark-theme: mat-dark-theme($primary, $accent, $warn);
} }
``` ```
Any component with the `add-dark-theme` class will use the dark theme, while other components will fall back to the default. Any component with the `add-dark-theme` class will use the dark theme, while other components will fall back to the default.
## Default reusable class
.adf-hide-small // Display none vieweport <960px
.adf-hide-xsmall // Display none vieweport <600px
.adf-primary-color // Primary color
.adf-accent-color // Accent color
.adf-warn-color // Warn color
.adf-primary-contrast-text-color // Default contrast color for primary color
.adf-accent-contrast-text-color // Default contrast color for accent color
.adf-background-color // Dialog background color
.adf-primary-background-color // Primary background color
.adf-accent-background-color // Default background color for accent

2
ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-analytics-report-list-theme($theme) { @mixin adf-analytics-report-list-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
.adf-analytics-report-list { .adf-analytics-report-list {

2
ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-analytics-date-range-widget-theme($theme) { @mixin adf-analytics-date-range-widget-theme($theme) {
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
.adf-date-range-analytics-text-danger { .adf-date-range-analytics-text-danger {

4
ng2-components/ng2-activiti-analytics/styles/index.scss
View File

@@ -2,6 +2,6 @@
@import '../src/components/widgets/date-range/date-range.widget'; @import '../src/components/widgets/date-range/date-range.widget';
@mixin alfresco-activity-analytics-theme($theme) { @mixin alfresco-activity-analytics-theme($theme) {
@include mat-analytics-report-list-theme($theme); @include adf-analytics-report-list-theme($theme);
@include mat-analytics-date-range-widget-theme($theme); @include adf-analytics-date-range-widget-theme($theme);
} }

2
ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-diagram-tooltip-theme($theme) { @mixin adf-diagram-tooltip-theme($theme) {
.adf { .adf {
&-diagram-tooltip { &-diagram-tooltip {

2
ng2-components/ng2-activiti-diagrams/styles/index.scss
View File

@@ -1,5 +1,5 @@
@import '../src/components/tooltip/diagram-tooltip.component'; @import '../src/components/tooltip/diagram-tooltip.component';
@mixin alfresco-activity-diagrams-theme($theme) { @mixin alfresco-activity-diagrams-theme($theme) {
@include mat-diagram-tooltip-theme($theme); @include adf-diagram-tooltip-theme($theme);
} }

2
ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss
View File

@@ -1,5 +1,5 @@
@mixin mat-container-widget-theme($theme) { @mixin adf-container-widget-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$warn: map-get($theme, warn); $warn: map-get($theme, warn);

2
ng2-components/ng2-activiti-form/src/components/widgets/form.scss
View File

@@ -1,6 +1,6 @@
@import './hyperlink/hyperlink.widget'; @import './hyperlink/hyperlink.widget';
@mixin mat-form-theme($theme) { @mixin adf-form-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$warn: map-get($theme, warn); $warn: map-get($theme, warn);

2
ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-people-widget-theme($theme) { @mixin adf-people-widget-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$background: map-get($theme, background); $background: map-get($theme, background);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);

6
ng2-components/ng2-activiti-form/styles/index.scss
View File

@@ -3,8 +3,8 @@
@import '../src/components/widgets/people/people.widget'; @import '../src/components/widgets/people/people.widget';
@mixin alfresco-activity-form-theme($theme) { @mixin alfresco-activity-form-theme($theme) {
@include mat-form-theme($theme); @include adf-form-theme($theme);
@include mat-container-widget-theme($theme); @include adf-container-widget-theme($theme);
@include mat-people-widget-theme($theme); @include adf-people-widget-theme($theme);
} }

2
ng2-components/ng2-activiti-processlist/src/components/process-filters.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-filters-process-theme($theme) { @mixin adf-filters-process-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
.adf { .adf {

2
ng2-components/ng2-activiti-processlist/styles/index.scss
View File

@@ -1,5 +1,5 @@
@import '../src/components/process-filters.component'; @import '../src/components/process-filters.component';
@mixin alfresco-activity-processlist-theme($theme) { @mixin alfresco-activity-processlist-theme($theme) {
@include mat-filters-process-theme($theme); @include adf-filters-process-theme($theme);
} }

2
ng2-components/ng2-activiti-tasklist/src/components/comment-list.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-comment-list-theme($theme) { @mixin adf-comment-list-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
.adf { .adf {

2
ng2-components/ng2-activiti-tasklist/src/components/people-search.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-people-search-theme($theme) { @mixin adf-people-search-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$warn: map-get($theme, warn); $warn: map-get($theme, warn);

2
ng2-components/ng2-activiti-tasklist/src/components/people.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-people-theme($theme) { @mixin adf-people-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
.assignment-header { .assignment-header {

26
ng2-components/ng2-activiti-tasklist/src/components/start-task.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-start-task-theme($theme) { @mixin adf-start-task-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
@@ -45,18 +45,18 @@
adf-start-task { adf-start-task {
.adf { .adf {
&-start-task-input-container .mat-input-wrapper { &-start-task-input-container .mat-input-wrapper {
padding-top: 8px; padding-top: 8px;
} }
&-error-text-container { &-error-text-container {
position: absolute; position: absolute;
width: 81%; width: 81%;
height: 20px; height: 20px;
margin-top: 30px; margin-top: 30px;
} }
&-error-text { &-error-text {
padding: 1px; padding: 1px;
height: 16px; height: 16px;
@@ -65,35 +65,35 @@
float: left; float: left;
color: mat-color($warn); color: mat-color($warn);
} }
&-error-icon { &-error-icon {
float: right; float: right;
font-size: 17px; font-size: 17px;
color: mat-color($warn); color: mat-color($warn);
} }
&-label { &-label {
color: rgb(186, 186, 186);; color: rgb(186, 186, 186);;
} }
&-invalid { &-invalid {
.mat-input-underline { .mat-input-underline {
background-color: #f44336 !important; background-color: #f44336 !important;
} }
.adf-file { .adf-file {
border-color: mat-color($warn); border-color: mat-color($warn);
} }
.mat-input-prefix { .mat-input-prefix {
color: mat-color($warn); color: mat-color($warn);
} }
.adf-input { .adf-input {
border-color: mat-color($warn); border-color: mat-color($warn);
} }
.adf-label { .adf-label {
color: mat-color($warn); color: mat-color($warn);
&:after { &:after {
@@ -101,6 +101,6 @@
} }
} }
} }
} }
} }
} }

2
ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-filters-task-theme($theme) { @mixin adf-filters-task-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
.adf { .adf {

2
ng2-components/ng2-activiti-tasklist/src/components/task-header.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-header-theme($theme) { @mixin adf-header-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
.adf { .adf {

12
ng2-components/ng2-activiti-tasklist/styles/index.scss
View File

@@ -6,10 +6,10 @@
@import '../src/components/task-header.component'; @import '../src/components/task-header.component';
@mixin alfresco-activity-tasklist-theme($theme) { @mixin alfresco-activity-tasklist-theme($theme) {
@include mat-comment-list-theme($theme); @include adf-comment-list-theme($theme);
@include mat-start-task-theme($theme); @include adf-start-task-theme($theme);
@include mat-people-search-theme($theme); @include adf-people-search-theme($theme);
@include mat-people-theme($theme); @include adf-people-theme($theme);
@include mat-filters-task-theme($theme); @include adf-filters-task-theme($theme);
@include mat-header-theme($theme); @include adf-header-theme($theme);
} }

6
ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-accordion-theme($theme) { @mixin adf-accordion-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
.adf-panel-heading { .adf-panel-heading {
@@ -23,9 +23,9 @@
} }
.adf-panel-collapse { .adf-panel-collapse {
display: inline-block; display: inline-block;
} }
.adf-panel-heading-text { .adf-panel-heading-text {
float: left; float: left;
padding-left: 20px; padding-left: 20px;

2
ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-info-drawer-theme($theme) { @mixin adf-info-drawer-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$background: map-get($theme, background); $background: map-get($theme, background);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);

2
ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.scss
View File

@@ -1,5 +1,5 @@
@mixin mat-pagination-theme($theme) { @mixin adf-pagination-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$adf-pagination--height: 48px; $adf-pagination--height: 48px;

2
ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.scss
View File

@@ -1,5 +1,5 @@
@mixin mat-adf-toolbar-theme($theme) { @mixin adf-adf-toolbar-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$adf-toolbar-height: 48px; $adf-toolbar-height: 48px;
$adf-toolbar-font-size: 14px; $adf-toolbar-font-size: 14px;

2
ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-card-view-dateitem-theme($theme) { @mixin adf-card-view-dateitem-theme($theme) {
.adf { .adf {
&-invisible-date-input { &-invisible-date-input {

2
ng2-components/ng2-alfresco-core/src/components/view/card-view-textitem.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-card-view-textitem-theme($theme) { @mixin adf-card-view-textitem-theme($theme) {
.adf { .adf {
&-textitem-icon { &-textitem-icon {

2
ng2-components/ng2-alfresco-core/src/components/view/card-view.component.scss
View File

@@ -1,5 +1,5 @@
@mixin mat-card-view-theme($theme) { @mixin adf-card-view-theme($theme) {
.adf { .adf {
&-property-list { &-property-list {

14
ng2-components/ng2-alfresco-core/styles/_default-class.scss Normal file
View File

@@ -0,0 +1,14 @@
@mixin adf-default-class($theme) {
.adf-hide-small {
@media screen and ($mat-small) {
display: none !important;
}
}
.adf-hide-xsmall {
@media screen and ($mat-xsmall) {
display: none !important;
}
}
}

18
ng2-components/ng2-alfresco-core/styles/_index.scss
View File

@@ -1,4 +1,5 @@
@import './theme-colors'; @import './theme-colors';
@import './default-class';
@import '../src/components/collapsable/accordion-group.component'; @import '../src/components/collapsable/accordion-group.component';
@import '../src/components/view/card-view-textitem.component'; @import '../src/components/view/card-view-textitem.component';
@import '../src/components/view/card-view-dateitem.component'; @import '../src/components/view/card-view-dateitem.component';
@@ -8,12 +9,13 @@
@import '../src/components/info-drawer/info-drawer-layout.component'; @import '../src/components/info-drawer/info-drawer-layout.component';
@mixin alfresco-core-theme($theme) { @mixin alfresco-core-theme($theme) {
@include mat-accordion-theme($theme); @include adf-accordion-theme($theme);
@include mat-card-view-textitem-theme($theme); @include adf-card-view-textitem-theme($theme);
@include mat-card-view-dateitem-theme($theme); @include adf-card-view-dateitem-theme($theme);
@include mat-card-view-theme($theme); @include adf-card-view-theme($theme);
@include mat-adf-toolbar-theme($theme); @include adf-adf-toolbar-theme($theme);
@include mat-info-drawer-theme($theme); @include adf-info-drawer-theme($theme);
@include mat-pagination-theme($theme); @include adf-pagination-theme($theme);
@include mat-colors-theme($theme); @include adf-colors-theme($theme);
@include adf-default-class($theme);
} }

4
ng2-components/ng2-alfresco-core/styles/_theme-colors.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-colors-theme($theme) { @mixin adf-colors-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
@@ -18,7 +18,7 @@
color: mat-color($warn) !important; color: mat-color($warn) !important;
} }
.adf-background-color { .adf-dialog-background-color {
background: mat-color($background, dialog) !important; background: mat-color($background, dialog) !important;
} }

2
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss
View File

@@ -1,5 +1,5 @@
@mixin mat-datatable-theme($theme) { @mixin adf-datatable-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$background: map-get($theme, background); $background: map-get($theme, background);
$primary: map-get($theme, primary); $primary: map-get($theme, primary);

2
ng2-components/ng2-alfresco-datatable/styles/index.scss
View File

@@ -1,5 +1,5 @@
@import '../src/components/datatable/datatable.component'; @import '../src/components/datatable/datatable.component';
@mixin alfresco-datatable-theme($theme) { @mixin alfresco-datatable-theme($theme) {
@include mat-datatable-theme($theme); @include adf-datatable-theme($theme);
} }

2
ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.scss
View File

@@ -1,6 +1,6 @@
$breadcrumb-chevron-spacer: 2px; $breadcrumb-chevron-spacer: 2px;
@mixin mat-breadcrumb-theme($theme) { @mixin adf-breadcrumb-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$warn: map-get($theme, warn); $warn: map-get($theme, warn);

2
ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.scss
View File

@@ -1,5 +1,5 @@
@mixin mat-breadcrumb-dropdown-theme($theme) { @mixin adf-breadcrumb-dropdown-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$dropdownHorizontalOffset: 30px; $dropdownHorizontalOffset: 30px;

2
ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-content-node-selector-theme($theme) { @mixin adf-content-node-selector-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);

2
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-document-list-theme($theme) { @mixin adf-document-list-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
.document-list_empty_template { .document-list_empty_template {

8
ng2-components/ng2-alfresco-documentlist/styles/index.scss
View File

@@ -4,8 +4,8 @@
@import '../src/components/document-list.component'; @import '../src/components/document-list.component';
@mixin alfresco-documentlist-theme($theme) { @mixin alfresco-documentlist-theme($theme) {
@include mat-breadcrumb-theme($theme); @include adf-breadcrumb-theme($theme);
@include mat-breadcrumb-dropdown-theme($theme); @include adf-breadcrumb-dropdown-theme($theme);
@include mat-content-node-selector-theme($theme) ; @include adf-content-node-selector-theme($theme) ;
@include mat-document-list-theme($theme) ; @include adf-document-list-theme($theme) ;
} }

2
ng2-components/ng2-alfresco-login/src/components/login.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-login-theme($theme) { @mixin adf-login-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$warn: map-get($theme, warn); $warn: map-get($theme, warn);

2
ng2-components/ng2-alfresco-login/styles/index.scss
View File

@@ -1,5 +1,5 @@
@import '../src/components/login.component'; @import '../src/components/login.component';
@mixin alfresco-login-theme($theme) { @mixin alfresco-login-theme($theme) {
@include mat-login-theme($theme); @include adf-login-theme($theme);
} }

2
ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-search-autocomplete-theme($theme) { @mixin adf-search-autocomplete-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$warn: map-get($theme, warn); $warn: map-get($theme, warn);

2
ng2-components/ng2-alfresco-search/src/components/search-control.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-search-control-theme($theme) { @mixin adf-search-control-theme($theme) {
$background: map-get($theme, background); $background: map-get($theme, background);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);

4
ng2-components/ng2-alfresco-search/styles/index.scss
View File

@@ -2,6 +2,6 @@
@import '../src/components/search-control.component'; @import '../src/components/search-control.component';
@mixin alfresco-search-theme($theme) { @mixin alfresco-search-theme($theme) {
@include mat-search-control-theme($theme); @include adf-search-control-theme($theme);
@include mat-search-autocomplete-theme($theme); @include adf-search-autocomplete-theme($theme);
} }

2
ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.scss
View File

@@ -1,5 +1,5 @@
@mixin mat-upload-dialog-theme($theme) { @mixin adf-upload-dialog-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$background: map-get($theme, background); $background: map-get($theme, background);

2
ng2-components/ng2-alfresco-upload/src/components/file-uploading-list-row.component.scss
View File

@@ -1,5 +1,5 @@
@mixin mat-file-uploading-row-theme($theme) { @mixin adf-file-uploading-row-theme($theme) {
$background: map-get($theme, background); $background: map-get($theme, background);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$primary: map-get($theme, primary); $primary: map-get($theme, primary);

4
ng2-components/ng2-alfresco-upload/styles/index.scss
View File

@@ -2,6 +2,6 @@
@import '../src/components/file-uploading-dialog.component'; @import '../src/components/file-uploading-dialog.component';
@mixin alfresco-upload-theme($theme) { @mixin alfresco-upload-theme($theme) {
@include mat-file-uploading-row-theme($theme); @include adf-file-uploading-row-theme($theme);
@include mat-upload-dialog-theme($theme); @include adf-upload-dialog-theme($theme);
} }

12
ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
View File

@@ -26,11 +26,11 @@
<mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY" [overlapTrigger]="false" class="adf-userinfo-menu"> <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY" [overlapTrigger]="false" class="adf-userinfo-menu">
<mat-tab-group id="tab-group-env" (click)="stopClosing($event)" <mat-tab-group id="tab-group-env" (click)="stopClosing($event)"
class="adf-userinfo-tab" [class.adf-hide-tab]="!bpmUser || !ecmUser"> class="adf-userinfo-tab" [class.adf-hide-tab]="!bpmUser || !ecmUser">
<mat-tab id="ecm-panel" label="Content Services" *ngIf="ecmUser"> <mat-tab id="ecm-panel" label="{{ 'USER_PROFILE.TAB.CS' | translate }}" *ngIf="ecmUser">
<mat-card class="adf-userinfo-card"> <mat-card class="adf-userinfo-card">
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'"> <mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'">
<div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials'"></div> <div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
<div *ngIf="ecmUser.avatarId" class="adf-userinfo-profile-container"> <div *ngIf="ecmUser.avatarId" class="adf-userinfo-profile-container adf-hide-small">
<img class="adf-userinfo-profile-picture" id="ecm-user-detail-image" <img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
alt="ecm-profile-image" [src]="ecmUserImage" /> alt="ecm-profile-image" [src]="ecmUserImage" />
</div> </div>
@@ -52,11 +52,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</mat-tab> </mat-tab>
<mat-tab label="Process Services" id="bpm-panel" *ngIf="bpmUser"> <mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}" *ngIf="bpmUser">
<mat-card class="adf-userinfo-card"> <mat-card class="adf-userinfo-card">
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'"> <mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials'"></div> <div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
<img *ngIf="bpmUser.pictureId" class="adf-userinfo-profile-picture" id="bpm-user-detail-image" <img *ngIf="bpmUser.pictureId" class="adf-userinfo-profile-picture adf-hide-small" id="bpm-user-detail-image"
alt="bpm-profile-image" [src]="bpmUserImage"/> alt="bpm-profile-image" [src]="bpmUserImage"/>
<div class="adf-userinfo-title" id="bpm-username">{{bpmUser.fullNameDisplay}}</div> <div class="adf-userinfo-title" id="bpm-username">{{bpmUser.fullNameDisplay}}</div>
</mat-card-header> </mat-card-header>

4
ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.scss
View File

@@ -1,4 +1,4 @@
@mixin mat-userinfo-theme($theme) { @mixin adf-userinfo-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
@@ -145,6 +145,7 @@
} }
&-userinfo-profile-initials { &-userinfo-profile-initials {
text-transform: uppercase;
background-size: cover; background-size: cover;
background: mat-color($primary, 300); background: mat-color($primary, 300);
border-radius: 50%; border-radius: 50%;
@@ -180,6 +181,7 @@
@media only screen and (min-device-width: 480px) { @media only screen and (min-device-width: 480px) {
.mat-menu-panel.adf-userinfo-menu { .mat-menu-panel.adf-userinfo-menu {
max-height: 450px; max-height: 450px;
min-width: 4500px;
min-width: 450px; min-width: 450px;
overflow: auto; overflow: auto;
padding: 0; padding: 0;

11
ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
View File

@@ -59,9 +59,6 @@ export class UserInfoComponent implements OnInit {
constructor(private ecmUserService: EcmUserService, constructor(private ecmUserService: EcmUserService,
private bpmUserService: BpmUserService, private bpmUserService: BpmUserService,
private authService: AlfrescoAuthenticationService) { private authService: AlfrescoAuthenticationService) {
authService.onLogin.subscribe((response) => {
this.getUserInfo();
});
} }
ngOnInit() { ngOnInit() {
@@ -69,15 +66,15 @@ export class UserInfoComponent implements OnInit {
} }
getUserInfo() { getUserInfo() {
this.getEcmUserInfo(); this.loadEcmUserInfo();
this.getBpmUserInfo(); this.loadBpmUserInfo();
} }
isLoggedIn() { isLoggedIn() {
return this.authService.isLoggedIn(); return this.authService.isLoggedIn();
} }
getEcmUserInfo(): void { loadEcmUserInfo(): void {
if (this.authService.isEcmLoggedIn()) { if (this.authService.isEcmLoggedIn()) {
this.ecmUserService.getCurrentUserInfo() this.ecmUserService.getCurrentUserInfo()
.subscribe((res) => { .subscribe((res) => {
@@ -91,7 +88,7 @@ export class UserInfoComponent implements OnInit {
} }
} }
getBpmUserInfo(): void { loadBpmUserInfo(): void {
if (this.authService.isBpmLoggedIn()) { if (this.authService.isBpmLoggedIn()) {
this.bpmUserService.getCurrentUserInfo() this.bpmUserService.getCurrentUserInfo()
.subscribe((res) => { .subscribe((res) => {

4
ng2-components/ng2-alfresco-userinfo/src/i18n/en.json
View File

@@ -7,6 +7,10 @@
"BPM": { "BPM": {
"TENANT": "Tenant" "TENANT": "Tenant"
} }
},
"TAB" : {
"CS": "Content Services",
"PS": "Process Services"
} }
} }
} }

6
ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.ts
View File

@@ -39,7 +39,7 @@ export class EcmUserService {
* @param userName - the user name * @param userName - the user name
*/ */
getUserInfo(userName: string): Observable<EcmUserModel> { getUserInfo(userName: string): Observable<EcmUserModel> {
return Observable.fromPromise(this.callApiGetPersonInfo(userName)) return Observable.fromPromise(this.apiService.getInstance().core.peopleApi.getPerson(userName))
.map(data => <EcmUserModel> data['entry']) .map(data => <EcmUserModel> data['entry'])
.catch(err => this.handleError(err)); .catch(err => this.handleError(err));
} }
@@ -48,10 +48,6 @@ export class EcmUserService {
return this.getUserInfo('-me-'); return this.getUserInfo('-me-');
} }
private callApiGetPersonInfo(userName: string, opts?: any) {
return this.apiService.getInstance().core.peopleApi.getPerson(userName, opts);
}
getUserProfileImage(avatarId: string) { getUserProfileImage(avatarId: string) {
if (avatarId) { if (avatarId) {
let nodeObj = {entry: {id: avatarId}}; let nodeObj = {entry: {id: avatarId}};

2
ng2-components/ng2-alfresco-userinfo/styles/index.scss
View File

@@ -1,5 +1,5 @@
@import '../src/components/user-info.component'; @import '../src/components/user-info.component';
@mixin alfresco-userinfo-theme($theme) { @mixin alfresco-userinfo-theme($theme) {
@include mat-userinfo-theme($theme); @include adf-userinfo-theme($theme);
} }