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

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

@@ -1,69 +1,65 @@
@mixin app-layout-theme($theme) {
$primary: map-get($theme, primary);
$minimumAppWidth: 320px;
@media screen and (max-width: 599px) {
app-search-bar {
width: 150px;
}
}
@media screen and (max-width: 350px) {
app-search-bar {
width: 100px;
}
}
adf-file-uploading-dialog {
z-index: 1100;
}
.app-layout {
display: flex;
flex: 1;
min-width: $minimumAppWidth;
height: 100%;
.app-sidenav-link--active {
color: mat-color($primary);
}
.app-sidenav-link {
.mat-list-text {
font-size: 14px;
white-space: nowrap;
min-width: 120px;
padding: 0 10px;
}
}
.mat-nav-list .mat-list-item.app-sidenav-link {
height: 40px;
}
&-menu-spacer {
flex: 1 1 auto;
}
}
@media screen and (max-width: 959px) {
.app-menu {
padding-top: 0;
}
}
@media screen and (max-width: 599px) {}
mat-sidenav-content > div {
display: flex;
height: 100%;
> div {
flex: auto;
}
}
[dir='rtl'] .app-sidenav-link__expand-button {
transform: rotateY(180deg);
@media screen and (max-width: 599px) {
app-search-bar {
width: 150px;
}
}
@media screen and (max-width: 350px) {
app-search-bar {
width: 100px;
}
}
adf-file-uploading-dialog {
z-index: 1100;
}
.app-layout {
display: flex;
flex: 1;
min-width: 320px;
height: 100%;
.app-sidenav-link--active {
color: var(--theme-primary-color);
}
.app-sidenav-link {
.mat-list-text {
font-size: 14px;
white-space: nowrap;
min-width: 120px;
padding: 0 10px;
}
}
.mat-nav-list .mat-list-item.app-sidenav-link {
height: 40px;
}
&-menu-spacer {
flex: 1 1 auto;
}
}
@media screen and (max-width: 959px) {
.app-menu {
padding-top: 0;
}
}
@media screen and (max-width: 599px) {}
mat-sidenav-content > div {
display: flex;
height: 100%;
> div {
flex: auto;
}
}
[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 {

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

@@ -1,95 +1,93 @@
@mixin app-file-component-theme($theme) {
.app-container {
margin: 10px !important;
}
@media screen and (max-width: 599px) {
.app-container {
margin: 10px !important;
margin: 0;
}
@media screen and (max-width: 599px) {
.app-container {
margin: 0;
}
.app-show-versions-button.mat-icon-button {
display: none;
}
}
.app-error-message {
text-align: left;
}
.app-error-message--text {
color: #d50000;
}
.app-document-list-container {
min-height: 400px;
.app-datatable-list {
min-height: 400px;
}
}
.adf-datatable-card .app-lock-button {
top: -10px;
position: absolute;
}
.app-site-container-style {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
min-width: 200px;
}
.app-content-service-settings {
padding: 16px;
}
.app-manage-versions-sidebar {
width: 360px !important;
& .app-info-drawer-layout-header {
display: none !important;
}
}
.app-no-result__empty_doc_lib {
width: 565px;
height: 161px;
object-fit: contain;
margin-top: 17px;
}
.app-empty_template {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.app-no-result-message {
height: 32px;
opacity: 0.26;
font-size: 24px;
line-height: 1.33;
letter-spacing: -1px;
}
.app-container-recent {
mat-icon {
margin-left: 20px;
}
.app-empty-list__block {
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
}
.adf-preselect-nodes-input {
width: 100%;
.app-show-versions-button.mat-icon-button {
display: none;
}
}
.app-error-message {
text-align: left;
}
.app-error-message--text {
color: #d50000;
}
.app-document-list-container {
min-height: 400px;
.app-datatable-list {
min-height: 400px;
}
}
.adf-datatable-card .app-lock-button {
top: -10px;
position: absolute;
}
.app-site-container-style {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
min-width: 200px;
}
.app-content-service-settings {
padding: 16px;
}
.app-manage-versions-sidebar {
width: 360px !important;
& .app-info-drawer-layout-header {
display: none !important;
}
}
.app-no-result__empty_doc_lib {
width: 565px;
height: 161px;
object-fit: contain;
margin-top: 17px;
}
.app-empty_template {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.app-no-result-message {
height: 32px;
opacity: 0.26;
font-size: 24px;
line-height: 1.33;
letter-spacing: -1px;
}
.app-container-recent {
mat-icon {
margin-left: 20px;
}
.app-empty-list__block {
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
}
.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>

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

@@ -1,51 +1,49 @@
@mixin app-login-component-theme($theme) {
.app-setting-button.mat-fab.mat-accent {
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
}
.app-setting-button.mat-fab.mat-accent {
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
}
.app-settings {
border-radius: 8px;
position: absolute;
background-color: papayawhip;
color: cadetblue;
left: 10px;
top: 10px;
z-index: 1;
}
.app-settings {
border-radius: 8px;
position: absolute;
background-color: papayawhip;
color: cadetblue;
left: 10px;
top: 10px;
z-index: 1;
}
.app-toggle {
width: auto;
margin: 5px;
padding: 5px;
}
.app-toggle {
width: auto;
margin: 5px;
padding: 5px;
}
.app-mobile-settings, .app-mobile-setting-button {
.app-mobile-settings, .app-mobile-setting-button {
display: none;
}
@media screen and (max-width: 959px) {
.app-settings, .app-setting-button.mat-fab.mat-accent {
display: none;
}
@media screen and (max-width: 959px) {
.app-settings, .app-setting-button.mat-fab.mat-accent {
display: none;
}
.app-mobile-settings, .app-mobile-setting-button {
display: block;
}
.app-mobile-setting-button {
width: 100%;
}
.app-mobile-settings {
padding-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.app-mobile-settings, .app-mobile-setting-button {
display: block;
}
.app-settings ::ng-deep .mat-slide-toggle-thumb-container {
cursor: pointer;
.app-mobile-setting-button {
width: 100%;
}
.app-mobile-settings {
padding-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
}
.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 {