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

[ADF-2169] Destination Picker fixes (#2984)

Browse Source 
* 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
This commit is contained in:
Denys Vuika
2018-02-22 19:21:10 +00:00
committed by GitHub
parent 1a97cc00c0
commit c915a79342
11 changed files with 176 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
demo-shell/src/app/components/files/files.component.html
View File

@@ -1,22 +1,5 @@
<div class="container"> <div class="container">
<div class="adf-recent-container">
<mat-list>
<mat-list-item><mat-icon>history</mat-icon>{{ 'DOCUMENT_LIST.RECENT' | translate }}</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
<adf-document-list
[currentFolderId]="'-recent-'"
locationFormat="/files"
[cardview]="true"
[showHeader]="false"
[maxItems]="5"
(preview)="showFile($event)"
selectionMode="null">
</adf-document-list>
</div>
<div class="adf-site-container-style" id="site-container"> <div class="adf-site-container-style" id="site-container">
<adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false"> <adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false">
</adf-sites-dropdown> </adf-sites-dropdown>

10
lib/content-services/content-node-selector/content-node-selector-panel.component.html
View File

@@ -1,4 +1,4 @@
<div (node-select)="onNodeSelect($event)"> <div class="adf-content-node-selector-content" (node-select)="onNodeSelect($event)">
<mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input"> <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input">
<input matInput <input matInput
id="searchInput" id="searchInput"
@@ -23,14 +23,19 @@
</mat-form-field> </mat-form-field>
<adf-sites-dropdown <adf-sites-dropdown
class="full-width"
(change)="siteChanged($event)" (change)="siteChanged($event)"
[placeholder]="'NODE_SELECTOR.SELECT_LOCATION'" [placeholder]="'NODE_SELECTOR.SELECT_LOCATION'"
[hideMyFiles]="dropdownHideMyFiles" [hideMyFiles]="dropdownHideMyFiles"
[siteList]="dropdownSiteList" [siteList]="dropdownSiteList"
data-automation-id="content-node-selector-sites-combo"></adf-sites-dropdown> data-automation-id="content-node-selector-sites-combo">
</adf-sites-dropdown>
<adf-toolbar> <adf-toolbar>
<adf-toolbar-title> <adf-toolbar-title>
<ng-container *ngIf="showingSearchResults && !chosenNode">
<span class="search-results-label">{{ 'NODE_SELECTOR.SEARCH_RESULTS' | translate }}</span>
</ng-container>
<adf-dropdown-breadcrumb *ngIf="needBreadcrumbs()" <adf-dropdown-breadcrumb *ngIf="needBreadcrumbs()"
class="adf-content-node-selector-content-breadcrumb" class="adf-content-node-selector-content-breadcrumb"
(navigate)="clear()" (navigate)="clear()"
@@ -49,6 +54,7 @@
#documentList #documentList
adf-highlight adf-highlight
adf-highlight-selector="adf-name-location-cell .adf-name-location-cell-name" adf-highlight-selector="adf-name-location-cell .adf-name-location-cell-name"
[showHeader]="false"
[node]="nodes" [node]="nodes"
[maxItems]="pageSize" [maxItems]="pageSize"
[skipCount]="skipCount" [skipCount]="skipCount"

28
lib/content-services/content-node-selector/content-node-selector-panel.component.scss
View File

@@ -3,6 +3,16 @@
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$background: map-get($theme, background); $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 { .adf-content-node-selector {
&-content { &-content {
@@ -44,6 +54,7 @@
} }
.adf-toolbar .mat-toolbar { .adf-toolbar .mat-toolbar {
max-height: 48px;
border-bottom-width: 0; border-bottom-width: 0;
font-size: 14px; font-size: 14px;
@@ -81,12 +92,13 @@
.adf-data-table { .adf-data-table {
border: none; border: none;
.adf-no-content-container { .adf-datatable-selected > svg {
text-align: center; fill: #00bcd4 !important;
} }
thead { .adf-no-content-container {
display: none; text-align: center;
border: none !important;
} }
.adf-data-table-cell { .adf-data-table-cell {
@@ -112,7 +124,7 @@
} }
} }
tbody tr { .adf-datatable-body .adf-datatable-row {
height: auto !important; height: auto !important;
&:first-child { &:first-child {
@@ -151,6 +163,12 @@
&.adf-content-selector-modifier-cell { &.adf-content-selector-modifier-cell {
display: none; display: none;
} }
&--image {
padding-left: 16px;
padding-right: 8px;
padding-bottom: 8px;
}
} }
} }
} }

3
lib/content-services/content-node-selector/content-node-selector-panel.component.ts
View File

@@ -45,7 +45,8 @@ const defaultValidation = () => true;
selector: 'adf-content-node-selector-panel', selector: 'adf-content-node-selector-panel',
styleUrls: ['./content-node-selector-panel.component.scss'], styleUrls: ['./content-node-selector-panel.component.scss'],
templateUrl: './content-node-selector-panel.component.html', 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 { export class ContentNodeSelectorPanelComponent implements OnInit {

17
lib/content-services/content-node-selector/content-node-selector.component.html
View File

@@ -1,10 +1,9 @@
<header matDialogTitle <header
class="adf-content-node-selector-dialog-title" mat-dialog-title
data-automation-id="content-node-selector-title">{{title || data?.title}} data-automation-id="content-node-selector-title">{{title || data?.title}}
</header> </header>
<section matDialogContent <mat-dialog-content>
class="adf-content-node-selector-dialog-content">
<adf-content-node-selector-panel <adf-content-node-selector-panel
[currentFolderId]="currentFolderId || data?.currentFolderId" [currentFolderId]="currentFolderId || data?.currentFolderId"
[dropdownHideMyFiles]="dropdownHideMyFiles || data?.dropdownHideMyFiles" [dropdownHideMyFiles]="dropdownHideMyFiles || data?.dropdownHideMyFiles"
@@ -15,22 +14,20 @@
[breadcrumbTransform]="data?.breadcrumbTransform" [breadcrumbTransform]="data?.breadcrumbTransform"
(select)="onSelect($event)"> (select)="onSelect($event)">
</adf-content-node-selector-panel> </adf-content-node-selector-panel>
</section> </mat-dialog-content>
<footer matDialogActions class="adf-content-node-selector-actions"> <mat-dialog-actions align="end">
<button <button
mat-button mat-button
class="adf-content-node-selector-actions-cancel"
(click)="close()" (click)="close()"
data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }} data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
</button> </button>
<button mat-button <button mat-button
[disabled]="!chosenNode" [disabled]="!chosenNode"
class="adf-content-node-selector-actions-choose" class="choose-action"
(click)="onClick()" (click)="onClick()"
data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }} data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
</button> </button>
</mat-dialog-actions>
</footer>

48
lib/content-services/content-node-selector/content-node-selector.component.scss
View File

@@ -3,27 +3,31 @@
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$background: map-get($theme, background); $background: map-get($theme, background);
.mat-dialog-container {
padding: 0;
}
.adf-content-node-selector-dialog { .adf-content-node-selector-dialog {
&-title,
&-content, .mat-dialog-title {
&-actions { margin-left: 24px;
padding: 16px; 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; margin: 0;
overflow: hidden;
} }
&-content{ .mat-dialog-actions {
padding-top: 0;
}
&-title::first-letter {
text-transform: uppercase;
}
&-actions {
padding: 8px; padding: 8px;
background-color: mat-color($background, background); background-color: mat-color($background, background);
display: flex; display: flex;
@@ -32,18 +36,10 @@
button { button {
text-transform: uppercase; text-transform: uppercase;
}
&:last-child {
margin-bottom: 0px;
}
&-cancel {
font-weight: normal; font-weight: normal;
} }
&-choose { .choose-action {
font-weight: normal;
&[disabled] { &[disabled] {
opacity: 0.6; opacity: 0.6;

2
lib/content-services/content-node-selector/content-node-selector.component.ts
View File

@@ -73,7 +73,7 @@ export class ContentNodeSelectorComponent {
pageSize: number; pageSize: number;
buttonActionName: string; buttonActionName: string;
private chosenNode: MinimalNodeEntryEntity[]; chosenNode: MinimalNodeEntryEntity[];
constructor(@Inject(MAT_DIALOG_DATA) public data: ContentNodeSelectorComponentData) { constructor(@Inject(MAT_DIALOG_DATA) public data: ContentNodeSelectorComponentData) {
this.buttonActionName = data.actionName ? `NODE_SELECTOR.${data.actionName.toUpperCase()}` : 'NODE_SELECTOR.CHOOSE'; this.buttonActionName = data.actionName ? `NODE_SELECTOR.${data.actionName.toUpperCase()}` : 'NODE_SELECTOR.CHOOSE';

1
lib/content-services/i18n/en.json
View File

@@ -45,6 +45,7 @@
"MOVE_ITEM": "Move '{{ name }}' to...", "MOVE_ITEM": "Move '{{ name }}' to...",
"NO_RESULTS": "No results found", "NO_RESULTS": "No results found",
"SEARCH": "Search", "SEARCH": "Search",
"SEARCH_RESULTS": "Search results",
"SELECT_LOCATION": "Select Location" "SELECT_LOCATION": "Select Location"
}, },
"OPERATION": { "OPERATION": {

8
lib/content-services/site-dropdown/sites-dropdown.component.scss
View File

@@ -1,3 +1,7 @@
.adf-site-dropdown { .adf-sites-dropdown {
&.full-width {
.mat-input-container {
width: 100%;
}
}
} }

6
lib/content-services/site-dropdown/sites-dropdown.component.ts
View File

@@ -15,14 +15,16 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { SitesService } from '@alfresco/adf-core'; import { SitesService } from '@alfresco/adf-core';
import { SitePaging, SiteEntry } from 'alfresco-js-api'; import { SitePaging, SiteEntry } from 'alfresco-js-api';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({ @Component({
selector: 'adf-sites-dropdown', selector: 'adf-sites-dropdown',
styleUrls: ['./sites-dropdown.component.scss'], 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 { export class DropdownSitesComponent implements OnInit {

30
lib/core/datatable/components/datatable/datatable.component.scss
View File

@@ -29,9 +29,6 @@
border: 1px solid mat-color($foreground, divider); border: 1px solid mat-color($foreground, divider);
.sr-only {
}
.adf-datatable-body { .adf-datatable-body {
flex-flow: row wrap; flex-flow: row wrap;
display: flex; display: flex;
@@ -239,7 +236,7 @@
.adf-datatable-table-cell, .adf-datatable-table-cell-header { .adf-datatable-table-cell, .adf-datatable-table-cell-header {
padding: 0 $data-table-column-padding 12px $data-table-column-padding; padding: 0 $data-table-column-padding 12px $data-table-column-padding;
text-align: right; text-align: left;
&:first-of-type { &:first-of-type {
padding-left: 24px; padding-left: 24px;
@@ -303,12 +300,6 @@
margin-right: 5px; margin-right: 5px;
vertical-align: sub; vertical-align: sub;
} }
&:hover {
cursor: pointer;
&:before {
color: $data-table-header-sorted-icon-hover-color;
}
}
} }
&.adf-data-table__header--sorted-desc:before { &.adf-data-table__header--sorted-desc:before {
content: "\e5db"; content: "\e5db";
@@ -332,13 +323,15 @@
} }
&--image { &--image {
padding-left: 24px;
padding-right: 24px;
width: 10px;
text-align: left;
.cell-value { .cell-value {
height: 24px; height: 24px;
} }
text-align: left;
img { img {
height: 100%; 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 { .full-width {
width: 100%; width: 100%;
} }
@@ -357,6 +362,7 @@
/* Empty folder */ /* Empty folder */
.adf-no-content-container { .adf-no-content-container {
padding: 0 !important; padding: 0 !important;
border: none !important;
& > img { & > img {
width: 100%; width: 100%;