mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
[ADF-4323] Add style fixes from ACA (#4546)
* [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
Eugenio Romano
parent
ec9d2785fa
commit
e656cc6977
@ -76,28 +76,10 @@
|
|||||||
|
|
||||||
.adf-manage-versions-sidebar {
|
.adf-manage-versions-sidebar {
|
||||||
width: 360px !important;
|
width: 360px !important;
|
||||||
color: rgba(0, 0, 0, 0.87);
|
|
||||||
|
|
||||||
.adf-manage-versions-empty,
|
|
||||||
.adf-manage-versions-no-permission {
|
|
||||||
margin: 44px;
|
|
||||||
color: mat-color($foreground, text, 0.54);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&-icon {
|
|
||||||
display: block;
|
|
||||||
font-size: 48px;
|
|
||||||
margin: 0 auto 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .adf-info-drawer-layout-header {
|
& .adf-info-drawer-layout-header {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .adf-info-drawer-layout-content {
|
|
||||||
padding: 10px !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.adf-no-result__empty_doc_lib {
|
.adf-no-result__empty_doc_lib {
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<adf-breadcrumb [root]="'APP_LAYOUT.TRASHCAN' | translate">
|
<adf-breadcrumb [root]="'APP_LAYOUT.TRASHCAN' | translate">
|
||||||
</adf-breadcrumb>
|
</adf-breadcrumb>
|
||||||
|
|
||||||
<adf-toolbar class="inline">
|
<adf-toolbar class="adf-toolbar--inline">
|
||||||
<button
|
<button
|
||||||
mat-icon-button
|
mat-icon-button
|
||||||
[adf-delete]="documentList.selection"
|
[adf-delete]="documentList.selection"
|
||||||
|
|||||||
@ -1,53 +1,66 @@
|
|||||||
.adf-search-filter {
|
@mixin adf-search-filter-theme($theme) {
|
||||||
|
$foreground: map-get($theme, foreground);
|
||||||
|
|
||||||
.adf-checklist {
|
.adf-search-filter {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.mat-checkbox-label {
|
.adf-checklist {
|
||||||
text-overflow: ellipsis;
|
display: flex;
|
||||||
overflow: hidden;
|
flex-direction: column;
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-checkbox-layout {
|
.mat-checkbox-label {
|
||||||
width: 100%;
|
text-overflow: ellipsis;
|
||||||
}
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.adf-facet-label {
|
.mat-checkbox-layout {
|
||||||
text-overflow: ellipsis;
|
width: 100%;
|
||||||
overflow: hidden;
|
}
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-checkbox {
|
.adf-facet-label {
|
||||||
margin: 5px;
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
&.mat-checkbox-checked .mat-checkbox-label {
|
.mat-checkbox {
|
||||||
font-weight: bold;
|
margin: 5px;
|
||||||
|
|
||||||
|
&.mat-checkbox-checked .mat-checkbox-label {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.adf-facet-result-filter {
|
.adf-facet-result-filter {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.adf-facet-buttons {
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
.mat-button {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--topSpace {
|
.adf-facet-buttons {
|
||||||
padding-top: 15px;
|
text-align: right;
|
||||||
|
|
||||||
|
.mat-button {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--topSpace {
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-expansion-panel-header-title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: mat-color($foreground, text, 0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-checkbox-label,
|
||||||
|
.mat-radio-label {
|
||||||
|
color: mat-color($foreground, text, 0.54);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,9 @@
|
|||||||
|
@mixin adf-search-sorting-picker-theme($theme) {
|
||||||
|
$foreground: map-get($theme, foreground);
|
||||||
|
|
||||||
|
.adf-search-sorting-picker {
|
||||||
|
.mat-icon-button {
|
||||||
|
color: mat-color($foreground, text, 0.54);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -22,6 +22,7 @@ import { SearchSortingDefinition } from '../../search-sorting-definition.interfa
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'adf-search-sorting-picker',
|
selector: 'adf-search-sorting-picker',
|
||||||
templateUrl: './search-sorting-picker.component.html',
|
templateUrl: './search-sorting-picker.component.html',
|
||||||
|
styleUrls: ['./search-sorting-picker.component.scss'],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
host: { class: 'adf-search-sorting-picker' }
|
host: { class: 'adf-search-sorting-picker' }
|
||||||
})
|
})
|
||||||
|
|||||||
@ -6,9 +6,12 @@
|
|||||||
|
|
||||||
@import '../upload/components/file-uploading-list-row.component';
|
@import '../upload/components/file-uploading-list-row.component';
|
||||||
@import '../upload/components/file-uploading-dialog.component';
|
@import '../upload/components/file-uploading-dialog.component';
|
||||||
|
@import '../upload/components/upload-drag-area.component';
|
||||||
|
|
||||||
@import '../search/components/search.component';
|
@import '../search/components/search.component';
|
||||||
@import '../search/components/search-control.component';
|
@import '../search/components/search-control.component';
|
||||||
|
@import '../search/components/search-sorting-picker/search-sorting-picker.component';
|
||||||
|
@import '../search/components/search-filter/search-filter.component';
|
||||||
|
|
||||||
@import '../dialogs/folder.dialog';
|
@import '../dialogs/folder.dialog';
|
||||||
|
|
||||||
@ -28,8 +31,10 @@
|
|||||||
@include adf-document-list-theme($theme) ;
|
@include adf-document-list-theme($theme) ;
|
||||||
@include adf-file-uploading-row-theme($theme);
|
@include adf-file-uploading-row-theme($theme);
|
||||||
@include adf-upload-dialog-theme($theme);
|
@include adf-upload-dialog-theme($theme);
|
||||||
|
@include adf-upload-drag-area-theme($theme);
|
||||||
@include adf-search-control-theme($theme);
|
@include adf-search-control-theme($theme);
|
||||||
@include adf-search-autocomplete-theme($theme);
|
@include adf-search-autocomplete-theme($theme);
|
||||||
|
@include adf-search-sorting-picker-theme($theme);
|
||||||
@include adf-dialog-theme($theme);
|
@include adf-dialog-theme($theme);
|
||||||
@include adf-content-node-selector-dialog-theme($theme) ;
|
@include adf-content-node-selector-dialog-theme($theme) ;
|
||||||
@include adf-content-metadata-module-theme($theme);
|
@include adf-content-metadata-module-theme($theme);
|
||||||
@ -38,4 +43,5 @@
|
|||||||
@include adf-add-permission-dialog-theme($theme);
|
@include adf-add-permission-dialog-theme($theme);
|
||||||
@include adf-add-permission-panel-theme($theme);
|
@include adf-add-permission-panel-theme($theme);
|
||||||
@include adf-tree-view-theme($theme);
|
@include adf-tree-view-theme($theme);
|
||||||
|
@include adf-search-filter-theme($theme);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
@mixin adf-upload-dialog-theme($theme) {
|
@mixin adf-upload-dialog-theme($theme) {
|
||||||
$foreground: map-get($theme, foreground);
|
$foreground: map-get($theme, foreground);
|
||||||
$background: map-get($theme, background);
|
$background: map-get($theme, background);
|
||||||
@ -10,6 +9,7 @@
|
|||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
box-shadow: 1px 5px 15px #888888;
|
box-shadow: 1px 5px 15px #888888;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
&--padding {
|
&--padding {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
@mixin adf-file-uploading-row-theme($theme) {
|
@mixin adf-file-uploading-row-theme($theme) {
|
||||||
$background: map-get($theme, background);
|
$background: map-get($theme, background);
|
||||||
$foreground: map-get($theme, foreground);
|
$foreground: map-get($theme, foreground);
|
||||||
@ -32,7 +31,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__group, &__block {
|
&__group, &__block {
|
||||||
min-width: 200px;
|
min-width: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
@ -72,7 +71,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__action--remove {
|
&__action--remove {
|
||||||
color: mat-color($accent);
|
color: mat-color($warn);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,15 +0,0 @@
|
|||||||
adf-upload-drag-area {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adf-upload-border {
|
|
||||||
vertical-align: middle;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adf-file-draggable__input-focus {
|
|
||||||
color: #2196f3;
|
|
||||||
border: 1px dashed #2196f3;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,88 @@
|
|||||||
|
$adf-upload-dragging-color: #2196f3 !default;
|
||||||
|
$adf-upload-dragging-border: 1px dashed #2196f3 !default;
|
||||||
|
$adf-upload-dragging-background: #e3f2fd !default;
|
||||||
|
$adf-upload-dragging-level1-color: #2196f3 !default;
|
||||||
|
$adf-upload-dragging-level1-border: 1px dashed #2196f3 !default;
|
||||||
|
|
||||||
|
@mixin file-draggable__input-focus($text-color, $border) {
|
||||||
|
color: $text-color;
|
||||||
|
border: $border !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin adf-upload-drag-area-theme($theme) {
|
||||||
|
adf-upload-drag-area {
|
||||||
|
@include flex-column;
|
||||||
|
|
||||||
|
.adf-upload-border {
|
||||||
|
@include flex-column;
|
||||||
|
vertical-align: unset;
|
||||||
|
text-align: unset;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-file-draggable__input-focus {
|
||||||
|
color: $adf-upload-dragging-color;
|
||||||
|
border: $adf-upload-dragging-border;
|
||||||
|
|
||||||
|
adf-document-list {
|
||||||
|
background: $adf-upload-dragging-background;
|
||||||
|
adf-datatable > table {
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-upload__dragging {
|
||||||
|
background: $adf-upload-dragging-background;
|
||||||
|
color: $adf-upload-dragging-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-upload__dragging td {
|
||||||
|
border-top: $adf-upload-dragging-border !important;
|
||||||
|
border-bottom: $adf-upload-dragging-border !important;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-left: $adf-upload-dragging-border !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: $adf-upload-dragging-border !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
& > div {
|
||||||
|
adf-upload-drag-area {
|
||||||
|
.adf-file-draggable__input-focus {
|
||||||
|
@include file-draggable__input-focus(
|
||||||
|
$adf-upload-dragging-color,
|
||||||
|
$adf-upload-dragging-border
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-upload-border {
|
||||||
|
vertical-align: inherit !important;
|
||||||
|
text-align: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-file-draggable__input-focus {
|
||||||
|
color: $adf-upload-dragging-level1-color !important;
|
||||||
|
border: $adf-upload-dragging-level1-border !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
|
||||||
|
adf-upload-drag-area {
|
||||||
|
& > div {
|
||||||
|
@include file-draggable__input-focus(
|
||||||
|
$adf-upload-dragging-color,
|
||||||
|
$adf-upload-dragging-border
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -25,7 +25,7 @@ import { UploadBase } from './base-upload/upload-base';
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'adf-upload-drag-area',
|
selector: 'adf-upload-drag-area',
|
||||||
templateUrl: './upload-drag-area.component.html',
|
templateUrl: './upload-drag-area.component.html',
|
||||||
styleUrls: ['./upload-drag-area.component.css'],
|
styleUrls: ['./upload-drag-area.component.scss'],
|
||||||
host: { 'class': 'adf-upload-drag-area' },
|
host: { 'class': 'adf-upload-drag-area' },
|
||||||
viewProviders: [
|
viewProviders: [
|
||||||
{ provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent) }
|
{ provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent) }
|
||||||
|
|||||||
@ -1,3 +1,21 @@
|
|||||||
|
adf-version-manager {
|
||||||
|
.mat-list .mat-3-line {
|
||||||
|
height: auto !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-list-item-content {
|
||||||
|
padding: 16px 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adf-version-list-item-comment.mat-line {
|
||||||
|
height: 100%;
|
||||||
|
word-break: break-all;
|
||||||
|
white-space: unset !important;
|
||||||
|
overflow: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
.adf-button.adf-upload-new-version {
|
.adf-button.adf-upload-new-version {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -7,14 +25,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.adf-new-version-uploader-container {
|
.adf-new-version-uploader-container {
|
||||||
border-bottom: 1px solid #d8d8d8;
|
|
||||||
padding: 16px 0;
|
padding: 16px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0%;
|
height: 0%;
|
||||||
|
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.adf-new-version-container {
|
.adf-new-version-container {
|
||||||
|
|||||||
@ -5,11 +5,17 @@
|
|||||||
$adf-info-drawer-layout-background-color: mat-color($background, background) !default;
|
$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-color: mat-color($foreground, text, 0.54) !default;
|
||||||
$adf-info-drawer-layout-title-font-size: 20px !default;
|
$adf-info-drawer-layout-title-font-size: 20px !default;
|
||||||
|
$adf-info-drawer-icon-size: 48px !default;
|
||||||
|
|
||||||
.adf {
|
.adf {
|
||||||
|
&-info-drawer {
|
||||||
|
@include flex-column;
|
||||||
|
}
|
||||||
|
|
||||||
&-info-drawer-layout {
|
&-info-drawer-layout {
|
||||||
|
@include flex-column;
|
||||||
|
overflow: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
|
||||||
background-color: $adf-info-drawer-layout-background-color;
|
background-color: $adf-info-drawer-layout-background-color;
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
|
||||||
|
|
||||||
@ -61,6 +67,26 @@
|
|||||||
> *:last-child {
|
> *:last-child {
|
||||||
margin-bottom: 0;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,29 +1,27 @@
|
|||||||
<div class="adf-sidenav-layout">
|
<ng-container *ngIf="!isHeaderInside">
|
||||||
<ng-container *ngIf="!isHeaderInside">
|
<ng-container class="adf-sidenav-layout-outer-header"
|
||||||
<ng-container class="adf-sidenav-layout-outer-header"
|
*ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
|
||||||
*ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
|
</ng-container>
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<adf-layout-container #container
|
<adf-layout-container #container
|
||||||
[position]="position"
|
[position]="position"
|
||||||
[sidenavMin]="sidenavMin"
|
[sidenavMin]="sidenavMin"
|
||||||
[sidenavMax]="sidenavMax"
|
[sidenavMax]="sidenavMax"
|
||||||
[mediaQueryList]="mediaQueryList"
|
[mediaQueryList]="mediaQueryList"
|
||||||
[hideSidenav]="hideSidenav"
|
[hideSidenav]="hideSidenav"
|
||||||
[expandedSidenav]="expandedSidenav"
|
[expandedSidenav]="expandedSidenav"
|
||||||
data-automation-id="adf-layout-container"
|
data-automation-id="adf-layout-container"
|
||||||
class="adf-layout__content">
|
class="adf-layout__content">
|
||||||
|
|
||||||
<ng-container app-layout-navigation
|
<ng-container app-layout-navigation
|
||||||
*ngTemplateOutlet="navigationTemplate; context:templateContext"></ng-container>
|
*ngTemplateOutlet="navigationTemplate; context:templateContext"></ng-container>
|
||||||
|
|
||||||
<ng-container app-layout-content>
|
<ng-container app-layout-content>
|
||||||
<ng-container *ngIf="isHeaderInside">
|
<ng-container *ngIf="isHeaderInside">
|
||||||
<ng-container *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
|
<ng-container *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
|
||||||
</ng-container>
|
|
||||||
<ng-container *ngTemplateOutlet="contentTemplate; context:templateContext"></ng-container>
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</adf-layout-container>
|
<ng-container *ngTemplateOutlet="contentTemplate; context:templateContext"></ng-container>
|
||||||
</div>
|
</ng-container>
|
||||||
|
</adf-layout-container>
|
||||||
|
|
||||||
<ng-template #emptyTemplate></ng-template>
|
<ng-template #emptyTemplate></ng-template>
|
||||||
|
|||||||
@ -1,18 +1,34 @@
|
|||||||
:host {
|
@mixin adf-sidenav-layout-theme($theme) {
|
||||||
display: flex;
|
$adf-sidenav-max: 300px !default;
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.adf-sidenav-layout {
|
.adf-sidenav-layout {
|
||||||
|
@include flex-column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.adf-layout__content {
|
.adf-layout__content {
|
||||||
flex: 1 1 auto;
|
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 {
|
.mat-drawer-content > div,
|
||||||
flex: 0 0;
|
.mat-drawer-content > div > div {
|
||||||
|
@include flex-column;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,7 +15,19 @@
|
|||||||
* limitations under the License.
|
* 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 { MediaMatcher } from '@angular/cdk/layout';
|
||||||
import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
|
import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
|
||||||
import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
|
import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
|
||||||
@ -25,7 +37,9 @@ import { BehaviorSubject, Observable } from 'rxjs';
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'adf-sidenav-layout',
|
selector: 'adf-sidenav-layout',
|
||||||
templateUrl: './sidenav-layout.component.html',
|
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 {
|
export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
|||||||
@ -1,10 +1,11 @@
|
|||||||
|
|
||||||
@mixin adf-pagination-theme($theme) {
|
@mixin adf-pagination-theme($theme) {
|
||||||
$foreground: map-get($theme, foreground);
|
$foreground: map-get($theme, foreground);
|
||||||
|
|
||||||
$adf-pagination--height: 48px;
|
$adf-pagination--height: 48px !default;
|
||||||
$adf-pagination--icon-button-size: 32px;
|
$adf-pagination--icon-button-size: 32px !default;
|
||||||
$adf-pagination--border: 1px solid mat-color($foreground, text, 0.07);
|
$adf-pagination--border: none !default;
|
||||||
|
$adf-pagination__empty--height: 48px !default;
|
||||||
|
$adf-pagination__empty--border: none !default;
|
||||||
|
|
||||||
.adf-pagination {
|
.adf-pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -33,42 +34,24 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
@include layout-bp(lt-sm) {
|
||||||
|
|
||||||
& {
|
& {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding-bottom: 24px;
|
padding: 0 16px;
|
||||||
padding-top: 8px;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__range-block.adf-pagination__block:first-child {
|
&__range-block,
|
||||||
order: 1;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-left: 16px;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__perpage-block {
|
&__perpage-block {
|
||||||
order: 3;
|
display: none;
|
||||||
box-sizing: border-box;
|
|
||||||
padding-left: 16px;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__actualinfo-block {
|
&__actualinfo-block {
|
||||||
order: 2;
|
border-right: none;
|
||||||
box-sizing: border-box;
|
|
||||||
padding-right: 16px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__controls-block {
|
&__controls-block {
|
||||||
order: 4;
|
padding-right: 0;
|
||||||
box-sizing: border-box;
|
|
||||||
padding-right: 16px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -96,6 +79,11 @@
|
|||||||
max-height: 250px !important;
|
max-height: 250px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.adf-pagination__empty {
|
||||||
|
border-top: $adf-pagination__empty--border;
|
||||||
|
height: $adf-pagination__empty--height;
|
||||||
|
}
|
||||||
|
|
||||||
button[mat-icon-button] {
|
button[mat-icon-button] {
|
||||||
width: $adf-pagination--icon-button-size;
|
width: $adf-pagination--icon-button-size;
|
||||||
height: $adf-pagination--icon-button-size;
|
height: $adf-pagination--icon-button-size;
|
||||||
|
|||||||
@ -26,6 +26,7 @@
|
|||||||
@import '../comments/comment-list.component';
|
@import '../comments/comment-list.component';
|
||||||
@import '../comments/comments.component';
|
@import '../comments/comments.component';
|
||||||
@import '../layout/components/layout-container/layout-container.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/empty-content/empty-content.component';
|
||||||
@import '../templates/error-content/error-content.component';
|
@import '../templates/error-content/error-content.component';
|
||||||
@import '../buttons-menu/buttons-menu.component';
|
@import '../buttons-menu/buttons-menu.component';
|
||||||
@ -64,4 +65,5 @@
|
|||||||
@include adf-header-layout-theme($theme);
|
@include adf-header-layout-theme($theme);
|
||||||
@include adf-login-dialog-theme($theme);
|
@include adf-login-dialog-theme($theme);
|
||||||
@include adf-login-dialog-panel-theme($theme);
|
@include adf-login-dialog-panel-theme($theme);
|
||||||
|
@include adf-sidenav-layout-theme($theme);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
@import '~@angular/material/theming';
|
@import '~@angular/material/theming';
|
||||||
|
@import '~@angular/flex-layout/mq';
|
||||||
@import './colors';
|
@import './colors';
|
||||||
@import './variables';
|
@import './variables';
|
||||||
@import './mixins';
|
@import './mixins';
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
|
|
||||||
@mixin adf-toolbar-theme($theme) {
|
@mixin adf-toolbar-theme($theme) {
|
||||||
$foreground: map-get($theme, foreground);
|
$foreground: map-get($theme, foreground);
|
||||||
$adf-toolbar-height: 48px;
|
$adf-toolbar-height: 48px !default;
|
||||||
$adf-toolbar-font-size: 14px;
|
$adf-toolbar-single-row-height: 64px !default;
|
||||||
|
$adf-toolbar-font-size: 14px !default;
|
||||||
.adf-toolbar--spacer {
|
$adf-toolbar-padding: 16px !default;
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adf-toolbar {
|
.adf-toolbar {
|
||||||
|
&--spacer {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -24,6 +24,26 @@
|
|||||||
font-size: $adf-toolbar-font-size;
|
font-size: $adf-toolbar-font-size;
|
||||||
white-space: normal;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user