mirror of
https://github.com/goharbor/harbor.git
synced 2024-12-24 09:38:09 +01:00
Merge pull request #9873 from AllForNothing/event-panel
Modify event panel
This commit is contained in:
commit
48f215e416
@ -4,44 +4,13 @@ import {AnimationTriggerMetadata, trigger, state, animate, transition, style } f
|
|||||||
export const SlideInOutAnimation: AnimationTriggerMetadata =
|
export const SlideInOutAnimation: AnimationTriggerMetadata =
|
||||||
// trigger name for attaching this animation to an element using the [@triggerName] syntax
|
// trigger name for attaching this animation to an element using the [@triggerName] syntax
|
||||||
trigger('SlideInOutAnimation', [
|
trigger('SlideInOutAnimation', [
|
||||||
|
|
||||||
// end state styles for route container (host)
|
|
||||||
state('in', style({
|
state('in', style({
|
||||||
// the view covers the whole screen with a semi tranparent background
|
|
||||||
position: 'fix',
|
|
||||||
right: 0,
|
right: 0,
|
||||||
width: '350px',
|
|
||||||
bottom: 0
|
|
||||||
// backgroundColor: 'rgba(0, 0, 0, 0.8)'
|
|
||||||
})),
|
})),
|
||||||
state('out', style({
|
state('out', style({
|
||||||
// the view covers the whole screen with a semi tranparent background
|
right: '-325px',
|
||||||
position: 'fix',
|
|
||||||
width: '30px',
|
|
||||||
bottom: 0
|
|
||||||
// backgroundColor: 'rgba(0, 0, 0, 0.8)'
|
|
||||||
})),
|
})),
|
||||||
// route 'enter' transition
|
transition('in <=> out', [
|
||||||
transition('out => in', [
|
animate('0.5s ease-in-out')
|
||||||
// animation and styles at end of transition
|
|
||||||
animate('.5s ease-in-out', style({
|
|
||||||
// transition the right position to 0 which slides the content into view
|
|
||||||
width: '350px',
|
|
||||||
|
|
||||||
// transition the background opacity to 0.8 to fade it in
|
|
||||||
// backgroundColor: 'rgba(0, 0, 0, 0.8)'
|
|
||||||
}))
|
|
||||||
]),
|
|
||||||
|
|
||||||
// route 'leave' transition
|
|
||||||
transition('in => out', [
|
|
||||||
// animation and styles at end of transition
|
|
||||||
animate('.5s ease-in-out', style({
|
|
||||||
// transition the right position to -400% which slides the content out of view
|
|
||||||
width: '30px',
|
|
||||||
|
|
||||||
// transition the background opacity to 0 to fade it out
|
|
||||||
// backgroundColor: 'rgba(0, 0, 0, 0)'
|
|
||||||
}))
|
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
|
@ -17,20 +17,30 @@
|
|||||||
.eventTarget{display: inline-flex; width: 172px; font-size: 12px; flex-shrink:1; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
|
.eventTarget{display: inline-flex; width: 172px; font-size: 12px; flex-shrink:1; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
|
||||||
.eventTime{ float: right; font-size: 12px;}
|
.eventTime{ float: right; font-size: 12px;}
|
||||||
:host >>> .nav{padding-left: 38px;}
|
:host >>> .nav{padding-left: 38px;}
|
||||||
.operDiv{position: fixed; top: 60px; right: 0; z-index:100}
|
|
||||||
|
.operDiv {
|
||||||
|
position: fixed;
|
||||||
|
top: 60px;
|
||||||
|
z-index: 600;
|
||||||
|
width: 350px;
|
||||||
|
bottom: 0
|
||||||
|
}
|
||||||
|
|
||||||
.toolBar {
|
.toolBar {
|
||||||
float: left;border-top: 1px solid #ccc;
|
position: absolute;
|
||||||
transform: rotate(-90deg);
|
transform-origin: top right;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
transform: translate(-100%, 0) rotate(-90deg);
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding: 2px 4px;
|
padding: 0 10px;
|
||||||
width: 86px;
|
height: 25px;
|
||||||
height: 84px;
|
line-height: 25px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
box-shadow: -2px -1px 3px #bebbbb;
|
box-shadow: -2px -1px 3px #bebbbb;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.freshIcon{float: right; margin-right: 20px; margin-top: -10px;cursor: pointer;}
|
.freshIcon{float: right; margin-right: 20px; margin-top: -10px;cursor: pointer;}
|
||||||
@ -65,3 +75,6 @@
|
|||||||
.hidden-info {
|
.hidden-info {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.margin-left-5 {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
@ -1,5 +1,6 @@
|
|||||||
<div class="operDiv" [@SlideInOutAnimation]="animationState">
|
<div class="operDiv" [@SlideInOutAnimation]="animationState" (mouseover)="mouseover()" (mouseleave)="mouseleave()" >
|
||||||
<a class="toolBar" (click)="slideOut()">{{'OPERATION.EVENT_LOG' | translate}}<!--<clr-icon shape="angle-double" style="transform: rotate(90deg)"></clr-icon>--></a>
|
<div class="position-relative w-100 h-100">
|
||||||
|
<a class="toolBar" (click)="slideOut()">{{'OPERATION.EVENT_LOG' | translate}}<span *ngIf="getNewMessageCountStr()" class="badge badge-danger margin-left-5">{{getNewMessageCountStr()}}</span></a>
|
||||||
<div class="side-form">
|
<div class="side-form">
|
||||||
<clr-icon shape="refresh" class="freshIcon" (click)="TabEvent()"></clr-icon>
|
<clr-icon shape="refresh" class="freshIcon" (click)="TabEvent()"></clr-icon>
|
||||||
<h3 class="custom-h2 event-text">{{'OPERATION.LOCAL_EVENT' | translate}}</h3>
|
<h3 class="custom-h2 event-text">{{'OPERATION.LOCAL_EVENT' | translate}}</h3>
|
||||||
@ -61,4 +62,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@ -16,12 +16,15 @@ export class OperationComponent implements OnInit, OnDestroy {
|
|||||||
batchInfoSubscription: Subscription;
|
batchInfoSubscription: Subscription;
|
||||||
resultLists: OperateInfo[] = [];
|
resultLists: OperateInfo[] = [];
|
||||||
animationState = "out";
|
animationState = "out";
|
||||||
|
private _newMessageCount: number = 0;
|
||||||
|
private _timeoutInterval;
|
||||||
|
|
||||||
@HostListener('window:beforeunload', ['$event'])
|
@HostListener('window:beforeunload', ['$event'])
|
||||||
beforeUnloadHander(event) {
|
beforeUnloadHander(event) {
|
||||||
// storage to localStorage
|
// storage to localStorage
|
||||||
let timp = new Date().getTime();
|
let timp = new Date().getTime();
|
||||||
localStorage.setItem('operaion', JSON.stringify({timp: timp, data: this.resultLists}));
|
localStorage.setItem('operaion', JSON.stringify({timp: timp, data: this.resultLists}));
|
||||||
|
localStorage.setItem('newMessageCount', this._newMessageCount.toString());
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
@ -29,8 +32,9 @@ export class OperationComponent implements OnInit, OnDestroy {
|
|||||||
private translate: TranslateService) {
|
private translate: TranslateService) {
|
||||||
|
|
||||||
this.batchInfoSubscription = operationService.operationInfo$.subscribe(data => {
|
this.batchInfoSubscription = operationService.operationInfo$.subscribe(data => {
|
||||||
// this.resultLists = data;
|
if (this.animationState === 'out') {
|
||||||
this.openSlide();
|
this._newMessageCount += 1;
|
||||||
|
}
|
||||||
if (data) {
|
if (data) {
|
||||||
if (this.resultLists.length >= 50) {
|
if (this.resultLists.length >= 50) {
|
||||||
this.resultLists.splice(49, this.resultLists.length - 49);
|
this.resultLists.splice(49, this.resultLists.length - 49);
|
||||||
@ -40,6 +44,31 @@ export class OperationComponent implements OnInit, OnDestroy {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getNewMessageCountStr(): string {
|
||||||
|
if (this._newMessageCount) {
|
||||||
|
if (this._newMessageCount > 50) {
|
||||||
|
return this._newMessageCount + '+';
|
||||||
|
}
|
||||||
|
return this._newMessageCount.toString();
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
resetNewMessageCount() {
|
||||||
|
this._newMessageCount = 0;
|
||||||
|
}
|
||||||
|
mouseover() {
|
||||||
|
if (this._timeoutInterval) {
|
||||||
|
clearInterval(this._timeoutInterval);
|
||||||
|
this._timeoutInterval = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
mouseleave() {
|
||||||
|
if (!this._timeoutInterval) {
|
||||||
|
this._timeoutInterval = setTimeout(() => {
|
||||||
|
this.animationState = 'out';
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
}
|
||||||
public get runningLists(): OperateInfo[] {
|
public get runningLists(): OperateInfo[] {
|
||||||
let runningList: OperateInfo[] = [];
|
let runningList: OperateInfo[] = [];
|
||||||
this.resultLists.forEach(data => {
|
this.resultLists.forEach(data => {
|
||||||
@ -61,6 +90,7 @@ export class OperationComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
this._newMessageCount = +localStorage.getItem('newMessageCount');
|
||||||
let requestCookie = localStorage.getItem('operaion');
|
let requestCookie = localStorage.getItem('operaion');
|
||||||
if (requestCookie) {
|
if (requestCookie) {
|
||||||
let operInfors: any = JSON.parse(requestCookie);
|
let operInfors: any = JSON.parse(requestCookie);
|
||||||
@ -86,6 +116,10 @@ export class OperationComponent implements OnInit, OnDestroy {
|
|||||||
if (this.batchInfoSubscription) {
|
if (this.batchInfoSubscription) {
|
||||||
this.batchInfoSubscription.unsubscribe();
|
this.batchInfoSubscription.unsubscribe();
|
||||||
}
|
}
|
||||||
|
if (this._timeoutInterval) {
|
||||||
|
clearInterval(this._timeoutInterval);
|
||||||
|
this._timeoutInterval = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleTitle(errorSpan: any) {
|
toggleTitle(errorSpan: any) {
|
||||||
@ -94,10 +128,14 @@ export class OperationComponent implements OnInit, OnDestroy {
|
|||||||
|
|
||||||
slideOut(): void {
|
slideOut(): void {
|
||||||
this.animationState = this.animationState === 'out' ? 'in' : 'out';
|
this.animationState = this.animationState === 'out' ? 'in' : 'out';
|
||||||
|
if (this.animationState === 'in') {
|
||||||
|
this.resetNewMessageCount();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
openSlide(): void {
|
openSlide(): void {
|
||||||
this.animationState = 'in';
|
this.animationState = 'in';
|
||||||
|
this.resetNewMessageCount();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user