Skip to content

Commit

Permalink
[AAE-5637] Remove SCSS mixins and use CSS variables (#7250)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@DenysVuika
DenysVuika committed Sep 29, 2021
1 parent 8113b9b commit 6f968f7
Show file tree
Hide file tree
Showing 335 changed files with 7,637 additions and 8,273 deletions.
94 changes: 45 additions & 49 deletions 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: 599px) {
app-search-bar {
width: 150px;
}
}

@media screen and (max-width: 350px) {
app-search-bar {
width: 100px;
}
@media screen and (max-width: 350px) {
app-search-bar {
width: 100px;
}
}

adf-file-uploading-dialog {
z-index: 1100;
}
adf-file-uploading-dialog {
z-index: 1100;
}

.app-layout {
display: flex;
flex: 1;
min-width: $minimumAppWidth;
height: 100%;
.app-layout {
display: flex;
flex: 1;
min-width: 320px;
height: 100%;

.app-sidenav-link--active {
color: mat-color($primary);
}
.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;
}
.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;
}
.mat-nav-list .mat-list-item.app-sidenav-link {
height: 40px;
}

&-menu-spacer {
flex: 1 1 auto;
}
&-menu-spacer {
flex: 1 1 auto;
}
}

@media screen and (max-width: 959px) {
.app-menu {
padding-top: 0;
}
@media screen and (max-width: 959px) {
.app-menu {
padding-top: 0;
}
}

@media screen and (max-width: 599px) {}
@media screen and (max-width: 599px) {}

mat-sidenav-content > div {
display: flex;
height: 100%;
mat-sidenav-content > div {
display: flex;
height: 100%;

> div {
flex: auto;
}
> div {
flex: auto;
}
}

[dir='rtl'] .app-sidenav-link__expand-button {
transform: rotateY(180deg);
}
[dir='rtl'] .app-sidenav-link__expand-button {
transform: rotateY(180deg);
}
5 changes: 2 additions & 3 deletions demo-shell/src/app/components/app-layout/app-layout.component.ts
View file
Expand Up @@ -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 {
Expand Down
142 changes: 70 additions & 72 deletions 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-show-versions-button.mat-icon-button {
display: none;
}
}

.app-error-message {
text-align: left;
}
.app-error-message {
text-align: left;
}

.app-error-message--text {
color: #d50000;
}
.app-error-message--text {
color: #d50000;
}

.app-document-list-container {
min-height: 400px;
.app-document-list-container {
min-height: 400px;

.app-datatable-list {
min-height: 400px;
}
.app-datatable-list {
min-height: 400px;
}
}

.adf-datatable-card .app-lock-button {
top: -10px;
position: absolute;
}
.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-site-container-style {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
min-width: 200px;
}

.app-content-service-settings {
padding: 16px;
}
.app-content-service-settings {
padding: 16px;
}

.app-manage-versions-sidebar {
width: 360px !important;
.app-manage-versions-sidebar {
width: 360px !important;

& .app-info-drawer-layout-header {
display: none !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-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-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-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;
}
.app-container-recent {
mat-icon {
margin-left: 20px;
}

.adf-preselect-nodes-input {
width: 100%;
.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 changes: 3 additions & 1 deletion demo-shell/src/app/components/files/files.component.ts
View file
Expand Up @@ -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';
Expand Down Expand Up @@ -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 }
]
Expand Down
2 changes: 1 addition & 1 deletion demo-shell/src/app/components/home/home.component.html
View file
Expand Up @@ -6,7 +6,7 @@ <h2>{{ 'APP.HOME.TITLE' | translate}}</h2>
</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>

0 comments on commit 6f968f7

Please sign in to comment.