mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1434] Theming ADF component (#2228)
* 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
committed by
Mario Romano
Mario Romano
parent
f6f94fbd0c
commit
d4e64ac438
@@ -12,6 +12,15 @@
|
||||
* [Events](#events)
|
||||
* [DOM Events](#dom-events)
|
||||
* [Handling DOM events](#handling-dom-events)
|
||||
* [Data Sources](#data-sources)
|
||||
+ [Node ID](#node-id)
|
||||
+ [Repository aliases](#repository-aliases)
|
||||
+ [DocumentList aliases](#documentlist-aliases)
|
||||
* [Trashcan](#trashcan)
|
||||
* [Shared Links](#shared-links)
|
||||
* [Sites](#sites)
|
||||
* [Favorites](#favorites)
|
||||
* [Recent Files](#recent-files)
|
||||
* [Setting default folder](#setting-default-folder)
|
||||
- [Custom icons for selected rows](#custom-icons-for-selected-rows)
|
||||
- [Calling DocumentList api directly](#calling-documentlist-api-directly)
|
||||
@@ -20,10 +29,12 @@
|
||||
* [Events](#events-1)
|
||||
- [Dropdown Site Component](#dropdown-site-component)
|
||||
* [Events](#events-2)
|
||||
- [Menu Actions](#menu-actions)
|
||||
- [Custom columns](#custom-columns)
|
||||
* [DataColumn Properties](#datacolumn-properties)
|
||||
- [Column definition](#column-definition)
|
||||
* [Column Types](#column-types)
|
||||
* [Underlying node object](#underlying-node-object)
|
||||
* [Date Column](#date-column)
|
||||
* [Location Column](#location-column)
|
||||
* [Column Template](#column-template)
|
||||
* [Actions](#actions)
|
||||
+ [Menu actions](#menu-actions)
|
||||
@@ -39,6 +50,7 @@
|
||||
* [Navigation mode](#navigation-mode)
|
||||
* [Events](#events-3)
|
||||
- [Advanced usage and customization](#advanced-usage-and-customization)
|
||||
* [Custom tooltips](#custom-tooltips)
|
||||
* [Custom row filter](#custom-row-filter)
|
||||
* [Custom image resolver](#custom-image-resolver)
|
||||
* [Hiding columns on small screens](#hiding-columns-on-small-screens)
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ModuleWithProviders, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
|
||||
import { DataTableModule } from 'ng2-alfresco-datatable';
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
"@angular/platform-browser-dynamic": "4.2.5",
|
||||
"@angular/router": "4.2.5",
|
||||
"@ngx-translate/core": "7.0.0",
|
||||
"alfresco-js-api": "1.7.0",
|
||||
"alfresco-js-api": "^1.8.0-9feb5d0164d6c5f994df8758e41ed126a8f69db2",
|
||||
"core-js": "2.4.1",
|
||||
"hammerjs": "2.0.8",
|
||||
"ng2-alfresco-core": "1.7.0",
|
||||
|
||||
@@ -1,69 +1,79 @@
|
||||
@import 'theming';
|
||||
|
||||
$breadcrumb-chevron-spacer: 2px;
|
||||
|
||||
.adf-breadcrumb {
|
||||
font-family: Muli, Roboto, "Helvetica Neue", sans-serif;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
@mixin mat-breadcrumb-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
&-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.adf-breadcrumb {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
|
||||
&-item {
|
||||
padding-right: $breadcrumb-chevron-spacer;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.active {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
&-chevron {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.mat-primary {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
&.mat-accent {
|
||||
color: mat-color($accent);
|
||||
}
|
||||
|
||||
&.mat-warn {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
&-anchor {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
&-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
&-item {
|
||||
padding-right: $breadcrumb-chevron-spacer;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
|
||||
font-family: Muli, Roboto, "Helvetica Neue", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
text-align: left;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.active {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
&-chevron {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.mat-primary {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
&.mat-accent {
|
||||
color: mat-color($accent);
|
||||
}
|
||||
|
||||
&.mat-warn {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
&-anchor {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,54 +1,56 @@
|
||||
@import 'theming';
|
||||
|
||||
$dropdownHorizontalOffset: 30px;
|
||||
@mixin mat-breadcrumb-dropdown-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$dropdownHorizontalOffset: 30px;
|
||||
|
||||
.#{$ADF} {
|
||||
&-dropdown-breadcrumb {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
height: 25px;
|
||||
.adf {
|
||||
&-dropdown-breadcrumb {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
&-dropdown-breadcumb-trigger {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&-dropdown-breadcumb-trigger.isRoot {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin-top: 35px;
|
||||
margin-left: -$dropdownHorizontalOffset;
|
||||
}
|
||||
|
||||
&-current-folder {
|
||||
margin-left: $dropdownHorizontalOffset;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
&-current-folder.isRoot {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option:first-child {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option:last-child {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown-breadcumb-trigger {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&-dropdown-breadcumb-trigger.isRoot {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin-top: 35px;
|
||||
margin-left: -$dropdownHorizontalOffset;
|
||||
}
|
||||
|
||||
&-current-folder {
|
||||
margin-left: $dropdownHorizontalOffset;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
&-current-folder.isRoot {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option:first-child {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option:last-child {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,124 +1,126 @@
|
||||
@import 'theming';
|
||||
@mixin mat-content-node-selector-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.#{$ADF}-content-node-selector-dialog {
|
||||
.adf-content-node-selector-dialog {
|
||||
|
||||
.mat-dialog-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.#{$ADF}-content-node-selector {
|
||||
&-title,
|
||||
&-content,
|
||||
&-actions {
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
.mat-dialog-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-title {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.adf-content-node-selector {
|
||||
&-title,
|
||||
&-content,
|
||||
&-actions {
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding-top: 0;
|
||||
&-title {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
&-content {
|
||||
padding-top: 0;
|
||||
|
||||
&-icon {
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
cursor: pointer;
|
||||
&-input {
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
&-icon {
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& /deep/ .mat-input-underline .mat-input-ripple {
|
||||
height: 1px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
& /deep/ .adf-site-dropdown-list-element {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.mat-select-trigger {
|
||||
font-size: 14px;
|
||||
& /deep/ .mat-input-underline .mat-input-ripple {
|
||||
height: 1px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.mat-select-placeholder,
|
||||
&.mat-select {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif;
|
||||
}
|
||||
}
|
||||
& /deep/ .adf-site-dropdown-list-element {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
& /deep/ .adf-toolbar .mat-toolbar {
|
||||
border: none;
|
||||
}
|
||||
.mat-select-trigger {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-list {
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
border: 1px solid rgba(0, 0, 0, 0.07);
|
||||
|
||||
& /deep/ .adf-highlight {
|
||||
color: #33afdf;
|
||||
.mat-select-placeholder,
|
||||
&.mat-select {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
& /deep/ .adf-data-table {
|
||||
& /deep/ .adf-toolbar .mat-toolbar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.adf-no-content-container {
|
||||
text-align: center;
|
||||
&-list {
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
border: 1px solid rgba(0, 0, 0, 0.07);
|
||||
|
||||
& /deep/ .adf-highlight {
|
||||
color: #33afdfnpm np;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
& /deep/ .adf-data-table {
|
||||
border: none;
|
||||
|
||||
.adf-data-table-cell {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-top: none;
|
||||
height: 30px;
|
||||
}
|
||||
.adf-no-content-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
height: auto !important;
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.adf-data-table-cell {
|
||||
border-bottom: none;
|
||||
.adf-data-table-cell {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-top: none;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
height: auto !important;
|
||||
|
||||
&:last-child {
|
||||
.adf-data-table-cell {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
padding: 8px;
|
||||
background-color: rgb(250, 250, 250);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: rgb(121, 121, 121);
|
||||
&-actions {
|
||||
padding: 8px;
|
||||
background-color: rgb(250, 250, 250);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: rgb(121, 121, 121);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
&-cancel {
|
||||
font-weight: normal;
|
||||
}
|
||||
&-cancel {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&-choose {
|
||||
font-weight: normal;
|
||||
&-choose {
|
||||
font-weight: normal;
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.6;
|
||||
&[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import 'theming';
|
||||
|
||||
.adf-site-dropdown {
|
||||
&-list-element {
|
||||
width: 300px;
|
||||
|
||||
Reference in New Issue
Block a user