blitzwing/cryptpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS refactorings and pad-is-not-pinned work

Browse source
This commit is contained in:
Caleb James DeLisle 2017-12-07 19:00:13 +01:00
parent 67f8031beb
commit 617c4b6044
20 changed files with 210 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
customize.dist/messages.js
View file

@ -93,7 +93,7 @@ define(req, function(Util, Default, Language) {
var text = messages[key];
if (typeof(text) === 'string') {
return text.replace(/\{(\d+)\}/g, function (str, p1) {
return argArray[p1] || null;
return typeof(argArray[p1]) === 'string' ? argArray[p1] : '';
});
} else {
return text;

6
customize.dist/src/less2/include/alertify.less
View file

@ -1,6 +1,6 @@
@import (once) "./colortheme-all.less";
@import (once) "./browser.less";
@import (once) "./modal-theme.less";
@import (once) "./variables.less";
.alertify_main () {
@max-z-index: 2147483647;
@ -21,8 +21,8 @@
@alertify-input-bg: @colortheme_modal-input;
@alertify-input-fg: @colortheme_modal-fg;
@alertify_padding-base: @modal_padding;
@alertify_box-shadow: @modal_shadow;
@alertify_padding-base: @variables_padding;
@alertify_box-shadow: @variables_shadow;
// Logs to show that something has happened
// These show only once

2
customize.dist/src/less2/include/colortheme.less
View file

@ -37,7 +37,7 @@
@colortheme_dropdown-bg-hover: #f1f1f1;
@colortheme_dropdown-bg-active: #e8e8e8;
// Apps
// Apps, these colors are used for customizing the toolbar for the apps.
@colortheme_pad-bg: #1c4fa0;
@colortheme_pad-color: #fff;

4
customize.dist/src/less2/include/modal-theme.less
View file

@ -1,4 +0,0 @@
// Used in modal.less and alertify.less
@modal_padding: 12px;
@modal_shadow: 0 8px 32px 0 rgba(0,0,0,.4);

10
customize.dist/src/less2/include/modal.less
View file

@ -1,12 +1,12 @@
@import (once) "./colortheme-all.less";
@import (once) "./modal-theme.less";
@import (once) "./variables.less";
.modal_base() {
font-family: @colortheme_font;
background-color: @colortheme_modal-bg;
color: @colortheme_modal-fg;
box-shadow: @modal_shadow;
box-shadow: @variables_shadow;
a {
color: @colortheme_modal-link;
@ -31,9 +31,9 @@
.cp-modal {
background-color: @colortheme_modal-bg;
color: @colortheme_modal-fg;
box-shadow: @modal_shadow;
box-shadow: @variables_shadow;
padding: @modal_padding;
padding: @variables_padding;
position: absolute;
top: 15vh; bottom: 15vh;
@ -71,7 +71,7 @@
position: absolute;
top: 0;
right: 0;
margin: @modal_padding;
margin: @variables_padding;
cursor: pointer;
}
}

297
customize.dist/src/less2/include/toolbar.less
View file

@ -7,9 +7,12 @@
@import (once) "./icon-colors.less";
@import (once) "./tools.less";
@_cp-toolbar-color-warn: black;
.toolbar_main () {
.toolbar_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
@barWidth: 600px // width of the toolbar
) {
@toolbar_line-height: 32px;
@toolbar_top-height: 64px;
@ -52,7 +55,7 @@
}
.cp-toolbar-userlist-drawer {
background-color: @colortheme_default-bg;
background-color: @bg-color;
font: @colortheme_app-font-size @colortheme_font;
min-width: 175px;
width: 175px;
@ -170,174 +173,51 @@
}
}
.addToolbarColors (@color, @bg-color, @barWidth: 600px) {
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: lighten(@bg-color, 20%);
display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: @color;
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: lighten(@bgcolor, 8%);
}
&.cp-markdown-help { float: right; }
}
}
.cp-toolbar-userlist-drawer {
background-color: @bgcolor;
// TODO(cjd) This ought to be in a less file for markdown-based editors
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: lighten(@bg-color, 20%);
display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: @color;
.cp-toolbar-userlist-drawer-close {
color: @color;
}
h2 {
background-color: darken(@bgcolor, 10%);
color: @color;
}
.cp-toolbar-userlist-name-input {
background-color: darken(@bg-color, 10%);
color: @color;
}
.cp-toolbar-userlist-name-edit {
color: contrast(@color,
lighten(@color, 20%),
darken(@color, 20%));
background: transparent;
&:hover {
color: @color;
}
}
.cp-toolbar-userlist-friend {
&:hover {
color: darken(@color, 15%);
}
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: lighten(@bg-color, 8%);
}
&.cp-markdown-help { float: right; }
}
.cp-toolbar {
background-color: @bgcolor;
}
.cp-toolbar-userlist-drawer {
background-color: @bg-color;
color: @color;
.cp-toolbar-userlist-drawer-close {
color: @color;
.cp-toolbar-spinner {
font-size: @colortheme_app-font-size;
}
h2 {
background-color: darken(@bg-color, 10%);
color: @color;
}
.cp-toolbar-userlist-name-input {
background-color: darken(@bg-color, 10%);
color: @color;
}
.cp-toolbar-userlist-name-edit {
color: contrast(@color,
lighten(@color, 20%),
darken(@color, 20%));
background: transparent;
&:hover {
color: @color;
}
.cp-toolbar-limit {
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
color: @_cp-toolbar-color-warn;
}
.cp-toolbar-leftside, .cp-toolbar-rightside {
background-color: lighten(@bgcolor, 8%);
button:hover, button.cp-toolbar-button-active {
background-color: @bgcolor;
}
}
.cp-toolbar-rightside {
@media screen and (max-width: @barWidth) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
}
.cp-pad-not-pinned {
padding-left: 20px;
font-size: @colortheme_app-font-size;
color: @_cp-toolbar-color-warn;
a {
font-size: @colortheme_app-font-size;
font-weight: bold;
color: @_cp-toolbar-color-warn;
&:hover {
text-decoration: underline;
}
}
}
.cp-toolbar-title-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text;
border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
transition: all 0.15s;
color: @color;
}
.cp-toolbar-title-editable {
cursor: text;
}
}
.cp-toolbar-title-save {
border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
color: @color;
&:hover {
background: darken(@bgcolor, 5%);
}
}
input {
border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
color: @color;
}
.cp-dropdown-content.cp-dropdown-left a {
color: black;
}
}
}
&.cp-app-pad {
@bgcolor: @colortheme_pad-bg;
@color: @colortheme_pad-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-code {
@bgcolor: @colortheme_code-bg;
@color: @colortheme_code-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-slide {
@bgcolor: @colortheme_slide-bg;
@color: @colortheme_slide-color;
.addToolbarColors(@color, @bgcolor, 700px);
}
&.cp-app-poll {
@bgcolor: @colortheme_poll-bg;
@color: @colortheme_poll-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-whiteboard {
@bgcolor: @colortheme_whiteboard-bg;
@color: @colortheme_whiteboard-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-drive {
@bgcolor: @colortheme_drive-bg;
@color: @colortheme_drive-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-file {
@bgcolor: @colortheme_file-bg;
@color: @colortheme_file-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-contacts {
@bgcolor: @colortheme_friends-bg;
@color: @colortheme_friends-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-settings {
@bgcolor: @colortheme_settings-bg;
@color: @colortheme_settings-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-profile {
@bgcolor: @colortheme_profile-bg;
@color: @colortheme_profile-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-todo {
@bgcolor: @colortheme_todo-bg;
@color: @colortheme_todo-color;
.addToolbarColors(@color, @bgcolor);
.cp-toolbar-userlist-friend {
&:hover {
color: darken(@color, 15%);
}
}
}
.cp-toolbar {
@ -355,12 +235,8 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
//background-color: #BBBBFF;
background-color: @colortheme_default-bg;
color: @colortheme_default-color;
background-color: @bg-color;
color: @color;
.fa {
font: normal normal normal 14px/1 FontAwesome;
@ -487,6 +363,56 @@
}
}
}
.cp-toolbar-spinner {
font-size: @colortheme_app-font-size;
color: @color;
}
.cp-toolbar-limit {
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
color: @warn-color;
}
.cp-toolbar-leftside, .cp-toolbar-rightside {
background-color: lighten(@bg-color, 8%);
button:hover, button.cp-toolbar-button-active {
background-color: @bg-color;
}
}
.cp-toolbar-rightside {
@media screen and (max-width: @barWidth) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
}
.cp-toolbar-title-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text;
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
transition: all 0.15s;
color: @color;
}
.cp-toolbar-title-editable {
cursor: text;
}
}
.cp-toolbar-title-save {
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
color: @color;
&:hover {
background: darken(@bg-color, 5%);
}
}
input {
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
color: @color;
}
.cp-dropdown-content.cp-dropdown-left a {
color: black;
}
}
.cp-toolbar-top {
@ -578,6 +504,35 @@
padding: 5px 5px;
height: 40px;
}
.cp-pad-not-pinned {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
align-self: right;
padding-left: 20px;
padding-left: 5px;
font-size: @colortheme_app-font-size;
color: @warn-color;
.cp-pnp-msg {
padding-left: 5px;
a {
font-size: @colortheme_app-font-size;
font-weight: bold;
color: @warn-color;
&:hover {
text-decoration: underline;
}
}
@media screen and (max-width: (@browser_media-not-big)) {
display: none;
}
}
@media screen and (max-width: (@browser_media-not-big)) {
overflow: visible;
}
}
}
.cp-toolbar-link, .cp-toolbar-new {
font-size: 48px;

6
customize.dist/src/less2/include/variables.less
View file

@ -1,3 +1,9 @@
// This is a file for generic constants which we didn't want to hardcode everywhere.
// However, unlike colortheme, customizing these variables will cause breakage.
// Elements size
@variables_bar-height: 32px;
// Used in modal.less and alertify.less
@variables_padding: 12px;
@variables_shadow: 0 8px 32px 0 rgba(0,0,0,.4);

2
customize.dist/translations/messages.js
View file

@ -31,7 +31,7 @@ define(function () {
out.typeError = "This pad is not compatible with the selected application";
out.onLogout = 'You are logged out, <a href="/" target="_blank">click here</a> to log in<br>or press <em>Escape</em> to access your pad in read-only mode.';
out.wrongApp = "Unable to display the content of that realtime session in your browser. Please try to reload that page.";
out.padNotPinned = 'This pad will expire in 3 months, <a href="{0}" target="blank">login</a> or <a href="{1}" target="blank">register</a> to preserve it.';
out.padNotPinned = 'This pad will expire in 3 months, {0}login{1} or {2}register{3} to preserve it.';
out.loading = "Loading...";
out.error = "Error";

8
www/code/app-code.less
View file

@ -5,9 +5,11 @@
@import (once) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
@_cp-toolbar-color-warn: @colortheme_code-warn;
.toolbar_main();
.toolbar_main(
@bg-color: @colortheme_code-bg,
@warn-color: @colortheme_code-warn,
@color: @colortheme_code-color
);
.fileupload_main();
.alertify_main();
.tokenfield_main();

15
www/common/toolbar3.js
View file

@ -729,11 +729,20 @@ define([
Common.sendAnonRpcMsg('IS_CHANNEL_PINNED', cid, function (x) {
if (x.error || !Array.isArray(x.response)) { return void console.log(x); }
if (x.response[0] === true) { return; }
var pnpTitle = Messages._getKey('padNotPinned', ['','','','']);
var pnpMsg = Messages._getKey('padNotPinned', [
'<a href="' + o + '/login" target="blank" title>',
'</a>',
'<a href="' + o + '/register" target="blank" title>',
'</a>'
]);
var msg = $('<span>', {
'class': 'cp-pad-not-pinned',
}).append(
Messages._getKey('padNotPinned', [o + '/login', o + '/register'])
);
'title': pnpTitle
}).append([
$('<span>', {'class': 'fa fa-exclamation-triangle'}),
$('<span>', {'class': 'cp-pnp-msg'}).append(pnpMsg)
]);
$('.cp-toolbar-title').append(msg);
console.log("This pad is not pinned");
});

8
www/contacts/app-contacts.less
View file

@ -8,9 +8,11 @@
@import (once) '../../customize/src/less2/include/avatar.less';
@_cp-toolbar-color-warn: @colortheme_friends-warn;;
.toolbar_main();
.toolbar_main(
@bg-color: @colortheme_friends-bg,
@warn-color: @colortheme_friends-warn,
@color: @colortheme_friends-color
);
.fileupload_main();
.alertify_main();

8
www/drive/app-drive.less
View file

@ -8,9 +8,11 @@
@import (once) "../../customize/src/less2/include/limit-bar.less";
@import (once) "../../customize/src/less2/include/tokenfield.less";
@_cp-toolbar-color-warn: @colortheme_drive-warn;
.toolbar_main();
.toolbar_main(
@bg-color: @colortheme_drive-bg,
@warn-color: @colortheme_drive-warn,
@color: @colortheme_drive-color
);
.fileupload_main();
.alertify_main();
.limit-bar_main();

8
www/file/app-file.less
View file

@ -5,9 +5,11 @@
@import (once) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
@_cp-toolbar-color-warn: @colortheme_file-warn;
.toolbar_main();
.toolbar_main(
@bg-color: @colortheme_file-bg,
@warn-color: @colortheme_file-warn,
@color: @colortheme_file-color
);
.fileupload_main();
.alertify_main();
.tokenfield_main();

12
www/pad/app-pad.less
View file

@ -1,14 +1,12 @@
// Defaults to avoid breaking existing themes
@colortheme_pad-toolbar-bg: #c1e7ff;
@import (once) "../../customize/src/less2/include/toolbar.less";
@import (once) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
@_cp-toolbar-color-warn: @colortheme_pad-warn;
.toolbar_main();
.toolbar_main(
@bg-color: @colortheme_pad-bg,
@warn-color: @colortheme_pad-warn,
@color: @colortheme_pad-color
);
.alertify_main();
// body

14
www/poll/app-poll.less
View file

@ -1,9 +1,3 @@
// Defaults to avoid breaking existing themes
@colortheme_poll-th-bg: #005bef;
@colortheme_poll-th-fg: #fff;
@colortheme_poll-help-bg: #bbffbb;
@import (once) "../../customize/src/less2/include/browser.less";
@import (once) "../../customize/src/less2/include/toolbar.less";
@import (once) "../../customize/src/less2/include/markdown.less";
@ -13,9 +7,11 @@
@import (once) '../../customize/src/less2/include/tools.less';
@import (once) '../../customize/src/less2/include/avatar.less';
@_cp-toolbar-color-warn: @colortheme_poll-warn;
.toolbar_main();
.toolbar_main(
@bg-color: @colortheme_poll-bg,
@warn-color: @colortheme_poll-warn,
@color: @colortheme_poll-color
);
.fileupload_main();
.alertify_main();
.tokenfield_main();

7
www/profile/app-profile.less
View file

@ -7,8 +7,11 @@
@import (once) '../../customize/src/less2/include/avatar.less';
@import (once) '../../customize/src/less2/include/sidebar-layout.less';
.toolbar_main();
.toolbar_main(
@bg-color: @colortheme_profile-bg,
@warn-color: @colortheme_profile-warn,
@color: @colortheme_profile-color
);
.fileupload_main();
.alertify_main();
.sidebar-layout_main();

8
www/settings/app-settings.less
View file

@ -6,9 +6,11 @@
@import (once) '../../customize/src/less2/include/sidebar-layout.less';
@import (once) "../../customize/src/less2/include/limit-bar.less";
@_cp-toolbar-color-warn: @colortheme_settings-warn;
.toolbar_main();
.toolbar_main(
@bg-color: @colortheme_settings-bg,
@warn-color: @colortheme_settings-warn,
@color: @colortheme_settings-color
);
.alertify_main();
.sidebar-layout_main();
.limit-bar_main();

8
www/slide/app-slide.less
View file

@ -6,10 +6,12 @@
@import (once) "../../customize/src/less2/include/mediatag.less";
@import (once) '../../customize/src/less2/include/tokenfield.less';
@_cp-toolbar-color-warn: @colortheme_slide-warn;
.mediatag_base();
.toolbar_main();
.toolbar_main(
@bg-color: @colortheme_slide-bg,
@warn-color: @colortheme_slide-warn,
@color: @colortheme_slide-color
);
.fileupload_main();
.alertify_main();
.tokenfield_main();

7
www/todo/app-todo.less
View file

@ -8,8 +8,11 @@
@import (once) '../../customize/src/less2/include/avatar.less';
.toolbar_main();
.toolbar_main(
@bg-color: @colortheme_todo-bg,
@warn-color: @colortheme_todo-warn,
@color: @colortheme_todo-color
);
.fileupload_main();
.alertify_main();

8
www/whiteboard/app-whiteboard.less
View file

@ -6,9 +6,11 @@
@import (once) '../../customize/src/less2/include/tools.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
@_cp-toolbar-color-warn: @colortheme_whiteboard-warn;
.toolbar_main();
.toolbar_main(
@bg-color: @colortheme_whiteboard-bg,
@warn-color: @colortheme_whiteboard-warn,
@color: @colortheme_whiteboard-color
);
.fileupload_main();
.alertify_main();
.tokenfield_main();