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

93
lib/core/info-drawer/info-drawer-layout.component.scss Normal file
View File

@@ -0,0 +1,93 @@
@import '../styles/mixins';
$adf-info-drawer-layout-title-font-size: 20px !default;
$adf-info-drawer-icon-size: 48px !default;
.adf {
&-info-drawer {
@include flex-column;
}
&-info-drawer-layout {
@include flex-column;
overflow: auto;
width: 100%;
background-color: var(--theme-background-color);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
& .mat-tab-label {
font-weight: bold;
text-align: left;
color: var(--theme-accent-color);
text-transform: uppercase;
opacity: 1;
&-active {
color: var(--theme-primary-color);
}
}
&-header {
padding: 13px 0 0 23px;
display: flex;
justify-content: space-between;
margin-bottom: 40px;
&-buttons {
padding-right:18px;
mat-icon {
cursor: pointer;
}
}
&-title {
width: 197px;
height: 32px;
font-size: $adf-info-drawer-layout-title-font-size;
line-height: 1.6;
letter-spacing: -0.5px;
text-align: left;
color: var(--theme-text-color);
& > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
&-content {
padding: 10px;
> * {
margin-bottom: 20px;
display: block;
}
> *:last-child {
margin-bottom: 0;
}
.adf-info-drawer-tabs .mat-tab-body-content {
.adf-manage-versions-empty,
.adf-manage-versions-no-permission {
margin: 0;
padding: $adf-info-drawer-icon-size/2;
color: var(--theme-text-color);
text-align: center;
display: flex;
flex-direction: column;
&-icon {
width: $adf-info-drawer-icon-size;
height: $adf-info-drawer-icon-size;
font-size: $adf-info-drawer-icon-size;
margin: 0 auto $adf-info-drawer-icon-size/2;
display: block;
}
}
}
}
}
}

1
lib/core/info-drawer/info-drawer-layout.component.ts
View File

@@ -20,6 +20,7 @@ import { Component, Directive, Input, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'adf-info-drawer-layout',
templateUrl: './info-drawer-layout.component.html',
styleUrls: ['./info-drawer-layout.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { 'class': 'adf-info-drawer-layout' }
})

99
lib/core/info-drawer/info-drawer-layout.theme.scss
View File

@@ -1,99 +0,0 @@
@mixin adf-info-drawer-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$adf-info-drawer-layout-background-color: mat-color($background, background) !default;
$adf-info-drawer-layout-title-color: mat-color($foreground, text, 0.54) !default;
$adf-info-drawer-layout-title-font-size: 20px !default;
$adf-info-drawer-icon-size: 48px !default;
.adf {
&-info-drawer {
@include flex-column;
}
&-info-drawer-layout {
@include flex-column;
overflow: auto;
width: 100%;
background-color: $adf-info-drawer-layout-background-color;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
& .mat-tab-label {
font-weight: bold;
text-align: left;
color: mat-color($accent);
text-transform: uppercase;
opacity: 1;
&-active {
color: mat-color($primary);
}
}
&-header {
padding: 13px 0 0 23px;
display: flex;
justify-content: space-between;
margin-bottom: 40px;
&-buttons {
padding-right:18px;
mat-icon {
cursor: pointer;
}
}
&-title {
width: 197px;
height: 32px;
font-size: $adf-info-drawer-layout-title-font-size;
line-height: 1.6;
letter-spacing: -0.5px;
text-align: left;
color: $adf-info-drawer-layout-title-color;
& > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
&-content {
padding: 10px;
> * {
margin-bottom: 20px;
display: block;
}
> *:last-child {
margin-bottom: 0;
}
.adf-info-drawer-tabs .mat-tab-body-content {
.adf-manage-versions-empty,
.adf-manage-versions-no-permission {
margin: 0;
padding: $adf-info-drawer-icon-size/2;
color: mat-color($foreground, text, 0.54);
text-align: center;
display: flex;
flex-direction: column;
&-icon {
width: $adf-info-drawer-icon-size;
height: $adf-info-drawer-icon-size;
font-size: $adf-info-drawer-icon-size;
margin: 0 auto $adf-info-drawer-icon-size/2;
display: block;
}
}
}
}
}
}
}

62
lib/core/info-drawer/info-drawer.component.spec.ts
View File

@@ -20,7 +20,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatTabChangeEvent } from '@angular/material/tabs';
import { By } from '@angular/platform-browser';
import { InfoDrawerComponent } from './info-drawer.component';
import { setupTestBed } from '../testing/setup-test-bed';
import { of } from 'rxjs';
import { TranslateService, TranslateModule } from '@ngx-translate/core';
import { CoreTestingModule } from '../testing/core.testing.module';
@@ -31,14 +30,13 @@ describe('InfoDrawerComponent', () => {
let fixture: ComponentFixture<InfoDrawerComponent>;
let translateService: TranslateService;
setupTestBed({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
});
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
});
translateService = TestBed.inject(TranslateService);
spyOn(translateService, 'get').and.callFake((key) => of(key));
@@ -89,17 +87,16 @@ describe('Custom InfoDrawer', () => {
let component: CustomInfoDrawerComponent;
let translateService: TranslateService;
setupTestBed({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
],
declarations: [
CustomInfoDrawerComponent
]
});
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
],
declarations: [
CustomInfoDrawerComponent
]
});
translateService = TestBed.inject(TranslateService);
spyOn(translateService, 'get').and.callFake((key) => of(key));
@@ -108,6 +105,10 @@ describe('Custom InfoDrawer', () => {
component = fixture.componentInstance;
});
afterEach(() => {
fixture.destroy();
});
it('should render the title', () => {
fixture.detectChanges();
const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
@@ -119,7 +120,7 @@ describe('Custom InfoDrawer', () => {
fixture.detectChanges();
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
expect(tab.length).toBe(1);
expect(tab[0].nativeElement.innerText).toContain('Tab1');
expect(tab[0].nativeElement.innerText).toContain('TAB1');
});
it('should select the tab 2 (index 1)', () => {
@@ -127,7 +128,7 @@ describe('Custom InfoDrawer', () => {
fixture.detectChanges();
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
expect(tab.length).toBe(1);
expect(tab[0].nativeElement.innerText).toContain('Tab2');
expect(tab[0].nativeElement.innerText).toContain('TAB2');
});
it('should render a tab with icon', () => {
@@ -135,7 +136,7 @@ describe('Custom InfoDrawer', () => {
fixture.detectChanges();
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
expect(tab[0].nativeElement.innerText).not.toBe('Tab3');
expect(tab[0].nativeElement.innerText).toContain('tab-icon');
expect(tab[0].nativeElement.innerText).toContain('TAB-ICON');
});
});
@@ -153,17 +154,16 @@ describe('Header visibility InfoDrawer', () => {
let fixture: ComponentFixture<VisibilityInfoDrawerComponent>;
let component: VisibilityInfoDrawerComponent;
setupTestBed({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
],
declarations: [
VisibilityInfoDrawerComponent
]
});
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
],
declarations: [
VisibilityInfoDrawerComponent
]
});
fixture = TestBed.createComponent(VisibilityInfoDrawerComponent);
fixture.detectChanges();
component = fixture.componentInstance;

3
lib/core/info-drawer/info-drawer.component.ts
View File

@@ -19,7 +19,8 @@ import { Component, ContentChildren, EventEmitter, HostListener, Input, Output,
import { MatTabChangeEvent } from '@angular/material/tabs';
@Component({
selector: 'adf-info-drawer-tab',
template: '<ng-template><ng-content></ng-content></ng-template>'
template: '<ng-template><ng-content></ng-content></ng-template>',
encapsulation: ViewEncapsulation.None
})
export class InfoDrawerTabComponent {
/** The title of the tab (string or translation key). */