From 4a23b57655b4c0494670b75284878593854eb17d Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 11 Apr 2018 18:56:03 +0200 Subject: [PATCH 01/15] New loading screen --- customize.dist/pages.js | 2 +- .../src/less2/include/checkmark.less | 3 +- .../src/less2/include/colortheme.less | 26 +- .../src/less2/include/creation.less | 222 ++++++++++++------ .../src/less2/include/framework.less | 6 +- www/common/common-interface.js | 4 +- www/common/common-ui-elements.js | 45 ++-- www/common/loading.js | 19 +- www/common/sframe-app-framework.js | 2 +- www/poll/app-poll.less | 13 +- www/whiteboard/app-whiteboard.less | 12 +- 11 files changed, 230 insertions(+), 124 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 4cd33f038..9567820a9 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -633,7 +633,7 @@ define([ src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs }), h('div.cp-loading-spinner-container', - h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')), + h('span.fa.fa-circle-o-notch.fa-spin.fa-8x.fa-fw')), h('p'), ]) ); diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less index 30c6e7d4a..63f68419d 100644 --- a/customize.dist/src/less2/include/checkmark.less +++ b/customize.dist/src/less2/include/checkmark.less @@ -5,7 +5,7 @@ @width: round(@size / 8); @dim1: round(@size / 3); @dim2: round(2 * @size / 3); - @top: round(@size / 12); + @top: round(@size / 12) - 1; // Text .cp-checkmark { margin: 0; @@ -51,6 +51,7 @@ background-color: @colortheme_checkmark-back0; display: flex; justify-content: center; + border: 1px solid @colortheme_form-border; &:after { content: ""; display: none; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 1bdb69291..2d785a74f 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -2,6 +2,9 @@ @colortheme_app-font-size: 16px; @colortheme_app-font: @colortheme_app-font-size @colortheme_font; +@colortheme_logo-1: #326599; +@colortheme_logo-2: #4591c4; + @colortheme_link-color: #0275D8; @colortheme_link-color-visited: #005999; @colortheme_info-background: #fafafa; @@ -15,13 +18,22 @@ @colortheme_cp-red: #FA5858; // remove red @colortheme_cp-green: #46E981; +@colortheme_form-border: #bbbbbb; +@colortheme_form-bg: @colortheme_logo-2; +@colortheme_form-color: #ffffff; +@colortheme_form-bg-alt: #ffffff; +@colortheme_form-color-alt: @colortheme_logo-1; +@colortheme_form-warning: #f49842; +@colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%); + @colortheme_modal-bg: #222; @colortheme_modal-fg: #fff; @colortheme_modal-link: #eee; @colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%); @colortheme_modal-dim: rgba(0, 0, 0, 0.4); -@colortheme_loading-bg: #222; +@colortheme_loading-bg: @colortheme_logo-1; +@colortheme_loading-bg-alt: @colortheme_logo-2; @colortheme_loading-color: @colortheme_old-fore; @colortheme_modal-input: #111; @@ -110,9 +122,9 @@ @cryptpad_header_col: #1E1F1F; @cryptpad_text_col: #3F4141; -@colortheme_checkmark-back0: #ffffff; -@colortheme_checkmark-back0-active: #bbbbbb; -@colortheme_checkmark-back1: #FF0073; -@colortheme_checkmark-col1: #ffffff; -@colortheme_checkmark-back2: #FFFFFF; -@colortheme_checkmark-col2: #000000; +@colortheme_checkmark-back0: @colortheme_form-bg-alt; +@colortheme_checkmark-back0-active: @colortheme_form-border; +@colortheme_checkmark-back1: @colortheme_form-bg; +@colortheme_checkmark-col1: @colortheme_form-color; +@colortheme_checkmark-back2: @colortheme_form-bg-alt; +@colortheme_checkmark-col2: @colortheme_form-color-alt; diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index 4fd0a5a1d..93383eefc 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -3,7 +3,15 @@ @import (once) "./checkmark.less"; @import (once) './icon-colors.less'; -.creation_main() { +.creation_main( + @color: @colortheme_default-color, // Color of the text for the toolbar + @bg-color: @colortheme_default-bg, // color of the toolbar background + @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar +) { + @colortheme_creation-modal-bg: #fff; + @colortheme_creation-modal: #666; + @colortheme_creation-modal-title: @colortheme_loading-bg; + .tippy-popper { z-index: 100000001 !important; } @@ -11,37 +19,65 @@ position: absolute; z-index: 100000000; // #loading * 10 top: 0px; - background: @colortheme_loading-bg; + //background: @colortheme_loading-bg; + background: linear-gradient(to right, @colortheme_loading-bg 0%, @colortheme_loading-bg 50%, @colortheme_loading-bg-alt 50%, @colortheme_loading-bg-alt 100%); color: @colortheme_loading-color; display: flex; flex-flow: column; /* we need column so that the child can shrink vertically */ justify-content: center; + align-items: center; width: 100%; height: 100%; overflow: auto; + .cp-creation-logo { + height: 300px; + width: 300px; + margin-top: 50px; + flex: 0 1 auto; /* allows shrink */ + min-height: 0; + text-align: center; + img { + max-width: 100%; + max-height: 100%; + } + } } #cp-creation { - flex: 0 1 auto; /* allows shrink */ - min-height: 0; overflow: auto; text-align: center; + background: @colortheme_creation-modal-bg; + color: @colortheme_creation-modal; font: @colortheme_app-font; width: 100%; outline: none; + width: 700px; + max-width: 90vw; + height: 500px; + max-height: calc(~"100vh - 20px"); + margin: 50px; + flex-shrink: 0; + display: flex; + flex-flow: column; + & > div { - width: 60vw; + width: 100%; max-width: 100%; - margin: 40px auto; + margin: auto; text-align: left; } - .cp-creation-create, .cp-creation-settings { + .cp-creation-title { + color: @colortheme_creation-modal-title; + font-weight: bold; + margin: 15px; + } + + .cp-creation-create { margin-top: 0px; - @creation-button: #30B239; button { .tools_unselectable(); padding: 15px; - background: @creation-button; + background: linear-gradient(to right, @colortheme_logo-2, @colortheme_logo-1); color: #FFF; font-weight: bold; margin: 3px 10px; @@ -50,8 +86,9 @@ outline: none; width: 100%; &:hover { + background: linear-gradient(to right, lighten(@colortheme_logo-2, 5%), lighten(@colortheme_logo-1, 5%)); //background: darken(@creation-button, 5%); - background: lighten(@creation-button, 5%); + //background: lighten(@creation-button, 5%); } } } @@ -70,6 +107,7 @@ display: flex; flex-flow: column; align-items: center; + flex: 1; & > div { width: 400px; max-width: 100%; @@ -88,31 +126,49 @@ padding: 0 10px; } } - .cp-creation-help { - font-size: 18px; - color: white; - &:hover { - color: #AAA; - text-decoration: none; - } + } + .cp-creation-help, .cp-creation-warning { + font-size: 18px; + color: @colortheme_form-warning; + &:hover { + color: @colortheme_form-warning-hov; + text-decoration: none; } } .cp-creation-slider { display: block; overflow: hidden; max-height: 0px; - transition: max-height 0.5s ease-in-out; - width: 100%; - margin-top: 10px; + //margin-top: 10px; &.active { - max-height: 40px; + transition: max-height 0.5s ease-in-out; + max-height: 100px; } } .cp-creation-expire { .cp-creation-expire-picker { text-align: center; + input, select { + font-size: 14px; + border: 1px solid @colortheme_form-border; + height: 28px; + background-color: @colortheme_form-bg; + color: @colortheme_form-color; + } input { - width: 100px; + width: 50px; + margin: 0 5px; + } + select { + margin-right: 5px; + } + } + &.active { + label { + flex: unset; + } + .cp-creation-slider { + flex: 1; } } } @@ -125,31 +181,32 @@ } div.cp-creation-remember { - margin-top: 30px; .cp-creation-remember-help { - font-style: italic; + width: 100%; + //font-style: italic; + font-size: 12px; + font-weight: bold; + color: @colortheme_form-bg; + line-height: 20px; + .fa { + margin-right: 10px; + } } } div.cp-creation-template { width: 100%; - background-color: darken(@colortheme_modal-bg, 3%); - padding: 20px; - margin: 30px 0; - .cp-creation-title { - padding: 0 0 10px 10px; - margin: auto; - } + flex: 1; } .cp-creation-template-container { width: 100%; + flex: 1; display: flex; flex-wrap: wrap; justify-content: center; overflow-y: auto; align-items: center; .cp-creation-template-element { - @darker: darken(@colortheme_modal-fg, 30%); - + box-shadow: 2px 2px 7px @colortheme_form-border; width: 135px; padding: 5px; margin: 5px; @@ -162,19 +219,23 @@ line-height: 1em; cursor: pointer; - background-color: #111; - color: @darker; + color: black; border: 1px solid transparent; &.cp-creation-template-selected { - border: 1px solid white; - background-color: #222; + color: @color !important; + background-color: @bg-color !important; + .fa { + color: @color; + } } transition: all 0.1s; &:hover { - color: @colortheme_modal-fg; + //color: @colortheme_modal-fg; + background-color: @colortheme_form-border; + box-shadow: none; } align-items: center; @@ -196,6 +257,7 @@ max-width: 100%; } .fa { + color: @bg-color; cursor: pointer; width: 100px; height: 100px; @@ -218,44 +280,70 @@ } } - .checkmark_main(30px); + .checkmark_main(20px); + } - @media screen and (max-width: @browser_media-narrow-screen) { - & > div { - width: 95%; - margin: 10px auto; + @media screen and (max-height: 700px) { + #cp-creation-container { + .cp-creation-logo { + //flex-shrink: 0; + display: none; + } } } - @media screen and (max-width: @browser_media-medium-screen) { - #cp-creation-form { - div.cp-creation-template { - margin: 0; - padding: 5px; - .cp-creation-template-container { - .cp-creation-template-element { - flex-flow: row; - margin: 1px; - padding: 5px; - width: 155px; - img { - display: none; + @media screen and (max-width: 500px) { + #cp-creation { + #cp-creation-form { + & > div { + width: 95%; + margin: 10px auto; + } + .cp-creation-expire { + &.active { + label { + flex: 1; } - .fa { - font-size: 18px; - width: 20px; - height: 20px; - line-height: 20px; - display: inline !important; + .cp-creation-slider { + flex: unset; + order: 10; + width: 100%; } - .cp-creation-template-element-name { - margin: 0; - margin-left: 5px; + } + } + } + } + } + @media screen and (max-width: @browser_media-medium-screen) { + #cp-creation { + height: auto; + #cp-creation-form { + div.cp-creation-template { + margin: 0; + padding: 5px; + .cp-creation-template-container { + .cp-creation-template-element { + flex-flow: row; + margin: 1px; + padding: 5px; + width: 155px; + img { + display: none; + } + .fa { + font-size: 18px; + width: 20px; + height: 20px; + line-height: 20px; + display: inline !important; + } + .cp-creation-template-element-name { + margin: 0; + margin-left: 5px; + } } } } } } } - - } } diff --git a/customize.dist/src/less2/include/framework.less b/customize.dist/src/less2/include/framework.less index 4bdb2b0b8..4664ffad5 100644 --- a/customize.dist/src/less2/include/framework.less +++ b/customize.dist/src/less2/include/framework.less @@ -13,6 +13,10 @@ .fileupload_main(); .alertify_main(); .tokenfield_main(); - .creation_main(); + .creation_main( + @bg-color: @bg-color, + @warn-color: @warn-color, + @color: @color + ); } diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 24c7098c0..a26346be5 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -574,14 +574,14 @@ define([ $spinner.show(); $('body').append($loading); } - if (Messages.tips && !hideTips) { + /*if (Messages.tips && !hideTips) { var $loadingTip = $('
', {'id': 'cp-loading-tip'}); $('', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip); $loadingTip.css({ 'bottom': $('body').height()/2 - $container.height()/2 + 20 + 'px' }); $('body').append($loadingTip); - } + }*/ }; UI.removeLoadingScreen = function (cb) { // Release the test blocker, hopefully every test has been registered. diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 036d63bc8..4366bd509 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -1858,11 +1858,15 @@ define([ var $body = $('body'); var $creationContainer = $('
', { id: 'cp-creation-container' }).appendTo($body); + var urlArgs = (Config.requireConf && Config.requireConf.urlArgs) || ''; + var l = h('div.cp-creation-logo', h('img', { src: '/customize/alt-favicon.png?' + urlArgs })); + $(l).appendTo($creationContainer); var $creation = $('
', { id: 'cp-creation', tabindex: 1 }).appendTo($creationContainer); // Title var colorClass = 'cp-icon-color-'+type; - $creation.append(h('h2.cp-creation-title', Messages.newButtonTitle)); + //$creation.append(h('h2.cp-creation-title', Messages.newButtonTitle)); + $creation.append(h('h3.cp-creation-title', Messages['button_new'+type])); //$creation.append(h('h2.cp-creation-title.'+colorClass, Messages.newButtonTitle)); // Deleted pad warning @@ -1874,7 +1878,7 @@ define([ var origin = common.getMetadataMgr().getPrivateData().origin; var createHelper = function (href, text) { - var q = h('a.cp-creation-help.fa.fa-question', { + var q = h('a.cp-creation-help.fa.fa-question-circle', { title: text, href: origin + href, target: "_blank" @@ -1907,8 +1911,7 @@ define([ h('span.cp-checkmark-mark'), Messages.creation_expire ]), - createHelper('/faq.html#keywords-expiring', Messages.creation_expire2), - h('div.cp-creation-expire-picker.cp-creation-slider', [ + h('span.cp-creation-expire-picker.cp-creation-slider', [ h('input#cp-creation-expire-val', { type: "number", min: 1, @@ -1923,18 +1926,14 @@ define([ selected: 'selected' }, Messages.creation_expireMonths) ]) - ]) + ]), + createHelper('/faq.html#keywords-expiring', Messages.creation_expire2), ]); - var createDiv = h('div.cp-creation-create'); - var $create = $(createDiv); - var templates = h('div.cp-creation-template', [ - h('h3.cp-creation-title.'+colorClass, Messages['button_new'+type]), h('div.cp-creation-template-container', [ h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw') - ]), - createDiv + ]) ]); var settings = h('div.cp-creation-remember', [ @@ -1947,14 +1946,21 @@ define([ Messages.creation_saveSettings ]), createHelper('/settings/#creation', Messages.creation_settings), - h('div.cp-creation-remember-help.cp-creation-slider', Messages.creation_rememberHelp) + h('div.cp-creation-remember-help.cp-creation-slider', [ + h('span.fa.fa-exclamation-circle.cp-creation-warning'), + Messages.creation_rememberHelp + ]) ]); + var createDiv = h('div.cp-creation-create'); + var $create = $(createDiv); + $(h('div#cp-creation-form', [ owned, expire, settings, - templates + templates, + createDiv ])).appendTo($creation); // Display templates @@ -1963,20 +1969,21 @@ define([ if (!res.data || !Array.isArray(res.data)) { return void console.error("Error: get the templates list"); } + // TODO Sort the templates by number of use? var data = res.data.slice().sort(function (a, b) { if (a.name === b.name) { return 0; } return a.name < b.name ? -1 : 1; + }).slice(0, 2); + data.unshift({ + name: Messages.creation_newTemplate, + id: -1, + icon: h('span.fa.fa-bookmark') }); data.unshift({ name: Messages.creation_noTemplate, id: 0, icon: h('span.fa.fa-file') }); - data.push({ - name: Messages.creation_newTemplate, - id: -1, - icon: h('span.fa.fa-bookmark') - }); var $container = $(templates).find('.cp-creation-template-container').html(''); data.forEach(function (obj, idx) { var name = obj.name; @@ -2019,10 +2026,12 @@ define([ $creation.find('#cp-creation-expire').on('change', function () { if ($(this).is(':checked')) { $creation.find('.cp-creation-expire-picker:not(.active)').addClass('active'); + $creation.find('.cp-creation-expire:not(.active)').addClass('active'); $creation.find('#cp-creation-expire-val').focus(); return; } $creation.find('.cp-creation-expire-picker').removeClass('active'); + $creation.find('.cp-creation-expire').removeClass('active'); $creation.focus(); }); diff --git a/www/common/loading.js b/www/common/loading.js index a5f96b62a..f940e132f 100644 --- a/www/common/loading.js +++ b/www/common/loading.js @@ -1,3 +1,5 @@ +// dark #326599 +// light #4591c4 define([], function () { var loadingStyle = (function(){/* #cp-loading { @@ -9,24 +11,29 @@ define([], function () { bottom: 0px; left: 0px; right: 0px; - background: #222; + background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%); color: #fafafa; text-align: center; font-size: 1.5em; opacity: 1; + display: flex; + justify-content: center; } #cp-loading.cp-loading-hidden { opacity: 0; visibility: hidden; } #cp-loading .cp-loading-container { - margin-top: 50vh; - transform: translateY(-50%); + align-self: center; } #cp-loading .cp-loading-cryptofist { margin-left: auto; margin-right: auto; - height: 300px; + //height: 300px; + max-width: 90vw; + max-height: 300px; + width: auto; + height: auto; margin-bottom: 2em; } @media screen and (max-height: 450px) { @@ -76,11 +83,11 @@ define([], function () { loadingStyle, '', '
', - '', + '', '', - '

', + //'

', '
' ].join(''); var intr; diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js index b7fb0b286..c15d92e88 100644 --- a/www/common/sframe-app-framework.js +++ b/www/common/sframe-app-framework.js @@ -308,7 +308,7 @@ define([ if (!readOnly) { onLocal(); } evOnReady.fire(newPad); - UI.removeLoadingScreen(emitResize); + //UI.removeLoadingScreen(emitResize); var privateDat = cpNfInner.metadataMgr.getPrivateData(); var hash = privateDat.availableHashes.editHash || diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less index c86653a6c..1b56b99bd 100644 --- a/www/poll/app-poll.less +++ b/www/poll/app-poll.less @@ -1,22 +1,15 @@ @import (once) "../../customize/src/less2/include/browser.less"; -@import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; -@import (once) '../../customize/src/less2/include/fileupload.less'; -@import (once) '../../customize/src/less2/include/alertify.less'; -@import (once) '../../customize/src/less2/include/tokenfield.less'; @import (once) '../../customize/src/less2/include/tools.less'; @import (once) '../../customize/src/less2/include/avatar.less'; -@import (once) '../../customize/src/less2/include/creation.less'; +@import (once) "../../customize/src/less2/include/framework.less"; -.toolbar_main( + +.framework_main( @bg-color: @colortheme_poll-bg, @warn-color: @colortheme_poll-warn, @color: @colortheme_poll-color ); -.fileupload_main(); -.alertify_main(); -.tokenfield_main(); -.creation_main(); @poll-fore: #555; diff --git a/www/whiteboard/app-whiteboard.less b/www/whiteboard/app-whiteboard.less index 1aba715a9..1874c7fd3 100644 --- a/www/whiteboard/app-whiteboard.less +++ b/www/whiteboard/app-whiteboard.less @@ -1,21 +1,13 @@ @import (once) "../../customize/src/less2/include/browser.less"; -@import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; -@import (once) '../../customize/src/less2/include/fileupload.less'; -@import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/tools.less'; -@import (once) '../../customize/src/less2/include/tokenfield.less'; -@import (once) '../../customize/src/less2/include/creation.less'; +@import (once) "../../customize/src/less2/include/framework.less"; -.toolbar_main( +.framework_main( @bg-color: @colortheme_whiteboard-bg, @warn-color: @colortheme_whiteboard-warn, @color: @colortheme_whiteboard-color ); -.fileupload_main(); -.alertify_main(); -.tokenfield_main(); -.creation_main(); // body &.cp-app-whiteboard { From 9d57548f1db87763224c5e25e351fdb6ccef6b1e Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 12 Apr 2018 19:08:08 +0200 Subject: [PATCH 02/15] New tooltips --- .../src/less2/include/app-noscroll.less | 2 + .../src/less2/include/creation.less | 1 - .../src/less2/include/framework.less | 2 + customize.dist/src/less2/include/tippy.less | 57 +++++++++++++++++++ www/common/common-interface.js | 37 +++++++++--- www/common/common-ui-elements.js | 5 +- www/common/loading.js | 41 +++++++++++-- www/common/sframe-app-framework.js | 2 +- www/common/tippy.css | 1 - www/common/tippy.min.js | 1 - www/common/tippy/tippy.css | 1 + www/common/tippy/tippy.min.js | 1 + 12 files changed, 131 insertions(+), 20 deletions(-) create mode 100644 customize.dist/src/less2/include/tippy.less delete mode 100644 www/common/tippy.css delete mode 100644 www/common/tippy.min.js create mode 100644 www/common/tippy/tippy.css create mode 100644 www/common/tippy/tippy.min.js diff --git a/customize.dist/src/less2/include/app-noscroll.less b/customize.dist/src/less2/include/app-noscroll.less index c66019d61..f0a760b5f 100644 --- a/customize.dist/src/less2/include/app-noscroll.less +++ b/customize.dist/src/less2/include/app-noscroll.less @@ -7,6 +7,7 @@ overflow: hidden; box-sizing: border-box; position: relative; + border: 0; body { height: 100%; width: 100%; @@ -15,6 +16,7 @@ overflow: hidden; box-sizing: border-box; position: relative; + border: 0; } } diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index 93383eefc..afe8874ba 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -48,7 +48,6 @@ background: @colortheme_creation-modal-bg; color: @colortheme_creation-modal; font: @colortheme_app-font; - width: 100%; outline: none; width: 700px; max-width: 90vw; diff --git a/customize.dist/src/less2/include/framework.less b/customize.dist/src/less2/include/framework.less index 4664ffad5..7b372d5ee 100644 --- a/customize.dist/src/less2/include/framework.less +++ b/customize.dist/src/less2/include/framework.less @@ -3,6 +3,7 @@ @import (once) './alertify.less'; @import (once) './tokenfield.less'; @import (once) './creation.less'; +@import (once) './tippy.less'; .framework_main(@bg-color, @warn-color, @color) { .toolbar_main( @@ -13,6 +14,7 @@ .fileupload_main(); .alertify_main(); .tokenfield_main(); + .tippy_main(); .creation_main( @bg-color: @bg-color, @warn-color: @warn-color, diff --git a/customize.dist/src/less2/include/tippy.less b/customize.dist/src/less2/include/tippy.less new file mode 100644 index 000000000..c8f9605db --- /dev/null +++ b/customize.dist/src/less2/include/tippy.less @@ -0,0 +1,57 @@ +@import (once) './creation.less'; + +.tippy_main() { + .tippy-tooltip.cryptpad-theme { + /* Your styling here. Example: */ + background-color: white; + box-shadow: 2px 2px 10px #000; + //border: 1px solid #BBB; + //border-radius: 0; + //border: 2px solid orange; + font-weight: bold; + color: #333; + [x-circle] { + background-color: unset; + } + } + /* + .tippy-popper[x-placement=top] { + .tippy-tooltip.cryptpad-theme { + margin-bottom: 12px; + [x-arrow] { + bottom: -12px; + transform: scale(2); + } + } + } + .tippy-popper[x-placement=bottom] { + .tippy-tooltip.cryptpad-theme { + margin-top: 12px; + [x-arrow] { + top: -12px; + transform: scale(2); + } + } + } + */ + .tippy-popper[x-placement=right] { + max-width: 200px; +/* .tippy-tooltip.cryptpad-theme { + margin-left: 12px; + [x-arrow] { + left: -12px; + transform: scale(2); + } + }*/ + } + .tippy-popper[x-placement=left] { + max-width: 200px; +/* .tippy-tooltip.cryptpad-theme { + margin-right: 12px; + [x-arrow] { + right: -12px; + transform: scale(2); + } + }*/ + } +} diff --git a/www/common/common-interface.js b/www/common/common-interface.js index a26346be5..475ba98e1 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -6,13 +6,13 @@ define([ '/common/common-notifier.js', '/customize/application_config.js', '/bower_components/alertifyjs/dist/js/alertify.js', - '/common/tippy.min.js', + '/common/tippy/tippy.min.js', '/customize/pages.js', '/common/hyperscript.js', '/common/test.js', '/bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js', - 'css!/common/tippy.css', + 'css!/common/tippy/tippy.css', ], function ($, Messages, Util, Hash, Notifier, AppConfig, Alertify, Tippy, Pages, h, Test) { var UI = {}; @@ -660,18 +660,37 @@ define([ }); }; + var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500; + $.extend(true, Tippy.defaults, { + placement: 'bottom', + performance: true, + delay: [delay, 0], + //sticky: true, + theme: 'cryptpad', + arrow: true, + maxWidth: '200px', + flip: false, + popperOptions: { + modifiers: { + preventOverflow: { boundariesElement: 'window' } + } + }, + //arrowType: 'round', + arrowTransform: 'scale(2)', + }); UI.addTooltips = function () { var MutationObserver = window.MutationObserver; - var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500; var addTippy = function (i, el) { if (el.nodeName === 'IFRAME') { return; } - Tippy(el, { - position: 'bottom', - distance: 0, - performance: true, - delay: [delay, 0], - sticky: true + var opts = { + distance: 15 + }; + Array.prototype.slice.apply(el.attributes).filter(function (obj) { + return /^data-tippy-/.test(obj.name); + }).forEach(function (obj) { + opts[obj.name.slice(11)] = obj.value; }); + Tippy(el, opts); }; // This is the robust solution to remove dangling tooltips // The mutation observer does not always find removed nodes. diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 4366bd509..9e73d814d 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -13,8 +13,6 @@ define([ '/customize/messages.js', '/customize/application_config.js', '/bower_components/nthen/index.js', - - 'css!/common/tippy.css', ], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Clipboard, Messages, AppConfig, NThen) { var UIElements = {}; @@ -1881,7 +1879,8 @@ define([ var q = h('a.cp-creation-help.fa.fa-question-circle', { title: text, href: origin + href, - target: "_blank" + target: "_blank", + 'data-tippy-placement': "right" }); return q; }; diff --git a/www/common/loading.js b/www/common/loading.js index f940e132f..6febf0450 100644 --- a/www/common/loading.js +++ b/www/common/loading.js @@ -13,18 +13,50 @@ define([], function () { right: 0px; background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%); color: #fafafa; - text-align: center; font-size: 1.5em; opacity: 1; display: flex; + flex-flow: column; justify-content: center; + align-items: center; } #cp-loading.cp-loading-hidden { opacity: 0; visibility: hidden; } +#cp-loading .cp-loading-logo { + height: 300px; + width: 300px; + margin-top: 50px; + flex: 0 1 auto; + min-height: 0; + text-align: center; +} +#cp-loading .cp-loading-logo img { + max-width: 100%; + max-height: 100%; +} #cp-loading .cp-loading-container { - align-self: center; + width: 700px; + max-width: 90vw; + height: 500px; + max-height: calc(100vh - 20px); + margin: 50px; + flex-shrink: 0; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; +} +@media screen and (max-height: 800px) { + #cp-loading .cp-loading-container { + height: auto; + } +} +@media screen and (max-width: 600px) { + #cp-loading .cp-loading-container { + height: auto; + } } #cp-loading .cp-loading-cryptofist { margin-left: auto; @@ -38,7 +70,6 @@ define([], function () { } @media screen and (max-height: 450px) { #cp-loading .cp-loading-cryptofist { - display: none; } } #cp-loading .cp-loading-spinner-container { @@ -82,8 +113,10 @@ define([], function () { '', - '
', + '', + '
', '', diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js index c15d92e88..b7fb0b286 100644 --- a/www/common/sframe-app-framework.js +++ b/www/common/sframe-app-framework.js @@ -308,7 +308,7 @@ define([ if (!readOnly) { onLocal(); } evOnReady.fire(newPad); - //UI.removeLoadingScreen(emitResize); + UI.removeLoadingScreen(emitResize); var privateDat = cpNfInner.metadataMgr.getPrivateData(); var hash = privateDat.availableHashes.editHash || diff --git a/www/common/tippy.css b/www/common/tippy.css deleted file mode 100644 index 819caa330..000000000 --- a/www/common/tippy.css +++ /dev/null @@ -1 +0,0 @@ -.tippy-touch{cursor:pointer!important}.tippy-notransition{transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:10000000 !important;outline:0;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-bottom:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-bottom:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:6px 0}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;right:-5px}.tippy-popper[x-placement^=left] [x-arrow].arrow-big{border-left:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;right:-10px}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=left] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-left:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-left:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:6px 0}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;left:-5px}.tippy-popper[x-placement^=right] [x-arrow].arrow-big{border-right:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;left:-10px}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=right] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-right:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(0,0,0,.7)}.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill]{background-color:transparent}.tippy-popper .tippy-tooltip.light-theme{color:#26323d;box-shadow:0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.6rem 1.2rem;font-size:1.2rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia]{transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip [x-arrow]{position:absolute;width:0;height:0}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:130%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;overflow:hidden;transition:all ease}.tippy-tooltip [x-circle]:before{content:"";padding-top:90%;float:left}@media (max-width:450px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}} diff --git a/www/common/tippy.min.js b/www/common/tippy.min.js deleted file mode 100644 index 302888e9c..000000000 --- a/www/common/tippy.min.js +++ /dev/null @@ -1 +0,0 @@ -(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.tippy=t()})(this,function(){'use strict';function t(e){Pe.forEach(function(t){var i=t.popper,o=t.tippyInstance,n=t.settings,r=n.appendTo,s=n.hideOnClick,a=n.trigger;if(r.contains(i)){var p=!0===s||-1!==a.indexOf('focus'),d=!e||i!==e.popper;p&&d&&o.hide(i)}})}function o(t,i){var o=Element.prototype.closest||function(t){for(var i=this;i;){if(e.call(i,t))return i;i=i.parentElement}};return o.call(t,i)}function n(e,t){return Array.prototype.find?e.find(t):e.filter(t)[0]}function r(){var i=function(){Ae.touch=!0,Ae.iOS()&&document.body.classList.add('tippy-touch'),Ae.dynamicInputDetection&&window.performance&&document.addEventListener('mousemove',r)},r=function(){var e;return function(){var t=performance.now();20>t-e&&(Ae.touch=!1,document.removeEventListener('mousemove',r),!Ae.iOS()&&document.body.classList.remove('tippy-touch')),e=t}}();document.addEventListener('click',function(e){if(!(e.target instanceof Element))return t();var i=o(e.target,Ce.TOOLTIPPED_EL),r=o(e.target,Ce.POPPER);if(r){var s=n(Pe,function(e){return e.popper===r}),a=s.settings.interactive;if(a)return}if(i){var p=n(Pe,function(e){return e.el===i}),d=p.settings,l=d.hideOnClick,c=d.multiple,f=d.trigger;if(!c&&Ae.touch||!c&&-1!==f.indexOf('click'))return t(p);if(!0!==l||-1!==f.indexOf('click'))return}o(e.target,Ce.CONTROLLER)||!document.querySelector(Ce.POPPER)||t()}),document.addEventListener('touchstart',i),window.addEventListener('blur',function(){var t=document,i=t.activeElement;i&&i.blur&&e.call(i,Ce.TOOLTIPPED_EL)&&i.blur()}),!Ae.SUPPORTS_TOUCH&&(0m&&(e=m-f-2*l),0>h-f-l+a&&(e=f)),s.style[p('transform')]='translate3d('+e+'px, '+i+'px, 0)'}function v(e){return e instanceof Element||/Element/.test(Object.prototype.toString.call(e))?[e]:Array.isArray(e)?e:[].slice.call(document.querySelectorAll(e))}function E(e,t,i){if(!t)return i();var o=e.popper.querySelector(Ce.TOOLTIP),n=!1,r=function t(r){r.target!==o||(n=!0,o.removeEventListener('webkitTransitionEnd',t),o.removeEventListener('transitionend',t),i())};o.addEventListener('webkitTransitionEnd',r),o.addEventListener('transitionend',r),clearTimeout(e._transitionendTimeout),e._transitionendTimeout=setTimeout(function(){n||i()},t)}function O(e){return e&&'[object Function]'==={}.toString.call(e)}function w(e,t){if(1!==e.nodeType)return[];var i=window.getComputedStyle(e,null);return t?i[t]:i}function T(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function L(e){if(!e||-1!==['HTML','BODY','#document'].indexOf(e.nodeName))return window.document.body;var t=w(e),i=t.overflow,o=t.overflowX,n=t.overflowY;return /(auto|scroll)/.test(i+n+o)?e:L(T(e))}function S(e){var t=e&&e.offsetParent,i=t&&t.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TD','TABLE'].indexOf(t.nodeName)&&'static'===w(t,'position')?S(t):t:window.document.documentElement}function x(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||S(e.firstElementChild)===e)}function A(e){return null===e.parentNode?e:A(e.parentNode)}function P(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return window.document.documentElement;var i=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,o=i?e:t,n=i?t:e,r=document.createRange();r.setStart(o,0),r.setEnd(n,0);var s=r.commonAncestorContainer;if(e!==s&&t!==s||o.contains(n))return x(s)?s:S(s);var a=A(e);return a.host?P(a.host,t):P(e,A(t).host)}function C(e){var t=1=i.clientWidth&&o>=i.clientHeight}),l=0r,bottom:n-a.bottom>r,left:a.left-o>r,right:o-a.right>r};return'top'===p?l.top=a.top-n>d:'bottom'===p?l.bottom=n-a.bottom>d:'left'===p?l.left=a.left-o>d:'right'===p?l.right=o-a.right>d:void 0,l.top||l.bottom||l.left||l.right}function Ee(e,t,i){var n,r,s=this,a=i.position,p=i.delay,d=i.duration,l=i.interactive,c=i.interactiveBorder,f=i.distance,m=i.hideOnClick,h=i.trigger,g=i.touchHold,b=i.touchWait,y=function(){clearTimeout(n),clearTimeout(r)},v=function(){if(y(),!u(t)){var e=Array.isArray(p)?p[0]:p;p?n=setTimeout(function(){return s.show(t)},e):s.show(t)}},E=function(e){return s.callbacks.wait?s.callbacks.wait.call(t,v,e):v()},O=function(){y();var e=Array.isArray(p)?p[1]:p;p?r=setTimeout(function(){return s.hide(t)},e):s.hide(t)};return{handleTrigger:function(i){var o='mouseenter'===i.type&&Ae.SUPPORTS_TOUCH&&Ae.touch;if(!(o&&g)){var n='click'===i.type;n&&u(t)&&'persistent'!==m?O():E(i),o&&Ae.iOS()&&e.click&&e.click()}},handleMouseleave:function(n){if(!('mouseleave'===n.type&&Ae.SUPPORTS_TOUCH&&Ae.touch&&g)){if(l){var r=function n(r){var s=function(){document.body.removeEventListener('mouseleave',O),document.removeEventListener('mousemove',n),O()},a=o(r.target,Ce.TOOLTIPPED_EL),p=o(r.target,Ce.POPPER)===t,d=-1!==h.indexOf('click');return a&&a!==e?s():void(p||a===e||d||ve(r,t,i)&&s())};return document.body.addEventListener('mouseleave',O),void document.addEventListener('mousemove',r)}O()}},handleBlur:function(e){!e.relatedTarget||Ae.touch||o(e.relatedTarget,Ce.POPPER)||O()}}}function Oe(e){var t=this;return e.reduce(function(e,i){var o=Qe,n=t.settings.performance?t.settings:ge(i,t.settings);n.arrow&&(n.animateFill=!1);var r=n.html,s=n.trigger,a=n.touchHold,p=i.getAttribute('title');if(!p&&!r)return e;i.setAttribute('data-tooltipped',''),i.setAttribute('aria-describedby','tippy-tooltip-'+o),l(i);var d=be(o,p,n),c=Ee.call(t,i,d,n),f=[];return s.trim().split(' ').forEach(function(e){return f=f.concat(ye(e,i,c,a))}),e.push({id:o,el:i,popper:d,settings:n,listeners:f,tippyInstance:t}),Qe++,e},[])}function we(e,t){return new et(e,t)}var Te=Math.min,Le=Math.floor,Se=Math.max,xe=Math.round,Ae={};'undefined'!=typeof window&&(Ae.SUPPORTED='requestAnimationFrame'in window,Ae.SUPPORTS_TOUCH='ontouchstart'in window,Ae.touch=!1,Ae.dynamicInputDetection=!0,Ae.iOS=function(){return /iPhone|iPad|iPod/.test(navigator.userAgent)&&!window.MSStream});for(var Pe=[],Ce={POPPER:'.tippy-popper',TOOLTIP:'.tippy-tooltip',CONTENT:'.tippy-tooltip-content',CIRCLE:'[x-circle]',ARROW:'[x-arrow]',TOOLTIPPED_EL:'[data-tooltipped]',CONTROLLER:'[data-tippy-controller]'},ke={html:!1,position:'top',animation:'shift',animateFill:!0,arrow:!1,arrowSize:'regular',delay:0,trigger:'mouseenter focus',duration:350,interactive:!1,interactiveBorder:2,theme:'dark',size:'regular',distance:10,offset:0,hideOnClick:!0,multiple:!1,followCursor:!1,inertia:!1,flipDuration:350,sticky:!1,stickyDuration:200,appendTo:null,zIndex:9999,touchHold:!1,performance:!1,dynamicTitle:!1,popperOptions:{}},Ie=Ae.SUPPORTED&&Object.keys(ke),De=Element.prototype,e=De.matches||De.matchesSelector||De.webkitMatchesSelector||De.mozMatchesSelector||De.msMatchesSelector||function(e){for(var t=(this.document||this.ownerDocument).querySelectorAll(e),o=t.length;0<=--o&&t.item(o)!==this;);return-1o[e]&&!t.escapeWithReference&&(n=Te(r[i],o[e]-('right'===e?r.width:r.height))),ze({},i,n)}};return n.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';r=je({},r,s[t](e))}),e.offsets.popper=r,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,i=t.popper,o=t.reference,n=e.placement.split('-')[0],r=Le,s=-1!==['top','bottom'].indexOf(n),a=s?'right':'bottom',p=s?'left':'top',d=s?'width':'height';return i[a]r(o[a])&&(e.offsets.popper[p]=r(o[a])),e}},arrow:{order:500,enabled:!0,fn:function(e,t){if(!ae(e.instance.modifiers,'arrow','keepTogether'))return e;var i=t.element;if('string'==typeof i){if(i=e.instance.popper.querySelector(i),!i)return e;}else if(!e.instance.popper.contains(i))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var o=e.placement.split('-')[0],n=e.offsets,r=n.popper,s=n.reference,a=-1!==['left','right'].indexOf(o),p=a?'height':'width',d=a?'top':'left',l=a?'left':'top',c=a?'bottom':'right',f=Y(i)[p];s[c]-fr[c]&&(e.offsets.popper[d]+=s[d]+f-r[c]);var m=s[d]+s[p]/2-f/2,h=m-H(e.offsets.popper)[d];return h=Se(Te(r[p]-f,h),0),e.arrowElement=i,e.offsets.arrow={},e.offsets.arrow[d]=xe(h),e.offsets.arrow[l]='',e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(J(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var i=U(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement),o=e.placement.split('-')[0],n=z(o),r=e.placement.split('-')[1]||'',s=[];switch(t.behavior){case Ge.FLIP:s=[o,n];break;case Ge.CLOCKWISE:s=de(o);break;case Ge.COUNTERCLOCKWISE:s=de(o,!0);break;default:s=t.behavior;}return s.forEach(function(a,p){if(o!==a||s.length===p+1)return e;o=e.placement.split('-')[0],n=z(o);var d=e.offsets.popper,l=e.offsets.reference,c=Le,f='left'===o&&c(d.right)>c(l.left)||'right'===o&&c(d.left)c(l.top)||'bottom'===o&&c(d.top)c(i.right),u=c(d.top)c(i.bottom),b='left'===o&&m||'right'===o&&h||'top'===o&&u||'bottom'===o&&g,y=-1!==['top','bottom'].indexOf(o),v=!!t.flipVariations&&(y&&'start'===r&&m||y&&'end'===r&&h||!y&&'start'===r&&u||!y&&'end'===r&&g);(f||b||v)&&(e.flipped=!0,(f||b)&&(o=s[p+1]),v&&(r=pe(r)),e.placement=o+(r?'-'+r:''),e.offsets.popper=je({},e.offsets.popper,j(e.instance.popper,e.offsets.reference,e.placement)),e=G(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,i=t.split('-')[0],o=e.offsets,n=o.popper,r=o.reference,s=-1!==['left','right'].indexOf(i),a=-1===['top','left'].indexOf(i);return n[s?'left':'top']=r[t]-(a?n[s?'width':'height']:0),e.placement=z(t),e.offsets.popper=H(n),e}},hide:{order:800,enabled:!0,fn:function(e){if(!ae(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,i=K(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottomi.right||t.top>i.bottom||t.right'):r.classList.add('tippy-arrow'),n.appendChild(r)}if(o.animateFill){n.setAttribute('data-animatefill','');var s=document.createElement('div');s.setAttribute('data-state','hidden'),s.classList.add('tippy-backdrop'),n.appendChild(s)}o.inertia&&n.setAttribute('data-inertia',''),o.interactive&&n.setAttribute('data-interactive','');var p=document.createElement('div');p.setAttribute('class','tippy-content');var l=o.html;if(l){var d;l instanceof Element?(p.appendChild(l),d='#'+l.id||'tippy-html-template'):(p.innerHTML=document.querySelector(l).innerHTML,d=l),i.setAttribute('data-html',''),n.setAttribute('data-template-id',d),o.interactive&&i.setAttribute('tabindex','-1')}else p[o.allowTitleHTML?'innerHTML':'textContent']=t;return n.appendChild(p),i.appendChild(n),i}function p(e,t,o,i){var n=o.onTrigger,r=o.onMouseLeave,a=o.onBlur,s=o.onDelegateShow,p=o.onDelegateHide,l=[];if('manual'===e)return l;var d=function(e,o){t.addEventListener(e,o),l.push({event:e,handler:o})};return i.target?(ze.supportsTouch&&i.touchHold&&(d('touchstart',s),d('touchend',p)),'mouseenter'===e&&(d('mouseover',s),d('mouseout',p)),'focus'===e&&(d('focusin',s),d('focusout',p)),'click'===e&&d('click',s)):(d(e,n),ze.supportsTouch&&i.touchHold&&(d('touchstart',n),d('touchend',r)),'mouseenter'===e&&d('mouseleave',r),'focus'===e&&d(qe?'focusout':'blur',a)),l}function l(e,t){var o=Ke.reduce(function(o,i){var n=e.getAttribute('data-tippy-'+i.toLowerCase())||t[i];return'false'===n&&(n=!1),'true'===n&&(n=!0),isFinite(n)&&!isNaN(parseFloat(n))&&(n=parseFloat(n)),'target'!==i&&'string'==typeof n&&'['===n.trim().charAt(0)&&(n=JSON.parse(n)),o[i]=n,o},{});return Qe({},t,o)}function d(e,t){return t.arrow&&(t.animateFill=!1),t.appendTo&&'function'==typeof t.appendTo&&(t.appendTo=t.appendTo()),'function'==typeof t.html&&(t.html=t.html(e)),t}function c(e){var t=function(t){return e.querySelector(t)};return{tooltip:t(je.TOOLTIP),backdrop:t(je.BACKDROP),content:t(je.CONTENT),arrow:t(je.ARROW)||t(je.ROUND_ARROW)}}function f(e){var t=e.getAttribute('title');t&&e.setAttribute('data-original-title',t),e.removeAttribute('title')}function m(e){return e&&'[object Function]'==={}.toString.call(e)}function u(e,t){if(1!==e.nodeType)return[];var o=getComputedStyle(e,null);return t?o[t]:o}function h(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function g(e){if(!e)return document.body;switch(e.nodeName){case'HTML':case'BODY':return e.ownerDocument.body;case'#document':return e.body;}var t=u(e),o=t.overflow,i=t.overflowX,n=t.overflowY;return /(auto|scroll|overlay)/.test(o+n+i)?e:g(h(e))}function b(e){return 11===e?ot:10===e?it:ot||it}function v(e){if(!e)return document.documentElement;for(var t=b(10)?document.body:null,o=e.offsetParent;o===t&&e.nextElementSibling;)o=(e=e.nextElementSibling).offsetParent;var i=o&&o.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TD','TABLE'].indexOf(o.nodeName)&&'static'===u(o,'position')?v(o):o:e?e.ownerDocument.documentElement:document.documentElement}function y(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||v(e.firstElementChild)===e)}function w(e){return null===e.parentNode?e:w(e.parentNode)}function E(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return document.documentElement;var o=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,i=o?e:t,n=o?t:e,r=document.createRange();r.setStart(i,0),r.setEnd(n,0);var a=r.commonAncestorContainer;if(e!==a&&t!==a||i.contains(n))return y(a)?a:v(a);var s=w(e);return s.host?E(s.host,t):E(e,w(t).host)}function T(e){var t=1=o.clientWidth&&i>=o.clientHeight}),d=0r,bottom:n-s.bottom>r,left:s.left-i>r,right:i-s.right>r};return'top'===p?d.top=s.top-n>l:'bottom'===p?d.bottom=n-s.bottom>l:'left'===p?d.left=s.left-i>l:'right'===p?d.right=i-s.right>l:void 0,d.top||d.bottom||d.left||d.right}function fe(e,t,o,i){if(!t.length)return'';var n={scale:function(){return 1===t.length?''+t[0]:o?t[0]+', '+t[1]:t[1]+', '+t[0]}(),translate:function(){return 1===t.length?i?-t[0]+'px':t[0]+'px':o?i?t[0]+'px, '+-t[1]+'px':t[0]+'px, '+t[1]+'px':i?-t[1]+'px, '+t[0]+'px':t[1]+'px, '+t[0]+'px'}()};return n[e]}function me(e,t){if(!e)return'';return t?e:{X:'Y',Y:'X'}[e]}function ue(e,t,o){var i=de(e),n='top'===i||'bottom'===i,r='right'===i||'bottom'===i,s=function(e){var t=o.match(e);return t?t[1]:''},p=function(e){var t=o.match(e);return t?t[1].split(',').map(parseFloat):[]},l={translate:/translateX?Y?\(([^)]+)\)/,scale:/scaleX?Y?\(([^)]+)\)/},d={translate:{axis:s(/translate([XY])/),numbers:p(l.translate)},scale:{axis:s(/scale([XY])/),numbers:p(l.scale)}},c=o.replace(l.translate,'translate'+me(d.translate.axis,n)+'('+fe('translate',d.translate.numbers,n,r)+')').replace(l.scale,'scale'+me(d.scale.axis,n)+'('+fe('scale',d.scale.numbers,n,r)+')');t.style[a('transform')]=c}function he(e){return-(e-Xe.distance)+'px'}function ge(e){requestAnimationFrame(function(){setTimeout(e,1)})}function be(t,o){var i=Element.prototype.closest||function(t){for(var o=this;o;){if(e.call(o,t))return o;o=o.parentElement}};return i.call(t,o)}function ye(e,t){return Array.isArray(e)?e[t]:e}function ve(e,t){e.forEach(function(e){e&&e.setAttribute('data-state',t)})}function we(e,t){e.filter(Boolean).forEach(function(e){e.style[a('transitionDuration')]=t+'ms'})}function Ee(e){var t=window.scrollX||window.pageXOffset,o=window.scrollY||window.pageYOffset;e.focus(),scroll(t,o)}function Te(){var e=this._(ut).lastTriggerEvent;return this.options.followCursor&&!ze.usingTouch&&e&&'focus'!==e.type}function Le(e){var t=be(e.target,this.options.target);if(t&&!t._tippy){var o=t.getAttribute('title')||this.title;o&&(t.setAttribute('title',o),Me(t,Qe({},this.options,{target:null})),Oe.call(t._tippy,e))}}function Oe(e){var t=this,o=this.options;if(Se.call(this),!this.state.visible){if(o.target)return void Le.call(this,e);if(this._(ut).isPreparingToShow=!0,o.wait)return void o.wait.call(this.popper,this.show.bind(this),e);if(Te.call(this)){this._(ut).followCursorListener||Pe.call(this);var i=c(this.popper),n=i.arrow;n&&(n.style.margin='0'),document.addEventListener('mousemove',this._(ut).followCursorListener)}var r=ye(o.delay,0);r?this._(ut).showTimeout=setTimeout(function(){t.show()},r):this.show()}}function xe(){var e=this;if(Se.call(this),!!this.state.visible){this._(ut).isPreparingToShow=!1;var t=ye(this.options.delay,1);t?this._(ut).hideTimeout=setTimeout(function(){e.state.visible&&e.hide()},t):this.hide()}}function Ae(){var e=this;return{onTrigger:function(t){if(e.state.enabled){var o=ze.supportsTouch&&ze.usingTouch&&-1<['mouseenter','mouseover','focus'].indexOf(t.type);o&&e.options.touchHold||(e._(ut).lastTriggerEvent=t,'click'===t.type&&'persistent'!==e.options.hideOnClick&&e.state.visible?xe.call(e):Oe.call(e,t),o&&ze.iOS&&e.reference.click&&e.reference.click())}},onMouseLeave:function(t){if(!(-1<['mouseleave','mouseout'].indexOf(t.type)&&ze.supportsTouch&&ze.usingTouch&&e.options.touchHold)){if(e.options.interactive){var o=xe.bind(e),i=function t(i){var n=be(i.target,je.REFERENCE),r=be(i.target,je.POPPER)===e.popper,a=n===e.reference;r||a||ce(i,e.popper,e.options)&&(document.body.removeEventListener('mouseleave',o),document.removeEventListener('mousemove',t),xe.call(e,t))};return document.body.addEventListener('mouseleave',o),void document.addEventListener('mousemove',i)}xe.call(e)}},onBlur:function(t){if(!(t.target!==e.reference||ze.usingTouch)){if(e.options.interactive){if(!t.relatedTarget)return;if(be(t.relatedTarget,je.POPPER))return}xe.call(e)}},onDelegateShow:function(t){be(t.target,e.options.target)&&Oe.call(e,t)},onDelegateHide:function(t){be(t.target,e.options.target)&&xe.call(e)}}}function ke(){var e=this,t=this.popper,o=this.reference,i=this.options,n=c(t),r=n.tooltip,a=i.popperOptions,s='round'===i.arrowType?je.ROUND_ARROW:je.ARROW,p=r.querySelector(s),l=Qe({placement:i.placement},a||{},{modifiers:Qe({},a?a.modifiers:{},{arrow:Qe({element:s},a&&a.modifiers?a.modifiers.arrow:{}),flip:Qe({enabled:i.flip,padding:i.distance+5,behavior:i.flipBehavior},a&&a.modifiers?a.modifiers.flip:{}),offset:Qe({offset:i.offset},a&&a.modifiers?a.modifiers.offset:{})}),onCreate:function(){r.style[de(t)]=he(i.distance),p&&i.arrowTransform&&ue(t,p,i.arrowTransform)},onUpdate:function(){var e=r.style;e.top='',e.bottom='',e.left='',e.right='',e[de(t)]=he(i.distance),p&&i.arrowTransform&&ue(t,p,i.arrowTransform)}});return De.call(this,{target:t,callback:function(){e.popperInstance.update()},options:{childList:!0,subtree:!0,characterData:!0}}),new ct(o,t,l)}function Ce(e){var t=this.options;if(this.popperInstance?(this.popperInstance.scheduleUpdate(),t.livePlacement&&!Te.call(this)&&this.popperInstance.enableEventListeners()):(this.popperInstance=ke.call(this),!t.livePlacement&&this.popperInstance.disableEventListeners()),!Te.call(this)){var o=c(this.popper),i=o.arrow;i&&(i.style.margin=''),this.popperInstance.reference=this.reference}le(this.popperInstance,e,!0),t.appendTo.contains(this.popper)||t.appendTo.appendChild(this.popper)}function Se(){var e=this._(ut),t=e.showTimeout,o=e.hideTimeout;clearTimeout(t),clearTimeout(o)}function Pe(){var e=this;this._(ut).followCursorListener=function(t){var o=e._(ut).lastMouseMoveEvent=t,i=o.clientX,n=o.clientY;e.popperInstance&&(e.popperInstance.reference={getBoundingClientRect:function(){return{width:0,height:0,top:n,left:i,right:i,bottom:n}},clientWidth:0,clientHeight:0},e.popperInstance.scheduleUpdate())}}function Ie(){var e=this,t=function(){e.popper.style[a('transitionDuration')]=e.options.updateDuration+'ms'},o=function(){e.popper.style[a('transitionDuration')]=''};ge(function i(){e.popperInstance&&e.popperInstance.scheduleUpdate(),t(),e.state.visible?requestAnimationFrame(i):o()})}function De(e){var t=e.target,o=e.callback,i=e.options;if(window.MutationObserver){var n=new MutationObserver(o);n.observe(t,i),this._(ut).mutationObservers.push(n)}}function Re(e,t){if(!e)return t();var o=c(this.popper),i=o.tooltip,n=function(e,t){t&&i[e+'EventListener']('ontransitionend'in window?'transitionend':'webkitTransitionEnd',t)},r=function o(r){r.target===i&&(n('remove',o),t())};n('remove',this._(ut).transitionendListener),n('add',r),this._(ut).transitionendListener=r}function _e(e,t){return e.reduce(function(e,o){var i=bt,n=d(o,t.performance?t:l(o,t)),r=o.getAttribute('title');if(!r&&!n.target&&!n.html&&!n.dynamicTitle)return e;o.setAttribute(n.target?'data-tippy-delegate':'data-tippy',''),f(o);var a=s(i,r,n),m=new gt({id:i,reference:o,popper:a,options:n,title:r,popperInstance:null});n.createPopperInstanceOnInit&&(m.popperInstance=ke.call(m),m.popperInstance.disableEventListeners());var u=Ae.call(m);return m.listeners=n.trigger.trim().split(' ').reduce(function(e,t){return e.concat(p(t,o,u,n))},[]),n.dynamicTitle&&De.call(m,{target:o,callback:function(){var e=c(a),t=e.content,i=o.getAttribute('title');i&&(t[n.allowTitleHTML?'innerHTML':'textContent']=m.title=i,f(o))},options:{attributes:!0}}),o._tippy=m,a._tippy=m,a._reference=o,e.push(m),bt++,e},[])}function He(e){var t=o(document.querySelectorAll(je.POPPER));t.forEach(function(t){var o=t._tippy;if(o){var i=o.options;(!0===i.hideOnClick||-1t-e&&(ze.usingTouch=!1,document.removeEventListener('mousemove',i),!ze.iOS&&document.body.classList.remove('tippy-touch'),ze.onUserInputChange('mouse')),e=t}}();document.addEventListener('click',function(e){if(!(e.target instanceof Element))return He();var t=be(e.target,je.REFERENCE),o=be(e.target,je.POPPER);if(!(o&&o._reference._tippy.options.interactive)){if(t){var i=t._tippy.options;if(!i.multiple&&ze.usingTouch||!i.multiple&&-1i[e]&&!t.escapeWithReference&&(n=We(r[o],i[e]-('right'===e?r.width:r.height))),at({},o,n)}};return n.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';r=st({},r,a[t](e))}),e.offsets.popper=r,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,o=t.popper,i=t.reference,n=e.placement.split('-')[0],r=Ue,a=-1!==['top','bottom'].indexOf(n),s=a?'right':'bottom',p=a?'left':'top',l=a?'width':'height';return o[s]r(i[s])&&(e.offsets.popper[p]=r(i[s])),e}},arrow:{order:500,enabled:!0,fn:function(e,t){var o;if(!oe(e.instance.modifiers,'arrow','keepTogether'))return e;var i=t.element;if('string'==typeof i){if(i=e.instance.popper.querySelector(i),!i)return e;}else if(!e.instance.popper.contains(i))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var n=e.placement.split('-')[0],r=e.offsets,a=r.popper,s=r.reference,p=-1!==['left','right'].indexOf(n),l=p?'height':'width',d=p?'Top':'Left',c=d.toLowerCase(),f=p?'left':'top',m=p?'bottom':'right',h=M(i)[l];s[m]-ha[m]&&(e.offsets.popper[c]+=s[c]+h-a[m]),e.offsets.popper=k(e.offsets.popper);var g=s[c]+s[l]/2-h/2,b=u(e.instance.popper),y=parseFloat(b['margin'+d],10),v=parseFloat(b['border'+d+'Width'],10),w=g-e.offsets.popper[c]-y-v;return w=Fe(We(a[l]-h,w),0),e.arrowElement=i,e.offsets.arrow=(o={},at(o,c,Be(w)),at(o,f,''),o),e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(j(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var o=R(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement,e.positionFixed),i=e.placement.split('-')[0],n=W(i),r=e.placement.split('-')[1]||'',a=[];switch(t.behavior){case dt.FLIP:a=[i,n];break;case dt.CLOCKWISE:a=ne(i);break;case dt.COUNTERCLOCKWISE:a=ne(i,!0);break;default:a=t.behavior;}return a.forEach(function(s,p){if(i!==s||a.length===p+1)return e;i=e.placement.split('-')[0],n=W(i);var l=e.offsets.popper,d=e.offsets.reference,c=Ue,f='left'===i&&c(l.right)>c(d.left)||'right'===i&&c(l.left)c(d.top)||'bottom'===i&&c(l.top)c(o.right),h=c(l.top)c(o.bottom),b='left'===i&&m||'right'===i&&u||'top'===i&&h||'bottom'===i&&g,y=-1!==['top','bottom'].indexOf(i),v=!!t.flipVariations&&(y&&'start'===r&&m||y&&'end'===r&&u||!y&&'start'===r&&h||!y&&'end'===r&&g);(f||b||v)&&(e.flipped=!0,(f||b)&&(i=a[p+1]),v&&(r=ie(r)),e.placement=i+(r?'-'+r:''),e.offsets.popper=st({},e.offsets.popper,B(e.instance.popper,e.offsets.reference,e.placement)),e=Y(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,o=t.split('-')[0],i=e.offsets,n=i.popper,r=i.reference,a=-1!==['left','right'].indexOf(o),s=-1===['top','left'].indexOf(o);return n[a?'left':'top']=r[o]-(s?n[a?'width':'height']:0),e.placement=W(t),e.offsets.popper=k(n),e}},hide:{order:800,enabled:!0,fn:function(e){if(!oe(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,o=U(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottomo.right||t.top>o.bottom||t.right Date: Fri, 13 Apr 2018 15:25:14 +0200 Subject: [PATCH 03/15] New tippy everywhere --- customize.dist/src/less2/include/framework.less | 17 +++++++++++++++++ customize.dist/src/less2/include/tippy.less | 2 +- www/common/common-interface.js | 2 +- www/contacts/app-contacts.less | 8 ++------ www/debug/app-debug.less | 8 ++------ www/drive/app-drive.less | 9 +++------ www/file/app-file.less | 8 ++------ www/profile/app-profile.less | 8 ++------ www/settings/app-settings.less | 7 ++----- www/todo/app-todo.less | 8 ++------ www/worker/app-worker.less | 9 ++------- 11 files changed, 36 insertions(+), 50 deletions(-) diff --git a/customize.dist/src/less2/include/framework.less b/customize.dist/src/less2/include/framework.less index 7b372d5ee..7e58b62ad 100644 --- a/customize.dist/src/less2/include/framework.less +++ b/customize.dist/src/less2/include/framework.less @@ -1,3 +1,4 @@ +@import (once) "./colortheme-all.less"; @import (once) "./toolbar.less"; @import (once) './fileupload.less'; @import (once) './alertify.less'; @@ -22,3 +23,19 @@ ); } +.framework_min_main( + @color: @colortheme_default-color, // Color of the text for the toolbar + @bg-color: @colortheme_default-bg, // color of the toolbar background + @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar +) { + .toolbar_main( + @bg-color: @bg-color, + @warn-color: @warn-color, + @color: @color + ); + .fileupload_main(); + .alertify_main(); + .tippy_main(); +} + + diff --git a/customize.dist/src/less2/include/tippy.less b/customize.dist/src/less2/include/tippy.less index c8f9605db..72ceaa822 100644 --- a/customize.dist/src/less2/include/tippy.less +++ b/customize.dist/src/less2/include/tippy.less @@ -1,4 +1,4 @@ -@import (once) './creation.less'; +@import (once) './colortheme-all.less'; .tippy_main() { .tippy-tooltip.cryptpad-theme { diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 475ba98e1..24058199b 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -669,7 +669,7 @@ define([ theme: 'cryptpad', arrow: true, maxWidth: '200px', - flip: false, + flip: true, popperOptions: { modifiers: { preventOverflow: { boundariesElement: 'window' } diff --git a/www/contacts/app-contacts.less b/www/contacts/app-contacts.less index 0beffa75c..34702d6a3 100644 --- a/www/contacts/app-contacts.less +++ b/www/contacts/app-contacts.less @@ -1,17 +1,13 @@ @import (once) "../../customize/src/less2/include/browser.less"; -@import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; -@import (once) '../../customize/src/less2/include/fileupload.less'; -@import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/avatar.less'; +@import (once) '../../customize/src/less2/include/framework.less'; -.toolbar_main( +.framework_min_main( @bg-color: @colortheme_friends-bg, @warn-color: @colortheme_friends-warn, @color: @colortheme_friends-color ); -.fileupload_main(); -.alertify_main(); // body &.cp-app-contacts { diff --git a/www/debug/app-debug.less b/www/debug/app-debug.less index da305f120..2a4af9c37 100644 --- a/www/debug/app-debug.less +++ b/www/debug/app-debug.less @@ -1,15 +1,11 @@ @import (once) "../../customize/src/less2/include/browser.less"; -@import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; -@import (once) '../../customize/src/less2/include/fileupload.less'; -@import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/tools.less'; @import (once) '../../customize/src/less2/include/tokenfield.less'; +@import (once) '../../customize/src/less2/include/framework.less'; -.toolbar_main(); -.fileupload_main(); -.alertify_main(); .tokenfield_main(); +.framework_min_main(); // body &.cp-app-debug { diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less index 29870f560..0348cf89e 100644 --- a/www/drive/app-drive.less +++ b/www/drive/app-drive.less @@ -1,20 +1,17 @@ @import (once) "../../customize/src/less2/include/browser.less"; -@import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; -@import (once) '../../customize/src/less2/include/fileupload.less'; -@import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/leftside-menu.less'; @import (once) "../../customize/src/less2/include/tools.less"; @import (once) "../../customize/src/less2/include/limit-bar.less"; @import (once) "../../customize/src/less2/include/tokenfield.less"; +@import (once) '../../customize/src/less2/include/framework.less'; -.toolbar_main( +.framework_min_main( @bg-color: @colortheme_drive-bg, @warn-color: @colortheme_drive-warn, @color: @colortheme_drive-color ); -.fileupload_main(); -.alertify_main(); + .limit-bar_main(); .tokenfield_main(); diff --git a/www/file/app-file.less b/www/file/app-file.less index ec22a2e0c..444e5777b 100644 --- a/www/file/app-file.less +++ b/www/file/app-file.less @@ -1,17 +1,13 @@ @import (once) "../../customize/src/less2/include/browser.less"; -@import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; -@import (once) '../../customize/src/less2/include/fileupload.less'; -@import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/tokenfield.less'; +@import (once) '../../customize/src/less2/include/framework.less'; -.toolbar_main( +.framework_min_main( @bg-color: @colortheme_file-bg, @warn-color: @colortheme_file-warn, @color: @colortheme_file-color ); -.fileupload_main(); -.alertify_main(); .tokenfield_main(); @button-border: 2px; diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less index d36233782..4bbc377e4 100644 --- a/www/profile/app-profile.less +++ b/www/profile/app-profile.less @@ -1,19 +1,15 @@ @import (once) "../../customize/src/less2/include/browser.less"; -@import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; -@import (once) '../../customize/src/less2/include/fileupload.less'; -@import (once) '../../customize/src/less2/include/alertify.less'; +@import (once) '../../customize/src/less2/include/framework.less'; @import (once) '../../customize/src/less2/include/avatar.less'; @import (once) '../../customize/src/less2/include/sidebar-layout.less'; -.toolbar_main( +.framework_min_main( @bg-color: @colortheme_profile-bg, @warn-color: @colortheme_profile-warn, @color: @colortheme_profile-color ); -.fileupload_main(); -.alertify_main(); .sidebar-layout_main(); // body diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less index bb033c6dc..6c78318db 100644 --- a/www/settings/app-settings.less +++ b/www/settings/app-settings.less @@ -1,18 +1,15 @@ -@import (once) "../../customize/src/less2/include/colortheme-all.less"; @import (once) "../../customize/src/less2/include/browser.less"; -@import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; -@import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/sidebar-layout.less'; @import (once) "../../customize/src/less2/include/limit-bar.less"; @import (once) "../../customize/src/less2/include/creation.less"; +@import (once) '../../customize/src/less2/include/framework.less'; -.toolbar_main( +.framework_min_main( @bg-color: @colortheme_settings-bg, @warn-color: @colortheme_settings-warn, @color: @colortheme_settings-color ); -.alertify_main(); .sidebar-layout_main(); .limit-bar_main(); .creation_main(); diff --git a/www/todo/app-todo.less b/www/todo/app-todo.less index 5008498b1..1c3d8ed97 100644 --- a/www/todo/app-todo.less +++ b/www/todo/app-todo.less @@ -1,17 +1,13 @@ @import (once) "../../customize/src/less2/include/browser.less"; -@import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; -@import (once) '../../customize/src/less2/include/fileupload.less'; -@import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/avatar.less'; +@import (once) '../../customize/src/less2/include/framework.less'; -.toolbar_main( +.framework_min_main( @bg-color: @colortheme_todo-bg, @warn-color: @colortheme_todo-warn, @color: @colortheme_todo-color ); -.fileupload_main(); -.alertify_main(); // body &.cp-app-todo { diff --git a/www/worker/app-worker.less b/www/worker/app-worker.less index 9e437ecdc..2e0a9f94e 100644 --- a/www/worker/app-worker.less +++ b/www/worker/app-worker.less @@ -1,14 +1,9 @@ @import (once) "../../customize/src/less2/include/browser.less"; -@import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; -@import (once) '../../customize/src/less2/include/fileupload.less'; -@import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/avatar.less'; +@import (once) '../../customize/src/less2/include/framework.less'; - -.toolbar_main(); -.fileupload_main(); -.alertify_main(); +.framework_min_main(); // body &.cp-app-worker { From 52d6c9d468a77139900fe5c7e0e8ef9159e81309 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 13 Apr 2018 17:47:33 +0200 Subject: [PATCH 04/15] New colortheme for alertify logs and modals --- .../src/less2/include/alertify.less | 23 ++++++++++--------- .../src/less2/include/colortheme.less | 20 +++++++++++----- .../src/less2/include/creation.less | 3 --- customize.dist/src/less2/include/icons.less | 1 - customize.dist/src/less2/include/modal.less | 2 +- customize.dist/src/less2/include/tippy.less | 4 +--- customize.dist/src/less2/include/toolbar.less | 9 ++++++-- www/common/common-interface.js | 11 +++++---- www/common/loading.js | 9 +++++++- www/file/app-file.less | 5 ---- www/filepicker/app-filepicker.less | 3 ++- 11 files changed, 51 insertions(+), 39 deletions(-) diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index b845a5d6f..5307a68bf 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -12,14 +12,11 @@ @alertify-btn-fg: @alertify-fore; - @alertify-btn-bg: rgba(200, 200, 200, 0.1); - @alertify-btn-bg-hover: rgba(200, 200, 200, .3); - @alertify-bg: @colortheme_modal-dim; @alertify-fg: @alertify-fore; @alertify-input-bg: @colortheme_modal-input; - @alertify-input-fg: @colortheme_modal-fg; + @alertify-input-fg: @colortheme_modal-input-fg; @alertify_padding-base: @variables_padding; @alertify_box-shadow: @variables_shadow; @@ -113,7 +110,7 @@ .dialog, .alert { .bright { - color: @colortheme_light-base; + //color: @colortheme_light-base; } & > div { @@ -227,7 +224,7 @@ button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) { - background-color: @alertify-btn-bg; + background-color: @colortheme_alertify-cancel; box-sizing: border-box; position: relative; outline: 0; @@ -247,7 +244,7 @@ border-radius: 0; color: @alertify-btn-fg; - border: 1px solid transparent; + border: 1px solid @colortheme_alertify-cancel-border; &.safe, &.danger { color: @colortheme_old-base; @@ -256,28 +253,32 @@ } &.danger { background-color: @colortheme_alertify-red; + border-color: @colortheme_alertify-red-border; &:hover, &:active { - background-color: lighten(@colortheme_alertify-red, 5%); + background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%)); } } &.safe { background-color: @colortheme_alertify-green; + border-color: @colortheme_alertify-green-border; &:hover, &:active { - background-color: lighten(@colortheme_alertify-green, 10%); + background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%)); } } &.primary { background-color: @colortheme_alertify-primary; color: @colortheme_alertify-primary-text; + border-color: @colortheme_alertify-primary-border; + font-weight: bold; &:hover, &:active { - background-color: darken(@colortheme_alertify-primary, 10%); + background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%)); } } &:hover, &:active { - background-color: @alertify-btn-bg-hover; + background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-cancel, 10%), lighten(@colortheme_alertify-cancel, 10%)); } &:focus { diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 2d785a74f..43b8cf0f6 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -26,24 +26,32 @@ @colortheme_form-warning: #f49842; @colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%); -@colortheme_modal-bg: #222; -@colortheme_modal-fg: #fff; +@colortheme_modal-bg: @colortheme_form-bg-alt; // TODO Modals bg +@colortheme_modal-fg: @colortheme_form-color-alt; @colortheme_modal-link: #eee; @colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%); -@colortheme_modal-dim: rgba(0, 0, 0, 0.4); +@colortheme_modal-dim: fade(@colortheme_logo-2, 50%); // TODO transparent background behind modals +@colortheme_modal-input: @colortheme_form-bg; +@colortheme_modal-input-fg: @colortheme_form-color; @colortheme_loading-bg: @colortheme_logo-1; @colortheme_loading-bg-alt: @colortheme_logo-2; @colortheme_loading-color: @colortheme_old-fore; -@colortheme_modal-input: #111; +// TODO modals buttons @colortheme_alertify-red: #E55236; +@colortheme_alertify-red-border: transparent; @colortheme_alertify-green: #77C825; -@colortheme_alertify-primary: #fff; -@colortheme_alertify-primary-text: #000; +@colortheme_alertify-green-border: transparent; +@colortheme_alertify-primary: @colortheme_form-bg; +@colortheme_alertify-primary-text: @colortheme_form-color; +@colortheme_alertify-primary-border: transparent; +@colortheme_alertify-cancel: @colortheme_modal-bg; +@colortheme_alertify-cancel-border: #ccc; @colortheme_notification-log: rgba(0, 0, 0, 0.8); +@colortheme_notification-log: fade(@colortheme_logo-1, 90%); @colortheme_notification-warn: rgba(205, 37, 50, 0.8); @colortheme_dropdown-bg: #f9f9f9; diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index afe8874ba..59941044e 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -12,9 +12,6 @@ @colortheme_creation-modal: #666; @colortheme_creation-modal-title: @colortheme_loading-bg; - .tippy-popper { - z-index: 100000001 !important; - } #cp-creation-container { position: absolute; z-index: 100000000; // #loading * 10 diff --git a/customize.dist/src/less2/include/icons.less b/customize.dist/src/less2/include/icons.less index 03a6af5ab..820a238c4 100644 --- a/customize.dist/src/less2/include/icons.less +++ b/customize.dist/src/less2/include/icons.less @@ -10,7 +10,6 @@ text-overflow: ellipsis; padding-top: 5px; padding-bottom: 5px; - border: 1px solid white; .cp-icons-name { width: 100%; diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less index 3bd674527..e7e39ad96 100644 --- a/customize.dist/src/less2/include/modal.less +++ b/customize.dist/src/less2/include/modal.less @@ -57,7 +57,7 @@ input { background-color: @colortheme_modal-input; - color: @colortheme_modal-fg; + color: @colortheme_modal-input-fg; border: 0; padding: 8px 12px; margin: 1em; diff --git a/customize.dist/src/less2/include/tippy.less b/customize.dist/src/less2/include/tippy.less index 72ceaa822..d13cc11f3 100644 --- a/customize.dist/src/less2/include/tippy.less +++ b/customize.dist/src/less2/include/tippy.less @@ -5,9 +5,7 @@ /* Your styling here. Example: */ background-color: white; box-shadow: 2px 2px 10px #000; - //border: 1px solid #BBB; - //border-radius: 0; - //border: 2px solid orange; + box-shadow: 2px 2px 5px #000; font-weight: bold; color: #333; [x-circle] { diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 50c51f611..602868fe4 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -183,8 +183,13 @@ #cp-app-toolbar-creation-dialog.cp-modal-container { .icons_main(); - li:hover { - border: 1px solid white; + li { + border: 1px solid @colortheme_modal-fg; + &:hover { + //border: 1px solid @colortheme_modal-fg; + background: @colortheme_modal-fg; + color: @colortheme_modal-bg; + } } .cp-modal { display: flex; diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 24058199b..bf6bc41e4 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -23,7 +23,7 @@ define([ UI.Alertify = Alertify; // set notification timeout - Alertify._$$alertify.delay = AppConfig.notificationTimeout || 5000; + Alertify._$$alertify.delay = 6000000 || AppConfig.notificationTimeout || 5000; var findCancelButton = UI.findCancelButton = function (root) { if (root) { @@ -557,9 +557,9 @@ define([ $loading.removeClass('cp-loading-hidden'); $('.cp-loading-spinner-container').show(); if (loadingText) { - $('#' + LOADING).find('p').text(loadingText); + $('#' + LOADING).find('p').show().text(loadingText); } else { - $('#' + LOADING).find('p').text(''); + $('#' + LOADING).find('p').hide().text(''); } $container = $loading.find('.cp-loading-container'); } else { @@ -610,8 +610,8 @@ define([ } $('.cp-loading-spinner-container').hide(); $('#cp-loading-tip').remove(); - if (transparent) { $('#' + LOADING).css('opacity', 0.8); } - $('#' + LOADING).find('p').html(error || Messages.error); + if (transparent) { $('#' + LOADING).css('opacity', 0.9); } + $('#' + LOADING).find('p').show().html(error || Messages.error); if (exitable) { $(window).focus(); $(window).keydown(function (e) { @@ -677,6 +677,7 @@ define([ }, //arrowType: 'round', arrowTransform: 'scale(2)', + zIndex: 100000001 }); UI.addTooltips = function () { var MutationObserver = window.MutationObserver; diff --git a/www/common/loading.js b/www/common/loading.js index 6febf0450..c45dabdcd 100644 --- a/www/common/loading.js +++ b/www/common/loading.js @@ -72,6 +72,13 @@ define([], function () { #cp-loading .cp-loading-cryptofist { } } +#cp-loading-message { + background: #FFF; + padding: 20px; + width: 100%; + color: #000; + display: none; +} #cp-loading .cp-loading-spinner-container { position: relative; height: 100px; @@ -120,7 +127,7 @@ define([], function () { '', - //'

', + '

', '
' ].join(''); var intr; diff --git a/www/file/app-file.less b/www/file/app-file.less index 444e5777b..a0141293b 100644 --- a/www/file/app-file.less +++ b/www/file/app-file.less @@ -12,11 +12,6 @@ @button-border: 2px; -/*html, body { - margin: 0px; - height: 100%; -}*/ - // body display: flex; flex-flow: column; diff --git a/www/filepicker/app-filepicker.less b/www/filepicker/app-filepicker.less index df1fec8fb..ca59ebe57 100644 --- a/www/filepicker/app-filepicker.less +++ b/www/filepicker/app-filepicker.less @@ -36,7 +36,8 @@ line-height: 1em; cursor: pointer; - background-color: #111; + background-color: @colortheme_modal-bg; + box-shadow: 2px 2px 5px #000; color: @darker; transition: all 0.1s; From ec0fc85b9f2aba74013b4d8546ffc7ba3d0e7475 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 13 Apr 2018 18:52:55 +0200 Subject: [PATCH 05/15] Sort templates by usage in the PCS --- www/common/common-ui-elements.js | 17 ++++++++++++----- www/common/cryptpad-common.js | 1 + www/common/outer/async-store.js | 9 +++++++++ www/common/outer/store-rpc.js | 3 +++ www/common/sframe-common-outer.js | 7 +++++-- 5 files changed, 30 insertions(+), 7 deletions(-) diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 9e73d814d..6a70c2b31 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -1780,11 +1780,15 @@ define([ var sframeChan = common.getSframeChannel(); var focus; - var pickerCfg = { + var pickerCfgInit = { types: [type], where: ['template'], hidden: true }; + var pickerCfg = { + types: [type], + where: ['template'], + }; var onConfirm = function (yes) { if (!yes) { if (focus) { focus.focus(); } @@ -1812,7 +1816,7 @@ define([ sframeChan.query("Q_TEMPLATE_EXIST", type, function (err, data) { if (data) { - common.openFilePicker(pickerCfg); + common.openFilePicker(pickerCfgInit); focus = document.activeElement; if (force) { return void onConfirm(true); } UI.confirm(Messages.useTemplate, onConfirm, { @@ -1968,10 +1972,13 @@ define([ if (!res.data || !Array.isArray(res.data)) { return void console.error("Error: get the templates list"); } - // TODO Sort the templates by number of use? var data = res.data.slice().sort(function (a, b) { - if (a.name === b.name) { return 0; } - return a.name < b.name ? -1 : 1; + if (a.used === b.used) { + // Sort by name + if (a.name === b.name) { return 0; } + return a.name < b.name ? -1 : 1; + } + return b.used - a.used; }).slice(0, 2); data.unshift({ name: Messages.creation_newTemplate, diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index 0a9a27f0d..d4adb1ee0 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -424,6 +424,7 @@ define([ // it allows us to add owners and expiration time if it is a new file var parsed = Hash.parsePadUrl(href); if(!parsed) { throw new Error("Cannot get template hash"); } + postMessage("INCREMENT_TEMPLATE_USE", href); Crypt.get(parsed.hash, function (err, val) { if (err) { throw new Error(err); } var p = Hash.parsePadUrl(window.location.href); diff --git a/www/common/outer/async-store.js b/www/common/outer/async-store.js index f3f1e1450..0125e6018 100644 --- a/www/common/outer/async-store.js +++ b/www/common/outer/async-store.js @@ -660,6 +660,15 @@ define([ }); cb(res); }; + Store.incrementTemplateUse = function (href) { + store.userObject.getPadAttribute(href, 'used', function (err, data) { + // This is a not critical function, abort in case of error to make sure we won't + // create any issue with the user object or the async store + if (err) { return; } + var used = typeof data === "number" ? ++data : 1; + store.userObject.setPadAttribute(href, 'used', used); + }); + }; // Pads Store.moveToTrash = function (data, cb) { diff --git a/www/common/outer/store-rpc.js b/www/common/outer/store-rpc.js index 1043f9dcf..1713d7a2a 100644 --- a/www/common/outer/store-rpc.js +++ b/www/common/outer/store-rpc.js @@ -126,6 +126,9 @@ define([ case 'GET_STRONGER_HASH': { Store.getStrongerHash(data, cb); break; } + case 'INCREMENT_TEMPLATE_USE': { + Store.incrementTemplateUse(data); break; + } // Messaging case 'INVITE_FROM_USERLIST': { Store.inviteFromUserlist(data, cb); break; diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js index fab9dfcfd..f40614c52 100644 --- a/www/common/sframe-common-outer.js +++ b/www/common/sframe-common-outer.js @@ -431,6 +431,8 @@ define([ // File picker var FP = {}; var initFilePicker = function (cfg) { + // cfg.hidden means pre-loading the filepicker while keeping it hidden. + // if cfg.hidden is true and the iframe already exists, do nothing if (!FP.$iframe) { var config = {}; config.onFilePicked = function (data) { @@ -449,7 +451,7 @@ define([ }; FP.$iframe = $('