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

Merge remote-tracking branch 'origin/frontend'

Browse source
This commit is contained in:
wildkif 2019-02-22 16:23:15 +02:00
commit 0671e590cb
10 changed files with 331 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/gui/qt-daemon/html/assets/scss/base/_base.scss
View file

@ -321,6 +321,23 @@ input[type='checkbox'].style-checkbox {
&.ng-tooltip-top {
margin-top: -1rem;
&:before {
content: "";
position: absolute;
bottom: -2rem;
left: calc(50% - 1rem);
border-width: 1rem;
border-style: solid;
@include themify($themes) {
border-color: themed(tooltipBackgroundColor) transparent transparent transparent;
}
}
}
&.ng-tooltip-top-left {
margin-top: -1rem;
&:before {
content: "";
position: absolute;
@ -335,19 +352,70 @@ input[type='checkbox'].style-checkbox {
}
}
&.ng-tooltip-top-right {
margin-top: -1rem;
&:before {
content: "";
position: absolute;
bottom: -1rem;
right: 0.7rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: themed(tooltipBackgroundColor) themed(tooltipBackgroundColor) transparent transparent;
}
}
}
&.ng-tooltip-bottom {
margin-top: 1rem;
&:before {
content: "";
position: absolute;
top: -2rem;
left: calc(50% - 1rem);
border-width: 1rem;
border-style: solid;
@include themify($themes) {
border-color: transparent transparent themed(tooltipBackgroundColor) transparent;
}
}
}
&.ng-tooltip-bottom-left {
margin-top: 1rem;
&:before {
content: "";
position: absolute;
top: -1rem;
left: 0.7rem;
border-width: 1rem 0 0 1rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: transparent transparent transparent themed(tooltipBackgroundColor);
border-color: transparent transparent themed(tooltipBackgroundColor) themed(tooltipBackgroundColor);
}
}
}
&.ng-tooltip-bottom-right {
margin-top: 1rem;
&:before {
content: "";
position: absolute;
top: -1rem;
right: 0.7rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: transparent themed(tooltipBackgroundColor) themed(tooltipBackgroundColor) transparent;
}
}
}

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

@ -375,7 +375,8 @@ var TooltipDirective = /** @class */ (function () {
};
TooltipDirective.prototype.show = function () {
this.create();
this.setPosition();
this.placement = this.placement === null ? 'top' : this.placement;
this.setPosition(this.placement);
};
TooltipDirective.prototype.hide = function () {
var _this = this;
@ -418,13 +419,6 @@ var TooltipDirective = /** @class */ (function () {
this.renderer.addClass(this.tooltip, classes[i]);
}
}
if (this.placement !== null) {
this.renderer.addClass(this.tooltip, 'ng-tooltip-' + this.placement);
}
else {
this.placement = 'top';
this.renderer.addClass(this.tooltip, 'ng-tooltip-top');
}
this.renderer.setStyle(this.tooltip, 'opacity', '0');
this.renderer.setStyle(this.tooltip, '-webkit-transition', "opacity " + this.delay + "ms");
this.renderer.setStyle(this.tooltip, '-moz-transition', "opacity " + this.delay + "ms");
@ -434,32 +428,100 @@ var TooltipDirective = /** @class */ (function () {
_this.renderer.setStyle(_this.tooltip, 'opacity', '1');
}, 0);
};
TooltipDirective.prototype.setPosition = function () {
TooltipDirective.prototype.setPosition = function (placement) {
var hostPos = this.el.nativeElement.getBoundingClientRect();
// const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if (this.placement === 'top') {
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + 'px');
this.renderer.setStyle(this.tooltip, 'top', hostPos.top - this.tooltip.getBoundingClientRect().height + 'px');
this.renderer.addClass(this.tooltip, 'ng-tooltip-' + placement);
var topExit = hostPos.top - this.tooltip.getBoundingClientRect().height - parseInt(getComputedStyle(this.tooltip).marginTop, 10) < 0;
var bottomExit = window.innerHeight < hostPos.bottom + this.tooltip.getBoundingClientRect().height + parseInt(getComputedStyle(this.tooltip).marginTop, 10);
switch (placement) {
case 'top':
if (topExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('bottom');
return;
}
else {
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + (hostPos.right - hostPos.left) / 2 - this.tooltip.getBoundingClientRect().width / 2 + 'px');
this.renderer.setStyle(this.tooltip, 'top', hostPos.top - this.tooltip.getBoundingClientRect().height + 'px');
this.checkSides();
}
break;
case 'top-left':
if (topExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('bottom-left');
return;
}
else {
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + 'px');
this.renderer.setStyle(this.tooltip, 'top', hostPos.top - this.tooltip.getBoundingClientRect().height + 'px');
this.checkSides();
}
break;
case 'top-right':
if (topExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('bottom-right');
return;
}
else {
this.renderer.setStyle(this.tooltip, 'left', hostPos.right - this.tooltip.offsetWidth + 'px');
this.renderer.setStyle(this.tooltip, 'top', hostPos.top - this.tooltip.getBoundingClientRect().height + 'px');
this.checkSides();
}
break;
case 'bottom':
if (bottomExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('top');
return;
}
else {
this.renderer.setStyle(this.tooltip, 'top', hostPos.bottom + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + (hostPos.right - hostPos.left) / 2 - this.tooltip.getBoundingClientRect().width / 2 + 'px');
this.checkSides();
}
break;
case 'bottom-left':
if (bottomExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('top-left');
return;
}
else {
this.renderer.setStyle(this.tooltip, 'top', hostPos.bottom + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + 'px');
this.checkSides();
}
break;
case 'bottom-right':
if (bottomExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('top-right');
return;
}
else {
this.renderer.setStyle(this.tooltip, 'top', hostPos.bottom + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.right - this.tooltip.offsetWidth + 'px');
this.checkSides();
}
break;
case 'left':
this.renderer.setStyle(this.tooltip, 'top', hostPos.top + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left - this.tooltip.getBoundingClientRect().width + 'px');
break;
case 'right':
this.renderer.setStyle(this.tooltip, 'top', hostPos.top + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.right + 'px');
break;
}
if (this.placement === 'bottom') {
if (window.innerHeight < hostPos.bottom + this.tooltip.offsetHeight + parseInt(getComputedStyle(this.tooltip).marginTop, 10)) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-bottom');
this.renderer.addClass(this.tooltip, 'ng-tooltip-top');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + 'px');
this.renderer.setStyle(this.tooltip, 'top', hostPos.top - this.tooltip.getBoundingClientRect().height + 'px');
}
else {
this.renderer.setStyle(this.tooltip, 'top', hostPos.bottom + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + 'px');
}
};
TooltipDirective.prototype.checkSides = function () {
if (this.tooltip.getBoundingClientRect().left < 0) {
this.renderer.setStyle(this.tooltip, 'left', 0);
}
if (this.placement === 'left') {
this.renderer.setStyle(this.tooltip, 'top', hostPos.top + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left - this.tooltip.getBoundingClientRect().width + 'px');
}
if (this.placement === 'right') {
this.renderer.setStyle(this.tooltip, 'top', hostPos.top + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.right + 'px');
if (this.tooltip.getBoundingClientRect().right > window.innerWidth) {
this.renderer.setStyle(this.tooltip, 'left', window.innerWidth - this.tooltip.getBoundingClientRect().width + 'px');
}
};
TooltipDirective.prototype.ngOnDestroy = function () {
@ -3292,7 +3354,7 @@ var AppModule = /** @class */ (function () {
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = "<div class=\"content\">\r\n\r\n <div class=\"head\">\r\n <div class=\"breadcrumbs\">\r\n <span [routerLink]=\"['/wallet/' + wallet.wallet_id + '/history']\">{{ wallet.name }}</span>\r\n <span>{{ 'BREADCRUMBS.ASSIGN_ALIAS' | translate }}</span>\r\n </div>\r\n <button class=\"back-btn\" (click)=\"back()\">\r\n <i class=\"icon back\"></i>\r\n <span>{{ 'COMMON.BACK' | translate }}</span>\r\n </button>\r\n </div>\r\n\r\n <form class=\"form-assign\" [formGroup]=\"assignForm\">\r\n\r\n <div class=\"input-block alias-name\">\r\n <label for=\"alias-name\" tooltip=\"{{ 'ASSIGN_ALIAS.NAME.TOOLTIP' | translate }}\" placement=\"bottom\" tooltipClass=\"table-tooltip assign-alias-tooltip\" [delay]=\"500\">\r\n {{ 'ASSIGN_ALIAS.NAME.LABEL' | translate }}\r\n </label>\r\n <input type=\"text\" id=\"alias-name\" formControlName=\"name\" placeholder=\"{{ 'ASSIGN_ALIAS.NAME.PLACEHOLDER' | translate }}\" (contextmenu)=\"variablesService.onContextMenu($event)\">\r\n <div class=\"error-block\" *ngIf=\"assignForm.controls['name'].invalid && (assignForm.controls['name'].dirty || assignForm.controls['name'].touched)\">\r\n <div *ngIf=\"assignForm.controls['name'].errors['required']\">\r\n {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_REQUIRED' | translate }}\r\n </div>\r\n <div *ngIf=\"assignForm.controls['name'].errors['pattern'] && assignForm.get('name').value.length > 6 && assignForm.get('name').value.length <= 25\">\r\n {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_WRONG' | translate }}\r\n </div>\r\n <div *ngIf=\"assignForm.get('name').value.length <= 6 || assignForm.get('name').value.length > 25\">\r\n {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_LENGTH' | translate }}\r\n </div>\r\n </div>\r\n <div class=\"error-block\" *ngIf=\"alias.exists\">\r\n <div>\r\n {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_EXISTS' | translate }}\r\n </div>\r\n </div>\r\n <div class=\"error-block\" *ngIf=\"notEnoughMoney\">\r\n <div>\r\n {{ 'ASSIGN_ALIAS.FORM_ERRORS.NO_MONEY' | translate }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"input-block textarea\">\r\n <label for=\"alias-comment\" tooltip=\"{{ 'ASSIGN_ALIAS.COMMENT.TOOLTIP' | translate }}\" placement=\"bottom\" tooltipClass=\"table-tooltip assign-alias-tooltip\" [delay]=\"500\">\r\n {{ 'ASSIGN_ALIAS.COMMENT.LABEL' | translate }}\r\n </label>\r\n <textarea id=\"alias-comment\" formControlName=\"comment\" placeholder=\"{{ 'ASSIGN_ALIAS.COMMENT.PLACEHOLDER' | translate }}\" (contextmenu)=\"variablesService.onContextMenu($event)\"></textarea>\r\n </div>\r\n\r\n <div class=\"alias-cost\">{{ \"ASSIGN_ALIAS.COST\" | translate : {value: alias.price | intToMoney, currency: variablesService.defaultCurrency} }}</div>\r\n\r\n <div class=\"wrap-buttons\">\r\n <button type=\"button\" class=\"blue-button\" (click)=\"assignAlias()\" [disabled]=\"!assignForm.valid || !canRegister || notEnoughMoney\">{{ 'ASSIGN_ALIAS.BUTTON_ASSIGN' | translate }}</button>\r\n <button type=\"button\" class=\"blue-button\" (click)=\"back()\">{{ 'ASSIGN_ALIAS.BUTTON_CANCEL' | translate }}</button>\r\n </div>\r\n\r\n </form>\r\n\r\n</div>\r\n\r\n"
module.exports = "<div class=\"content\">\r\n\r\n <div class=\"head\">\r\n <div class=\"breadcrumbs\">\r\n <span [routerLink]=\"['/wallet/' + wallet.wallet_id + '/history']\">{{ wallet.name }}</span>\r\n <span>{{ 'BREADCRUMBS.ASSIGN_ALIAS' | translate }}</span>\r\n </div>\r\n <button class=\"back-btn\" (click)=\"back()\">\r\n <i class=\"icon back\"></i>\r\n <span>{{ 'COMMON.BACK' | translate }}</span>\r\n </button>\r\n </div>\r\n\r\n <form class=\"form-assign\" [formGroup]=\"assignForm\">\r\n\r\n <div class=\"input-block alias-name\">\r\n <label for=\"alias-name\" tooltip=\"{{ 'ASSIGN_ALIAS.NAME.TOOLTIP' | translate }}\" placement=\"bottom-left\" tooltipClass=\"table-tooltip assign-alias-tooltip\" [delay]=\"500\">\r\n {{ 'ASSIGN_ALIAS.NAME.LABEL' | translate }}\r\n </label>\r\n <input type=\"text\" id=\"alias-name\" formControlName=\"name\" placeholder=\"{{ 'ASSIGN_ALIAS.NAME.PLACEHOLDER' | translate }}\" (contextmenu)=\"variablesService.onContextMenu($event)\">\r\n <div class=\"error-block\" *ngIf=\"assignForm.controls['name'].invalid && (assignForm.controls['name'].dirty || assignForm.controls['name'].touched)\">\r\n <div *ngIf=\"assignForm.controls['name'].errors['required']\">\r\n {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_REQUIRED' | translate }}\r\n </div>\r\n <div *ngIf=\"assignForm.controls['name'].errors['pattern'] && assignForm.get('name').value.length > 6 && assignForm.get('name').value.length <= 25\">\r\n {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_WRONG' | translate }}\r\n </div>\r\n <div *ngIf=\"assignForm.get('name').value.length <= 6 || assignForm.get('name').value.length > 25\">\r\n {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_LENGTH' | translate }}\r\n </div>\r\n </div>\r\n <div class=\"error-block\" *ngIf=\"alias.exists\">\r\n <div>\r\n {{ 'ASSIGN_ALIAS.FORM_ERRORS.NAME_EXISTS' | translate }}\r\n </div>\r\n </div>\r\n <div class=\"error-block\" *ngIf=\"notEnoughMoney\">\r\n <div>\r\n {{ 'ASSIGN_ALIAS.FORM_ERRORS.NO_MONEY' | translate }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"input-block textarea\">\r\n <label for=\"alias-comment\" tooltip=\"{{ 'ASSIGN_ALIAS.COMMENT.TOOLTIP' | translate }}\" placement=\"bottom-left\" tooltipClass=\"table-tooltip assign-alias-tooltip\" [delay]=\"500\">\r\n {{ 'ASSIGN_ALIAS.COMMENT.LABEL' | translate }}\r\n </label>\r\n <textarea id=\"alias-comment\" formControlName=\"comment\" placeholder=\"{{ 'ASSIGN_ALIAS.COMMENT.PLACEHOLDER' | translate }}\" (contextmenu)=\"variablesService.onContextMenu($event)\"></textarea>\r\n </div>\r\n\r\n <div class=\"alias-cost\">{{ \"ASSIGN_ALIAS.COST\" | translate : {value: alias.price | intToMoney, currency: variablesService.defaultCurrency} }}</div>\r\n\r\n <div class=\"wrap-buttons\">\r\n <button type=\"button\" class=\"blue-button\" (click)=\"assignAlias()\" [disabled]=\"!assignForm.valid || !canRegister || notEnoughMoney\">{{ 'ASSIGN_ALIAS.BUTTON_ASSIGN' | translate }}</button>\r\n <button type=\"button\" class=\"blue-button\" (click)=\"back()\">{{ 'ASSIGN_ALIAS.BUTTON_CANCEL' | translate }}</button>\r\n </div>\r\n\r\n </form>\r\n\r\n</div>\r\n\r\n"
/***/ }),
@ -3468,7 +3530,7 @@ var AssignAliasComponent = /** @class */ (function () {
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = "<div class=\"empty-contracts\" *ngIf=\"!variablesService.currentWallet.contracts.length\">\r\n <span>{{ 'CONTRACTS.EMPTY' | translate }}</span>\r\n</div>\r\n\r\n<div class=\"wrap-table scrolled-content\" *ngIf=\"variablesService.currentWallet.contracts.length\">\r\n\r\n <table class=\"contracts-table\">\r\n <thead>\r\n <tr>\r\n <th>{{ 'CONTRACTS.CONTRACTS' | translate }}</th>\r\n <th>{{ 'CONTRACTS.DATE' | translate }}</th>\r\n <th>{{ 'CONTRACTS.AMOUNT' | translate }}</th>\r\n <th>{{ 'CONTRACTS.STATUS' | translate }}</th>\r\n <th>{{ 'CONTRACTS.COMMENTS' | translate }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of variablesService.currentWallet.contracts\" [routerLink]=\"'/wallet/' + walletId + '/purchase/' + item.contract_id\">\r\n <td>\r\n <div class=\"contract\">\r\n <i class=\"icon alert\" *ngIf=\"!item.is_new\"></i>\r\n <i class=\"icon new\" *ngIf=\"item.is_new\"></i>\r\n <i class=\"icon\" [class.purchase]=\"item.is_a\" [class.sell]=\"!item.is_a\"></i>\r\n <span tooltip=\"{{ item.private_detailes.t }}\" placement=\"top\" tooltipClass=\"table-tooltip\" [delay]=\"500\">{{item.private_detailes.t}}</span>\r\n </div>\r\n </td>\r\n <td>\r\n <div>{{item.timestamp * 1000 | date : 'dd-MM-yyyy HH:mm'}}</div>\r\n </td>\r\n <td>\r\n <div>{{item.private_detailes.to_pay | intToMoney}} {{variablesService.defaultCurrency}}</div>\r\n </td>\r\n <td>\r\n <div class=\"status\" tooltip=\"{{ item | contractStatusMessages }}\" placement=\"top\" tooltipClass=\"table-tooltip\" [delay]=\"500\">\r\n {{item | contractStatusMessages}}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"comment\" tooltip=\"{{ item.private_detailes.c }}\" placement=\"top\" tooltipClass=\"table-tooltip\" [delay]=\"500\">\r\n {{item.private_detailes.c}}\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n</div>\r\n\r\n<div class=\"contracts-buttons\">\r\n <button type=\"button\" class=\"blue-button\" [routerLink]=\"'/wallet/' + walletId + '/purchase'\">{{ 'CONTRACTS.PURCHASE_BUTTON' | translate }}</button>\r\n <button type=\"button\" class=\"blue-button\" disabled>{{ 'CONTRACTS.LISTING_BUTTON' | translate }}</button>\r\n</div>\r\n"
module.exports = "<div class=\"empty-contracts\" *ngIf=\"!variablesService.currentWallet.contracts.length\">\r\n <span>{{ 'CONTRACTS.EMPTY' | translate }}</span>\r\n</div>\r\n\r\n<div class=\"wrap-table scrolled-content\" *ngIf=\"variablesService.currentWallet.contracts.length\">\r\n\r\n <table class=\"contracts-table\">\r\n <thead>\r\n <tr>\r\n <th>{{ 'CONTRACTS.CONTRACTS' | translate }}</th>\r\n <th>{{ 'CONTRACTS.DATE' | translate }}</th>\r\n <th>{{ 'CONTRACTS.AMOUNT' | translate }}</th>\r\n <th>{{ 'CONTRACTS.STATUS' | translate }}</th>\r\n <th>{{ 'CONTRACTS.COMMENTS' | translate }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of variablesService.currentWallet.contracts\" [routerLink]=\"'/wallet/' + walletId + '/purchase/' + item.contract_id\">\r\n <td>\r\n <div class=\"contract\">\r\n <i class=\"icon alert\" *ngIf=\"!item.is_new\"></i>\r\n <i class=\"icon new\" *ngIf=\"item.is_new\"></i>\r\n <i class=\"icon\" [class.purchase]=\"item.is_a\" [class.sell]=\"!item.is_a\"></i>\r\n <span tooltip=\"{{ item.private_detailes.t }}\" placement=\"top-left\" tooltipClass=\"table-tooltip\" [delay]=\"500\" [showWhenNoOverflow]=\"false\">{{item.private_detailes.t}}</span>\r\n </div>\r\n </td>\r\n <td>\r\n <div>{{item.timestamp * 1000 | date : 'dd-MM-yyyy HH:mm'}}</div>\r\n </td>\r\n <td>\r\n <div>{{item.private_detailes.to_pay | intToMoney}} {{variablesService.defaultCurrency}}</div>\r\n </td>\r\n <td>\r\n <div class=\"status\" tooltip=\"{{ item | contractStatusMessages }}\" placement=\"top\" tooltipClass=\"table-tooltip\" [delay]=\"500\">\r\n {{item | contractStatusMessages}}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"comment\" tooltip=\"{{ item.private_detailes.c }}\" placement=\"top-right\" tooltipClass=\"table-tooltip\" [delay]=\"500\">\r\n {{item.private_detailes.c}}\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n</div>\r\n\r\n<div class=\"contracts-buttons\">\r\n <button type=\"button\" class=\"blue-button\" [routerLink]=\"'/wallet/' + walletId + '/purchase'\">{{ 'CONTRACTS.PURCHASE_BUTTON' | translate }}</button>\r\n <button type=\"button\" class=\"blue-button\" disabled>{{ 'CONTRACTS.LISTING_BUTTON' | translate }}</button>\r\n</div>\r\n"
/***/ }),
@ -3803,7 +3865,7 @@ var EditAliasComponent = /** @class */ (function () {
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = "<div class=\"wrap-table\">\r\n\r\n <table class=\"history-table\">\r\n <thead>\r\n <tr #head (window:resize)=\"calculateWidth()\">\r\n <th>{{ 'HISTORY.STATUS' | translate }}</th>\r\n <th>{{ 'HISTORY.DATE' | translate }}</th>\r\n <th>{{ 'HISTORY.AMOUNT' | translate }}</th>\r\n <th>{{ 'HISTORY.FEE' | translate }}</th>\r\n <th>{{ 'HISTORY.ADDRESS' | translate }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let item of variablesService.currentWallet.history\">\r\n <tr (click)=\"openDetails(item.tx_hash)\">\r\n <td>\r\n <div class=\"status\" [class.send]=\"!item.is_income\" [class.received]=\"item.is_income\">\r\n <ng-container *ngIf=\"variablesService.height_app - item.height < 10 || item.height === 0 && item.timestamp > 0\">\r\n <div class=\"confirmation\" tooltip=\"{{ 'HISTORY.STATUS_TOOLTIP' | translate : {'current': getHeight(item)/10, 'total': 10} }}\" placement=\"bottom\" tooltipClass=\"table-tooltip\" [delay]=\"500\">\r\n <div class=\"fill\" [style.height]=\"getHeight(item) + '%'\"></div>\r\n </div>\r\n </ng-container>\r\n <i class=\"icon\"></i>\r\n <span>{{ (item.is_income ? 'HISTORY.RECEIVED' : 'HISTORY.SEND') | translate }}</span>\r\n </div>\r\n </td>\r\n <td>{{item.timestamp * 1000 | date : 'dd-MM-yyyy HH:mm'}}</td>\r\n <td>\r\n <span *ngIf=\"item.sortAmount && item.sortAmount.toString() !== '0'\">{{item.sortAmount | intToMoney}} {{variablesService.defaultCurrency}}</span>\r\n </td>\r\n <td>\r\n <span *ngIf=\"item.sortFee && item.sortFee.toString() !== '0'\">{{item.sortFee | intToMoney}} {{variablesService.defaultCurrency}}</span>\r\n </td>\r\n <td class=\"remote-address\">\r\n <span *ngIf=\"!(item.tx_type === 0 && item.remote_addresses && item.remote_addresses[0])\">{{item | historyTypeMessages}}</span>\r\n <span *ngIf=\"item.tx_type === 0 && item.remote_addresses && item.remote_addresses[0]\" (contextmenu)=\"variablesService.onContextMenuOnlyCopy($event, item.remote_addresses[0])\">{{item.remote_addresses[0]}}</span>\r\n </td>\r\n </tr>\r\n <tr class=\"transaction-details\" [class.open]=\"item.tx_hash === openedDetails\">\r\n <td colspan=\"5\">\r\n <ng-container *ngIf=\"item.tx_hash === openedDetails\">\r\n <app-transaction-details [transaction]=\"item\" [sizes]=\"calculatedWidth\"></app-transaction-details>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n\r\n</div>\r\n"
module.exports = "<div class=\"wrap-table\">\r\n\r\n <table class=\"history-table\">\r\n <thead>\r\n <tr #head (window:resize)=\"calculateWidth()\">\r\n <th>{{ 'HISTORY.STATUS' | translate }}</th>\r\n <th>{{ 'HISTORY.DATE' | translate }}</th>\r\n <th>{{ 'HISTORY.AMOUNT' | translate }}</th>\r\n <th>{{ 'HISTORY.FEE' | translate }}</th>\r\n <th>{{ 'HISTORY.ADDRESS' | translate }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let item of variablesService.currentWallet.history\">\r\n <tr (click)=\"openDetails(item.tx_hash)\">\r\n <td>\r\n <div class=\"status\" [class.send]=\"!item.is_income\" [class.received]=\"item.is_income\">\r\n <ng-container *ngIf=\"variablesService.height_app - item.height < 10 || item.height === 0 && item.timestamp > 0\">\r\n <div class=\"confirmation\" tooltip=\"{{ 'HISTORY.STATUS_TOOLTIP' | translate : {'current': getHeight(item)/10, 'total': 10} }}\" placement=\"bottom-left\" tooltipClass=\"table-tooltip\" [delay]=\"500\">\r\n <div class=\"fill\" [style.height]=\"getHeight(item) + '%'\"></div>\r\n </div>\r\n </ng-container>\r\n <i class=\"icon\"></i>\r\n <span>{{ (item.is_income ? 'HISTORY.RECEIVED' : 'HISTORY.SEND') | translate }}</span>\r\n </div>\r\n </td>\r\n <td>{{item.timestamp * 1000 | date : 'dd-MM-yyyy HH:mm'}}</td>\r\n <td>\r\n <span *ngIf=\"item.sortAmount && item.sortAmount.toString() !== '0'\">{{item.sortAmount | intToMoney}} {{variablesService.defaultCurrency}}</span>\r\n </td>\r\n <td>\r\n <span *ngIf=\"item.sortFee && item.sortFee.toString() !== '0'\">{{item.sortFee | intToMoney}} {{variablesService.defaultCurrency}}</span>\r\n </td>\r\n <td class=\"remote-address\">\r\n <span *ngIf=\"!(item.tx_type === 0 && item.remote_addresses && item.remote_addresses[0])\">{{item | historyTypeMessages}}</span>\r\n <span *ngIf=\"item.tx_type === 0 && item.remote_addresses && item.remote_addresses[0]\" (contextmenu)=\"variablesService.onContextMenuOnlyCopy($event, item.remote_addresses[0])\">{{item.remote_addresses[0]}}</span>\r\n </td>\r\n </tr>\r\n <tr class=\"transaction-details\" [class.open]=\"item.tx_hash === openedDetails\">\r\n <td colspan=\"5\">\r\n <ng-container *ngIf=\"item.tx_hash === openedDetails\">\r\n <app-transaction-details [transaction]=\"item\" [sizes]=\"calculatedWidth\"></app-transaction-details>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n\r\n</div>\r\n"
/***/ }),

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -42,7 +42,8 @@ export class TooltipDirective implements OnDestroy {
show() {
this.create();
this.setPosition();
this.placement = this.placement === null ? 'top' : this.placement;
this.setPosition(this.placement);
}
hide() {
@ -87,12 +88,6 @@ export class TooltipDirective implements OnDestroy {
this.renderer.addClass(this.tooltip, classes[i]);
}
}
if (this.placement !== null) {
this.renderer.addClass(this.tooltip, 'ng-tooltip-' + this.placement);
} else {
this.placement = 'top';
this.renderer.addClass(this.tooltip, 'ng-tooltip-top');
}
this.renderer.setStyle(this.tooltip, 'opacity', '0');
this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
@ -103,35 +98,96 @@ export class TooltipDirective implements OnDestroy {
}, 0);
}
setPosition() {
setPosition(placement) {
const hostPos = this.el.nativeElement.getBoundingClientRect();
// const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
this.renderer.addClass(this.tooltip, 'ng-tooltip-' + placement);
const topExit = hostPos.top - this.tooltip.getBoundingClientRect().height - parseInt(getComputedStyle(this.tooltip).marginTop, 10) < 0;
const bottomExit = window.innerHeight < hostPos.bottom + this.tooltip.getBoundingClientRect().height + parseInt(getComputedStyle(this.tooltip).marginTop, 10);
if (this.placement === 'top') {
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + 'px');
this.renderer.setStyle(this.tooltip, 'top', hostPos.top - this.tooltip.getBoundingClientRect().height + 'px');
switch (placement) {
case 'top':
if (topExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('bottom');
return;
} else {
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + (hostPos.right - hostPos.left) / 2 - this.tooltip.getBoundingClientRect().width / 2 + 'px');
this.renderer.setStyle(this.tooltip, 'top', hostPos.top - this.tooltip.getBoundingClientRect().height + 'px');
this.checkSides();
}
break;
case 'top-left':
if (topExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('bottom-left');
return;
} else {
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + 'px');
this.renderer.setStyle(this.tooltip, 'top', hostPos.top - this.tooltip.getBoundingClientRect().height + 'px');
this.checkSides();
}
break;
case 'top-right':
if (topExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('bottom-right');
return;
} else {
this.renderer.setStyle(this.tooltip, 'left', hostPos.right - this.tooltip.offsetWidth + 'px');
this.renderer.setStyle(this.tooltip, 'top', hostPos.top - this.tooltip.getBoundingClientRect().height + 'px');
this.checkSides();
}
break;
case 'bottom':
if (bottomExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('top');
return;
} else {
this.renderer.setStyle(this.tooltip, 'top', hostPos.bottom + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + (hostPos.right - hostPos.left) / 2 - this.tooltip.getBoundingClientRect().width / 2 + 'px');
this.checkSides();
}
break;
case 'bottom-left':
if (bottomExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('top-left');
return;
} else {
this.renderer.setStyle(this.tooltip, 'top', hostPos.bottom + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + 'px');
this.checkSides();
}
break;
case 'bottom-right':
if (bottomExit) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-' + placement);
this.setPosition('top-right');
return;
} else {
this.renderer.setStyle(this.tooltip, 'top', hostPos.bottom + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.right - this.tooltip.offsetWidth + 'px');
this.checkSides();
}
break;
case 'left':
this.renderer.setStyle(this.tooltip, 'top', hostPos.top + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left - this.tooltip.getBoundingClientRect().width + 'px');
break;
case 'right':
this.renderer.setStyle(this.tooltip, 'top', hostPos.top + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.right + 'px');
break;
}
}
if (this.placement === 'bottom') {
if (window.innerHeight < hostPos.bottom + this.tooltip.offsetHeight + parseInt(getComputedStyle(this.tooltip).marginTop, 10)) {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-bottom');
this.renderer.addClass(this.tooltip, 'ng-tooltip-top');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + 'px');
this.renderer.setStyle(this.tooltip, 'top', hostPos.top - this.tooltip.getBoundingClientRect().height + 'px');
} else {
this.renderer.setStyle(this.tooltip, 'top', hostPos.bottom + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left + 'px');
}
checkSides() {
if (this.tooltip.getBoundingClientRect().left < 0) {
this.renderer.setStyle(this.tooltip, 'left', 0);
}
if (this.placement === 'left') {
this.renderer.setStyle(this.tooltip, 'top', hostPos.top + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.left - this.tooltip.getBoundingClientRect().width + 'px');
}
if (this.placement === 'right') {
this.renderer.setStyle(this.tooltip, 'top', hostPos.top + 'px');
this.renderer.setStyle(this.tooltip, 'left', hostPos.right + 'px');
if (this.tooltip.getBoundingClientRect().right > window.innerWidth) {
this.renderer.setStyle(this.tooltip, 'left', window.innerWidth - this.tooltip.getBoundingClientRect().width + 'px');
}
}

4
src/gui/qt-daemon/html_source/src/app/assign-alias/assign-alias.component.html
View file

@ -14,7 +14,7 @@
<form class="form-assign" [formGroup]="assignForm">
<div class="input-block alias-name">
<label for="alias-name" tooltip="{{ 'ASSIGN_ALIAS.NAME.TOOLTIP' | translate }}" placement="bottom" tooltipClass="table-tooltip assign-alias-tooltip" [delay]="500">
<label for="alias-name" tooltip="{{ 'ASSIGN_ALIAS.NAME.TOOLTIP' | translate }}" placement="bottom-left" tooltipClass="table-tooltip assign-alias-tooltip" [delay]="500">
{{ 'ASSIGN_ALIAS.NAME.LABEL' | translate }}
</label>
<input type="text" id="alias-name" formControlName="name" placeholder="{{ 'ASSIGN_ALIAS.NAME.PLACEHOLDER' | translate }}" (contextmenu)="variablesService.onContextMenu($event)">
@ -42,7 +42,7 @@
</div>
<div class="input-block textarea">
<label for="alias-comment" tooltip="{{ 'ASSIGN_ALIAS.COMMENT.TOOLTIP' | translate }}" placement="bottom" tooltipClass="table-tooltip assign-alias-tooltip" [delay]="500">
<label for="alias-comment" tooltip="{{ 'ASSIGN_ALIAS.COMMENT.TOOLTIP' | translate }}" placement="bottom-left" tooltipClass="table-tooltip assign-alias-tooltip" [delay]="500">
{{ 'ASSIGN_ALIAS.COMMENT.LABEL' | translate }}
</label>
<textarea id="alias-comment" formControlName="comment" placeholder="{{ 'ASSIGN_ALIAS.COMMENT.PLACEHOLDER' | translate }}" (contextmenu)="variablesService.onContextMenu($event)"></textarea>

4
src/gui/qt-daemon/html_source/src/app/contracts/contracts.component.html
View file

@ -21,7 +21,7 @@
<i class="icon alert" *ngIf="!item.is_new"></i>
<i class="icon new" *ngIf="item.is_new"></i>
<i class="icon" [class.purchase]="item.is_a" [class.sell]="!item.is_a"></i>
<span tooltip="{{ item.private_detailes.t }}" placement="top" tooltipClass="table-tooltip" [delay]="500">{{item.private_detailes.t}}</span>
<span tooltip="{{ item.private_detailes.t }}" placement="top-left" tooltipClass="table-tooltip" [delay]="500" [showWhenNoOverflow]="false">{{item.private_detailes.t}}</span>
</div>
</td>
<td>
@ -36,7 +36,7 @@
</div>
</td>
<td>
<div class="comment" tooltip="{{ item.private_detailes.c }}" placement="top" tooltipClass="table-tooltip" [delay]="500">
<div class="comment" tooltip="{{ item.private_detailes.c }}" placement="top-right" tooltipClass="table-tooltip" [delay]="500">
{{item.private_detailes.c}}
</div>
</td>

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

@ -16,7 +16,7 @@
<td>
<div class="status" [class.send]="!item.is_income" [class.received]="item.is_income">
<ng-container *ngIf="variablesService.height_app - item.height < 10 || item.height === 0 && item.timestamp > 0">
<div class="confirmation" tooltip="{{ 'HISTORY.STATUS_TOOLTIP' | translate : {'current': getHeight(item)/10, 'total': 10} }}" placement="bottom" tooltipClass="table-tooltip" [delay]="500">
<div class="confirmation" tooltip="{{ 'HISTORY.STATUS_TOOLTIP' | translate : {'current': getHeight(item)/10, 'total': 10} }}" placement="bottom-left" tooltipClass="table-tooltip" [delay]="500">
<div class="fill" [style.height]="getHeight(item) + '%'"></div>
</div>
</ng-container>

72
src/gui/qt-daemon/html_source/src/assets/scss/base/_base.scss
View file

@ -321,6 +321,23 @@ input[type='checkbox'].style-checkbox {
&.ng-tooltip-top {
margin-top: -1rem;
&:before {
content: "";
position: absolute;
bottom: -2rem;
left: calc(50% - 1rem);
border-width: 1rem;
border-style: solid;
@include themify($themes) {
border-color: themed(tooltipBackgroundColor) transparent transparent transparent;
}
}
}
&.ng-tooltip-top-left {
margin-top: -1rem;
&:before {
content: "";
position: absolute;
@ -335,19 +352,70 @@ input[type='checkbox'].style-checkbox {
}
}
&.ng-tooltip-top-right {
margin-top: -1rem;
&:before {
content: "";
position: absolute;
bottom: -1rem;
right: 0.7rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: themed(tooltipBackgroundColor) themed(tooltipBackgroundColor) transparent transparent;
}
}
}
&.ng-tooltip-bottom {
margin-top: 1rem;
&:before {
content: "";
position: absolute;
top: -2rem;
left: calc(50% - 1rem);
border-width: 1rem;
border-style: solid;
@include themify($themes) {
border-color: transparent transparent themed(tooltipBackgroundColor) transparent;
}
}
}
&.ng-tooltip-bottom-left {
margin-top: 1rem;
&:before {
content: "";
position: absolute;
top: -1rem;
left: 0.7rem;
border-width: 1rem 0 0 1rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: transparent transparent transparent themed(tooltipBackgroundColor);
border-color: transparent transparent themed(tooltipBackgroundColor) themed(tooltipBackgroundColor);
}
}
}
&.ng-tooltip-bottom-right {
margin-top: 1rem;
&:before {
content: "";
position: absolute;
top: -1rem;
right: 0.7rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: transparent themed(tooltipBackgroundColor) themed(tooltipBackgroundColor) transparent;
}
}
}