inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

* cleanup colors

* remove variables file, fix bugs in animations

* proper ordering of imports, core css vars

* cleanup snackbar and material themes

* tags component

* login component styles

* app login

* toolbar component styles

* breadcrumb styles

* dropdown breadcrumb

* app layout component

* demo shell: files component

* aspect list styles

* content metadata styles

* node selector

* name location cell

* node share dialog

* content type dialog

* folder dialog

* document list

* datatable theme

* pagination theme

* viewer theme

* viewer theme

* user-info theme

* container widget

* dynamic table theme

* form widgets

* form theme

* form renderer

* sidebar menu

* header theme

* info drawer theme

* comment list

* commens and layout container

* sidenav layout

* empty content

* error content

* clipboard theme

* search input

* tooltip card and notification history

* card view theme

* remove unused keys

* add permission dialog

* search and permission dialogs

* version comparison and column themes

* upload drag area and cleanup references

* remove the need for content styles

* insight components

* cleanup insights theme

* process components

* process components

* process cloud themes

* cleanup unsed imports

* cleanup mixins

* update build scripts

* test fixes

* remove fdescribe

* css fixes

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

50
lib/core/viewer/components/img-viewer.component.scss Normal file
View File

@@ -0,0 +1,50 @@
.adf-image-viewer {
width: 100%;
.adf-image-container {
&:focus {
outline-offset: -1px;
outline: 1px solid var(--theme-accent-color-a200);
}
display: flex;
height: 90vh;
align-items: center;
justify-content: center;
img {
max-height: 100%;
max-width: 100%;
}
/* query for Microsoft IE 11*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
img {
height: 100%;
}
}
}
&__toolbar {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
.adf-toolbar .mat-toolbar {
max-height: 48px;
background-color: var(--theme-card-bg-color);
border-width: 0;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
}
.adf-main-toolbar {
display: inline-block;
}
.adf-secondary-toolbar {
display: inline-block;
margin-left: 10px;
}
}
}

1
lib/core/viewer/components/img-viewer.component.ts
View File

@@ -32,6 +32,7 @@ import Cropper from 'cropperjs';
@Component({
selector: 'adf-img-viewer',
templateUrl: './img-viewer.component.html',
styleUrls: ['./img-viewer.component.scss'],
host: { 'class': 'adf-image-viewer' },
encapsulation: ViewEncapsulation.None
})

56
lib/core/viewer/components/img-viewer.theme.scss
View File

@@ -1,56 +0,0 @@
@mixin adf-image-viewer-theme($theme) {
$accent: map-get($theme, accent);
$background: map-get($theme, background);
$viewer-image-outline: 1px solid mat-color($accent, A200) !default;
.adf-image-viewer {
width: 100%;
.adf-image-container {
&:focus {
outline-offset: -1px;
outline: $viewer-image-outline;
}
display: flex;
height: 90vh;
align-items: center;
justify-content: center;
img {
max-height: 100%;
max-width: 100%;
}
/* query for Microsoft IE 11*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
img {
height: 100%;
}
}
}
&__toolbar {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
.adf-toolbar .mat-toolbar {
max-height: 48px;
background-color: mat-color($background, card);
border-width: 0;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
}
.adf-main-toolbar {
display: inline-block;
}
.adf-secondary-toolbar {
display: inline-block;
margin-left: 10px;
}
}
}
}

15
lib/core/viewer/components/pdf-viewer-password-dialog.scss Normal file
View File

@@ -0,0 +1,15 @@
.adf-fill-remaining-space {
flex: 1 1 auto;
}
.adf-full-width {
width: 100%;
}
.adf-dialog-buttons button {
text-transform: uppercase;
}
.adf-dialog-action-button:enabled {
color: var(--theme-primary-color);
}

19
lib/core/viewer/components/pdf-viewer-password-dialog.theme.scss
View File

@@ -1,19 +0,0 @@
@mixin adf-pdf-viewer-password-dialog-theme($theme) {
.adf-fill-remaining-space {
flex: 1 1 auto;
}
.adf-full-width {
width: 100%;
}
$primary: map-get($theme, primary);
.adf-dialog-buttons button {
text-transform: uppercase;
}
.adf-dialog-action-button:enabled {
color: mat-color($primary);
}
}

6
lib/core/viewer/components/pdf-viewer-password-dialog.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, Inject, OnInit } from '@angular/core';
import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FormControl, Validators } from '@angular/forms';
@@ -23,7 +23,9 @@ declare const pdfjsLib: any;
@Component({
selector: 'adf-pdf-viewer-password-dialog',
templateUrl: './pdf-viewer-password-dialog.html'
templateUrl: './pdf-viewer-password-dialog.html',
styleUrls: ['./pdf-viewer-password-dialog.scss'],
encapsulation: ViewEncapsulation.None
})
export class PdfPasswordDialogComponent implements OnInit {
passwordFormControl: FormControl;

30
lib/core/viewer/components/pdf-viewer-thumbnails.component.scss Normal file
View File

@@ -0,0 +1,30 @@
.adf-pdf-thumbnails {
display: block;
overflow: hidden;
overflow-y: auto;
height: 100%;
position: relative;
&__content {
top: 5px;
left: 50%;
height: 0;
position: absolute;
}
&__thumb {
cursor: pointer;
display: block;
width: 91px;
background: var(--theme-background-color);
margin-bottom: 15px;
}
&__thumb:hover {
box-shadow: 0 0 5px 0 var(--theme-text-bold-color);
}
&__thumb--selected {
border: 2px solid var(--theme-accent-color-a200);
}
}

7
lib/core/viewer/components/pdf-viewer-thumbnails.component.spec.ts
View File

@@ -78,8 +78,11 @@ describe('PdfThumbListComponent', () => {
fixture.nativeElement.style.display = 'block';
fixture.nativeElement.style.height = '700px';
fixture.nativeElement.style.overflow = 'scroll';
fixture.debugElement.query(By.css('.adf-pdf-thumbnails__content'))
.nativeElement.style.height = '2000px';
const content = fixture.debugElement.query(By.css('.adf-pdf-thumbnails__content')).nativeElement;
content.style.height = '2000px';
content.style.position = 'unset';
});
it('should render initial rage of items', () => {

1
lib/core/viewer/components/pdf-viewer-thumbnails.component.ts
View File

@@ -28,6 +28,7 @@ import { delay } from 'rxjs/operators';
@Component({
selector: 'adf-pdf-thumbnails',
templateUrl: './pdf-viewer-thumbnails.component.html',
styleUrls: ['./pdf-viewer-thumbnails.component.scss'],
host: { class: 'adf-pdf-thumbnails' },
encapsulation: ViewEncapsulation.None
})

35
lib/core/viewer/components/pdf-viewer-thumbnails.theme.scss
View File

@@ -1,35 +0,0 @@
@mixin adf-pdf-thumbnails-theme($theme) {
$accent: map-get($theme, accent);
$background: map-get($theme, background);
.adf-pdf-thumbnails {
display: block;
overflow: hidden;
overflow-y: auto;
height: 100%;
position: relative;
&__content {
top: 5px;
left: 50%;
height: 0;
position: absolute;
}
&__thumb {
cursor: pointer;
display: block;
width: 91px;
background: mat-color($background, background);
margin-bottom: 15px;
}
&__thumb:hover {
box-shadow: 0 0 5px 0 $black-87-opacity;
}
&__thumb--selected {
border: 2px solid mat-color($accent, A200);
}
}
}

98
lib/core/viewer/components/pdf-viewer.component.scss Normal file
View File

@@ -0,0 +1,98 @@
.adf-viewer-content-container {
width: 100%;
height: 100%;
}
.adf-pdf-viewer {
width: 100%;
height: 100%;
margin: 0;
.adf-loader-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
height:100%;
}
&__thumbnails {
position: relative;
height: 100%;
width: 190px;
background-color: rgba(0, 0, 0, 0.12);
}
.adf-thumbnails-template {
&__container {
display: flex;
flex-direction: column;
height: 100%;
}
&__buttons {
height: 45px;
justify-content: flex-end;
align-items: flex-end;
display: flex;
color: var(--theme-text-color);
}
}
&__container {
display: flex;
height: 100vh;
}
&__content {
flex: 1 1 auto;
position: relative;
}
.adf-loader-item {
margin: auto;
max-height:100px;
max-width:300px;
}
&__toolbar {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
.adf-toolbar .mat-toolbar {
max-height: 48px;
background-color: var(--theme-card-bg-color);
border-width: 0;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
}
&-page-selector {
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
& > input {
border: 1px solid var(--theme-border-color);
background-color: var(--theme-card-bg-color);
color: inherit;
font-size: 14px;
padding: 5px;
height: 24px;
line-height: 24px;
text-align: right;
width: 33px;
margin-right: 4px;
outline-width: 1px;
outline-color: gray;
}
}
}
}

2
lib/core/viewer/components/pdf-viewer.component.ts
View File

@@ -42,7 +42,7 @@ declare const pdfjsViewer: any;
@Component({
selector: 'adf-pdf-viewer',
templateUrl: './pdf-viewer.component.html',
styleUrls: ['./pdf-viewer-host.component.scss'],
styleUrls: ['./pdf-viewer-host.component.scss', './pdf-viewer.component.scss'],
providers: [RenderingQueueServices],
host: { 'class': 'adf-pdf-viewer' },
encapsulation: ViewEncapsulation.None

101
lib/core/viewer/components/pdf-viewer.theme.scss
View File

@@ -1,101 +0,0 @@
@mixin adf-pdf-viewer-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.adf-viewer-content-container {
width: 100%;
}
.adf-pdf-viewer {
width: 100%;
margin: 0;
.adf-loader-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
height:100%;
}
&__thumbnails {
position: relative;
height: 100%;
width: 190px;
background-color: rgba(0, 0, 0, 0.12);
}
.adf-thumbnails-template {
&__container {
display: flex;
flex-direction: column;
height: 100%;
}
&__buttons {
height: 45px;
justify-content: flex-end;
align-items: flex-end;
display: flex;
color: mat-color($foreground, text, 0.54);
}
}
&__container {
display: flex;
height: 100%;
}
&__content {
flex: 1 1 auto;
position: relative;
}
.adf-loader-item {
margin: auto;
max-height:100px;
max-width:300px;
}
&__toolbar {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
.adf-toolbar .mat-toolbar {
max-height: 48px;
background-color: mat-color($background, card);
border-width: 0;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
}
&-page-selector {
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
& > input {
border: 1px solid mat-color($foreground, text, 0.07);
background-color: mat-color($background, card);
color: inherit;
font-size: 14px;
padding: 5px;
height: 24px;
line-height: 24px;
text-align: right;
width: 33px;
margin-right: 4px;
outline-width: 1px;
outline-color: gray;
}
}
}
}
}

6
lib/core/viewer/components/txt-viewer.component.scss Normal file
View File

@@ -0,0 +1,6 @@
.adf-txt-viewer {
background-color: var(--theme-background-color);
overflow: auto;
height: 100%;
width: 100%;
}

1
lib/core/viewer/components/txt-viewer.component.ts
View File

@@ -22,6 +22,7 @@ import { AppConfigService } from './../../app-config/app-config.service';
@Component({
selector: 'adf-txt-viewer',
templateUrl: './txt-viewer.component.html',
styleUrls: ['./txt-viewer.component.scss'],
host: { 'class': 'adf-txt-viewer' },
encapsulation: ViewEncapsulation.None
})

10
lib/core/viewer/components/txt-viewer.theme.scss
View File

@@ -1,10 +0,0 @@
@mixin adf-text-viewer-theme($theme) {
$background: map-get($theme, background);
.adf-txt-viewer {
background-color: mat-color($background, background);
overflow: auto;
height: 100%;
width: 100%;
}
}

9
lib/core/viewer/components/unknown-format/unknown-format.component.scss Normal file
View File

@@ -0,0 +1,9 @@
.adf-viewer__unknown-format-view {
height: 90vh;
text-align: center;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
color: var(--theme-text-fg-color);
}

6
lib/core/viewer/components/unknown-format/unknown-format.component.ts
View File

@@ -15,11 +15,13 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'adf-viewer-unknown-format',
templateUrl: './unknown-format.component.html'
templateUrl: './unknown-format.component.html',
styleUrls: ['./unknown-format.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class UnknownFormatComponent {
}

13
lib/core/viewer/components/unknown-format/unknown-format.theme.scss
View File

@@ -1,13 +0,0 @@
@mixin adf-unknown-viewer-theme($theme) {
$foreground: map-get($theme, foreground);
.adf-viewer__unknown-format-view {
height: 90vh;
text-align: center;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
color: mat-color($foreground, text);
}
}

204
lib/core/viewer/components/viewer.component.scss Normal file
View File

@@ -0,0 +1,204 @@
.adf-full-screen {
width: 100%;
height: 100%;
background-color: var(--theme-card-bg-color);
}
.adf-viewer {
position: absolute;
width: 100%;
height: 100%;
.mat-toolbar {
color: var(--theme-text-color);
.adf-toolbar-title {
width: auto;
}
}
&-main {
width: 0;
}
&__mimeicon {
vertical-align: middle;
height: 18px;
width: 18px;
}
&-toolbar {
.mat-toolbar {
background-color: var(--theme-card-bg-bold-color);
}
}
&__file-title {
text-align: center;
}
&__display-name {
font-size: 16px;
opacity: 0.87;
line-height: 1.5;
letter-spacing: -0.4px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
max-width: 400px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
vertical-align: middle;
color: var(--theme-text-fg-color);
}
&-container {
.adf-viewer-layout-content {
@extend .adf-full-screen;
position: relative;
overflow-y: hidden;
overflow-x: hidden;
z-index: 1;
background-color: var(--theme-background-color);
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
& > div {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
align-items: stretch;
height: 100%;
}
}
.adf-viewer-layout {
@extend .adf-full-screen;
display: flex;
flex-direction: row;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.adf-viewer-content {
@extend .adf-full-screen;
flex: 1;
& > div {
height: 0; // Firefox
}
}
}
&-overlay-container {
.adf-viewer-content {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
}
&-inline-container {
@extend .adf-full-screen;
}
&-content-container {
display: flex;
justify-content: center;
}
&-custom-content {
width: 100vw;
}
&-unknown-content {
align-items: center;
display: flex;
}
&__loading-screen {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 85vh;
.mat-spinner {
margin: 0 auto;
}
}
&__sidebar {
width: 350px;
display: block;
padding: 0;
background-color: var(--theme-background-color);
box-shadow: 0 2px 4px 0 var(--theme-text-fg-shadow-color);
overflow: auto;
&__right {
border-left: 1px solid var(--theme-border-color);
}
&__left {
border-right: 1px solid var(--theme-border-color);
}
}
&__thumbnails {
width: 180px;
display: flex;
flex-direction: column;
padding: 0;
background: #e6e6e6;
.adf-info-drawer-layout {
display: flex;
flex-direction: column;
flex: 1;
background: #e6e6e6;
}
.adf-info-drawer-layout-header {
margin-bottom: 0;
}
.adf-info-drawer-layout-content {
padding: 0;
height: 100%;
overflow: hidden;
}
.adf-info-drawer-content {
height: 100%;
}
.adf-info-drawer-layout-content > *:last-child {
height: 100%;
overflow: hidden;
}
}
&__toolbar {
&-page-scale {
cursor: default;
width: 79px;
height: 24px;
font-size: 14px;
border: 1px solid var(--theme-border-color);
text-align: center;
line-height: 24px;
margin-left: 4px;
margin-right: 4px;
}
}
}

1
lib/core/viewer/components/viewer.component.ts
View File

@@ -48,6 +48,7 @@ import { FileModel } from '../../models';
@Component({
selector: 'adf-viewer',
templateUrl: './viewer.component.html',
styleUrls: ['./viewer.component.scss'],
host: { 'class': 'adf-viewer' },
encapsulation: ViewEncapsulation.None
})

210
lib/core/viewer/components/viewer.theme.scss
View File

@@ -1,210 +0,0 @@
@mixin adf-viewer-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$adf-viewer-background-color: mat-color($background, card);
.adf-full-screen {
width: 100%;
height: 100%;
background-color: $adf-viewer-background-color;
}
.adf-viewer {
position: absolute;
width: 100%;
height: 100%;
.mat-toolbar {
color: mat-color($foreground, text, 0.54);
.adf-toolbar-title {
width: auto;
}
}
&-main {
width: 0;
}
&__mimeicon {
vertical-align: middle;
height: 18px;
width: 18px;
}
&-toolbar {
.mat-toolbar {
background-color: mat-color($background, card, 0.87);
}
}
&__file-title {
text-align: center;
}
&__display-name {
font-size: 16px;
opacity: 0.87;
line-height: 1.5;
letter-spacing: -0.4px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
max-width: 400px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
vertical-align: middle;
color: mat-color($foreground, text);
}
&-container {
.adf-viewer-layout-content {
@extend .adf-full-screen;
position: relative;
overflow-y: hidden;
overflow-x: hidden;
z-index: 1;
background-color: mat-color($background, background);
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
& > div {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
align-items: stretch;
height: 100%;
}
}
.adf-viewer-layout {
@extend .adf-full-screen;
display: flex;
flex-direction: row;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.adf-viewer-content {
@extend .adf-full-screen;
flex: 1;
& > div {
height: 0; // Firefox
}
}
}
&-overlay-container {
.adf-viewer-content {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
}
&-inline-container {
@extend .adf-full-screen;
}
&-content-container {
display: flex;
justify-content: center;
}
&-custom-content {
width: 100vw;
}
&-unknown-content {
align-items: center;
display: flex;
}
&__loading-screen {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 85vh;
.mat-spinner {
margin: 0 auto;
}
}
&__sidebar {
width: 350px;
display: block;
padding: 0;
background-color: mat-color($background, background);
box-shadow: 0 2px 4px 0 mat-color($foreground, text, 0.27);
overflow: auto;
&__right {
border-left: 1px solid mat-color($foreground, text, 0.07);
}
&__left {
border-right: 1px solid mat-color($foreground, text, 0.07);
}
}
&__thumbnails {
width: 180px;
display: flex;
flex-direction: column;
padding: 0;
background: #e6e6e6;
.adf-info-drawer-layout {
display: flex;
flex-direction: column;
flex: 1;
background: #e6e6e6;
}
.adf-info-drawer-layout-header {
margin-bottom: 0;
}
.adf-info-drawer-layout-content {
padding: 0;
height: 100%;
overflow: hidden;
}
.adf-info-drawer-content {
height: 100%;
}
.adf-info-drawer-layout-content > *:last-child {
height: 100%;
overflow: hidden;
}
}
&__toolbar {
&-page-scale {
cursor: default;
width: 79px;
height: 24px;
font-size: 14px;
border: 1px solid mat-color($foreground, text, 0.07);
text-align: center;
line-height: 24px;
margin-left: 4px;
margin-right: 4px;
}
}
}
}