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

[ADF-4323] Add style fixes from ACA (#4546)

Browse Source 
* [ADF-4323] add style fix for adf-search-sorting-picker

- moved from ACA

* [ADF-4323] use Flex Layout's media query mixin

* [ADF-4323] add style fix for adf-pagination

- moved from ACA

* [ADF-4323] add style fix for adf-version-manager

- which fixed issue [ACA-1750]

* [ADF-4323] remove not used property

* [ADF-4323] remove extra bottom-border

* [ADF-4323] upload-drag-area refactor to scss

* [ADF-4323] add style fix for adf file upload

- from ACA

* [ADF-4323] add style fix for adf-info-drawer

- from ACA

* [ADF-4323] add style fix for adf-toolbar

- from ACA

* [ADF-4323] add style fix for adf-sidenav-layout

- from ACA

* [ADF-4323] add style fix for adf-search-filter

- from ACA

* [ADF-4323] add style fix for adf-upload-drag-area

- from ACA

* [ADF-4323] add style fix for adf-info-drawer

- from ACA

* [ADF-4323] move style fix for adf-manage-versions from demo-shell

* [ADF-4323] use Flex Layout's media query mixin

* [ADF-4323] small fix to remove scrolling

* [ADF-4323] add adf-sidenav-layout host element class

* [ADF-4323] change 'inline' class name to 'adf-toolbar--inline'

- css lint was failing because of old naming

* [ADF-4323] set pagination empty state styling

* [ADF-4323] set pagination border to none
This commit is contained in:
Suzana Dirla
2019-04-05 16:05:21 +03:00
committed by Eugenio Romano
parent ec9d2785fa
commit e656cc6977
20 changed files with 311 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
lib/core/info-drawer/info-drawer-layout.component.scss
View File

@@ -5,11 +5,17 @@
$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%;
display: block;
background-color: $adf-info-drawer-layout-background-color;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
@@ -61,6 +67,26 @@
> *: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;
}
}
}
}
}
}

44
lib/core/layout/components/sidenav-layout/sidenav-layout.component.html
View File

@@ -1,29 +1,27 @@
<div class="adf-sidenav-layout">
<ng-container *ngIf="!isHeaderInside">
<ng-container class="adf-sidenav-layout-outer-header"
*ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
</ng-container>
<ng-container *ngIf="!isHeaderInside">
<ng-container class="adf-sidenav-layout-outer-header"
*ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
</ng-container>
<adf-layout-container #container
[position]="position"
[sidenavMin]="sidenavMin"
[sidenavMax]="sidenavMax"
[mediaQueryList]="mediaQueryList"
[hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav"
data-automation-id="adf-layout-container"
class="adf-layout__content">
<adf-layout-container #container
[position]="position"
[sidenavMin]="sidenavMin"
[sidenavMax]="sidenavMax"
[mediaQueryList]="mediaQueryList"
[hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav"
data-automation-id="adf-layout-container"
class="adf-layout__content">
<ng-container app-layout-navigation
*ngTemplateOutlet="navigationTemplate; context:templateContext"></ng-container>
<ng-container app-layout-navigation
*ngTemplateOutlet="navigationTemplate; context:templateContext"></ng-container>
<ng-container app-layout-content>
<ng-container *ngIf="isHeaderInside">
<ng-container *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
</ng-container>
<ng-container *ngTemplateOutlet="contentTemplate; context:templateContext"></ng-container>
<ng-container app-layout-content>
<ng-container *ngIf="isHeaderInside">
<ng-container *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
</ng-container>
</adf-layout-container>
</div>
<ng-container *ngTemplateOutlet="contentTemplate; context:templateContext"></ng-container>
</ng-container>
</adf-layout-container>
<ng-template #emptyTemplate></ng-template>

30
lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss
View File

@@ -1,18 +1,34 @@
:host {
display: flex;
flex: 1;
@mixin adf-sidenav-layout-theme($theme) {
$adf-sidenav-max: 300px !default;
.adf-sidenav-layout {
@include flex-column;
width: 100%;
display: flex;
flex-direction: column;
.adf-layout__content {
flex: 1 1 auto;
}
router-outlet {
flex: 0 0;
}
@include layout-bp(lt-sm) {
.mat-drawer {
width: calc(-50px + 100vw) !important;
max-width: $adf-sidenav-max !important;
}
}
.mat-drawer-content {
@include flex-column;
overflow: auto;
}
}
router-outlet {
flex: 0 0;
.mat-drawer-content > div,
.mat-drawer-content > div > div {
@include flex-column;
overflow: auto;
}
}

18
lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
View File

@@ -15,7 +15,19 @@
* limitations under the License.
*/
import { Component, ContentChild, Input, Output, OnInit, AfterViewInit, ViewChild, OnDestroy, TemplateRef, EventEmitter } from '@angular/core';
import {
Component,
ContentChild,
Input,
Output,
OnInit,
AfterViewInit,
ViewChild,
OnDestroy,
TemplateRef,
EventEmitter,
ViewEncapsulation
} from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';
import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
@@ -25,7 +37,9 @@ import { BehaviorSubject, Observable } from 'rxjs';
@Component({
selector: 'adf-sidenav-layout',
templateUrl: './sidenav-layout.component.html',
styleUrls: ['./sidenav-layout.component.scss']
styleUrls: ['./sidenav-layout.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-sidenav-layout' }
})
export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy {

44
lib/core/pagination/pagination.component.scss
View File

@@ -1,10 +1,11 @@
@mixin adf-pagination-theme($theme) {
$foreground: map-get($theme, foreground);
$adf-pagination--height: 48px;
$adf-pagination--icon-button-size: 32px;
$adf-pagination--border: 1px solid mat-color($foreground, text, 0.07);
$adf-pagination--height: 48px !default;
$adf-pagination--icon-button-size: 32px !default;
$adf-pagination--border: none !default;
$adf-pagination__empty--height: 48px !default;
$adf-pagination__empty--border: none !default;
.adf-pagination {
display: flex;
@@ -33,42 +34,24 @@
}
}
@media (max-width: 500px) {
@include layout-bp(lt-sm) {
& {
flex-wrap: wrap;
padding-bottom: 24px;
padding-top: 8px;
padding: 0 16px;
justify-content: space-between;
}
&__range-block.adf-pagination__block:first-child {
order: 1;
flex: 0 0 auto;
box-sizing: border-box;
padding-left: 16px;
justify-content: flex-start;
}
&__range-block,
&__perpage-block {
order: 3;
box-sizing: border-box;
padding-left: 16px;
justify-content: flex-start;
display: none;
}
&__actualinfo-block {
order: 2;
box-sizing: border-box;
padding-right: 16px;
justify-content: flex-end;
border-right: none;
}
&__controls-block {
order: 4;
box-sizing: border-box;
padding-right: 16px;
justify-content: flex-end;
padding-right: 0;
}
}
@@ -96,6 +79,11 @@
max-height: 250px !important;
}
&.adf-pagination__empty {
border-top: $adf-pagination__empty--border;
height: $adf-pagination__empty--height;
}
button[mat-icon-button] {
width: $adf-pagination--icon-button-size;
height: $adf-pagination--icon-button-size;

2
lib/core/styles/_index.scss
View File

@@ -26,6 +26,7 @@
@import '../comments/comment-list.component';
@import '../comments/comments.component';
@import '../layout/components/layout-container/layout-container.component';
@import '../layout/components/sidenav-layout/sidenav-layout.component';
@import '../templates/empty-content/empty-content.component';
@import '../templates/error-content/error-content.component';
@import '../buttons-menu/buttons-menu.component';
@@ -64,4 +65,5 @@
@include adf-header-layout-theme($theme);
@include adf-login-dialog-theme($theme);
@include adf-login-dialog-panel-theme($theme);
@include adf-sidenav-layout-theme($theme);
}

1
lib/core/styles/_theming.scss
View File

@@ -1,4 +1,5 @@
@import '~@angular/material/theming';
@import '~@angular/flex-layout/mq';
@import './colors';
@import './variables';
@import './mixins';

34
lib/core/toolbar/toolbar.component.scss
View File

@@ -1,14 +1,14 @@
@mixin adf-toolbar-theme($theme) {
$foreground: map-get($theme, foreground);
$adf-toolbar-height: 48px;
$adf-toolbar-font-size: 14px;
.adf-toolbar--spacer {
flex: 1 1 auto;
}
$adf-toolbar-height: 48px !default;
$adf-toolbar-single-row-height: 64px !default;
$adf-toolbar-font-size: 14px !default;
$adf-toolbar-padding: 16px !default;
.adf-toolbar {
&--spacer {
flex: 1 1 auto;
}
&-title {
overflow: hidden;
@@ -24,6 +24,26 @@
font-size: $adf-toolbar-font-size;
white-space: normal;
}
.mat-toolbar-single-row {
padding: 0 $adf-toolbar-padding;
height: $adf-toolbar-single-row-height;
}
&.adf-toolbar--inline {
.mat-toolbar {
background-color: inherit;
border: none !important;
padding: 0;
}
}
}
.adf-viewer {
.adf-toolbar {
.mat-toolbar {
color: mat-color($foreground, text, 0.54);
}
}
}
}