mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-01-15 20:51:57 +00:00
Code Issues Releases Wiki Activity

Implement hiding messages component

Browse Source
This commit is contained in:
Kristóf Tóth 2018-04-20 14:05:23 +02:00
parent 26df194a17
commit 46b750432e
4 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/config.ts
View File

@ -22,6 +22,7 @@ export const config = {
'ide-only', 'ide-only',
'web-only' 'web-only'
]), ]),
hide_messages: false
}, },
ide: { ide: {
route: 'ide', route: 'ide',

2
src/app/dashboard/dashboard.component.html
View File

@ -1,7 +1,7 @@
<div [attr.class]="layout"> <div [attr.class]="layout">
<div class="tfw-grid-main-components"> <div class="tfw-grid-main-components">
<div class="tfw-header"><app-header></app-header></div> <div class="tfw-header"><app-header></app-header></div>
<div class="tfw-messages"><app-messages></app-messages></div> <div [ngClass]="{ 'hide-attribute': hide_messages }" class="tfw-messages"><app-messages></app-messages></div>
<div class="tfw-web tao-grid-top-left" <div class="tfw-web tao-grid-top-left"
[ngClass]="{ 'deploy-blur': deploying }"> [ngClass]="{ 'deploy-blur': deploying }">
<div class="iframe-container"> <div class="iframe-container">

1
src/app/dashboard/dashboard.component.ts
View File

@ -16,6 +16,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
deploymentNotificationSubscription: Subscription; deploymentNotificationSubscription: Subscription;
enabledLayouts: Set<string> = config.dashboard.enabledLayouts; enabledLayouts: Set<string> = config.dashboard.enabledLayouts;
layout: string = config.dashboard.currentLayout; layout: string = config.dashboard.currentLayout;
hide_messages: boolean = config.dashboard.hide_messages;
command_handlers = {'layout': this.layoutHandler.bind(this)}; command_handlers = {'layout': this.layoutHandler.bind(this)};
constructor(private deploymentNotificationService: DeploymentNotificationService, constructor(private deploymentNotificationService: DeploymentNotificationService,

16
src/assets/scss/mixins/_layout.scss
View File

@ -93,6 +93,17 @@ $layouts: (
} }
} }
@mixin hide-component() {
// We need to make sure the DOM element is displayed but not visible
visibility: hidden;
position: absolute;
z-index: -10000000;
}
.hide-attribute {
@include hide-component();
}
@function get-layout($layouts-key){ @function get-layout($layouts-key){
@return map_get($layouts, $layouts-key); @return map_get($layouts, $layouts-key);
} }
@ -103,10 +114,7 @@ $layouts: (
@each $k, $v in $map { @each $k, $v in $map {
#{$sel}#{$k} { #{$sel}#{$k} {
@if (length($v) == 0) { @if (length($v) == 0) {
// We need to make sure the DOM element is displayed but not visible @include hide-component();
visibility: hidden;
position: absolute;
z-index: -10000000;
} }
@else { @else {
grid-column-start: nth($v, 1); grid-column-start: nth($v, 1);