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

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

@@ -1,96 +1,102 @@
<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">
<input matInput
id="searchInput"
[formControl]="searchInput"
type="text"
placeholder="{{'NODE_SELECTOR.SEARCH' | translate}}"
[value]="searchTerm"
data-automation-id="content-node-selector-search-input">
<input matInput
id="searchInput"
[formControl]="searchInput"
type="text"
placeholder="{{'NODE_SELECTOR.SEARCH' | translate}}"
[value]="searchTerm"
data-automation-id="content-node-selector-search-input">
<mat-icon *ngIf="searchTerm.length > 0"
matSuffix (click)="clear()"
class="adf-content-node-selector-content-input-icon"
data-automation-id="content-node-selector-search-clear">clear
</mat-icon>
<mat-icon *ngIf="searchTerm.length > 0"
matSuffix (click)="clear()"
class="adf-content-node-selector-content-input-icon"
data-automation-id="content-node-selector-search-clear">clear
</mat-icon>
<mat-icon *ngIf="searchTerm.length === 0"
matSuffix
class="adf-content-node-selector-content-input-icon"
data-automation-id="content-node-selector-search-icon">search
</mat-icon>
<mat-icon *ngIf="searchTerm.length === 0"
matSuffix
class="adf-content-node-selector-content-input-icon"
data-automation-id="content-node-selector-search-icon">search
</mat-icon>
</mat-form-field>
</mat-form-field>
<adf-sites-dropdown
(change)="siteChanged($event)"
[placeholder]="'NODE_SELECTOR.SELECT_LOCATION'"
[hideMyFiles]="dropdownHideMyFiles"
[siteList]="dropdownSiteList"
data-automation-id="content-node-selector-sites-combo"></adf-sites-dropdown>
<adf-sites-dropdown
class="full-width"
(change)="siteChanged($event)"
[placeholder]="'NODE_SELECTOR.SELECT_LOCATION'"
[hideMyFiles]="dropdownHideMyFiles"
[siteList]="dropdownSiteList"
data-automation-id="content-node-selector-sites-combo">
</adf-sites-dropdown>
<adf-toolbar>
<adf-toolbar-title>
<adf-dropdown-breadcrumb *ngIf="needBreadcrumbs()"
class="adf-content-node-selector-content-breadcrumb"
(navigate)="clear()"
[target]="documentList"
[folderNode]="breadcrumbFolderNode"
data-automation-id="content-node-selector-content-breadcrumb">
</adf-dropdown-breadcrumb>
</adf-toolbar-title>
</adf-toolbar>
<adf-toolbar>
<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()"
class="adf-content-node-selector-content-breadcrumb"
(navigate)="clear()"
[target]="documentList"
[folderNode]="breadcrumbFolderNode"
data-automation-id="content-node-selector-content-breadcrumb">
</adf-dropdown-breadcrumb>
</adf-toolbar-title>
</adf-toolbar>
<div
class="adf-content-node-selector-content-list"
[class.adf-content-node-selector-content-list-searchLayout]="showingSearchResults"
data-automation-id="content-node-selector-content-list">
<adf-document-list
#documentList
adf-highlight
adf-highlight-selector="adf-name-location-cell .adf-name-location-cell-name"
[node]="nodes"
[maxItems]="pageSize"
[skipCount]="skipCount"
[enableInfiniteScrolling]="infiniteScroll"
[rowFilter]="rowFilter"
[imageResolver]="imageResolver"
[currentFolderId]="folderIdToShow"
selectionMode="single"
[contextMenuActions]="false"
[contentActions]="false"
[allowDropFiles]="false"
(folderChange)="onFolderChange()"
(ready)="onFolderLoaded($event)"
(node-dblclick)="onNodeDoubleClick($event)"
data-automation-id="content-node-selector-document-list">
<empty-folder-content>
<ng-template>
<div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div>
<div
class="adf-content-node-selector-content-list"
[class.adf-content-node-selector-content-list-searchLayout]="showingSearchResults"
data-automation-id="content-node-selector-content-list">
<adf-document-list
#documentList
adf-highlight
adf-highlight-selector="adf-name-location-cell .adf-name-location-cell-name"
[showHeader]="false"
[node]="nodes"
[maxItems]="pageSize"
[skipCount]="skipCount"
[enableInfiniteScrolling]="infiniteScroll"
[rowFilter]="rowFilter"
[imageResolver]="imageResolver"
[currentFolderId]="folderIdToShow"
selectionMode="single"
[contextMenuActions]="false"
[contentActions]="false"
[allowDropFiles]="false"
(folderChange)="onFolderChange()"
(ready)="onFolderLoaded($event)"
(node-dblclick)="onNodeDoubleClick($event)"
data-automation-id="content-node-selector-document-list">
<empty-folder-content>
<ng-template>
<div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div>
</ng-template>
</empty-folder-content>
<data-columns>
<data-column key="$thumbnail" type="image"></data-column>
<data-column key="name" type="text" class="full-width ellipsis-cell">
<ng-template let-context="$implicit">
<adf-name-location-cell [data]="context.data" [column]="context.col" [row]="context.row"></adf-name-location-cell>
</ng-template>
</empty-folder-content>
</data-column>
<data-column key="modifiedAt" type="date" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
<data-column key="modifiedByUser.displayName" type="text" class="adf-content-selector-modifier-cell"></data-column>
<data-column key="visibility" type="text"></data-column>
</data-columns>
<data-columns>
<data-column key="$thumbnail" type="image"></data-column>
<data-column key="name" type="text" class="full-width ellipsis-cell">
<ng-template let-context="$implicit">
<adf-name-location-cell [data]="context.data" [column]="context.col" [row]="context.row"></adf-name-location-cell>
</ng-template>
</data-column>
<data-column key="modifiedAt" type="date" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
<data-column key="modifiedByUser.displayName" type="text" class="adf-content-selector-modifier-cell"></data-column>
<data-column key="visibility" type="text"></data-column>
</data-columns>
</adf-document-list>
</adf-document-list>
<adf-infinite-pagination
[pagination]="pagination"
[pageSize]="pageSize"
[loading]="loadingSearchResults"
(loadMore)="getNextPageOfSearch($event)"
data-automation-id="content-node-selector-search-pagination">
{{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
</adf-infinite-pagination>
</div>
<adf-infinite-pagination
[pagination]="pagination"
[pageSize]="pageSize"
[loading]="loadingSearchResults"
(loadMore)="getNextPageOfSearch($event)"
data-automation-id="content-node-selector-search-pagination">
{{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
</adf-infinite-pagination>
</div>
</div>

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

@@ -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;
}
}
}
}

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',
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 {

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

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

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

@@ -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;

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

@@ -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';