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

[AAE-5637] Remove SCSS mixins and use CSS variables (#7250)

Browse Source 
* remove default-class mixin and use regular import

* cleanup colors

* remove variables file, fix bugs in animations

* proper ordering of imports, core css vars

* cleanup snackbar and material themes

* tags component

* login component styles

* app login

* toolbar component styles

* breadcrumb styles

* dropdown breadcrumb

* app layout component

* demo shell: files component

* aspect list styles

* content metadata styles

* node selector

* name location cell

* node share dialog

* content type dialog

* folder dialog

* document list

* datatable theme

* pagination theme

* viewer theme

* viewer theme

* user-info theme

* container widget

* dynamic table theme

* form widgets

* form theme

* form renderer

* sidebar menu

* header theme

* info drawer theme

* comment list

* commens and layout container

* sidenav layout

* empty content

* error content

* clipboard theme

* search input

* tooltip card and notification history

* card view theme

* remove unused keys

* add permission dialog

* search and permission dialogs

* version comparison and column themes

* upload drag area and cleanup references

* remove the need for content styles

* insight components

* cleanup insights theme

* process components

* process components

* process cloud themes

* cleanup unsed imports

* cleanup mixins

* update build scripts

* test fixes

* remove fdescribe

* css fixes

* update unit tests
This commit is contained in:
Denys Vuika
2021-09-29 13:17:05 +01:00
committed by GitHub
parent 8113b9b10b
commit 6f968f7e4a
335 changed files with 7703 additions and 8339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss Normal file
View File

@@ -0,0 +1,55 @@
.adf {
&-array-item-icon {
font-size: 16px;
padding-top: 8px;
}
&-array-item-action {
color: var(--adf-card-view-text-color);
}
&-array-item-action:hover, &-array-item-action:focus {
color: var(--theme-text-fg-color);
}
&-card-array-item-default {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
&-array-item-more-chip-container {
&.mat-card {
box-shadow: none;
}
&.mat-card {
max-height: 300px;
overflow-y: auto;
}
.mat-chip {
cursor: pointer;
}
}
&-property-value {
.mat-chip-list {
width: 100%;
padding-top: 6px;
cursor: pointer;
}
.mat-chip {
cursor: pointer;
}
}
&-card-view-array-item-container {
flex-direction: row;
box-sizing: border-box;
display: flex;
place-content: center space-between;
align-items: center;
}
}

6
lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts
View File

@@ -15,14 +15,16 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { CardViewArrayItemModel } from '../../models/card-view-arrayitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { BaseCardView } from '../base-card-view';
@Component({
selector: 'adf-card-view-arrayitem',
templateUrl: './card-view-arrayitem.component.html'
templateUrl: './card-view-arrayitem.component.html',
styleUrls: ['./card-view-arrayitem.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CardViewArrayItemComponent extends BaseCardView<CardViewArrayItemModel> {

59
lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.theme.scss
View File

@@ -1,59 +0,0 @@
@mixin adf-card-view-array-item-theme($theme) {
$foreground: map-get($theme, foreground);
.adf {
&-array-item-icon {
font-size: 16px;
padding-top: 8px;
}
&-array-item-action {
color: mat-color($foreground, text, 0.25);
}
&-array-item-action:hover, &-array-item-action:focus {
color: mat-color($foreground, text);
}
&-card-array-item-default {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
&-array-item-more-chip-container {
&.mat-card {
box-shadow: none;
}
&.mat-card {
max-height: 300px;
overflow-y: auto;
}
.mat-chip {
cursor: pointer;
}
}
&-property-value {
.mat-chip-list {
width: 100%;
padding-top: 6px;
cursor: pointer;
}
.mat-chip {
cursor: pointer;
}
}
&-card-view-array-item-container {
flex-direction: row;
box-sizing: border-box;
display: flex;
place-content: center space-between;
align-items: center;
}
}
}

75
lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss Normal file
View File

@@ -0,0 +1,75 @@
.adf {
&-invisible-date-input {
height: 2px;
width: 0;
overflow: hidden;
opacity: 0;
border: none;
margin: 0;
padding: 0;
float: right;
}
&-dateitem-chip-list-container.adf-property-field {
margin-bottom: -7px !important;
border-bottom: 0;
cursor: pointer;
.adf-dateitem-editable-controls {
margin-top: 15px;
}
.mat-datetimepicker-toggle {
position: absolute;
right: 0;
top: -20px;
}
}
&-dateitem-editable {
cursor: pointer;
border-bottom: 1px solid var(--adf-card-view-datetime-border-color);
padding-bottom: 6px;
&-controls {
display: flex;
align-items: center;
justify-content: space-between;
button.mat-icon-button {
line-height: 20px;
height: 20px;
width: 20px;
}
mat-icon {
width: 16px;
height: 16px;
opacity: 0.5;
}
&:hover mat-icon {
opacity: 1;
}
.adf-datepicker-toggle {
flex: 1 0 auto;
}
mat-icon.adf-date-reset-icon {
line-height: 10px;
font-size: 16px;
width: 16px;
height: 16px;
position: relative;
top: 4px;
padding-left: 8px;
opacity: 0.3;
}
&:hover mat-icon.adf-date-reset-icon {
opacity: 1;
}
}
}
}

6
lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepicker } from '@mat-datetimepicker/core';
import { MAT_MOMENT_DATETIME_FORMATS, MomentDatetimeAdapter } from '@mat-datetimepicker/moment';
@@ -41,7 +41,9 @@ import { TranslationService } from '../../../services/translation.service';
{ provide: MAT_DATETIME_FORMATS, useValue: MAT_MOMENT_DATETIME_FORMATS }
],
selector: 'adf-card-view-dateitem',
templateUrl: './card-view-dateitem.component.html'
templateUrl: './card-view-dateitem.component.html',
styleUrls: ['./card-view-dateitem.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemModel> implements OnInit, OnDestroy {

79
lib/core/card-view/components/card-view-dateitem/card-view-dateitem.theme.scss
View File

@@ -1,79 +0,0 @@
@mixin adf-card-view-dateitem-theme($theme) {
$foreground: map-get($theme, foreground);
.adf {
&-invisible-date-input {
height: 2px;
width: 0;
overflow: hidden;
opacity: 0;
border: none;
margin: 0;
padding: 0;
float: right;
}
&-dateitem-chip-list-container.adf-property-field {
margin-bottom: -7px !important;
border-bottom: 0;
cursor: pointer;
.adf-dateitem-editable-controls {
margin-top: 15px;
}
.mat-datetimepicker-toggle {
position: absolute;
right: 0;
top: -20px;
}
}
&-dateitem-editable {
cursor: pointer;
border-bottom: 1px solid mat-color($foreground, text, 0.42);
padding-bottom: 6px;
&-controls {
display: flex;
align-items: center;
justify-content: space-between;
button.mat-icon-button {
line-height: 20px;
height: 20px;
width: 20px;
}
mat-icon {
width: 16px;
height: 16px;
opacity: 0.5;
}
&:hover mat-icon {
opacity: 1;
}
.adf-datepicker-toggle {
flex: 1 0 auto;
}
mat-icon.adf-date-reset-icon {
line-height: 10px;
font-size: 16px;
width: 16px;
height: 16px;
position: relative;
top: 4px;
padding-left: 8px;
opacity: 0.3;
}
&:hover mat-icon.adf-date-reset-icon {
opacity: 1;
}
}
}
}
}

42
lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss Normal file
View File

@@ -0,0 +1,42 @@
.adf-card-view {
&__key-value-pairs {
&__row {
display: flex;
justify-content: center;
}
&__col {
width: 50%;
.mat-form-field {
width: 100%;
font-size: 14px;
}
.mat-form-field-appearance-legacy .mat-form-field-label {
color: var(--adf-card-view-label-color) !important;
}
}
&__add-btn-container {
display: flex;
justify-content: center;
}
&__add-btn.mat-button {
margin-bottom: 20px;
}
&__read-only {
padding-bottom: 20px;
.mat-table {
box-shadow: none;
}
.mat-header-row, .mat-row {
padding: 0;
}
}
}
}

6
lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, Input, OnChanges } from '@angular/core';
import { Component, Input, OnChanges, ViewEncapsulation } from '@angular/core';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { CardViewKeyValuePairsItemModel } from '../../models/card-view.models';
import { CardViewKeyValuePairsItemType } from '../../interfaces/card-view.interfaces';
@@ -24,7 +24,9 @@ import { BaseCardView } from '../base-card-view';
@Component({
selector: 'adf-card-view-boolitem',
templateUrl: './card-view-keyvaluepairsitem.component.html'
templateUrl: './card-view-keyvaluepairsitem.component.html',
styleUrls: ['./card-view-keyvaluepairsitem.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CardViewKeyValuePairsItemComponent extends BaseCardView<CardViewKeyValuePairsItemModel> implements OnChanges {

46
lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.theme.scss
View File

@@ -1,46 +0,0 @@
@mixin adf-card-view-keyvaluepairsitem-theme($theme) {
$foreground: map-get($theme, foreground);
.adf-card-view {
&__key-value-pairs {
&__row {
display: flex;
justify-content: center;
}
&__col {
width: 50%;
.mat-form-field {
width: 100%;
font-size: 14px;
}
.mat-form-field-appearance-legacy .mat-form-field-label {
color: mat-color($foreground, text, 0.4) !important;
}
}
&__add-btn-container {
display: flex;
justify-content: center;
}
&__add-btn.mat-button {
margin-bottom: 20px;
}
&__read-only {
padding-bottom: 20px;
.mat-table {
box-shadow: none;
}
.mat-header-row, .mat-row {
padding: 0;
}
}
}
}
}

30
lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss Normal file
View File

@@ -0,0 +1,30 @@
$select-filter-height: 4em !default;
.adf-select-filter-input {
height: $select-filter-height;
display: flex;
.adf-select-filter-input-container {
position: absolute;
top: 0;
width: 100%;
display: flex;
z-index: 100;
font-size: 14px;
color: var(--theme-text-bold-color);
line-height: 3em;
height: $select-filter-height;
padding: 5px 16px 0;
background: var(--theme-card-bg-color);
}
.mat-form-field {
width: 100%;
}
}
.mat-select-panel.adf-select-filter {
transform: none !important;
overflow-x: hidden !important;
max-height: calc(256px + #{$select-filter-height});
}

1
lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.ts
View File

@@ -24,6 +24,7 @@ import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'adf-select-filter-input',
templateUrl: './select-filter-input.component.html',
styleUrls: ['./select-filter-input.component.scss'],
host: { 'class': 'adf-select-filter-input' },
encapsulation: ViewEncapsulation.None
})

35
lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.theme.scss
View File

@@ -1,35 +0,0 @@
@mixin adf-select-filter-input-theme($theme) {
$mat-select-panel-max-height: 256px !default;
$select-filter-height: 4em !default;
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.adf-select-filter-input {
height: $select-filter-height;
display: flex;
.adf-select-filter-input-container {
position: absolute;
top: 0;
width: 100%;
display: flex;
z-index: 100;
font-size: 14px;
color: mat-color($foreground, text, 0.87);
line-height: 3em;
height: $select-filter-height;
padding: 5px 16px 0;
background: mat-color($background, card);
}
.mat-form-field {
width: 100%;
}
}
.mat-select-panel.adf-select-filter {
transform: none !important;
overflow-x: hidden !important;
max-height: calc(#{$mat-select-panel-max-height} + #{$select-filter-height});
}
}

181
lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss Normal file
View File

@@ -0,0 +1,181 @@
.adf {
&-textitem-edit-icon.mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: var(--adf-card-view-text-color);
}
&-textitem-action.mat-icon-button {
width: 20px;
height: 20px;
line-height: 20px;
color: var(--adf-card-view-text-color);
}
&-textitem-action:hover,
&-textitem-action:focus {
color: var(--theme-text-fg-color);
}
&-update-icon {
padding-left: 13px;
}
&-textitem-readonly {
cursor: pointer !important;
&:hover .adf-textitem-action,
&:focus .adf-textitem-action {
color: var(--theme-text-fg-color);
}
}
&-textitem-chip-list-container {
margin-bottom: 25px !important;
margin-top: 6px;
.mat-form-field-label {
margin-top: 6px;
}
}
&-textitem-clickable {
cursor: pointer !important;
padding-top: 3px;
.adf-textitem-edit-icon.mat-icon {
line-height: 16px;
}
&:hover .adf-textitem-action {
color: var(--theme-text-fg-color);
}
}
&-textitem-clickable-value {
cursor: pointer !important;
color: var(--theme-primary-color) !important;
}
&-textitem-editable {
&-controls {
display: flex;
align-items: center;
mat-icon:not(.adf-button-disabled):hover {
color: var(--theme-text-fg-color);
cursor: pointer !important;
}
mat-form-field {
width: 100%;
}
input:focus,
textarea:focus {
border: 1px solid var(--theme-accent-color-a200);
}
}
&-error {
font-size: 12px;
padding-top: 4px;
ul {
margin: 0;
padding: 0;
list-style-type: none;
li {
margin: 0;
padding: 0;
}
}
}
}
&-textitem-default-value {
color: var(--theme-text-color);
}
&-textitem-editable .mat-form-field-wrapper {
margin: 0;
padding-bottom: 0;
}
&-textitem-editable .mat-form-field-underline {
display: none;
}
&-textitem-editable .mat-form-field-infix {
padding: 0;
border-top: none;
}
&-textitem-editable .mat-form-field-label-wrapper {
padding-top: 2em;
position: static;
}
&-textitem-editable .mat-form-field-label {
top: 4px;
}
&-textitem-editable .mat-input-element {
font-family: inherit;
position: relative;
padding-top: 6px;
}
&-textitem-editable .mat-input-element:focus {
padding: 5px;
left: -6px;
top: 0;
}
&-textitem-editable input.mat-input-element {
margin-bottom: 2px;
}
&-textitem-editable input.mat-input-element:focus {
margin-bottom: -8px;
}
&-textitem-scroll {
overflow-x: auto;
white-space: nowrap;
display: block;
&::-webkit-scrollbar {
height: 5px;
}
&:hover::-webkit-scrollbar-thumb {
display: block;
background-color: var(--adf-card-view-text-color);
border-radius: 2px;
}
}
&-textitem-multiline {
display: block;
}
&-property-field .adf-property-clear-value {
display: none;
}
&-property-field.adf-card-textitem-field:hover {
.adf-textitem-edit-icon {
display: none;
}
.adf-property-clear-value {
color: var(--adf-card-view-text-color);
display: inline;
}
.adf-property-clear-value:hover {
color: var(--theme-text-fg-color);
}
}
}

6
lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { BaseCardView } from '../base-card-view';
@@ -38,7 +38,9 @@ const templateTypes = {
@Component({
selector: 'adf-card-view-textitem',
templateUrl: './card-view-textitem.component.html'
templateUrl: './card-view-textitem.component.html',
styleUrls: ['./card-view-textitem.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemModel> implements OnChanges {

188
lib/core/card-view/components/card-view-textitem/card-view-textitem.theme.scss
View File

@@ -1,188 +0,0 @@
@mixin adf-card-view-textitem-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$foreground: map-get($theme, foreground);
$outline: 1px solid mat-color($accent, A200) !default;
.adf {
&-textitem-edit-icon.mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: mat-color($foreground, text, 0.25);
}
&-textitem-action.mat-icon-button {
width: 20px;
height: 20px;
line-height: 20px;
color: mat-color($foreground, text, 0.25);
}
&-textitem-action:hover,
&-textitem-action:focus {
color: mat-color($foreground, text);
}
&-update-icon {
padding-left: 13px;
}
&-textitem-readonly {
cursor: pointer !important;
&:hover .adf-textitem-action,
&:focus .adf-textitem-action {
color: mat-color($foreground, text);
}
}
&-textitem-chip-list-container {
margin-bottom: 25px !important;
margin-top: 6px;
.mat-form-field-label {
margin-top: 6px;
}
}
&-textitem-clickable {
cursor: pointer !important;
padding-top: 3px;
.adf-textitem-edit-icon.mat-icon {
line-height: 16px;
}
&:hover .adf-textitem-action {
color: mat-color($foreground, text);
}
}
&-textitem-clickable-value {
cursor: pointer !important;
color: mat-color($primary) !important;
}
&-textitem-editable {
&-controls {
display: flex;
align-items: center;
mat-icon:not(.adf-button-disabled):hover {
color: mat-color($foreground, text);
cursor: pointer !important;
}
mat-form-field {
width: 100%;
}
input:focus,
textarea:focus {
border: $outline;
}
}
&-error {
font-size: 12px;
padding-top: 4px;
ul {
margin: 0;
padding: 0;
list-style-type: none;
li {
margin: 0;
padding: 0;
}
}
}
}
&-textitem-default-value {
color: mat-color($foreground, text, 0.54);
}
&-textitem-editable .mat-form-field-wrapper {
margin: 0;
padding-bottom: 0;
}
&-textitem-editable .mat-form-field-underline {
display: none;
}
&-textitem-editable .mat-form-field-infix {
padding: 0;
border-top: none;
}
&-textitem-editable .mat-form-field-label-wrapper {
padding-top: 2em;
position: static;
}
&-textitem-editable .mat-form-field-label {
top: 4px;
}
&-textitem-editable .mat-input-element {
font-family: inherit;
position: relative;
padding-top: 6px;
}
&-textitem-editable .mat-input-element:focus {
padding: 5px;
left: -6px;
top: 0;
}
&-textitem-editable input.mat-input-element {
margin-bottom: 2px;
}
&-textitem-editable input.mat-input-element:focus {
margin-bottom: -8px;
}
&-textitem-scroll {
overflow-x: auto;
white-space: nowrap;
display: block;
&::-webkit-scrollbar {
height: 5px;
}
&:hover::-webkit-scrollbar-thumb {
display: block;
background-color: mat-color($foreground, text, 0.25);
border-radius: 2px;
}
}
&-textitem-multiline {
display: block;
}
&-property-field .adf-property-clear-value {
display: none;
}
&-property-field.adf-card-textitem-field:hover {
.adf-textitem-edit-icon {
display: none;
}
.adf-property-clear-value {
color: mat-color($foreground, text, 0.25);
display: inline;
}
.adf-property-clear-value:hover {
color: mat-color($foreground, text, 1);
}
}
}
}

46
lib/core/card-view/components/card-view/card-view.component.scss Normal file
View File

@@ -0,0 +1,46 @@
.adf-property-list {
.adf-property {
margin-bottom: 20px;
.adf-property-value-padding-top {
margin-top: 6px;
}
.adf-property-field {
width: 100%;
margin-bottom: -25px;
.mat-form-field-infix {
border-top-width: 0;
}
.mat-form-field-label {
margin-top: 6px;
}
.adf-property-read-only {
.mat-form-field-underline {
display: none;
}
}
}
.adf-property-read-only {
.mat-form-field-underline {
display: none;
}
}
.adf-property-label {
font-size: 12px;
color: var(--theme-text-color);
word-wrap: break-word;
}
.adf-property-value,
.mat-form-field-label {
font-size: 14px;
color: var(--theme-text-bold-color);
}
}
}

50
lib/core/card-view/components/card-view/card-view.component.theme.scss
View File

@@ -1,50 +0,0 @@
@mixin adf-card-view-theme($theme) {
$foreground: map-get($theme, foreground);
.adf-property-list {
.adf-property {
margin-bottom: 20px;
.adf-property-value-padding-top {
margin-top: 6px;
}
.adf-property-field {
width: 100%;
margin-bottom: -25px;
.mat-form-field-infix {
border-top-width: 0;
}
.mat-form-field-label {
margin-top: 6px;
}
.adf-property-read-only {
.mat-form-field-underline {
display: none;
}
}
}
.adf-property-read-only {
.mat-form-field-underline {
display: none;
}
}
.adf-property-label {
font-size: 12px;
color: mat-color($foreground, text, 0.54);
word-wrap: break-word;
}
.adf-property-value,
.mat-form-field-label {
font-size: 14px;
color: mat-color($foreground, text, 0.87);
}
}
}
}

6
lib/core/card-view/components/card-view/card-view.component.ts
View File

@@ -15,13 +15,15 @@
* limitations under the License.
*/
import { Component, Input } from '@angular/core';
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { CardViewItem } from '../../interfaces/card-view-item.interface';
import { DEFAULT_SEPARATOR } from '../card-view-textitem/card-view-textitem.component';
@Component({
selector: 'adf-card-view',
templateUrl: './card-view.component.html'
templateUrl: './card-view.component.html',
styleUrls: ['./card-view.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CardViewComponent {
/** (**required**) Items to show in the card view. */