inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1932] Settings button now is located inside the login menu (#3114)

Browse Source 
* [ADF-1932] Settings button now is located inside the login menu

* [ADF-1932] Improved styles

* [ADF-1932] CSS replaced by SCSS, settings button now matches material accent color

* enable source map in the dist

* Revert "enable source map in the dist"

This reverts commit 0e53ace55bd9d9c689cb1fa1496010332d5cf1d5.
This commit is contained in:
davidcanonieto 2018-03-26 09:57:50 +01:00 committed by Eugenio Romano
parent b84e716fe5
commit 2940b6ce99
6 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
demo-shell/src/app/components/login/login.component.css
View File

@ -1,40 +0,0 @@
.setting-button {
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
background-color: rgb(68,138,255);
color: rgb(255,255,255);
}
.settings {
border-radius: 8px;
position: absolute;
background-color: papayawhip;
color: cadetblue;
left: 10px;
top: 10px;
z-index: 1;
}
.toggle {
width: 190px;
margin: 5px;
padding: 5px;
}
@media (min-width: 721px) {
.mobile-settings {
display: none;
}
}
@media (max-width: 720px) {
.settings {
display: none;
}
}
.settings ::ng-deep .mat-slide-toggle-thumb-container {
cursor: pointer;
}

4
demo-shell/src/app/components/login/login.component.html
View File

@ -41,7 +41,7 @@
<!--SETTING BUTTON-->
<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings">
<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" color="accent">
<mat-icon>settings</mat-icon>
</a>
@ -92,5 +92,7 @@
{{ 'LOGIN.LOGIN_FOOTER'| translate }}
</mat-slide-toggle>
</p>
<button type="button" mat-raised-button color="accent" class="mobile-setting-button" routerLink="/settings" data-automation-id="settings">{{ 'APP_LAYOUT.SETTINGS'| translate }}</button>
</div>
</adf-login>

52
demo-shell/src/app/components/login/login.component.scss Normal file
View File

@ -0,0 +1,52 @@
@mixin adf-login-component-theme($theme) {
.setting-button.mat-fab.mat-accent {
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
}
.settings {
border-radius: 8px;
position: absolute;
background-color: papayawhip;
color: cadetblue;
left: 10px;
top: 10px;
z-index: 1;
}
.toggle {
width: 190px;
margin: 5px;
padding: 5px;
}
.mobile-settings, .mobile-setting-button {
display: none;
}
@media screen and ($mat-small) {
.settings, .setting-button.mat-fab.mat-accent {
display: none;
}
.mobile-settings, .mobile-setting-button {
display: block;
}
.mobile-setting-button {
width: 100%;
}
.mobile-settings {
padding-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
}
.settings ::ng-deep .mat-slide-toggle-thumb-container {
cursor: pointer;
}
}

2
demo-shell/src/app/components/login/login.component.ts
View File

@ -23,7 +23,7 @@ import { LogService, StorageService } from '@alfresco/adf-core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

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

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

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

@ -1,5 +1,6 @@
@import './app/components/app-layout/app-layout.component.scss';
@import './app/components/files/files.component.scss';
@import './app/components/login/login.component.scss';
@import '~@alfresco/adf-content-services/theming';
@import '~@alfresco/adf-process-services/theming';
@ -18,6 +19,7 @@ $theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include adf-app-layout-theme($theme);
@include adf-file-component-theme($theme);
@include adf-login-component-theme($theme);
@include adf-content-services-theme($theme);
@include adf-process-services-theme($theme);