inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

* cleanup colors

* remove variables file, fix bugs in animations

* proper ordering of imports, core css vars

* cleanup snackbar and material themes

* tags component

* login component styles

* app login

* toolbar component styles

* breadcrumb styles

* dropdown breadcrumb

* app layout component

* demo shell: files component

* aspect list styles

* content metadata styles

* node selector

* name location cell

* node share dialog

* content type dialog

* folder dialog

* document list

* datatable theme

* pagination theme

* viewer theme

* viewer theme

* user-info theme

* container widget

* dynamic table theme

* form widgets

* form theme

* form renderer

* sidebar menu

* header theme

* info drawer theme

* comment list

* commens and layout container

* sidenav layout

* empty content

* error content

* clipboard theme

* search input

* tooltip card and notification history

* card view theme

* remove unused keys

* add permission dialog

* search and permission dialogs

* version comparison and column themes

* upload drag area and cleanup references

* remove the need for content styles

* insight components

* cleanup insights theme

* process components

* process components

* process cloud themes

* cleanup unsed imports

* cleanup mixins

* update build scripts

* test fixes

* remove fdescribe

* css fixes

* update unit tests
This commit is contained in:
Denys Vuika 2021-09-29 13:17:05 +01:00 committed by GitHub
parent 8113b9b10b
commit 6f968f7e4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
335 changed files with 7703 additions and 8339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo-shell/src/app/components/app-layout/app-layout.component.scss
View File

@ -1,6 +1,3 @@
@mixin app-layout-theme($theme) {
$primary: map-get($theme, primary);
$minimumAppWidth: 320px;
@media screen and (max-width: 599px) {
app-search-bar {
@ -21,11 +18,11 @@
.app-layout {
display: flex;
flex: 1;
min-width: $minimumAppWidth;
min-width: 320px;
height: 100%;
.app-sidenav-link--active {
color: mat-color($primary);
color: var(--theme-primary-color);
}
.app-sidenav-link {
@ -66,4 +63,3 @@
[dir='rtl'] .app-sidenav-link__expand-button {
transform: rotateY(180deg);
}
}

5
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@ -24,9 +24,8 @@ import { ThemePalette } from '@angular/material/core';
@Component({
templateUrl: './app-layout.component.html',
host: {
'class': 'app-layout'
},
styleUrls: ['./app-layout.component.scss'],
host: { 'class': 'app-layout' },
encapsulation: ViewEncapsulation.None
})
export class AppLayoutComponent implements OnInit, OnDestroy {

2
demo-shell/src/app/components/files/files.component.scss
View File

@ -1,4 +1,3 @@
@mixin app-file-component-theme($theme) {
.app-container {
margin: 10px !important;
}
@ -92,4 +91,3 @@
.adf-preselect-nodes-input {
width: 100%;
}
}

4
demo-shell/src/app/components/files/files.component.ts
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, Input, OnInit, OnChanges, OnDestroy, Optional, EventEmitter, ViewChild, SimpleChanges, Output } from '@angular/core';
import { Component, Input, OnInit, OnChanges, OnDestroy, Optional, EventEmitter, ViewChild, SimpleChanges, Output, ViewEncapsulation } from '@angular/core';
import { Location } from '@angular/common';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Params, Router } from '@angular/router';
@ -55,6 +55,8 @@ const DEFAULT_FOLDER_TO_SHOW = '-my-';
@Component({
selector: 'app-files-component',
templateUrl: './files.component.html',
styleUrls: ['./files.component.scss'],
encapsulation: ViewEncapsulation.None,
providers: [
{ provide: FormRenderingService, useClass: ProcessFormRenderingService }
]

2
demo-shell/src/app/components/home/home.component.html
View File

@ -6,7 +6,7 @@
</div>
<div class="app-home-start">
<a mat-raised-button class="app-home-docs-button adf-primary-color" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">{{ 'APP.HOME.DOCUMENTATION' | translate}}</a>
<a mat-raised-button color="primary" class="app-home-docs-button" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">{{ 'APP.HOME.DOCUMENTATION' | translate}}</a>
</div>
</div>
</header>

2
demo-shell/src/app/components/login/login.component.scss
View File

@ -1,4 +1,3 @@
@mixin app-login-component-theme($theme) {
.app-setting-button.mat-fab.mat-accent {
position: absolute;
right: 10px;
@ -48,4 +47,3 @@
.app-settings ::ng-deep .mat-slide-toggle-thumb-container {
cursor: pointer;
}
}

6
demo-shell/src/app/components/login/login.component.ts
View File

@ -15,13 +15,15 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { LogService } from '@alfresco/adf-core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html'
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class LoginComponent {

4
demo-shell/src/app/components/logout/logout.component.html
View File

@ -6,11 +6,11 @@
</div>
<div class="app-logout-login">
<a mat-raised-button class="app-logout-docs-button adf-primary-color"
<a mat-raised-button color="primary" class="app-logout-docs-button"
href="#/login">{{ 'APP.LOGOUT.LOGIN' | translate}}</a>
</div>
<div class="app-logout-home">
<a mat-raised-button class="app-logout-docs-button adf-primary-color"
<a mat-raised-button color="primary" class="app-logout-docs-button"
href="/">{{ 'APP.LOGOUT.HOME' | translate}}</a>
</div>
</div>

2
demo-shell/src/app/components/notifications/notifications.component.ts
View File

@ -132,7 +132,7 @@ export class NotificationsComponent implements OnInit, OnDestroy {
}
quickInfo() {
this.notificationService.showInfo(this.message);
this.notificationService.showInfo(this.message, 'Agree');
}
quickWarning() {

22
demo-shell/src/custom-style-dev.scss
View File

@ -1,16 +1,7 @@
@import './app/components/app-layout/app-layout.component.scss';
@import './app/components/files/files.component.scss';
@import './app/components/login/login.component.scss';
@import '../../lib/content-services/src/lib/styles/index';
@import '../../lib/process-services/src/lib/styles/index';
@import '../../lib/insights/src/lib/styles/index';
@import '../../lib/core/styles/index';
@import '../../lib/process-services-cloud/src/lib/styles/index';
@import '~@angular/material/theming';
@import '../../lib/core/styles/index';
@include mat-core($alfresco-typography);
$primary: mat-palette($alfresco-accent-orange);
@ -19,15 +10,6 @@ $warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include app-layout-theme($theme);
@include app-file-component-theme($theme);
@include app-login-component-theme($theme);
@include adf-content-services-theme($theme);
@include adf-process-services-theme($theme);
@include adf-process-services-cloud-theme($theme);
@include adf-insights-theme($theme);
@include adf-core-theme($theme);
body, html {

20
demo-shell/src/custom-style.scss
View File

@ -1,15 +1,7 @@
@import './app/components/app-layout/app-layout.component.scss';
@import './app/components/files/files.component.scss';
@import './app/components/login/login.component.scss';
@import '~@alfresco/adf-content-services/theming';
@import '~@alfresco/adf-process-services/theming';
@import '~@alfresco/adf-process-services-cloud/theming';
@import '~@alfresco/adf-insights/theming';
@import '~@alfresco/adf-core/theming';
@import '~@angular/material/theming';
@import '~@alfresco/adf-core/theming';
@include mat-core($alfresco-typography);
$primary: mat-palette($alfresco-accent-orange);
@ -18,14 +10,6 @@ $warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include app-layout-theme($theme);
@include app-file-component-theme($theme);
@include app-login-component-theme($theme);
@include adf-content-services-theme($theme);
@include adf-process-services-theme($theme);
@include adf-process-services-cloud-theme($theme);
@include adf-insights-theme($theme);
@include adf-core-theme($theme);
body, html {

7
docs/user-guide/theming.md
View File

@ -70,9 +70,6 @@ When you want more customization than a pre-built theme offers, you can create y
/*
* Include only packages that you are using (and core by default)
*/
@import '~@alfresco/adf-content-services/theming';
@import '~@alfresco/adf-process-services/theming';
@import '~@alfresco/adf-insights/theming';
@import '~@alfresco/adf-core/theming';
@import '~@angular/material/theming';
@ -86,9 +83,6 @@ $theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include adf-content-services-theme($theme);
@include adf-process-services-theme($theme);
@include adf-insights-theme($theme);
@include adf-core-theme($theme);
```
@ -134,7 +128,6 @@ Any component with the `add-dark-theme` class will use the dark theme, while ot
.adf-hide-small // Display none vieweport <960px
.adf-hide-xsmall // Display none vieweport <600px
.adf-primary-color // Primary color
.accent-color // Accent color
.warn-color // Warn color
.primary-contrast-text-color // Default contrast color for primary color

69
lib/content-services/src/lib/aspect-list/aspect-list.component.scss Normal file
View File

@ -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;
}
}
}

1
lib/content-services/src/lib/aspect-list/aspect-list.component.ts
View File

@ -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
})

73
lib/content-services/src/lib/aspect-list/aspect-list.theme.scss
View File

@ -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;
}
}
}
}

140
lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss Normal file
View File

@ -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;
}
}
}

5
lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts
View File

@ -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 {

150
lib/content-services/src/lib/breadcrumb/breadcrumb.theme.scss
View File

@ -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;
}
}
}
}

100
lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss Normal file
View File

@ -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;
}
}

5
lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts
View File

@ -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 {

104
lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.theme.scss
View File

@ -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;
}
}
}

24
lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss Normal file
View File

@ -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);
}
}
}
}

1
lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts
View File

@ -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' }
})

28
lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.theme.scss
View File

@ -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);
}
}
}
}
}

22
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss Normal file
View File

@ -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;
}
}

1
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
View File

@ -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
})

27
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.theme.scss
View File

@ -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;
}
}
}

7
lib/content-services/src/lib/content-metadata/content-metadata.theme.scss
View File

@ -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);
}

197
lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss Normal file
View File

@ -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;
}
}
}
}
}
}
}

1
lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts
View File

@ -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: [{

202
lib/content-services/src/lib/content-node-selector/content-node-selector-panel.theme.scss
View File

@ -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;
}
}
}
}
}
}
}
}

105
lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss Normal file
View File

@ -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);
}
}
}
}

1
lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts
View File

@ -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 {

111
lib/content-services/src/lib/content-node-selector/content-node-selector.theme.scss
View File

@ -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);
}
}
}
}
}

7
lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss Normal file
View File

@ -0,0 +1,7 @@
.adf-name-location-cell {
display: grid;
&-location {
color: var(--theme-text-color);
font-size: 12px;
}
}

1
lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.ts
View File

@ -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' }

11
lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.theme.scss
View File

@ -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;
}
}
}

69
lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss Normal file
View File

@ -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;
}
}

75
lib/content-services/src/lib/content-node-share/content-node-share.dialog.theme.scss
View File

@ -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;
}
}
}

1
lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts
View File

@ -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
})

32
lib/content-services/src/lib/content-type/content-type-dialog.component.scss Normal file
View File

@ -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);
}
}

1
lib/content-services/src/lib/content-type/content-type-dialog.component.ts
View File

@ -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 {

36
lib/content-services/src/lib/content-type/content-type-dialog.theme.scss
View File

@ -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
View 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);
}

40
lib/content-services/src/lib/dialogs/folder.dialog.theme.scss
View File

@ -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);
}
}

1
lib/content-services/src/lib/dialogs/folder.dialog.ts
View File

@ -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 {

200
lib/content-services/src/lib/document-list/components/document-list.component.scss Normal file
View File

@ -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;
}
}
}
}

1
lib/content-services/src/lib/document-list/components/document-list.component.ts
View File

@ -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' }
})

210
lib/content-services/src/lib/document-list/components/document-list.theme.scss
View File

@ -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;
}
}
}
}
}

72
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss Normal file
View File

@ -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;
}
}
}

1
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.ts
View File

@ -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 {

79
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.theme.scss
View File

@ -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;
}
}
}
}

75
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss Normal file
View File

@ -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);
}
}
}

1
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts
View File

@ -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 },

80
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.theme.scss
View File

@ -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);
}
}
}
}

10
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.scss Normal file
View File

@ -0,0 +1,10 @@
.adf {
&-permission-action {
&[disabled] {
opacity: 0.6;
}
&:enabled {
color: var(--theme-primary-color);
}
}
}

1
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts
View File

@ -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
})
/*

16
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.theme.scss
View File

@ -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);
}
}
}
}

94
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss Normal file
View File

@ -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);
}
}

1
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.ts
View File

@ -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 {

93
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.theme.scss
View File

@ -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);
}
}
}

35
lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss Normal file
View File

@ -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;
}
}
}

4
lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts
View File

@ -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 {

39
lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.theme.scss
View File

@ -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;
}
}
}
}

13
lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.scss Normal file
View File

@ -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);
}
}

4
lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.ts
View File

@ -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 {

17
lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.theme.scss
View File

@ -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);
}
}
}

9
lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.scss Normal file
View File

@ -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;
}
}

1
lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.ts
View File

@ -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' }
})

13
lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.theme.scss
View File

@ -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;
}
}
}

42
lib/content-services/src/lib/search/components/search-control.component.scss Normal file
View File

@ -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;
}
}
}

1
lib/content-services/src/lib/search/components/search-control.component.ts
View File

@ -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' }
})

45
lib/content-services/src/lib/search/components/search-control.theme.scss
View File

@ -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;
}
}
}
}

87
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss Normal file
View File

@ -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);
}
}

1
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.ts
View File

@ -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 {

92
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.theme.scss
View File

@ -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);
}
}
}

58
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss Normal file
View File

@ -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);
}
}

1
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts
View File

@ -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 {

66
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.theme.scss
View File

@ -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);
}
}
}

34
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss Normal file
View File

@ -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;
}
}
}

6
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.ts
View File

@ -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()

39
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.theme.scss
View File

@ -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;
}
}
}
}

73
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss Normal file
View File

@ -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;
}

1
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts
View File

@ -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 {

79
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.theme.scss
View File

@ -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;
}
}

11
lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss Normal file
View File

@ -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);
}
}

1
lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts
View File

@ -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' }
})

15
lib/content-services/src/lib/search/components/search-filter/search-filter.theme.scss
View File

@ -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);
}
}
}

47
lib/content-services/src/lib/search/components/search-form/search-form.component.scss Normal file
View File

@ -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;
}
}
}

1
lib/content-services/src/lib/search/components/search-form/search-form.component.ts
View File

@ -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 {

49
lib/content-services/src/lib/search/components/search-form/search-form.theme.scss
View File

@ -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;
}
}
}
}

5
lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss Normal file
View File

@ -0,0 +1,5 @@
.adf-search-sorting-picker {
.mat-icon-button {
color: var(--theme-text-color);
}
}

1
lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts
View File

@ -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' }
})

9
lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.theme.scss
View File

@ -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);
}
}
}

67
lib/content-services/src/lib/styles/_index.scss
View File

@ -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);
}

22
lib/content-services/src/lib/tag/tag-actions.component.html
View File

@ -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 }}"
<input
id="new-tag-text"
matInput placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
type="text"
(keypress)="cleanErrorMsg()"
[(ngModel)]="newTagName"
id="new-tag-text"/>
/>
<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>

2
lib/content-services/src/lib/tag/tag-actions.component.scss
View File

@ -1,3 +1,4 @@
.adf-tag-node-actions-list {
.adf-full-width {
width: 100%;
}
@ -16,3 +17,4 @@
padding: 8px 0;
height: 20px;
}
}

3
lib/content-services/src/lib/tag/tag-actions.component.ts
View File

@ -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 {

2
lib/content-services/src/lib/tag/tag-list.component.html
View File

@ -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>

13
lib/content-services/src/lib/tag/tag-list.component.scss
View File

@ -1,3 +1,4 @@
.adf-tag-list {
.adf-tag-chips-list {
display: flex;
flex-direction: column;
@ -6,11 +7,20 @@
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 {
@ -18,3 +28,4 @@
display: flex;
justify-content: center;
}
}

Some files were not shown because too many files have changed in this diff Show More