mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-5637] Remove SCSS mixins and use CSS variables (#7250)
* 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
GitHub
@@ -1,17 +0,0 @@
|
||||
@import './components/card-view-arrayitem/card-view-arrayitem.theme';
|
||||
@import './components/card-view-dateitem/card-view-dateitem.theme';
|
||||
@import './components/card-view-textitem/card-view-textitem.theme';
|
||||
@import './components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.theme';
|
||||
@import './components/card-view/card-view.component.theme';
|
||||
@import './components/card-view-selectitem/select-filter-input/select-filter-input.theme';
|
||||
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
|
||||
|
||||
@mixin adf-card-view-module-theme($theme) {
|
||||
@include adf-card-view-dateitem-theme($theme);
|
||||
@include adf-card-view-textitem-theme($theme);
|
||||
@include adf-card-view-keyvaluepairsitem-theme($theme);
|
||||
@include adf-card-view-theme($theme);
|
||||
@include mat-datetimepicker-theme($theme);
|
||||
@include adf-card-view-array-item-theme($theme);
|
||||
@include adf-select-filter-input-theme($theme);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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> {
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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});
|
||||
}
|
||||
@@ -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
|
||||
})
|
||||
|
||||
@@ -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});
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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. */
|
||||
|
||||
@@ -1,24 +1,19 @@
|
||||
@mixin adf-clipboard-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$config: mat-typography-config();
|
||||
.adf-copy-tooltip {
|
||||
position: absolute;
|
||||
background: var(--theme-primary-color);
|
||||
color: var(--theme-primary-color-default-contrast) !important;
|
||||
font-size: var(--theme-caption-font-size);
|
||||
padding: 2px 5px;
|
||||
border-radius: 5px;
|
||||
bottom: 93%;
|
||||
left:0;
|
||||
z-index: 1001;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.adf-sticky-header {
|
||||
.adf-copy-tooltip {
|
||||
position: absolute;
|
||||
background: mat-color($primary);
|
||||
color: mat-color($primary, default-contrast) !important;
|
||||
font-size: mat-font-size($config, caption);
|
||||
padding: 2px 5px;
|
||||
border-radius: 5px;
|
||||
bottom: 93%;
|
||||
left:0;
|
||||
z-index: 1001;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.adf-sticky-header {
|
||||
.adf-copy-tooltip {
|
||||
top:85% !important;
|
||||
bottom:0 !important;
|
||||
}
|
||||
top:85% !important;
|
||||
bottom:0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
95
lib/core/comments/comment-list.component.scss
Normal file
95
lib/core/comments/comment-list.component.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
.adf-is-selected {
|
||||
background: var(--adf-comment-list-primary-color);
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-comment-img-container {
|
||||
float: left;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
&-comment-list-item {
|
||||
/* stylelint-disable */
|
||||
white-space: initial;
|
||||
/* stylelint-enable */
|
||||
display: table-row-group;
|
||||
padding-top: 12px;
|
||||
overflow: hidden;
|
||||
height: 100% !important;
|
||||
transition: background 0.8s;
|
||||
background-position: center;
|
||||
|
||||
&:hover {
|
||||
background: var(--adf-comment-list-primary-color)
|
||||
radial-gradient(circle, transparent 1%, var(--adf-comment-list-primary-color) 1%)
|
||||
center/15000%;
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--adf-comment-list-ripple-color);
|
||||
background-size: 100%;
|
||||
transition: background 0s;
|
||||
}
|
||||
}
|
||||
|
||||
&-comment-user-icon {
|
||||
padding: 10px 5px;
|
||||
width: 30px;
|
||||
background-color: var(--theme-primary-color);
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&-comment-user-name {
|
||||
float: left;
|
||||
width: calc(100% - 10%);
|
||||
padding: 2px 10px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-comment-message {
|
||||
float: left;
|
||||
width: calc(100% - 10px);
|
||||
padding: 2px 10px;
|
||||
font-style: italic;
|
||||
/* stylelint-disable */
|
||||
white-space: initial !important;
|
||||
/* stylelint-enable */
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.2px;
|
||||
line-height: 1.43;
|
||||
color: var(--theme-foreground-text-color);
|
||||
}
|
||||
|
||||
&-comment-message-time {
|
||||
float: left;
|
||||
width: calc(100% - 10%);
|
||||
padding: 2px 10px;
|
||||
font-size: 12px !important;
|
||||
color: var(--theme-foreground-text-color);
|
||||
}
|
||||
|
||||
&-comment-contents {
|
||||
width: calc(100% - 10px);
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&-people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -26,6 +26,7 @@ import { takeUntil } from 'rxjs/operators';
|
||||
@Component({
|
||||
selector: 'adf-comment-list',
|
||||
templateUrl: './comment-list.component.html',
|
||||
styleUrls: ['./comment-list.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
|
||||
@@ -1,102 +0,0 @@
|
||||
@mixin adf-task-list-comment-list-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$primaryColor: mat-color($primary, 100);
|
||||
$rippleColor: mat-color($primary, 300);
|
||||
|
||||
.adf-is-selected {
|
||||
background: mat-color($primary, 100);
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-comment-img-container {
|
||||
float: left;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
&-comment-list-item {
|
||||
/* stylelint-disable */
|
||||
white-space: initial;
|
||||
/* stylelint-enable */
|
||||
display: table-row-group;
|
||||
padding-top: 12px;
|
||||
overflow: hidden;
|
||||
height: 100% !important;
|
||||
transition: background 0.8s;
|
||||
background-position: center;
|
||||
|
||||
&:hover {
|
||||
background: $primaryColor
|
||||
radial-gradient(circle, transparent 1%, $primaryColor 1%)
|
||||
center/15000%;
|
||||
}
|
||||
&:active {
|
||||
background-color: $rippleColor;
|
||||
background-size: 100%;
|
||||
transition: background 0s;
|
||||
}
|
||||
}
|
||||
|
||||
&-comment-user-icon {
|
||||
padding: 10px 5px;
|
||||
width: 30px;
|
||||
background-color: mat-color($primary);
|
||||
color: mat-color($primary, default-contrast);
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&-comment-user-name {
|
||||
float: left;
|
||||
width: calc(100% - 10%);
|
||||
padding: 2px 10px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-comment-message {
|
||||
float: left;
|
||||
width: calc(100% - 10px);
|
||||
padding: 2px 10px;
|
||||
font-style: italic;
|
||||
/* stylelint-disable */
|
||||
white-space: initial !important;
|
||||
/* stylelint-enable */
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.2px;
|
||||
line-height: 1.43;
|
||||
color: mat-color($foreground, text, 0.72);
|
||||
}
|
||||
|
||||
&-comment-message-time {
|
||||
float: left;
|
||||
width: calc(100% - 10%);
|
||||
padding: 2px 10px;
|
||||
font-size: 12px !important;
|
||||
color: mat-color($foreground, text, 0.72);
|
||||
}
|
||||
|
||||
&-comment-contents {
|
||||
width: calc(100% - 10px);
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&-people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
39
lib/core/comments/comments.component.scss
Normal file
39
lib/core/comments/comments.component.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
.adf-comments-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.adf-comments-header {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--theme-fg-divider);
|
||||
}
|
||||
|
||||
.adf-comments-input-container {
|
||||
width: calc(100% - 30px);
|
||||
padding: 8px 15px 0;
|
||||
border-bottom: 1px solid var(--theme-fg-divider);
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-comments-input-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
adf-comment-list {
|
||||
float: left;
|
||||
overflow: auto;
|
||||
height: calc(100% - 101px);
|
||||
width: 100%;
|
||||
}
|
||||
@@ -18,13 +18,15 @@
|
||||
import { CommentProcessService } from '../services/comment-process.service';
|
||||
import { CommentContentService } from '../services/comment-content.service';
|
||||
import { CommentModel } from '../models/comment.model';
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { Observable, Observer } from 'rxjs';
|
||||
import { share } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-comments',
|
||||
templateUrl: './comments.component.html'
|
||||
templateUrl: './comments.component.html',
|
||||
styleUrls: ['./comments.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class CommentsComponent implements OnChanges {
|
||||
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
@mixin adf-task-list-comment-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$header-border: 1px solid mat-color($foreground, divider);
|
||||
|
||||
.adf-comments-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.adf-comments-header {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-bottom: $header-border;
|
||||
}
|
||||
|
||||
.adf-comments-input-container {
|
||||
width: calc(100% - 30px);
|
||||
padding: 8px 15px 0;
|
||||
border-bottom: $header-border;
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-comments-input-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
adf-comment-list {
|
||||
float: left;
|
||||
overflow: auto;
|
||||
height: calc(100% - 101px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
676
lib/core/datatable/components/datatable/datatable.component.scss
Normal file
676
lib/core/datatable/components/datatable/datatable.component.scss
Normal file
@@ -0,0 +1,676 @@
|
||||
@import '~@angular/material/theming';
|
||||
@import '../../../styles/mixins';
|
||||
|
||||
$data-table-header-font-size: 12px !default;
|
||||
$data-table-header-sort-icon-size: 16px !default;
|
||||
$data-table-row-height: 56px !default;
|
||||
$data-table-column-spacing: 36px !default;
|
||||
$data-table-column-padding: $data-table-column-spacing / 2;
|
||||
$data-table-card-padding: 24px !default;
|
||||
$data-table-cell-top: $data-table-card-padding / 2;
|
||||
$data-table-thumbnail-width: 50px !default;
|
||||
$data-table-cell-min-width: 50px !default;
|
||||
$data-table-cell-min-width--no-grow: 100px !default;
|
||||
$data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
|
||||
|
||||
.adf-datatable {
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-datatable-card {
|
||||
border: 1px solid var(--theme-fg-divider);
|
||||
|
||||
.adf-datatable-body {
|
||||
flex-flow: row wrap;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
justify-content: space-evenly;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.adf-datatable-row {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 1 24%;
|
||||
|
||||
width: 288px !important;
|
||||
max-width: 288px !important;
|
||||
min-width: 288px !important;
|
||||
|
||||
height: 200px;
|
||||
|
||||
overflow: hidden !important;
|
||||
margin: 6px;
|
||||
padding: 15px;
|
||||
|
||||
@include mat-elevation-transition;
|
||||
@include mat-overridable-elevation(2);
|
||||
}
|
||||
|
||||
.adf-datatable-row-empty-card {
|
||||
height: 0 !important;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.adf-is-selected {
|
||||
background: var(--adf-datatable-selected-color);
|
||||
padding-bottom: 31px;
|
||||
}
|
||||
|
||||
.adf-datatable-card-permission {
|
||||
width: 100%;
|
||||
min-height: 250px;
|
||||
|
||||
.adf-datatable-cell {
|
||||
height: 240px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-card-loading {
|
||||
width: 100%;
|
||||
min-height: 250px;
|
||||
|
||||
.adf-datatable-cell {
|
||||
height: 240px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-card-empty {
|
||||
width: 100%;
|
||||
min-height: 380px;
|
||||
|
||||
.adf-datatable-cell {
|
||||
height: 370px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell--image {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.adf-datatable-cell {
|
||||
text-align: left;
|
||||
flex: 0 1 24%;
|
||||
height: 136px !important;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
|
||||
&::before {
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
content: attr(title);
|
||||
color: var(--theme-text-color);
|
||||
float: left;
|
||||
width: 140px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable__actions-cell {
|
||||
position: absolute;
|
||||
height: 42px !important;
|
||||
width: 42px !important;
|
||||
right: 0;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.adf-datatable-row:not(:hover) .adf-datatable-hide-actions-without-hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-image-table-cell {
|
||||
margin: 8px;
|
||||
padding: 4px;
|
||||
overflow: visible;
|
||||
border-bottom: 1px solid var(--theme-fg-divider);
|
||||
|
||||
.adf-datatable-cell-container {
|
||||
float: left;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin: 2px;
|
||||
content: attr(filename);
|
||||
float: left;
|
||||
width: 140px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-checkbox {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.adf-datatable-header {
|
||||
margin-right: 18px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.adf-datatable-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--theme-card-bg-color);
|
||||
border: 1px solid var(--theme-border-color);
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
.adf-datatable-center-size-column-ie {
|
||||
padding-top: 17px;
|
||||
}
|
||||
|
||||
.adf-datatable-center-actions-column-ie {
|
||||
padding-top: 7px !important;
|
||||
}
|
||||
|
||||
.adf-datatable-center-date-column-ie {
|
||||
position: relative !important;
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-center-img-ie {
|
||||
padding:0;
|
||||
min-width: 0;
|
||||
width: 24px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.adf-datatable-cell {
|
||||
color: var(--theme-text-fg-color);
|
||||
}
|
||||
|
||||
.adf-datatable-row {
|
||||
&:hover, &:focus {
|
||||
background-color: var(--theme-bg-hover-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-offset: -1px;
|
||||
outline: 1px solid var(--theme-accent-color-a200);
|
||||
}
|
||||
|
||||
.adf-cell-value, .adf-datatable-cell-header {
|
||||
&:focus {
|
||||
outline-offset: -1px;
|
||||
outline: 1px solid var(--theme-accent-color-a200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: inherit;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
|
||||
.adf-datatable-row {
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: background-color;
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
min-height: $data-table-row-height;
|
||||
cursor: pointer;
|
||||
|
||||
@include adf-no-select;
|
||||
|
||||
&.adf-is-selected, &.adf-is-selected:hover {
|
||||
background-color: var(--theme-selected-button-bg-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
|
||||
.adf-datatable-checkbox {
|
||||
max-width: $data-table-thumbnail-width;
|
||||
width: $data-table-thumbnail-width;
|
||||
}
|
||||
|
||||
/* query for Microsoft IE 11*/
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
.adf-datatable-checkbox {
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell, .adf-datatable-cell-header {
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
min-width: $data-table-cell-min-width;
|
||||
|
||||
&--text {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&--date {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--number {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--image,
|
||||
&--icon {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
width: $data-table-thumbnail-width;
|
||||
min-width: $data-table-thumbnail-width;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--fileSize {
|
||||
min-width: $data-table-cell-min-width--fileSize;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header {
|
||||
@include adf-no-select;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
min-height: $data-table-row-height !important;
|
||||
font-size: $data-table-header-font-size;
|
||||
color: var(--theme-text-fg-color);
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 12px !important;
|
||||
|
||||
&.adf-sortable {
|
||||
@include adf-no-select;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.adf-datatable__header--sorted-asc,
|
||||
&.adf-datatable__header--sorted-desc {
|
||||
color: var(--theme-text-fg-color);
|
||||
&::before {
|
||||
@include typo-icon;
|
||||
font-size: $data-table-header-sort-icon-size;
|
||||
content: '\e5d8';
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
position: relative;
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
&.adf-datatable__header--sorted-desc::before {
|
||||
content: '\e5db';
|
||||
}
|
||||
&.adf-datatable-cell--fileSize.adf-datatable__header--sorted-asc::before,
|
||||
&.adf-datatable-cell--fileSize.adf-datatable__header--sorted-desc::before {
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
&.adf-datatable-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-expand-cell-1, .adf-datatable-cell.adf-expand-cell-1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-expand-cell-2, .adf-datatable-cell.adf-expand-cell-2 {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-expand-cell-3, .adf-datatable-cell.adf-expand-cell-3 {
|
||||
flex-grow: 3;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-expand-cell-4, .adf-datatable-cell.adf-expand-cell-4 {
|
||||
flex-grow: 4;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-expand-cell-5, .adf-datatable-cell.adf-expand-cell-5 {
|
||||
flex-grow: 5;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-no-grow-cell, .adf-datatable-cell.adf-no-grow-cell {
|
||||
flex-grow: 0;
|
||||
min-width: $data-table-cell-min-width--no-grow;
|
||||
}
|
||||
|
||||
.adf-datatable-cell, .adf-datatable-cell-header {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
min-height: inherit;
|
||||
|
||||
.adf-datatable-cell-container {
|
||||
overflow: hidden;
|
||||
min-height: inherit;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
word-break: break-word;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
|
||||
@media screen and (-ms-high-contrast: active),
|
||||
screen and (-ms-high-contrast: none) {
|
||||
padding: 17px 10px 10px;
|
||||
}
|
||||
}
|
||||
&--fileSize .adf-datatable-cell-value {
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-cell-value {
|
||||
display: flex;
|
||||
min-height: inherit;
|
||||
align-items: center;
|
||||
word-break: break-all;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-datatable__actions-cell, .adf-datatable-cell--image {
|
||||
max-width: $data-table-thumbnail-width;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.adf-datatable-row:not(:hover) .adf-datatable-hide-actions-without-hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-datatable-cell--image {
|
||||
max-width: $data-table-thumbnail-width;
|
||||
}
|
||||
|
||||
.adf-location-cell {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--theme-text-fg-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--adf-datatable-cell-link-hover-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* [Accessibility] For screen reader only */
|
||||
.adf-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.adf-is-selected {
|
||||
background: var(--adf-datatable-selected-color);
|
||||
}
|
||||
|
||||
.adf-datatable-link {
|
||||
text-decoration: none;
|
||||
color: var(--theme-text-fg-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--adf-datatable-cell-link-hover-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dynamic-column .adf-datatable-link:hover {
|
||||
text-decoration: none;
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell,
|
||||
.adf-datatable-cell-header {
|
||||
.adf-datatable-link .adf-datatable-cell-value {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-ellipsis-cell {
|
||||
position: sticky;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0 4px;
|
||||
|
||||
&.adf-datatable-cell-header,
|
||||
.adf-datatable-content-cell {
|
||||
max-width: calc(100% - 0.1px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.adf-datatable-content-cell {
|
||||
overflow: unset;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* query for Microsoft IE 11*/
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
.adf-cell-value {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* cell stretching content */
|
||||
& > div::after {
|
||||
content: attr(title);
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Empty folder */
|
||||
.adf-no-content-container {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading folder */
|
||||
.adf-loading-content-container {
|
||||
padding: 0 !important;
|
||||
width: 100%;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-no-permission {
|
||||
&__row:hover {
|
||||
cursor: default;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
&__cell {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utils */
|
||||
.adf-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* mobile phone */
|
||||
@media all and (max-width: 768px) {
|
||||
.adf-desktop-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width: 768px) {
|
||||
.adf-desktop-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* [Accessibility] Material checkbox labels */
|
||||
.adf-checkbox-sr-only .mat-checkbox-label {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.adf-sticky-header {
|
||||
border-top: 0;
|
||||
height: 100%;
|
||||
|
||||
.adf-datatable-header {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
}
|
||||
|
||||
.adf-datatable-body {
|
||||
display: block;
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-upload__dragging {
|
||||
& > div {
|
||||
border-top: 1px dashed var(--theme-accent-color-a200) !important;
|
||||
border-bottom: 1px dashed var(--theme-accent-color-a200) !important;
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px dashed var(--theme-accent-color-a200);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px dashed var(--theme-accent-color-a200) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable--empty {
|
||||
@include flex-column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: inherit;
|
||||
|
||||
.adf-datatable-body {
|
||||
.adf-datatable-row {
|
||||
height: 100%;
|
||||
background-color: var(--theme-card-bg-color);
|
||||
border: none !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: unset;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable--empty--header-visible {
|
||||
|
||||
.adf-datatable-header {
|
||||
border: 1px solid var(--theme-border-color);
|
||||
}
|
||||
|
||||
.adf-datatable-body {
|
||||
@include flex-column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.adf-datatable-row {
|
||||
height: 100%;
|
||||
background-color: var(--theme-card-bg-color);
|
||||
border: none !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: unset;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -53,6 +53,7 @@ export enum ShowHeaderMode {
|
||||
@Component({
|
||||
selector: 'adf-datatable',
|
||||
templateUrl: './datatable.component.html',
|
||||
styleUrls: ['./datatable.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-datatable' }
|
||||
})
|
||||
|
||||
@@ -1,695 +0,0 @@
|
||||
@mixin adf-datatable-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
|
||||
$data-table-font-size: 14px !default;
|
||||
$data-table-header-font-size: 12px !default;
|
||||
$data-table-header-sort-icon-size: 16px !default;
|
||||
$data-table-header-color: mat-color($foreground, text) !default;
|
||||
$data-table-header-sorted-color: mat-color($foreground, text) !default;
|
||||
$data-table-header-sorted-icon-hover-color: mat-color($foreground, disabled-text) !default;
|
||||
$data-table-cell-text-color: mat-color($foreground, text) !default;
|
||||
$data-table-cell-link-color: mat-color($foreground, text) !default;
|
||||
$data-table-cell-link-hover-color: mat-color($accent, 500) !default;
|
||||
$data-table-outline: 1px solid mat-color($accent, A200) !default;
|
||||
$data-table-divider-color: mat-color($foreground, text, 0.07) !default;
|
||||
$data-table-hover-color: mat-color($background, 'hover') !default;
|
||||
$data-table-selection-color: mat-color($background, 'selected-button') !default;
|
||||
$data-table-dividers: 1px solid $data-table-divider-color !default;
|
||||
$data-table-dividers-edge-row: $data-table-dividers !default;
|
||||
$data-table-dividers-wrapper-border: $data-table-dividers !default;
|
||||
$data-table-row-height: 56px !default;
|
||||
$data-table-column-spacing: 36px !default;
|
||||
$data-table-column-padding: $data-table-column-spacing / 2;
|
||||
$data-table-card-padding: 24px !default;
|
||||
$data-table-cell-top: $data-table-card-padding / 2;
|
||||
$data-table-drag-border: 1px dashed mat-color($accent, A200);
|
||||
$data-table-thumbnail-width: 50px !default;
|
||||
$data-table-cell-min-width: 50px !default;
|
||||
$data-table-cell-min-width--no-grow: 100px !default;
|
||||
$data-table-cell-min-width--fileSize: $data-table-cell-min-width !default;
|
||||
|
||||
.adf-datatable {
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-datatable-card {
|
||||
border: 1px solid mat-color($foreground, divider);
|
||||
|
||||
.adf-datatable-body {
|
||||
flex-flow: row wrap;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
justify-content: space-evenly;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.adf-datatable-row {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 1 24%;
|
||||
|
||||
width: 288px !important;
|
||||
max-width: 288px !important;
|
||||
min-width: 288px !important;
|
||||
|
||||
height: 200px;
|
||||
|
||||
overflow: hidden !important;
|
||||
margin: 6px;
|
||||
padding: 15px;
|
||||
|
||||
@include mat-elevation-transition;
|
||||
@include mat-overridable-elevation(2);
|
||||
}
|
||||
|
||||
.adf-datatable-row-empty-card {
|
||||
height: 0 !important;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.adf-is-selected {
|
||||
background: mat-color($primary, 100);
|
||||
padding-bottom: 31px;
|
||||
}
|
||||
|
||||
.adf-datatable-card-permission {
|
||||
width: 100%;
|
||||
min-height: 250px;
|
||||
|
||||
.adf-datatable-cell {
|
||||
height: 240px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-card-loading {
|
||||
width: 100%;
|
||||
min-height: 250px;
|
||||
|
||||
.adf-datatable-cell {
|
||||
height: 240px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-card-empty {
|
||||
width: 100%;
|
||||
min-height: 380px;
|
||||
|
||||
.adf-datatable-cell {
|
||||
height: 370px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell--image {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.adf-datatable-cell {
|
||||
text-align: left;
|
||||
flex: 0 1 24%;
|
||||
height: 136px !important;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
|
||||
&::before {
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
content: attr(title);
|
||||
color: mat-color($foreground, text, 0.4);
|
||||
float: left;
|
||||
width: 140px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable__actions-cell {
|
||||
position: absolute;
|
||||
height: 42px !important;
|
||||
width: 42px !important;
|
||||
right: 0;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.adf-datatable-row:not(:hover) .adf-datatable-hide-actions-without-hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-image-table-cell {
|
||||
margin: 8px;
|
||||
padding: 4px;
|
||||
overflow: visible;
|
||||
border-bottom: 1px solid mat-color($foreground, divider);
|
||||
|
||||
.adf-datatable-cell-container {
|
||||
float: left;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin: 2px;
|
||||
content: attr(filename);
|
||||
float: left;
|
||||
width: 140px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-checkbox {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.adf-datatable-header {
|
||||
margin-right: 18px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.adf-datatable-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: mat-color($background, card);
|
||||
border: $data-table-dividers-wrapper-border;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
.adf-datatable-center-size-column-ie {
|
||||
padding-top: 17px;
|
||||
}
|
||||
|
||||
.adf-datatable-center-actions-column-ie {
|
||||
padding-top: 7px !important;
|
||||
}
|
||||
|
||||
.adf-datatable-center-date-column-ie {
|
||||
position: relative !important;
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-center-img-ie {
|
||||
padding:0;
|
||||
min-width: 0;
|
||||
width: 24px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.adf-datatable-cell {
|
||||
color: $data-table-cell-text-color;
|
||||
}
|
||||
|
||||
.adf-datatable-row {
|
||||
&:hover, &:focus {
|
||||
background-color: $data-table-hover-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-offset: -1px;
|
||||
outline: $data-table-outline;
|
||||
}
|
||||
|
||||
.adf-cell-value, .adf-datatable-cell-header {
|
||||
&:focus {
|
||||
outline-offset: -1px;
|
||||
outline: $data-table-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: inherit;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
|
||||
.adf-datatable-row {
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: background-color;
|
||||
border-top: $data-table-dividers;
|
||||
min-height: $data-table-row-height;
|
||||
cursor: pointer;
|
||||
|
||||
@include adf-no-select;
|
||||
|
||||
&.adf-is-selected, &.adf-is-selected:hover {
|
||||
background-color: $data-table-selection-color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: $data-table-dividers-edge-row;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
|
||||
.adf-datatable-checkbox {
|
||||
max-width: $data-table-thumbnail-width;
|
||||
width: $data-table-thumbnail-width;
|
||||
}
|
||||
|
||||
/* query for Microsoft IE 11*/
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
.adf-datatable-checkbox {
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell, .adf-datatable-cell-header {
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
min-width: $data-table-cell-min-width;
|
||||
|
||||
&--text {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&--date {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--number {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--image,
|
||||
&--icon {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
width: $data-table-thumbnail-width;
|
||||
min-width: $data-table-thumbnail-width;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--fileSize {
|
||||
min-width: $data-table-cell-min-width--fileSize;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header {
|
||||
@include adf-no-select;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
min-height: $data-table-row-height !important;
|
||||
font-size: $data-table-header-font-size;
|
||||
color: $data-table-header-color;
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 12px !important;
|
||||
|
||||
&.adf-sortable {
|
||||
@include adf-no-select;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.adf-datatable__header--sorted-asc,
|
||||
&.adf-datatable__header--sorted-desc {
|
||||
color: $data-table-header-sorted-color;
|
||||
&::before {
|
||||
@include typo-icon;
|
||||
font-size: $data-table-header-sort-icon-size;
|
||||
content: '\e5d8';
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
position: relative;
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
&.adf-datatable__header--sorted-desc::before {
|
||||
content: '\e5db';
|
||||
}
|
||||
&.adf-datatable-cell--fileSize.adf-datatable__header--sorted-asc::before,
|
||||
&.adf-datatable-cell--fileSize.adf-datatable__header--sorted-desc::before {
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
&.adf-datatable-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-expand-cell-1, .adf-datatable-cell.adf-expand-cell-1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-expand-cell-2, .adf-datatable-cell.adf-expand-cell-2 {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-expand-cell-3, .adf-datatable-cell.adf-expand-cell-3 {
|
||||
flex-grow: 3;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-expand-cell-4, .adf-datatable-cell.adf-expand-cell-4 {
|
||||
flex-grow: 4;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-expand-cell-5, .adf-datatable-cell.adf-expand-cell-5 {
|
||||
flex-grow: 5;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-header.adf-no-grow-cell, .adf-datatable-cell.adf-no-grow-cell {
|
||||
flex-grow: 0;
|
||||
min-width: $data-table-cell-min-width--no-grow;
|
||||
}
|
||||
|
||||
.adf-datatable-cell, .adf-datatable-cell-header {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
min-height: inherit;
|
||||
|
||||
.adf-datatable-cell-container {
|
||||
overflow: hidden;
|
||||
min-height: inherit;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
word-break: break-word;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
|
||||
@media screen and (-ms-high-contrast: active),
|
||||
screen and (-ms-high-contrast: none) {
|
||||
padding: 17px 10px 10px;
|
||||
}
|
||||
}
|
||||
&--fileSize .adf-datatable-cell-value {
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-cell-value {
|
||||
display: flex;
|
||||
min-height: inherit;
|
||||
align-items: center;
|
||||
word-break: break-all;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-datatable__actions-cell, .adf-datatable-cell--image {
|
||||
max-width: $data-table-thumbnail-width;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.adf-datatable-row:not(:hover) .adf-datatable-hide-actions-without-hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-datatable-cell--image {
|
||||
max-width: $data-table-thumbnail-width;
|
||||
}
|
||||
|
||||
.adf-location-cell {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $data-table-cell-link-color;
|
||||
|
||||
&:hover {
|
||||
color: $data-table-cell-link-hover-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* [Accessibility] For screen reader only */
|
||||
.adf-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.adf-is-selected {
|
||||
background: mat-color($primary, 100);
|
||||
}
|
||||
|
||||
.adf-datatable-link {
|
||||
text-decoration: none;
|
||||
color: $data-table-cell-link-color;
|
||||
|
||||
&:hover {
|
||||
color: $data-table-cell-link-hover-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dynamic-column .adf-datatable-link:hover {
|
||||
text-decoration: none;
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-cell,
|
||||
.adf-datatable-cell-header {
|
||||
.adf-datatable-link .adf-datatable-cell-value {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-ellipsis-cell {
|
||||
position: sticky;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0 4px;
|
||||
|
||||
&.adf-datatable-cell-header,
|
||||
.adf-datatable-content-cell {
|
||||
max-width: calc(100% - 0.1px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.adf-datatable-content-cell {
|
||||
overflow: unset;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* query for Microsoft IE 11*/
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
.adf-cell-value {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* cell stretching content */
|
||||
& > div::after {
|
||||
content: attr(title);
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Empty folder */
|
||||
.adf-no-content-container {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading folder */
|
||||
.adf-loading-content-container {
|
||||
padding: 0 !important;
|
||||
width: 100%;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-no-permission {
|
||||
&__row:hover {
|
||||
cursor: default;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
&__cell {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utils */
|
||||
.adf-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* mobile phone */
|
||||
@media all and (max-width: 768px) {
|
||||
.adf-desktop-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width: 768px) {
|
||||
.adf-desktop-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* [Accessibility] Material checkbox labels */
|
||||
.adf-checkbox-sr-only .mat-checkbox-label {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.adf-sticky-header {
|
||||
border-top: 0;
|
||||
height: 100%;
|
||||
|
||||
.adf-datatable-header {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
border-top: $data-table-dividers;
|
||||
border-bottom: $data-table-dividers;
|
||||
}
|
||||
|
||||
.adf-datatable-body {
|
||||
display: block;
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-upload__dragging {
|
||||
& > div {
|
||||
border-top: $data-table-drag-border !important;
|
||||
border-bottom: $data-table-drag-border !important;
|
||||
|
||||
&:first-child {
|
||||
border-left: $data-table-drag-border;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: $data-table-drag-border !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable--empty {
|
||||
@include flex-column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: inherit;
|
||||
|
||||
.adf-datatable-body {
|
||||
.adf-datatable-row {
|
||||
height: 100%;
|
||||
background-color: mat-color($background, card);
|
||||
border: none !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: unset;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable--empty--header-visible {
|
||||
|
||||
.adf-datatable-header {
|
||||
border: $data-table-dividers-wrapper-border;
|
||||
}
|
||||
|
||||
.adf-datatable-body {
|
||||
@include flex-column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.adf-datatable-row {
|
||||
height: 100%;
|
||||
background-color: mat-color($background, card);
|
||||
border: none !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: unset;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
32
lib/core/directives/tooltip-card/tooltip-card.component.scss
Normal file
32
lib/core/directives/tooltip-card/tooltip-card.component.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.adf-tooltip-card {
|
||||
@include mat-elevation(8);
|
||||
background-color: var(--theme-card-bg-color);
|
||||
border: 1px solid var(--theme-primary-color);
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
|
||||
p, div {
|
||||
font-size: var(--theme-caption-font-size);
|
||||
color: var(--adf-tooltip-card-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid var(--theme-primary-color);
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .cdk-overlay-connected-position-bounding-box {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
@@ -21,6 +21,7 @@ import { DomSanitizer } from '@angular/platform-browser';
|
||||
@Component({
|
||||
selector: 'adf-tooltip-card-component',
|
||||
templateUrl: './tooltip-card.component.html',
|
||||
styleUrls: ['./tooltip-card.component.scss'],
|
||||
animations: [
|
||||
trigger('tooltip', [
|
||||
transition(':enter', [
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
@mixin adf-tooltip-card-directive($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.adf-tooltip-card {
|
||||
@include mat-elevation(8);
|
||||
background-color: mat-color($background, card);
|
||||
border: 1px solid mat-color($primary);
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
|
||||
p, div {
|
||||
font-size: mat-font-size($alfresco-typography, caption);
|
||||
color: mat-color($foreground, text, 0.75);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid mat-color($primary);
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .cdk-overlay-connected-position-bounding-box {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
}
|
||||
121
lib/core/form/components/form-renderer.component.scss
Normal file
121
lib/core/form/components/form-renderer.component.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
.adf {
|
||||
&-form-container {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
|
||||
& .mat-card {
|
||||
padding: 16px 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& .mat-card-header-text {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
& .mat-tab-body-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& .mat-tab-label {
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
line-height: var(--theme-headline-line-height);
|
||||
letter-spacing: -0.4px;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
& .mat-ink-bar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
& .mat-form-field-wrapper {
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-form-title {
|
||||
font-size: var(--theme-title-font-size);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-form-debug-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text {
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-form-reload-button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
&-form-validation-button {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 39px;
|
||||
color: var(--theme-accent-color);
|
||||
|
||||
& .adf-invalid-color {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-form-hide-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&-task-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-label {
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
font-size: var(--theme-caption-font-size);
|
||||
line-height: var(--theme-headline-line-height);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-form-mat-card-actions {
|
||||
float: right;
|
||||
padding-bottom: 25px !important;
|
||||
padding-right: 25px !important;
|
||||
|
||||
& .mat-button {
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
& .mat-button-wrapper {
|
||||
width: 58px;
|
||||
height: 20px;
|
||||
opacity: 0.54;
|
||||
font-size: var(--theme-body-2-font-size);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form-field {
|
||||
width: 100%;
|
||||
|
||||
.mat-input-element {
|
||||
font-size: var(--theme-body-2-font-size);
|
||||
padding-top: 8px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
@@ -21,6 +21,7 @@ import { FormModel } from './widgets/core/form.model';
|
||||
@Component({
|
||||
selector: 'adf-form-renderer',
|
||||
templateUrl: './form-renderer.component.html',
|
||||
styleUrls: ['./form-renderer.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FormRendererComponent {
|
||||
|
||||
@@ -1,130 +0,0 @@
|
||||
@mixin adf-form-renderer-theme($theme) {
|
||||
|
||||
$config: mat-typography-config();
|
||||
$warn: map-get($theme, warn);
|
||||
$accent: map-get($theme, accent);
|
||||
|
||||
.adf {
|
||||
&-form-container {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
|
||||
& .mat-card {
|
||||
padding: 16px 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& .mat-card-header-text {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
& .mat-tab-body-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& .mat-tab-label {
|
||||
font-size: mat-font-size($config, subheading-2);
|
||||
line-height: mat-line-height($config, headline);
|
||||
letter-spacing: -0.4px;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
& .mat-ink-bar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
& .mat-form-field-wrapper {
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-form-title {
|
||||
font-size: mat-font-size($alfresco-typography, title);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-form-debug-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text {
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-form-reload-button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
&-form-validation-button {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 39px;
|
||||
color: mat-color($accent);
|
||||
|
||||
& .adf-invalid-color {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
|
||||
&-form-hide-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&-task-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-label {
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
font-size: mat-font-size($config, caption);
|
||||
line-height: mat-line-height($config, headline);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-form-mat-card-actions {
|
||||
float: right;
|
||||
padding-bottom: 25px !important;
|
||||
padding-right: 25px !important;
|
||||
|
||||
& .mat-button {
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
& .mat-button-wrapper {
|
||||
width: 58px;
|
||||
height: 20px;
|
||||
opacity: 0.54;
|
||||
font-size: mat-font-size($config, body-2);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form-field {
|
||||
width: 100%;
|
||||
|
||||
.mat-input-element {
|
||||
font-size: mat-font-size($config, body-2);
|
||||
padding-top: 8px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
@mixin adf-amount-widget-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf {
|
||||
&-amount-widget {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
&-amount-widget__input {
|
||||
margin-top: -15px;
|
||||
|
||||
.mat-focused {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:not(.mat-focused):not(.mat-form-field-invalid) {
|
||||
.adf-amount-widget__prefix-spacing {
|
||||
color: mat-color($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
20
lib/core/form/components/widgets/amount/amount.widget.scss
Normal file
20
lib/core/form/components/widgets/amount/amount.widget.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
.adf {
|
||||
&-amount-widget {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
&-amount-widget__input {
|
||||
margin-top: -15px;
|
||||
|
||||
.mat-focused {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:not(.mat-focused):not(.mat-form-field-invalid) {
|
||||
.adf-amount-widget__prefix-spacing {
|
||||
color: var(--theme-secondary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -30,6 +30,7 @@ export const ADF_AMOUNT_SETTINGS = new InjectionToken<AmountWidgetSettings>('adf
|
||||
@Component({
|
||||
selector: 'amount-widget',
|
||||
templateUrl: './amount.widget.html',
|
||||
styleUrls: ['./amount.widget.scss'],
|
||||
host: {
|
||||
'(click)': 'event($event)',
|
||||
'(blur)': 'event($event)',
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
@mixin adf-form-container-widget-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-container-widget__header-text {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.87);
|
||||
padding-bottom: 10px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
/* Chrome/Safari/Opera */
|
||||
-moz-user-select: none;
|
||||
/* Firefox */
|
||||
-ms-user-select: none;
|
||||
/* IE/Edge */
|
||||
-webkit-touch-callout: none;
|
||||
/* iOS Safari */
|
||||
&.adf-collapsible {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-field-list {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
container-widget {
|
||||
.adf-grid-list-column-view {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-right: -1%;
|
||||
}
|
||||
|
||||
.adf-grid-list-single-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.adf-grid-list-column-view-item {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1%;
|
||||
padding-right: 1%;
|
||||
}
|
||||
|
||||
.adf-grid-list {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.adf-grid-list-item {
|
||||
box-sizing: border-box;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
.adf-grid-list-item {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.adf-grid-list--column-view {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.adf-grid-list-single-column {
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
.adf-grid-list-column-view-item {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-input-placeholder {
|
||||
top: 1.8em !important;
|
||||
}
|
||||
|
||||
.mat-focused {
|
||||
|
||||
label {
|
||||
transform: scaleX(1);
|
||||
transition: transform 150ms linear,
|
||||
background-color $swift-ease-in-duration $swift-ease-in-timing-function;
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.mat-form-field-prefix {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-grid-tile {
|
||||
overflow: visible;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
adf-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
115
lib/core/form/components/widgets/container/container.widget.scss
Normal file
115
lib/core/form/components/widgets/container/container.widget.scss
Normal file
@@ -0,0 +1,115 @@
|
||||
.adf-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-container-widget__header-text {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.87);
|
||||
padding-bottom: 10px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
/* Chrome/Safari/Opera */
|
||||
-moz-user-select: none;
|
||||
/* Firefox */
|
||||
-ms-user-select: none;
|
||||
/* IE/Edge */
|
||||
-webkit-touch-callout: none;
|
||||
/* iOS Safari */
|
||||
&.adf-collapsible {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-field-list {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
container-widget {
|
||||
.adf-grid-list-column-view {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-right: -1%;
|
||||
}
|
||||
|
||||
.adf-grid-list-single-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.adf-grid-list-column-view-item {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1%;
|
||||
padding-right: 1%;
|
||||
}
|
||||
|
||||
.adf-grid-list {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.adf-grid-list-item {
|
||||
box-sizing: border-box;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
.adf-grid-list-item {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.adf-grid-list--column-view {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.adf-grid-list-single-column {
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
.adf-grid-list-column-view-item {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-input-placeholder {
|
||||
top: 1.8em !important;
|
||||
}
|
||||
|
||||
.mat-focused {
|
||||
|
||||
label {
|
||||
transform: scaleX(1);
|
||||
transition: transform 150ms linear;
|
||||
background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.mat-form-field-prefix {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-grid-tile {
|
||||
overflow: visible;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
adf-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -26,6 +26,7 @@ import { ContainerWidgetComponentModel } from './container.widget.model';
|
||||
@Component({
|
||||
selector: 'container-widget',
|
||||
templateUrl: './container.widget.html',
|
||||
styleUrls: ['./container.widget.scss'],
|
||||
host: {
|
||||
'(click)': 'event($event)',
|
||||
'(blur)': 'event($event)',
|
||||
|
||||
@@ -1,166 +0,0 @@
|
||||
@mixin adf-dynamic-table-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$dynamic-table-font-size: 14px !default;
|
||||
$dynamic-table-header-font-size: 12px !default;
|
||||
$dynamic-table-header-sort-icon-size: 16px !default;
|
||||
$dynamic-table-header-color: mat-color($foreground, text) !default;
|
||||
$dynamic-table-header-sorted-color: mat-color($foreground, text) !default;
|
||||
$dynamic-table-header-sorted-icon-hover-color: mat-color($foreground, disabled-text) !default;
|
||||
$dynamic-table-divider-color: mat-color($foreground, text, 0.07) !default;
|
||||
$dynamic-table-hover-color: #eeeeee !default;
|
||||
$dynamic-table-selection-color: #e0f7fa !default;
|
||||
$dynamic-table-dividers: 1px solid $dynamic-table-divider-color !default;
|
||||
$dynamic-table-row-height: 56px !default;
|
||||
$dynamic-table-column-spacing: 36px !default;
|
||||
$dynamic-table-column-padding: $dynamic-table-column-spacing / 2;
|
||||
$dynamic-table-card-padding: 24px !default;
|
||||
$dynamic-table-cell-top: $dynamic-table-card-padding / 2;
|
||||
$dynamic-table-drag-border: 1px dashed rgb(68, 138, 255);
|
||||
|
||||
dynamic-table-widget .adf-label {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-dynamic-table-scrolling {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-dynamic-table {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border: $dynamic-table-dividers;
|
||||
white-space: nowrap;
|
||||
font-size: $dynamic-table-font-size;
|
||||
|
||||
/* Firefox fixes */
|
||||
border-collapse: unset;
|
||||
border-spacing: 0;
|
||||
|
||||
thead {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
position: relative;
|
||||
height: $dynamic-table-row-height;
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: background-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $dynamic-table-hover-color;
|
||||
}
|
||||
|
||||
&.adf-is-selected, &.adf-is-selected:hover {
|
||||
background-color: $dynamic-table-selection-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-offset: -1px;
|
||||
outline: rgb(68, 138, 255) solid 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding;
|
||||
text-align: center;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
color: mat-color($foreground, text);
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
height: $dynamic-table-row-height;
|
||||
border-top: $dynamic-table-dividers;
|
||||
border-bottom: $dynamic-table-dividers;
|
||||
padding-top: $dynamic-table-cell-top;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include adf-no-select;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
th {
|
||||
@include adf-no-select;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
height: $dynamic-table-row-height;
|
||||
font-size: $dynamic-table-header-font-size;
|
||||
color: $dynamic-table-header-color;
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.adf-sortable {
|
||||
@include adf-no-select;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.adf-dynamic-table__header--sorted-asc,
|
||||
&.adf-dynamic-table__header--sorted-desc {
|
||||
color: $dynamic-table-header-sorted-color;
|
||||
&::before {
|
||||
@include typo-icon;
|
||||
font-size: $dynamic-table-header-sort-icon-size;
|
||||
content: '\e5d8';
|
||||
margin-right: 5px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&::before {
|
||||
color: $dynamic-table-header-sorted-icon-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.adf-dynamic-table__header--sorted-desc::before {
|
||||
content: '\e5db';
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dynamic-table-cell {
|
||||
text-align: left;
|
||||
cursor: default;
|
||||
|
||||
&--text {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--number {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--image {
|
||||
text-align: left;
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
@import '~@angular/material/theming';
|
||||
@import '../../../../styles/mixins';
|
||||
|
||||
$dynamic-table-font-size: 14px !default;
|
||||
$dynamic-table-header-font-size: 12px !default;
|
||||
$dynamic-table-header-sort-icon-size: 16px !default;
|
||||
$dynamic-table-hover-color: #eeeeee !default;
|
||||
$dynamic-table-selection-color: #e0f7fa !default;
|
||||
$dynamic-table-row-height: 56px !default;
|
||||
$dynamic-table-column-spacing: 36px !default;
|
||||
$dynamic-table-column-padding: $dynamic-table-column-spacing / 2;
|
||||
$dynamic-table-card-padding: 24px !default;
|
||||
$dynamic-table-cell-top: $dynamic-table-card-padding / 2;
|
||||
$dynamic-table-drag-border: 1px dashed rgb(68, 138, 255);
|
||||
|
||||
dynamic-table-widget .adf-label {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-dynamic-table-scrolling {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-dynamic-table {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
white-space: nowrap;
|
||||
font-size: $dynamic-table-font-size;
|
||||
|
||||
/* Firefox fixes */
|
||||
border-collapse: unset;
|
||||
border-spacing: 0;
|
||||
|
||||
thead {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
position: relative;
|
||||
height: $dynamic-table-row-height;
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: background-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $dynamic-table-hover-color;
|
||||
}
|
||||
|
||||
&.adf-is-selected, &.adf-is-selected:hover {
|
||||
background-color: $dynamic-table-selection-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-offset: -1px;
|
||||
outline: rgb(68, 138, 255) solid 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding;
|
||||
text-align: center;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
color: var(--theme-text-fg-color);
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
height: $dynamic-table-row-height;
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
padding-top: $dynamic-table-cell-top;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include adf-no-select;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
th {
|
||||
@include adf-no-select;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
height: $dynamic-table-row-height;
|
||||
font-size: $dynamic-table-header-font-size;
|
||||
color: var(--theme-text-fg-color);
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.adf-sortable {
|
||||
@include adf-no-select;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.adf-dynamic-table__header--sorted-asc,
|
||||
&.adf-dynamic-table__header--sorted-desc {
|
||||
color: var(--theme-text-fg-color);
|
||||
&::before {
|
||||
@include typo-icon;
|
||||
font-size: $dynamic-table-header-sort-icon-size;
|
||||
content: '\e5d8';
|
||||
margin-right: 5px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&::before {
|
||||
color: var(--theme-disabled-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.adf-dynamic-table__header--sorted-desc::before {
|
||||
content: '\e5db';
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dynamic-table-cell {
|
||||
text-align: left;
|
||||
cursor: default;
|
||||
|
||||
&--text {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--number {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--image {
|
||||
text-align: left;
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -29,6 +29,7 @@ import { DynamicTableModel } from './dynamic-table.widget.model';
|
||||
@Component({
|
||||
selector: 'dynamic-table-widget',
|
||||
templateUrl: './dynamic-table.widget.html',
|
||||
styleUrls: ['./dynamic-table.widget.scss'],
|
||||
host: {
|
||||
'(click)': 'event($event)',
|
||||
'(blur)': 'event($event)',
|
||||
|
||||
@@ -1,97 +1,86 @@
|
||||
@mixin adf-form-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
@include adf-hyperlink-widget-theme($theme);
|
||||
|
||||
ul > li > form-field > .adf-focus {
|
||||
.adf-label {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
ul > li > form-field > .adf-focus {
|
||||
.adf-label {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-error-text-container {
|
||||
height: 20px;
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
&-error-text {
|
||||
padding: 1px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
float: left;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
&-error-icon {
|
||||
float: right;
|
||||
font-size: 17px;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: rgb(186, 186, 186);;
|
||||
}
|
||||
|
||||
&-invalid {
|
||||
|
||||
.mat-form-field-underline {
|
||||
background-color: #f44336 !important;
|
||||
}
|
||||
|
||||
.mat-checkbox {
|
||||
color: var(--theme-warn-color);
|
||||
.mat-checkbox-frame {
|
||||
border-color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-select {
|
||||
|
||||
&-value {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
&-arrow {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.adf-file {
|
||||
border-color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
.mat-form-field-prefix {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
.adf-input {
|
||||
border-color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
.adf-label {
|
||||
color: var(--theme-warn-color);
|
||||
&::after {
|
||||
background-color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* query for Microsoft IE 11*/
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
adf-form-field {
|
||||
.mat-input-element, .mat-select, .mat-form-field {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-error-text-container {
|
||||
height: 20px;
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
&-error-text {
|
||||
padding: 1px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
float: left;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
&-error-icon {
|
||||
float: right;
|
||||
font-size: 17px;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: rgb(186, 186, 186);;
|
||||
}
|
||||
|
||||
&-invalid {
|
||||
|
||||
.mat-form-field-underline {
|
||||
background-color: #f44336 !important;
|
||||
}
|
||||
|
||||
.mat-checkbox {
|
||||
color: mat-color($warn);
|
||||
.mat-checkbox-frame {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-select {
|
||||
|
||||
&-value {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
&-arrow {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.adf-file {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
|
||||
.mat-form-field-prefix {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-input {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-label {
|
||||
color: mat-color($warn);
|
||||
&::after {
|
||||
background-color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* query for Microsoft IE 11*/
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
adf-form-field {
|
||||
.mat-input-element, .mat-select, .mat-form-field {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
@mixin adf-hyperlink-widget-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf-hyperlink-widget {
|
||||
padding: 0.4375em 0;
|
||||
border-top: 0.84375em solid transparent;
|
||||
|
||||
a {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.adf-hyperlink-widget {
|
||||
padding: 0.4375em 0;
|
||||
border-top: 0.84375em solid transparent;
|
||||
|
||||
a {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
@@ -25,6 +25,7 @@ import { FormFieldModel } from '../core';
|
||||
@Component({
|
||||
selector: 'hyperlink-widget',
|
||||
templateUrl: './hyperlink.widget.html',
|
||||
styleUrls: ['./hyperlink.widget.scss'],
|
||||
host: {
|
||||
'(click)': 'event($event)',
|
||||
'(blur)': 'event($event)',
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
@mixin adf-form-people-widget-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf {
|
||||
|
||||
&-people-widget {
|
||||
width: 100%;
|
||||
|
||||
.mat-form-field-label-wrapper {
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-people-widget-list {
|
||||
margin: 5px 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&-people-widget-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-people-widget-pic {
|
||||
background: mat-color($primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100px;
|
||||
color: mat-color($foreground, text);
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&-people-widget-image {
|
||||
margin-left: -44px;
|
||||
left: 21px;
|
||||
background: mat-color($background, dialog);
|
||||
border-radius: 100px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-people-widget-image-row {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-people-label-name {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
54
lib/core/form/components/widgets/people/people.widget.scss
Normal file
54
lib/core/form/components/widgets/people/people.widget.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.adf {
|
||||
|
||||
&-people-widget {
|
||||
width: 100%;
|
||||
|
||||
.mat-form-field-label-wrapper {
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-people-widget-list {
|
||||
margin: 5px 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&-people-widget-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-people-widget-pic {
|
||||
background: var(--theme-primary-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100px;
|
||||
color: var(--theme-text-fg-color);
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&-people-widget-image {
|
||||
margin-left: -44px;
|
||||
left: 21px;
|
||||
background: var(--theme-dialog-bg-color);
|
||||
border-radius: 100px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-people-widget-image-row {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-people-label-name {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
@@ -36,6 +36,7 @@ import {
|
||||
@Component({
|
||||
selector: 'people-widget',
|
||||
templateUrl: './people.widget.html',
|
||||
styleUrls: ['./people.widget.scss'],
|
||||
host: {
|
||||
'(click)': 'event($event)',
|
||||
'(blur)': 'event($event)',
|
||||
|
||||
93
lib/core/info-drawer/info-drawer-layout.component.scss
Normal file
93
lib/core/info-drawer/info-drawer-layout.component.scss
Normal file
@@ -0,0 +1,93 @@
|
||||
@import '../styles/mixins';
|
||||
|
||||
$adf-info-drawer-layout-title-font-size: 20px !default;
|
||||
$adf-info-drawer-icon-size: 48px !default;
|
||||
|
||||
.adf {
|
||||
&-info-drawer {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
&-info-drawer-layout {
|
||||
@include flex-column;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
background-color: var(--theme-background-color);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
|
||||
|
||||
& .mat-tab-label {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
color: var(--theme-accent-color);
|
||||
text-transform: uppercase;
|
||||
opacity: 1;
|
||||
|
||||
&-active {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
padding: 13px 0 0 23px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&-buttons {
|
||||
padding-right:18px;
|
||||
mat-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
width: 197px;
|
||||
height: 32px;
|
||||
font-size: $adf-info-drawer-layout-title-font-size;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
text-align: left;
|
||||
color: var(--theme-text-color);
|
||||
|
||||
& > div {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding: 10px;
|
||||
|
||||
> * {
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.adf-info-drawer-tabs .mat-tab-body-content {
|
||||
.adf-manage-versions-empty,
|
||||
.adf-manage-versions-no-permission {
|
||||
margin: 0;
|
||||
padding: $adf-info-drawer-icon-size/2;
|
||||
color: var(--theme-text-color);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-icon {
|
||||
width: $adf-info-drawer-icon-size;
|
||||
height: $adf-info-drawer-icon-size;
|
||||
font-size: $adf-info-drawer-icon-size;
|
||||
margin: 0 auto $adf-info-drawer-icon-size/2;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,6 +20,7 @@ import { Component, Directive, Input, ViewEncapsulation } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'adf-info-drawer-layout',
|
||||
templateUrl: './info-drawer-layout.component.html',
|
||||
styleUrls: ['./info-drawer-layout.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { 'class': 'adf-info-drawer-layout' }
|
||||
})
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
@mixin adf-info-drawer-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$adf-info-drawer-layout-background-color: mat-color($background, background) !default;
|
||||
$adf-info-drawer-layout-title-color: mat-color($foreground, text, 0.54) !default;
|
||||
$adf-info-drawer-layout-title-font-size: 20px !default;
|
||||
$adf-info-drawer-icon-size: 48px !default;
|
||||
|
||||
.adf {
|
||||
&-info-drawer {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
&-info-drawer-layout {
|
||||
@include flex-column;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
background-color: $adf-info-drawer-layout-background-color;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
|
||||
|
||||
& .mat-tab-label {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
color: mat-color($accent);
|
||||
text-transform: uppercase;
|
||||
opacity: 1;
|
||||
|
||||
&-active {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
padding: 13px 0 0 23px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&-buttons {
|
||||
padding-right:18px;
|
||||
mat-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
width: 197px;
|
||||
height: 32px;
|
||||
font-size: $adf-info-drawer-layout-title-font-size;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
text-align: left;
|
||||
color: $adf-info-drawer-layout-title-color;
|
||||
|
||||
& > div {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding: 10px;
|
||||
|
||||
> * {
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.adf-info-drawer-tabs .mat-tab-body-content {
|
||||
.adf-manage-versions-empty,
|
||||
.adf-manage-versions-no-permission {
|
||||
margin: 0;
|
||||
padding: $adf-info-drawer-icon-size/2;
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-icon {
|
||||
width: $adf-info-drawer-icon-size;
|
||||
height: $adf-info-drawer-icon-size;
|
||||
font-size: $adf-info-drawer-icon-size;
|
||||
margin: 0 auto $adf-info-drawer-icon-size/2;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,7 +20,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { MatTabChangeEvent } from '@angular/material/tabs';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { InfoDrawerComponent } from './info-drawer.component';
|
||||
import { setupTestBed } from '../testing/setup-test-bed';
|
||||
import { of } from 'rxjs';
|
||||
import { TranslateService, TranslateModule } from '@ngx-translate/core';
|
||||
import { CoreTestingModule } from '../testing/core.testing.module';
|
||||
@@ -31,14 +30,13 @@ describe('InfoDrawerComponent', () => {
|
||||
let fixture: ComponentFixture<InfoDrawerComponent>;
|
||||
let translateService: TranslateService;
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
CoreTestingModule
|
||||
]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
CoreTestingModule
|
||||
]
|
||||
});
|
||||
translateService = TestBed.inject(TranslateService);
|
||||
spyOn(translateService, 'get').and.callFake((key) => of(key));
|
||||
|
||||
@@ -89,17 +87,16 @@ describe('Custom InfoDrawer', () => {
|
||||
let component: CustomInfoDrawerComponent;
|
||||
let translateService: TranslateService;
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
CoreTestingModule
|
||||
],
|
||||
declarations: [
|
||||
CustomInfoDrawerComponent
|
||||
]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
CoreTestingModule
|
||||
],
|
||||
declarations: [
|
||||
CustomInfoDrawerComponent
|
||||
]
|
||||
});
|
||||
translateService = TestBed.inject(TranslateService);
|
||||
spyOn(translateService, 'get').and.callFake((key) => of(key));
|
||||
|
||||
@@ -108,6 +105,10 @@ describe('Custom InfoDrawer', () => {
|
||||
component = fixture.componentInstance;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
});
|
||||
|
||||
it('should render the title', () => {
|
||||
fixture.detectChanges();
|
||||
const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
|
||||
@@ -119,7 +120,7 @@ describe('Custom InfoDrawer', () => {
|
||||
fixture.detectChanges();
|
||||
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
|
||||
expect(tab.length).toBe(1);
|
||||
expect(tab[0].nativeElement.innerText).toContain('Tab1');
|
||||
expect(tab[0].nativeElement.innerText).toContain('TAB1');
|
||||
});
|
||||
|
||||
it('should select the tab 2 (index 1)', () => {
|
||||
@@ -127,7 +128,7 @@ describe('Custom InfoDrawer', () => {
|
||||
fixture.detectChanges();
|
||||
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
|
||||
expect(tab.length).toBe(1);
|
||||
expect(tab[0].nativeElement.innerText).toContain('Tab2');
|
||||
expect(tab[0].nativeElement.innerText).toContain('TAB2');
|
||||
});
|
||||
|
||||
it('should render a tab with icon', () => {
|
||||
@@ -135,7 +136,7 @@ describe('Custom InfoDrawer', () => {
|
||||
fixture.detectChanges();
|
||||
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
|
||||
expect(tab[0].nativeElement.innerText).not.toBe('Tab3');
|
||||
expect(tab[0].nativeElement.innerText).toContain('tab-icon');
|
||||
expect(tab[0].nativeElement.innerText).toContain('TAB-ICON');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -153,17 +154,16 @@ describe('Header visibility InfoDrawer', () => {
|
||||
let fixture: ComponentFixture<VisibilityInfoDrawerComponent>;
|
||||
let component: VisibilityInfoDrawerComponent;
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
CoreTestingModule
|
||||
],
|
||||
declarations: [
|
||||
VisibilityInfoDrawerComponent
|
||||
]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
CoreTestingModule
|
||||
],
|
||||
declarations: [
|
||||
VisibilityInfoDrawerComponent
|
||||
]
|
||||
});
|
||||
fixture = TestBed.createComponent(VisibilityInfoDrawerComponent);
|
||||
fixture.detectChanges();
|
||||
component = fixture.componentInstance;
|
||||
|
||||
@@ -19,7 +19,8 @@ import { Component, ContentChildren, EventEmitter, HostListener, Input, Output,
|
||||
import { MatTabChangeEvent } from '@angular/material/tabs';
|
||||
@Component({
|
||||
selector: 'adf-info-drawer-tab',
|
||||
template: '<ng-template><ng-content></ng-content></ng-template>'
|
||||
template: '<ng-template><ng-content></ng-content></ng-template>',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class InfoDrawerTabComponent {
|
||||
/** The title of the tab (string or translation key). */
|
||||
|
||||
108
lib/core/layout/components/header/header.component.scss
Normal file
108
lib/core/layout/components/header/header.component.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
adf-layout-header .mat-toolbar-single-row {
|
||||
|
||||
color: var(--theme-primary-color-default-contrast) !important;
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
|
||||
.adf-menu-icon {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 29px;
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
vertical-align: middle;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
cursor: pointer;
|
||||
letter-spacing: -0.3px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.adf-toolbar-divider {
|
||||
margin: 0 5px;
|
||||
|
||||
& > div {
|
||||
background-color: var(--theme-card-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
height: 24px;
|
||||
width: 2px;
|
||||
background-color: var(--theme-primary-color-default-contrast);
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
.adf-app-logo,
|
||||
.adf-app-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] adf-layout-header .mat-toolbar-single-row {
|
||||
.adf-menu-icon {
|
||||
margin-right: -11px;
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-name {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='ltr'] adf-layout-header .mat-toolbar-single-row {
|
||||
.adf-menu-icon {
|
||||
margin-left: -11px;
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-name {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
@@ -21,6 +21,7 @@ import { ThemePalette } from '@angular/material/core';
|
||||
@Component({
|
||||
selector: 'adf-layout-header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrls: ['./header.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-layout-header' }
|
||||
})
|
||||
|
||||
@@ -1,116 +0,0 @@
|
||||
@mixin adf-header-layout-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
adf-layout-header .mat-toolbar-single-row {
|
||||
|
||||
color: mat-color($primary, default-contrast) !important;
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
|
||||
.adf-menu-icon {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 29px;
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
vertical-align: middle;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
cursor: pointer;
|
||||
letter-spacing: -0.3px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.adf-toolbar-divider {
|
||||
margin: 0 5px;
|
||||
|
||||
& > div {
|
||||
background-color: mat-color($background, card, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
height: 24px;
|
||||
width: 2px;
|
||||
background-color: mat-color($primary, default-contrast);
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
.adf-app-logo,
|
||||
.adf-app-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] adf-layout-header .mat-toolbar-single-row {
|
||||
.adf-menu-icon {
|
||||
margin-right: -11px;
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-name {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='ltr'] adf-layout-header .mat-toolbar-single-row {
|
||||
.adf-menu-icon {
|
||||
margin-left: -11px;
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-name {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
adf-layout-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf-container-full-width {
|
||||
width: inherit;
|
||||
}
|
||||
/* query for Microsoft IE 11*/
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
.adf-container-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.adf-sidenav--hidden {
|
||||
visibility: hidden !important;
|
||||
width: 0 !important;
|
||||
transform: unset !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.mat-sidenav-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-sidenav {
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--theme-border-color);
|
||||
background-color: var(--theme-background-color);
|
||||
}
|
||||
|
||||
mat-sidenav-content.mat-sidenav-content,
|
||||
.mat-drawer-transition .mat-drawer-content {
|
||||
margin-left: 0 !important;
|
||||
transform: unset !important;
|
||||
transition-property: unset !important;
|
||||
transition-duration: unset !important;
|
||||
transition-timing-function: unset !important;
|
||||
}
|
||||
|
||||
mat-sidenav-content > div {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
> div {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
@@ -23,6 +23,7 @@ import { Direction } from '@angular/cdk/bidi';
|
||||
@Component({
|
||||
selector: 'adf-layout-container',
|
||||
templateUrl: './layout-container.component.html',
|
||||
styleUrls: ['./layout-container.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations: [sidenavAnimation, contentAnimation]
|
||||
})
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
@mixin adf-layout-container-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$adf-layout-container-height: 100% !default;
|
||||
|
||||
adf-layout-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $adf-layout-container-height;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf-container-full-width {
|
||||
width: inherit;
|
||||
}
|
||||
/* query for Microsoft IE 11*/
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
.adf-container-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.adf-sidenav--hidden {
|
||||
visibility: hidden !important;
|
||||
width: 0 !important;
|
||||
transform: unset !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.mat-sidenav-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-sidenav {
|
||||
overflow: hidden;
|
||||
border-right: 1px solid mat-color($foreground, text, 0.07);
|
||||
background-color: mat-color($background, background);
|
||||
}
|
||||
|
||||
mat-sidenav-content.mat-sidenav-content,
|
||||
.mat-drawer-transition .mat-drawer-content {
|
||||
margin-left: 0 !important;
|
||||
transform: unset !important;
|
||||
transition-property: unset !important;
|
||||
transition-duration: unset !important;
|
||||
transition-timing-function: unset !important;
|
||||
}
|
||||
|
||||
mat-sidenav-content > div {
|
||||
display: flex;
|
||||
height: $adf-layout-container-height;
|
||||
|
||||
> div {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
.adf {
|
||||
&-sidebar-action-menu {
|
||||
& .mat-raised-button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-shadow: none !important;
|
||||
height: 37.5px;
|
||||
font-weight: bold;
|
||||
background-color: var(--theme-primary-color);
|
||||
color: var(--theme-primary-color-default-contrast) !important;
|
||||
border-radius: 4px;
|
||||
& mat-icon {
|
||||
width: 24px;
|
||||
height: 25px;
|
||||
color: var(--theme-primary-color-default-contrast) !important;
|
||||
}
|
||||
}
|
||||
&-text {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
&-sidebar-action-menu-icon {
|
||||
margin: 18px 0 0 20px;
|
||||
color: var(--theme-text-color);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
&-sidebar-action-menu-options {
|
||||
text-align: left;
|
||||
letter-spacing: -0.4px;
|
||||
|
||||
.mat-menu-item {
|
||||
font-size: 14px;
|
||||
color: var(--theme-text-bold-color);
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.4px;
|
||||
}
|
||||
.mat-menu-item:hover {
|
||||
color: var(--theme-primary-color);
|
||||
opacity: inherit;
|
||||
}
|
||||
}
|
||||
&-sidebar-action-menu-panel {
|
||||
margin-top: 7.5px;
|
||||
border-radius: 2px;
|
||||
|
||||
@include mat-elevation(2);
|
||||
}
|
||||
}
|
||||
@@ -20,6 +20,7 @@ import { ChangeDetectionStrategy, Component, Directive, Input, ViewEncapsulation
|
||||
@Component({
|
||||
selector: 'adf-sidebar-action-menu',
|
||||
templateUrl: './sidebar-action-menu.component.html',
|
||||
styleUrls: ['./sidebar-action-menu.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { 'class': 'adf-sidebar-action-menu' }
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
@mixin adf-sidebar-action-menu-theme($theme) {
|
||||
|
||||
$primary: map-get($theme, primary);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
$adf-sidebar-action-menu-button-height: 37.5px;
|
||||
$adf-sidebar-action-menu-button-border-radius: 4px;
|
||||
$adf-sidebar-action-menu-opacity: 0.54;
|
||||
$adf-sidebar-action-menu-item-opacity: 0.87;
|
||||
$adf-sidebar-action-menu-item-line-spacing: -0.4px;
|
||||
$adf-sidebar-action-menu-item-font-size: 14px;
|
||||
|
||||
.adf {
|
||||
&-sidebar-action-menu {
|
||||
& .mat-raised-button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-shadow: none !important;
|
||||
height: $adf-sidebar-action-menu-button-height;
|
||||
font-weight: bold;
|
||||
background-color: mat-color($primary);
|
||||
color: mat-color($primary, default-contrast) !important;
|
||||
border-radius: $adf-sidebar-action-menu-button-border-radius;
|
||||
& mat-icon {
|
||||
width: 24px;
|
||||
height: 25px;
|
||||
color: mat-color($primary, default-contrast) !important;
|
||||
}
|
||||
}
|
||||
&-text {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
&-sidebar-action-menu-icon {
|
||||
margin: 18px 0 0 20px;
|
||||
color: mat-color($foreground, text, $adf-sidebar-action-menu-opacity);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
&-sidebar-action-menu-options {
|
||||
text-align: left;
|
||||
letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
|
||||
.mat-menu-item {
|
||||
font-size: $adf-sidebar-action-menu-item-font-size;
|
||||
color: mat-color($foreground, text, $adf-sidebar-action-menu-item-opacity);
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
|
||||
}
|
||||
.mat-menu-item:hover {
|
||||
color: mat-color($primary);
|
||||
opacity: inherit;
|
||||
}
|
||||
}
|
||||
&-sidebar-action-menu-panel {
|
||||
margin-top: 7.5px;
|
||||
border-radius: 2px;
|
||||
|
||||
@include mat-elevation(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
@import '~@angular/flex-layout/mq';
|
||||
@import '../../../styles/mixins';
|
||||
|
||||
.adf-sidenav-layout {
|
||||
|
||||
&-full-space {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include flex-column;
|
||||
width: 100%;
|
||||
|
||||
.adf-layout__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
router-outlet {
|
||||
flex: 0 0;
|
||||
}
|
||||
|
||||
@include layout-bp(lt-sm) {
|
||||
.mat-drawer {
|
||||
width: calc(-50px + 100vw) !important;
|
||||
max-width: 300px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-drawer-content {
|
||||
@include flex-column;
|
||||
position: unset;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@@ -40,6 +40,7 @@ import { takeUntil } from 'rxjs/operators';
|
||||
@Component({
|
||||
selector: 'adf-sidenav-layout',
|
||||
templateUrl: './sidenav-layout.component.html',
|
||||
styleUrls: ['./sidenav-layout.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-sidenav-layout' }
|
||||
})
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
@mixin adf-sidenav-layout-theme($theme) {
|
||||
.adf-sidenav-layout {
|
||||
|
||||
&-full-space {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include flex-column;
|
||||
width: 100%;
|
||||
|
||||
.adf-layout__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
router-outlet {
|
||||
flex: 0 0;
|
||||
}
|
||||
|
||||
@include layout-bp(lt-sm) {
|
||||
.mat-drawer {
|
||||
width: calc(-50px + 100vw) !important;
|
||||
max-width: 300px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-drawer-content {
|
||||
@include flex-column;
|
||||
position: unset;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
274
lib/core/login/components/login.component.scss
Normal file
274
lib/core/login/components/login.component.scss
Normal file
@@ -0,0 +1,274 @@
|
||||
@import '../../styles/mixins';
|
||||
|
||||
.adf-login {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
.adf-login-content {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 100%;
|
||||
min-width: 320px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
// IE11 vertical centering
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
& {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-ie11FixerParent {
|
||||
margin-top: 16px;
|
||||
min-width: 320px;
|
||||
|
||||
// IE11 vertical centering
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// IE11 vertical centering
|
||||
.adf-ie11FixerChild {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.adf-show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.adf-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.adf-icon-inline {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 31%;
|
||||
left: 82%;
|
||||
width: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf-login-card-wide {
|
||||
border-radius: 8px;
|
||||
background-color: var(--theme-dialog-bg-color);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 450px;
|
||||
min-width: 320px;
|
||||
padding: 21px 64px 34px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 482px) {
|
||||
.adf-login-card-wide {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-error-container {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.adf-error-message {
|
||||
display: flex;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
color: var(--theme-warn-color);
|
||||
padding: 0;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.adf-error-message .adf-error-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mat-card-header-text {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.adf-img-logo {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.adf-alfresco-logo {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.adf-alfresco-logo img {
|
||||
max-height: 58px;
|
||||
}
|
||||
|
||||
.adf-login-button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
line-height: 38px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.adf-login-button-label {
|
||||
color: var(--theme-accent-color-default-contrast);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isChecking {
|
||||
background-color: #e0f7fa;
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isChecking .adf-login-button-label {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isWelcome {
|
||||
background-color: var(--theme-primary-color);
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isWelcome .adf-welcome-icon {
|
||||
margin: 5px 0 0 10px;
|
||||
}
|
||||
|
||||
.adf-interactive-login-label {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
box-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adf-login-spinner-container {
|
||||
margin-left: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.adf-login-checking-spinner > svg > circle {
|
||||
stroke-width: 16% !important;
|
||||
|
||||
}
|
||||
|
||||
.adf-login-controls {
|
||||
padding: 0 0 26px;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-login-action {
|
||||
margin-top: 20px;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
|
||||
-webkit-box-pack: space-between;
|
||||
-moz-box-pack: space-between;
|
||||
box-pack: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.adf-login-action-left a, .adf-login-action-right a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.adf-is-active {
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
line-height: 1.33;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
.adf-copyright {
|
||||
min-width: 320px;
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
font-size: 12px;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.mat-form-field .adf-login-password-icon.mat-icon {
|
||||
color: var(--theme-text-fg-color);
|
||||
}
|
||||
|
||||
.adf-login__field .mat-form-field-wrapper {
|
||||
margin: 1em 0 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.adf-login__field input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px var(--theme-dialog-bg-color) inset;
|
||||
-webkit-text-fill-color: var(--theme-text-fg-color) !important;
|
||||
}
|
||||
|
||||
.adf-login-validation {
|
||||
background-color: transparent;
|
||||
color: var(--theme-warn-color);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.adf-login-error {
|
||||
color: var(--theme-warn-color);
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
margin-top: -12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-login__remember-me {
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.adf-login__remember-me .mat-checkbox-label {
|
||||
opacity: 0.87;
|
||||
}
|
||||
|
||||
.adf-login__field {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.adf-login-remember-me {
|
||||
color: var(--theme-text-fg-color) !important;
|
||||
}
|
||||
|
||||
.adf-login-action-container {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin-top: 23px;
|
||||
}
|
||||
}
|
||||
@@ -53,10 +53,9 @@ interface ValidationMessage {
|
||||
@Component({
|
||||
selector: 'adf-login',
|
||||
templateUrl: './login.component.html',
|
||||
styleUrls: ['./login.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: {
|
||||
class: 'adf-login'
|
||||
}
|
||||
host: { class: 'adf-login' }
|
||||
})
|
||||
export class LoginComponent implements OnInit, OnDestroy {
|
||||
isPasswordShow: boolean = false;
|
||||
|
||||
@@ -1,281 +0,0 @@
|
||||
@mixin adf-login-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$text-color-primary: mat-color($foreground, text);
|
||||
|
||||
.adf-login {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
.adf-login-content {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 100%;
|
||||
min-width: 320px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
// IE11 vertical centering
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
& {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-ie11FixerParent {
|
||||
margin-top: 16px;
|
||||
min-width: 320px;
|
||||
|
||||
// IE11 vertical centering
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// IE11 vertical centering
|
||||
.adf-ie11FixerChild {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.adf-show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.adf-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.adf-icon-inline {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 31%;
|
||||
left: 82%;
|
||||
width: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf-login-card-wide {
|
||||
border-radius: 8px;
|
||||
background-color: mat-color($background, dialog);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 450px;
|
||||
min-width: 320px;
|
||||
padding: 21px 64px 34px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 482px) {
|
||||
.adf-login-card-wide {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-error-container {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.adf-error-message {
|
||||
display: flex;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
color: mat-color($warn);
|
||||
padding: 0;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.adf-error-message .adf-error-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mat-card-header-text {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.adf-img-logo {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.adf-alfresco-logo {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.adf-alfresco-logo img {
|
||||
max-height: 58px;
|
||||
}
|
||||
|
||||
.adf-login-button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
line-height: 38px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.adf-login-button-label {
|
||||
color: mat-contrast($accent, default);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isChecking {
|
||||
background-color: #e0f7fa;
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isChecking .adf-login-button-label {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isWelcome {
|
||||
background-color: mat-color($primary);
|
||||
color: mat-contrast($primary, default);
|
||||
}
|
||||
|
||||
.adf-login-button.adf-isWelcome .adf-welcome-icon {
|
||||
margin: 5px 0 0 10px;
|
||||
}
|
||||
|
||||
.adf-interactive-login-label {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
box-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adf-login-spinner-container {
|
||||
margin-left: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.adf-login-checking-spinner > svg > circle {
|
||||
stroke-width: 16% !important;
|
||||
|
||||
}
|
||||
|
||||
.adf-login-controls {
|
||||
padding: 0 0 26px;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-login-action {
|
||||
margin-top: 20px;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
flex-direction: row;
|
||||
|
||||
-webkit-box-pack: space-between;
|
||||
-moz-box-pack: space-between;
|
||||
box-pack: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.adf-login-action-left a, .adf-login-action-right a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.adf-is-active {
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
line-height: 1.33;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-copyright {
|
||||
min-width: 320px;
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
font-size: 12px;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.mat-form-field .adf-login-password-icon.mat-icon {
|
||||
color: $text-color-primary;
|
||||
}
|
||||
|
||||
.adf-login__field .mat-form-field-wrapper {
|
||||
margin: 1em 0 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.adf-login__field input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px mat-color($background, dialog) inset;
|
||||
-webkit-text-fill-color: $text-color-primary !important;
|
||||
}
|
||||
|
||||
.adf-login-validation {
|
||||
background-color: transparent;
|
||||
color: mat-color($warn);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.adf-login-error {
|
||||
color: mat-color($warn);
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
margin-top: -12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-login__remember-me {
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.adf-login__remember-me .mat-checkbox-label {
|
||||
opacity: 0.87;
|
||||
}
|
||||
|
||||
.adf-login__field {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.adf-login-remember-me {
|
||||
color: $text-color-primary !important;
|
||||
}
|
||||
|
||||
.adf-login-action-container {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin-top: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
.adf {
|
||||
&-notification-history-menu_button.mat-button {
|
||||
margin-right: 0;
|
||||
border-radius: 90%;
|
||||
padding: 0;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&-notification-history-list .mat-subheader {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-notification-history-menu {
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-item:focus {
|
||||
outline: none;
|
||||
background: var(--theme-bg-hover-color);
|
||||
}
|
||||
|
||||
&-item:hover {
|
||||
background-color: var(--theme-bg-hover-color);
|
||||
}
|
||||
|
||||
&-message, &-no-message {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
&-date {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
&-initiator {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-notification-initiator-pic {
|
||||
min-width: 40px;
|
||||
background: var(--theme-accent-color);
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 40px;
|
||||
color: var(--theme-colors-mat-grey);
|
||||
}
|
||||
|
||||
&-notification-history-load-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-panel.adf-notification-history-menu {
|
||||
min-width: 320px;
|
||||
max-height: 500px;
|
||||
|
||||
.mat-menu-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, ViewChild, OnDestroy, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
|
||||
import { Component, Input, ViewChild, OnDestroy, OnInit, AfterViewInit, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
|
||||
import { NotificationService } from '../services/notification.service';
|
||||
import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model';
|
||||
import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
|
||||
@@ -26,7 +26,9 @@ import { Pagination } from '@alfresco/js-api';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-notification-history',
|
||||
templateUrl: 'notification-history.component.html'
|
||||
templateUrl: 'notification-history.component.html',
|
||||
styleUrls: ['./notification-history.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterViewInit {
|
||||
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
@mixin adf-notification-history-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$accent: map-get($theme, accent);
|
||||
|
||||
.adf {
|
||||
&-notification-history-menu_button.mat-button {
|
||||
margin-right: 0;
|
||||
border-radius: 90%;
|
||||
padding: 0;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&-notification-history-list .mat-subheader {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-notification-history-menu {
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-item:focus {
|
||||
outline: none;
|
||||
background: mat-color($background, 'hover');
|
||||
}
|
||||
|
||||
&-item:hover {
|
||||
background-color: mat-color($background, 'hover');
|
||||
}
|
||||
|
||||
&-message, &-no-message {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
&-date {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
&-initiator {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-notification-initiator-pic {
|
||||
min-width: 40px;
|
||||
background: mat-color($accent);
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 40px;
|
||||
color: mat-color($mat-grey, 50);
|
||||
}
|
||||
|
||||
&-notification-history-load-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-panel.adf-notification-history-menu {
|
||||
min-width: 320px;
|
||||
max-height: 500px;
|
||||
|
||||
.mat-menu-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
87
lib/core/pagination/pagination.component.scss
Normal file
87
lib/core/pagination/pagination.component.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
@import '~@angular/flex-layout/mq';
|
||||
|
||||
$adf-pagination--height: 48px !default;
|
||||
$adf-pagination--icon-button-size: 32px !default;
|
||||
$adf-pagination--border: none !default;
|
||||
$adf-pagination__empty--height: 48px !default;
|
||||
$adf-pagination__empty--border: none !default;
|
||||
|
||||
.adf-pagination {
|
||||
display: flex;
|
||||
border-top: $adf-pagination--border;
|
||||
height: $adf-pagination--height;
|
||||
line-height: 20px;
|
||||
color: var(--theme-text-fg-color);
|
||||
|
||||
&__block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
border-right: $adf-pagination--border;
|
||||
|
||||
&:first-child {
|
||||
flex: 1 1 auto;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-bp(lt-sm) {
|
||||
& {
|
||||
flex-wrap: wrap;
|
||||
padding: 0 16px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__range-block,
|
||||
&__perpage-block {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__actualinfo-block {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&__controls-block {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__max-items {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&__max-items, &__current-page {
|
||||
margin-right: 5px;
|
||||
|
||||
&, & + button {
|
||||
color: var(--theme-text-fg-color);
|
||||
}
|
||||
|
||||
& + button {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__previous-button, &__next-button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
&__page-selector {
|
||||
max-height: 250px !important;
|
||||
}
|
||||
|
||||
&.adf-pagination__empty {
|
||||
border-top: $adf-pagination__empty--border;
|
||||
height: $adf-pagination__empty--height;
|
||||
}
|
||||
|
||||
button[mat-icon-button] {
|
||||
width: $adf-pagination--icon-button-size;
|
||||
height: $adf-pagination--icon-button-size;
|
||||
line-height: $adf-pagination--icon-button-size;
|
||||
}
|
||||
}
|
||||
@@ -34,6 +34,7 @@ export type PaginationAction =
|
||||
selector: 'adf-pagination',
|
||||
host: { 'class': 'adf-pagination' },
|
||||
templateUrl: './pagination.component.html',
|
||||
styleUrls: ['./pagination.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
@mixin adf-pagination-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
$adf-pagination--height: 48px !default;
|
||||
$adf-pagination--icon-button-size: 32px !default;
|
||||
$adf-pagination--border: none !default;
|
||||
$adf-pagination__empty--height: 48px !default;
|
||||
$adf-pagination__empty--border: none !default;
|
||||
|
||||
.adf-pagination {
|
||||
display: flex;
|
||||
border-top: $adf-pagination--border;
|
||||
height: $adf-pagination--height;
|
||||
line-height: 20px;
|
||||
color: mat-color($foreground, text);
|
||||
|
||||
&__block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
border-right: $adf-pagination--border;
|
||||
|
||||
&:first-child {
|
||||
flex: 1 1 auto;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-bp(lt-sm) {
|
||||
& {
|
||||
flex-wrap: wrap;
|
||||
padding: 0 16px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__range-block,
|
||||
&__perpage-block {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__actualinfo-block {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&__controls-block {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__max-items {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&__max-items, &__current-page {
|
||||
margin-right: 5px;
|
||||
|
||||
&, & + button {
|
||||
color: mat-color($foreground, text);
|
||||
}
|
||||
|
||||
& + button {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__previous-button, &__next-button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
&__page-selector {
|
||||
max-height: 250px !important;
|
||||
}
|
||||
|
||||
&.adf-pagination__empty {
|
||||
border-top: $adf-pagination__empty--border;
|
||||
height: $adf-pagination__empty--height;
|
||||
}
|
||||
|
||||
button[mat-icon-button] {
|
||||
width: $adf-pagination--icon-button-size;
|
||||
height: $adf-pagination--icon-button-size;
|
||||
line-height: $adf-pagination--icon-button-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
lib/core/search-text/search-text-input.component.scss
Normal file
36
lib/core/search-text/search-text-input.component.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
.adf-search-container {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.adf-search-button {
|
||||
left: -13px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .adf-search-button {
|
||||
right: -13px;
|
||||
}
|
||||
|
||||
[dir='ltr'] .adf-search-button {
|
||||
left: -13px;
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-search-fixed-text {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
&-input-form-field-divider {
|
||||
.mat-form-field-underline {
|
||||
background-color: var(--adf-search-input-bg-color);
|
||||
.mat-form-field-ripple {
|
||||
background-color: var(--adf-search-input-bg-color);
|
||||
}
|
||||
}
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-highlight {
|
||||
color: var(--adf-search-input-highlight-color);
|
||||
}
|
||||
@@ -26,6 +26,7 @@ import { SearchTextStateEnum, SearchAnimationState, SearchAnimationDirection } f
|
||||
@Component({
|
||||
selector: 'adf-search-text-input',
|
||||
templateUrl: './search-text-input.component.html',
|
||||
styleUrls: ['./search-text-input.component.scss'],
|
||||
animations: [searchAnimation],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: {
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
@mixin adf-search-text-input-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$mat-menu-border-radius: 2px !default;
|
||||
$mat-menu-overlay-min-width: 112px !default; // 56 * 2
|
||||
$mat-menu-overlay-max-width: 280px !default; // 56 * 5
|
||||
|
||||
.adf-search-container {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.adf-search-button {
|
||||
left: -13px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .adf-search-button {
|
||||
right: -13px;
|
||||
}
|
||||
|
||||
[dir='ltr'] .adf-search-button {
|
||||
left: -13px;
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-search-fixed-text {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
&-input-form-field-divider {
|
||||
.mat-form-field-underline {
|
||||
background-color: mat-color($primary, 50);
|
||||
.mat-form-field-ripple {
|
||||
background-color: mat-color($primary, 50);
|
||||
}
|
||||
}
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-highlight {
|
||||
color: mat-color($primary, 900);
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,11 @@
|
||||
@mixin adf-default-class-theme($theme) {
|
||||
|
||||
.adf-hide-small {
|
||||
@media screen and (max-width: 959px) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-hide-xsmall {
|
||||
@media screen and (max-width: 599px) {
|
||||
display: none !important;
|
||||
}
|
||||
.adf-hide-small {
|
||||
@media screen and (max-width: 959px) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-hide-xsmall {
|
||||
@media screen and (max-width: 599px) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,80 +1,102 @@
|
||||
@import './theme-colors';
|
||||
@import './default-class';
|
||||
@import './theming';
|
||||
|
||||
@import '../card-view/card-view.theme';
|
||||
@import '../datatable/components/datatable/datatable.theme';
|
||||
@import '../form/components/widgets/container/container.theme';
|
||||
@import '../form/components/widgets/dynamic-table/dynamic-table.theme';
|
||||
@import '../form/components/widgets/form.theme';
|
||||
@import '../form/components/widgets/hyperlink/hyperlink.theme';
|
||||
@import '../form/components/widgets/amount/amount.theme';
|
||||
@import '../form/components/widgets/people/people.theme';
|
||||
@import '../info-drawer/info-drawer-layout.theme';
|
||||
@import '../login/components/login.theme';
|
||||
@import '../pagination/pagination.theme';
|
||||
@import '../toolbar/toolbar.theme';
|
||||
@import '../userinfo/components/user-info.theme';
|
||||
@import '../viewer/components/viewer.theme';
|
||||
@import '../viewer/components/pdf-viewer.theme';
|
||||
@import '../viewer/components/pdf-viewer-thumbnails.theme';
|
||||
@import '../viewer/components/pdf-viewer-password-dialog.theme.scss';
|
||||
@import '../viewer/components/txt-viewer.theme';
|
||||
@import '../viewer/components/img-viewer.theme';
|
||||
@import '../viewer/components/unknown-format/unknown-format.theme';
|
||||
@import '../form/components/form-renderer.theme';
|
||||
@import '../layout/components/sidebar-action/sidebar-action-menu.theme';
|
||||
@import '../layout/components/header/header.theme';
|
||||
@import '../comments/comment-list.theme';
|
||||
@import '../comments/comments.theme';
|
||||
@import '../layout/components/layout-container/layout-container.theme';
|
||||
@import '../layout/components/sidenav-layout/sidenav-layout.theme';
|
||||
@import '../templates/empty-content/empty-content.theme';
|
||||
@import '../templates/error-content/error-content.theme';
|
||||
@import '../clipboard/clipboard.theme';
|
||||
@import '../search-text/search-text-input.theme';
|
||||
@import './snackbar.theme';
|
||||
@import '../directives/tooltip-card/tooltip-card.theme';
|
||||
@import '../notifications/components/notification-history.theme';
|
||||
@import './material.theme';
|
||||
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
|
||||
|
||||
@mixin adf-core-theme($theme) {
|
||||
@include adf-colors-theme($theme);
|
||||
@include adf-default-class-theme($theme);
|
||||
@include adf-card-view-module-theme($theme);
|
||||
@include adf-datatable-theme($theme);
|
||||
@include adf-form-container-widget-theme($theme);
|
||||
@include adf-dynamic-table-theme($theme);
|
||||
@include adf-form-theme($theme);
|
||||
@include adf-hyperlink-widget-theme($theme);
|
||||
@include adf-amount-widget-theme($theme);
|
||||
@include adf-form-people-widget-theme($theme);
|
||||
@include adf-info-drawer-theme($theme);
|
||||
@include adf-login-theme($theme);
|
||||
@include adf-pagination-theme($theme);
|
||||
@include adf-toolbar-theme($theme);
|
||||
@include adf-userinfo-theme($theme);
|
||||
@include adf-viewer-theme($theme);
|
||||
@include adf-pdf-viewer-theme($theme);
|
||||
@include adf-pdf-thumbnails-theme($theme);
|
||||
@include adf-pdf-viewer-password-dialog-theme($theme);
|
||||
@include adf-image-viewer-theme($theme);
|
||||
@include adf-unknown-viewer-theme($theme);
|
||||
@include adf-text-viewer-theme($theme);
|
||||
@include adf-form-renderer-theme($theme);
|
||||
@include adf-sidebar-action-menu-theme($theme);
|
||||
@include adf-task-list-comment-list-theme($theme);
|
||||
@include adf-task-list-comment-theme($theme);
|
||||
@include adf-layout-container-theme($theme);
|
||||
@include adf-empty-content-theme($theme);
|
||||
@include adf-error-content-theme($theme);
|
||||
@include adf-header-layout-theme($theme);
|
||||
@include adf-sidenav-layout-theme($theme);
|
||||
@include adf-clipboard-theme($theme);
|
||||
@include adf-snackbar-theme($theme);
|
||||
@include mat-expansion-panel-theme--fix($theme);
|
||||
@include mat-calendar-theme--fix($theme);
|
||||
@include mat-datetimepicker-theme--fix($theme);
|
||||
@include adf-search-text-input-theme($theme);
|
||||
@include adf-tooltip-card-directive($theme);
|
||||
@include adf-notification-history-theme($theme);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
$warn: map-get($theme, warn);
|
||||
$accent: map-get($theme, accent);
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
// map SCSS variables to expose as CSS variables
|
||||
$defaults: (
|
||||
// material colors
|
||||
--theme-primary-color: mat-color($primary),
|
||||
--theme-primary-color-default-contrast: mat-color($primary, default-contrast),
|
||||
--theme-warn-color: mat-color($warn),
|
||||
--theme-warn-color-default-contrast: mat-color($warn, default-contrast),
|
||||
--theme-accent-color: mat-color($accent),
|
||||
--theme-accent-color-a200: mat-color($accent, A200),
|
||||
--theme-accent-color-default-contrast: mat-color($accent, default-contrast),
|
||||
|
||||
// component themes
|
||||
--adf-snackbar-error-bg-color: mat-color($warn),
|
||||
--adf-snackbar-error-action-color: white,
|
||||
--adf-snackbar-warning-bg-color: mat-color($accent),
|
||||
--adf-snackbar-warning-action-color: white,
|
||||
--adf-snackbar-info-bg-color: mat-color($primary),
|
||||
--adf-snackbar-info-action-color: white,
|
||||
--adf-breadcrumb-item-active-color: mat-color($foreground, text, 0.87),
|
||||
--adf-breadcrumb-item-active-hover-color: mat-color($foreground, text, 0.64),
|
||||
--adf-node-selector-icon-color: mat-color($foreground, icon, 0.54),
|
||||
--adf-node-selector-base-color: mat-color($foreground, base, 0.45),
|
||||
--adf-node-selector-base-bold-color: mat-color($foreground, base, 0.65),
|
||||
--adf-datatable-cell-link-hover-color: mat-color($accent, 500),
|
||||
--adf-datatable-selected-color: mat-color($primary, 100),
|
||||
--adf-user-info-color: mat-color($primary, 300),
|
||||
--adf-comment-list-primary-color: mat-color($primary, 100),
|
||||
--adf-comment-list-ripple-color: mat-color($primary, 300),
|
||||
--adf-search-input-bg-color: mat-color($primary, 50),
|
||||
--adf-search-input-highlight-color: mat-color($primary, 900),
|
||||
--adf-tooltip-card-color: mat-color($foreground, text, 0.75),
|
||||
--adf-card-view-text-color: mat-color($foreground, text, 0.25),
|
||||
--adf-card-view-label-color: mat-color($foreground, text, 0.4),
|
||||
--adf-card-view-datetime-border-color: mat-color($foreground, text, 0.42),
|
||||
--adf-upload-border-color: mat-color($foreground, text, 0.14),
|
||||
|
||||
--theme-hover-bg-color: mat-color($background, hover),
|
||||
--theme-text-color: mat-color($foreground, text, 0.54),
|
||||
--theme-text-bold-color: mat-color($foreground, text, 0.87),
|
||||
--theme-background-color: mat-color($background, background),
|
||||
--theme-text-fg-color: mat-color($foreground, text),
|
||||
--theme-text-fg-shadow-color: mat-color($foreground, text, 0.27),
|
||||
--theme-border-color: mat-color($foreground, text, 0.07),
|
||||
--theme-card-bg-color: mat-color($background, card),
|
||||
--theme-card-bg-bold-color: mat-color($background, card, 0.87),
|
||||
--theme-foreground-text-color: mat-color($foreground, text, 0.72),
|
||||
--theme-secondary-text-color: mat-color($foreground, secondary-text),
|
||||
--theme-dialog-bg-color: mat-color($background, dialog),
|
||||
--theme-bg-hover-color: mat-color($background, hover),
|
||||
--theme-fg-base-color: mat-color($foreground, base),
|
||||
--theme-fg-divider: mat-color($foreground, divider),
|
||||
--theme-disabled-text-color: mat-color($foreground, disabled-text),
|
||||
--theme-selected-button-bg-color: mat-color($background, selected-button),
|
||||
--theme-icon-fg-color: mat-color($foreground, icon),
|
||||
--theme-unselected-chip-bg-color: mat-color($background, unselected-chip),
|
||||
--theme-status-bar-bg-color: mat-color($background, status-bar),
|
||||
// fonts
|
||||
--theme-font-family: mat-font-family($alfresco-typography),
|
||||
--theme-body-1-font-size: mat-font-size($alfresco-typography, body-1),
|
||||
--theme-body-2-font-size: mat-font-size($alfresco-typography, body-2),
|
||||
--theme-body-1-line-height: mat-line-height($alfresco-typography, body-1),
|
||||
--theme-display-1-font-size: mat-font-size($alfresco-typography, display-1),
|
||||
--theme-display-3-font-size: mat-font-size($alfresco-typography, display-3),
|
||||
--theme-display-4-font-size: mat-font-size($alfresco-typography, display-4),
|
||||
--theme-caption-font-size: mat-font-size($alfresco-typography, caption),
|
||||
--theme-title-font-size: mat-font-size($alfresco-typography, title),
|
||||
--theme-subheading-2-font-size: mat-font-size($alfresco-typography, subheading-2),
|
||||
--theme-button-font-size: mat-font-size($alfresco-typography, button),
|
||||
--theme-headline-line-height: mat-line-height($alfresco-typography, headline),
|
||||
|
||||
// specific colors
|
||||
--theme-colors-mat-grey: mat-color($mat-grey, A200),
|
||||
--theme-colors-mat-grey-dark: mat-color($mat-grey, A400),
|
||||
--theme-colors-mag-grey-light: mat-color($mat-grey, 50),
|
||||
);
|
||||
|
||||
// propagates SCSS variables into the CSS variables scope
|
||||
:root {
|
||||
@each $name, $value in $defaults {
|
||||
#{$name}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@include mat-datetimepicker-theme($theme);
|
||||
@include adf-snackbar-theme();
|
||||
@include adf-material-theme();
|
||||
}
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
@import '~@angular/material/theming';
|
||||
@import 'variables';
|
||||
|
||||
@mixin adf-no-select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
@@ -27,27 +24,7 @@
|
||||
|
||||
@mixin material-animation-default($duration: 0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
}
|
||||
|
||||
@mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
|
||||
position: relative;
|
||||
line-height: $line-height;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@supports (-webkit-line-clamp: 1) {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $lines;
|
||||
height: calc(0.99em * #{$line-height} * #{$lines});
|
||||
}
|
||||
|
||||
@supports not (-webkit-line-clamp: 1) {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@mixin flex-column {
|
||||
@@ -66,72 +43,3 @@
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin mat-expansion-panel-theme--fix($theme) {
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.mat-expansion-panel {
|
||||
& .mat-expansion-panel-header.cdk-keyboard-focused,
|
||||
& .mat-expansion-panel-header.cdk-program-focused,
|
||||
&:not(.mat-expanded) .mat-expansion-panel-header:hover {
|
||||
&:not([aria-disabled='true']) {
|
||||
background: mat-color($background, hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-calendar-theme--fix($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.mat-calendar {
|
||||
.mat-calendar-header {
|
||||
button {
|
||||
color: mat-color($foreground, text, 0.87);
|
||||
|
||||
&:disabled {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-calendar-content {
|
||||
.mat-calendar-table-header th {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
}
|
||||
|
||||
.mat-calendar-body-disabled > div {
|
||||
color: mat-color($foreground, text, 0.54) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-datetimepicker-theme--fix($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.mat-datetimepicker-calendar {
|
||||
.mat-datetimepicker-calendar-header {
|
||||
.mat-datetimepicker-calendar-header-year {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-header-date {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-header-time {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-content {
|
||||
.mat-datetimepicker-calendar-table-header th {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-body-disabled > div {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin adf-colors-theme($theme) {
|
||||
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-primary-color {
|
||||
color: mat-color($primary) !important;
|
||||
}
|
||||
|
||||
.adf-accent-color {
|
||||
color: mat-color($accent) !important;
|
||||
}
|
||||
|
||||
.adf-warn-color {
|
||||
color: mat-color($warn) !important;
|
||||
}
|
||||
|
||||
.adf-dialog-background-color {
|
||||
background: mat-color($background, dialog) !important;
|
||||
}
|
||||
|
||||
.adf-primary-background-color {
|
||||
color: mat-color($primary, default-contrast) !important;
|
||||
background: mat-color($primary) !important;
|
||||
}
|
||||
|
||||
.adf-accent-background-color {
|
||||
color: mat-color($accent, default-contrast) !important;
|
||||
background: mat-color($accent) !important;
|
||||
}
|
||||
|
||||
.adf-primary-contrast-text-color {
|
||||
color: mat-color($primary, default-contrast) !important;
|
||||
}
|
||||
|
||||
.adf-accent-contrast-text-color {
|
||||
color: mat-color($accent, default-contrast) !important;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
@import '~@angular/material/theming';
|
||||
@import '~@angular/flex-layout/mq';
|
||||
@import './colors';
|
||||
@import './variables';
|
||||
@import './mixins';
|
||||
@import './typography';
|
||||
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
@import './colors';
|
||||
|
||||
/* ANIMATION */
|
||||
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$animation-curve-default: $animation-curve-fast-out-slow-in !default;
|
||||
|
||||
$swift-ease-in-duration: 300ms !default;
|
||||
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
|
||||
59
lib/core/styles/material.theme.scss
Normal file
59
lib/core/styles/material.theme.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
@mixin adf-material-theme() {
|
||||
|
||||
.mat-expansion-panel {
|
||||
& .mat-expansion-panel-header.cdk-keyboard-focused,
|
||||
& .mat-expansion-panel-header.cdk-program-focused,
|
||||
&:not(.mat-expanded) .mat-expansion-panel-header:hover {
|
||||
&:not([aria-disabled='true']) {
|
||||
background-color: var(--theme-hover-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-calendar {
|
||||
.mat-calendar-header {
|
||||
button {
|
||||
color: var(--theme-text-bold-color);
|
||||
|
||||
&:disabled {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-calendar-content {
|
||||
.mat-calendar-table-header th {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
.mat-calendar-body-disabled > div {
|
||||
color: var(--theme-text-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar {
|
||||
.mat-datetimepicker-calendar-header {
|
||||
.mat-datetimepicker-calendar-header-year {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-header-date {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-header-time {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-content {
|
||||
.mat-datetimepicker-calendar-table-header th {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-body-disabled > div {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,5 @@
|
||||
@import '../../../content-services/src/lib/styles/index';
|
||||
@import '../../../process-services/src/lib/styles/index';
|
||||
@import '../../../process-services-cloud/src/lib/styles/index';
|
||||
@import '../../../core/styles/index';
|
||||
@import '../../../insights/src/lib/styles/index';
|
||||
|
||||
@mixin alfresco-material-theme($theme) {
|
||||
@include adf-content-services-theme($theme);
|
||||
@include adf-process-services-theme($theme);
|
||||
@include adf-process-services-cloud-theme($theme);
|
||||
@include adf-core-theme($theme);
|
||||
@include adf-insights-theme($theme);
|
||||
}
|
||||
|
||||
@@ -1,29 +1,25 @@
|
||||
@mixin adf-snackbar-theme($theme) {
|
||||
$warn: map-get($theme, warn);
|
||||
$accent: map-get($theme, accent);
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
@mixin adf-snackbar-theme() {
|
||||
.adf-error-snackbar {
|
||||
background-color: mat-color($warn);
|
||||
background-color: var(--adf-snackbar-error-bg-color);
|
||||
|
||||
.mat-simple-snackbar-action {
|
||||
color: white;
|
||||
}
|
||||
.mat-simple-snackbar-action {
|
||||
color: var(--adf-snackbar-error-action-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-warning-snackbar {
|
||||
background-color: mat-color($accent);
|
||||
background-color: var(--adf-snackbar-warning-bg-color);
|
||||
|
||||
.mat-simple-snackbar-action {
|
||||
color: white;
|
||||
}
|
||||
.mat-simple-snackbar-action {
|
||||
color: var(--adf-snackbar-warning-action-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-info-snackbar {
|
||||
background-color: mat-color($primary);
|
||||
background-color: var(--adf-snackbar-info-bg-color);
|
||||
|
||||
.mat-simple-snackbar-action {
|
||||
color: white;
|
||||
}
|
||||
.mat-simple-snackbar-action {
|
||||
color: var(--adf-snackbar-info-action-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
.adf-empty-content {
|
||||
color: var(--theme-text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&__icon {
|
||||
.mat-icon {
|
||||
font-size: var(--theme-display-3-font-size);
|
||||
height: var(--theme-display-3-font-size) !important;
|
||||
width: var(--theme-display-3-font-size) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 0;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
&__subtitle,
|
||||
&__text {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: inherit;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.adf-icon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
@@ -20,6 +20,7 @@ import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@a
|
||||
@Component({
|
||||
selector: 'adf-empty-content',
|
||||
templateUrl: './empty-content.component.html',
|
||||
styleUrls: ['./empty-content.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-empty-content' }
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
@mixin adf-empty-content-theme($theme) {
|
||||
|
||||
$config: mat-typography-config();
|
||||
$foreground: map-get($theme, foreground);
|
||||
$adf-empty-content-icon-opacity: 0.6;
|
||||
|
||||
.adf-empty-content {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&__icon {
|
||||
.mat-icon {
|
||||
font-size: mat-font-size($config, display-3);
|
||||
height: mat-font-size($config, display-3) !important;
|
||||
width: mat-font-size($config, display-3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 0;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
&__subtitle,
|
||||
&__text {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: inherit;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.adf-icon {
|
||||
opacity: $adf-empty-content-icon-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
.adf-error-content {
|
||||
color: var(--theme-text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
|
||||
&-code {
|
||||
font-size: 110px;
|
||||
font-weight: 300;
|
||||
margin-top: 200px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
&-shadow {
|
||||
width: 170px;
|
||||
height: 3px;
|
||||
opacity: 0.54;
|
||||
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.39);
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 46px;
|
||||
font-weight: normal;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
min-width: 250px;
|
||||
margin-bottom: 60px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
.adf-error-content {
|
||||
|
||||
&-code {
|
||||
margin-top: 100px;
|
||||
font-size: 50px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
&-shadow {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,6 +27,7 @@ import { TranslationService } from '../../services/translation.service';
|
||||
@Component({
|
||||
selector: 'adf-error-content',
|
||||
templateUrl: './error-content.component.html',
|
||||
styleUrls: ['./error-content.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-error-content' }
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
@mixin adf-error-content-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-error-content {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
|
||||
&-code {
|
||||
font-size: 110px;
|
||||
font-weight: 300;
|
||||
margin-top: 200px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
&-shadow {
|
||||
width: 170px;
|
||||
height: 3px;
|
||||
opacity: 0.54;
|
||||
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.39);
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 46px;
|
||||
font-weight: normal;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
min-width: 250px;
|
||||
margin-bottom: 60px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
.adf-error-content {
|
||||
|
||||
&-code {
|
||||
margin-top: 100px;
|
||||
font-size: 50px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
&-shadow {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
lib/core/toolbar/toolbar.component.scss
Normal file
36
lib/core/toolbar/toolbar.component.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
.adf-toolbar {
|
||||
&--spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-toolbar {
|
||||
min-height: 48px;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: 48px;
|
||||
font-size: 14px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.mat-toolbar-single-row {
|
||||
padding: 0 16px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
&.adf-toolbar--inline {
|
||||
.mat-toolbar {
|
||||
background-color: inherit;
|
||||
border: none !important;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -21,6 +21,7 @@ import { ThemePalette } from '@angular/material/core';
|
||||
@Component({
|
||||
selector: 'adf-toolbar',
|
||||
templateUrl: './toolbar.component.html',
|
||||
styleUrls: ['./toolbar.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { 'class': 'adf-toolbar' }
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
@mixin adf-toolbar-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$adf-toolbar-height: 48px !default;
|
||||
$adf-toolbar-single-row-height: 64px !default;
|
||||
$adf-toolbar-font-size: 14px !default;
|
||||
$adf-toolbar-padding: 16px !default;
|
||||
$adf-toolbar-icon-color: mat-color($foreground, text, 0.54) !default;
|
||||
|
||||
.adf-toolbar {
|
||||
&--spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-toolbar {
|
||||
min-height: $adf-toolbar-height;
|
||||
border: 1px solid mat-color($foreground, text, 0.07);
|
||||
color: $adf-toolbar-icon-color;
|
||||
}
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: $adf-toolbar-height;
|
||||
font-size: $adf-toolbar-font-size;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.mat-toolbar-single-row {
|
||||
padding: 0 $adf-toolbar-padding;
|
||||
height: $adf-toolbar-single-row-height;
|
||||
}
|
||||
|
||||
&.adf-toolbar--inline {
|
||||
.mat-toolbar {
|
||||
background-color: inherit;
|
||||
border: none !important;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
193
lib/core/userinfo/components/user-info.component.scss
Normal file
193
lib/core/userinfo/components/user-info.component.scss
Normal file
@@ -0,0 +1,193 @@
|
||||
.adf {
|
||||
|
||||
&-userinfo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
&-userinfo-name-right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&-userinfo-name {
|
||||
padding: 0 5px;
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-userinfo-pic {
|
||||
background: var(--adf-user-info-color);
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
&-userinfo-profile-image {
|
||||
background: var(--adf-user-info-color);
|
||||
text-align: center;
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 0;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-userinfo-profile-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-userinfo-menu_button.mat-button {
|
||||
margin-right: 0;
|
||||
border-radius: 90%;
|
||||
padding: 0;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&-userinfo-tab .mat-tab-header {
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
&-userinfo-tab .mat-tab-label {
|
||||
flex: auto;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-userinfo-card-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
line-height: normal;
|
||||
height: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&-userinfo-card.mat-card {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-userinfo-supporting-text {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-userinfo-title {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
&-userinfo__detail-profile {
|
||||
align-items: flex-start;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&-userinfo__detail-title {
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&-userinfo__secondary-info {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&-userinfo-profile-picture {
|
||||
background: var(--adf-user-info-color);
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-userinfo-profile-initials {
|
||||
text-transform: uppercase;
|
||||
background-size: cover;
|
||||
background: var(--adf-user-info-color);
|
||||
border-radius: 50%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
font-size: 35px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 78px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
&-userinfo-button-profile {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-userinfo-detail {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-hide-tab .mat-tab-label-active {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 480px) {
|
||||
.mat-menu-panel.adf-userinfo-menu {
|
||||
max-height: 450px;
|
||||
min-width: 450px;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -29,6 +29,7 @@ import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/
|
||||
@Component({
|
||||
selector: 'adf-userinfo',
|
||||
templateUrl: './user-info.component.html',
|
||||
styleUrls: ['./user-info.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class UserInfoComponent implements OnInit {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user