From bb7f844eec1ba86c327816ca5eae542e11d53381 Mon Sep 17 00:00:00 2001 From: AllForNothing Date: Thu, 14 Nov 2019 11:39:22 +0800 Subject: [PATCH] Modify event panel Signed-off-by: AllForNothing --- .../lib/_animations/slide-in-out.animation.ts | 37 ++-------------- .../operation/operation.component.css | 31 ++++++++++---- .../operation/operation.component.html | 8 ++-- .../operation/operation.component.ts | 42 ++++++++++++++++++- 4 files changed, 70 insertions(+), 48 deletions(-) diff --git a/src/portal/src/lib/_animations/slide-in-out.animation.ts b/src/portal/src/lib/_animations/slide-in-out.animation.ts index 8d8065313..efe4e30c7 100644 --- a/src/portal/src/lib/_animations/slide-in-out.animation.ts +++ b/src/portal/src/lib/_animations/slide-in-out.animation.ts @@ -4,44 +4,13 @@ import {AnimationTriggerMetadata, trigger, state, animate, transition, style } f export const SlideInOutAnimation: AnimationTriggerMetadata = // trigger name for attaching this animation to an element using the [@triggerName] syntax trigger('SlideInOutAnimation', [ - - // end state styles for route container (host) state('in', style({ - // the view covers the whole screen with a semi tranparent background - position: 'fix', right: 0, - width: '350px', - bottom: 0 - // backgroundColor: 'rgba(0, 0, 0, 0.8)' })), state('out', style({ - // the view covers the whole screen with a semi tranparent background - position: 'fix', - width: '30px', - bottom: 0 - // backgroundColor: 'rgba(0, 0, 0, 0.8)' + right: '-325px', })), - // route 'enter' transition - transition('out => in', [ - // 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)' - })) + transition('in <=> out', [ + animate('0.5s ease-in-out') ]) ]); diff --git a/src/portal/src/lib/components/operation/operation.component.css b/src/portal/src/lib/components/operation/operation.component.css index 23959da72..f0d82523d 100644 --- a/src/portal/src/lib/components/operation/operation.component.css +++ b/src/portal/src/lib/components/operation/operation.component.css @@ -17,22 +17,32 @@ .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;} :host >>> .nav{padding-left: 38px;} -.operDiv{position: fixed; top: 60px; right: 0; z-index:100} -.toolBar{ - float: left;border-top: 1px solid #ccc; - transform: rotate(-90deg); + +.operDiv { + position: fixed; + top: 60px; + z-index: 600; + width: 350px; + bottom: 0 +} + +.toolBar { + position: absolute; + transform-origin: top right; + border-top: 1px solid #ccc; + transform: translate(-100%, 0) rotate(-90deg); margin-top: 10px; - padding: 2px 4px; - width: 86px; - height: 84px; + padding: 0 10px; + height: 25px; + line-height: 25px; background-color: white; letter-spacing: 1.2px; font-weight: 500; box-shadow: -2px -1px 3px #bebbbb; cursor: pointer; - text-align: center; + text-align: left; text-decoration: none; - } +} .freshIcon{float: right; margin-right: 20px; margin-top: -10px;cursor: pointer;} #contentFailed, #contentAll, #contentRun{ position: absolute; @@ -65,3 +75,6 @@ .hidden-info { display: none; } +.margin-left-5 { + margin-left: 5px; +} \ No newline at end of file diff --git a/src/portal/src/lib/components/operation/operation.component.html b/src/portal/src/lib/components/operation/operation.component.html index 0e6f70ce1..f9cbd0312 100644 --- a/src/portal/src/lib/components/operation/operation.component.html +++ b/src/portal/src/lib/components/operation/operation.component.html @@ -1,6 +1,7 @@ -
- {{'OPERATION.EVENT_LOG' | translate}} -
+
+
+ {{'OPERATION.EVENT_LOG' | translate}}{{getNewMessageCountStr()}} +

{{'OPERATION.LOCAL_EVENT' | translate}}

@@ -60,5 +61,6 @@
+
diff --git a/src/portal/src/lib/components/operation/operation.component.ts b/src/portal/src/lib/components/operation/operation.component.ts index 2a09c03da..4042cfdc9 100644 --- a/src/portal/src/lib/components/operation/operation.component.ts +++ b/src/portal/src/lib/components/operation/operation.component.ts @@ -16,12 +16,15 @@ export class OperationComponent implements OnInit, OnDestroy { batchInfoSubscription: Subscription; resultLists: OperateInfo[] = []; animationState = "out"; + private _newMessageCount: number = 0; + private _timeoutInterval; @HostListener('window:beforeunload', ['$event']) beforeUnloadHander(event) { // storage to localStorage let timp = new Date().getTime(); localStorage.setItem('operaion', JSON.stringify({timp: timp, data: this.resultLists})); + localStorage.setItem('newMessageCount', this._newMessageCount.toString()); } constructor( @@ -29,8 +32,9 @@ export class OperationComponent implements OnInit, OnDestroy { private translate: TranslateService) { this.batchInfoSubscription = operationService.operationInfo$.subscribe(data => { - // this.resultLists = data; - this.openSlide(); + if (this.animationState === 'out') { + this._newMessageCount += 1; + } if (data) { if (this.resultLists.length >= 50) { 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[] { let runningList: OperateInfo[] = []; this.resultLists.forEach(data => { @@ -61,6 +90,7 @@ export class OperationComponent implements OnInit, OnDestroy { } ngOnInit() { + this._newMessageCount = +localStorage.getItem('newMessageCount'); let requestCookie = localStorage.getItem('operaion'); if (requestCookie) { let operInfors: any = JSON.parse(requestCookie); @@ -86,6 +116,10 @@ export class OperationComponent implements OnInit, OnDestroy { if (this.batchInfoSubscription) { this.batchInfoSubscription.unsubscribe(); } + if (this._timeoutInterval) { + clearInterval(this._timeoutInterval); + this._timeoutInterval = null; + } } toggleTitle(errorSpan: any) { @@ -94,10 +128,14 @@ export class OperationComponent implements OnInit, OnDestroy { slideOut(): void { this.animationState = this.animationState === 'out' ? 'in' : 'out'; + if (this.animationState === 'in') { + this.resetNewMessageCount(); + } } openSlide(): void { this.animationState = 'in'; + this.resetNewMessageCount(); }