Charon/blockchain
1
0
Fork 0
forked from lthn/blockchain
Code Pull requests Activity

reduced delay of hiding balance tooltip

Browse source
This commit is contained in:
wildkif 2019-05-31 16:22:13 +03:00
parent 973402ad36
commit e9766aea65
5 changed files with 48 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/gui/qt-daemon/html/main.js
View file

@ -474,6 +474,7 @@ var TooltipDirective = /** @class */ (function () {
this.timeout = 0;
this.delay = 0;
this.showWhenNoOverflow = true;
this.onHide = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
}
TooltipDirective.prototype.onMouseEnter = function () {
if (this.showWhenNoOverflow || (!this.showWhenNoOverflow && this.el.nativeElement.offsetWidth < this.el.nativeElement.scrollWidth)) {
@ -502,7 +503,10 @@ var TooltipDirective = /** @class */ (function () {
_this.renderer.setStyle(_this.tooltip, 'opacity', '0');
_this.removeTooltipTimeoutInner = setTimeout(function () {
_this.renderer.removeChild(document.body, _this.tooltip);
_this.tooltip.removeEventListener('mouseenter', _this.enter);
_this.tooltip.removeEventListener('mouseleave', _this.leave);
_this.tooltip = null;
_this.onHide.emit(true);
}, _this.delay);
}, this.timeout);
};
@ -525,14 +529,16 @@ var TooltipDirective = /** @class */ (function () {
this.renderer.addClass(innerBlock, 'scrolled-content');
this.renderer.appendChild(this.tooltip, innerBlock);
this.renderer.appendChild(document.body, this.tooltip);
this.tooltip.addEventListener('mouseenter', function () {
this.enter = function () {
_this.cancelHide();
});
this.tooltip.addEventListener('mouseleave', function () {
};
this.tooltip.addEventListener('mouseenter', this.enter);
this.leave = function () {
if (_this.tooltip) {
_this.hide();
}
});
};
this.tooltip.addEventListener('mouseleave', this.leave);
this.renderer.setStyle(document.body, 'position', 'relative');
this.renderer.setStyle(this.tooltip, 'position', 'absolute');
if (this.tooltipClass !== null) {
@ -698,6 +704,10 @@ var TooltipDirective = /** @class */ (function () {
Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
__metadata("design:type", Object)
], TooltipDirective.prototype, "showWhenNoOverflow", void 0);
__decorate([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
__metadata("design:type", Object)
], TooltipDirective.prototype, "onHide", void 0);
__decorate([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostListener"])('mouseenter'),
__metadata("design:type", Function),
@ -7292,7 +7302,7 @@ var WalletDetailsComponent = /** @class */ (function () {
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = "<div class=\"header\">\r\n <div>\r\n <h3 tooltip=\"{{ variablesService.currentWallet.name }}\" placement=\"bottom-left\" tooltipClass=\"table-tooltip\" [delay]=\"500\" [showWhenNoOverflow]=\"false\">{{variablesService.currentWallet.name}}</h3>\r\n <button [routerLink]=\"['/assign-alias']\" *ngIf=\"!variablesService.currentWallet.alias.hasOwnProperty('name') && variablesService.currentWallet.loaded && variablesService.daemon_state === 2 && variablesService.currentWallet.alias_available\">\r\n <i class=\"icon account\"></i>\r\n <span>{{ 'WALLET.REGISTER_ALIAS' | translate }}</span>\r\n </button>\r\n <div class=\"alias\" *ngIf=\"variablesService.currentWallet.alias.hasOwnProperty('name') && variablesService.currentWallet.loaded && variablesService.daemon_state === 2\">\r\n <span>{{variablesService.currentWallet.alias['name']}}</span>\r\n <ng-container *ngIf=\"variablesService.currentWallet.alias_available\">\r\n <i class=\"icon edit\" [routerLink]=\"['/edit-alias']\"></i>\r\n <i class=\"icon transfer\" [routerLink]=\"['/transfer-alias']\"></i>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div>\r\n <button [routerLink]=\"['/details']\" routerLinkActive=\"active\">\r\n <i class=\"icon details\"></i>\r\n <span>{{ 'WALLET.DETAILS' | translate }}</span>\r\n </button>\r\n </div>\r\n</div>\r\n<div class=\"address\">\r\n <span>{{variablesService.currentWallet.address}}</span>\r\n <i class=\"icon\" [class.copy]=\"!copyAnimation\" [class.copied]=\"copyAnimation\" (click)=\"copyAddress()\"></i>\r\n</div>\r\n<div class=\"balance\">\r\n <span [tooltip]=\"getTooltip()\" [placement]=\"'bottom'\" [tooltipClass]=\"'balance-tooltip'\" [delay]=\"300\" [timeout]=\"0\">{{variablesService.currentWallet.balance | intToMoney : '3'}} {{variablesService.defaultCurrency}}</span>\r\n <span>$ {{variablesService.currentWallet.getMoneyEquivalent(variablesService.moneyEquivalent) | intToMoney | number : '1.2-2'}}</span>\r\n</div>\r\n<div class=\"tabs\">\r\n <div class=\"tabs-header\">\r\n <ng-container *ngFor=\"let tab of tabs; let index = index\">\r\n <div class=\"tab\" [class.active]=\"tab.active\" [class.disabled]=\"(tab.link === '/send' || tab.link === '/contracts' || tab.link === '/staking') && (variablesService.daemon_state !== 2 || !variablesService.currentWallet.loaded)\" (click)=\"changeTab(index)\">\r\n <i class=\"icon\" [ngClass]=\"tab.icon\"></i>\r\n <span>{{ tab.title | translate }}</span>\r\n <span class=\"indicator\" *ngIf=\"tab.indicator\">{{variablesService.currentWallet.new_contracts}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div #scrolledContent class=\"tabs-content scrolled-content\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n</div>\r\n\r\n"
module.exports = "<div class=\"header\">\r\n <div>\r\n <h3 tooltip=\"{{ variablesService.currentWallet.name }}\" placement=\"bottom-left\" tooltipClass=\"table-tooltip\" [delay]=\"500\" [showWhenNoOverflow]=\"false\">{{variablesService.currentWallet.name}}</h3>\r\n <button [routerLink]=\"['/assign-alias']\" *ngIf=\"!variablesService.currentWallet.alias.hasOwnProperty('name') && variablesService.currentWallet.loaded && variablesService.daemon_state === 2 && variablesService.currentWallet.alias_available\">\r\n <i class=\"icon account\"></i>\r\n <span>{{ 'WALLET.REGISTER_ALIAS' | translate }}</span>\r\n </button>\r\n <div class=\"alias\" *ngIf=\"variablesService.currentWallet.alias.hasOwnProperty('name') && variablesService.currentWallet.loaded && variablesService.daemon_state === 2\">\r\n <span>{{variablesService.currentWallet.alias['name']}}</span>\r\n <ng-container *ngIf=\"variablesService.currentWallet.alias_available\">\r\n <i class=\"icon edit\" [routerLink]=\"['/edit-alias']\"></i>\r\n <i class=\"icon transfer\" [routerLink]=\"['/transfer-alias']\"></i>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div>\r\n <button [routerLink]=\"['/details']\" routerLinkActive=\"active\">\r\n <i class=\"icon details\"></i>\r\n <span>{{ 'WALLET.DETAILS' | translate }}</span>\r\n </button>\r\n </div>\r\n</div>\r\n<div class=\"address\">\r\n <span>{{variablesService.currentWallet.address}}</span>\r\n <i class=\"icon\" [class.copy]=\"!copyAnimation\" [class.copied]=\"copyAnimation\" (click)=\"copyAddress()\"></i>\r\n</div>\r\n<div class=\"balance\">\r\n <span [tooltip]=\"getTooltip()\" [placement]=\"'bottom'\" [tooltipClass]=\"'balance-tooltip'\" [delay]=\"150\" [timeout]=\"0\" (onHide)=\"onHideTooltip()\">{{variablesService.currentWallet.balance | intToMoney : '3'}} {{variablesService.defaultCurrency}}</span>\r\n <span>$ {{variablesService.currentWallet.getMoneyEquivalent(variablesService.moneyEquivalent) | intToMoney | number : '1.2-2'}}</span>\r\n</div>\r\n<div class=\"tabs\">\r\n <div class=\"tabs-header\">\r\n <ng-container *ngFor=\"let tab of tabs; let index = index\">\r\n <div class=\"tab\" [class.active]=\"tab.active\" [class.disabled]=\"(tab.link === '/send' || tab.link === '/contracts' || tab.link === '/staking') && (variablesService.daemon_state !== 2 || !variablesService.currentWallet.loaded)\" (click)=\"changeTab(index)\">\r\n <i class=\"icon\" [ngClass]=\"tab.icon\"></i>\r\n <span>{{ tab.title | translate }}</span>\r\n <span class=\"indicator\" *ngIf=\"tab.indicator\">{{variablesService.currentWallet.new_contracts}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div #scrolledContent class=\"tabs-content scrolled-content\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n</div>\r\n\r\n"
/***/ }),
@ -7444,23 +7454,26 @@ var WalletComponent = /** @class */ (function () {
};
WalletComponent.prototype.getTooltip = function () {
var _this = this;
var tooltip = document.createElement('div');
this.balanceTooltip = document.createElement('div');
var available = document.createElement('span');
available.setAttribute('class', 'available');
available.innerHTML = this.translate.instant('WALLET.AVAILABLE_BALANCE', { available: this.intToMoneyPipe.transform(this.variablesService.currentWallet.unlocked_balance), currency: this.variablesService.defaultCurrency });
tooltip.appendChild(available);
this.balanceTooltip.appendChild(available);
var locked = document.createElement('span');
locked.setAttribute('class', 'locked');
locked.innerHTML = this.translate.instant('WALLET.LOCKED_BALANCE', { locked: this.intToMoneyPipe.transform(this.variablesService.currentWallet.balance.minus(this.variablesService.currentWallet.unlocked_balance)), currency: this.variablesService.defaultCurrency });
tooltip.appendChild(locked);
this.balanceTooltip.appendChild(locked);
var link = document.createElement('span');
link.setAttribute('class', 'link');
link.innerHTML = this.translate.instant('WALLET.LOCKED_BALANCE_LINK');
link.addEventListener('click', function () {
_this.openInBrowser('docs.zano.org/docs/locked-balance');
});
tooltip.appendChild(link);
return tooltip;
this.balanceTooltip.appendChild(link);
return this.balanceTooltip;
};
WalletComponent.prototype.onHideTooltip = function () {
this.balanceTooltip = null;
};
WalletComponent.prototype.openInBrowser = function (link) {
this.backend.openUrlInBrowser(link);

2
src/gui/qt-daemon/html/main.js.map
View file

File diff suppressed because one or more lines are too long

18
src/gui/qt-daemon/html_source/src/app/_helpers/directives/tooltip.directive.ts
View file

@ -1,4 +1,4 @@
import {Directive, Input, ElementRef, HostListener, Renderer2, HostBinding, OnDestroy} from '@angular/core';
import {Directive, Input, Output, ElementRef, HostListener, Renderer2, HostBinding, OnDestroy, EventEmitter} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
@Directive({
@ -15,7 +15,10 @@ export class TooltipDirective implements OnDestroy {
@Input() timeout = 0;
@Input() delay = 0;
@Input() showWhenNoOverflow = true;
@Output() onHide = new EventEmitter<boolean>();
tooltip: HTMLElement;
private enter: (event: MouseEvent) => void;
private leave: (event: MouseEvent) => void;
removeTooltipTimeout;
removeTooltipTimeoutInner;
@ -51,7 +54,10 @@ export class TooltipDirective implements OnDestroy {
this.renderer.setStyle(this.tooltip, 'opacity', '0');
this.removeTooltipTimeoutInner = setTimeout(() => {
this.renderer.removeChild(document.body, this.tooltip);
this.tooltip.removeEventListener('mouseenter', this.enter);
this.tooltip.removeEventListener('mouseleave', this.leave);
this.tooltip = null;
this.onHide.emit(true);
}, this.delay);
}, this.timeout);
}
@ -75,14 +81,16 @@ export class TooltipDirective implements OnDestroy {
this.renderer.appendChild(this.tooltip, innerBlock);
this.renderer.appendChild(document.body, this.tooltip);
this.tooltip.addEventListener('mouseenter', () => {
this.enter = () => {
this.cancelHide();
});
this.tooltip.addEventListener('mouseleave', () => {
};
this.tooltip.addEventListener('mouseenter', this.enter);
this.leave = () => {
if (this.tooltip) {
this.hide();
}
});
};
this.tooltip.addEventListener('mouseleave', this.leave);
this.renderer.setStyle(document.body, 'position', 'relative');
this.renderer.setStyle(this.tooltip, 'position', 'absolute');

2
src/gui/qt-daemon/html_source/src/app/wallet/wallet.component.html
View file

@ -25,7 +25,7 @@
<i class="icon" [class.copy]="!copyAnimation" [class.copied]="copyAnimation" (click)="copyAddress()"></i>
</div>
<div class="balance">
<span [tooltip]="getTooltip()" [placement]="'bottom'" [tooltipClass]="'balance-tooltip'" [delay]="300" [timeout]="0">{{variablesService.currentWallet.balance | intToMoney : '3'}} {{variablesService.defaultCurrency}}</span>
<span [tooltip]="getTooltip()" [placement]="'bottom'" [tooltipClass]="'balance-tooltip'" [delay]="150" [timeout]="0" (onHide)="onHideTooltip()">{{variablesService.currentWallet.balance | intToMoney : '3'}} {{variablesService.defaultCurrency}}</span>
<span>$ {{variablesService.currentWallet.getMoneyEquivalent(variablesService.moneyEquivalent) | intToMoney | number : '1.2-2'}}</span>
</div>
<div class="tabs">

15
src/gui/qt-daemon/html_source/src/app/wallet/wallet.component.ts
View file

@ -17,6 +17,7 @@ export class WalletComponent implements OnInit, OnDestroy {
walletID;
copyAnimation = false;
copyAnimationTimeout;
balanceTooltip;
@ViewChild('scrolledContent') private scrolledContent: ElementRef;
@ -126,23 +127,27 @@ export class WalletComponent implements OnInit, OnDestroy {
}
getTooltip() {
const tooltip = document.createElement('div');
this.balanceTooltip = document.createElement('div');
const available = document.createElement('span');
available.setAttribute('class', 'available');
available.innerHTML = this.translate.instant('WALLET.AVAILABLE_BALANCE', {available: this.intToMoneyPipe.transform(this.variablesService.currentWallet.unlocked_balance), currency: this.variablesService.defaultCurrency});
tooltip.appendChild(available);
this.balanceTooltip.appendChild(available);
const locked = document.createElement('span');
locked.setAttribute('class', 'locked');
locked.innerHTML = this.translate.instant('WALLET.LOCKED_BALANCE', {locked: this.intToMoneyPipe.transform(this.variablesService.currentWallet.balance.minus(this.variablesService.currentWallet.unlocked_balance)), currency: this.variablesService.defaultCurrency});
tooltip.appendChild(locked);
this.balanceTooltip.appendChild(locked);
const link = document.createElement('span');
link.setAttribute('class', 'link');
link.innerHTML = this.translate.instant('WALLET.LOCKED_BALANCE_LINK');
link.addEventListener('click', () => {
this.openInBrowser('docs.zano.org/docs/locked-balance');
});
tooltip.appendChild(link);
return tooltip;
this.balanceTooltip.appendChild(link);
return this.balanceTooltip;
}
onHideTooltip() {
this.balanceTooltip = null;
}
openInBrowser(link) {