Merge branch 'pcs' into staging

pull/1/head
yflory 7 years ago
commit 9f5e5786f3

@ -1,6 +1,7 @@
node_modules/ node_modules/
www/bower_components/ www/bower_components/
www/common/pdfjs/ www/common/pdfjs/
www/common/tippy/
server.js server.js
www/common/media-tag.js www/common/media-tag.js
@ -8,7 +9,6 @@ www/scratch
www/common/toolbar.js www/common/toolbar.js
www/common/hyperscript.js www/common/hyperscript.js
www/common/tippy.min.js
www/pad/wysiwygarea-plugin.js www/pad/wysiwygarea-plugin.js
www/pad/mediatag-plugin.js www/pad/mediatag-plugin.js

@ -633,12 +633,95 @@ define([
src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs
}), }),
h('div.cp-loading-spinner-container', 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'), h('p'),
]) ])
); );
}; };
Pages.createCheckbox = function (id, labelTxt, checked, opts) {
opts = opts|| {};
// Input properties
var inputOpts = {
type: 'checkbox',
id: id
};
if (checked) { inputOpts.checked = 'checked'; }
$.extend(inputOpts, opts.input || {});
// Label properties
var labelOpts = {};
$.extend(labelOpts, opts.label || {});
if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
// Mark properties
var markOpts = { tabindex: 0 };
$.extend(markOpts, opts.mark || {});
var input = h('input', inputOpts);
var mark = h('span.cp-checkmark-mark', markOpts);
var label = h('span.cp-checkmark-label', labelTxt);
$(mark).keydown(function (e) {
if (e.which === 32) {
e.stopPropagation();
e.preventDefault();
$(input).prop('checked', !$(input).is(':checked'));
$(input).change();
}
});
$(input).change(function () { $(mark).focus(); });
return h('label.cp-checkmark', labelOpts, [
input,
mark,
label
]);
};
Pages.createRadio = function (name, id, labelTxt, checked, opts) {
opts = opts|| {};
// Input properties
var inputOpts = {
type: 'radio',
id: id,
name: name
};
if (checked) { inputOpts.checked = 'checked'; }
$.extend(inputOpts, opts.input || {});
// Label properties
var labelOpts = {};
$.extend(labelOpts, opts.label || {});
if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
// Mark properties
var markOpts = { tabindex: 0 };
$.extend(markOpts, opts.mark || {});
var input = h('input', inputOpts);
var mark = h('span.cp-radio-mark', markOpts);
var label = h('span.cp-checkmark-label', labelTxt);
$(mark).keydown(function (e) {
if (e.which === 32) {
e.stopPropagation();
e.preventDefault();
$(input).prop('checked', !$(input).is(':checked'));
$(input).change();
}
});
$(input).change(function () { $(mark).focus(); });
return h('label.cp-radio', labelOpts, [
input,
mark,
label
]);
};
var hiddenLoader = function () { var hiddenLoader = function () {
var loader = loadingScreen(); var loader = loadingScreen();
loader.style.display = 'none'; loader.style.display = 'none';
@ -688,27 +771,10 @@ define([
placeholder: Msg.login_confirm, placeholder: Msg.login_confirm,
}), }),
h('div.checkbox-container', [ h('div.checkbox-container', [
h('input#import-recent', { Pages.createCheckbox('import-recent', Msg.register_importRecent, true)
name: 'import-recent',
type: 'checkbox',
checked: true
}),
// hscript doesn't generate for on label for some
// reason... use jquery as a temporary fallback
setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
/*h('label', {
'for': 'import-recent',
}, Msg.register_importRecent),*/
]), ]),
h('div.checkbox-container', [ h('div.checkbox-container', [
h('input#accept-terms', { $(Pages.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0]
name: 'accept-terms',
type: 'checkbox'
}),
setHTML($('<label for="accept-terms"></label>')[0], Msg.register_acceptTerms)
/*setHTML(h('label', {
'for': 'accept-terms',
}), Msg.register_acceptTerms),*/
]), ]),
h('button#register.btn.cp-login-register', Msg.login_register) h('button#register.btn.cp-login-register', Msg.login_register)
]) ])
@ -750,17 +816,7 @@ define([
placeholder: Msg.login_password, placeholder: Msg.login_password,
}), }),
h('div.checkbox-container', [ h('div.checkbox-container', [
h('input#import-recent', { Pages.createCheckbox('import-recent', Msg.register_importRecent, true),
name: 'import-recent',
type: 'checkbox',
checked: true
}),
// hscript doesn't generate for on label for some
// reason... use jquery as a temporary fallback
setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
/*h('label', {
'for': 'import-recent',
}, Msg.register_importRecent),*/
]), ]),
h('div.extra', [ h('div.extra', [
h('button.login.first.btn', Msg.login_login) h('button.login.first.btn', Msg.login_login)

@ -12,14 +12,11 @@
@alertify-btn-fg: @alertify-fore; @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-bg: @colortheme_modal-dim;
@alertify-fg: @alertify-fore; @alertify-fg: @alertify-fore;
@alertify-input-bg: @colortheme_modal-input; @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_padding-base: @variables_padding;
@alertify_box-shadow: @variables_shadow; @alertify_box-shadow: @variables_shadow;
@ -34,7 +31,7 @@
} }
> * { > * {
padding: @alertify_padding-base @alertify_padding-base * 4; padding: @alertify_padding-base @alertify_padding-base * 4;
color: @alertify-fore; color: @colortheme_notification-color;
font-family: @colortheme_font; font-family: @colortheme_font;
font-size: large; font-size: large;
@ -65,6 +62,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 100000; // alertify container z-index: 100000; // alertify container
font: @colortheme_app-font;
&.forefront { &.forefront {
z-index: @max-z-index; // alertify max forefront z-index: @max-z-index; // alertify max forefront
} }
@ -112,10 +111,6 @@
} }
.dialog, .alert { .dialog, .alert {
.bright {
color: @colortheme_light-base;
}
& > div { & > div {
background-color: @alertify-dialog-bg; background-color: @alertify-dialog-bg;
&.half { &.half {
@ -227,7 +222,7 @@
button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) { 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; box-sizing: border-box;
position: relative; position: relative;
outline: 0; outline: 0;
@ -247,7 +242,7 @@
border-radius: 0; border-radius: 0;
color: @alertify-btn-fg; color: @alertify-btn-fg;
border: 1px solid transparent; border: 1px solid @colortheme_alertify-cancel-border;
&.safe, &.danger { &.safe, &.danger {
color: @colortheme_old-base; color: @colortheme_old-base;
@ -256,32 +251,40 @@
} }
&.danger { &.danger {
background-color: @colortheme_alertify-red; background-color: @colortheme_alertify-red;
border-color: @colortheme_alertify-red-border;
color: @colortheme_alertify-red-color;
&:hover, &:active { &: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 { &.safe {
background-color: @colortheme_alertify-green; background-color: @colortheme_alertify-green;
border-color: @colortheme_alertify-green-border;
color: @colortheme_alertify-green-color;
&:hover, &:active { &: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 { &.primary {
background-color: @colortheme_alertify-primary; background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text; color: @colortheme_alertify-primary-text;
border-color: @colortheme_alertify-primary-border;
font-weight: bold;
&:hover, &:active { &: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 { &: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 { &:focus {
border: 1px dotted @alertify-base; //border: 1px dotted @alertify-base;
box-shadow: 0px 0px 5px @colortheme_alertify-primary;
outline: none;
} }
&::-moz-focus-inner { &::-moz-focus-inner {
border: 0; border: 0;

@ -7,6 +7,7 @@
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
border: 0;
body { body {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -15,6 +16,7 @@
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
border: 0;
} }
} }

@ -5,7 +5,7 @@
@width: round(@size / 8); @width: round(@size / 8);
@dim1: round(@size / 3); @dim1: round(@size / 3);
@dim2: round(2 * @size / 3); @dim2: round(2 * @size / 3);
@top: round(@size / 12); @top: round(@size / 12) - 1;
// <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label> // <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
.cp-checkmark { .cp-checkmark {
margin: 0; margin: 0;
@ -17,6 +17,10 @@
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
& > a {
margin-left: 0.25em;
}
&.cp-checkmark-secondary { &.cp-checkmark-secondary {
.cp-checkmark-mark { .cp-checkmark-mark {
&:after { &:after {
@ -26,6 +30,7 @@
input { input {
&:checked ~ .cp-checkmark-mark { &:checked ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-back2; background-color: @colortheme_checkmark-back2;
border-color: @colortheme_checkmark-back2;
} }
} }
} }
@ -37,12 +42,19 @@
display: none; display: none;
&:checked ~ .cp-checkmark-mark { &:checked ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-back1; background-color: @colortheme_checkmark-back1;
border-color: @colortheme_checkmark-back1;
&:after { &:after {
display: block; display: block;
} }
} }
} }
.cp-checkmark-label {
cursor: default;
&:empty {
display: none;
}
}
.cp-checkmark-mark { .cp-checkmark-mark {
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
@ -51,6 +63,8 @@
background-color: @colortheme_checkmark-back0; background-color: @colortheme_checkmark-back0;
display: flex; display: flex;
justify-content: center; justify-content: center;
border: 1px solid @colortheme_form-border;
flex-shrink: 0;
&:after { &:after {
content: ""; content: "";
display: none; display: none;
@ -60,6 +74,90 @@
transform: rotate(45deg); transform: rotate(45deg);
border: solid @colortheme_checkmark-col1; border: solid @colortheme_checkmark-col1;
border-width: 0 @width @width 0; border-width: 0 @width @width 0;
position: absolute;
}
&:focus {
//border-color: #FF007C !important;
box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
outline: none;
}
}
}
.cp-radio {
margin: 0;
display: flex;
align-items: center;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&.cp-radio-secondary {
.cp-radio-mark {
&:after {
border-color: @colortheme_checkmark-col2;
}
}
input {
&:checked ~ .cp-radio-mark {
background-color: @colortheme_checkmark-back2;
}
}
}
&:hover .cp-radio-mark {
background-color: @colortheme_checkmark-back0-active;
}
input {
display: none;
&:checked ~ .cp-radio-mark {
background-color: @colortheme_checkmark-back1;
border-color: @colortheme_checkmark-back1;
&:after {
display: block;
}
}
}
.cp-checkmark-label {
cursor: default;
&:empty {
display: none;
}
}
@radio-size: @dim1 * 3;
.cp-radio-mark {
margin-right: 10px;
position: relative;
height: @radio-size;
width: @radio-size;
background-color: @colortheme_checkmark-back0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid @colortheme_form-border;
flex-shrink: 0;
&:after {
display: none;
content: "";
border-radius: 50%;
background: white;
width: @dim1;
height: @dim1;
//transform: rotate(45deg);
//border: solid @colortheme_checkmark-col1;
//border-width: 0 @width @width 0;
}
&:focus {
//border-color: #FF007C !important;
box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
outline: none;
} }
} }

@ -2,6 +2,9 @@
@colortheme_app-font-size: 16px; @colortheme_app-font-size: 16px;
@colortheme_app-font: @colortheme_app-font-size @colortheme_font; @colortheme_app-font: @colortheme_app-font-size @colortheme_font;
@colortheme_logo-1: #326599;
@colortheme_logo-2: #4591c4;
@colortheme_link-color: #0275D8; @colortheme_link-color: #0275D8;
@colortheme_link-color-visited: #005999; @colortheme_link-color-visited: #005999;
@colortheme_info-background: #fafafa; @colortheme_info-background: #fafafa;
@ -15,23 +18,42 @@
@colortheme_cp-red: #FA5858; // remove red @colortheme_cp-red: #FA5858; // remove red
@colortheme_cp-green: #46E981; @colortheme_cp-green: #46E981;
@colortheme_modal-bg: #222; @colortheme_form-border: #bbbbbb;
@colortheme_modal-fg: #fff; @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: @colortheme_form-bg-alt; // TODO Modals bg
@colortheme_modal-fg: @colortheme_form-color-alt;
@colortheme_modal-link: #eee; @colortheme_modal-link: #eee;
@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%); @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: #222; @colortheme_loading-bg: @colortheme_logo-1;
@colortheme_loading-bg-alt: @colortheme_logo-2;
@colortheme_loading-color: @colortheme_old-fore; @colortheme_loading-color: @colortheme_old-fore;
@colortheme_modal-input: #111;
// TODO modals buttons
@colortheme_alertify-red: #E55236; @colortheme_alertify-red: #E55236;
@colortheme_alertify-red-color: #FFF;
@colortheme_alertify-red-border: transparent;
@colortheme_alertify-green: #77C825; @colortheme_alertify-green: #77C825;
@colortheme_alertify-primary: #fff; @colortheme_alertify-green-color: #FFF;
@colortheme_alertify-primary-text: #000; @colortheme_alertify-green-border: transparent;
@colortheme_alertify-primary: @colortheme_form-bg;
@colortheme_notification-log: rgba(0, 0, 0, 0.8); @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: fade(@colortheme_logo-1, 90%);
@colortheme_notification-color: #fff;;
@colortheme_notification-warn: rgba(205, 37, 50, 0.8); @colortheme_notification-warn: rgba(205, 37, 50, 0.8);
@colortheme_dropdown-bg: #f9f9f9; @colortheme_dropdown-bg: #f9f9f9;
@ -110,9 +132,9 @@
@cryptpad_header_col: #1E1F1F; @cryptpad_header_col: #1E1F1F;
@cryptpad_text_col: #3F4141; @cryptpad_text_col: #3F4141;
@colortheme_checkmark-back0: #ffffff; @colortheme_checkmark-back0: @colortheme_form-bg-alt;
@colortheme_checkmark-back0-active: #bbbbbb; @colortheme_checkmark-back0-active: @colortheme_form-border;
@colortheme_checkmark-back1: #FF0073; @colortheme_checkmark-back1: @colortheme_form-bg;
@colortheme_checkmark-col1: #ffffff; @colortheme_checkmark-col1: @colortheme_form-color;
@colortheme_checkmark-back2: #FFFFFF; @colortheme_checkmark-back2: @colortheme_form-bg-alt;
@colortheme_checkmark-col2: #000000; @colortheme_checkmark-col2: @colortheme_form-color-alt;

@ -1,47 +1,78 @@
@import (once) "./colortheme-all.less"; @import (once) "./colortheme-all.less";
@import (once) "./tools.less"; @import (once) "./tools.less";
@import (once) "./checkmark.less";
@import (once) './icon-colors.less'; @import (once) './icon-colors.less';
.creation_main() { .creation_main(
.tippy-popper { @color: @colortheme_default-color, // Color of the text for the toolbar
z-index: 100000001 !important; @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;
#cp-creation-container { #cp-creation-container {
position: absolute; position: absolute;
z-index: 100000000; // #loading * 10 z-index: 100000000; // #loading * 10
top: 0px; 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; color: @colortheme_loading-color;
display: flex; display: flex;
flex-flow: column; /* we need column so that the child can shrink vertically */ flex-flow: column; /* we need column so that the child can shrink vertically */
justify-content: center; justify-content: center;
align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; 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 { #cp-creation {
flex: 0 1 auto; /* allows shrink */
min-height: 0;
overflow: auto; overflow: auto;
text-align: center; text-align: center;
background: @colortheme_creation-modal-bg;
color: @colortheme_creation-modal;
font: @colortheme_app-font; font: @colortheme_app-font;
width: 100%;
outline: none; 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 { & > div {
width: 60vw; width: 100%;
max-width: 100%; max-width: 100%;
margin: 40px auto; margin: auto;
text-align: left; 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; margin-top: 0px;
@creation-button: #30B239;
button { button {
.tools_unselectable(); .tools_unselectable();
padding: 15px; padding: 15px;
background: @creation-button; background: linear-gradient(to right, @colortheme_logo-2, @colortheme_logo-1);
color: #FFF; color: #FFF;
font-weight: bold; font-weight: bold;
margin: 3px 10px; margin: 3px 10px;
@ -50,8 +81,9 @@
outline: none; outline: none;
width: 100%; width: 100%;
&:hover { &:hover {
background: linear-gradient(to right, lighten(@colortheme_logo-2, 5%), lighten(@colortheme_logo-1, 5%));
//background: darken(@creation-button, 5%); //background: darken(@creation-button, 5%);
background: lighten(@creation-button, 5%); //background: lighten(@creation-button, 5%);
} }
} }
} }
@ -70,6 +102,7 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
flex: 1 0 auto;
& > div { & > div {
width: 400px; width: 400px;
max-width: 100%; max-width: 100%;
@ -78,6 +111,8 @@
flex-wrap: wrap; flex-wrap: wrap;
font-size: 16px; font-size: 16px;
margin: 10px 0; margin: 10px 0;
min-height: 28px;
line-height: 28px;
label { label {
flex: 1; flex: 1;
} }
@ -88,31 +123,51 @@
padding: 0 10px; padding: 0 10px;
} }
} }
.cp-creation-help { }
font-size: 18px; .cp-creation-help, .cp-creation-warning {
color: white; font-size: 18px;
&:hover { color: @colortheme_form-warning;
color: #AAA; &:hover {
text-decoration: none; color: @colortheme_form-warning-hov;
} text-decoration: none;
} }
} }
.cp-creation-slider { .cp-creation-slider {
display: block; display: block;
overflow: hidden; overflow: hidden;
max-height: 0px; max-height: 0px;
transition: max-height 0.5s ease-in-out; max-width: 0px;
width: 100%; //margin-top: 10px;
margin-top: 10px;
&.active { &.active {
max-height: 40px; transition: max-height 0.5s ease-in-out;
max-width: unset;
max-height: 100px;
} }
} }
.cp-creation-expire { .cp-creation-expire {
.cp-creation-expire-picker { .cp-creation-expire-picker {
text-align: center; text-align: center;
input, select {
font-size: 14px;
border: 1px solid @colortheme_form-border;
height: 26px;
background-color: @colortheme_form-bg;
color: @colortheme_form-color;
}
input { input {
width: 100px; width: 50px;
margin: 0 5px;
}
select {
margin-right: 5px;
}
}
&.active {
label {
flex: unset;
}
.cp-creation-slider {
flex: 1;
} }
} }
} }
@ -125,31 +180,51 @@
} }
div.cp-creation-remember { div.cp-creation-remember {
margin-top: 30px;
.cp-creation-remember-help { .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 { div.cp-creation-template {
width: 100%; width: 100%;
background-color: darken(@colortheme_modal-bg, 3%); flex: 1 0 auto;
padding: 20px; flex-wrap: nowrap;
margin: 30px 0; .cp-creation-template-more {
.cp-creation-title { font-size: 30px;
padding: 0 0 10px 10px; cursor: pointer;
margin: auto; margin: 0 5px;
text-align: center;
&:first-child {
left: 5px;
}
&:last-child {
right: 5px;
}
&:hover {
color: #888;
}
&.hidden {
visibility: hidden;
}
} }
} }
.cp-creation-template-container { .cp-creation-template-container {
width: 100%; width: 100%;
flex: 1;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
overflow-y: auto; //overflow-y: auto;
align-items: center; align-items: center;
.cp-creation-template-element { .cp-creation-template-element {
@darker: darken(@colortheme_modal-fg, 30%); box-shadow: 2px 2px 7px @colortheme_form-border;
width: 135px; width: 135px;
padding: 5px; padding: 5px;
margin: 5px; margin: 5px;
@ -162,19 +237,23 @@
line-height: 1em; line-height: 1em;
cursor: pointer; cursor: pointer;
background-color: #111; color: black;
color: @darker;
border: 1px solid transparent; border: 1px solid transparent;
&.cp-creation-template-selected { &.cp-creation-template-selected {
border: 1px solid white; color: @color !important;
background-color: #222; background-color: @bg-color !important;
.fa {
color: @color;
}
} }
transition: all 0.1s; transition: all 0.1s;
&:hover { &:hover {
color: @colortheme_modal-fg; //color: @colortheme_modal-fg;
background-color: @colortheme_form-border;
box-shadow: none;
} }
align-items: center; align-items: center;
@ -196,6 +275,7 @@
max-width: 100%; max-width: 100%;
} }
.fa { .fa {
color: @bg-color;
cursor: pointer; cursor: pointer;
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -217,45 +297,69 @@
display: inline-block; display: inline-block;
} }
} }
}
.checkmark_main(30px); @media screen and (max-height: 700px) {
#cp-creation-container {
@media screen and (max-width: @browser_media-narrow-screen) { .cp-creation-logo {
& > div { //flex-shrink: 0;
width: 95%; display: none;
margin: 10px auto; }
} }
} }
@media screen and (max-width: @browser_media-medium-screen) { @media screen and (max-width: 500px) {
#cp-creation-form { #cp-creation {
div.cp-creation-template { #cp-creation-form {
margin: 0; & > div {
padding: 5px; width: 95%;
.cp-creation-template-container { margin: 10px auto;
.cp-creation-template-element { }
flex-flow: row; .cp-creation-expire {
margin: 1px; &.active {
padding: 5px; label {
width: 155px; flex: 1;
img {
display: none;
} }
.fa { .cp-creation-slider {
font-size: 18px; flex: unset;
width: 20px; order: 10;
height: 20px; width: 100%;
line-height: 20px;
display: inline !important;
} }
.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;
}
} }
} }
} }
} }
} }
} }
}
} }

@ -1,8 +1,11 @@
@import (once) "./colortheme-all.less";
@import (once) "./toolbar.less"; @import (once) "./toolbar.less";
@import (once) './fileupload.less'; @import (once) './fileupload.less';
@import (once) './alertify.less'; @import (once) './alertify.less';
@import (once) './tokenfield.less'; @import (once) './tokenfield.less';
@import (once) './creation.less'; @import (once) './creation.less';
@import (once) './tippy.less';
@import (once) "./checkmark.less";
.framework_main(@bg-color, @warn-color, @color) { .framework_main(@bg-color, @warn-color, @color) {
.toolbar_main( .toolbar_main(
@ -13,6 +16,29 @@
.fileupload_main(); .fileupload_main();
.alertify_main(); .alertify_main();
.tokenfield_main(); .tokenfield_main();
.creation_main(); .tippy_main();
.checkmark_main(20px);
.creation_main(
@bg-color: @bg-color,
@warn-color: @warn-color,
@color: @color
);
}
.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();
.checkmark_main(20px);
} }

@ -10,7 +10,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border: 1px solid white;
.cp-icons-name { .cp-icons-name {
width: 100%; width: 100%;
@ -26,7 +25,7 @@
word-wrap: break-word; word-wrap: break-word;
} }
&.cp-icons-element-selected { &.cp-icons-element-selected {
background-color: white; background-color: rgba(0,0,0,0.2);
color: #666; color: #666;
} }
.fa { .fa {

@ -57,7 +57,7 @@
input { input {
background-color: @colortheme_modal-input; background-color: @colortheme_modal-input;
color: @colortheme_modal-fg; color: @colortheme_modal-input-fg;
border: 0; border: 0;
padding: 8px 12px; padding: 8px 12px;
margin: 1em; margin: 1em;

@ -52,6 +52,12 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }
label.noTitle {
display: inline-flex;
.fa {
margin-left: 10px;
}
}
margin-bottom: 20px; margin-bottom: 20px;
} }
[type="text"], button { [type="text"], button {

@ -0,0 +1,14 @@
@import (once) './colortheme-all.less';
.tippy_main() {
.tippy-tooltip.cryptpad-theme {
/* Your styling here. Example: */
background-color: white;
box-shadow: 2px 2px 10px #000;
font-weight: bold;
color: #333;
[x-circle] {
background-color: unset;
}
}
}

@ -183,8 +183,13 @@
#cp-app-toolbar-creation-dialog.cp-modal-container { #cp-app-toolbar-creation-dialog.cp-modal-container {
.icons_main(); .icons_main();
li:hover { li {
border: 1px solid white; border: 1px solid @colortheme_modal-fg;
&:hover {
//border: 1px solid @colortheme_modal-fg;
background: @colortheme_modal-fg;
color: @colortheme_modal-bg;
}
} }
.cp-modal { .cp-modal {
display: flex; display: flex;

@ -1,11 +1,13 @@
@import (once) "../include/infopages.less"; @import (once) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (once) "../include/colortheme-all.less";
@import (once) "../include/alertify.less"; @import (once) "../include/alertify.less";
@import (once) "../include/checkmark.less";
@import (once) "../loading.less"; @import (once) "../loading.less";
.infopages_main(); .infopages_main();
.infopages_topbar(); .infopages_topbar();
.alertify_main(); .alertify_main();
.checkmark_main(20px);
.form-group { .form-group {
.extra { .extra {

@ -1,11 +1,13 @@
@import (once) "../include/infopages.less"; @import (once) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (once) "../include/colortheme-all.less";
@import (once) "../include/alertify.less"; @import (once) "../include/alertify.less";
@import (once) "../include/checkmark.less";
@import (once) "../loading.less"; @import (once) "../loading.less";
.infopages_main(); .infopages_main();
.infopages_topbar(); .infopages_topbar();
.alertify_main(); .alertify_main();
.checkmark_main(20px);
.cp-container { .cp-container {
.form-group { .form-group {

@ -6,13 +6,13 @@ define([
'/common/common-notifier.js', '/common/common-notifier.js',
'/customize/application_config.js', '/customize/application_config.js',
'/bower_components/alertifyjs/dist/js/alertify.js', '/bower_components/alertifyjs/dist/js/alertify.js',
'/common/tippy.min.js', '/common/tippy/tippy.min.js',
'/customize/pages.js', '/customize/pages.js',
'/common/hyperscript.js', '/common/hyperscript.js',
'/common/test.js', '/common/test.js',
'/bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js', '/bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js',
'css!/common/tippy.css', 'css!/common/tippy/tippy.css',
], function ($, Messages, Util, Hash, Notifier, AppConfig, ], function ($, Messages, Util, Hash, Notifier, AppConfig,
Alertify, Tippy, Pages, h, Test) { Alertify, Tippy, Pages, h, Test) {
var UI = {}; var UI = {};
@ -539,16 +539,16 @@ define([
var LOADING = 'cp-loading'; var LOADING = 'cp-loading';
var getRandomTip = function () { /*var getRandomTip = function () {
if (!Messages.tips || !Object.keys(Messages.tips).length) { return ''; } if (!Messages.tips || !Object.keys(Messages.tips).length) { return ''; }
var keys = Object.keys(Messages.tips); var keys = Object.keys(Messages.tips);
var rdm = Math.floor(Math.random() * keys.length); var rdm = Math.floor(Math.random() * keys.length);
return Messages.tips[keys[rdm]]; return Messages.tips[keys[rdm]];
}; };*/
UI.addLoadingScreen = function (config) { UI.addLoadingScreen = function (config) {
config = config || {}; config = config || {};
var loadingText = config.loadingText; var loadingText = config.loadingText;
var hideTips = config.hideTips || AppConfig.hideLoadingScreenTips; //var hideTips = config.hideTips || AppConfig.hideLoadingScreenTips;
var hideLogo = config.hideLogo; var hideLogo = config.hideLogo;
var $loading, $container; var $loading, $container;
if ($('#' + LOADING).length) { if ($('#' + LOADING).length) {
@ -557,9 +557,9 @@ define([
$loading.removeClass('cp-loading-hidden'); $loading.removeClass('cp-loading-hidden');
$('.cp-loading-spinner-container').show(); $('.cp-loading-spinner-container').show();
if (loadingText) { if (loadingText) {
$('#' + LOADING).find('p').text(loadingText); $('#' + LOADING).find('p').show().text(loadingText);
} else { } else {
$('#' + LOADING).find('p').text(''); $('#' + LOADING).find('p').hide().text('');
} }
$container = $loading.find('.cp-loading-container'); $container = $loading.find('.cp-loading-container');
} else { } else {
@ -574,14 +574,14 @@ define([
$spinner.show(); $spinner.show();
$('body').append($loading); $('body').append($loading);
} }
if (Messages.tips && !hideTips) { /*if (Messages.tips && !hideTips) {
var $loadingTip = $('<div>', {'id': 'cp-loading-tip'}); var $loadingTip = $('<div>', {'id': 'cp-loading-tip'});
$('<span>', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip); $('<span>', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip);
$loadingTip.css({ $loadingTip.css({
'bottom': $('body').height()/2 - $container.height()/2 + 20 + 'px' 'bottom': $('body').height()/2 - $container.height()/2 + 20 + 'px'
}); });
$('body').append($loadingTip); $('body').append($loadingTip);
} }*/
}; };
UI.removeLoadingScreen = function (cb) { UI.removeLoadingScreen = function (cb) {
// Release the test blocker, hopefully every test has been registered. // Release the test blocker, hopefully every test has been registered.
@ -610,8 +610,8 @@ define([
} }
$('.cp-loading-spinner-container').hide(); $('.cp-loading-spinner-container').hide();
$('#cp-loading-tip').remove(); $('#cp-loading-tip').remove();
if (transparent) { $('#' + LOADING).css('opacity', 0.8); } if (transparent) { $('#' + LOADING).css('opacity', 0.9); }
$('#' + LOADING).find('p').html(error || Messages.error); $('#' + LOADING).find('p').show().html(error || Messages.error);
if (exitable) { if (exitable) {
$(window).focus(); $(window).focus();
$(window).keydown(function (e) { $(window).keydown(function (e) {
@ -660,18 +660,38 @@ 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: true,
popperOptions: {
modifiers: {
preventOverflow: { boundariesElement: 'window' }
}
},
//arrowType: 'round',
arrowTransform: 'scale(2)',
zIndex: 100000001
});
UI.addTooltips = function () { UI.addTooltips = function () {
var MutationObserver = window.MutationObserver; var MutationObserver = window.MutationObserver;
var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500;
var addTippy = function (i, el) { var addTippy = function (i, el) {
if (el.nodeName === 'IFRAME') { return; } if (el.nodeName === 'IFRAME') { return; }
Tippy(el, { var opts = {
position: 'bottom', distance: 15
distance: 0, };
performance: true, Array.prototype.slice.apply(el.attributes).filter(function (obj) {
delay: [delay, 0], return /^data-tippy-/.test(obj.name);
sticky: true }).forEach(function (obj) {
opts[obj.name.slice(11)] = obj.value;
}); });
Tippy(el, opts);
}; };
// This is the robust solution to remove dangling tooltips // This is the robust solution to remove dangling tooltips
// The mutation observer does not always find removed nodes. // The mutation observer does not always find removed nodes.
@ -720,5 +740,9 @@ define([
}); });
}; };
UI.createCheckbox = Pages.createCheckbox;
UI.createRadio = Pages.createRadio;
return UI; return UI;
}); });

@ -13,8 +13,6 @@ define([
'/customize/messages.js', '/customize/messages.js',
'/customize/application_config.js', '/customize/application_config.js',
'/bower_components/nthen/index.js', '/bower_components/nthen/index.js',
'css!/common/tippy.css',
], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Clipboard, ], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Clipboard,
Messages, AppConfig, NThen) { Messages, AppConfig, NThen) {
var UIElements = {}; var UIElements = {};
@ -237,7 +235,11 @@ define([
var link = h('div.cp-share-modal', [ var link = h('div.cp-share-modal', [
h('label', Messages.share_linkAccess), h('label', Messages.share_linkAccess),
h('br'), h('br'),
h('input#cp-share-editable-true.cp-share-editable-value', { UI.createRadio('cp-share-editable', 'cp-share-editable-true',
Messages.share_linkEdit, true, { mark: {tabindex:1} }),
UI.createRadio('cp-share-editable', 'cp-share-editable-false',
Messages.share_linkView, false, { mark: {tabindex:1} }),
/*h('input#cp-share-editable-true.cp-share-editable-value', {
type: 'radio', type: 'radio',
name: 'cp-share-editable', name: 'cp-share-editable',
value: 1, value: 1,
@ -248,25 +250,14 @@ define([
name: 'cp-share-editable', name: 'cp-share-editable',
value: 0 value: 0
}), }),
h('label', { 'for': 'cp-share-editable-false' }, Messages.share_linkView), h('label', { 'for': 'cp-share-editable-false' }, Messages.share_linkView),*/
h('br'),
h('br'), h('br'),
h('label', Messages.share_linkOptions), h('label', Messages.share_linkOptions),
h('br'), h('br'),
h('input#cp-share-embed', { UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }),
type: 'checkbox', UI.createCheckbox('cp-share-present', Messages.share_linkPresent, false, { mark: {tabindex:1} }),
name: 'cp-share-embed'
}),
h('label', { 'for': 'cp-share-embed' }, Messages.share_linkEmbed),
h('br'), h('br'),
h('input#cp-share-present', { UI.dialog.selectable('', { id: 'cp-share-link-preview', tabindex: 1 })
type: 'checkbox',
name: 'cp-share-present'
}),
h('label', { 'for': 'cp-share-present' }, Messages.share_linkPresent),
h('br'),
h('br'),
UI.dialog.selectable('', { id: 'cp-share-link-preview' })
]); ]);
if (!hashes.editHash) { if (!hashes.editHash) {
$(link).find('#cp-share-editable-false').attr('checked', true); $(link).find('#cp-share-editable-false').attr('checked', true);
@ -1685,14 +1676,10 @@ define([
var priv = common.getMetadataMgr().getPrivateData(); var priv = common.getMetadataMgr().getPrivateData();
var c = (priv.settings.general && priv.settings.general.creation) || {}; var c = (priv.settings.general && priv.settings.general.creation) || {};
if (AppConfig.displayCreationScreen && common.isLoggedIn() && c.skip) { if (AppConfig.displayCreationScreen && common.isLoggedIn() && c.skip) {
$advanced = $('<input>', { var $cboxLabel = $(UI.createCheckbox('cp-app-toolbar-creation-advanced',
type: 'checkbox', Messages.creation_newPadModalAdvanced, true))
checked: 'checked', .appendTo($advancedContainer);
id: 'cp-app-toolbar-creation-advanced' $advanced = $cboxLabel.find('input');
}).appendTo($advancedContainer);
$('<label>', {
for: 'cp-app-toolbar-creation-advanced'
}).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer);
$description.append('<br>'); $description.append('<br>');
$description.append(Messages.creation_newPadModalDescriptionAdvanced); $description.append(Messages.creation_newPadModalDescriptionAdvanced);
} }
@ -1782,11 +1769,15 @@ define([
var sframeChan = common.getSframeChannel(); var sframeChan = common.getSframeChannel();
var focus; var focus;
var pickerCfg = { var pickerCfgInit = {
types: [type], types: [type],
where: ['template'], where: ['template'],
hidden: true hidden: true
}; };
var pickerCfg = {
types: [type],
where: ['template'],
};
var onConfirm = function (yes) { var onConfirm = function (yes) {
if (!yes) { if (!yes) {
if (focus) { focus.focus(); } if (focus) { focus.focus(); }
@ -1814,7 +1805,7 @@ define([
sframeChan.query("Q_TEMPLATE_EXIST", type, function (err, data) { sframeChan.query("Q_TEMPLATE_EXIST", type, function (err, data) {
if (data) { if (data) {
common.openFilePicker(pickerCfg); common.openFilePicker(pickerCfgInit);
focus = document.activeElement; focus = document.activeElement;
if (force) { return void onConfirm(true); } if (force) { return void onConfirm(true); }
UI.confirm(Messages.useTemplate, onConfirm, { UI.confirm(Messages.useTemplate, onConfirm, {
@ -1858,11 +1849,15 @@ define([
var $body = $('body'); var $body = $('body');
var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body); var $creationContainer = $('<div>', { 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 = $('<div>', { id: 'cp-creation', tabindex: 1 }).appendTo($creationContainer); var $creation = $('<div>', { id: 'cp-creation', tabindex: 1 }).appendTo($creationContainer);
// Title // Title
var colorClass = 'cp-icon-color-'+type; //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)); //$creation.append(h('h2.cp-creation-title.'+colorClass, Messages.newButtonTitle));
// Deleted pad warning // Deleted pad warning
@ -1874,10 +1869,11 @@ define([
var origin = common.getMetadataMgr().getPrivateData().origin; var origin = common.getMetadataMgr().getPrivateData().origin;
var createHelper = function (href, text) { 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, title: text,
href: origin + href, href: origin + href,
target: "_blank" target: "_blank",
'data-tippy-placement': "right"
}); });
return q; return q;
}; };
@ -1885,30 +1881,14 @@ define([
// Owned pads // Owned pads
// Default is Owned pad // Default is Owned pad
var owned = h('div.cp-creation-owned', [ var owned = h('div.cp-creation-owned', [
h('label.cp-checkmark', [ UI.createCheckbox('cp-creation-owned', Messages.creation_owned, true),
h('input', {
type: 'checkbox',
id: 'cp-creation-owned',
checked: 'checked'
}),
h('span.cp-checkmark-mark'),
Messages.creation_owned
]),
createHelper('/faq.html#keywords-owned', Messages.creation_owned1) createHelper('/faq.html#keywords-owned', Messages.creation_owned1)
]); ]);
// Life time // Life time
var expire = h('div.cp-creation-expire', [ var expire = h('div.cp-creation-expire', [
h('label.cp-checkmark', [ UI.createCheckbox('cp-creation-expire', Messages.creation_expire, false),
h('input', { h('span.cp-creation-expire-picker.cp-creation-slider', [
type: 'checkbox',
id: 'cp-creation-expire'
}),
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('input#cp-creation-expire-val', { h('input#cp-creation-expire-val', {
type: "number", type: "number",
min: 1, min: 1,
@ -1923,106 +1903,142 @@ define([
selected: 'selected' selected: 'selected'
}, Messages.creation_expireMonths) }, Messages.creation_expireMonths)
]) ])
]) ]),
createHelper('/faq.html#keywords-expiring', Messages.creation_expire2),
]); ]);
var createDiv = h('div.cp-creation-create'); var right = h('span.fa.fa-chevron-right.cp-creation-template-more');
var $create = $(createDiv); var left = h('span.fa.fa-chevron-left.cp-creation-template-more');
var templates = h('div.cp-creation-template', [ var templates = h('div.cp-creation-template', [
h('h3.cp-creation-title.'+colorClass, Messages['button_new'+type]), left,
h('div.cp-creation-template-container', [ h('div.cp-creation-template-container', [
h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw') h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')
]), ]),
createDiv right
]); ]);
var settings = h('div.cp-creation-remember', [ var settings = h('div.cp-creation-remember', [
h('label.cp-checkmark', [ UI.createCheckbox('cp-creation-remember', Messages.creation_saveSettings, false),
h('input', {
type: 'checkbox',
id: 'cp-creation-remember'
}),
h('span.cp-checkmark-mark'),
Messages.creation_saveSettings
]),
createHelper('/settings/#creation', Messages.creation_settings), 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', [ $(h('div#cp-creation-form', [
owned, owned,
expire, expire,
settings, settings,
templates templates,
createDiv
])).appendTo($creation); ])).appendTo($creation);
// Display templates // Display templates
var selected = 0;
var selected = 0; // Selected template in the list (highlighted)
var TEMPLATES_DISPLAYED = 4; // Max templates displayed per page
var next = function () {}; // Function called when pressing tab to highlight the next template
var i = 0; // Index of the first template displayed in the current page
sframeChan.query("Q_CREATE_TEMPLATES", type, function (err, res) { sframeChan.query("Q_CREATE_TEMPLATES", type, function (err, res) {
if (!res.data || !Array.isArray(res.data)) { if (!res.data || !Array.isArray(res.data)) {
return void console.error("Error: get the templates list"); return void console.error("Error: get the templates list");
} }
var data = res.data.slice().sort(function (a, b) { var allData = res.data.slice().sort(function (a, b) {
if (a.name === b.name) { return 0; } if (a.used === b.used) {
return a.name < b.name ? -1 : 1; // Sort by name
}); if (a.name === b.name) { return 0; }
data.unshift({ return a.name < b.name ? -1 : 1;
name: Messages.creation_noTemplate, }
id: 0, return b.used - a.used;
icon: h('span.fa.fa-file')
}); });
data.push({ allData.unshift({
name: Messages.creation_newTemplate, name: Messages.creation_newTemplate,
id: -1, id: -1,
icon: h('span.fa.fa-bookmark') icon: h('span.fa.fa-bookmark')
}); });
var $container = $(templates).find('.cp-creation-template-container').html(''); allData.unshift({
data.forEach(function (obj, idx) { name: Messages.creation_noTemplate,
var name = obj.name; id: 0,
var $span = $('<span>', { icon: h('span.fa.fa-file')
'class': 'cp-creation-template-element', });
'title': name, var redraw = function (index) {
}).appendTo($container); if (index < 0) { i = 0; }
$span.data('id', obj.id); else if (index > allData.length - 1) { return; }
if (idx === 0) { $span.addClass('cp-creation-template-selected'); } else { i = index; }
$span.append(obj.icon || UI.getFileIcon({type: type})); var data = allData.slice(i, i + TEMPLATES_DISPLAYED);
$('<span>', {'class': 'cp-creation-template-element-name'}).text(name) var $container = $(templates).find('.cp-creation-template-container').html('');
.appendTo($span); data.forEach(function (obj, idx) {
$span.click(function () { var name = obj.name;
$container.find('.cp-creation-template-selected') var $span = $('<span>', {
.removeClass('cp-creation-template-selected'); 'class': 'cp-creation-template-element',
$span.addClass('cp-creation-template-selected'); 'title': name,
selected = idx; }).appendTo($container);
}); $span.data('id', obj.id);
if (idx === selected) { $span.addClass('cp-creation-template-selected'); }
$span.append(obj.icon || UI.getFileIcon({type: type}));
$('<span>', {'class': 'cp-creation-template-element-name'}).text(name)
.appendTo($span);
$span.click(function () {
$container.find('.cp-creation-template-selected')
.removeClass('cp-creation-template-selected');
$span.addClass('cp-creation-template-selected');
selected = idx;
});
// Add thumbnail if it exists // Add thumbnail if it exists
if (obj.thumbnail) { if (obj.thumbnail) {
common.addThumbnail(obj.thumbnail, $span, function () {}); common.addThumbnail(obj.thumbnail, $span, function () {});
}
});
$(right).off('click').removeClass('hidden').click(function () {
selected = 0;
redraw(i + TEMPLATES_DISPLAYED);
});
if (i >= allData.length - TEMPLATES_DISPLAYED ) { $(right).addClass('hidden'); }
$(left).off('click').removeClass('hidden').click(function () {
selected = TEMPLATES_DISPLAYED - 1;
redraw(i - TEMPLATES_DISPLAYED);
});
if (i < TEMPLATES_DISPLAYED) { $(left).addClass('hidden'); }
};
redraw(0);
// Change template selection when Tab is pressed
next = function (revert) {
var max = $creation.find('.cp-creation-template-element').length;
if (selected + 1 === max && !revert) {
selected = i + TEMPLATES_DISPLAYED < allData.length ? 0 : max;
return void redraw(i + TEMPLATES_DISPLAYED);
} }
}); if (selected === 0 && revert) {
}); selected = i - TEMPLATES_DISPLAYED >= 0 ? TEMPLATES_DISPLAYED - 1 : 0;
// Change template selection when Tab is pressed return void redraw(i - TEMPLATES_DISPLAYED);
var next = function (revert) { }
var max = $creation.find('.cp-creation-template-element').length; selected = revert ?
selected = revert ? (--selected < 0 ? 0 : selected) :
(--selected < 0 ? max-1 : selected) : ++selected >= max ? max-1 : selected;
++selected % max; $creation.find('.cp-creation-template-element')
$creation.find('.cp-creation-template-element') .removeClass('cp-creation-template-selected');
.removeClass('cp-creation-template-selected'); $($creation.find('.cp-creation-template-element').get(selected))
$($creation.find('.cp-creation-template-element').get(selected)) .addClass('cp-creation-template-selected');
.addClass('cp-creation-template-selected'); };
};
});
// Display expiration form when checkbox checked // Display expiration form when checkbox checked
$creation.find('#cp-creation-expire').on('change', function () { $creation.find('#cp-creation-expire').on('change', function () {
if ($(this).is(':checked')) { if ($(this).is(':checked')) {
$creation.find('.cp-creation-expire-picker:not(.active)').addClass('active'); $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(); $creation.find('#cp-creation-expire-val').focus();
return; return;
} }
$creation.find('.cp-creation-expire-picker').removeClass('active'); $creation.find('.cp-creation-expire-picker').removeClass('active');
$creation.find('.cp-creation-expire').removeClass('active');
$creation.focus(); $creation.focus();
}); });

@ -424,6 +424,7 @@ define([
// it allows us to add owners and expiration time if it is a new file // it allows us to add owners and expiration time if it is a new file
var parsed = Hash.parsePadUrl(href); var parsed = Hash.parsePadUrl(href);
if(!parsed) { throw new Error("Cannot get template hash"); } if(!parsed) { throw new Error("Cannot get template hash"); }
postMessage("INCREMENT_TEMPLATE_USE", href);
Crypt.get(parsed.hash, function (err, val) { Crypt.get(parsed.hash, function (err, val) {
if (err) { throw new Error(err); } if (err) { throw new Error(err); }
var p = Hash.parsePadUrl(window.location.href); var p = Hash.parsePadUrl(window.location.href);

@ -1,3 +1,5 @@
// dark #326599
// light #4591c4
define([], function () { define([], function () {
var loadingStyle = (function(){/* var loadingStyle = (function(){/*
#cp-loading { #cp-loading {
@ -9,31 +11,74 @@ define([], function () {
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
background: #222; background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%);
color: #fafafa; color: #fafafa;
text-align: center;
font-size: 1.5em; font-size: 1.5em;
opacity: 1; opacity: 1;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
} }
#cp-loading.cp-loading-hidden { #cp-loading.cp-loading-hidden {
opacity: 0; opacity: 0;
visibility: hidden; 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 { #cp-loading .cp-loading-container {
margin-top: 50vh; width: 700px;
transform: translateY(-50%); 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 { #cp-loading .cp-loading-cryptofist {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
height: 300px; //height: 300px;
max-width: 90vw;
max-height: 300px;
width: auto;
height: auto;
margin-bottom: 2em; margin-bottom: 2em;
} }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#cp-loading .cp-loading-cryptofist { #cp-loading .cp-loading-cryptofist {
display: none;
} }
} }
#cp-loading-message {
background: #FFF;
padding: 20px;
width: 100%;
color: #000;
display: none;
}
#cp-loading .cp-loading-spinner-container { #cp-loading .cp-loading-spinner-container {
position: relative; position: relative;
height: 100px; height: 100px;
@ -75,8 +120,10 @@ define([], function () {
'<style>', '<style>',
loadingStyle, loadingStyle,
'</style>', '</style>',
'<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-container">',
'<img class="cp-loading-cryptofist" src="/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs + '">',
'<div class="cp-loading-spinner-container">', '<div class="cp-loading-spinner-container">',
'<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>', '<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>',
'</div>', '</div>',

@ -660,6 +660,15 @@ define([
}); });
cb(res); 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 // Pads
Store.moveToTrash = function (data, cb) { Store.moveToTrash = function (data, cb) {

@ -126,6 +126,9 @@ define([
case 'GET_STRONGER_HASH': { case 'GET_STRONGER_HASH': {
Store.getStrongerHash(data, cb); break; Store.getStrongerHash(data, cb); break;
} }
case 'INCREMENT_TEMPLATE_USE': {
Store.incrementTemplateUse(data); break;
}
// Messaging // Messaging
case 'INVITE_FROM_USERLIST': { case 'INVITE_FROM_USERLIST': {
Store.inviteFromUserlist(data, cb); break; Store.inviteFromUserlist(data, cb); break;

@ -431,6 +431,8 @@ define([
// File picker // File picker
var FP = {}; var FP = {};
var initFilePicker = function (cfg) { 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) { if (!FP.$iframe) {
var config = {}; var config = {};
config.onFilePicked = function (data) { config.onFilePicked = function (data) {
@ -449,7 +451,7 @@ define([
}; };
FP.$iframe = $('<iframe>', {id: 'sbox-filePicker-iframe'}).appendTo($('body')); FP.$iframe = $('<iframe>', {id: 'sbox-filePicker-iframe'}).appendTo($('body'));
FP.picker = FilePicker.create(config); FP.picker = FilePicker.create(config);
} else { } else if (!cfg.hidden) {
FP.$iframe.show(); FP.$iframe.show();
FP.picker.refresh(cfg); FP.picker.refresh(cfg);
} }
@ -491,7 +493,8 @@ define([
res.push({ res.push({
id: el, id: el,
name: data[el].filename || data[el].title || '?', name: data[el].filename || data[el].title || '?',
thumbnail: thumb thumbnail: thumb,
used: data[el].used || 0
}); });
})); }));
}); });

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,17 +1,13 @@
@import (once) "../../customize/src/less2/include/browser.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/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/avatar.less';
@import (once) '../../customize/src/less2/include/framework.less';
.toolbar_main( .framework_min_main(
@bg-color: @colortheme_friends-bg, @bg-color: @colortheme_friends-bg,
@warn-color: @colortheme_friends-warn, @warn-color: @colortheme_friends-warn,
@color: @colortheme_friends-color @color: @colortheme_friends-color
); );
.fileupload_main();
.alertify_main();
// body // body
&.cp-app-contacts { &.cp-app-contacts {

@ -1,15 +1,11 @@
@import (once) "../../customize/src/less2/include/browser.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/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/tools.less';
@import (once) '../../customize/src/less2/include/tokenfield.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(); .tokenfield_main();
.framework_min_main();
// body // body
&.cp-app-debug { &.cp-app-debug {

@ -1,20 +1,17 @@
@import (once) "../../customize/src/less2/include/browser.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/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/leftside-menu.less';
@import (once) "../../customize/src/less2/include/tools.less"; @import (once) "../../customize/src/less2/include/tools.less";
@import (once) "../../customize/src/less2/include/limit-bar.less"; @import (once) "../../customize/src/less2/include/limit-bar.less";
@import (once) "../../customize/src/less2/include/tokenfield.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, @bg-color: @colortheme_drive-bg,
@warn-color: @colortheme_drive-warn, @warn-color: @colortheme_drive-warn,
@color: @colortheme_drive-color @color: @colortheme_drive-color
); );
.fileupload_main();
.alertify_main();
.limit-bar_main(); .limit-bar_main();
.tokenfield_main(); .tokenfield_main();

@ -1,26 +1,17 @@
@import (once) "../../customize/src/less2/include/browser.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/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/tokenfield.less';
@import (once) '../../customize/src/less2/include/framework.less';
.toolbar_main( .framework_min_main(
@bg-color: @colortheme_file-bg, @bg-color: @colortheme_file-bg,
@warn-color: @colortheme_file-warn, @warn-color: @colortheme_file-warn,
@color: @colortheme_file-color @color: @colortheme_file-color
); );
.fileupload_main();
.alertify_main();
.tokenfield_main(); .tokenfield_main();
@button-border: 2px; @button-border: 2px;
/*html, body {
margin: 0px;
height: 100%;
}*/
// body // body
display: flex; display: flex;
flex-flow: column; flex-flow: column;

@ -3,10 +3,12 @@
@import (once) '../../customize/src/less2/include/icon-colors.less'; @import (once) '../../customize/src/less2/include/icon-colors.less';
@import (once) '../../customize/src/less2/include/fileupload.less'; @import (once) '../../customize/src/less2/include/fileupload.less';
@import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/tippy.less';
.iconColors_main(); .iconColors_main();
.fileupload_main(); .fileupload_main();
.alertify_main(); .alertify_main();
.tippy_main();
#cp-filepicker-dialog { #cp-filepicker-dialog {
display: none; display: none;
@ -36,7 +38,8 @@
line-height: 1em; line-height: 1em;
cursor: pointer; cursor: pointer;
background-color: #111; background-color: @colortheme_modal-bg;
box-shadow: 2px 2px 5px #000;
color: @darker; color: @darker;
transition: all 0.1s; transition: all 0.1s;

@ -1,22 +1,15 @@
@import (once) "../../customize/src/less2/include/browser.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/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/tools.less';
@import (once) '../../customize/src/less2/include/avatar.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, @bg-color: @colortheme_poll-bg,
@warn-color: @colortheme_poll-warn, @warn-color: @colortheme_poll-warn,
@color: @colortheme_poll-color @color: @colortheme_poll-color
); );
.fileupload_main();
.alertify_main();
.tokenfield_main();
.creation_main();
@poll-fore: #555; @poll-fore: #555;

@ -1,19 +1,15 @@
@import (once) "../../customize/src/less2/include/browser.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/markdown.less";
@import (once) '../../customize/src/less2/include/fileupload.less'; @import (once) '../../customize/src/less2/include/framework.less';
@import (once) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/avatar.less'; @import (once) '../../customize/src/less2/include/avatar.less';
@import (once) '../../customize/src/less2/include/sidebar-layout.less'; @import (once) '../../customize/src/less2/include/sidebar-layout.less';
.toolbar_main( .framework_min_main(
@bg-color: @colortheme_profile-bg, @bg-color: @colortheme_profile-bg,
@warn-color: @colortheme_profile-warn, @warn-color: @colortheme_profile-warn,
@color: @colortheme_profile-color @color: @colortheme_profile-color
); );
.fileupload_main();
.alertify_main();
.sidebar-layout_main(); .sidebar-layout_main();
// body // body

@ -118,15 +118,10 @@ define([
}, 500); }, 500);
$register.on('keypress', function (e) { $register.on('keypress', function (e) {
e.preventDefault(); if (e.which === 13) {
e.stopPropagation(); e.preventDefault();
e.stopPropagation();
console.error(e.which); return clickRegister();
switch (e.which) {
case 13: return clickRegister();
case 13: return clickRegister();
default:
//console.log(e.which);
} }
}); });

@ -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/browser.less";
@import (once) "../../customize/src/less2/include/toolbar.less";
@import (once) "../../customize/src/less2/include/markdown.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/sidebar-layout.less';
@import (once) "../../customize/src/less2/include/limit-bar.less"; @import (once) "../../customize/src/less2/include/limit-bar.less";
@import (once) "../../customize/src/less2/include/creation.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, @bg-color: @colortheme_settings-bg,
@warn-color: @colortheme_settings-warn, @warn-color: @colortheme_settings-warn,
@color: @colortheme_settings-color @color: @colortheme_settings-color
); );
.alertify_main();
.sidebar-layout_main(); .sidebar-layout_main();
.limit-bar_main(); .limit-bar_main();
.creation_main(); .creation_main();
@ -21,6 +18,7 @@
&.cp-app-settings { &.cp-app-settings {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
font: @colortheme_app-font;
#cp-sidebarlayout-container { #cp-sidebarlayout-container {
#cp-sidebarlayout-rightside { #cp-sidebarlayout-rightside {
input[type="checkbox"] { input[type="checkbox"] {

@ -233,16 +233,14 @@ define([
// Disable // Disable
$('<span>', {'class': 'cp-sidebarlayout-description'}) $('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_disableThumbnailsDescription).appendTo($div); .text(Messages.settings_disableThumbnailsDescription).appendTo($div);
var $label = $('<label>', { 'for': 'disableThumbnails', 'class': 'noTitle' })
.text(Messages.settings_disableThumbnailsAction);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}); var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}); var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $checkbox = $('<input>', { var $cbox = $(UI.createCheckbox('disableThumbnails',
'type': 'checkbox', Messages.settings_disableThumbnailsAction,
id: 'disableThumbnails' false, { label: {class: 'noTitle'} }));
}).on('change', function () { var $checkbox = $cbox.find('input').on('change', function () {
$spinner.show(); $spinner.show();
$ok.hide(); $ok.hide();
var val = $checkbox.is(':checked') || false; var val = $checkbox.is(':checked') || false;
@ -252,11 +250,10 @@ define([
}); });
}); });
$checkbox.appendTo($div); $cbox.appendTo($div);
$label.appendTo($div);
$ok.hide().appendTo($div); $ok.hide().appendTo($cbox);
$spinner.hide().appendTo($div); $spinner.hide().appendTo($cbox);
common.getAttribute(['general', 'disableThumbnails'], function (e, val) { common.getAttribute(['general', 'disableThumbnails'], function (e, val) {
$checkbox[0].checked = typeof(val) === "undefined" || val; $checkbox[0].checked = typeof(val) === "undefined" || val;
@ -283,9 +280,6 @@ define([
$('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div); $('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
var $label = $('<label>', { 'for': 'cp-settings-userfeedback', 'class': 'noTitle' })
.text(Messages.settings_userFeedback);
$('<span>', {'class': 'cp-sidebarlayout-description'}) $('<span>', {'class': 'cp-sidebarlayout-description'})
.append(Messages.settings_userFeedbackHint1) .append(Messages.settings_userFeedbackHint1)
.append(Messages.settings_userFeedbackHint2).appendTo($div); .append(Messages.settings_userFeedbackHint2).appendTo($div);
@ -293,10 +287,10 @@ define([
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}); var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}); var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $checkbox = $('<input>', { var $cbox = $(UI.createCheckbox('cp-settings-userfeedback',
'type': 'checkbox', Messages.settings_userFeedback,
id: 'cp-settings-userfeedback' false, { label: {class: 'noTitle'} }));
}).on('change', function () { var $checkbox = $cbox.find('input').on('change', function () {
$spinner.show(); $spinner.show();
$ok.hide(); $ok.hide();
var val = $checkbox.is(':checked') || false; var val = $checkbox.is(':checked') || false;
@ -306,11 +300,10 @@ define([
}); });
}); });
$checkbox.appendTo($div); $cbox.appendTo($div);
$label.appendTo($div);
$ok.hide().appendTo($div); $ok.hide().appendTo($cbox);
$spinner.hide().appendTo($div); $spinner.hide().appendTo($cbox);
if (privateData.feedbackAllowed) { if (privateData.feedbackAllowed) {
$checkbox[0].checked = true; $checkbox[0].checked = true;
@ -730,30 +723,28 @@ define([
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}); var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}); var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' }) var $cbox = $(UI.createCheckbox('cp-settings-padwidth',
.text(Messages.settings_padWidthLabel); Messages.settings_padWidthLabel,
var $input = $('<input>', { false, { label: {class: 'noTitle'} }));
type: 'checkbox', var $checkbox = $cbox.find('input').on('change', function () {
id: 'cp-settings-padwidth'
}).on('change', function () {
$spinner.show(); $spinner.show();
$ok.hide(); $ok.hide();
var val = $input.is(':checked'); var val = $checkbox.is(':checked');
common.setAttribute(['pad', 'width'], val, function () { common.setAttribute(['pad', 'width'], val, function () {
$spinner.hide(); $spinner.hide();
$ok.show(); $ok.show();
}); });
}).appendTo($div); });
$label.appendTo($div); $cbox.appendTo($div);
$ok.hide().appendTo($div); $ok.hide().appendTo($cbox);
$spinner.hide().appendTo($div); $spinner.hide().appendTo($cbox);
common.getAttribute(['pad', 'width'], function (e, val) { common.getAttribute(['pad', 'width'], function (e, val) {
if (e) { return void console.error(e); } if (e) { return void console.error(e); }
if (val) { if (val) {
$input.attr('checked', 'checked'); $checkbox.attr('checked', 'checked');
} }
}); });
return $div; return $div;
@ -805,13 +796,14 @@ define([
}).css('flex-flow', 'column') }).css('flex-flow', 'column')
.appendTo($div); .appendTo($div);
var $input = $('<input>', {
type: 'checkbox', var $cbox = $(UI.createCheckbox('cp-settings-codeindent'));
}).on('change', function () { var $checkbox = $cbox.find('input').on('change', function () {
var val = $input.is(':checked'); var val = $checkbox.is(':checked');
if (typeof(val) !== 'boolean') { return; } if (typeof(val) !== 'boolean') { return; }
common.setAttribute(['codemirror', key], val); common.setAttribute(['codemirror', key], val);
}).appendTo($inputBlock); });
$cbox.appendTo($inputBlock);
/*proxy.on('change', ['settings', 'codemirror', key], function (o, n) { /*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
$input[0].checked = !!n; $input[0].checked = !!n;
@ -819,7 +811,7 @@ define([
common.getAttribute(['codemirror', key], function (e, val) { common.getAttribute(['codemirror', key], function (e, val) {
if (e) { return void console.error(e); } if (e) { return void console.error(e); }
$input[0].checked = !!val; $checkbox[0].checked = !!val;
}); });
return $div; return $div;
}; };

@ -153,53 +153,33 @@ define([
$('<b>').text(Messages.printOptions).appendTo($p); $('<b>').text(Messages.printOptions).appendTo($p);
$p.append($('<br>')); $p.append($('<br>'));
// Slide number // Slide number
$('<input>', { var cbox = UI.createCheckbox('cp-app-slide-options-number', Messages.printSlideNumber,
type: 'checkbox', slideOptionsTmp.slide);
id: 'cp-app-slide-options-number', $(cbox).appendTo($p).find('input').on('change', function () {
checked: slideOptionsTmp.slide
}).on('change', function () {
var c = this.checked; var c = this.checked;
slideOptionsTmp.slide = c; slideOptionsTmp.slide = c;
}).appendTo($p).css('width', 'auto'); }).css('width', 'auto');
$('<label>', {'for': 'cp-app-slide-options-number'}).text(Messages.printSlideNumber)
.appendTo($p);
$p.append($('<br>'));
// Date // Date
$('<input>', { var cboxDate = UI.createCheckbox('cp-app-slide-options-date', Messages.printDate,
type: 'checkbox', slideOptionsTmp.date);
id: 'cp-app-slide-options-date', $(cboxDate).appendTo($p).find('input').on('change', function () {
checked: slideOptionsTmp.date
}).on('change', function () {
var c = this.checked; var c = this.checked;
slideOptionsTmp.date = c; slideOptionsTmp.date = c;
}).appendTo($p).css('width', 'auto'); }).css('width', 'auto');
$('<label>', {'for': 'cp-app-slide-options-date'}).text(Messages.printDate)
.appendTo($p);
$p.append($('<br>'));
// Title // Title
$('<input>', { var cboxTitle = UI.createCheckbox('cp-app-slide-options-title', Messages.printTitle,
type: 'checkbox', slideOptionsTmp.title);
id: 'cp-app-slide-options-title', $(cboxTitle).appendTo($p).find('input').on('change', function () {
checked: slideOptionsTmp.title
}).on('change', function () {
var c = this.checked; var c = this.checked;
slideOptionsTmp.title = c; slideOptionsTmp.title = c;
}).appendTo($p).css('width', 'auto'); }).css('width', 'auto');
$('<label>', {'for': 'cp-app-slide-options-title'}).text(Messages.printTitle)
.appendTo($p);
$p.append($('<br>'));
// Transition // Transition
$('<input>', { var cboxTransition = UI.createCheckbox('cp-app-slide-options-transition', Messages.printTransition,
type: 'checkbox', slideOptionsTmp.transition);
id: 'cp-app-slide-options-transition', $(cboxTransition).appendTo($p).find('input').on('change', function () {
checked: slideOptionsTmp.transition
}).on('change', function () {
var c = this.checked; var c = this.checked;
slideOptionsTmp.transition = c; slideOptionsTmp.transition = c;
}).appendTo($p).css('width', 'auto'); }).css('width', 'auto');
$('<label>', {'for': 'cp-app-slide-options-transition'}).text(Messages.printTransition)
.appendTo($p);
$p.append($('<br>'));
$p.append($('<br>')); $p.append($('<br>'));
// Background image // Background image
$('<label>', {'for': 'cp-app-slide-options-bg'}).text(Messages.printBackground) $('<label>', {'for': 'cp-app-slide-options-bg'}).text(Messages.printBackground)

@ -1,17 +1,13 @@
@import (once) "../../customize/src/less2/include/browser.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/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/avatar.less';
@import (once) '../../customize/src/less2/include/framework.less';
.toolbar_main( .framework_min_main(
@bg-color: @colortheme_todo-bg, @bg-color: @colortheme_todo-bg,
@warn-color: @colortheme_todo-warn, @warn-color: @colortheme_todo-warn,
@color: @colortheme_todo-color @color: @colortheme_todo-color
); );
.fileupload_main();
.alertify_main();
// body // body
&.cp-app-todo { &.cp-app-todo {

@ -1,21 +1,13 @@
@import (once) "../../customize/src/less2/include/browser.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/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/tools.less';
@import (once) '../../customize/src/less2/include/tokenfield.less'; @import (once) "../../customize/src/less2/include/framework.less";
@import (once) '../../customize/src/less2/include/creation.less';
.toolbar_main( .framework_main(
@bg-color: @colortheme_whiteboard-bg, @bg-color: @colortheme_whiteboard-bg,
@warn-color: @colortheme_whiteboard-warn, @warn-color: @colortheme_whiteboard-warn,
@color: @colortheme_whiteboard-color @color: @colortheme_whiteboard-color
); );
.fileupload_main();
.alertify_main();
.tokenfield_main();
.creation_main();
// body // body
&.cp-app-whiteboard { &.cp-app-whiteboard {

@ -1,14 +1,9 @@
@import (once) "../../customize/src/less2/include/browser.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/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/avatar.less';
@import (once) '../../customize/src/less2/include/framework.less';
.framework_min_main();
.toolbar_main();
.fileupload_main();
.alertify_main();
// body // body
&.cp-app-worker { &.cp-app-worker {

Loading…
Cancel
Save