Modify event panel

Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
AllForNothing 2019-11-14 11:39:22 +08:00 committed by sshijun
parent e5f8c2d779
commit bb7f844eec
4 changed files with 70 additions and 48 deletions

View File

@ -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')
])
]);

View File

@ -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;
}

View File

@ -1,5 +1,6 @@
<div class="operDiv" [@SlideInOutAnimation]="animationState">
<a class="toolBar" (click)="slideOut()">{{'OPERATION.EVENT_LOG' | translate}}<!--<clr-icon shape="angle-double" style="transform: rotate(90deg)"></clr-icon>--></a>
<div class="operDiv" [@SlideInOutAnimation]="animationState" (mouseover)="mouseover()" (mouseleave)="mouseleave()" >
<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">
<clr-icon shape="refresh" class="freshIcon" (click)="TabEvent()"></clr-icon>
<h3 class="custom-h2 event-text">{{'OPERATION.LOCAL_EVENT' | translate}}</h3>
@ -60,5 +61,6 @@
</clr-tabs>
</div>
</div>
</div>
</div>

View File

@ -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();
}