From c915a7934226b21443dabe29919685404f02858e Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Thu, 22 Feb 2018 19:21:10 +0000 Subject: [PATCH] [ADF-2169] Destination Picker fixes (#2984) * style and layout fixes for Destination Picker * fix for binding to private member, remove recent demo * add 'search results' label, code fixes * selected icon style fixes * style fixes * style fixes * fix column header align issue * style fixes for empty content * icon column style fixes --- .../app/components/files/files.component.html | 17 -- ...content-node-selector-panel.component.html | 176 +++++++++--------- ...content-node-selector-panel.component.scss | 28 ++- .../content-node-selector-panel.component.ts | 3 +- .../content-node-selector.component.html | 19 +- .../content-node-selector.component.scss | 48 +++-- .../content-node-selector.component.ts | 2 +- lib/content-services/i18n/en.json | 1 + .../sites-dropdown.component.scss | 8 +- .../site-dropdown/sites-dropdown.component.ts | 6 +- .../datatable/datatable.component.scss | 30 +-- 11 files changed, 176 insertions(+), 162 deletions(-) diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html index 7815dbfbff..a279618558 100644 --- a/demo-shell/src/app/components/files/files.component.html +++ b/demo-shell/src/app/components/files/files.component.html @@ -1,22 +1,5 @@
-
- - history{{ 'DOCUMENT_LIST.RECENT' | translate }} - - - - - -
-
diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.html b/lib/content-services/content-node-selector/content-node-selector-panel.component.html index 3516277f7b..e0e6571cb7 100644 --- a/lib/content-services/content-node-selector/content-node-selector-panel.component.html +++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.html @@ -1,96 +1,102 @@ -
+
- + - clear - + clear + - search - + search + - + - + + - - - - - - + + + + {{ 'NODE_SELECTOR.SEARCH_RESULTS' | translate }} + + + + + -
- - - -
{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}
+
+ + + +
{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}
+
+
+ + + + + + - + + + + + - - - - - - - - - - - +
- - - - {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }} - -
+ + {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }} + +
diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.scss b/lib/content-services/content-node-selector/content-node-selector-panel.component.scss index 50024727fc..e2f1d1d1b3 100644 --- a/lib/content-services/content-node-selector/content-node-selector-panel.component.scss +++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.scss @@ -3,6 +3,16 @@ $foreground: map-get($theme, foreground); $background: map-get($theme, background); + .search-results-label { + font-weight: 600; + font-size: 14px; + font-style: normal; + font-stretch: normal; + line-height: 1.43; + letter-spacing: -0.2px; + color: mat-color($foreground, base, 0.87); + } + .adf-content-node-selector { &-content { @@ -44,6 +54,7 @@ } .adf-toolbar .mat-toolbar { + max-height: 48px; border-bottom-width: 0; font-size: 14px; @@ -81,12 +92,13 @@ .adf-data-table { border: none; - .adf-no-content-container { - text-align: center; + .adf-datatable-selected > svg { + fill: #00bcd4 !important; } - thead { - display: none; + .adf-no-content-container { + text-align: center; + border: none !important; } .adf-data-table-cell { @@ -112,7 +124,7 @@ } } - tbody tr { + .adf-datatable-body .adf-datatable-row { height: auto !important; &:first-child { @@ -151,6 +163,12 @@ &.adf-content-selector-modifier-cell { display: none; } + + &--image { + padding-left: 16px; + padding-right: 8px; + padding-bottom: 8px; + } } } } diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.ts b/lib/content-services/content-node-selector/content-node-selector-panel.component.ts index abb4c1de14..3cbdfc4f7c 100644 --- a/lib/content-services/content-node-selector/content-node-selector-panel.component.ts +++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.ts @@ -45,7 +45,8 @@ const defaultValidation = () => true; selector: 'adf-content-node-selector-panel', styleUrls: ['./content-node-selector-panel.component.scss'], templateUrl: './content-node-selector-panel.component.html', - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + host: { 'class': 'adf-content-node-selector-panel' } }) export class ContentNodeSelectorPanelComponent implements OnInit { diff --git a/lib/content-services/content-node-selector/content-node-selector.component.html b/lib/content-services/content-node-selector/content-node-selector.component.html index 26d6f8015a..aa423d9d37 100644 --- a/lib/content-services/content-node-selector/content-node-selector.component.html +++ b/lib/content-services/content-node-selector/content-node-selector.component.html @@ -1,10 +1,9 @@ -
{{title || data?.title}} +
{{title || data?.title}}
-
+ -
+ - + diff --git a/lib/content-services/content-node-selector/content-node-selector.component.scss b/lib/content-services/content-node-selector/content-node-selector.component.scss index c00ce02870..d9319282de 100644 --- a/lib/content-services/content-node-selector/content-node-selector.component.scss +++ b/lib/content-services/content-node-selector/content-node-selector.component.scss @@ -3,27 +3,31 @@ $foreground: map-get($theme, foreground); $background: map-get($theme, background); - .mat-dialog-container { - padding: 0; - } - .adf-content-node-selector-dialog { - &-title, - &-content, - &-actions { - padding: 16px; + + .mat-dialog-title { + margin-left: 24px; + margin-right: 24px; + font-size: 20px; + font-weight: 600; + font-style: normal; + font-stretch: normal; + line-height: 1.6; + letter-spacing: -0.5px; + color: mat-color($foreground, text, 0.87); + } + + .mat-dialog-container { + padding-left: 0; + padding-right: 0; + } + + .mat-dialog-content { margin: 0; + overflow: hidden; } - &-content{ - padding-top: 0; - } - - &-title::first-letter { - text-transform: uppercase; - } - - &-actions { + .mat-dialog-actions { padding: 8px; background-color: mat-color($background, background); display: flex; @@ -32,18 +36,10 @@ button { text-transform: uppercase; - } - - &:last-child { - margin-bottom: 0px; - } - - &-cancel { font-weight: normal; } - &-choose { - font-weight: normal; + .choose-action { &[disabled] { opacity: 0.6; diff --git a/lib/content-services/content-node-selector/content-node-selector.component.ts b/lib/content-services/content-node-selector/content-node-selector.component.ts index f17bc989a9..6c0d849085 100644 --- a/lib/content-services/content-node-selector/content-node-selector.component.ts +++ b/lib/content-services/content-node-selector/content-node-selector.component.ts @@ -73,7 +73,7 @@ export class ContentNodeSelectorComponent { pageSize: number; buttonActionName: string; - private chosenNode: MinimalNodeEntryEntity[]; + chosenNode: MinimalNodeEntryEntity[]; constructor(@Inject(MAT_DIALOG_DATA) public data: ContentNodeSelectorComponentData) { this.buttonActionName = data.actionName ? `NODE_SELECTOR.${data.actionName.toUpperCase()}` : 'NODE_SELECTOR.CHOOSE'; diff --git a/lib/content-services/i18n/en.json b/lib/content-services/i18n/en.json index 601b0d42cb..90165c0a18 100644 --- a/lib/content-services/i18n/en.json +++ b/lib/content-services/i18n/en.json @@ -45,6 +45,7 @@ "MOVE_ITEM": "Move '{{ name }}' to...", "NO_RESULTS": "No results found", "SEARCH": "Search", + "SEARCH_RESULTS": "Search results", "SELECT_LOCATION": "Select Location" }, "OPERATION": { diff --git a/lib/content-services/site-dropdown/sites-dropdown.component.scss b/lib/content-services/site-dropdown/sites-dropdown.component.scss index 954d08cd72..e40b3adf27 100644 --- a/lib/content-services/site-dropdown/sites-dropdown.component.scss +++ b/lib/content-services/site-dropdown/sites-dropdown.component.scss @@ -1,3 +1,7 @@ -.adf-site-dropdown { - +.adf-sites-dropdown { + &.full-width { + .mat-input-container { + width: 100%; + } + } } diff --git a/lib/content-services/site-dropdown/sites-dropdown.component.ts b/lib/content-services/site-dropdown/sites-dropdown.component.ts index 5ff428dbc9..38ef9c85e4 100644 --- a/lib/content-services/site-dropdown/sites-dropdown.component.ts +++ b/lib/content-services/site-dropdown/sites-dropdown.component.ts @@ -15,14 +15,16 @@ * limitations under the License. */ +import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; import { SitesService } from '@alfresco/adf-core'; import { SitePaging, SiteEntry } from 'alfresco-js-api'; -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ selector: 'adf-sites-dropdown', styleUrls: ['./sites-dropdown.component.scss'], - templateUrl: './sites-dropdown.component.html' + templateUrl: './sites-dropdown.component.html', + encapsulation: ViewEncapsulation.None, + host: { 'class': 'adf-sites-dropdown' } }) export class DropdownSitesComponent implements OnInit { diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss index 566545937d..54cefdcff8 100644 --- a/lib/core/datatable/components/datatable/datatable.component.scss +++ b/lib/core/datatable/components/datatable/datatable.component.scss @@ -29,9 +29,6 @@ border: 1px solid mat-color($foreground, divider); - .sr-only { - } - .adf-datatable-body { flex-flow: row wrap; display: flex; @@ -239,7 +236,7 @@ .adf-datatable-table-cell, .adf-datatable-table-cell-header { padding: 0 $data-table-column-padding 12px $data-table-column-padding; - text-align: right; + text-align: left; &:first-of-type { padding-left: 24px; @@ -303,12 +300,6 @@ margin-right: 5px; vertical-align: sub; } - &:hover { - cursor: pointer; - &:before { - color: $data-table-header-sorted-icon-hover-color; - } - } } &.adf-data-table__header--sorted-desc:before { content: "\e5db"; @@ -332,13 +323,15 @@ } &--image { + padding-left: 24px; + padding-right: 24px; + width: 10px; + text-align: left; .cell-value { height: 24px; } - text-align: left; - img { height: 100%; } @@ -350,6 +343,18 @@ } } + .adf-location-cell { + a { + text-decoration: none; + color: mat-color($foreground, text); + + &:hover { + color: #2196F3; + text-decoration: underline; + } + } + } + .full-width { width: 100%; } @@ -357,6 +362,7 @@ /* Empty folder */ .adf-no-content-container { padding: 0 !important; + border: none !important; & > img { width: 100%;