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-1434] Theming ADF component (#2228)

Browse Source 
* start custom theming adf

* demo shell cleaning

* login mdl cleaning

* uploader mdl cleaning

* prebuilt themes

* theme picker in demo shell

* clean custom colors and mdl

* fix rebase errors

* theming from color style guide

* dev default theme orange purple

* fix color accent inverted in picker

* fix test and add colors classes

* fix tag component theming issues

* fix datatable theming

* add theming guides
This commit is contained in:
Eugenio Romano
2017-08-19 01:06:35 +01:00
committed by Mario Romano
parent f6f94fbd0c
commit d4e64ac438
149 changed files with 31228 additions and 3136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -67,6 +67,7 @@
<footer class="upload-dialog__actions">
<button
color="primary"
*ngIf="!uploadList.isUploadCompleted() && !uploadList.isUploadCancelled()"
md-button
(click)="uploadList.cancelAllFiles($event)">
@@ -76,6 +77,7 @@
<button
*ngIf="uploadList.isUploadCompleted() || uploadList.isUploadCancelled()"
md-button
color="primary"
(click)="close($event)">
{{ 'ADF_FILE_UPLOAD.BUTTON.CLOSE' | translate }}
</button>

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

@@ -1,13 +1,16 @@
@import 'theming';
@import 'colors';
:host {
& .upload-dialog {
color: $alfresco-secondary-text-color;
@mixin mat-upload-dialog-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
.upload-dialog {
background: mat-color($background, dialog);
color: mat-color($foreground, text, 0.54);
position: fixed;
bottom: 20px;
width: 40%;
background: $alfresco-white;
box-shadow: 1px 5px 15px $alfresco-drop-shadow;
box-shadow: 1px 5px 15px #888888;
&--position-left {
left: 25px;
@@ -43,8 +46,8 @@
&__content {
overflow: auto;
max-height: 195px;
border-top: 1px solid $alfresco-dark-color--hue-1;
border-bottom: 1px solid $alfresco-dark-color--hue-1;
border-top: 1px solid mat-color($foreground, text, 0.14);
border-bottom: 1px solid mat-color($foreground, text, 0.14);
}
&__actions {
@@ -54,12 +57,11 @@
& > button {
text-transform: uppercase;
color: $alfresco-primary-accent--default;
}
}
}
& md-icon {
& md-icon {
cursor: pointer;
}
}
}

100
ng2-components/ng2-alfresco-upload/src/components/file-uploading-list-row.component.html
View File

@@ -1,60 +1,62 @@
<md-icon
md-list-icon
class="list-row__type">
insert_drive_file
</md-icon>
<div class="adf-file-uploading-list">
<md-icon
md-list-icon
class="list-row__type">
insert_drive_file
</md-icon>
<span
class="list-row__name"
title="{{ file.name }}">
{{ file.name }}
</span>
<span
class="list-row__name"
title="{{ file.name }}">
{{ file.name }}
</span>
<div
*ngIf="file.status === FileUploadStatus.Progress"
(click)="onCancel(file)"
class="list-row__group list-row__group--toggle"
title="{{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_FILE' | translate }}">
<div
*ngIf="file.status === FileUploadStatus.Progress"
(click)="onCancel(file)"
class="list-row__group list-row__group--toggle"
title="{{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_FILE' | translate }}">
<span class="list-row__status">
{{ file.progress.loaded | adfFileSize }} / {{ file.progress.total | adfFileSize }}
</span>
<md-icon
md-list-icon
class="list-row__action list-row__action--cancel">
clear
</md-icon>
</div>
<md-icon
md-list-icon
class="list-row__action list-row__action--cancel">
clear
</md-icon>
</div>
<div
*ngIf="file.status === FileUploadStatus.Complete"
(click)="onRemove(file)"
class="list-row__group list-row__group--toggle"
title="{{ 'ADF_FILE_UPLOAD.BUTTON.REMOVE_FILE' | translate }}">
<md-icon
md-list-icon
class="list-row__status list-row__status--done">
check_circle
</md-icon>
<div
*ngIf="file.status === FileUploadStatus.Complete"
(click)="onRemove(file)"
class="list-row__group list-row__group--toggle"
title="{{ 'ADF_FILE_UPLOAD.BUTTON.REMOVE_FILE' | translate }}">
<md-icon
md-list-icon
class="list-row__status list-row__status--done">
check_circle
</md-icon>
<md-icon
md-list-icon
class="list-row__action list-row__action--remove">
remove_circle
</md-icon>
</div>
<md-icon
md-list-icon
class="list-row__action list-row__action--remove">
remove_circle
</md-icon>
</div>
<div
*ngIf="file.status === FileUploadStatus.Error"
class="list-row__block list-row__status--error"
title="{{ file.response }}">
<md-icon md-list-icon>
report_problem
</md-icon>
</div>
<div
*ngIf="file.status === FileUploadStatus.Error"
class="list-row__block list-row__status--error"
title="{{ file.response }}">
<md-icon md-list-icon>
report_problem
</md-icon>
</div>
<div
*ngIf="file.status === FileUploadStatus.Cancelled || file.status === FileUploadStatus.Aborted"
class="list-row__block list-row__status--cancelled">
{{ 'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate }}
<div
*ngIf="file.status === FileUploadStatus.Cancelled || file.status === FileUploadStatus.Aborted"
class="list-row__block list-row__status--cancelled">
{{ 'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate }}
</div>
</div>

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

@@ -1,67 +1,74 @@
@import 'theming';
@import 'colors';
:host {
display: flex;
align-items: center;
padding: 0.5em 1em 0.5em 1em;
@mixin mat-file-uploading-list-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
&:not(:first-child) {
border-top: 1px solid $alfresco-dark-color--hue-1;
}
.list-row {
cursor: default;
.adf-file-uploading-list {
display: flex;
align-items: center;
padding: 0.5em 1em 0.5em 1em;
&__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
padding: 0 1em 0 0.5em;
&:not(:first-child) {
border-top: 1px solid ;
}
&__group, &__block {
min-width: 200px;
display: flex;
justify-content: flex-end;
}
.list-row {
cursor: default;
&__group--toggle {
cursor: pointer;
&__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
padding: 0 1em 0 0.5em;
}
.list-row__status {
&__group, &__block {
min-width: 200px;
display: flex;
justify-content: flex-end;
}
.list-row__action {
display: none;
}
&__group--toggle {
cursor: pointer;
&:hover {
.list-row__status {
display: none;
display: flex;
}
.list-row__action {
display: flex;
display: none;
}
&:hover {
.list-row__status {
display: none;
}
.list-row__action {
display: flex;
}
}
}
}
&__status--done {
color: $alfresco-secondary-accent--default;
}
&__status--done {
color: mat-color($accent);
}
&__status--error {
color: $alfresco-warn-color--default;
}
&__status--error {
color: mat-color($warn);
}
&__action--cancel {
color: $alfresco-warn-color--default;
}
&__action--cancel {
color: mat-color($warn);
}
&__action--remove {
color: $alfresco-secondary-accent--default;
&__action--remove {
color: mat-color($accent);
}
}
}
}

40
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.css
View File

@@ -1,40 +0,0 @@
.mdl-button--file input {
cursor: pointer;
height: 100%;
right: 0;
opacity: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 4;
}
.mdl-button--file--disabled {
background: rgba(0,0,0,.12);
color: rgba(0,0,0,.26);
}
.mdl-button--file--disabled:hover {
background: rgba(0,0,0,.12);
color: rgba(0,0,0,.26);
}
.mdl-button--file--disabled:focus:not(:active) {
box-shadow: 0 0 8px rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.36);
background-color: rgba(158,158,158,.4);
}
.mdl-button--file--disabled input[type="file"]:disabled {
cursor: default;
background-color: transparent;
}
.mdl-textfield--file .mdl-textfield__input {
box-sizing: border-box;
width: calc(100% - 32px);
}
.mdl-textfield--file .mdl-button--file {
right: 0;
}

17
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html
View File

@@ -1,8 +1,8 @@
<form>
<form class="adf-upload-button-file-container">
<!--Files Upload-->
<div *ngIf="!uploadFolders"
[class.mdl-button--file--disabled]="isButtonDisabled()"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
<a *ngIf="!uploadFolders"
[disabled]="isButtonDisabled()"
md-raised-button color="primary">
<md-icon>file_upload</md-icon>
<!--Multiple Files Upload-->
@@ -47,12 +47,11 @@
[title]="tooltip"
(change)="onFilesAdded($event)">
</span>
</div>
</a>
<!--Folders Upload-->
<div *ngIf="uploadFolders"
[class.mdl-button--file--disabled]="isButtonDisabled()"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
<a *ngIf="uploadFolders"
[disabled]="isButtonDisabled()" md-raised-button color="primary">
<md-icon>file_upload</md-icon>
<label
id="uploadFolder-label"
@@ -73,5 +72,5 @@
[attr.disabled]="isButtonDisabled()"
[title]="tooltip"
(change)="onDirectoryAdded($event)">
</div>
</a>
</form>

12
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.scss Normal file
View File

@@ -0,0 +1,12 @@
.adf {
&-upload-button-file-container input {
cursor: pointer;
height: 100%;
right: 0;
opacity: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 4;
}
}

7
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, EventEmitter, forwardRef, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Component, EventEmitter, forwardRef, Input, OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
import {
AlfrescoApiService,
@@ -34,10 +34,11 @@ import { PermissionModel } from '../models/permissions.model';
@Component({
selector: 'adf-upload-button, alfresco-upload-button',
templateUrl: './upload-button.component.html',
styleUrls: ['./upload-button.component.css'],
styleUrls: ['./upload-button.component.scss'],
providers: [
{ provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadButtonComponent)}
]
],
encapsulation: ViewEncapsulation.None
})
export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionSubject {

1
ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.css
View File

@@ -1,6 +1,5 @@
.upload-border {
vertical-align: middle;
color: #555;
text-align: center;
}

5
ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } from '@angular/core';
import {
AlfrescoTranslationService,
EXTENDIBLE_COMPONENT,
@@ -33,7 +33,8 @@ import {
styleUrls: ['./upload-drag-area.component.css'],
providers: [
{ provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)}
]
],
encapsulation: ViewEncapsulation.None
})
export class UploadDragAreaComponent implements NodePermissionSubject {