Change the alert style to global style

This commit is contained in:
Steven Zou 2017-04-25 19:27:28 +08:00
parent 95c4994737
commit dfadb70cc0
7 changed files with 59 additions and 23 deletions

View File

@ -17,16 +17,6 @@
padding-right: 21px !important;
}
/*.global-message-alert {
position: fixed;
top: 55px;
left: 260px;
width: 100%;
z-index: 999;
padding-right: 276px;
}*/
.nav-link-override {
width: 126px !important;
}

View File

@ -3,9 +3,7 @@
<navigator (showAccountSettingsModal)="openModal($event)" (showPwdChangeModal)="openModal($event)"></navigator>
<div class="content-container">
<div class="content-area" [class.container-override]="showSearch" [class.content-area-override]="!shouldOverrideContent" [class.start-content-padding]="shouldOverrideContent">
<div class="global-message-alert">
<global-message [isAppLevel]="false"></global-message>
</div>
<global-message [isAppLevel]="false"></global-message>
<!-- Only appear when searching -->
<search-result></search-result>
<router-outlet></router-outlet>

View File

@ -0,0 +1,7 @@
.global-message-alert {
position: fixed;
top: 60px;
left: 0px;
width: 100%;
z-index: 9999;
}

View File

@ -1,10 +1,12 @@
<clr-alert [clrAlertType]="globalMessage.type" [clrAlertAppLevel]="isAppLevel" [(clrAlertClosed)]="!globalMessageOpened" (clrAlertClosedChange)="onClose()">
<div class="alert-item">
<span class="alert-text">
<div class="global-message-alert" [hidden]="hideOuter">
<clr-alert [clrAlertType]="globalMessage.type" [clrAlertAppLevel]="isAppLevel" [(clrAlertClosed)]="!globalMessageOpened" (clrAlertClosedChange)="onClose()">
<div class="alert-item">
<span class="alert-text">
{{message}}
</span>
<div class="alert-actions" *ngIf="needAuth">
<button class="btn alert-action" (click)="signIn()">{{ 'BUTTON.LOG_IN' | translate }}</button>
<div class="alert-actions" *ngIf="needAuth">
<button class="btn alert-action" (click)="signIn()">{{ 'BUTTON.LOG_IN' | translate }}</button>
</div>
</div>
</div>
</clr-alert>
</clr-alert>
</div>

View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Component, Input, OnInit, OnDestroy, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { TranslateService } from '@ngx-translate/core';
@ -23,7 +23,8 @@ import { AlertType, dismissInterval, httpStatusCode, CommonRoutes } from '../sha
@Component({
selector: 'global-message',
templateUrl: 'message.component.html'
templateUrl: 'message.component.html',
styleUrls: ['message.component.css']
})
export class MessageComponent implements OnInit, OnDestroy {
@ -32,12 +33,14 @@ export class MessageComponent implements OnInit, OnDestroy {
globalMessageOpened: boolean;
messageText: string = "";
timer: any = null;
hideOuter: boolean = true;
appLevelMsgSub: Subscription;
msgSub: Subscription;
clearSub: Subscription;
constructor(
private elementRef: ElementRef,
private messageService: MessageService,
private router: Router,
private translate: TranslateService) { }
@ -67,6 +70,19 @@ export class MessageComponent implements OnInit, OnDestroy {
// Make the message alert bar dismiss after several intervals.
//Only for this case
this.timer = setTimeout(() => this.onClose(), dismissInterval);
//Hack the Clarity Alert style with native dom
setTimeout(() => {
let nativeDom: any = this.elementRef.nativeElement;
let queryDoms: any[] = nativeDom.getElementsByClassName("alert");
if (queryDoms && queryDoms.length > 0) {
let hackDom: any = queryDoms[0];
hackDom.className += ' alert-global alert-global-align';
}
this.hideOuter = false;
}, 0);
}
);
}
@ -122,5 +138,6 @@ export class MessageComponent implements OnInit, OnDestroy {
clearTimeout(this.timer);
}
this.globalMessageOpened = false;
this.hideOuter = true;
}
}

View File

@ -22,7 +22,7 @@ export const enum AlertType {
DANGER, WARNING, INFO, SUCCESS
};
export const dismissInterval = 15 * 1000;
export const dismissInterval = 10 * 1000;
export const httpStatusCode = {
"Unauthorized": 401,
"Forbidden": 403

View File

@ -6,4 +6,26 @@
margin-left: -54px;
width: 108px !important;
height: 108px !important;
}
/*Hack Clarity alert*/
.alert-global {
font-size: 16px;
font-weight: 400;
font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
padding: 12px !important;
border: none !important;
margin-top: 0px !important;
max-height: 96px;
}
.alert-global-align {
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
overflow-y: auto;
overflow-x: hidden;
}