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

tooltip improvements

Browse source
This commit is contained in:
wildkif 2019-05-02 17:44:06 +03:00
parent c69d3ab468
commit 64a9a71e05
10 changed files with 146 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -355,9 +355,7 @@ input[type='checkbox'].style-checkbox {
}
.table-tooltip {
font-size: 1.3rem;
padding: 1rem 2rem;
white-space: pre-wrap;
@include themify($themes) {
background: themed(tooltipBackgroundColor);
@ -365,10 +363,16 @@ input[type='checkbox'].style-checkbox {
color: themed(mainTextColor);
}
.tooltip-inner {
font-size: 1.3rem;
line-height: 1.8rem;
white-space: pre-wrap;
}
&.ng-tooltip-top {
margin-top: -1rem;
&:before {
&:after {
content: "";
position: absolute;
bottom: -2rem;
@ -385,7 +389,7 @@ input[type='checkbox'].style-checkbox {
&.ng-tooltip-top-left {
margin-top: -1rem;
&:before {
&:after {
content: "";
position: absolute;
bottom: -1rem;
@ -402,7 +406,7 @@ input[type='checkbox'].style-checkbox {
&.ng-tooltip-top-right {
margin-top: -1rem;
&:before {
&:after {
content: "";
position: absolute;
bottom: -1rem;
@ -470,7 +474,7 @@ input[type='checkbox'].style-checkbox {
&.ng-tooltip-left {
margin-left: -1rem;
&:before {
&:after {
content: "";
position: absolute;
top: 0;
@ -502,10 +506,16 @@ input[type='checkbox'].style-checkbox {
}
}
.table-tooltip-dimensions {
.tooltip-inner {
overflow: auto;
max-width: 20rem;
max-height: 10rem;
}
}
.balance-tooltip {
display: flex;
flex-direction: column;
font-size: 1.3rem;
padding: 1.3rem;
@include themify($themes) {
@ -514,6 +524,36 @@ input[type='checkbox'].style-checkbox {
color: themed(mainTextColor);
}
.tooltip-inner {
display: flex;
flex-direction: column;
font-size: 1.3rem;
.available {
margin-bottom: 1.7rem;
b {
font-weight: 600;
}
}
.locked {
margin-bottom: 0.7rem;
b {
font-weight: 600;
}
}
.link {
cursor: pointer;
@include themify($themes) {
color: themed(blueTextColor);
}
}
}
&.ng-tooltip-top {
margin-top: -1rem;
}
@ -529,42 +569,24 @@ input[type='checkbox'].style-checkbox {
&.ng-tooltip-right {
margin-left: 1rem;
}
.available {
margin-bottom: 1.7rem;
b {
font-weight: 600;
}
}
.locked {
margin-bottom: 0.7rem;
b {
font-weight: 600;
}
}
.link {
cursor: pointer;
@include themify($themes) {
color: themed(blueTextColor);
}
}
}
.account-tooltip {
word-break: break-word;
max-width: 18rem;
.tooltip-inner {
word-break: break-word;
max-width: 18rem;
}
}
.comment-tooltip {
overflow: auto;
word-break: break-word;
max-width: 50rem;
max-height: 25rem;
.tooltip-inner {
overflow: auto;
word-break: break-word;
max-width: 50rem;
max-height: 25rem;
}
}
.ngx-contextmenu {

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

@ -513,13 +513,17 @@ var TooltipDirective = /** @class */ (function () {
};
TooltipDirective.prototype.create = function () {
var _this = this;
this.tooltip = this.renderer.createElement('div');
var innerBlock = this.renderer.createElement('div');
if (typeof this.tooltipInner === 'string') {
this.tooltip = this.renderer.createElement('div');
this.tooltip.innerHTML = this.tooltipInner;
innerBlock.innerHTML = this.tooltipInner;
}
else {
this.tooltip = this.tooltipInner;
innerBlock = this.tooltipInner;
}
this.renderer.addClass(innerBlock, 'tooltip-inner');
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.cancelHide();
@ -710,7 +714,7 @@ var TooltipDirective = /** @class */ (function () {
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = "<div class=\"table\">\r\n <div class=\"row\">\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[0] + 'px'\">{{ 'HISTORY.DETAILS.ID' | translate }}</span>\r\n <span class=\"cell key-value\" [style.flex-basis]=\"sizes[1] + 'px'\" (contextmenu)=\"variablesService.onContextMenuOnlyCopy($event, transaction.tx_hash)\" (click)=\"openInBrowser(transaction.tx_hash)\">{{transaction.tx_hash}}</span>\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[2] + 'px'\">{{ 'HISTORY.DETAILS.SIZE' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[3] + 'px'\">{{ 'HISTORY.DETAILS.SIZE_VALUE' | translate : {value: transaction.tx_blob_size} }}</span>\r\n </div>\r\n <div class=\"row\">\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[0] + 'px'\">{{ 'HISTORY.DETAILS.HEIGHT' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[1] + 'px'\">{{transaction.height}}</span>\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[2] + 'px'\">{{ 'HISTORY.DETAILS.CONFIRMATION' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[3] + 'px'\">{{transaction.height === 0 ? 0 : variablesService.height_app - transaction.height}}</span>\r\n </div>\r\n <div class=\"row\">\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[0] + 'px'\">{{ 'HISTORY.DETAILS.INPUTS' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[1] + 'px'\" tooltip=\"{{inputs.join(', ')}}\" placement=\"top\" tooltipClass=\"table-tooltip table-tooltip-width\" [delay]=\"500\" [showWhenNoOverflow]=\"false\">{{inputs.join(', ')}}</span>\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[2] + 'px'\">{{ 'HISTORY.DETAILS.OUTPUTS' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[3] + 'px'\" tooltip=\"{{outputs.join(', ')}}\" placement=\"top\" tooltipClass=\"table-tooltip table-tooltip-width\" [delay]=\"500\" [showWhenNoOverflow]=\"false\">{{outputs.join(', ')}}</span>\r\n </div>\r\n <div class=\"row\">\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[0] + 'px'\">{{ 'HISTORY.DETAILS.COMMENT' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[1] + sizes[2] + sizes[3] + 'px'\"\r\n tooltip=\"{{transaction.comment}}\" placement=\"top\" tooltipClass=\"table-tooltip comment-tooltip scrolled-content\" [delay]=\"500\" [showWhenNoOverflow]=\"false\"\r\n (contextmenu)=\"variablesService.onContextMenuOnlyCopy($event, transaction.comment)\">\r\n {{transaction.comment}}\r\n </span>\r\n </div>\r\n</div>\r\n"
module.exports = "<div class=\"table\">\r\n <div class=\"row\">\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[0] + 'px'\">{{ 'HISTORY.DETAILS.ID' | translate }}</span>\r\n <span class=\"cell key-value\" [style.flex-basis]=\"sizes[1] + 'px'\" (contextmenu)=\"variablesService.onContextMenuOnlyCopy($event, transaction.tx_hash)\" (click)=\"openInBrowser(transaction.tx_hash)\">{{transaction.tx_hash}}</span>\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[2] + 'px'\">{{ 'HISTORY.DETAILS.SIZE' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[3] + 'px'\">{{ 'HISTORY.DETAILS.SIZE_VALUE' | translate : {value: transaction.tx_blob_size} }}</span>\r\n </div>\r\n <div class=\"row\">\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[0] + 'px'\">{{ 'HISTORY.DETAILS.HEIGHT' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[1] + 'px'\">{{transaction.height}}</span>\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[2] + 'px'\">{{ 'HISTORY.DETAILS.CONFIRMATION' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[3] + 'px'\">{{transaction.height === 0 ? 0 : variablesService.height_app - transaction.height}}</span>\r\n </div>\r\n <div class=\"row\">\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[0] + 'px'\">{{ 'HISTORY.DETAILS.INPUTS' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[1] + 'px'\" tooltip=\"{{inputs.join(', ')}}\" placement=\"top\" tooltipClass=\"table-tooltip table-tooltip-dimensions\" [delay]=\"500\" [showWhenNoOverflow]=\"false\">{{inputs.join(', ')}}</span>\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[2] + 'px'\">{{ 'HISTORY.DETAILS.OUTPUTS' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[3] + 'px'\" tooltip=\"{{outputs.join(', ')}}\" placement=\"top\" tooltipClass=\"table-tooltip table-tooltip-dimensions\" [delay]=\"500\" [showWhenNoOverflow]=\"false\">{{outputs.join(', ')}}</span>\r\n </div>\r\n <div class=\"row\">\r\n <span class=\"cell label\" [style.flex-basis]=\"sizes[0] + 'px'\">{{ 'HISTORY.DETAILS.COMMENT' | translate }}</span>\r\n <span class=\"cell value\" [style.flex-basis]=\"sizes[1] + sizes[2] + sizes[3] + 'px'\"\r\n tooltip=\"{{transaction.comment}}\" placement=\"top\" tooltipClass=\"table-tooltip comment-tooltip\" [delay]=\"500\" [showWhenNoOverflow]=\"false\"\r\n (contextmenu)=\"variablesService.onContextMenuOnlyCopy($event, transaction.comment)\">\r\n {{transaction.comment}}\r\n </span>\r\n </div>\r\n</div>\r\n"
/***/ }),
@ -721,7 +725,7 @@ module.exports = "<div class=\"table\">\r\n <div class=\"row\">\r\n <span cl
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = ":host {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%; }\n\n.table {\n border-top: 0.2rem solid #ebebeb;\n margin: 0 3rem;\n padding: 0.5rem 0; }\n\n.table .row {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border-top: none;\n line-height: 3rem;\n margin: 0 -3rem;\n width: 100%;\n height: 3rem; }\n\n.table .row .cell {\n flex-shrink: 0;\n flex-grow: 0;\n padding: 0 1rem;\n overflow: hidden;\n text-overflow: ellipsis; }\n\n.table .row .cell:first-child {\n padding-left: 3rem; }\n\n.table .row .cell:last-child {\n padding-right: 3rem; }\n\n.table .row .cell.key-value {\n cursor: pointer; }\n\n.table-tooltip-width {\n max-width: 20rem; }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvX2hlbHBlcnMvZGlyZWN0aXZlcy90cmFuc2FjdGlvbi1kZXRhaWxzL0Q6XFxQcm9qZWN0c1xcWmFub1xcc3JjXFxndWlcXHF0LWRhZW1vblxcaHRtbF9zb3VyY2Uvc3JjXFxhcHBcXF9oZWxwZXJzXFxkaXJlY3RpdmVzXFx0cmFuc2FjdGlvbi1kZXRhaWxzXFx0cmFuc2FjdGlvbi1kZXRhaWxzLmNvbXBvbmVudC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0Usa0JBQWtCO0VBQ2xCLE1BQU07RUFDTixPQUFPO0VBQ1AsV0FBVyxFQUFBOztBQUdiO0VBQ0UsZ0NBQWdDO0VBQ2hDLGNBQWM7RUFDZCxpQkFBaUIsRUFBQTs7QUFIbkI7SUFNSSxhQUFhO0lBQ2IsMkJBQTJCO0lBQzNCLG1CQUFtQjtJQUNuQixnQkFBZ0I7SUFDaEIsaUJBQWlCO0lBQ2pCLGVBQWU7SUFDZixXQUFXO0lBQ1gsWUFBWSxFQUFBOztBQWJoQjtNQWdCTSxjQUFjO01BQ2QsWUFBWTtNQUNaLGVBQWU7TUFDZixnQkFBZ0I7TUFDaEIsdUJBQXVCLEVBQUE7O0FBcEI3QjtRQXVCUSxrQkFBa0IsRUFBQTs7QUF2QjFCO1FBMkJRLG1CQUFtQixFQUFBOztBQTNCM0I7UUErQlEsZUFBZSxFQUFBOztBQU12QjtFQUNFLGdCQUFnQixFQUFBIiwiZmlsZSI6InNyYy9hcHAvX2hlbHBlcnMvZGlyZWN0aXZlcy90cmFuc2FjdGlvbi1kZXRhaWxzL3RyYW5zYWN0aW9uLWRldGFpbHMuY29tcG9uZW50LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6aG9zdCB7XHJcbiAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gIHRvcDogMDtcclxuICBsZWZ0OiAwO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG59XHJcblxyXG4udGFibGUge1xyXG4gIGJvcmRlci10b3A6IDAuMnJlbSBzb2xpZCAjZWJlYmViO1xyXG4gIG1hcmdpbjogMCAzcmVtO1xyXG4gIHBhZGRpbmc6IDAuNXJlbSAwO1xyXG5cclxuICAucm93IHtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XHJcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gICAgYm9yZGVyLXRvcDogbm9uZTtcclxuICAgIGxpbmUtaGVpZ2h0OiAzcmVtO1xyXG4gICAgbWFyZ2luOiAwIC0zcmVtO1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgICBoZWlnaHQ6IDNyZW07XHJcblxyXG4gICAgLmNlbGwge1xyXG4gICAgICBmbGV4LXNocmluazogMDtcclxuICAgICAgZmxleC1ncm93OiAwO1xyXG4gICAgICBwYWRkaW5nOiAwIDFyZW07XHJcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XHJcbiAgICAgIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xyXG5cclxuICAgICAgJjpmaXJzdC1jaGlsZCB7XHJcbiAgICAgICAgcGFkZGluZy1sZWZ0OiAzcmVtO1xyXG4gICAgICB9XHJcblxyXG4gICAgICAmOmxhc3QtY2hpbGQge1xyXG4gICAgICAgIHBhZGRpbmctcmlnaHQ6IDNyZW07XHJcbiAgICAgIH1cclxuXHJcbiAgICAgICYua2V5LXZhbHVlIHtcclxuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcbn1cclxuXHJcbi50YWJsZS10b29sdGlwLXdpZHRoIHtcclxuICBtYXgtd2lkdGg6IDIwcmVtO1xyXG59XHJcbiJdfQ== */"
module.exports = ":host {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%; }\n\n.table {\n border-top: 0.2rem solid #ebebeb;\n margin: 0 3rem;\n padding: 0.5rem 0; }\n\n.table .row {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border-top: none;\n line-height: 3rem;\n margin: 0 -3rem;\n width: 100%;\n height: 3rem; }\n\n.table .row .cell {\n flex-shrink: 0;\n flex-grow: 0;\n padding: 0 1rem;\n overflow: hidden;\n text-overflow: ellipsis; }\n\n.table .row .cell:first-child {\n padding-left: 3rem; }\n\n.table .row .cell:last-child {\n padding-right: 3rem; }\n\n.table .row .cell.key-value {\n cursor: pointer; }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvX2hlbHBlcnMvZGlyZWN0aXZlcy90cmFuc2FjdGlvbi1kZXRhaWxzL0Q6XFxQcm9qZWN0c1xcWmFub1xcc3JjXFxndWlcXHF0LWRhZW1vblxcaHRtbF9zb3VyY2Uvc3JjXFxhcHBcXF9oZWxwZXJzXFxkaXJlY3RpdmVzXFx0cmFuc2FjdGlvbi1kZXRhaWxzXFx0cmFuc2FjdGlvbi1kZXRhaWxzLmNvbXBvbmVudC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0Usa0JBQWtCO0VBQ2xCLE1BQU07RUFDTixPQUFPO0VBQ1AsV0FBVyxFQUFBOztBQUdiO0VBQ0UsZ0NBQWdDO0VBQ2hDLGNBQWM7RUFDZCxpQkFBaUIsRUFBQTs7QUFIbkI7SUFNSSxhQUFhO0lBQ2IsMkJBQTJCO0lBQzNCLG1CQUFtQjtJQUNuQixnQkFBZ0I7SUFDaEIsaUJBQWlCO0lBQ2pCLGVBQWU7SUFDZixXQUFXO0lBQ1gsWUFBWSxFQUFBOztBQWJoQjtNQWdCTSxjQUFjO01BQ2QsWUFBWTtNQUNaLGVBQWU7TUFDZixnQkFBZ0I7TUFDaEIsdUJBQXVCLEVBQUE7O0FBcEI3QjtRQXVCUSxrQkFBa0IsRUFBQTs7QUF2QjFCO1FBMkJRLG1CQUFtQixFQUFBOztBQTNCM0I7UUErQlEsZUFBZSxFQUFBIiwiZmlsZSI6InNyYy9hcHAvX2hlbHBlcnMvZGlyZWN0aXZlcy90cmFuc2FjdGlvbi1kZXRhaWxzL3RyYW5zYWN0aW9uLWRldGFpbHMuY29tcG9uZW50LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6aG9zdCB7XHJcbiAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gIHRvcDogMDtcclxuICBsZWZ0OiAwO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG59XHJcblxyXG4udGFibGUge1xyXG4gIGJvcmRlci10b3A6IDAuMnJlbSBzb2xpZCAjZWJlYmViO1xyXG4gIG1hcmdpbjogMCAzcmVtO1xyXG4gIHBhZGRpbmc6IDAuNXJlbSAwO1xyXG5cclxuICAucm93IHtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XHJcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gICAgYm9yZGVyLXRvcDogbm9uZTtcclxuICAgIGxpbmUtaGVpZ2h0OiAzcmVtO1xyXG4gICAgbWFyZ2luOiAwIC0zcmVtO1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgICBoZWlnaHQ6IDNyZW07XHJcblxyXG4gICAgLmNlbGwge1xyXG4gICAgICBmbGV4LXNocmluazogMDtcclxuICAgICAgZmxleC1ncm93OiAwO1xyXG4gICAgICBwYWRkaW5nOiAwIDFyZW07XHJcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XHJcbiAgICAgIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xyXG5cclxuICAgICAgJjpmaXJzdC1jaGlsZCB7XHJcbiAgICAgICAgcGFkZGluZy1sZWZ0OiAzcmVtO1xyXG4gICAgICB9XHJcblxyXG4gICAgICAmOmxhc3QtY2hpbGQge1xyXG4gICAgICAgIHBhZGRpbmctcmlnaHQ6IDNyZW07XHJcbiAgICAgIH1cclxuXHJcbiAgICAgICYua2V5LXZhbHVlIHtcclxuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19 */"
/***/ }),
@ -3750,7 +3754,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 sortedArrayContracts\" [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\" [class.error-text]=\"item.state === 4\" tooltip=\"{{item.state | contractStatusMessages : item.is_a}}\" placement=\"top\" tooltipClass=\"table-tooltip\" [delay]=\"500\">\r\n {{item.state | contractStatusMessages : item.is_a}}\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"
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 sortedArrayContracts\" [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\" [class.error-text]=\"item.state === 4\" tooltip=\"{{item.state | contractStatusMessages : item.is_a}}\" placement=\"top\" tooltipClass=\"table-tooltip\" [delay]=\"500\">\r\n {{item.state | contractStatusMessages : item.is_a}}\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\" [showWhenNoOverflow]=\"false\">\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"
/***/ }),

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

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

@ -63,12 +63,16 @@ export class TooltipDirective implements OnDestroy {
}
create() {
this.tooltip = this.renderer.createElement('div');
let innerBlock = this.renderer.createElement('div');
if (typeof this.tooltipInner === 'string') {
this.tooltip = this.renderer.createElement('div');
this.tooltip.innerHTML = this.tooltipInner;
innerBlock.innerHTML = this.tooltipInner;
} else {
this.tooltip = this.tooltipInner;
innerBlock = this.tooltipInner;
}
this.renderer.addClass(innerBlock, 'tooltip-inner');
this.renderer.addClass(innerBlock, 'scrolled-content');
this.renderer.appendChild(this.tooltip, innerBlock);
this.renderer.appendChild(document.body, this.tooltip);
this.tooltip.addEventListener('mouseenter', () => {

6
src/gui/qt-daemon/html_source/src/app/_helpers/directives/transaction-details/transaction-details.component.html
View file

@ -13,14 +13,14 @@
</div>
<div class="row">
<span class="cell label" [style.flex-basis]="sizes[0] + 'px'">{{ 'HISTORY.DETAILS.INPUTS' | translate }}</span>
<span class="cell value" [style.flex-basis]="sizes[1] + 'px'" tooltip="{{inputs.join(', ')}}" placement="top" tooltipClass="table-tooltip table-tooltip-width" [delay]="500" [showWhenNoOverflow]="false">{{inputs.join(', ')}}</span>
<span class="cell value" [style.flex-basis]="sizes[1] + 'px'" tooltip="{{inputs.join(', ')}}" placement="top" tooltipClass="table-tooltip table-tooltip-dimensions" [delay]="500" [showWhenNoOverflow]="false">{{inputs.join(', ')}}</span>
<span class="cell label" [style.flex-basis]="sizes[2] + 'px'">{{ 'HISTORY.DETAILS.OUTPUTS' | translate }}</span>
<span class="cell value" [style.flex-basis]="sizes[3] + 'px'" tooltip="{{outputs.join(', ')}}" placement="top" tooltipClass="table-tooltip table-tooltip-width" [delay]="500" [showWhenNoOverflow]="false">{{outputs.join(', ')}}</span>
<span class="cell value" [style.flex-basis]="sizes[3] + 'px'" tooltip="{{outputs.join(', ')}}" placement="top" tooltipClass="table-tooltip table-tooltip-dimensions" [delay]="500" [showWhenNoOverflow]="false">{{outputs.join(', ')}}</span>
</div>
<div class="row">
<span class="cell label" [style.flex-basis]="sizes[0] + 'px'">{{ 'HISTORY.DETAILS.COMMENT' | translate }}</span>
<span class="cell value" [style.flex-basis]="sizes[1] + sizes[2] + sizes[3] + 'px'"
tooltip="{{transaction.comment}}" placement="top" tooltipClass="table-tooltip comment-tooltip scrolled-content" [delay]="500" [showWhenNoOverflow]="false"
tooltip="{{transaction.comment}}" placement="top" tooltipClass="table-tooltip comment-tooltip" [delay]="500" [showWhenNoOverflow]="false"
(contextmenu)="variablesService.onContextMenuOnlyCopy($event, transaction.comment)">
{{transaction.comment}}
</span>

4
src/gui/qt-daemon/html_source/src/app/_helpers/directives/transaction-details/transaction-details.component.scss
View file

@ -41,7 +41,3 @@
}
}
}
.table-tooltip-width {
max-width: 20rem;
}

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

@ -36,7 +36,7 @@
</div>
</td>
<td>
<div class="comment" tooltip="{{ item.private_detailes.c }}" placement="top-right" tooltipClass="table-tooltip" [delay]="500">
<div class="comment" tooltip="{{ item.private_detailes.c }}" placement="top-right" tooltipClass="table-tooltip" [delay]="500" [showWhenNoOverflow]="false">
{{item.private_detailes.c}}
</div>
</td>

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

@ -355,9 +355,7 @@ input[type='checkbox'].style-checkbox {
}
.table-tooltip {
font-size: 1.3rem;
padding: 1rem 2rem;
white-space: pre-wrap;
@include themify($themes) {
background: themed(tooltipBackgroundColor);
@ -365,10 +363,16 @@ input[type='checkbox'].style-checkbox {
color: themed(mainTextColor);
}
.tooltip-inner {
font-size: 1.3rem;
line-height: 1.8rem;
white-space: pre-wrap;
}
&.ng-tooltip-top {
margin-top: -1rem;
&:before {
&:after {
content: "";
position: absolute;
bottom: -2rem;
@ -385,7 +389,7 @@ input[type='checkbox'].style-checkbox {
&.ng-tooltip-top-left {
margin-top: -1rem;
&:before {
&:after {
content: "";
position: absolute;
bottom: -1rem;
@ -402,7 +406,7 @@ input[type='checkbox'].style-checkbox {
&.ng-tooltip-top-right {
margin-top: -1rem;
&:before {
&:after {
content: "";
position: absolute;
bottom: -1rem;
@ -470,7 +474,7 @@ input[type='checkbox'].style-checkbox {
&.ng-tooltip-left {
margin-left: -1rem;
&:before {
&:after {
content: "";
position: absolute;
top: 0;
@ -502,10 +506,16 @@ input[type='checkbox'].style-checkbox {
}
}
.table-tooltip-dimensions {
.tooltip-inner {
overflow: auto;
max-width: 20rem;
max-height: 10rem;
}
}
.balance-tooltip {
display: flex;
flex-direction: column;
font-size: 1.3rem;
padding: 1.3rem;
@include themify($themes) {
@ -514,6 +524,36 @@ input[type='checkbox'].style-checkbox {
color: themed(mainTextColor);
}
.tooltip-inner {
display: flex;
flex-direction: column;
font-size: 1.3rem;
.available {
margin-bottom: 1.7rem;
b {
font-weight: 600;
}
}
.locked {
margin-bottom: 0.7rem;
b {
font-weight: 600;
}
}
.link {
cursor: pointer;
@include themify($themes) {
color: themed(blueTextColor);
}
}
}
&.ng-tooltip-top {
margin-top: -1rem;
}
@ -529,42 +569,24 @@ input[type='checkbox'].style-checkbox {
&.ng-tooltip-right {
margin-left: 1rem;
}
.available {
margin-bottom: 1.7rem;
b {
font-weight: 600;
}
}
.locked {
margin-bottom: 0.7rem;
b {
font-weight: 600;
}
}
.link {
cursor: pointer;
@include themify($themes) {
color: themed(blueTextColor);
}
}
}
.account-tooltip {
word-break: break-word;
max-width: 18rem;
.tooltip-inner {
word-break: break-word;
max-width: 18rem;
}
}
.comment-tooltip {
overflow: auto;
word-break: break-word;
max-width: 50rem;
max-height: 25rem;
.tooltip-inner {
overflow: auto;
word-break: break-word;
max-width: 50rem;
max-height: 25rem;
}
}
.ngx-contextmenu {