inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-17 14:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2018] Hide details button when it's displayed on a smartphone (#3100)

Browse Source 
* [ADF-2018] Hide details button when it's displayed on a smartphone

* [ADF-2018] Media query with variables fixed

* [ADF-2018] Properly merged
This commit is contained in:
davidcanonieto
2018-03-22 14:53:17 +00:00
committed by Eugenio Romano
parent 5c4a18dd48
commit 2084748993
4 changed files with 148 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell/src/app/components/files/files.component.html
View File

@@ -129,7 +129,7 @@
<button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button> <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
</mat-menu> </mat-menu>
<button mat-icon-button (click)="showVersions = !showVersions"> <button mat-icon-button (click)="showVersions = !showVersions" class="adf-show-versions-button">
<mat-icon *ngIf="!showVersions">chevron_left</mat-icon> <mat-icon *ngIf="!showVersions">chevron_left</mat-icon>
<mat-icon *ngIf="showVersions">chevron_right</mat-icon> <mat-icon *ngIf="showVersions">chevron_right</mat-icon>
</button> </button>

74
demo-shell/src/app/components/files/files.component.scss
View File

@@ -1,51 +1,56 @@
$minimumDocumentListWidth: 425px; @mixin adf-file-component-theme($theme) {
$minimumDocumentListWidth: 425px;
.container { .container {
margin: 10px; margin: 10px;
} }
@media only screen and (max-width: 640px) { @media screen and ($mat-xsmall) {
.container { .container {
margin: 0; margin: 0;
} }
}
.error-message { .adf-show-versions-button.mat-icon-button {
display: none;
}
}
.error-message {
text-align: left; text-align: left;
} }
.error-message--text { .error-message--text {
color: #d50000; color: #d50000;
} }
.adf-not-overlay-viewer { .adf-not-overlay-viewer {
height: 900px; height: 900px;
} }
adf-document-list ::ng-deep adf-datatable tr.document-list__create { adf-document-list ::ng-deep adf-datatable tr.document-list__create {
background: green !important; background: green !important;
} }
adf-document-list ::ng-deep adf-datatable tr.document-list__disable { adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
background: red !important; background: red !important;
} }
adf-document-list ::ng-deep .adf-datatable-selected > svg { adf-document-list ::ng-deep .adf-datatable-selected > svg {
fill: #00bcd4 !important; fill: #00bcd4 !important;
} }
.adf-site-container-style { .adf-site-container-style {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
width: 100%; width: 100%;
min-width: 200px; min-width: 200px;
} }
.adf-content-service-settings { .adf-content-service-settings {
padding: 16px; padding: 16px;
} }
.adf-files-toolbar { .adf-files-toolbar {
.adf-toolbar-title { .adf-toolbar-title {
display: flex; display: flex;
width: 100%; width: 100%;
@@ -54,9 +59,9 @@ adf-document-list ::ng-deep .adf-datatable-selected > svg {
width: 0; width: 0;
} }
} }
} }
.adf-manage-versions-sidebar { .adf-manage-versions-sidebar {
width: 300px; width: 300px;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
@@ -93,30 +98,30 @@ adf-document-list ::ng-deep .adf-datatable-selected > svg {
padding: 8px 24px 16px 24px; padding: 8px 24px 16px 24px;
} }
} }
} }
.adf-no-result__empty_doc_lib { .adf-no-result__empty_doc_lib {
width: 565px; width: 565px;
height: 161px; height: 161px;
object-fit: contain; object-fit: contain;
margin-top: 17px; margin-top: 17px;
} }
.adf-empty_template { .adf-empty_template {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.adf-no-result-message { .adf-no-result-message {
height: 32px; height: 32px;
opacity: 0.26; opacity: 0.26;
font-size: 24px; font-size: 24px;
line-height: 1.33; line-height: 1.33;
letter-spacing: -1px; letter-spacing: -1px;
} }
.adf-container-recent { .adf-container-recent {
mat-icon { mat-icon {
margin-left: 20px; margin-left: 20px;
} }
@@ -129,9 +134,9 @@ adf-document-list ::ng-deep .adf-datatable-selected > svg {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
@media (max-width: $minimumDocumentListWidth) { @media (max-width: $minimumDocumentListWidth) {
adf-document-list ::ng-deep adf-datatable { adf-document-list ::ng-deep adf-datatable {
& ::ng-deep .adf-data-table-cell--fileSize { & ::ng-deep .adf-data-table-cell--fileSize {
display: none; display: none;
@@ -154,4 +159,5 @@ adf-document-list ::ng-deep .adf-datatable-selected > svg {
min-width: 0; min-width: 0;
} }
} }
}
} }

3
demo-shell/src/custom-style-dev.scss
View File

@@ -1,4 +1,6 @@
@import './app/components/app-layout/app-layout.component.scss'; @import './app/components/app-layout/app-layout.component.scss';
@import './app/components/files/files.component.scss';
@import 'content-services/styles/index'; @import 'content-services/styles/index';
@import 'process-services/styles/index'; @import 'process-services/styles/index';
@@ -16,6 +18,7 @@ $theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme); @include angular-material-theme($theme);
@include adf-app-layout-theme($theme); @include adf-app-layout-theme($theme);
@include adf-file-component-theme($theme);
@include adf-content-services-theme($theme); @include adf-content-services-theme($theme);
@include adf-process-services-theme($theme); @include adf-process-services-theme($theme);

1
demo-shell/src/custom-style.scss
View File

@@ -16,6 +16,7 @@ $theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme); @include angular-material-theme($theme);
@include adf-app-layout-theme($theme); @include adf-app-layout-theme($theme);
@include adf-file-component-theme($theme);
@include adf-content-services-theme($theme); @include adf-content-services-theme($theme);
@include adf-process-services-theme($theme); @include adf-process-services-theme($theme);