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
@@ -0,0 +1,69 @@
|
||||
.adf {
|
||||
|
||||
&-aspect-list-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
&-aspect-list-container {
|
||||
|
||||
padding-top: 3px;
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
|
||||
.adf-aspect-list-check-button {
|
||||
margin-right: 5px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.adf-aspect-list-element-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.adf-accordion-aspect-list {
|
||||
|
||||
.mat-expansion-panel-spacing {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header-title {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header-description {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex: 1 1 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-aspect-property-table {
|
||||
width: 100%;
|
||||
|
||||
.mat-column-name {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.mat-column-description {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.mat-column-type {
|
||||
width: 20%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -25,6 +25,7 @@ import { AspectEntry } from '@alfresco/js-api';
|
||||
@Component({
|
||||
selector: 'adf-aspect-list',
|
||||
templateUrl: './aspect-list.component.html',
|
||||
styleUrls: ['./aspect-list.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
@mixin adf-aspect-list-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf {
|
||||
|
||||
&-aspect-list-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
&-aspect-list-container {
|
||||
|
||||
padding-top: 3px;
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
border: 1px solid mat-color($foreground, base, 0.07);
|
||||
|
||||
.adf-aspect-list-check-button {
|
||||
margin-right: 5px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.adf-aspect-list-element-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.adf-accordion-aspect-list {
|
||||
|
||||
.mat-expansion-panel-spacing {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header-title {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header-description {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex: 1 1 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-aspect-property-table {
|
||||
width: 100%;
|
||||
|
||||
.mat-column-name {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.mat-column-description {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.mat-column-type {
|
||||
width: 20%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
.adf-breadcrumb {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: var(--theme-text-color);
|
||||
overflow: hidden;
|
||||
|
||||
&-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
&-path {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin-top: 35px;
|
||||
|
||||
&.mat-select {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-trigger {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: 30px;
|
||||
margin-top: 2px;
|
||||
margin-right: 5px;
|
||||
|
||||
&:focus {
|
||||
color: var(--theme-primary-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
font-size: 17px;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&-arrow.adf-isRoot {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&-arrow.adf-focus {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-trigger.adf-isRoot {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding-right: 2px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
line-height: 33px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
text-align: left;
|
||||
color: var(--theme-text-color);
|
||||
flex: 0 1 auto;
|
||||
min-width: 35px;
|
||||
margin-top: auto;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover,
|
||||
&.adf-active {
|
||||
color: var(--adf-breadcrumb-item-active-hover-color);
|
||||
}
|
||||
|
||||
&.adf-active {
|
||||
color: var(--adf-breadcrumb-item-active-color);
|
||||
}
|
||||
|
||||
&-chevron {
|
||||
opacity: 1;
|
||||
margin-top: 9px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
&.mat-primary {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
&.mat-accent {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
|
||||
&.mat-warn {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
&-anchor {
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
flex: 0 1 auto;
|
||||
padding: 0 2px;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: 1px solid var(--theme-accent-color-a200);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&-current {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -35,10 +35,9 @@ import { takeUntil } from 'rxjs/operators';
|
||||
@Component({
|
||||
selector: 'adf-breadcrumb',
|
||||
templateUrl: './breadcrumb.component.html',
|
||||
styleUrls: ['./breadcrumb.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: {
|
||||
'class': 'adf-breadcrumb'
|
||||
}
|
||||
host: { 'class': 'adf-breadcrumb' }
|
||||
})
|
||||
export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
|
||||
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
@mixin adf-breadcrumb-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
$breadcrumb-chevron-spacer: 2px;
|
||||
$breadcrumb-outline: 1px solid mat-color($accent, A200) !default;
|
||||
|
||||
.adf-breadcrumb {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
overflow: hidden;
|
||||
|
||||
&-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
&-path {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin-top: 35px;
|
||||
|
||||
&.mat-select {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-trigger {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: 30px;
|
||||
margin-top: 2px;
|
||||
margin-right: 5px;
|
||||
|
||||
&:focus {
|
||||
color: mat-color($primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
font-size: 17px;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&-arrow.adf-isRoot {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&-arrow.adf-focus {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-trigger.adf-isRoot {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding-right: $breadcrumb-chevron-spacer;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
line-height: 33px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
text-align: left;
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
flex: 0 1 auto;
|
||||
min-width: 35px;
|
||||
margin-top: auto;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover,
|
||||
&.adf-active {
|
||||
color: mat-color($foreground, text, 0.64);
|
||||
}
|
||||
|
||||
&.adf-active {
|
||||
color: mat-color($foreground, text, 0.87);
|
||||
}
|
||||
|
||||
&-chevron {
|
||||
opacity: 1;
|
||||
margin-top: 9px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
&.mat-primary {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
&.mat-accent {
|
||||
color: mat-color($accent);
|
||||
}
|
||||
|
||||
&.mat-warn {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
&-anchor {
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
flex: 0 1 auto;
|
||||
padding: 0 2px;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: $breadcrumb-outline;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&-current {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
$dropdownHorizontalOffset: 30px;
|
||||
|
||||
.adf {
|
||||
&-dropdown-breadcrumb {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: var(--theme-text-color);
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
|
||||
.mat-icon {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
&-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-trigger {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: 25px;
|
||||
|
||||
&:focus {
|
||||
color: var(--theme-primary-color);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-trigger.adf-isRoot {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin-top: 35px;
|
||||
|
||||
&.mat-select {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-current-folder {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
width: 75%;
|
||||
color: var(--theme-foreground-text-color);
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option:first-child {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option:last-child {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='ltr'] .adf {
|
||||
&-dropdown-breadcrumb-path {
|
||||
margin-left: -$dropdownHorizontalOffset;
|
||||
}
|
||||
|
||||
&-current-folder {
|
||||
margin-left: $dropdownHorizontalOffset;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] .adf {
|
||||
&-dropdown-breadcrumb-path {
|
||||
margin-right: -$dropdownHorizontalOffset;
|
||||
}
|
||||
|
||||
&-current-folder {
|
||||
margin-right: $dropdownHorizontalOffset;
|
||||
}
|
||||
}
|
||||
@@ -23,10 +23,9 @@ import { BreadcrumbComponent } from './breadcrumb.component';
|
||||
@Component({
|
||||
selector: 'adf-dropdown-breadcrumb',
|
||||
templateUrl: './dropdown-breadcrumb.component.html',
|
||||
styleUrls: ['./dropdown-breadcrumb.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: {
|
||||
'class': 'adf-dropdown-breadcrumb'
|
||||
}
|
||||
host: { 'class': 'adf-dropdown-breadcrumb' }
|
||||
})
|
||||
export class DropdownBreadcrumbComponent extends BreadcrumbComponent implements OnChanges {
|
||||
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
@mixin adf-breadcrumb-dropdown-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$dropdownHorizontalOffset: 30px;
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf {
|
||||
&-dropdown-breadcrumb {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
|
||||
.mat-icon {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
&-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-trigger {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: 25px;
|
||||
|
||||
&:focus {
|
||||
color: mat-color($primary);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-trigger.adf-isRoot {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin-top: 35px;
|
||||
|
||||
&.mat-select {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-current-folder {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
width: 75%;
|
||||
color: mat-color($foreground, text, 0.72);
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option:first-child {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
&-dropdown-breadcrumb-path-option.mat-option:last-child {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='ltr'] .adf {
|
||||
&-dropdown-breadcrumb-path {
|
||||
margin-left: -$dropdownHorizontalOffset;
|
||||
}
|
||||
|
||||
&-current-folder {
|
||||
margin-left: $dropdownHorizontalOffset;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] .adf {
|
||||
&-dropdown-breadcrumb-path {
|
||||
margin-right: -$dropdownHorizontalOffset;
|
||||
}
|
||||
|
||||
&-current-folder {
|
||||
margin-right: $dropdownHorizontalOffset;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
.adf-content-metadata-card {
|
||||
|
||||
.mat-card {
|
||||
padding: 0;
|
||||
|
||||
.mat-card-content {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer.mat-card-footer {
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
|
||||
button {
|
||||
color: var(--theme-text-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-text-bold-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -22,6 +22,7 @@ import { NodeAspectService } from '../../../aspect-list/node-aspect.service';
|
||||
@Component({
|
||||
selector: 'adf-content-metadata-card',
|
||||
templateUrl: './content-metadata-card.component.html',
|
||||
styleUrls: ['./content-metadata-card.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { 'class': 'adf-content-metadata-card' }
|
||||
})
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
@mixin adf-content-metadata-card-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-content-metadata-card {
|
||||
|
||||
.mat-card {
|
||||
padding: 0;
|
||||
|
||||
.mat-card-content {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer.mat-card-footer {
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid mat-color($foreground, text, 0.07);
|
||||
|
||||
button {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
|
||||
&:hover {
|
||||
color: mat-color($foreground, text, 0.87);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.adf {
|
||||
&-metadata-properties {
|
||||
.mat-expansion-panel-header.mat-expanded:hover,
|
||||
.mat-expansion-panel-header.mat-expanded:focus {
|
||||
background: var(--theme-bg-hover-color);
|
||||
}
|
||||
|
||||
mat-expansion-panel-header {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-metadata-action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
@@ -36,6 +36,7 @@ import { takeUntil, debounceTime, catchError, map } from 'rxjs/operators';
|
||||
@Component({
|
||||
selector: 'adf-content-metadata',
|
||||
templateUrl: './content-metadata.component.html',
|
||||
styleUrls: ['./content-metadata.component.scss'],
|
||||
host: { 'class': 'adf-content-metadata' },
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
@mixin adf-content-metadata-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$panel-header-hover: mat-color($background, hover);
|
||||
|
||||
.adf {
|
||||
&-metadata-properties {
|
||||
.mat-expansion-panel-header.mat-expanded:hover,
|
||||
.mat-expansion-panel-header.mat-expanded:focus {
|
||||
background: $panel-header-hover;
|
||||
}
|
||||
|
||||
mat-expansion-panel-header {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-metadata-action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
@import './components/content-metadata/content-metadata.theme';
|
||||
@import './components/content-metadata-card/content-metadata-card.theme';
|
||||
|
||||
@mixin adf-content-metadata-module-theme($theme) {
|
||||
@include adf-content-metadata-theme($theme);
|
||||
@include adf-content-metadata-card-theme($theme);
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
$content-node-selector-thumbnail-width: 35px !default;
|
||||
|
||||
.adf-search-results-label {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.43;
|
||||
letter-spacing: -0.2px;
|
||||
color: var(--theme-text-bold-color);
|
||||
}
|
||||
|
||||
.adf-toolbar .mat-toolbar {
|
||||
max-height: 48px;
|
||||
border-bottom-width: 0;
|
||||
font-size: 14px;
|
||||
|
||||
&.mat-toolbar-single-row {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-content-node-selector {
|
||||
|
||||
&-search-panel-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-document-list-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding-top: 0;
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
|
||||
&-icon {
|
||||
color: var(--adf-node-selector-icon-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-fg-base-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-underline .mat-form-field-ripple {
|
||||
height: 1px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.adf-site-dropdown-container {
|
||||
.mat-form-field {
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-site-dropdown-list-element {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
.mat-select-trigger {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-breadcrumb {
|
||||
.adf-dropdown-breadcrumb-trigger {
|
||||
outline: none;
|
||||
.mat-icon {
|
||||
color: var(--adf-node-selector-base-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--adf-node-selector-base-bold-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus .mat-icon {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dropdown-breadcrumb-item-chevron {
|
||||
color: var(--adf-node-selector-base-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
border-top: 0;
|
||||
|
||||
.adf-highlight {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.adf-datatable-list {
|
||||
border: none;
|
||||
|
||||
.adf-datatable-selected {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-datatable-selected > svg {
|
||||
fill: #00bcd4 !important;
|
||||
}
|
||||
|
||||
.adf-no-content-container {
|
||||
text-align: center;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.adf-datatable-cell {
|
||||
&--image {
|
||||
min-width: $content-node-selector-thumbnail-width;
|
||||
width: $content-node-selector-thumbnail-width;
|
||||
max-width: $content-node-selector-thumbnail-width;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
flex: 1 0 95px;
|
||||
}
|
||||
|
||||
.adf-name-location-cell-location {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.adf-content-selector-visibility-cell {
|
||||
flex: 0 1 auto;
|
||||
min-width: 1px;
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-body .adf-datatable-row {
|
||||
min-height: 40px;
|
||||
|
||||
@media screen and (-ms-high-contrast: active),
|
||||
screen and (-ms-high-contrast: none) {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.adf-datatable-cell {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.adf-datatable-cell {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-searchLayout {
|
||||
.adf-datatable-list .adf-datatable-row {
|
||||
min-height: 65px !important;
|
||||
|
||||
.adf-datatable-cell {
|
||||
.adf-name-location-cell-location {
|
||||
padding: 0 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.adf-name-location-cell-name {
|
||||
padding: 5px 10px 2px;
|
||||
}
|
||||
|
||||
&.adf-content-selector-modified-cell {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.adf-content-selector-modifier-cell {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.adf-content-selector-visibility-cell {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -60,6 +60,7 @@ export const defaultValidation = () => true;
|
||||
@Component({
|
||||
selector: 'adf-content-node-selector-panel',
|
||||
templateUrl: './content-node-selector-panel.component.html',
|
||||
styleUrls: ['./content-node-selector-panel.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { 'class': 'adf-content-node-selector-panel' },
|
||||
providers: [{
|
||||
|
||||
@@ -1,202 +0,0 @@
|
||||
@mixin adf-content-node-selector-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$content-node-selector-thumbnail-width: 35px !default;
|
||||
|
||||
.adf-search-results-label {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.43;
|
||||
letter-spacing: -0.2px;
|
||||
color: mat-color($foreground, base, 0.87);
|
||||
}
|
||||
|
||||
.adf-toolbar .mat-toolbar {
|
||||
max-height: 48px;
|
||||
border-bottom-width: 0;
|
||||
font-size: 14px;
|
||||
|
||||
&.mat-toolbar-single-row {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-content-node-selector {
|
||||
|
||||
&-search-panel-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-document-list-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding-top: 0;
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
|
||||
&-icon {
|
||||
color: mat-color($foreground, icon, 0.54);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: mat-color($foreground, base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-underline .mat-form-field-ripple {
|
||||
height: 1px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.adf-site-dropdown-container {
|
||||
.mat-form-field {
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-site-dropdown-list-element {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
.mat-select-trigger {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-breadcrumb {
|
||||
.adf-dropdown-breadcrumb-trigger {
|
||||
outline: none;
|
||||
.mat-icon {
|
||||
color: mat-color($foreground, base, 0.45);
|
||||
|
||||
&:hover {
|
||||
color: mat-color($foreground, base, 0.65);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus .mat-icon {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dropdown-breadcrumb-item-chevron {
|
||||
color: mat-color($foreground, base, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
border: 1px solid mat-color($foreground, base, 0.07);
|
||||
border-top: 0;
|
||||
|
||||
.adf-highlight {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.adf-datatable-list {
|
||||
border: none;
|
||||
|
||||
.adf-datatable-selected {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-datatable-selected > svg {
|
||||
fill: #00bcd4 !important;
|
||||
}
|
||||
|
||||
.adf-no-content-container {
|
||||
text-align: center;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.adf-datatable-cell {
|
||||
&--image {
|
||||
min-width: $content-node-selector-thumbnail-width;
|
||||
width: $content-node-selector-thumbnail-width;
|
||||
max-width: $content-node-selector-thumbnail-width;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
flex: 1 0 95px;
|
||||
}
|
||||
|
||||
.adf-name-location-cell-location {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.adf-content-selector-visibility-cell {
|
||||
flex: 0 1 auto;
|
||||
min-width: 1px;
|
||||
|
||||
.adf-datatable-cell-value {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-body .adf-datatable-row {
|
||||
min-height: 40px;
|
||||
|
||||
@media screen and (-ms-high-contrast: active),
|
||||
screen and (-ms-high-contrast: none) {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.adf-datatable-cell {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.adf-datatable-cell {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-searchLayout {
|
||||
.adf-datatable-list .adf-datatable-row {
|
||||
min-height: 65px !important;
|
||||
|
||||
.adf-datatable-cell {
|
||||
.adf-name-location-cell-location {
|
||||
padding: 0 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.adf-name-location-cell-name {
|
||||
padding: 5px 10px 2px;
|
||||
}
|
||||
|
||||
&.adf-content-selector-modified-cell {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.adf-content-selector-modifier-cell {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.adf-content-selector-visibility-cell {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
adf-content-node-selector {
|
||||
.adf-content-node-selector-headless-tabs {
|
||||
.mat-tab-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-upload-dialog {
|
||||
box-shadow: none;
|
||||
|
||||
&__content {
|
||||
max-height: 64%;
|
||||
}
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: unset;
|
||||
bottom: unset;
|
||||
}
|
||||
|
||||
.adf-upload-dialog-container {
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
.adf-toolbar-title {
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.adf-content-node-selector-local-upload-content {
|
||||
height: 368px;
|
||||
|
||||
adf-upload-drag-area {
|
||||
adf-empty-list {
|
||||
.adf-empty-folder-drag-drop {
|
||||
min-height:46px;
|
||||
font-size: 40px;
|
||||
}
|
||||
.adf-empty-folder-image {
|
||||
height: 100px;
|
||||
width: 460px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-content-node-selector-dialog {
|
||||
&-content {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.mat-dialog-title {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
|
||||
h2 {
|
||||
margin: unset;
|
||||
font-size: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-dialog-container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.mat-dialog-content {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-dialog-actions {
|
||||
padding: 8px;
|
||||
height: 61px;
|
||||
background-color: var(--theme-background-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
color: var(--theme-foreground-text-color);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.adf-choose-action {
|
||||
|
||||
&[disabled] {
|
||||
color: var(--theme-secondary-text-color);
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,6 +27,7 @@ import { NodeAction } from '../document-list/models/node-action.enum';
|
||||
@Component({
|
||||
selector: 'adf-content-node-selector',
|
||||
templateUrl: './content-node-selector.component.html',
|
||||
styleUrls: ['./content-node-selector.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ContentNodeSelectorComponent implements OnInit {
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
@mixin adf-content-node-selector-dialog-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
adf-content-node-selector {
|
||||
.adf-content-node-selector-headless-tabs {
|
||||
.mat-tab-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-upload-dialog {
|
||||
box-shadow: none;
|
||||
|
||||
&__content {
|
||||
max-height: 64%;
|
||||
}
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: unset;
|
||||
bottom: unset;
|
||||
}
|
||||
|
||||
.adf-upload-dialog-container {
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
.adf-toolbar-title {
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.adf-content-node-selector-local-upload-content {
|
||||
height: 368px;
|
||||
|
||||
adf-upload-drag-area {
|
||||
adf-empty-list {
|
||||
.adf-empty-folder-drag-drop {
|
||||
min-height:46px;
|
||||
font-size: 40px;
|
||||
}
|
||||
.adf-empty-folder-image {
|
||||
height: 100px;
|
||||
width: 460px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-content-node-selector-dialog {
|
||||
&-content {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.mat-dialog-title {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
color: mat-color($foreground, text, 0.87);
|
||||
|
||||
h2 {
|
||||
margin: unset;
|
||||
font-size: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-dialog-container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.mat-dialog-content {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-dialog-actions {
|
||||
padding: 8px;
|
||||
height: 61px;
|
||||
background-color: mat-color($background, background);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
color: mat-color($foreground, text, 0.72);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.adf-choose-action {
|
||||
|
||||
&[disabled] {
|
||||
color: mat-color($foreground, secondary-text);
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.adf-name-location-cell {
|
||||
display: grid;
|
||||
&-location {
|
||||
color: var(--theme-text-color);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@@ -24,6 +24,7 @@ import { DataRow } from '@alfresco/adf-core';
|
||||
<div class="adf-name-location-cell-name adf-datatable-cell-value" [title]="name">{{ name }}</div>
|
||||
<div class="adf-name-location-cell-location adf-datatable-cell-value" [title]="path">{{ path }}</div>
|
||||
`,
|
||||
styleUrls: ['./name-location-cell.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: { class: 'adf-name-location-cell adf-datatable-content-cell' }
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
@mixin adf-name-location-cell-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-name-location-cell {
|
||||
display: grid;
|
||||
&-location {
|
||||
color: mat-color($foreground, base, 0.54);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
.adf-float-label {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.adf-share-link-dialog {
|
||||
|
||||
.adf-share-link {
|
||||
&__dialog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__label,
|
||||
&__title,
|
||||
&__info {
|
||||
letter-spacing: -0.4px;
|
||||
line-height: 2;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 16px;
|
||||
color: var(--theme-text-bold-color);
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__info {
|
||||
color: var(--theme-text-color);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&--row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__input {
|
||||
color: var(--theme-text-bold-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-input-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-form-field-infix {
|
||||
border-top: unset;
|
||||
}
|
||||
|
||||
.mat-dialog-actions {
|
||||
justify-content: flex-end;
|
||||
|
||||
& > button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-flex {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
@mixin adf-share-link-typography($foreground) {
|
||||
letter-spacing: -0.4px;
|
||||
line-height: 2;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 16px;
|
||||
color: mat-color($foreground, text, 0.87);
|
||||
}
|
||||
@mixin adf-content-node-share-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-float-label {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.adf-share-link-dialog {
|
||||
|
||||
.adf-share-link {
|
||||
&__dialog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__label {
|
||||
@include adf-share-link-typography($foreground);
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include adf-share-link-typography($foreground);
|
||||
}
|
||||
|
||||
&__info {
|
||||
@include adf-share-link-typography($foreground);
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&--row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__input {
|
||||
color: mat-color($foreground, text, 0.87);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-input-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-form-field-infix {
|
||||
border-top: unset;
|
||||
}
|
||||
|
||||
.mat-dialog-actions {
|
||||
justify-content: flex-end;
|
||||
|
||||
& > button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-flex {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -45,6 +45,7 @@ type DatePickerType = 'date' | 'time' | 'month' | 'datetime';
|
||||
@Component({
|
||||
selector: 'adf-share-dialog',
|
||||
templateUrl: './content-node-share.dialog.html',
|
||||
styleUrls: ['./content-node-share.dialog.scss'],
|
||||
host: { class: 'adf-share-dialog' },
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
.adf {
|
||||
|
||||
&-content-type-dialog {
|
||||
.mat-expansion-panel {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content-type-accordion {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
&-content-type-dialog-title {
|
||||
font-size: large;
|
||||
font-weight: 200;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-content-type-dialog-description {
|
||||
font-size: small;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
&-content-type-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-content-type-dialog-apply-button {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -24,6 +24,7 @@ import { ContentTypeService } from './content-type.service';
|
||||
@Component({
|
||||
selector: 'adf-content-type-dialog',
|
||||
templateUrl: './content-type-dialog.component.html',
|
||||
styleUrls: ['./content-type-dialog.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ContentTypeDialogComponent implements OnInit {
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
@mixin adf-content-type-dialog-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf {
|
||||
|
||||
&-content-type-dialog {
|
||||
.mat-expansion-panel {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content-type-accordion {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
&-content-type-dialog-title {
|
||||
font-size: large;
|
||||
font-weight: 200;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-content-type-dialog-description {
|
||||
font-size: small;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
&-content-type-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-content-type-dialog-apply-button {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
36
lib/content-services/src/lib/dialogs/folder.dialog.scss
Normal file
36
lib/content-services/src/lib/dialogs/folder.dialog.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
|
||||
.adf-fill-remaining-space {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-lock-file-name {
|
||||
.mat-checkbox-layout {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-checkbox-label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-checkbox-inner-container {
|
||||
margin: auto 8px auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dialog-buttons button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.adf-dialog-action-button:enabled {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.adf-dialog-action-button:disabled > span {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
@mixin adf-dialog-theme($theme) {
|
||||
|
||||
$primary: map-get($theme, primary);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-fill-remaining-space {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-lock-file-name {
|
||||
.mat-checkbox-layout {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-checkbox-label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-checkbox-inner-container {
|
||||
margin: auto 8px auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dialog-buttons button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.adf-dialog-action-button:enabled {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.adf-dialog-action-button:disabled > span {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
}
|
||||
}
|
||||
@@ -29,6 +29,7 @@ import { forbidEndingDot, forbidOnlySpaces, forbidSpecialCharacters } from './fo
|
||||
@Component({
|
||||
selector: 'adf-folder-dialog',
|
||||
templateUrl: './folder.dialog.html',
|
||||
styleUrls: ['./folder.dialog.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FolderDialogComponent implements OnInit {
|
||||
|
||||
@@ -0,0 +1,200 @@
|
||||
.adf-document-list {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
background-color: var(--theme-background-color);
|
||||
}
|
||||
|
||||
.mat-icon.adf-datatable-selected {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-left: -2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.adf-sticky-document-list {
|
||||
height: 310px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.adf-datatable-card {
|
||||
.adf-datatable-selected > svg {
|
||||
fill: var(--theme-accent-color);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-list {
|
||||
.adf-datatable-selected > svg {
|
||||
fill: var(--theme-accent-color);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-document-list_empty_template {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.adf-no-permission__template {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 300px;
|
||||
|
||||
mat-icon {
|
||||
font-size: 52px;
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
}
|
||||
|
||||
&--text {
|
||||
color: var(--theme-text-fg-color);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-document-list__this-space-is-empty {
|
||||
height: 32px;
|
||||
opacity: 0.26;
|
||||
font-size: 24px;
|
||||
line-height: 1.33;
|
||||
letter-spacing: -1px;
|
||||
color: var(--theme-text-fg-color);
|
||||
}
|
||||
|
||||
.adf-document-list__drag-drop {
|
||||
height: 56px;
|
||||
opacity: 0.54;
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
color: var(--theme-text-fg-color);
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.adf-document-list__any-files-here-to-add {
|
||||
height: 24px;
|
||||
opacity: 0.54;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.4px;
|
||||
color: var(--theme-text-fg-color);
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.adf-document-list__empty_doc_lib {
|
||||
width: 565px;
|
||||
height: 161px;
|
||||
object-fit: contain;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.adf-document-list-loading-margin {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.adf-document-list-loading-container {
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-empty-list-header {
|
||||
height: 32px;
|
||||
opacity: 0.26 !important;
|
||||
font-size: 24px;
|
||||
line-height: 1.33;
|
||||
letter-spacing: -1px;
|
||||
color: var(--theme-text-fg-color);
|
||||
}
|
||||
|
||||
.adf-documentlist-pagination {
|
||||
color: var(--theme-text-fg-color);
|
||||
|
||||
.adf-pagination__block {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-empty-folder {
|
||||
|
||||
&-this-space-is-empty {
|
||||
height: 32px;
|
||||
font-size: 24px;
|
||||
line-height: 1.33;
|
||||
letter-spacing: -1px;
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
&-drag-drop {
|
||||
min-height: 56px;
|
||||
font-size: 53px;
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
color: var(--theme-foreground-text-color);
|
||||
margin-top: 40px;
|
||||
word-break: break-all;
|
||||
white-space: pre-line;
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
&-any-files-here-to-add {
|
||||
min-height: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.4px;
|
||||
color: var(--theme-foreground-text-color);
|
||||
margin-top: 17px;
|
||||
word-break: break-all;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: 565px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
margin-top: 17px;
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-gallery-thumbnails {
|
||||
.adf-datatable-card .adf-datatable-row {
|
||||
height: 300px !important;
|
||||
|
||||
img {
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.adf-datatable-cell {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.adf-datatable-cell.adf-datatable-cell--image {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: space-between;
|
||||
|
||||
.adf-cell-value {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -66,6 +66,7 @@ import { takeUntil } from 'rxjs/operators';
|
||||
@Component({
|
||||
selector: 'adf-document-list',
|
||||
templateUrl: './document-list.component.html',
|
||||
styleUrls: ['./document-list.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-document-list' }
|
||||
})
|
||||
|
||||
@@ -1,210 +0,0 @@
|
||||
@mixin adf-document-list-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
$accent: map-get($theme, accent);
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
$document-list-selection-color: mat-color($accent) !default;
|
||||
$document-list-background: mat-color($background, background) !default;
|
||||
|
||||
.adf-document-list {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
background-color: $document-list-background;
|
||||
}
|
||||
|
||||
.mat-icon.adf-datatable-selected {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-left: -2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.adf-sticky-document-list {
|
||||
height: 310px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.adf-datatable-card {
|
||||
.adf-datatable-selected > svg {
|
||||
fill: $document-list-selection-color;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-list {
|
||||
.adf-datatable-selected > svg {
|
||||
fill: $document-list-selection-color;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-document-list_empty_template {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.adf-no-permission__template {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 300px;
|
||||
|
||||
mat-icon {
|
||||
font-size: 52px;
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
}
|
||||
|
||||
&--text {
|
||||
color: mat-color($foreground, text);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-document-list__this-space-is-empty {
|
||||
height: 32px;
|
||||
opacity: 0.26;
|
||||
font-size: 24px;
|
||||
line-height: 1.33;
|
||||
letter-spacing: -1px;
|
||||
color: mat-color($foreground, text);
|
||||
}
|
||||
|
||||
.adf-document-list__drag-drop {
|
||||
height: 56px;
|
||||
opacity: 0.54;
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
color: mat-color($foreground, text);
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.adf-document-list__any-files-here-to-add {
|
||||
height: 24px;
|
||||
opacity: 0.54;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.4px;
|
||||
color: mat-color($foreground, text) 0;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.adf-document-list__empty_doc_lib {
|
||||
width: 565px;
|
||||
height: 161px;
|
||||
object-fit: contain;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.adf-document-list-loading-margin {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.adf-document-list-loading-container {
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-empty-list-header {
|
||||
height: 32px;
|
||||
opacity: 0.26 !important;
|
||||
font-size: 24px;
|
||||
line-height: 1.33;
|
||||
letter-spacing: -1px;
|
||||
color: mat-color($foreground, text);
|
||||
}
|
||||
|
||||
.adf-documentlist-pagination {
|
||||
color: mat-color($foreground, text);
|
||||
|
||||
.adf-pagination__block {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-empty-folder {
|
||||
|
||||
&-this-space-is-empty {
|
||||
height: 32px;
|
||||
font-size: 24px;
|
||||
line-height: 1.33;
|
||||
letter-spacing: -1px;
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
}
|
||||
|
||||
&-drag-drop {
|
||||
min-height: 56px;
|
||||
font-size: 53px;
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
color: mat-color($foreground, text, 0.72);
|
||||
margin-top: 40px;
|
||||
word-break: break-all;
|
||||
white-space: pre-line;
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
&-any-files-here-to-add {
|
||||
min-height: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.4px;
|
||||
color: mat-color($foreground, text, 0.72);
|
||||
margin-top: 17px;
|
||||
word-break: break-all;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: 565px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
margin-top: 17px;
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-gallery-thumbnails {
|
||||
.adf-datatable-card .adf-datatable-row {
|
||||
height: 300px !important;
|
||||
|
||||
img {
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.adf-datatable-cell {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.adf-datatable-cell.adf-datatable-cell--image {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: space-between;
|
||||
|
||||
.adf-cell-value {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
.adf-add-permission-dialog {
|
||||
|
||||
.mat-dialog-title {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
}
|
||||
|
||||
.mat-dialog-container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.mat-dialog-content {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
height: 80vh;
|
||||
|
||||
.adf-new-permission-table {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.adf-search-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-dialog-actions {
|
||||
padding: 0 24px;
|
||||
background-color: var(--theme-background-color);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: var(--theme-foreground-text-color);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.adf-choose-action {
|
||||
|
||||
&[disabled] {
|
||||
color: var(--theme-secondary-text-color);
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf {
|
||||
&-search-user-button {
|
||||
width: 100%;
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-add-member-action {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -24,6 +24,7 @@ import { MemberModel } from '../../models/member.model';
|
||||
@Component({
|
||||
selector: 'adf-add-permission-dialog',
|
||||
templateUrl: './add-permission-dialog.component.html',
|
||||
styleUrls: ['./add-permission-dialog.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class AddPermissionDialogComponent {
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
@mixin adf-add-permission-dialog-theme($theme) {
|
||||
|
||||
$primary: map-get($theme, primary);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.adf-add-permission-dialog {
|
||||
|
||||
.mat-dialog-title {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
color: mat-color($foreground, text, 0.87);
|
||||
}
|
||||
|
||||
.mat-dialog-container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.mat-dialog-content {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
height: 80vh;
|
||||
|
||||
.adf-new-permission-table {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.adf-search-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-dialog-actions {
|
||||
padding: 0 24px;
|
||||
background-color: mat-color($background, background);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: mat-color($foreground, text, 0.72);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.adf-choose-action {
|
||||
|
||||
&[disabled] {
|
||||
color: mat-color($foreground, secondary-text);
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf {
|
||||
&-search-user-button {
|
||||
width: 100%;
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-add-member-action {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
$search-result-height: calc(100% - 75px);
|
||||
|
||||
.adf {
|
||||
|
||||
&-permission-result-list {
|
||||
display: flex;
|
||||
height: $search-result-height;
|
||||
overflow: auto;
|
||||
border: 2px solid var(--theme-border-color);
|
||||
|
||||
&-elements {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-permission-start-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: $search-result-height;
|
||||
overflow: auto;
|
||||
border: 2px solid var(--theme-border-color);
|
||||
}
|
||||
|
||||
&-permission-no-result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-permission-search {
|
||||
&-input {
|
||||
width: 100%;
|
||||
|
||||
&-icon {
|
||||
color: var(--theme-selected-button-bg-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-fg-base-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-list-option-item {
|
||||
mat-pseudo-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-list-text {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
|
||||
.adf-result-name {
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-permission-action {
|
||||
&[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:enabled {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,6 +27,7 @@ import { MatSelectionList } from '@angular/material/list';
|
||||
@Component({
|
||||
selector: 'adf-add-permission-panel',
|
||||
templateUrl: './add-permission-panel.component.html',
|
||||
styleUrls: ['./add-permission-panel.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
providers: [
|
||||
{ provide: SearchConfigurationService, useClass: SearchPermissionConfigurationService },
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
@mixin adf-add-permission-panel-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$primary: map-get($theme, primary);
|
||||
$mat-menu-border-radius: 2px !default;
|
||||
$search-result-height: calc(100% - 75px);
|
||||
|
||||
.adf {
|
||||
|
||||
&-permission-result-list {
|
||||
display: flex;
|
||||
height: $search-result-height;
|
||||
overflow: auto;
|
||||
border: 2px solid mat-color($foreground, base, 0.07);
|
||||
|
||||
&-elements {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-permission-start-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: $search-result-height;
|
||||
overflow: auto;
|
||||
border: 2px solid mat-color($foreground, base, 0.07);
|
||||
}
|
||||
|
||||
&-permission-no-result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-permission-search {
|
||||
&-input {
|
||||
width: 100%;
|
||||
|
||||
&-icon {
|
||||
color: mat-color($foreground, disabled-button);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: mat-color($foreground, base);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-list-option-item {
|
||||
mat-pseudo-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-list-text {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
|
||||
.adf-result-name {
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-permission-action {
|
||||
&[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:enabled {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.adf {
|
||||
&-permission-action {
|
||||
&[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:enabled {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -24,6 +24,7 @@ import { RoleModel } from '../../models/role.model';
|
||||
@Component({
|
||||
selector: 'adf-add-permission',
|
||||
templateUrl: './add-permission.component.html',
|
||||
styleUrls: ['./add-permission.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
/*
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
@mixin adf-add-permission-theme($theme) {
|
||||
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf {
|
||||
|
||||
&-permission-action {
|
||||
&[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:enabled {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
.adf {
|
||||
&-permission-card {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-permission-loader {
|
||||
margin-left: 45%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-permission-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
}
|
||||
|
||||
&-inherit-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&-header {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-inherit-toggle {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
&-inherit-subtitle {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
&-permission-content-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
&-permission-role-column-header {
|
||||
position: relative !important;
|
||||
height: 40px;
|
||||
.mat-form-field-infix {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-permission-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
&-permission-list {
|
||||
display: flex;
|
||||
height: calc(100% - 63px);
|
||||
}
|
||||
|
||||
&-local-permission-container {
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
[aria-sort='Ascending'] adf-user-role-column,
|
||||
[aria-sort='Descending'] adf-user-role-column {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.adf-permission-pop-over {
|
||||
padding-right: 15px;
|
||||
width: 100%;
|
||||
|
||||
.adf-pop-over-card {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 9px -5px var(--theme-fg-divider),
|
||||
0 15px 22px 2px var(--theme-fg-divider);
|
||||
}
|
||||
}
|
||||
@@ -24,6 +24,7 @@ import { PermissionListService } from './permission-list.service';
|
||||
@Component({
|
||||
selector: 'adf-permission-list',
|
||||
templateUrl: './permission-list.component.html',
|
||||
styleUrls: ['./permission-list.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class PermissionListComponent {
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
@mixin adf-permission-list-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf {
|
||||
&-permission-card {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-permission-loader {
|
||||
margin-left: 45%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-permission-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid mat-color($foreground, base, 0.07);
|
||||
}
|
||||
|
||||
&-inherit-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&-header {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-inherit-toggle {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
&-inherit-subtitle {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
&-permission-content-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
&-permission-role-column-header {
|
||||
position: relative !important;
|
||||
height: 40px;
|
||||
.mat-form-field-infix {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-permission-header {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
&-permission-list {
|
||||
display: flex;
|
||||
height: calc(100% - 63px);
|
||||
}
|
||||
|
||||
&-local-permission-container {
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
[aria-sort='Ascending'] adf-user-role-column,
|
||||
[aria-sort='Descending'] adf-user-role-column {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.adf-permission-pop-over {
|
||||
padding-right: 15px;
|
||||
width: 100%;
|
||||
|
||||
.adf-pop-over-card {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 9px -5px mat-color($foreground, divider),
|
||||
0 15px 22px 2px mat-color($foreground, divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
.adf {
|
||||
&-people-initial {
|
||||
background: var(--theme-primary-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: var(--theme-primary-color-default-contrast) !important;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&-group-icon {
|
||||
height: 20px !important;
|
||||
width: 20px !important;
|
||||
background: var(--theme-primary-color);
|
||||
border-radius: 50%;
|
||||
padding: 10px;
|
||||
color: var(--theme-primary-color-default-contrast) !important;
|
||||
font-weight: bolder;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&-people-select-icon {
|
||||
margin: 0 !important;
|
||||
svg {
|
||||
fill: var(--theme-accent-color);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
import { User } from '@alfresco/adf-core';
|
||||
import { NodeEntry } from '@alfresco/js-api';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
import { NodePermissionService } from '../../services/node-permission.service';
|
||||
|
||||
@@ -34,6 +34,8 @@ import { NodePermissionService } from '../../services/node-permission.service';
|
||||
<mat-icon class="adf-people-select-icon adf-datatable-selected" svgIcon="selected"></mat-icon>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['./user-icon-column.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-user-icon-column adf-datatable-content-cell' }
|
||||
})
|
||||
export class UserIconColumnComponent implements OnInit {
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
@mixin adf-user-icon-column-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf {
|
||||
&-people-initial {
|
||||
background: mat-color($primary);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: mat-color($primary, default-contrast) !important;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&-group-icon {
|
||||
height: 20px !important;
|
||||
width: 20px !important;
|
||||
background: mat-color($primary);
|
||||
border-radius: 50%;
|
||||
padding: 10px;
|
||||
color: mat-color($primary, default-contrast) !important;
|
||||
font-weight: bolder;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&-people-select-icon {
|
||||
margin: 0 !important;
|
||||
svg {
|
||||
fill: mat-color($accent);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.adf-user {
|
||||
&-name-column {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-email-column {
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.2px;
|
||||
line-height: 1.43;
|
||||
color: var(--theme-foreground-text-color);
|
||||
}
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
import { Group, NodeEntry } from '@alfresco/js-api';
|
||||
import { NodePermissionService } from '../../services/node-permission.service';
|
||||
@@ -32,6 +32,8 @@ import { EcmUserModel } from '@alfresco/adf-core';
|
||||
</span>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['./user-name-column.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-user-name-column adf-datatable-content-cell adf-expand-cell-5 adf-ellipsis-cell' }
|
||||
})
|
||||
export class UserNameColumnComponent implements OnInit {
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
@mixin user-name-column-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-user {
|
||||
&-name-column {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-email-column {
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.2px;
|
||||
line-height: 1.43;
|
||||
color: mat-color($foreground, text, 0.72);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.mat-chip:focus {
|
||||
color: var(--theme-accent-color-default-contrast);
|
||||
background-color: var(--theme-accent-color);
|
||||
|
||||
.mat-chip-remove {
|
||||
color: var(--theme-accent-color-default-contrast);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -22,6 +22,7 @@ import { SearchFacetFiltersService } from '../../services/search-facet-filters.s
|
||||
@Component({
|
||||
selector: 'adf-search-chip-list',
|
||||
templateUrl: './search-chip-list.component.html',
|
||||
styleUrls: ['./search-chip-list.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-search-chip-list' }
|
||||
})
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
@mixin adf-search-chip-list-theme($theme) {
|
||||
$accent: map-get($theme, accent);
|
||||
|
||||
.mat-chip:focus {
|
||||
color: mat-color($accent, default-contrast);
|
||||
background-color: mat-color($accent);
|
||||
|
||||
.mat-chip-remove {
|
||||
color: mat-color($accent, default-contrast);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
$mat-menu-overlay-min-width: 112px !default; // 56 * 2
|
||||
$mat-menu-overlay-max-width: 280px !default; // 56 * 5
|
||||
|
||||
.adf {
|
||||
|
||||
&-search-result-autocomplete {
|
||||
@include mat-overridable-elevation(2);
|
||||
|
||||
min-width: $mat-menu-overlay-min-width;
|
||||
max-width: $mat-menu-overlay-max-width;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
transform-origin: top left;
|
||||
transform:translateX(-40px);
|
||||
position: absolute;
|
||||
max-height: 400px;
|
||||
margin-left: 45px;
|
||||
margin-top: -22px;
|
||||
font-size: 15px;
|
||||
z-index: 5;
|
||||
color: var(--theme-text-fg-color);
|
||||
background-color: var(--theme-card-bg-color);
|
||||
border-radius: 2px;
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-search-autocomplete-item {
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-bg-hover-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,6 +27,7 @@ import { EmptySearchResultComponent } from './empty-search-result.component';
|
||||
@Component({
|
||||
selector: 'adf-search-control',
|
||||
templateUrl: './search-control.component.html',
|
||||
styleUrls: ['./search-control.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-search-control' }
|
||||
})
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
@mixin adf-search-control-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$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-result-autocomplete {
|
||||
@include mat-overridable-elevation(2);
|
||||
|
||||
min-width: $mat-menu-overlay-min-width;
|
||||
max-width: $mat-menu-overlay-max-width;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
transform-origin: top left;
|
||||
transform:translateX(-40px);
|
||||
position: absolute;
|
||||
max-height: 400px;
|
||||
margin-left: 45px;
|
||||
margin-top: -22px;
|
||||
font-size: 15px;
|
||||
z-index: 5;
|
||||
color: mat-color($foreground, text);
|
||||
background-color: mat-color($background, card);
|
||||
border-radius: $mat-menu-border-radius;
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-search-autocomplete-item {
|
||||
|
||||
&:hover {
|
||||
background-color: mat-color($background, 'hover');
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
.adf-search-filter-facet {
|
||||
.adf-checklist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 180px;
|
||||
padding: 5px 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.mat-checkbox-label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-checkbox-layout {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-facet-label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mat-checkbox {
|
||||
margin: 5px;
|
||||
|
||||
&.mat-checkbox-checked .mat-checkbox-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-facet-result-filter {
|
||||
padding-bottom: 16px;
|
||||
|
||||
.adf-facet-search-container {
|
||||
border-radius: 6px;
|
||||
background: var(--theme-background-color);
|
||||
display: flex;
|
||||
height: 32px;
|
||||
|
||||
.adf-facet-search-icon {
|
||||
width: 27px;
|
||||
margin-top: -4px;
|
||||
.mat-icon {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-facet-search-field {
|
||||
padding: 2px;
|
||||
flex: 1;
|
||||
margin-top: -16px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.25px;
|
||||
|
||||
.mat-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-form-field-suffix {
|
||||
padding-right: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-facet-buttons {
|
||||
text-align: right;
|
||||
|
||||
.mat-button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&--topSpace {
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-checkbox-label,
|
||||
.mat-radio-label {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -29,6 +29,7 @@ import { Subject } from 'rxjs';
|
||||
@Component({
|
||||
selector: 'adf-search-facet-field',
|
||||
templateUrl: './search-facet-field.component.html',
|
||||
styleUrls: ['./search-facet-field.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SearchFacetFieldComponent implements FacetWidget {
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
@mixin adf-search-filter-field-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.adf-search-filter-facet {
|
||||
.adf-checklist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 180px;
|
||||
padding: 5px 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.mat-checkbox-label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-checkbox-layout {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-facet-label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mat-checkbox {
|
||||
margin: 5px;
|
||||
|
||||
&.mat-checkbox-checked .mat-checkbox-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-facet-result-filter {
|
||||
padding-bottom: 16px;
|
||||
|
||||
.adf-facet-search-container {
|
||||
border-radius: 6px;
|
||||
background: mat-color($background, background);
|
||||
display: flex;
|
||||
height: 32px;
|
||||
|
||||
.adf-facet-search-icon {
|
||||
width: 27px;
|
||||
margin-top: -4px;
|
||||
.mat-icon {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-facet-search-field {
|
||||
padding: 2px;
|
||||
flex: 1;
|
||||
margin-top: -16px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.25px;
|
||||
|
||||
.mat-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-form-field-suffix {
|
||||
padding-right: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-facet-buttons {
|
||||
text-align: right;
|
||||
|
||||
.mat-button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&--topSpace {
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-checkbox-label,
|
||||
.mat-radio-label {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
.adf-search-filter-chip {
|
||||
|
||||
&.mat-chip {
|
||||
border: 2px solid transparent;
|
||||
transition : border 500ms ease-in-out;
|
||||
max-width: 320px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
background: var(--theme-unselected-chip-bg-color);
|
||||
|
||||
&:focus {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
&.mat-standard-chip::after {
|
||||
background: var(--theme-unselected-chip-bg-color);
|
||||
color: unset;
|
||||
}
|
||||
|
||||
&.mat-chip-list-wrapper {
|
||||
margin: 4px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.adf-search-toggle-chip {
|
||||
background: var(--theme-card-bg-color);
|
||||
border: 2px solid var(--theme-accent-color);
|
||||
|
||||
&.mat-chip::after {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-filter-placeholder {
|
||||
flex: 1 1 auto;
|
||||
white-space: nowrap;
|
||||
color: var(--theme-disabled-text-color);
|
||||
}
|
||||
|
||||
.adf-search-filter-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
padding-top: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&-menu + * .cdk-overlay-pane .mat-menu-panel {
|
||||
min-width: 320px;
|
||||
border-radius: 12px;
|
||||
@include mat-elevation(2);
|
||||
}
|
||||
}
|
||||
@@ -23,6 +23,7 @@ import { SearchQueryBuilderService } from '../../services/search-query-builder.s
|
||||
@Component({
|
||||
selector: 'adf-search-filter-chips',
|
||||
templateUrl: './search-filter-chips.component.html',
|
||||
styleUrls: ['./search-filter-chips.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SearchFilterChipsComponent {
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
@mixin adf-search-filter-chips-theme($theme) {
|
||||
$accent: map-get($theme, accent);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$unselected-background: mat-color($background, unselected-chip);
|
||||
$unselected-foreground: mat-color($foreground, text);
|
||||
$selected-chip-background: mat-color($background, card);
|
||||
$chip-placeholder: mat-color($foreground, disabled-text);
|
||||
|
||||
.adf-search-filter-chip {
|
||||
|
||||
&.mat-chip {
|
||||
border: 2px solid transparent;
|
||||
transition : border 500ms ease-in-out;
|
||||
max-width: 320px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
background: $unselected-background;
|
||||
|
||||
&:focus {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
&.mat-standard-chip::after {
|
||||
background: $unselected-background;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
&.mat-chip-list-wrapper {
|
||||
margin: 4px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.adf-search-toggle-chip {
|
||||
background: $selected-chip-background;
|
||||
border: 2px solid mat-color($accent);
|
||||
|
||||
&.mat-chip::after {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-filter-placeholder {
|
||||
flex: 1 1 auto;
|
||||
white-space: nowrap;
|
||||
color: $chip-placeholder;
|
||||
}
|
||||
|
||||
.adf-search-filter-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
padding-top: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&-menu + * .cdk-overlay-pane .mat-menu-panel {
|
||||
min-width: 320px;
|
||||
border-radius: 12px;
|
||||
@include mat-elevation(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.adf-search-filter-menu-card {
|
||||
color: var(--theme-text-fg-color);
|
||||
background: var(--theme-card-bg-color);
|
||||
|
||||
.adf-search-filter-title {
|
||||
padding: 16px 12px;
|
||||
height: 32px;
|
||||
flex: 1 1 auto;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.15px;
|
||||
line-height: 24px;
|
||||
font-weight: bold;
|
||||
font-style: inherit;
|
||||
|
||||
&-action {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-filter-content {
|
||||
padding: 16px 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.adf-search-filter-actions {
|
||||
padding: 16px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.adf-search-action-button {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,11 +15,13 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, EventEmitter, Output } from '@angular/core';
|
||||
import { Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-search-filter-menu-card',
|
||||
templateUrl: './search-filter-menu-card.component.html'
|
||||
templateUrl: './search-filter-menu-card.component.html',
|
||||
styleUrls: ['./search-filter-menu-card.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SearchFilterMenuCardComponent {
|
||||
@Output()
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
@mixin adf-search-filter-menu-card($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.adf-search-filter-menu-card {
|
||||
color: mat-color($foreground, text);
|
||||
background: mat-color($background, card);
|
||||
|
||||
.adf-search-filter-title {
|
||||
padding: 16px 12px;
|
||||
height: 32px;
|
||||
flex: 1 1 auto;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.15px;
|
||||
line-height: 24px;
|
||||
font-weight: bold;
|
||||
font-style: inherit;
|
||||
|
||||
&-action {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-filter-content {
|
||||
padding: 16px 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.adf-search-filter-actions {
|
||||
padding: 16px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.adf-search-action-button {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
.adf-filter {
|
||||
|
||||
&-button {
|
||||
margin-left: -7px !important;
|
||||
|
||||
.adf-icon {
|
||||
opacity: 1;
|
||||
color: var(--theme-icon-fg-color);
|
||||
|
||||
&-active {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.mat-badge-active {
|
||||
border: 2px solid var(--theme-card-bg-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.mat-badge-content {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: -3px !important;
|
||||
right: -6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px 15px 10px;
|
||||
color: var(--theme-text-bold-color) !important;
|
||||
|
||||
.adf-facet-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-search-check-list {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
input {
|
||||
background: 2px solid var(--theme-card-bg-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 1.1em;
|
||||
padding-bottom: 5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
}
|
||||
|
||||
&-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px;
|
||||
background-color: var(--theme-hover-bg-color);
|
||||
|
||||
> button {
|
||||
font-size: 0.9em;
|
||||
color: var(--theme-text-bold-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-panel.adf-filter-menu .mat-menu-content {
|
||||
min-width: 260px;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -39,6 +39,7 @@ import { MatMenuTrigger } from '@angular/material/menu';
|
||||
@Component({
|
||||
selector: 'adf-search-filter-container',
|
||||
templateUrl: './search-filter-container.component.html',
|
||||
styleUrls: ['./search-filter-container.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SearchFilterContainerComponent implements OnInit, OnDestroy {
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
@mixin adf-filter-menu-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.adf-filter {
|
||||
|
||||
&-button {
|
||||
margin-left: -7px !important;
|
||||
|
||||
.adf-icon {
|
||||
opacity: 1;
|
||||
color: mat-color($foreground, icon);
|
||||
|
||||
&-active {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.mat-badge-active {
|
||||
border: 2px solid mat-color($background, card) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.mat-badge-content {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: -3px !important;
|
||||
right: -6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px 15px 10px;
|
||||
color: mat-color($foreground, text, 0.87) !important;
|
||||
|
||||
.adf-facet-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-search-check-list {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
input {
|
||||
background: 2px solid mat-color($background, card) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 1.1em;
|
||||
padding-bottom: 5px;
|
||||
color: mat-color($foreground, text, 0.87);
|
||||
}
|
||||
|
||||
&-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px;
|
||||
background-color: mat-color($background, hover);
|
||||
|
||||
> button {
|
||||
font-size: 0.9em;
|
||||
color: mat-color($foreground, text, 0.87);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-panel.adf-filter-menu .mat-menu-content {
|
||||
min-width: 260px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.adf-search-filter {
|
||||
.mat-expansion-panel-header-title {
|
||||
font-size: 14px;
|
||||
color: var(--theme-text-bold-color);
|
||||
}
|
||||
|
||||
.mat-checkbox-label,
|
||||
.mat-radio-label {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
}
|
||||
@@ -25,6 +25,7 @@ import { SearchFacetFiltersService } from '../../services/search-facet-filters.s
|
||||
@Component({
|
||||
selector: 'adf-search-filter',
|
||||
templateUrl: './search-filter.component.html',
|
||||
styleUrls: ['./search-filter.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-search-filter' }
|
||||
})
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
@mixin adf-search-filter-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-search-filter {
|
||||
.mat-expansion-panel-header-title {
|
||||
font-size: 14px;
|
||||
color: mat-color($foreground, text, 0.87);
|
||||
}
|
||||
|
||||
.mat-checkbox-label,
|
||||
.mat-radio-label {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
.adf-search-form {
|
||||
&.mat-button {
|
||||
height: 35px;
|
||||
max-width: 190px;
|
||||
min-width: 190px;
|
||||
align-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
max-width: 120px;
|
||||
min-width: 120px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
padding-right: 12px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 6px;
|
||||
transition: border 500ms ease-out;
|
||||
}
|
||||
|
||||
&-icon-selected {
|
||||
border-color: var(--theme-accent-color);
|
||||
}
|
||||
|
||||
&-menu + * .mat-menu-panel {
|
||||
@include mat-elevation(2);
|
||||
border-radius: 6px;
|
||||
|
||||
.mat-menu-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -23,6 +23,7 @@ import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token';
|
||||
@Component({
|
||||
selector: 'adf-search-form',
|
||||
templateUrl: './search-form.component.html',
|
||||
styleUrls: ['./search-form.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SearchFormComponent {
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
@mixin adf-search-forms-theme($theme) {
|
||||
$accent: map-get($theme, accent);
|
||||
|
||||
.adf-search-form {
|
||||
&.mat-button {
|
||||
height: 35px;
|
||||
max-width: 190px;
|
||||
min-width: 190px;
|
||||
align-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
max-width: 120px;
|
||||
min-width: 120px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
padding-right: 12px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 6px;
|
||||
transition: border 500ms ease-out;
|
||||
}
|
||||
|
||||
&-icon-selected {
|
||||
border-color: mat-color($accent);
|
||||
}
|
||||
|
||||
&-menu + * .mat-menu-panel {
|
||||
@include mat-elevation(2);
|
||||
border-radius: 6px;
|
||||
|
||||
.mat-menu-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.adf-search-sorting-picker {
|
||||
.mat-icon-button {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
}
|
||||
@@ -23,6 +23,7 @@ import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token';
|
||||
@Component({
|
||||
selector: 'adf-search-sorting-picker',
|
||||
templateUrl: './search-sorting-picker.component.html',
|
||||
styleUrls: ['./search-sorting-picker.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-search-sorting-picker' }
|
||||
})
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
@mixin adf-search-sorting-picker-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-search-sorting-picker {
|
||||
.mat-icon-button {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
@import '../breadcrumb/breadcrumb.theme';
|
||||
@import '../breadcrumb/dropdown-breadcrumb.theme';
|
||||
@import '../content-node-selector/content-node-selector-panel.theme';
|
||||
@import '../content-node-selector/name-location-cell/name-location-cell.theme';
|
||||
@import '../document-list/components/document-list.theme';
|
||||
|
||||
@import '../upload/components/file-uploading-list-row.theme';
|
||||
@import '../upload/components/file-uploading-dialog.theme';
|
||||
@import '../upload/components/upload-drag-area.theme';
|
||||
|
||||
@import '../search/components/search-control.theme';
|
||||
@import '../search/components/search-sorting-picker/search-sorting-picker.theme';
|
||||
@import '../search/components/search-filter/search-filter.theme';
|
||||
@import '../search/components/search-chip-list/search-chip-list.theme';
|
||||
@import '../search/components/search-filter-container/search-filter-container.theme';
|
||||
|
||||
@import '../dialogs/folder.dialog.theme';
|
||||
|
||||
@import '../content-node-selector/content-node-selector.theme';
|
||||
@import '../content-node-share/content-node-share.dialog.theme';
|
||||
@import '../content-metadata/content-metadata.theme';
|
||||
@import '../permission-manager/components/permission-list/permission-list.theme';
|
||||
@import '../permission-manager/components/add-permission/add-permission.theme';
|
||||
@import '../permission-manager/components/add-permission/add-permission-dialog.theme';
|
||||
@import '../permission-manager/components/add-permission/add-permission-panel.theme';
|
||||
@import '../version-manager/version-comparison.theme';
|
||||
@import '../content-type/content-type-dialog.theme';
|
||||
@import '../aspect-list/aspect-list.theme';
|
||||
@import '../permission-manager/components/user-icon-column/user-icon-column.theme';
|
||||
@import '../permission-manager/components/user-name-column/user-name-column.theme';
|
||||
@import '../search/components/search-filter-chips/search-filter-chips.theme';
|
||||
@import '../search/components/search-facet-field/search-facet-field.theme';
|
||||
@import '../search/components/search-form/search-form.theme';
|
||||
@import '../search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.theme';
|
||||
|
||||
@mixin adf-content-services-theme($theme) {
|
||||
@include adf-breadcrumb-theme($theme);
|
||||
@include adf-breadcrumb-dropdown-theme($theme);
|
||||
@include adf-content-node-selector-theme($theme);
|
||||
@include adf-content-node-share-theme($theme);
|
||||
@include adf-name-location-cell-theme($theme);
|
||||
@include adf-document-list-theme($theme) ;
|
||||
@include adf-file-uploading-row-theme($theme);
|
||||
@include adf-upload-dialog-theme($theme);
|
||||
@include adf-upload-drag-area-theme($theme);
|
||||
@include adf-search-control-theme($theme);
|
||||
@include adf-search-sorting-picker-theme($theme);
|
||||
@include adf-filter-menu-theme($theme);
|
||||
@include adf-dialog-theme($theme);
|
||||
@include adf-content-node-selector-dialog-theme($theme);
|
||||
@include adf-content-metadata-module-theme($theme);
|
||||
@include adf-permission-list-theme($theme);
|
||||
@include adf-user-icon-column-theme($theme);
|
||||
@include user-name-column-theme($theme);
|
||||
@include adf-add-permission-theme($theme);
|
||||
@include adf-add-permission-dialog-theme($theme);
|
||||
@include adf-add-permission-panel-theme($theme);
|
||||
@include adf-search-filter-theme($theme);
|
||||
@include adf-search-chip-list-theme($theme);
|
||||
@include adf-version-comparison-theme($theme);
|
||||
@include adf-content-type-dialog-theme($theme);
|
||||
@include adf-aspect-list-theme($theme);
|
||||
@include adf-search-filter-chips-theme($theme);
|
||||
@include adf-search-filter-field-theme($theme);
|
||||
@include adf-search-forms-theme($theme);
|
||||
@include adf-search-filter-menu-card($theme);
|
||||
}
|
||||
@@ -1,9 +1,7 @@
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let currentEntry of tagsEntries; let idx = index">
|
||||
<div class="adf-tag-actions-container" id="tag_delete_{{currentEntry.entry.tag}}" (click)="removeTag(currentEntry.entry.id)">
|
||||
<div class="adf-tag-actions-delete-text" id="tag_name_{{currentEntry.entry.tag}}">
|
||||
{{currentEntry.entry.tag}}
|
||||
</div>
|
||||
<div class="adf-tag-actions-delete-text" id="tag_name_{{currentEntry.entry.tag}}">{{currentEntry.entry.tag}}</div>
|
||||
<mat-icon class="adf-tag-actions-delete-icon">delete</mat-icon>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
@@ -12,19 +10,25 @@
|
||||
<tr>
|
||||
<td>
|
||||
<mat-form-field class="adf-full-width">
|
||||
<input matInput placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
|
||||
type="text"
|
||||
(keypress)="cleanErrorMsg()"
|
||||
[(ngModel)]="newTagName"
|
||||
id="new-tag-text"/>
|
||||
<input
|
||||
id="new-tag-text"
|
||||
matInput placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
|
||||
type="text"
|
||||
(keypress)="cleanErrorMsg()"
|
||||
[(ngModel)]="newTagName"
|
||||
/>
|
||||
<mat-hint data-automation-id="errorMessage" *ngIf="error" [ngStyle]="{'color': 'red'}" align="start">{{errorMsg}}</mat-hint>
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td>
|
||||
<button class="adf-full-width" color="primary" id="add-tag" (click)="addTag()" [disabled]="disableAddTag"
|
||||
mat-raised-button>
|
||||
{{'TAG.BUTTON.ADD' | translate }}
|
||||
</button>
|
||||
<button
|
||||
id="add-tag"
|
||||
class="adf-full-width"
|
||||
color="primary"
|
||||
(click)="addTag()"
|
||||
[disabled]="disableAddTag"
|
||||
mat-raised-button
|
||||
>{{'TAG.BUTTON.ADD' | translate }}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
.adf-tag-node-actions-list {
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-tag-actions-delete-icon {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
.adf-tag-actions-delete-icon {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.adf-tag-actions-delete-text {
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
}
|
||||
.adf-tag-actions-delete-text {
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.adf-tag-actions-container {
|
||||
padding: 8px 0;
|
||||
height: 20px;
|
||||
.adf-tag-actions-container {
|
||||
padding: 8px 0;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,7 +31,8 @@ import { takeUntil } from 'rxjs/operators';
|
||||
selector: 'adf-tag-node-actions-list',
|
||||
templateUrl: './tag-actions.component.html',
|
||||
styleUrls: ['./tag-actions.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-tag-node-actions-list' }
|
||||
})
|
||||
export class TagActionsComponent implements OnChanges, OnInit, OnDestroy {
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<mat-chip-list class="adf-tag-chips-list">
|
||||
<div class="adf-list-tag" *ngFor="let currentEntry of tagsEntries; let idx = index">
|
||||
<mat-chip class="adf-primary-background-color">
|
||||
<mat-chip>
|
||||
<span id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</span>
|
||||
</mat-chip>
|
||||
</div>
|
||||
|
||||
@@ -1,20 +1,31 @@
|
||||
.adf-tag-chips-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& div {
|
||||
.adf-tag-list {
|
||||
.adf-tag-chips-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.adf-list-tag {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
|
||||
.mat-chip {
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
background-color: var(--theme-primary-color);
|
||||
|
||||
.mat-icon {
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-tag-list-controls {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-list-tag {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.adf-tag-list-controls {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -29,7 +29,8 @@ import { TagEntry } from '@alfresco/js-api';
|
||||
selector: 'adf-tag-list',
|
||||
templateUrl: './tag-list.component.html',
|
||||
styleUrls: ['./tag-list.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-tag-list' }
|
||||
})
|
||||
export class TagListComponent implements OnInit, OnDestroy {
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<mat-chip-list>
|
||||
<mat-chip class="adf-tag-chips adf-primary-background-color"
|
||||
<mat-chip class="adf-tag-chips"
|
||||
*ngFor="let currentEntry of tagsEntries; let idx = index" (removed)="removeTag(currentEntry.entry.id)">
|
||||
<span id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</span>
|
||||
<mat-icon *ngIf="showDelete" id="tag_chips_delete_{{currentEntry.entry.tag}}"
|
||||
class="adf-tag-chips-delete-icon adf-primary-contrast-text-color" matChipRemove>cancel
|
||||
class="adf-tag-chips-delete-icon" matChipRemove>cancel
|
||||
</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
|
||||
@@ -1,20 +1,28 @@
|
||||
.adf-tag-chips-delete {
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
height: 17px;
|
||||
width: 20px;
|
||||
float: right;
|
||||
border: 0;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: -1px 0 0 10px;
|
||||
}
|
||||
.adf-tag-node-list {
|
||||
.adf-tag-chips {
|
||||
color: var(--theme-primary-color-default-contrast);
|
||||
background-color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.adf-tag-chips-delete-icon {
|
||||
font-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
.adf-tag-chips-delete {
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
height: 17px;
|
||||
width: 20px;
|
||||
float: right;
|
||||
border: 0;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: -1px 0 0 10px;
|
||||
}
|
||||
|
||||
.adf-tag-chips-delete-icon {
|
||||
font-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
color: var(--theme-primary-color-default-contrast) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,7 +30,8 @@ import { takeUntil } from 'rxjs/operators';
|
||||
selector: 'adf-tag-node-list',
|
||||
templateUrl: './tag-node-list.component.html',
|
||||
styleUrls: ['./tag-node-list.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-tag-node-list' }
|
||||
})
|
||||
export class TagNodeListComponent implements OnChanges, OnDestroy, OnInit {
|
||||
/** The identifier of a node. */
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
.adf-upload-dialog {
|
||||
background: var(--theme-dialog-bg-color);
|
||||
color: var(--theme-text-color);
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
width: 40%;
|
||||
box-shadow: 1px 5px 15px #888888;
|
||||
z-index: 999;
|
||||
|
||||
&--padding {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
&--hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&--minimized {
|
||||
width: 20%;
|
||||
|
||||
.adf-upload-dialog__content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
color: var(--theme-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-left: 0.5em;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__info {
|
||||
padding: 0 1em 1em;
|
||||
}
|
||||
|
||||
&__content {
|
||||
overflow: auto;
|
||||
max-height: 194px;
|
||||
border-top: 1px solid var(--adf-upload-border-color);
|
||||
border-bottom: 1px solid var(--adf-upload-border-color);
|
||||
}
|
||||
|
||||
&__confirmation {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
&__confirmation--title {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.4px;
|
||||
color: var(--theme-text-bold-color);
|
||||
}
|
||||
|
||||
&__confirmation--text {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 1em;
|
||||
|
||||
& > button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
[adfUploadDialogLeft] .adf-upload-dialog { left: 25px; }
|
||||
[adfUploadDialogRight] .adf-upload-dialog { right: 25px;}
|
||||
@@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { FileModel, FileUploadStatus, UploadService, UserPreferencesService, FileUploadDeleteEvent, FileUploadCompleteEvent } from '@alfresco/adf-core';
|
||||
import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnDestroy, OnInit, ViewChild, HostBinding, ElementRef } from '@angular/core';
|
||||
import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnDestroy, OnInit, ViewChild, HostBinding, ElementRef, ViewEncapsulation } from '@angular/core';
|
||||
import { Subscription, merge, Subject } from 'rxjs';
|
||||
import { FileUploadingListComponent } from './file-uploading-list.component';
|
||||
import { Direction } from '@angular/cdk/bidi';
|
||||
@@ -24,7 +24,9 @@ import { takeUntil, delay } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-file-uploading-dialog',
|
||||
templateUrl: './file-uploading-dialog.component.html'
|
||||
templateUrl: './file-uploading-dialog.component.html',
|
||||
styleUrls: ['./file-uploading-dialog.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FileUploadingDialogComponent implements OnInit, OnDestroy {
|
||||
/** Dialog direction. Can be 'ltr' or 'rtl. */
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
@mixin adf-upload-dialog-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.adf-upload-dialog {
|
||||
background: mat-color($background, dialog);
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
width: 40%;
|
||||
box-shadow: 1px 5px 15px #888888;
|
||||
z-index: 999;
|
||||
|
||||
&--padding {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
&--hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&--minimized {
|
||||
width: 20%;
|
||||
|
||||
.adf-upload-dialog__content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
color: mat-color($foreground, text, 0.54) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-left: 0.5em;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__info {
|
||||
padding: 0 1em 1em;
|
||||
}
|
||||
|
||||
&__content {
|
||||
overflow: auto;
|
||||
max-height: 194px;
|
||||
border-top: 1px solid mat-color($foreground, text, 0.14);
|
||||
border-bottom: 1px solid mat-color($foreground, text, 0.14);
|
||||
}
|
||||
|
||||
&__confirmation {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
&__confirmation--title {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.4px;
|
||||
color: $black-87-opacity;
|
||||
}
|
||||
|
||||
&__confirmation--text {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 1em;
|
||||
|
||||
& > button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
[adfUploadDialogLeft] .adf-upload-dialog { left: 25px; }
|
||||
[adfUploadDialogRight] .adf-upload-dialog { right: 25px;}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
$file-uploading-row-hover-color: #eeeeee !default;
|
||||
|
||||
adf-file-uploading-list-row:not(:first-child) {
|
||||
display: block;
|
||||
border-top: 1px solid var(--adf-upload-border-color);
|
||||
}
|
||||
|
||||
.adf-file-uploading-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.3em 1em;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
background: $file-uploading-row-hover-color;
|
||||
}
|
||||
|
||||
&__name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1 1 auto;
|
||||
padding: 0 1em 0 0.5em;
|
||||
}
|
||||
|
||||
&__group, &__block, &__file-version {
|
||||
min-width: 100px;
|
||||
display: flex !important;
|
||||
justify-content: flex-end;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__group--toggle {
|
||||
cursor: pointer;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
&__status--done {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
|
||||
&__status--error {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
&__action--cancel {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
&__action--remove {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
@@ -16,11 +16,13 @@
|
||||
*/
|
||||
|
||||
import { FileModel, FileUploadStatus } from '@alfresco/adf-core';
|
||||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-file-uploading-list-row',
|
||||
templateUrl: './file-uploading-list-row.component.html'
|
||||
templateUrl: './file-uploading-list-row.component.html',
|
||||
styleUrls: ['./file-uploading-list-row.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FileUploadingListRowComponent {
|
||||
@Input()
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
@mixin adf-file-uploading-row-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
$file-uploading-row-hover-color: #eeeeee !default;
|
||||
|
||||
adf-file-uploading-list-row:not(:first-child) {
|
||||
display: block;
|
||||
border-top: 1px solid mat-color($foreground, text, 0.14);
|
||||
}
|
||||
|
||||
.adf-file-uploading-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.3em 1em;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
background: $file-uploading-row-hover-color;
|
||||
}
|
||||
|
||||
&__name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1 1 auto;
|
||||
padding: 0 1em 0 0.5em;
|
||||
}
|
||||
|
||||
&__group, &__block, &__file-version {
|
||||
min-width: 100px;
|
||||
display: flex !important;
|
||||
justify-content: flex-end;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__group--toggle {
|
||||
cursor: pointer;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
&__status--done {
|
||||
color: mat-color($accent);
|
||||
}
|
||||
|
||||
&__status--error {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
&__action--cancel {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
&__action--remove {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
$adf-upload-dragging-color: #2196f3 !default;
|
||||
$adf-upload-dragging-border: 1px dashed #2196f3 !default;
|
||||
$adf-upload-dragging-background: #e3f2fd !default;
|
||||
$adf-upload-dragging-level1-color: #2196f3 !default;
|
||||
$adf-upload-dragging-level1-border: 1px dashed #2196f3 !default;
|
||||
|
||||
@mixin file-draggable__input-focus($text-color, $border) {
|
||||
color: $text-color;
|
||||
border: $border !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
adf-upload-drag-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
|
||||
.adf-upload-border {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
vertical-align: unset;
|
||||
text-align: unset;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.adf-file-draggable__input-focus {
|
||||
color: $adf-upload-dragging-color;
|
||||
border: $adf-upload-dragging-border;
|
||||
|
||||
adf-document-list {
|
||||
background: $adf-upload-dragging-background;
|
||||
adf-datatable > table {
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-upload__dragging {
|
||||
background: $adf-upload-dragging-background;
|
||||
color: $adf-upload-dragging-color;
|
||||
}
|
||||
|
||||
.adf-upload__dragging td {
|
||||
border-top: $adf-upload-dragging-border !important;
|
||||
border-bottom: $adf-upload-dragging-border !important;
|
||||
|
||||
&:first-child {
|
||||
border-left: $adf-upload-dragging-border !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: $adf-upload-dragging-border !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
& > div {
|
||||
adf-upload-drag-area {
|
||||
.adf-file-draggable__input-focus {
|
||||
@include file-draggable__input-focus(
|
||||
$adf-upload-dragging-color,
|
||||
$adf-upload-dragging-border
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-upload-border {
|
||||
vertical-align: inherit !important;
|
||||
text-align: inherit !important;
|
||||
}
|
||||
|
||||
.adf-file-draggable__input-focus {
|
||||
color: $adf-upload-dragging-level1-color !important;
|
||||
border: $adf-upload-dragging-level1-border !important;
|
||||
margin-left: 0 !important;
|
||||
|
||||
adf-upload-drag-area {
|
||||
& > div {
|
||||
@include file-draggable__input-focus(
|
||||
$adf-upload-dragging-color,
|
||||
$adf-upload-dragging-border
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -25,6 +25,7 @@ import { UploadBase } from './base-upload/upload-base';
|
||||
@Component({
|
||||
selector: 'adf-upload-drag-area',
|
||||
templateUrl: './upload-drag-area.component.html',
|
||||
styleUrls: ['./upload-drag-area.component.scss'],
|
||||
host: {'class': 'adf-upload-drag-area'},
|
||||
viewProviders: [
|
||||
{provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user