mirror of
https://github.com/goharbor/harbor.git
synced 2024-11-25 19:56:09 +01:00
Change the alert style to global style
This commit is contained in:
parent
95c4994737
commit
dfadb70cc0
@ -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;
|
||||
}
|
@ -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>
|
||||
|
7
src/ui_ng/src/app/global-message/message.component.css
Normal file
7
src/ui_ng/src/app/global-message/message.component.css
Normal file
@ -0,0 +1,7 @@
|
||||
.global-message-alert {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
}
|
@ -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>
|
@ -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;
|
||||
}
|
||||
}
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user