inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

style and theming fixes (#428)

Browse Source 
* fix generic error text and styles

* search input layout and style fixes

* settings theme

* layout theme support

* current user theme

* theming support for header component

* disable "use-host-property-decorator" tslint rule

* sorting picker button theme
This commit is contained in:
Denys Vuika
2018-06-17 16:16:38 +01:00
committed by GitHub
parent 2c6136ef59
commit e2eed9b71c
34 changed files with 385 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/header/header.component.html
View File

@@ -16,9 +16,9 @@
<div class="adf-toolbar--spacer"></div>
<app-search-input></app-search-input>
<aca-search-input></aca-search-input>
<adf-toolbar-divider></adf-toolbar-divider>
<app-current-user></app-current-user>
<aca-current-user></aca-current-user>
</adf-toolbar>

55
src/app/components/header/header.component.scss
View File

@@ -1,55 +0,0 @@
@import 'variables';
$app-menu-height: 64px;
.app-menu {
height: $app-menu-height;
&.adf-toolbar {
.mat-toolbar {
background-color: inherit;
font-family: inherit;
min-height: $app-menu-height;
height: $app-menu-height;
.mat-toolbar-layout {
height: $app-menu-height;
.mat-toolbar-row {
height: $app-menu-height;
}
}
}
.adf-toolbar-divider {
margin-left: 5px;
margin-right: 5px;
& > div {
background-color: $alfresco-white !important;
}
}
.adf-toolbar-title {
color: $alfresco-white;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
.app-menu__title {
width: 100px;
height: 50px;
margin-left: 40px;
display: flex;
justify-content: center;
align-items: stretch;
&> img {
width: 100%;
object-fit: contain;
}
}
}

59
src/app/components/header/header.component.theme.scss Normal file
View File

@@ -0,0 +1,59 @@
@mixin aca-header-theme($theme) {
$background: map-get($theme, background);
$app-menu-height: 64px;
.aca-header {
.app-menu {
height: $app-menu-height;
&.adf-toolbar {
.mat-toolbar {
background-color: inherit;
font-family: inherit;
min-height: $app-menu-height;
height: $app-menu-height;
.mat-toolbar-layout {
height: $app-menu-height;
.mat-toolbar-row {
height: $app-menu-height;
}
}
}
.adf-toolbar-divider {
margin-left: 5px;
margin-right: 5px;
& > div {
background-color: mat-color($background, card);
}
}
.adf-toolbar-title {
color: mat-color($background, card);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
.app-menu__title {
width: 100px;
height: 50px;
margin-left: 40px;
display: flex;
justify-content: center;
align-items: stretch;
&> img {
width: 100%;
object-fit: contain;
}
}
}
}
}

6
src/app/components/header/header.component.ts
View File

@@ -30,10 +30,10 @@ import { AppStore } from '../../store/states/app.state';
import { selectHeaderColor, selectAppName, selectLogoPath } from '../../store/selectors/app.selectors';
@Component({
selector: 'app-header',
selector: 'aca-header',
templateUrl: './header.component.html',
styleUrls: [ './header.component.scss' ],
encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.None,
host: { class: 'aca-header' }
})
export class HeaderComponent {
@Output() menu: EventEmitter<any> = new EventEmitter<any>();