Browse Source

New tooltips

master
yflory 2 years ago
parent
commit
9d57548f1d
12 changed files with 131 additions and 20 deletions
  1. 2
      customize.dist/src/less2/include/app-noscroll.less
  2. 1
      customize.dist/src/less2/include/creation.less
  3. 2
      customize.dist/src/less2/include/framework.less
  4. 57
      customize.dist/src/less2/include/tippy.less
  5. 37
      www/common/common-interface.js
  6. 5
      www/common/common-ui-elements.js
  7. 41
      www/common/loading.js
  8. 2
      www/common/sframe-app-framework.js
  9. 1
      www/common/tippy.css
  10. 1
      www/common/tippy.min.js
  11. 1
      www/common/tippy/tippy.css
  12. 1
      www/common/tippy/tippy.min.js

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

1
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;

2
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,

57
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);
}
}*/
}
}

37
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.

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

41
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 () {
'<style>',
loadingStyle,
'</style>',
'<div class="cp-loading-container">',
'<div class="cp-loading-logo">',
'<img class="cp-loading-cryptofist" src="/customize/alt-favicon.png?' + urlArgs + '">',
'</div>',
'<div class="cp-loading-container">',
'<div class="cp-loading-spinner-container">',
'<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>',
'</div>',

2
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 ||

1
www/common/tippy.css
File diff suppressed because it is too large
View File

1
www/common/tippy.min.js
File diff suppressed because it is too large
View File

1
www/common/tippy/tippy.css
File diff suppressed because it is too large
View File

1
www/common/tippy/tippy.min.js
File diff suppressed because it is too large
View File

Loading…
Cancel
Save