Merge branch '4.15-candidate' of github.com:xwiki-labs/cryptpad into 4.15-candidate

This commit is contained in:
ansuz 2022-05-10 13:09:24 +05:30
commit 1b2c6de355
21 changed files with 197 additions and 129 deletions

View File

@ -74,22 +74,6 @@ define([
return select;
};
/* // XXX remove ?
var footerCol = function (title, L, n) {
n = n || 3;
return h('div.col-sm-' + n, [
h('ul.list-unstyled', [
h('li.footer-title', {
'data-localization': title,
}, Msg[title])
].concat(L.map(function (l) {
return h('li', [ l ]);
}))
)
]);
};
*/
var footLink = function (ref, loc, text, icon) {
if (!ref) { return; }
var attrs = {
@ -182,20 +166,20 @@ define([
}),
h('span.logo-font', 'CryptPad')
]),
h('span.cp-footer-version', 'v' + Pages.versionString)
]),
h('div.cp-footer-center', [
h('div.cp-logo-btns', [
footLink('https://cryptpad.org', null, Msg.footer_website, 'link'),
footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate', null, 'money') // XXX DB: add OpenCollective icon
])
]),
h('div.cp-footer-center', [
h('div.cp-footer-right', [
h('div.cp-footer-language', [
h('i.fa.fa-language', {'aria-hidden': 'true'}),
languageSelector()
])
]),
h('div.cp-footer-right', [
h('span.cp-footer-version', 'Version: ' + Pages.versionString) // XXX DB: translate 'Version' ?
])
]);
};
@ -248,18 +232,15 @@ define([
var isHome = ['/', '/index.html'].includes(window.location.pathname);
var homeLink = h('a.nav-item.nav-link.cp-back-home' /* .navbar-brand */, { href: '/index.html' }, [
h('i.fa.fa-arrow-left'),
h('img', {
src: '/customize/CryptPad_logo.svg',
"aria-hidden": true,
alt: ''
}),
Msg.homePage
]);
return h('nav.navbar.navbar-expand-lg',
// XXX DB add link back to index.html on other pages
// h('a.navbar-brand', { href: '/index.html'}, [
// h('img', {
// src: '/customize/CryptPad_logo.svg?',
// 'aria-hidden': true,
// alt: ''
// }), 'CryptPad'
// ]),
// button, // XXX collapse button
// add .collapse.navbar-collapse.justify-content-end#menuCollapse to div below to enable collapse button
[

View File

@ -15,6 +15,9 @@ define([
].indexOf(Config.adminEmail) === -1;
var adminMailbox = Config.supportMailbox && LocalStore.isLoggedIn();
// XXX: existing key to update
Msg.contact_admin = "Contact the administrators for: {0}"; // XXX DB: add instance title
return h('div#cp-main', [
Pages.infopageTopbar(),
h('div.container.cp-container', [
@ -24,7 +27,7 @@ define([
(adminEmail || adminMailbox) ? h('div.row.cp-iconCont.align-items-center', [
h('div.col-12',
Pages.setHTML(h('h2.text-center'), Msg.contact_admin),
h('p', Msg.contact_adminHint)
h('p.center', Msg.contact_adminHint)
),
adminEmail ? h('div.col-12.col-sm-6.col-md-3.col-lg-3',
h('a.card', {href : "mailto:"+Config.adminEmail},
@ -58,51 +61,10 @@ define([
h('div.row.cp-iconCont.align-items-center', [
h('div.col-12',
Pages.setHTML(h('h2.text-center'), Msg.contact_dev),
h('p', Msg.contact_devHint)
h('p.center', Msg.contact_devHint)
),
h('div.col-12.col-sm-6.col-md-3.col-lg-3',
h('a.card', {href : "https://twitter.com/cryptpad"},
h('div.card-body',
h('p', [
// this is not a typo. adblock plus blocks images with src *twitter* apparently
h('img', {
src: '/customize/images/twiitter.svg',
alt: '',
'aria-hidden': 'true'}),
'Twitter'
])
)
)
),
h('div.col-12.col-sm-6.col-md-3.col-lg-3',
h('a.card', {href : "https://social.weho.st/@cryptpad"},
h('div.card-body',
h('p', [
h('img', {
src: '/customize/images/mastodon.svg',
alt: '',
'aria-hidden': 'true'
}),
'Mastodon'
])
)
)
),
h('div.col-12.col-sm-6.col-md-3.col-lg-3',
h('a.card', {href : "https://github.com/xwiki-labs/cryptpad/issues/"},
h('div.card-body',
h('p', [
h('img', {
src: '/customize/images/github.svg',
alt: '',
'aria-hidden': 'true'}),
Msg.contact_bug || 'Bug report'
])
)
)
),
h('div.col-12.col-sm-6.col-md-3.col-lg-3',
h('a.card', {href : "https://matrix.to/#/#cryptpad:matrix.xwiki.com"},
h('div',
h('a.card-small', {href : "https://matrix.to/#/#cryptpad:matrix.xwiki.com"},
h('div.card-body',
h('p', [
h('img', {
@ -115,8 +77,49 @@ define([
)
)
),
h('div.col-12.col-sm-6.col-md-3.col-lg-3',
h('a.card', {href : "mailto:" + developerEmail},
h('div',
h('a.card-small', {href : "https://social.weho.st/@cryptpad"},
h('div.card-body',
h('p', [
h('img', {
src: '/customize/images/mastodon.svg',
alt: '',
'aria-hidden': 'true'
}),
'Mastodon'
])
)
)
),
h('div',
h('a.card-small', {href : "https://twitter.com/cryptpad"},
h('div.card-body',
h('p', [
// this is not a typo. adblock plus blocks images with src *twitter* apparently
h('img', {
src: '/customize/images/twiitter.svg',
alt: '',
'aria-hidden': 'true'}),
'Twitter'
])
)
)
),
h('div',
h('a.card-small', {href : "https://github.com/xwiki-labs/cryptpad/issues/"},
h('div.card-body',
h('p', [
h('img', {
src: '/customize/images/github.svg',
alt: '',
'aria-hidden': 'true'}),
Msg.contact_bug || 'Bug report'
])
)
)
),
h('div',
h('a.card-small', {href : "mailto:" + developerEmail},
h('div.card-body',
h('p', [
h('img', {

View File

@ -112,7 +112,6 @@ define([
Msg.terms = Msg.footer_tos; //"Terms of Service"; // XXX
Msg.home_location = "Encrypted data is hosted in {0}"; // XXX
// XXX DB: this may be wrong, pasted over form pages.js
var imprintLink = fastLink('imprint');
var privacyLink = fastLink('privacy');
var termsLink = fastLink('terms');
@ -130,9 +129,9 @@ define([
// instance title
var instanceTitle = h('h1.cp-instance-title', Pages.Instance.name);
// XXX DB: How does TextFit work?!
setTimeout(function () {
TextFit(instanceTitle, {minFontSize: 13, maxFontSize: 48});
});
// setTimeout(function () {
// TextFit(instanceTitle, {minFontSize: 13, maxFontSize: 48}); // XXX DB remove?
// });
// instance location
var locationBlock;
@ -145,15 +144,16 @@ define([
locationBlock = h('div', h('br'));
}
Msg.home_morestorage = 'For more storage space, and to support the project:'; // XXX
Msg.home_morestorage = 'For more storage space:'; // XXX
var subButton = function () {
if (Pages.areSubscriptionsAllowed()) {
var sub = h('div.cp-sub-prompt', [
h('span', Msg.home_morestorage),
h('br'),
h('button', Msg.features_f_subscribe),
h('button', Msg.footer_donate)
h('a', {href:"/accounts/"}, h('button', [
h('i.fa.fa-ticket'),
Msg.features_f_subscribe
]))
]);
return sub;
} else {
@ -168,7 +168,7 @@ define([
notice,
h('div.container.cp-container', [
h('div.row.cp-home-hero', [
h('div.cp-title.col-md-6', [
h('div.cp-title.col-lg-6', [
h('img', {
src: '/customize/CryptPad_logo.svg?' + urlArgs,
'aria-hidden': 'true',
@ -177,11 +177,14 @@ define([
instanceTitle,
Pages.setHTML(h('span.tag-line'), Pages.Instance.description),
locationBlock,
termsLink,
privacyLink,
imprintLink
h('div.cp-instance-links', [
termsLink,
privacyLink,
imprintLink,
h('a', {href:"/contact.html"}, Msg.contact)
])
]),
h('div.col-md-6', [
h('div.cp-apps.col-lg-6', [
h('div.cp-app-grid', [
h('span.cp-app-new', [
h('i.fa.fa-plus'),

View File

@ -5,7 +5,7 @@ define([
'/customize/pages.js',
'/api/config',
], function (h, UI, Msg, Pages, Config) {
Msg.login_instance = "Connect to your account on {0}"; // XXX insert instance name
Msg.login_instance = "Connect to your account on {0}"; // XXX DB highlight instance name?
return function () {
document.title = Msg.login_login;
return [h('div#cp-main', [

View File

@ -48,6 +48,7 @@
@cryptpad_color_black: #000;
@cryptpad_text_col: @cryptpad_color_grey_200;
@cryptpad_text_col_inv: @cryptpad_color_grey_900;
@cryptpad_color_blue: #326599; // former logo-1
@cryptpad_color_light_blue: #00b7d8;
@ -174,7 +175,7 @@
@cp_sidebar-right-bg: @cryptpad_color_grey_900;
@cp_sidebar-right-fg: @cryptpad_text_col;
@cp_sidebar-left-active: @cryptpad_color_grey_400;
@cp_sidebar-left-active-fg: @cryptpad_color_grey_900; // XXX create text_col_inv ?
@cp_sidebar-left-active-fg: @cryptpad_color_grey_900;
@cp_sidebar-hint: fade(@cryptpad_text_col, 80%);
// Drive
@ -192,9 +193,9 @@
@cp_drive-droppable-bg: @cryptpad_color_grey_700;
@cp_drive-droppable-fg: @cryptpad_text_col;
@cp_drive-infobox-bg: @cryptpad_color_brand_fadest;
@cp_drive-infobox-fg: @cryptpad_text_col;
@cp_drive-warnbox-bg: @cryptpad_color_warn_red;
@cp_drive-warnbox-fg: @cryptpad_text_col;
@cp_drive-infobox-fg: @cryptpad_color_brand_300;
@cp_drive-warnbox-bg: @cryptpad_color_red_fader;
@cp_drive-warnbox-fg: @cryptpad_color_light_red;
@cp_drive-tree-branch: @cryptpad_text_col;
// Contextmenu

View File

@ -48,6 +48,7 @@
@cryptpad_color_black: #000;
@cryptpad_text_col:@cryptpad_color_grey_800;
@cryptpad_text_col_inv: @cryptpad_color_grey_50;
@cryptpad_color_blue: #326599; // former logo-1
@cryptpad_color_light_blue: #00b7d8;
@ -192,8 +193,8 @@
@cp_drive-droppable-fg: @cryptpad_text_col;
@cp_drive-infobox-bg: @cryptpad_color_brand_fadest;
@cp_drive-infobox-fg: @cryptpad_text_col;
@cp_drive-warnbox-bg: @cryptpad_color_warn_red;
@cp_drive-warnbox-fg: @cryptpad_text_col;
@cp_drive-warnbox-bg: @cryptpad_color_light_red_fade;
@cp_drive-warnbox-fg: darken(@cp_alerts-danger-fg, 55%);
@cp_drive-tree-branch: @cryptpad_text_col;
// Contextmenu
@ -323,7 +324,7 @@
@cp_usergrid-selected-fg: @cryptpad_color_white;
// Other
@cp_shadow-color: fade(@cryptpad_color_black, 30%);
@cp_shadow-color: fade(@cryptpad_color_black, 20%);
// Apps
@cp_app-bg: @cryptpad_color_white;

View File

@ -329,7 +329,7 @@
max-height: 159px;
align-items: center;
.cp-creation-template-element {
box-shadow: 0px 0px 5px 1px #00000030; // XXX
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
width: 300px;
max-width: calc(100% - 10px);
padding: 5px;

View File

@ -300,7 +300,6 @@
display: none;
}
input {
//width: ~"calc(100% - 30px)";
flex: 1;
min-width: 0;
padding: 0 10px;
@ -310,11 +309,8 @@
& > span.cp-app-drive-element-row {
overflow: hidden;
text-overflow: ellipsis;
//min-width: ~"calc(100% + 5px)";
.leftside-menu-category_main();
//width: ~"calc(100% + 5px)"; // XXX remove
margin: 0;
//margin-bottom: -6px;
display: flex;
align-items: center;
cursor: pointer;
@ -344,7 +340,7 @@
margin-top: 10px;
background-color: @cp_sidebar-left-item-bg;
border-radius: @variables_radius;
box-shadow: 0px 0px 5px 1px #00000030; // XXX
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
.cp-app-drive-tree-root {
.fa-trash-o {
padding-left: 2px;
@ -385,7 +381,7 @@
}
}
.cp-app-drive-tree-docs {
box-shadow: 0px 0px 5px 1px #00000030; // XXX
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
padding: 2px;
.cp-app-drive-element-row {
@ -490,6 +486,13 @@
font-size: 1.6rem;
}
}
&.cp-app-drive-readonly { // applied to offline drive (not read-only shared folders)
#cp-app-drive-content-folder {
opacity: 0.5;
}
// background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
}
}
#cp-app-drive-content {
box-sizing: border-box;
@ -507,8 +510,8 @@
position: absolute;
z-index: 50;
}
&.cp-app-drive-readonly { // XXX DB find new appearance for disabled/read-only drive?
background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
&.cp-app-drive-readonly { // XXX DB never applied?
// background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
}
h1 {
padding-left: 10px;

View File

@ -163,7 +163,6 @@
height: 1px;
background: @cp_dropdown-bg-active;
border: 0 !important;
//border-top: 1px solid rgba(0,0,0,.1) !important; // XXX
& + hr {
display: none;
}

View File

@ -295,9 +295,11 @@
font-weight: bold;
text-transform: uppercase;
cursor: default;
border-radius: @variables_radius;
&.cp-banner-danger {
background-color: @cp_drive-warnbox-bg;
color: @cp_drive-warnbox-fg;
border: 1px solid @cp_drive-warnbox-fg;
}
&.cp-banner-info {
background-color: @cp_drive-infobox-bg;

View File

@ -14,7 +14,7 @@
}
}
.cp-shadow() {
box-shadow: 0px 0px 25px 0px @cp_shadow-color;
box-shadow: 0px 0px 20px 0px @cp_shadow-color;
}
.infopages_main () {
@ -153,7 +153,7 @@ body.html {
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
.cp-footer-left, .cp-footer-right {
.cp-footer-left, .cp-footer-center, .cp-footer-right {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@ -185,7 +185,8 @@ body.html {
.cp-logo-btns {
padding: 10px;
a {
background-color: @cp_static-card-bg;
background-color: @cryptpad_color_link;
color: @cryptpad_text_col_inv;
border-radius: @infopages-radius;
padding: 0.5em 0.7em;
white-space: nowrap;
@ -194,7 +195,9 @@ body.html {
margin-right: 5px;
}
&:hover {
background-color: @cp_static-card-bg;
color: @cryptpad_text_col;
text-decoration: none;
}
}
@ -266,6 +269,10 @@ body.html {
margin: 5px;
color: @cp_static-link;
display: inline-block;
img {
max-height: 30px;
margin-right: 10px;
}
&.cp-back-home {
margin-right: auto;
}

View File

@ -17,7 +17,7 @@
min-width: 20px;
}
&:hover {
background: fade(@cryptpad_text_col, 10%);
background: @cryptpad_text_col_inv;
}
&.cp-leftside-active {
background: @cp_sidebar-left-active;

View File

@ -31,7 +31,7 @@
display: flex;
align-items: center;
.leftside-menu-category_main();
box-shadow: 0px 0px 5px 1px #00000030; // XXX
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
}
}
&.cp-leftside-narrow {

View File

@ -1,4 +1,5 @@
@import (reference) './colortheme-all.less';
@import (reference) './variables.less';
.tippy_main() {
--LessLoader_require: LessLoader_currentFile();
@ -6,7 +7,7 @@
& {
.tippy-tooltip.cryptpad-theme {
background-color: @cp_tooltip-bg;
border-radius: 0px;
border-radius: @variables_radius;
color: @cp_tooltip-fg;
overflow-wrap: break-word;
[x-circle] {

View File

@ -15,10 +15,7 @@
@bg-color: @colortheme_apps[default], // color of the toolbar background
) {
@toolbar-bg-color: @bg-color;
// XXX Todo: clean up unused variables
// XXX: check contrasts of app colors used as btn background
// @desat-color: desaturate(@bg-color, 20%);
// @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%));
@toolbar-bg-color-light: lighten(@bg-color, 30%);
@toolbar-bg-color-fade: fade(@toolbar-bg-color-light, 80%);
};
@ -32,7 +29,6 @@
--toolbar-bg-color: @toolbar-bg-color;
--toolbar-bg-color-fade: @toolbar-bg-color-fade;
--toolbar-bg-color-light: @toolbar-bg-color-light;
// --toolbar-bg-color-active: @toolbar-bg-color-active;
.help_main();
.notifications_main();

View File

@ -11,14 +11,21 @@
.cp-container {
.cp-iconCont {
text-align: center;
&.align-items-center {
justify-content: center;
}
h4 {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
p.center {
text-align: center;
}
div {
.card {
a.card {
.cp-shadow();
border-radius: 0;
border-radius: @infopages-radius-L;
margin-bottom: 1em;
border: 0;
background-color: @cp_static-card-bg;
@ -53,6 +60,34 @@
font-size: 1.3em;
}
}
a.card-small {
.cp-shadow();
border-radius: @infopages-radius-L;
display: inline-block;
background-color: @cp_static-card-bg;
margin: 15px;
.card-body {
padding: 10px;
p {
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
margin: 0;
height: 100%;
font-size: 1.3em;
}
}
img {
width: 40px;
margin: 0 10px 0 0;
}
&:hover, &:focus {
text-decoration: none;
color: @cryptpad_text_col;
background-color: @cryptpad_color_brand_fadest;
}
}
}
}
}

View File

@ -23,6 +23,7 @@
flex-flow: column;
justify-content: space-around;
justify-content: space-evenly;
max-width: 1000vh;
}
}
body {
@ -46,18 +47,22 @@
width: 100%;
align-self: center;
align-items: center;
justify-content: flex-end;
@media screen and (max-width: 990px) {
justify-content: center;
}
}
.cp-title {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 1.5em;
margin: 0 auto;
flex-grow: 1; // XXX DB: no effect
img {
max-width: 200px;
margin-bottom: 1.5em;
}
margin-left: 0;
h1 {
font-family: "IBM Plex Mono";
font-weight: 500;
@ -75,6 +80,12 @@
margin-right: 5px;
}
}
.cp-instance-links {
padding: 1.3rem;
a {
margin: 1.3rem;
}
}
}
@callout-padding: 15px;
@ -82,6 +93,13 @@
text-decoration: none;
}
.cp-apps {
max-width: 575px;
@media screen and (max-width: 990px) {
align-self: baseline;
}
}
.cp-app-grid {
background-color: @cp_alertify-bg;
border-radius: @infopages-radius-L;
@ -103,7 +121,7 @@
a {
margin: 10px;
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 990px) {
margin-top: 40px;
}
}
@ -202,7 +220,7 @@
width: fit-content;
padding: 10px;
border-radius: @infopages-radius-L;
margin-right: 15px;
margin-right: 25px;
&:visited {
color: @cryptpad_text_col;
}
@ -216,9 +234,24 @@
}
}
.cp-sub-prompt {
* {
display: block;
}
button {
background-color: @cryptpad_color_link;
color: @cryptpad_text_col_inv;
font-size: 1.4rem;
margin-top: 10px;
margin: 10px 0;
border-radius: @infopages-radius-L;
padding: 0.75rem;
i {
display: inline;
margin-right: 10px;
}
&:hover, &:focus {
background-color: @cp_static-card-bg;
color: @cryptpad_text_col;
}
}
}
}

View File

@ -204,7 +204,8 @@ define(function() {
admin: 'fa-gears',
settings: 'fa-gear',
profile: 'fa-user-circle',
support: 'fa-life-ring'
support: 'fa-life-ring',
accounts: 'fa-ticket'
};
// Ability to create owned pads and expiring pads through a new pad creation screen.

View File

@ -36,7 +36,7 @@
display: flex;
flex-flow: column;
border-radius: @variables_radius;
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
}
color: @cp_kanban-fg;
button {
@ -186,7 +186,7 @@
border-radius: @variables_radius;
flex-wrap: wrap;
background: @cp_kanban-item-bg;
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB make this a variable?
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
.tools_unselectable();
touch-action: none;
cursor: move;

View File

@ -27,10 +27,11 @@
#cp-filepicker-dialog {
display: none;
.cp-modal {
border-radius: @variables_radius_L;
.cp-filepicker-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-content: flex-start;
overflow-y: auto;
}
@ -49,6 +50,7 @@
//height: 1em;
padding: 10px;
margin: 5px;
border-radius: @variables_radius;
display: inline-flex;
flex-flow: column;

View File

@ -216,9 +216,9 @@
height: 50px;
display: inline-block;
border-radius: @variables_radius;
background-color: red; // XXX hard coded colors
background-color: @cryptpad_color_red;
&.online {
background-color: green;
background-color: @cryptpad_color_green;
}
}
.cp-team-member-name {