dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Migrate all remaining apps to support dark theme

This commit is contained in:
yflory 2021-01-28 17:17:23 +01:00
parent e41e6c39ce
commit 623aba2705
20 changed files with 238 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
customize.dist/src/less2/include/colortheme-dark.less
View File

@ -129,16 +129,18 @@
@cryptpad_color_lighter_grey: #FFF-#f9f9f9;
@cryptpad_color_light_blue: #FFF-#00b7d8;
@cryptpad_color_lighter_blue: #FFF-#d2e1f2;
@cryptpad_color_warn_red: #FFF-#eb675e;
@cryptpad_color_dark_red: #9e0000;
@cryptpad_color_light_red: #FFD4D4;
@cryptpad_color_orange: #f49842;
@cryptpad_color_black: #FFF-#000;
@cryptpad_color_white: #FFF-#FFF;
@cryptpad_color_light_green: #c5ffa8;
@cryptpad_color_green: #5cb85c;
@cryptpad_color_light_red: darken(#FFD4D4, 75%);
@cryptpad_color_light_green: darken(#c5ffa8, 75%);
@cryptpad_color_light_yellow: darken(#FFE69C, 75%);
@cryptpad_color_lighter_blue: darken(#d2e1f2, 75%);
@cryptpad_color_link: #FFF-#0275D8;
// Premium plans colors
@ -199,7 +201,7 @@
@cp_buttons-cancel-border: #949494;
// Sidebar layout
@cp_sidebar-left-bg: @cryptpad_color_grey;
@cp_sidebar-left-bg: @cryptpad_color_toolbar_grey;
@cp_sidebar-left-fg: @cryptpad_color_black;
@cp_sidebar-left-active: @cryptpad_color_white;
@cp_sidebar-right-bg: @cryptpad_color_white;
@ -212,6 +214,7 @@
@cp_drive-header-fg: @cryptpad_color_dark_grey;
@cp_drive-icon-hover: @cryptpad_color_grey;
@cp_drive-icon-border: @cryptpad_color_neutral2_grey;
@cp_drive-thumb-bg: @cryptpad_color_hint_grey;
@cp_drive-selected-bg: @cryptpad_color_dark_grey;
@cp_drive-selected-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey);
@cp_drive-selection-overlay: fade(@cryptpad_color_black, 70%);
@ -344,6 +347,7 @@
// Apps
@cp_app-bg: @cryptpad_color_light_grey;
@cp_app-fg: @cryptpad_text_col;
// Accounts
@cp_accounts-basic: @cryptpad_color_basic;
@ -402,4 +406,43 @@
@cp_notif-bg: @cryptpad_color_lighter_grey;
@cp_notif-fg: @cryptpad_text_col;
// OO
@cp_oo-offline-overlay: fade(@cryptpad_color_white, 50%);
// Rich text
@cp_pad-fg: @cryptpad_text_col;
@cp_pad-icon-filter: invert();
// Poll
@cp_poll-th-bg: @cryptpad_color_lighter_blue;
@cp_poll-th-fg: @cryptpad_text_col;
@cp_poll-uncommitted-bg: @cryptpad_color_toolbar_grey;
@cp_poll-border-color: @cryptpad_color_hint_grey;
@cp_poll-cell-fg: @cryptpad_text_col;
@cp_poll-unset: @cryptpad_color_help_grey;
@cp_poll-yes: @cryptpad_color_light_green;
@cp_poll-no: @cryptpad_color_light_red;
@cp_poll-maybe: @cryptpad_color_light_yellow;
@cp_poll-hint: @cryptpad_color_dark_grey;
// Profile
@cp_profile-border: @cryptpad_color_help_grey;
@cp_profile-hint: @cryptpad_color_hint_grey;
// SLide
@cp_slide-fg: @cp_app-fg;
@cp_slide-css-error: @cryptpad_color_toolbar_grey;
// Teams
@cp_teams-card-bg: @cryptpad_color_grey;
@cp_teams-leftside-bg: @cryptpad_color_grey;
@cp_teams-invite-bg: fade(@colortheme_logo-2, 50%);
@cp_teams-invite-fg: @cryptpad_text_col;
@cp_teams-roster-odd: fade(@cryptpad_text_col, 15%);
// Whiteboard
@cp_whiteboard-board-bg: @cp_app-bg;
@cp_whiteboard-board-border: @cryptpad_color_hint_grey;
@cp_whiteboard-bg: @cp_app-bg;
@cp_whiteboard-fg: @cryptpad_text_col;

45
customize.dist/src/less2/include/colortheme.less
View File

@ -142,6 +142,7 @@
@cryptpad_color_white: #FFF;
@cryptpad_color_light_green: #c5ffa8;
@cryptpad_color_green: #5cb85c;
@cryptpad_color_light_yellow: #FFE69C;
@cryptpad_color_link: #0275D8;
@ -203,7 +204,7 @@
@cp_buttons-cancel-border: #949494;
// Sidebar layout
@cp_sidebar-left-bg: @cryptpad_color_grey;
@cp_sidebar-left-bg: @cryptpad_color_toolbar_grey;
@cp_sidebar-left-fg: @cryptpad_color_black;
@cp_sidebar-left-active: @cryptpad_color_white;
@cp_sidebar-right-bg: @cryptpad_color_white;
@ -216,6 +217,7 @@
@cp_drive-header-fg: @cryptpad_color_dark_grey;
@cp_drive-icon-hover: @cryptpad_color_grey;
@cp_drive-icon-border: @cryptpad_color_neutral2_grey;
@cp_drive-thumb-bg: @cryptpad_color_white;
@cp_drive-selected-bg: @cryptpad_color_dark_grey;
@cp_drive-selected-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey);
@cp_drive-selection-overlay: fade(@cryptpad_color_black, 70%);
@ -347,6 +349,7 @@
// Apps
@cp_app-bg: @cryptpad_color_light_grey;
@cp_app-fg: @cryptpad_text_col;
// Accounts
@cp_accounts-basic: @cryptpad_color_basic;
@ -405,4 +408,42 @@
@cp_notif-bg: @cryptpad_color_lighter_grey;
@cp_notif-fg: @cryptpad_text_col;
// XXX OO OO OO OO OO
// OO
@cp_oo-offline-overlay: fade(@cryptpad_color_white, 50%);
// Rich text
@cp_pad-fg: @cryptpad_text_col;
@cp_pad-icon-filter: none;
// Poll
@cp_poll-th-bg: @cryptpad_color_lighter_blue;
@cp_poll-th-fg: @cryptpad_text_col;
@cp_poll-uncommitted-bg: @cryptpad_color_toolbar_grey;
@cp_poll-border-color: @cryptpad_color_hint_grey;
@cp_poll-cell-fg: @cryptpad_text_col;
@cp_poll-unset: @cryptpad_color_help_grey;
@cp_poll-yes: @cryptpad_color_light_green;
@cp_poll-no: @cryptpad_color_light_red;
@cp_poll-maybe: @cryptpad_color_light_yellow;
@cp_poll-hint: @cryptpad_color_dark_grey;
// Profile
@cp_profile-border: @cryptpad_color_help_grey;
@cp_profile-hint: @cryptpad_color_hint_grey;
// SLide
@cp_slide-fg: @cp_app-fg;
@cp_slide-css-error: @cryptpad_color_toolbar_grey;
// Teams
@cp_teams-card-bg: @cryptpad_color_grey;
@cp_teams-leftside-bg: @cryptpad_color_grey;
@cp_teams-invite-bg: fade(@colortheme_logo-2, 50%);
@cp_teams-invite-fg: @cryptpad_text_col;
@cp_teams-roster-odd: fade(@cryptpad_text_col, 15%);
// Whiteboard
@cp_whiteboard-board-bg: @cryptpad_color_white;
@cp_whiteboard-board-border: @cryptpad_color_hint_grey;
@cp_whiteboard-bg: @cp_app-bg;
@cp_whiteboard-fg: @cryptpad_text_col;

1
customize.dist/src/less2/include/drive.less
View File

@ -582,6 +582,7 @@
.cp-app-drive-element-thumbnail {
max-width: 100px;
max-height: 100px;
background: @cp_drive-thumb-bg;
& ~ .fa, & ~ .cptools {
display: inline;
font-size: 17px;

6
customize.dist/src/less2/include/loading.less
View File

@ -116,12 +116,12 @@
flex-shrink: 1;
min-width: 0;
}
.cp-password-reveal{
.cp-password-reveal {
padding: 0px 24px;
}
}
.cp-password-input {
font-size:16px;
font-size: 16px;
}
.tools_placeholder-color();
}
@ -164,7 +164,7 @@
i {
width: 22px;
}
span{
span {
margin-left: 10px;
&.percent {
position: absolute;

3
customize.dist/src/less2/include/support.less
View File

@ -11,6 +11,9 @@
width: @sidebar_button-width;
margin-bottom: 10px;
}
hr {
border-color: @msg-bg;
}
textarea {
width: 2*@sidebar_button-width;
max-width: 90%;

6
www/common/onlyoffice/app-oo.less
View File

@ -46,14 +46,14 @@ body.cp-app-sheet, body.cp-app-oodoc, body.cp-app-ooslide {
#cp-app-oo-container {
flex: 1;
height: 100%;
background-color: lightgrey;
background-color: @cp_app-bg;
display: flex;
min-height: 0;
}
#cp-app-oo-editor {
flex: 1;
height: 100%;
background-color: lightgrey;
background-color: @cp_app-bg;
display: flex;
flex-flow: column;
position: relative;
@ -67,7 +67,7 @@ body.cp-app-sheet, body.cp-app-oodoc, body.cp-app-ooslide {
bottom: 0;
right: 0;
left: 0;
background-color: rgba(255,255,255,0.5);
background-color: @cp_oo-offline-overlay;
}
#ooframe {
flex: 1;

2
www/debug/main.js
View File

@ -23,8 +23,6 @@ define([
UI: UI
};
var requireConfig = RequireConfig();
// Loaded in load #2
nThen(function (waitFor) {
$(waitFor());

27
www/pad/app-pad.less
View File

@ -7,7 +7,9 @@ body.cp-app-pad {
@bg-color: @colortheme_apps[pad],
);
@bg-color: #e3e3e3;
@bg-color: @cp_app-bg;
@toolbar-bg-active: contrast(@cp_toolbar-bg, darken(@cp_toolbar-bg, 10%), lighten(@cp_toolbar-bg, 10%));
display: flex;
flex-flow: column;
@ -29,7 +31,7 @@ body.cp-app-pad {
margin-top: 10px;
margin-left: 10px;
width: 200px;
color: @cryptpad_text_col;
color: @cp_pad-fg;
h2 {
font-size: 1.5rem;
}
@ -39,7 +41,7 @@ body.cp-app-pad {
white-space: nowrap;
text-overflow: ellipsis;
a {
color: @cryptpad_text_col;
color: @cp_pad-fg;
}
&.cp-pad-toc-2 {
margin-left: @toc-level-indent;
@ -51,7 +53,8 @@ body.cp-app-pad {
}
.cke_toolbox_main {
background-color: @colortheme_pad-toolbar-bg;
background-color: @cp_toolbar-bg;
color: @cp_toolbar-fg;
.cke_toolbar {
height: 28px;
padding: 2px 0;
@ -66,8 +69,22 @@ body.cp-app-pad {
.cke_button__print {
display: none !important;
}
.cke_button {
.cke_combo_on .cke_combo_button {
background-color: @toolbar-bg-active;
border-color: @toolbar-bg-active;
}
.cke_button, .cke_combo_button {
.tools_unselectable();
&.cke_button_on, &.cke_combo_button:hover, &.cke_button_off:hover {
background-color: @toolbar-bg-active;
border-color: @toolbar-bg-active;
}
.cke_combo_text {
color: @cp_toolbar-fg;
}
.cke_button_icon {
filter: @cp_pad-icon-filter;
}
}
}
.cke_wysiwyg_frame {

96
www/poll/app-poll.less
View File

@ -11,8 +11,8 @@
@poll-fore: #555;
@poll-th-bg: @colortheme_poll-th-bg;
@poll-th-fg: @colortheme_poll-th-fg;
@poll-th-bg: @cp_poll-th-bg;
@poll-th-fg: @cp_poll-th-fg;
@poll-th-user-bg: darken(@poll-th-bg, 10%);
@poll-editing: lighten(@poll-th-bg, 10%);
@poll-winner: darken(@poll-th-bg, 15%);
@ -20,22 +20,15 @@
@poll-td-bg: @poll-th-bg;
@poll-td-fg: @poll-th-fg;
@poll-help-bg: @colortheme_poll-help-bg;
@poll-uncommitted-cell: @cp_poll-uncommitted-bg;
@poll-uncommitted-text: @cp_poll-cell-fg;
@poll-cover-color: @cp_poll-cell-fg;
@poll-uncommitted-cell: #eee;
@poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%);
@poll-uncommitted-text: black;
@poll-placeholder: #fff;
@poll-border-color: #555;
@poll-cover-color: #000;
@poll-fg: #000;
@poll-option-yellow: #ff5;
@poll-option-gray: #ccc;
@poll-add-color: #fff;
@poll-add-bg: #777;
@poll-add-bg-alt: #444;
@poll-border-color: @cp_poll-border-color;
@poll-option-green: @cp_poll-yes;
@poll-option-red: @cp_poll-no;
@poll-option-yellow: @cp_poll-maybe;
@poll-option-gray: @cp_poll-unset;
.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
.top-left(@s: 5px) { border-top-left-radius: @s; }
@ -80,8 +73,6 @@
}
input[type="text"], textarea {
background-color: white;
color: black;
border: 0;
}
@ -92,8 +83,9 @@
// The placeholder color only seems to effect Safari when not set
// XXX placeholder in forms.less
input[type="text"][disabled]::placeholder {
color: @poll-placeholder;
color: @poll-th-fg;
opacity: 1;
}
@ -107,7 +99,6 @@
}
#cp-app-poll-table-container button {
border-radius: 0;
border: 0;
}
#cp-app-poll-create-user {
display: inline-flex;
@ -116,11 +107,6 @@
margin: 2px auto;
width: auto;
overflow: hidden;
color: @poll-add-color;
background: @poll-add-bg;
&:hover {
background: @poll-add-bg-alt;
}
}
#cp-app-poll-create-option {
order: 3;
@ -129,11 +115,6 @@
height: 20px;
margin: 2px;
padding: 0;
color: @poll-add-color;
background: @poll-add-bg;
&:hover {
background: @poll-add-bg-alt;
}
}
#cp-app-poll-table-scroll {
overflow-y: hidden;
@ -155,7 +136,7 @@
width: 80%;
min-height: 200px;
height: 200px;
border: 1px solid black;
border: 1px solid @cp_forms-border;
.CodeMirror-placeholder {
color: #777;
}
@ -169,9 +150,9 @@
min-width: 80%;
width: 80%;
min-height: 7em;
color: #000;
color: @poll-uncommitted-text;
border: 1px solid transparent;
background-color: #eeeeee;
background-color: @poll-uncommitted-cell;
font: @colortheme_app-font;
text-align: left;
media-tag > * {
@ -202,13 +183,6 @@
}
}
#cp-app-poll-help {
width: 100%;
margin: auto;
padding: 20px 10%;
background: @poll-help-bg;
}
// from cryptpad.less
#cp-app-poll-table-container {
@ -277,11 +251,11 @@
background-color: @poll-uncommitted-cell !important;
}
div.cp-app-poll-table-text-cell {
background-color: @poll-uncommitted-bg !important;
background-color: @poll-uncommitted-cell !important;
color: @poll-uncommitted-text !important;
}
text-align: center;
background-color: @poll-uncommitted-bg !important;
background-color: @poll-uncommitted-cell !important;
color: @poll-uncommitted-text !important;
}
tr {
@ -389,13 +363,13 @@
input[type="number"][value="0"] {
~ .cp-app-poll-table-cover {
background-color: @colortheme_cp-red;
background-color: @poll-option-red;
&:after { content: "✖"; }
}
}
input[type="number"][value="1"] {
~ .cp-app-poll-table-cover {
background-color: @colortheme_cp-green;
background-color: @poll-option-green;
&:after { content: "✔"; }
}
}
@ -530,35 +504,13 @@
margin-left: 10px;
}
thead {
tr {
th {
input[type="text"][disabled] {
background-color: transparent;
color: @poll-fore;
font-weight: bold;
}
.cp-app-poll-table-remove {
cursor: pointer;
font-size: 20px;
}
}
}
}
tbody {
tr {
td {
}
}
}
tfoot {
display: none;
}
}
}
#cp-app-poll-nocomments {
color: #999;
color: @cp_poll-hint;
text-align: center;
margin: 20px;
font: @colortheme_app-font;
@ -574,7 +526,7 @@
}
#cp-app-poll-comments-add {
input, textarea {
border: 1px solid black;
border: 1px solid @cp_forms-border;
width: 90%;
margin: 5px 5%;
}
@ -582,7 +534,7 @@
padding: 5px;
height: 26px;
&[disabled] {
background: #eee;
background: @poll-uncommitted-cell;
}
}
textarea {
@ -602,7 +554,7 @@
}
.cp-app-poll-comments-list-msg {
display: flex;
background: #eee;
background: @poll-uncommitted-cell;
padding: 5px 10px;
.cp-app-poll-comments-list-msg-text {
flex: 1;
@ -617,7 +569,7 @@
}
}
.cp-app-poll-comments-list-data {
background: #ddd;
background: @poll-option-gray;
padding: 5px 10px;
display: flex;
align-items: center;

4
www/poll/inner.js
View File

@ -1263,10 +1263,10 @@ define([
]),
h('div#cp-app-poll-table-container', [
h('div#cp-app-poll-table-scroll', [h('table')]),
h('button#cp-app-poll-create-user.btn.btn-secondary', {
h('button#cp-app-poll-create-user.btn.btn-default', {
title: Messages.poll_create_user
}, Messages.poll_commit),
h('button#cp-app-poll-create-option.btn.btn-secondary', {
h('button#cp-app-poll-create-option.btn.btn-default', {
title: Messages.poll_create_option
}, h('span.fa.fa-plus')),
]),

6
www/profile/app-profile.less
View File

@ -6,7 +6,7 @@
.framework_min_main();
.sidebar-layout_main();
@cp-profile-is-your-friend: #777;
@cp-profile-is-your-friend: @cp_profile-hint;
display: flex;
flex-flow: column;
@ -35,7 +35,7 @@
text-align: center;
height: 300px;
width: 300px;
border: 1px solid black;
border: 1px solid @cp_profile-border;
border-radius: 4px;
overflow: hidden;
position: relative;
@ -151,7 +151,7 @@
display: none;
}
.cp-app-profile-description-rendered {
border: 1px solid #DDD;
border: 1px solid @cp_profile-border;
padding: 0 15px;
&:empty {
display: none;

11
www/secureiframe/app-secure.less
View File

@ -56,15 +56,14 @@
line-height: 1em;
cursor: pointer;
background-color: @colortheme_modal-bg;
border: 1px solid @colortheme_logo-2;
color: @colortheme_logo-2;
background: @cp_drive-bg;
color: @cp_drive-fg;
border: 1px solid @cp_drive-icon-border;
transition: all 0.1s;
&:hover {
color: @colortheme_modal-fg;
background: @cp_drive-icon-hover;
}
align-items: center;
@ -72,7 +71,7 @@
img {
max-width: 100px;
max-height: 100px;
background: #fff;
background: @cp_drive-thumb-bg;
}
.cp-filepicker-content-element-name {

3
www/secureiframe/main.js
View File

@ -17,10 +17,13 @@ define([
$(waitFor());
}).nThen(function (waitFor) {
var lang = Messages._languageUsed;
var themeKey = 'CRYPTPAD_STORE|colortheme';
var req = {
cfg: requireConfig,
req: [ '/common/loading.js' ],
pfx: window.location.origin,
theme: localStorage[themeKey],
themeOS: localStorage[themeKey+'_default'],
lang: lang
};
window.rc = requireConfig;

79
www/settings/app-settings.less
View File

@ -48,12 +48,6 @@
width: @sidebar_button-width;
max-width: 100%;
margin: 0 !important;
background-color: @colortheme_sidebar-button-alt-bg;
border-color: #adadad;
color: black;
&:hover {
background-color: darken(@colortheme_sidebar-button-alt-bg, 15%);
}
}
}
.cp-sidebarlayout-input-block {
@ -108,79 +102,6 @@
margin-right: 5px;
}
}
.cp-settings-creation-owned, .cp-settings-creation-expire,
.cp-settings-creation-skip, .cp-settings-creation-template {
input[type="radio"] {
display: none;
&:checked {
& + label {
font-weight: bold;
background-color: @colortheme_logo-2;
cursor: default;
border: 1px solid @colortheme_logo-2;
color: @colortheme_loading-color;
&:hover {
background-color: @colortheme_logo-2;
}
}
}
}
input[type="radio"] + label {
.tools_unselectable();
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
padding: 5px;
margin: 0 20px;
color: @colortheme_logo-2;
border: 1px solid @colortheme_logo-2;
cursor: pointer;
&:hover {
background-color: lighten(@colortheme_logo-2, 35%);
}
}
.fa {
margin-left: 50px;
}
}
.cp-settings-creation-skipped {
display: none !important; // we have to override an inline style attribute
}
.cp-settings-creation-expire {
#cp-creation-expire-true {
display: none;
&:checked {
& + label {
height: 100px;
.cp-creation-expire-picker {
display: inline;
}
}
}
}
label[for="cp-creation-expire-true"] {
flex-wrap: wrap;
.cp-creation-expire-picker {
display: none;
}
input {
width: 70px;
padding: 0 5px;
}
select {
width: 100px;
}
input, select {
border: none;
height: 30px;
background: @colortheme_loading-bg;
color: @colortheme_loading-color;
border-radius: 3px;
}
}
}
}
}

21
www/slide/app-slide.less
View File

@ -10,7 +10,7 @@
@bg-color: @colortheme_apps[slide]
);
@slide-default-bg: #e3e3e3;
@slide-default-bg: @cp_app-bg;
// body
font-size: unset;
@ -71,13 +71,6 @@
overflow: hidden;
.CodeMirror {
resize: none;
//width: 100vw;
}
&.cp-app-slide-preview {
.CodeMirror {
//resize: horizontal;
//width: 50vw;
}
}
}
.cp-app-slide-shown {
@ -142,8 +135,6 @@
height: 28.125vw; // height:width ratio = 9/16 = .5625
max-height: ~"calc(100vh - 96px)";
max-width: ~"calc(16 / 9 * (100vh - 96px))";
//max-height: 100vh;
//max-width: 177.78vh; // 16/9 = 1.778
}
}
#cp-app-slide-modal-exit {
@ -180,7 +171,7 @@
flex-flow: column;
padding: 0.5em;
margin: auto;
border: 1px solid black;
border: 1px solid @cp_slide-fg;
height: @ratio*56.25vw;
width: @ratio*100vw;
page-break-after: always;
@ -227,8 +218,7 @@
/* Slide position (present mode) */
div#cp-app-slide-modal {
display: none;
background-color: black;
color: white;
background-color: @slide-default-bg;
.cp-app-slide-isempty {
display: flex;
@ -325,8 +315,6 @@
width: 100%;
height: 100vh;
display: none;
background-color: @slide-default-bg;
}
/* Slide content */
@ -433,6 +421,7 @@
}
pre.cp-slide-css-error {
color: white;
background: @cp_slide-css-error;
color: @cp_slide-fg;
}
}

2
www/support/app-support.less
View File

@ -26,7 +26,7 @@
.cp-support-language-list {
.cp-support-language {
margin-left: 5px;
background-color: rgba(0, 0, 0, 0.1);
background-color: @cp_token-bg;
padding: 0 5px;
}
}

46
www/teams/app-team.less
View File

@ -18,7 +18,9 @@
);
.sidebar-layout_main();
@roster-bg-color: #efefef;
@roster-bg-color: @cp_teams-card-bg;
@roster-bg-color-hover: contrast(@roster-bg-color, darken(@roster-bg-color, 5%), lighten(@roster-bg-color, 5%));
@roster-bg-color-hover2: contrast(@roster-bg-color, darken(@roster-bg-color, 10%), lighten(@roster-bg-color, 10%));
.export_main();
@ -34,7 +36,7 @@
}
}
div#cp-sidebarlayout-leftside {
background-color: #e0e0e0;
background-color: @cp_teams-leftside-bg;
}
div#cp-sidebarlayout-rightside.cp-rightside-drive {
padding: 0;
@ -48,7 +50,6 @@
.cp-app-contacts-input {
textarea {
border: 0px;
color: @cryptpad_text_col;
}
}
}
@ -110,17 +111,23 @@
background-color: @roster-bg-color;
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: column;
width: 300px;
max-width: 90%;
height: 400px;
padding: 20px;
height: 384px;
padding: 50px;
margin: 5px;
&.create, &:not(.empty) {
cursor: pointer;
&:hover {
background-color: @roster-bg-color-hover;
}
}
.cp-team-list-avatar {
.avatar_main(200px);
}
.cp-team-list-name {
flex: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
@ -134,6 +141,23 @@
text-align: center;
}
}
&.empty {
justify-content: unset;
.cp-team-list-name {
flex: unset;
font-size: 20px;
height: 150px;
}
}
.cp-team-list-team-create {
font-size: 25px;
display: flex;
align-items: center;
flex-flow: column;
i {
font-size: 40px;
}
}
.cp-team-list-open {
width: 100%;
}
@ -165,7 +189,7 @@
max-width: 500px;
background-color: @roster-bg-color;
&:hover {
background-color: darken(@roster-bg-color, 5%);
background-color: @roster-bg-color-hover;
}
.cp-avatar {
margin-right: 10px;
@ -196,7 +220,7 @@
align-items: center;
cursor: pointer;
&:hover {
background-color: darken(@roster-bg-color, 10%);
background-color: @roster-bg-color-hover2;
}
}
}
@ -217,8 +241,8 @@
}
}
.cp-teams-invite-message {
background-color: fade(@colortheme_logo-2, 25%);
color: @cryptpad_text_col;
background-color: @cp_teams-invite-bg;
color: @cp_teams-invite-fg;
resize: none;
width: 100%;
padding: 12px;
@ -243,7 +267,7 @@
margin-top: 30px;
}
tr:nth-child(even) {
background-color: fade(@colortheme_modal-dim, 25%);
background-color: @cp_teams-roster-odd;
}
}
p {

37
www/teams/inner.js
View File

@ -132,6 +132,9 @@ define([
APP.teamEdPublic = null;
APP.drive = null;
APP.cryptor = null;
APP.toolbar.$bottomR.empty();
APP.toolbar.$bottomM.empty();
APP.toolbar.$bottomL.empty();
APP.buildUI(common);
if (APP.usageBar) {
APP.usageBar.stop();
@ -403,6 +406,12 @@ define([
});
});
};
var canCreateTeams = function (teams) {
var owned = Object.keys(teams || {}).filter(function (id) {
return teams[id].owner;
}).length;
return Constants.MAX_TEAMS_OWNED - owned;
};
var refreshList = function (common, cb) {
var content = [];
APP.module.execCommand('LIST_TEAMS', null, function (obj) {
@ -412,6 +421,7 @@ define([
var list = [];
var keys = Object.keys(obj).slice(0,MAX_TEAMS_SLOTS);
var slots = '('+Math.min(keys.length, MAX_TEAMS_SLOTS)+'/'+MAX_TEAMS_SLOTS+')';
var createSlots = canCreateTeams(obj);
for (var i = keys.length; i < MAX_TEAMS_SLOTS; i++) {
obj[i] = {
empty: true
@ -421,8 +431,10 @@ define([
content.push(h('h3', Messages.team_listTitle + ' ' + slots));
console.error(createSlots, Constants);
APP.teams = {};
var created = 0;
keys.forEach(function (id) {
if (!obj[id].empty) {
APP.teams[id] = {
@ -431,23 +443,34 @@ define([
}
var team = obj[id];
var createBtn;
var createCls = '';
if (team.empty && created < createSlots) {
createBtn = h('div.cp-team-list-team-create', [
h('i.fa.fa-plus-circle'),
h('span', Messages.team_cat_create)
]);
createCls = '.create';
created++;
}
if (team.empty) {
list.push(h('div.cp-team-list-team.empty', [
h('span.cp-team-list-name.empty', Messages.team_listSlot)
list.push(h('div.cp-team-list-team.empty'+createCls, [
h('span.cp-team-list-name.empty', Messages.team_listSlot),
createBtn
]));
return;
}
var btn;
var avatar = h('span.cp-avatar');
list.push(h('div.cp-team-list-team', [
var teamDiv = h('div.cp-team-list-team', [
h('span.cp-team-list-avatar', avatar),
h('span.cp-team-list-name', {
title: team.metadata.name
}, team.metadata.name),
btn = h('button.cp-team-list-open.btn.btn-primary', Messages.team_listLoad)
]));
]);
list.push(teamDiv);
common.displayAvatar($(avatar), team.metadata.avatar, team.metadata.name);
$(btn).click(function () {
$(teamDiv).click(function () {
if (team.error) {
UI.warn(Messages.error); // FIXME better error message - roster bug, can't load the team for now
return;

13
www/whiteboard/app-whiteboard.less
View File

@ -33,6 +33,7 @@
display: flex;
overflow: auto;
flex-flow: column;
background: @cp_whiteboard-board-bg;
}
// created in the html
@ -45,12 +46,11 @@
.cp-app-whiteboard-canvas-container {
width: 100%;
margin: auto;
background: white;
flex: 1;
min-height: 0;
& > canvas {
width: 100%;
border: 1px solid black;
border: 1px solid @cp_whiteboard-board-border;
}
}
@ -66,8 +66,9 @@
justify-content: center;
position: relative;
border-top: 1px solid black;
background: white;
border-top: 1px solid @cp_whiteboard-board-border;
background: @cp_whiteboard-bg;
color: @cp_whiteboard-fg;
padding: 10px;
@ -145,7 +146,7 @@
#cp-app-whiteboard-colors {
.middle;
z-index: 100;
background: white;
background: @cp_whiteboard-bg;
display: flex;
flex-wrap: wrap;
max-width: 320px;
@ -155,7 +156,7 @@
width: 30px;
display: block;
margin: 5px;
border: 1px solid #bbb;
border: 1px solid @cp_whiteboard-board-border;
vertical-align: top;
border-radius: 50%;
cursor: pointer;

2
www/whiteboard/inner.js
View File

@ -88,7 +88,7 @@ define([
ctx.moveTo(size/2, size); ctx.lineTo(size/2, size-10);
ctx.moveTo(0, size/2); ctx.lineTo(10, size/2);
ctx.moveTo(size, size/2); ctx.lineTo(size-10, size/2);
ctx.strokeStyle = '#000000';
ctx.strokeStyle = window.CryptPad_theme === 'dark' ? '#FFFFFF' : '#000000';
ctx.stroke();
var img = ccanvas.toDataURL("image/png");