diff --git a/customize.dist/fonts/cptools/fonts/cptools.eot b/customize.dist/fonts/cptools/fonts/cptools.eot index dbfc79bf7..ca9840931 100644 Binary files a/customize.dist/fonts/cptools/fonts/cptools.eot and b/customize.dist/fonts/cptools/fonts/cptools.eot differ diff --git a/customize.dist/fonts/cptools/fonts/cptools.svg b/customize.dist/fonts/cptools/fonts/cptools.svg index 29461075f..3549b2368 100644 --- a/customize.dist/fonts/cptools/fonts/cptools.svg +++ b/customize.dist/fonts/cptools/fonts/cptools.svg @@ -7,7 +7,7 @@ - + @@ -39,4 +39,5 @@ + \ No newline at end of file diff --git a/customize.dist/fonts/cptools/fonts/cptools.ttf b/customize.dist/fonts/cptools/fonts/cptools.ttf index 41ae6ef37..cf9dbd082 100644 Binary files a/customize.dist/fonts/cptools/fonts/cptools.ttf and b/customize.dist/fonts/cptools/fonts/cptools.ttf differ diff --git a/customize.dist/fonts/cptools/fonts/cptools.woff b/customize.dist/fonts/cptools/fonts/cptools.woff index dca533fcd..4f0e16203 100644 Binary files a/customize.dist/fonts/cptools/fonts/cptools.woff and b/customize.dist/fonts/cptools/fonts/cptools.woff differ diff --git a/customize.dist/fonts/cptools/style.css b/customize.dist/fonts/cptools/style.css index 7b3227453..fa9f7b0dc 100644 --- a/customize.dist/fonts/cptools/style.css +++ b/customize.dist/fonts/cptools/style.css @@ -1,10 +1,10 @@ @font-face { font-family: 'cptools'; - src: url('fonts/cptools.eot?6tk5ck'); - src: url('fonts/cptools.eot?6tk5ck#iefix') format('embedded-opentype'), - url('fonts/cptools.ttf?6tk5ck') format('truetype'), - url('fonts/cptools.woff?6tk5ck') format('woff'), - url('fonts/cptools.svg?6tk5ck#cptools') format('svg'); + src: url('fonts/cptools.eot?pmxg4b'); + src: url('fonts/cptools.eot?pmxg4b#iefix') format('embedded-opentype'), + url('fonts/cptools.ttf?pmxg4b') format('truetype'), + url('fonts/cptools.woff?pmxg4b') format('woff'), + url('fonts/cptools.svg?pmxg4b#cptools') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -26,6 +26,9 @@ -moz-osx-font-smoothing: grayscale; } +.cptools-drive:before { + content: "\e920"; +} .cptools-form-conditional:before { content: "\e900"; } diff --git a/customize.dist/images/apps-preview.png b/customize.dist/images/apps-preview.png deleted file mode 100644 index 1ef33fede..000000000 Binary files a/customize.dist/images/apps-preview.png and /dev/null differ diff --git a/customize.dist/images/collaboration.png b/customize.dist/images/collaboration.png deleted file mode 100644 index decbb9b58..000000000 Binary files a/customize.dist/images/collaboration.png and /dev/null differ diff --git a/customize.dist/images/drive-grid.png b/customize.dist/images/drive-grid.png deleted file mode 100644 index b9b55157e..000000000 Binary files a/customize.dist/images/drive-grid.png and /dev/null differ diff --git a/customize.dist/images/logo_XWiki.svg b/customize.dist/images/logo_XWiki.svg deleted file mode 100644 index 270d03e63..000000000 --- a/customize.dist/images/logo_XWiki.svg +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - image/svg+xml - - Logo_XWiki - - - - - - - - Logo_XWiki - - - - - - - - - - diff --git a/customize.dist/images/logo_bpifrance.svg b/customize.dist/images/logo_bpifrance.svg deleted file mode 100644 index 4ea9e36a8..000000000 --- a/customize.dist/images/logo_bpifrance.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - logo-footer - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/customize.dist/images/logo_moss.jpg b/customize.dist/images/logo_moss.jpg deleted file mode 100644 index 06c3a06dd..000000000 Binary files a/customize.dist/images/logo_moss.jpg and /dev/null differ diff --git a/customize.dist/images/logo_ngi.png b/customize.dist/images/logo_ngi.png deleted file mode 100644 index 15c6f24fa..000000000 Binary files a/customize.dist/images/logo_ngi.png and /dev/null differ diff --git a/customize.dist/images/logo_ngi_dapsi.png b/customize.dist/images/logo_ngi_dapsi.png deleted file mode 100644 index efd52c482..000000000 Binary files a/customize.dist/images/logo_ngi_dapsi.png and /dev/null differ diff --git a/customize.dist/images/logo_ngi_trust.png b/customize.dist/images/logo_ngi_trust.png deleted file mode 100644 index 79db383d0..000000000 Binary files a/customize.dist/images/logo_ngi_trust.png and /dev/null differ diff --git a/customize.dist/images/logo_nlnet.svg b/customize.dist/images/logo_nlnet.svg deleted file mode 100644 index 1d1be5ecf..000000000 --- a/customize.dist/images/logo_nlnet.svg +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/customize.dist/maintenance.html b/customize.dist/maintenance.html deleted file mode 100644 index 0f224d69b..000000000 --- a/customize.dist/maintenance.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - CryptPad: Collaboration suite, encrypted and open-source - - - - - - - -

Maintenance

-

We are currently upgrading CryptPad. We will be back shortly!

- diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 3bc2c1f22..706de73d6 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -5,7 +5,8 @@ define([ '/customize/messages.js', 'jquery', '/api/config', -], function (h, Language, AppConfig, Msg, $, ApiConfig) { + 'optional!/api/instance', +], function (h, Language, AppConfig, Msg, $, ApiConfig, Instance) { var Pages = {}; Pages.setHTML = function (e, html) { @@ -73,25 +74,12 @@ define([ return select; }; - 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) { + var footLink = function (ref, loc, text, icon) { if (!ref) { return; } var attrs = { href: ref, }; + var iconName = ''; if (!/^\//.test(ref)) { attrs.target = '_blank'; attrs.rel = 'noopener noreferrer'; @@ -100,30 +88,29 @@ define([ attrs['data-localization'] = loc; text = Msg[loc]; } - return h('a', attrs, text); + if (icon) { + iconName = 'i.fa.fa-' + icon; + icon = h(iconName); + } + return h('a', attrs, [icon, text]); }; - Pages.versionString = "v4.14.1"; + Pages.versionString = "5.0.0"; var customURLs = Pages.customURLs = {}; (function () { var defaultURLs = { - //imprint: '/imprint.html', - //privacy: '/privacy.html', - terms: '/terms.html', - //roadmap: '/roadmap.html', source: 'https://github.com/xwiki-labs/cryptpad', }; var l = Msg._getLanguage(); ['imprint', 'privacy', 'terms', 'roadmap', 'source'].forEach(function (k) { var value = AppConfig[k]; + //console.log('links', k, value); if (value === false) { return; } if (value === true) { customURLs[k] = defaultURLs[k]; return; } - - if (!value) { return; } if (typeof(value) === 'string') { customURLs[k] = value; return; @@ -134,6 +121,21 @@ define([ }); var value = AppConfig.hostDescription; Pages.hostDescription = (value && (value[l] || value.default)) || Msg.home_host; + + Pages.Instance = {}; + Object.keys(Instance).forEach(function (k) { + var value = Instance[k]; + Pages.Instance[k] = value[l] || value.default || undefined; + }); + + var name; + try { + name = Pages.Instance.name || new URL('/', ApiConfig.httpUnsafeOrigin).host; + } catch (err) { + name = 'CryptPad'; + } + Pages.Instance.name = name; + Pages.Instance.description = Pages.Instance.description || Msg.main_catch_phrase; }()); // used for the about menu @@ -144,53 +146,38 @@ define([ Pages.docsLink = footLink('https://docs.cryptpad.fr', 'docs_link'); Pages.roadmapLink = footLink(customURLs.roadmap, 'footer_roadmap'); - Pages.infopageFooter = function () { - var legalFooter; - // only display the legal part of the footer if it has content - if (Pages.termsLink || Pages.privacyLink || Pages.imprintLink) { - legalFooter = footerCol('footer_legal', [ - Pages.termsLink, - Pages.privacyLink, - Pages.imprintLink, - ]); + Pages.infopageFooter = function () { + var donateButton; + if (!ApiConfig.removeDonateButton) { + donateButton = footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate', null, 'money'); // XXX DB: add OpenCollective icon // XXX } - var n = legalFooter ? 3: 4; - - return h('footer', [ - h('div.container', [ - h('div.row', [ - h('div.col-sm-' + n, [ - h('div.cp-logo-foot', [ - h('img', { - src: '/customize/CryptPad_logo.svg', - "aria-hidden": true, - alt: '' - }), - h('span.logo-font', 'CryptPad') - ]) - ]), - footerCol('footer_product', [ - footLink('/what-is-cryptpad.html', 'topbar_whatIsCryptpad'), - Pages.docsLink, - footLink('/features.html', Pages.areSubscriptionsAllowed()? 'pricing': 'features'), // Messages.pricing, Messages.features - Pages.sourceLink, - footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate'), - ], n), - footerCol('footer_aboutUs', [ - footLink('https://blog.cryptpad.fr/', 'blog'), - footLink('/contact.html', 'contact'), - footLink('https://github.com/xwiki-labs/cryptpad/wiki/Contributors', 'footer_team'), - footLink('http://www.xwiki.com', null, 'XWiki SAS'), - Pages.roadmapLink, - ], n), - legalFooter, + return h('footer.cp-footer', [ + h('div.cp-footer-left', [ + h('a', {href:"https://cryptpad.org"}, [ + h('div.cp-logo-foot', [ + h('img', { + src: '/customize/CryptPad_logo.svg', + "aria-hidden": true, + alt: '' + }), + 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'), + donateButton, ]) ]), - h('div.cp-version-footer', [ - languageSelector(), - h('span', "CryptPad " + Pages.versionString) + h('div.cp-footer-right', [ + h('div.cp-footer-language', [ + h('i.fa.fa-language', {'aria-hidden': 'true'}), + languageSelector() + ]) ]) ]); }; @@ -201,90 +188,70 @@ define([ var registerLink; if (!ApiConfig.restrictRegistration) { - registerLink = h('a.nav-item.nav-link.cp-register-btn', { href: '/register/'}, Msg.login_register); + registerLink = h('a.nav-item.nav-link.cp-register-btn', { href: '/register/'}, [ + h('i.fa.fa-user', {'aria-hidden':'true'}), + Msg.login_register + ]); } if (username === null) { rightLinks = [ - h('a.nav-item.nav-link.cp-login-btn', { href: '/login/'}, Msg.login_login), + h('a.nav-item.nav-link.cp-login-btn', { href: '/login/'}, [ + h('i.fa.fa-sign-in', {'aria-hidden':'true'}), + Msg.login_login + ]), registerLink, ]; } else { rightLinks = h('a.nav-item.nav-link.cp-user-btn', { href: '/drive/' }, [ - h('i.fa.fa-user-circle'), + h('i.fa.fa-user-circle', {'aria-hidden':'true'}), " ", username ]); } - var button = h('button.navbar-toggler', { - 'type':'button', - /*'data-toggle':'collapse', - 'data-target':'#menuCollapse', - 'aria-controls': 'menuCollapse', - 'aria-expanded':'false', - 'aria-label':'Toggle navigation'*/ - }, h('i.fa.fa-bars ')); - - $(button).click(function () { - if ($('#menuCollapse').is(':visible')) { - return void $('#menuCollapse').slideUp(); - } - $('#menuCollapse').slideDown(); - }); + // var button = h('button.navbar-toggler', { + // 'type':'button', + // 'data-toggle':'collapse', + // 'data-target':'#menuCollapse', + // 'aria-controls': 'menuCollapse', + // 'aria-expanded':'false', + // 'aria-label':'Toggle navigation' + // }, h('i.fa.fa-bars ')); + + // // XXX button to collapse navbar on small screens + // $(button).click(function () { + // if ($('#menuCollapse').is(':visible')) { + // return void $('#menuCollapse').slideUp(); + // } + // $('#menuCollapse').slideDown(); + // }); + + 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', - h('a.navbar-brand', { href: '/index.html'}, [ - h('img', { - src: '/customize/CryptPad_logo.svg?', - 'aria-hidden': true, - alt: '' - }), 'CryptPad' - ]), - button, - h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [ - h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.about), - h('a.nav-item.nav-link', { href: 'https://docs.cryptpad.fr'}, Msg.docs_link), - h('a.nav-item.nav-link', { href: '/features.html'}, Pages.areSubscriptionsAllowed()? Msg.pricing: Msg.features), - ].concat(rightLinks)) + // button, // XXX collapse button + // add .collapse.navbar-collapse.justify-content-end#menuCollapse to div below to enable collapse button + [ + !isHome? homeLink: undefined, + h('a.nav-item.nav-link', { href: '/features.html'}, [ + h('i.fa.fa-info-circle'), + Pages.areSubscriptionsAllowed()? Msg.pricing: Msg.features + ]), + h('a.nav-item.nav-link', { href: 'https://docs.cryptpad.fr'}, + [h('i.fa.fa-book', {'aria-hidden':'true'}),Msg.docs_link]), + ].concat(rightLinks) ); }; - Pages.crowdfundingButton = function (onClick) { - var _link = h('a', { - href: "https://opencollective.com/cryptpad/", - target: '_blank', - rel: 'noopener', - }); - - var crowdFunding = h('button', [ - Msg.crowdfunding_button - ]); - - $(crowdFunding).click(function () { - _link.click(); - if (typeof(onClick) === 'function') { onClick(); } - }); - - return crowdFunding; - }; - - Pages.subscribeButton = function (onClick) { - var _link = h('a', { - href: AppConfig.upgradeURL || "/accounts/", - }); - - var subscribe = h('button', [ - Msg.features_f_subscribe, - ]); - - $(subscribe).click(function () { - _link.click(); - if (typeof(onClick) === 'function') { onClick(); } - }); - - return subscribe; - }; - return Pages; }); diff --git a/customize.dist/pages/contact.js b/customize.dist/pages/contact.js index 94423f640..eafd3d01b 100644 --- a/customize.dist/pages/contact.js +++ b/customize.dist/pages/contact.js @@ -23,8 +23,8 @@ 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('h2.text-center', Msg._getKey('contact_admin', [ Pages.Instance.name ])), + 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,24 +58,24 @@ 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', + h('a.card-small', {href : "https://matrix.to/#/#cryptpad:matrix.xwiki.com"}, 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', + src: '/customize/images/sayhi.svg', alt: '', - 'aria-hidden': 'true'}), - 'Twitter' + 'aria-hidden': 'true' + }), + Msg.contact_chat || 'Chat' ]) ) ) ), - h('div.col-12.col-sm-6.col-md-3.col-lg-3', - h('a.card', {href : "https://social.weho.st/@cryptpad"}, + h('div', + h('a.card-small', {href : "https://social.weho.st/@cryptpad"}, h('div.card-body', h('p', [ h('img', { @@ -88,35 +88,35 @@ define([ ) ) ), - 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', + 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/github.svg', + src: '/customize/images/twiitter.svg', alt: '', 'aria-hidden': 'true'}), - Msg.contact_bug || 'Bug report' + 'Twitter' ]) ) ) ), - 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://github.com/xwiki-labs/cryptpad/issues/"}, h('div.card-body', h('p', [ h('img', { - src: '/customize/images/sayhi.svg', + src: '/customize/images/github.svg', alt: '', - 'aria-hidden': 'true' - }), - Msg.contact_chat || 'Chat' + '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 : "mailto:" + developerEmail}, + h('div', + h('a.card-small', {href : "mailto:" + developerEmail}, h('div.card-body', h('p', [ h('img', { diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index 32337d9a0..c19da3fe2 100644 --- a/customize.dist/pages/index.js +++ b/customize.dist/pages/index.js @@ -2,8 +2,6 @@ define([ 'jquery', '/api/config', '/common/hyperscript.js', - '/common/common-feedback.js', - '/common/common-interface.js', '/common/common-hash.js', '/common/common-constants.js', '/common/common-util.js', @@ -11,8 +9,8 @@ define([ '/customize/messages.js', '/customize/application_config.js', '/common/outer/local-store.js', - '/customize/pages.js' -], function ($, Config, h, Feedback, UI, Hash, Constants, Util, TextFit, Msg, AppConfig, LocalStore, Pages) { + '/customize/pages.js', +], function ($, Config, h, Hash, Constants, Util, TextFit, Msg, AppConfig, LocalStore, Pages) { var urlArgs = Config.requireConf.urlArgs; var isAvailableType = function (x) { @@ -46,8 +44,7 @@ define([ [ 'code', Msg.type.code], [ 'form', Msg.type.form], [ 'whiteboard', Msg.type.whiteboard], - [ 'slide', Msg.type.slide], - [ 'drive', Msg.type.drive] + [ 'slide', Msg.type.slide] ].filter(function (x) { return isAvailableType(x[0]); }) @@ -55,6 +52,7 @@ define([ var s = 'div.bs-callout.cp-callout-' + x[0]; var cls = ''; var isEnabled = checkRegisteredType(x[0]); + var isEAEnabled = checkEarlyAccess(x[0]); //if (i > 2) { s += '.cp-more.cp-hidden'; } var icon = AppConfig.applicationsIcon[x[0]]; @@ -62,6 +60,8 @@ define([ var href = '/'+ x[0] +'/'; var attr = isEnabled ? { href: href } : { onclick: function () { + // if the app is not enabled then we send them to the login page + // which will redirect to the app in question ? var loginURL = Hash.hashToHref('', 'login'); var url = Hash.getNewPadURL(loginURL, { href: href }); window.location.href = url; @@ -89,93 +89,116 @@ define([ TextFit($(a).find('.pad-button-text')[0], {minFontSize: 13, maxFontSize: 18}); }); }); - UI.addTooltips(); - var subscribeButton; - /* Display a subscribe button if they are enabled and the button's translation key exists */ - if (Config.allowSubscriptions) { - subscribeButton = Pages.subscribeButton(function () { - Feedback.send('HOME_SUBSCRIBE_CRYPTPAD'); - }); - } + var pageLink = function (ref, loc, text) { + if (!ref) { return; } + var attrs = { + href: ref, + }; + if (!/^\//.test(ref)) { + attrs.target = '_blank'; + attrs.rel = 'noopener noreferrer'; + } + if (loc) { + attrs['data-localization'] = loc; + text = Msg[loc]; + } + return h('a', attrs, text); + }; - var supportText = Pages.setHTML(h('span'), Msg.home_support); - Pages.documentationLink(supportText.querySelector('a'), "https://docs.cryptpad.fr/en/how_to_contribute.html"); - - var opensource = Pages.setHTML(h('p'), Msg.home_opensource); - Pages.externalLink(opensource.querySelector('a'), "https://github.com/xwiki-labs/cryptpad"); - - var blocks = [ - h('div.row.cp-page-section', [ - h('div.col-sm-6', - h('img.img-fluid.cp-img-invert', { - src:'/customize/images/shredder.png', - alt:'', - 'aria-hidden': 'true' - }) - ), - h('div.col-sm-6', [ - h('h2', Msg.home_privacy_title), - h('p', Msg.home_privacy_text) - ]) - ]), - h('div.row.cp-page-section', - h('div.col-sm-12', [ - h('h2', Msg.home_host_title), - h('p', Pages.hostDescription), - ]) - ), - h('div.row.cp-page-section', [ - h('div.col-sm-6', [ - h('h2', Msg.home_opensource_title), - opensource, - h('img.small-logo.cp-img-invert', { - src: '/customize/images/logo_AGPLv3.svg', - alt: 'APGL3 License Logo' - }) - ]), - h('div.col-sm-6', [ - h('h2', Msg.home_support_title), - supportText, - subscribeButton, - Pages.crowdfundingButton(function () { - Feedback.send('HOME_SUPPORT_CRYPTPAD'); - }), - ]) - ]) - ]; + var fastLink = k => pageLink(Pages.customURLs[k], k); + + Msg.terms = Msg.footer_tos; //"Terms of Service"; // XXX + + var imprintLink = fastLink('imprint'); + var privacyLink = fastLink('privacy'); + var termsLink = fastLink('terms'); var notice; /* Admins can specify a notice to display in application_config.js via the `homeNotice` attribute. If the text is the key for the translation system then then the most appropriate translated text will be displayed. Otherwise, the direct text will be included as HTML. */ - if (AppConfig.homeNotice) { - notice = h('div.alert.alert-info', Pages.setHTML(h('span'), [ - Msg[AppConfig.homeNotice] || AppConfig.homeNotice - ])); + if (Pages.Instance.notice) { + console.log(Pages.Instance.notice); + notice = h('div.alert.alert-info', Pages.setHTML(h('span'), Pages.Instance.notice)); + } + + // instance title + var instanceTitle = h('h1.cp-instance-title', Pages.Instance.name); + // DB: How does TextFit work?! + // setTimeout(function () { + // TextFit(instanceTitle, {minFontSize: 13, maxFontSize: 48}); // XXX DB remove? + // }); + + // instance location + var locationBlock; + if (Pages.Instance.location) { + locationBlock = h('div.cp-instance-location', [ + h('i.fa.fa-map-pin', {'aria-hidden': 'true'}), + Msg._getKey('home_location', [ Pages.Instance.location ]), + ]); + } else { + locationBlock = h('div', h('br')); } + var subButton = function () { + if (Pages.areSubscriptionsAllowed()) { + var sub = h('div.cp-sub-prompt', [ + h('span', Msg.home_morestorage), + h('a', {href:"/accounts/"}, h('button', [ + h('i.fa.fa-ticket'), + Msg.features_f_subscribe + ])) + ]); + return sub; + } else { + return h('div'); + } + }; + + return [ h('div#cp-main', [ Pages.infopageTopbar(), + notice, h('div.container.cp-container', [ h('div.row.cp-home-hero', [ - h('div.cp-title.col-md-7', [ + h('div.cp-title.col-lg-6', [ h('img', { src: '/customize/CryptPad_logo.svg?' + urlArgs, 'aria-hidden': 'true', alt: '' }), - h('h1', 'CryptPad'), - UI.setHTML(h('span.tag-line'), Msg.main_catch_phrase) + instanceTitle, + Pages.setHTML(h('span.tag-line'), Pages.Instance.description), + locationBlock, + h('div.cp-instance-links', [ + termsLink, + privacyLink, + imprintLink, + h('a', {href:"/contact.html"}, Msg.contact) + ]) ]), - h('div.col-md-5.cp-app-grid', [ - icons, + h('div.cp-apps.col-lg-6', [ + h('div.cp-app-grid', [ + h('span.cp-app-new', [ + h('i.fa.fa-plus'), + Msg.fm_newFile + ]), + h('div.cp-app-grid-apps', [ + icons, + ]) + ]), + h('div.cp-app-drive', [ + h('a.cp-drive-btn', {'href': '/drive/'}, [ + h('i.fa.fa-hdd-o', {'aria-hidden': 'true'}), + Msg.team_cat_drive + ]), + subButton + ]) ]) ]), - notice, - blocks ]), Pages.infopageFooter(), ]), diff --git a/customize.dist/pages/login.js b/customize.dist/pages/login.js index 960c01c7e..a4b452ffc 100644 --- a/customize.dist/pages/login.js +++ b/customize.dist/pages/login.js @@ -14,6 +14,7 @@ define([ h('div.row', [ h('div.col-md-3'), h('div#userForm.form-group.hidden.col-md-6', [ + h('div.cp-login-instance', Msg._getKey('login_instance', [ Pages.Instance.name ])), h('input.form-control#name', { name: 'name', type: 'text', @@ -33,11 +34,11 @@ define([ UI.createCheckbox('import-recent', Msg.register_importRecent), ]), h('div.extra', [ - h('button.login', Msg.login_login), (Config.restrictRegistration? undefined: h('button#register.cp-secondary', Msg.login_register) - ) + ), + h('button.login', Msg.login_login) ]) ]), h('div.col-md-3') diff --git a/customize.dist/pages/register.js b/customize.dist/pages/register.js index 5bc1351f3..8a0859263 100644 --- a/customize.dist/pages/register.js +++ b/customize.dist/pages/register.js @@ -8,13 +8,12 @@ define([ ], function (Config, $, h, UI, Msg, Pages) { return function () { document.title = Msg.register_header; - var urlArgs = Config.requireConf.urlArgs; var tos = $(UI.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0]; var termsLink = Pages.customURLs.terms; $(tos).find('a').attr({ - href: termsLink, // '/terms.html', + href: termsLink, target: '_blank', tabindex: '-1', }); @@ -25,10 +24,9 @@ define([ Pages.infopageTopbar(), h('div.container.cp-container', [ h('div.row.cp-page-title', h('h1', Msg.register_header)), - //h('div.row.cp-register-det', content), ].concat(content)), + Pages.infopageFooter(), ]), - Pages.infopageFooter(), ]; }; @@ -52,13 +50,14 @@ define([ Pages.setHTML(h('div.cp-register-notes'), Msg.register_notes) ]), h('div.cp-reg-form.col-md-6', [ - h('img.img-fluid', { - src: '/customize/images/swallow-the-key.png?' + urlArgs - }), h('div#userForm.form-group.hidden', [ - h('a', { - href: '/features.html' - }, Msg.register_whyRegister), + h('div.cp-register-instance', [ + Msg._getKey('register_instance', [ Pages.Instance.name ]), + h('br'), + h('a', { + href: '/features.html' + }, Msg.register_whyRegister) + ]), h('input.form-control#username', { type: 'text', autocomplete: 'off', diff --git a/customize.dist/pages/terms.js b/customize.dist/pages/terms.js deleted file mode 100644 index 9a77ead3c..000000000 --- a/customize.dist/pages/terms.js +++ /dev/null @@ -1,24 +0,0 @@ -define([ - '/common/hyperscript.js', - '/customize/messages.js', - '/customize/pages.js' -], function (h, Msg, Pages) { - return function () { - document.title = Msg.footer_tos; - return h('div#cp-main', [ - Pages.infopageTopbar(), - h('div.container.cp-container', [ - h('.row.cp-page-title', h('h1', Msg.tos_title)), - h('.row', [ - h('p', Msg.tos_legal), - h('p', Msg.tos_availability), - h('p', Msg.tos_e2ee), - h('p', Msg.tos_logs), - h('p', Msg.tos_3rdparties), - ]) - ]), - Pages.infopageFooter() - ]); - }; -}); - diff --git a/customize.dist/pages/what-is-cryptpad.js b/customize.dist/pages/what-is-cryptpad.js deleted file mode 100644 index b1c3de3d0..000000000 --- a/customize.dist/pages/what-is-cryptpad.js +++ /dev/null @@ -1,113 +0,0 @@ -define([ - '/api/config', - '/common/hyperscript.js', - '/customize/messages.js', - '/customize/pages.js', - '/common/common-feedback.js', -], function (Config, h, Msg, Pages, Feedback) { - var urlArgs = Config.requireConf.urlArgs; - - var logoLink = function (alt, src, url, cls) { - var img = h('img' + (cls || ''), { - src: src + '?' + urlArgs, - alt: alt, - }); - if (!url) { return img; } - return h('a', { href: url, }, img); - }; - - return function () { - var xwiki_info = Pages.setHTML(h('span'), Msg.whatis_xwiki_info); - Pages.externalLink(xwiki_info.querySelector('a'), "https://xwiki.com"); - - return h('div#cp-main', [ - Pages.infopageTopbar(), - h('div.container.cp-container', [ - h('div.row.cp-page-title',[ - h('div.col-12.text-center', h('h1', Msg.whatis_title)), - ]), - h('div.row.cp-page-section', [ - h('div.col-md-6', [ - Pages.setHTML(h('h2'), Msg.whatis_collaboration), - Pages.setHTML(h('span'), Msg.whatis_collaboration_info), - ]), - h('div.col-md-6', [ - h('img.cp-img-invert', { - src: '/customize/images/collaboration.png?' + urlArgs, - alt: '', - 'aria-hidden': 'true' - }), - ]), - ]), - h('div.row.cp-page-section', [ - h('div.col-md-6.order-md-2', [ - Pages.setHTML(h('h2'), Msg.whatis_apps), - Pages.setHTML(h('span'), Msg.whatis_apps_info), - ]), - h('div.col-md-6.order-md-1', [ - h('img', { - src: '/customize/images/apps-preview.png?' + urlArgs, - alt: '', - 'aria-hidden': 'true' - }), - ]), - ]), - h('div.row.cp-page-section', [ - h('div.col-md-6', [ - Pages.setHTML(h('h2'), Msg.whatis_drive), - Pages.setHTML(h('span'), Msg.whatis_drive_info), - ]), - h('div.col-md-6', [ - h('img.cp-shadow', { - src: '/customize/images/drive-grid.png?' + urlArgs, - alt: '', - 'aria-hidden': 'true' - }), - ]), - ]), - h('div.row.cp-page-section', [ - h('div.col-md-6.order-md-2', [ - Pages.setHTML(h('h2'), Msg.whatis_model), - Pages.setHTML(h('span'), Msg.whatis_model_info), - Config.allowSubscriptions ? - Pages.subscribeButton(function () { - Feedback.send('WHATIS_SUBSCRIBE_CRYPTPAD'); - }) : undefined, - Pages.crowdfundingButton(function () { - Feedback.send('WHATIS_SUPPORT_CRYPTPAD'); - }), - ]), - h('div.col-md-6.order-md-1.small-logos', [ - logoLink('NGI Award 2019', '/customize/images/logo_ngi.png', - 'https://www.ngi.eu/', '.cp-img-invert'), - logoLink('NLnet Foundation logo', '/customize/images/logo_nlnet.svg', - 'https://nlnet.nl', '.cp-img-invert'), - - logoLink('BPI France logo', '/customize/images/logo_bpifrance.svg', - 'https://bpifrance.com'), - logoLink('Mozilla Open Source Support logo', '/customize/images/logo_moss.jpg', - 'https://www.mozilla.org/en-US/moss/'), - logoLink('NGI Trust logo', '/customize/images/logo_ngi_trust.png', - 'https://www.ngi.eu/ngi-projects/ngi-trust/'), - logoLink('NGI DAPSI LOGO', '/customize/images/logo_ngi_dapsi.png', - 'https://dapsi.ngi.eu/'), - ]), - ]), - h('div.row.cp-page-section', [ - h('div.col-md-6', [ - Pages.setHTML(h('h2'), Msg.whatis_xwiki), - xwiki_info, - ]), - h('div.col-md-6.small-logos', [ - h('img', { - src: '/customize/images/logo_XWiki.svg?' + urlArgs, - alt: 'Logo XWiki' - }), - ]), - ]), - ]), - Pages.infopageFooter(), - ]); - }; -}); - diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 5c829cec4..5bf91f351 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -122,6 +122,7 @@ .dialog { & > div { background-color: @cp_alertify-bg; + border-radius: @variables_radius_L; &.half { width: 50%; max-width: 50%; @@ -205,6 +206,8 @@ box-sizing: border-box; padding: 0 15px; cursor: pointer; + border-top-left-radius: @variables_radius; + border-top-right-radius: @variables_radius; &:not(.disabled):hover { background-color: @cp_alertify-hover; } diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index acaa13351..bfb920a03 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -1,5 +1,6 @@ @import (reference) "./tools.less"; @import (reference) "./colortheme-all.less"; +@import (reference) "./variables.less"; .avatar_vars( @width: 30px ) { @@ -24,6 +25,7 @@ font-size: 16px; display: flex; align-items: center; + border-radius: @variables_radius; .cp-avatar-default, media-tag { display: inline-flex; @@ -32,6 +34,8 @@ height: @avatar-width; height: var(--avatar-width); + border-radius: @variables_radius; + justify-content: center; align-items: center; diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less index f638cb8cf..f41f1bcb8 100644 --- a/customize.dist/src/less2/include/checkmark.less +++ b/customize.dist/src/less2/include/checkmark.less @@ -1,5 +1,6 @@ @import (reference) "./colortheme-all.less"; @import (reference) "./tools.less"; +@import (reference) "./variables.less"; .checkmark_vars( @size: 20px @@ -39,6 +40,9 @@ align-items: center; position: relative; .tools_unselectable(); + .cp-checkmark-mark { + border-radius: @variables_radius; + } & > a { margin-left: 0.25em; diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 1c71d4f05..7c9008884 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -48,6 +48,9 @@ @cryptpad_color_black: #000; @cryptpad_text_col: @cryptpad_color_grey_200; +@cryptpad_text_col_inv: @cryptpad_color_grey_900; + +@cryptpad_ui_shadow: 0px 0px 5px 1px #00000030; @cryptpad_color_blue: #326599; // former logo-1 @cryptpad_color_light_blue: #00b7d8; @@ -168,11 +171,13 @@ @cp_buttons-cancel-border: @cryptpad_color_grey_400; // Sidebar layout -@cp_sidebar-left-bg: @cryptpad_color_grey_850; +@cp_sidebar-left-bg: @cryptpad_color_grey_900; @cp_sidebar-left-fg: @cryptpad_text_col; +@cp_sidebar-left-item-bg: @cryptpad_color_grey_800; @cp_sidebar-right-bg: @cryptpad_color_grey_900; @cp_sidebar-right-fg: @cryptpad_text_col; -@cp_sidebar-left-active: @cp_sidebar-right-bg; +@cp_sidebar-left-active: @cryptpad_color_grey_400; +@cp_sidebar-left-active-fg: @cryptpad_color_grey_900; @cp_sidebar-hint: fade(@cryptpad_text_col, 80%); // Drive @@ -190,9 +195,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 @@ -232,6 +237,7 @@ // Pad Creation Screen @cp_creation-bg: @cryptpad_color_grey_800; @cp_creation-fg: @cryptpad_text_col; +@cp_creation-template: @cryptpad_color_grey_700; @cp_creation-button-bg: @cryptpad_color_brand; @cp_creation-button-fg: @cryptpad_color_white; @cp_creation-error-bg: @cryptpad_color_blue; @@ -259,10 +265,11 @@ @cp_static-fg: @cryptpad_text_col; @cp_static-link: @cryptpad_color_brand_300; @cp_static-title: @cryptpad_color_brand; -@cp_static-footer: @cryptpad_color_grey_950; +@cp_static-footer: fade(@cryptpad_color_brand, 20%); @cp_static-footer-border: @cryptpad_color_grey_600; @cp_static-topbar-fg: @cryptpad_color_brand_300; @cp_static-card-bg: @cryptpad_color_grey_800; +@cp_static-danger: @cryptpad_color_red_fade; @cp_static-img-invert-filter: hue-rotate(200grad) invert(); // Limit @@ -293,9 +300,10 @@ @cp_support-header-bg: @cryptpad_color_grey_700; // Toolbar -@cp_toolbar-bg: @cryptpad_color_grey_850; +@cp_toolbar-bg: @cryptpad_color_grey_900; @cp_toolbar-fg: @cryptpad_text_col; -@cp_toolbar-bottom-fg: @cryptpad_text_col; +@cp_toolbar-bottom-bg: @cryptpad_text_col; +@cp_toolbar-bottom-fg: @cryptpad_color_grey_900; @cp_toolbar-logo-bg: @cryptpad_color_grey_200; @cp_toolbar-fade1: fade(@cryptpad_text_col, 10%); @@ -305,7 +313,7 @@ @cp_history-line-bg: @cryptpad_color_grey_900; @cp_history-bg1: @cryptpad_color_grey_600; @cp_history-bg2: @cryptpad_color_grey_800; -@cp_history-fg: @cp_toolbar-bottom-fg; +@cp_history-fg: @cp_toolbar-fg; // Tokenfield @cp_token-bg: @cryptpad_color_grey_700; @@ -371,8 +379,10 @@ @cp_kanban-tags-bg: @cryptpad_color_grey_700; @cp_kanban-add-hover: fade(@cryptpad_color_black, 10%); @cp_kanban-trash-bg: @cryptpad_color_warn_red; -@cp_kanban-color0: @cryptpad_color_grey_600; -@cp_kanban-colors: @cp_palette-dark; +@cp_kanban-color0: @cryptpad_color_grey_400; +@cp_kanban-colors: @cp_palette; +@cp_kanban-card-colors: @cp_palette-dark; + // Notifications @cp_notif-hover: fade(@cryptpad_color_black, 10%); @@ -417,7 +427,7 @@ // Teams @cp_teams-card-bg: @cryptpad_color_grey_800; -@cp_teams-leftside-bg: darken(@cryptpad_color_grey_800, 10%); +@cp_teams-leftside-bg: @cp_sidebar-left-bg; @cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%); @cp_teams-invite-fg: @cryptpad_text_col; @cp_teams-roster-odd: fade(@cryptpad_text_col, 15%); diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 8817f9312..cb694eb17 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -48,6 +48,9 @@ @cryptpad_color_black: #000; @cryptpad_text_col:@cryptpad_color_grey_800; +@cryptpad_text_col_inv: @cryptpad_color_grey_50; + +@cryptpad_ui_shadow: 0px 0px 5px 1px #00000030; @cryptpad_color_blue: #326599; // former logo-1 @cryptpad_color_light_blue: #00b7d8; @@ -167,11 +170,13 @@ @cp_buttons-cancel-border: #949494; // Sidebar layout -@cp_sidebar-left-bg: @cryptpad_color_grey_200; +@cp_sidebar-left-bg: @cryptpad_color_white; @cp_sidebar-left-fg: @cryptpad_text_col; +@cp_sidebar-left-item-bg: @cryptpad_color_grey_200; @cp_sidebar-right-bg: @cryptpad_color_white; @cp_sidebar-right-fg: @cryptpad_text_col; -@cp_sidebar-left-active: @cp_sidebar-right-bg; +@cp_sidebar-left-active: @cryptpad_color_grey_700; +@cp_sidebar-left-active-fg: @cryptpad_color_grey_200; @cp_sidebar-hint: @cryptpad_color_grey_600; // Drive @@ -190,8 +195,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 @@ -231,6 +236,7 @@ // Pad Creation Screen @cp_creation-bg: @cryptpad_color_white; @cp_creation-fg: @cryptpad_text_col; +@cp_creation-template: @cryptpad_color_grey_100; @cp_creation-button-bg: @cryptpad_color_brand; @cp_creation-button-fg: @cryptpad_color_white; @cp_creation-error-bg: @cryptpad_color_blue; @@ -258,15 +264,16 @@ @cp_static-fg: @cryptpad_text_col; @cp_static-link: @cryptpad_color_brand; @cp_static-title: @cryptpad_color_brand; -@cp_static-footer: @cryptpad_color_grey_300; +@cp_static-footer: fade(@cryptpad_color_brand_300, 30%); @cp_static-footer-border: @cryptpad_color_white; @cp_static-topbar-fg: @cryptpad_color_brand; @cp_static-card-bg: @cryptpad_color_white; +@cp_static-danger: fade(@cryptpad_color_red, 30%); @cp_static-img-invert-filter: none; // Limit @cp_limit-fg: @cryptpad_text_col; -@cp-limit-bar-bg: @cryptpad_color_white; +@cp-limit-bar-bg: @cryptpad_color_grey_200; @cp-limit-bar-normal: @cryptpad_color_green; @cp-limit-bar-warning: @cryptpad_color_orange; @cp-limit-bar-above: @cryptpad_color_red; @@ -292,8 +299,9 @@ @cp_support-header-bg: @cryptpad_color_grey_300; // Toolbar -@cp_toolbar-bg: @cryptpad_color_grey_200; +@cp_toolbar-bg: @cryptpad_color_white; @cp_toolbar-fg: @cryptpad_text_col; +@cp_toolbar-bottom-bg: @cryptpad_color_grey_200; @cp_toolbar-bottom-fg: @cryptpad_text_col; @cp_toolbar-logo-bg: @cryptpad_color_white; @@ -304,7 +312,7 @@ @cp_history-line-bg: @cryptpad_color_white; @cp_history-bg1: #DDD; @cp_history-bg2: #BBB; -@cp_history-fg: @cp_toolbar-bottom-fg; +@cp_history-fg: @cp_toolbar-fg; // Tokenfield @cp_token-bg: @cryptpad_color_grey_400; @@ -318,10 +326,10 @@ @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_grey_100; +@cp_app-bg: @cryptpad_color_white; @cp_app-fg: @cryptpad_text_col; // Accounts @@ -372,6 +380,7 @@ @cp_kanban-trash-bg: @cryptpad_color_warn_red; @cp_kanban-color0: @cryptpad_color_grey_400; @cp_kanban-colors: @cp_palette; +@cp_kanban-card-colors: @cp_palette; // Notifications @cp_notif-hover: fade(@cryptpad_color_black, 10%); @@ -416,7 +425,7 @@ // Teams @cp_teams-card-bg: @cryptpad_color_grey_300; -@cp_teams-leftside-bg: darken(@cryptpad_color_grey_200, 5%); +@cp_teams-leftside-bg: @cp_sidebar-left-bg; @cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%); @cp_teams-invite-fg: @cryptpad_text_col; @cp_teams-roster-odd: fade(@cryptpad_text_col, 15%); diff --git a/customize.dist/src/less2/include/comments.less b/customize.dist/src/less2/include/comments.less index 360a64c18..e0c97a1ec 100644 --- a/customize.dist/src/less2/include/comments.less +++ b/customize.dist/src/less2/include/comments.less @@ -98,6 +98,8 @@ background-color: @cp_comments-bg; position: relative; padding: 5px; + border-top-left-radius: @variables_radius; + border-top-right-radius: @variables_radius; box-sizing: content-box; .avatar_main(40px); .cp-comment-metadata { @@ -114,8 +116,8 @@ cursor: pointer; outline: none; position: absolute; - right: 0; - top: 0; + right: 5px; + top: 5px; width: 20px; height: 20px; text-align: center; @@ -128,6 +130,8 @@ .cp-comment-content { background-color: @cp_comments-bg; padding: 0px 5px 5px 5px; + border-bottom-left-radius: @variables_radius; + border-bottom-right-radius: @variables_radius; white-space: pre-wrap; word-break: break-word; } @@ -150,6 +154,7 @@ } .cp-comment-active { background-color: rgba(0,0,0,0.2); + border-radius: @variables_radius; .cp-comment-actions { display: block; } diff --git a/customize.dist/src/less2/include/contextmenu.less b/customize.dist/src/less2/include/contextmenu.less index 08c7f1d9c..57ca91f30 100644 --- a/customize.dist/src/less2/include/contextmenu.less +++ b/customize.dist/src/less2/include/contextmenu.less @@ -1,4 +1,5 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./variables.less"; .contextmenu_main() { --LessLoader_require: LessLoader_currentFile(); @@ -11,11 +12,14 @@ & > ul { border: 1px solid @cp_context-border; background-color: @cp_context-bg; - border-radius: 0px; + border-radius: @variables_radius; .dropdown-divider { border-top: 1px solid @cp_context-border; } } + .dropdown-menu { + padding: 6px 0px; + } li { padding: 0; font-size: @colortheme_app-font-size; @@ -38,7 +42,7 @@ top: -0.7rem; left: 100%; background-color: @cp_context-bg; - border-radius: 0px; + border-radius: @variables_radius; border: 1px solid @cp_context-border; } } @@ -46,6 +50,7 @@ cursor: pointer; color: @cp_context-fg; padding-left: 10px; + border-radius: @variables_radius; &:hover { background-color: @cp_context-bg-hover; color: @cp_context-fg; diff --git a/customize.dist/src/less2/include/corner.less b/customize.dist/src/less2/include/corner.less index 476e6bf88..0e9c67535 100644 --- a/customize.dist/src/less2/include/corner.less +++ b/customize.dist/src/less2/include/corner.less @@ -1,4 +1,5 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./variables.less"; .corner_main() { --LessLoader_require: LessLoader_currentFile(); @@ -40,6 +41,7 @@ transform-origin: bottom right; animation: appear 0.8s ease-in-out; border: 1px solid @corner-fg; + border-radius: @variables_radius; box-shadow: 0 0 10px 0 @cp_shadow-color; &.cp-corner-alt { @@ -116,6 +118,7 @@ } text-transform: uppercase; border: 1px solid @corner-fg; + border-radius: @variables_radius; .fa, .cptools { margin-right: 0.3em; } diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index 1449a341a..de28372b8 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -3,6 +3,7 @@ @import (reference) "./tools.less"; @import (reference) './icon-colors.less'; @import (reference) "./avatar.less"; +@import (reference) "./variables.less"; .creation_vars( @bg-color: @colortheme_apps[default] @@ -63,6 +64,7 @@ width: 700px; max-width: 90vw; height: 500px; + border-radius: @variables_radius_L; max-height: ~"calc(100vh - 20px)"; margin: 0px; flex-shrink: 0; @@ -131,6 +133,7 @@ color: @cp_creation-button-fg; margin: 3px 10px; border: none; + border-radius: @variables_radius; cursor: pointer; outline: none; text-transform: uppercase; @@ -256,6 +259,7 @@ } select { margin-right: 5px; + border-radius: @variables_radius; } } &.active { @@ -325,11 +329,12 @@ max-height: 159px; align-items: center; .cp-creation-template-element { - box-shadow: 2px 2px 7px @cp_shadow-color; + box-shadow: @cryptpad_ui_shadow; width: 300px; max-width: calc(100% - 10px); - padding: 2px; + padding: 5px; margin: 5px; + border-radius: @variables_radius; display: inline-flex; box-sizing: border-box; @@ -337,7 +342,7 @@ text-align: left; line-height: 1em; cursor: pointer; - + background-color: @cp_creation-template; color: @creation-color; color: var(--creation-color); border: 1px solid transparent; diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index c6a218653..7839f2526 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -121,6 +121,9 @@ .cp-app-drive-tree-category { margin-top: 0.5em; } + .cp-splitter { + display: none; + } } } } @@ -265,12 +268,11 @@ box-sizing: border-box; background: @cp_sidebar-left-bg; overflow: auto; - resize: horizontal; width: auto; white-space: nowrap; max-width: 500px; min-width: 200px; - padding: 0px; + padding: 10px 0px 0px 0px; color: @cp_sidebar-left-fg; display: flex; flex-flow: column; @@ -279,6 +281,7 @@ .cp-app-drive-tree-categories-container { flex: 1; overflow: auto; + padding: 0px 5px; } img.cp-app-drive-icon { margin-bottom: 3px; @@ -288,6 +291,8 @@ margin-top: 15px; //padding: 0 0 0 20px; padding: 0; + background-color: @cp_sidebar-left-item-bg; + border-radius: @variables_radius; cursor: auto; &li, li { padding: 0; @@ -295,7 +300,6 @@ display: none; } input { - //width: ~"calc(100% - 30px)"; flex: 1; min-width: 0; padding: 0 10px; @@ -305,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)"; margin: 0; - //margin-bottom: -6px; display: flex; align-items: center; cursor: pointer; @@ -318,8 +319,9 @@ .fa, .cptools { display: inline-block; min-width: 0; - width: 25px; + width: 20px; margin-right: 0px; + z-index: 99; } .cp-app-drive-element { flex: 1; @@ -335,7 +337,10 @@ } .cp-app-drive-tree-category { margin: 0; - margin-top: 15px; + margin-top: 10px; + background-color: @cp_sidebar-left-item-bg; + border-radius: @variables_radius; + box-shadow: @cryptpad_ui_shadow; .cp-app-drive-tree-root { .fa-trash-o { padding-left: 2px; @@ -361,11 +366,11 @@ margin-left: -10px; font-size: 14px; position: absolute; - left: -20px; - top: 10px; + left: -17px; + top: 11px; width: 11px !important; height: 11px !important; - background-color: @cp_sidebar-left-bg; + background-color: @cp_sidebar-left-item-bg; padding: 0; margin: 0; z-index: 10; @@ -376,17 +381,35 @@ } } .cp-app-drive-tree-docs { + box-shadow: @cryptpad_ui_shadow; + + .cp-app-drive-element-row { + &.cp-leftside-active { + .cp-app-drive-icon-expcol { + color: @cryptpad_text_col; // +/- expand icon for folders + } + } + } + .cp-app-drive-tree-root > .cp-app-drive-element-row { + margin-left: 0px; + &.cp-app-drive-element-active { + .cp-app-drive-icon-expcol { + color: @cp_sidebar-left-active-fg; // +/- expand icon for drive + } + } + } .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol { position: relative; top: 0; left: -10px; + background-color: transparent; } .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder { margin-left: -5px; } .cp-app-drive-tree-root { &> .cp-app-drive-element-row { - padding-left: 20px; + padding-left: 15px; } &> ul { padding-left: 30px; @@ -403,8 +426,8 @@ position: relative; &:before { position: absolute; - left: -15px; - top: -11px; + left: -12px; + top: -10px; content: ''; display: block; border-left: 1px solid @cp_drive-tree-branch; @@ -414,7 +437,7 @@ } &:after { position: absolute; - left: -15px; + left: -12px; bottom: -7px; content: ''; display: block; @@ -441,13 +464,40 @@ #cp-app-drive-content-container { display: flex; flex-flow: column; - flex: 1 1 100%; + flex: 1; min-width: 0; + position: relative; + .cp-splitter { + position: absolute; + height: 100%; + width: 8px; + top: 0; + left: 0; + cursor: col-resize; + display: flex; + align-items: center; + justify-content: flex-end; + &:hover { + border-left: 1px solid @cryptpad_text_col; + } + i { + color: @cryptpad_text_col; + 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; background: @cp_sidebar-right-bg; color: @cp_sidebar-right-fg; + padding-top: 10px; overflow-y: auto; flex: 1; display: flex; @@ -459,9 +509,6 @@ position: absolute; z-index: 50; } - &.cp-app-drive-readonly { - background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%)); - } h1 { padding-left: 10px; margin-top: 10px; @@ -570,6 +617,7 @@ } .drive_fileIcon; li { + border-radius: @variables_radius; &.cp-app-drive-element { position: relative; } @@ -639,6 +687,7 @@ } li { display: flex; + border-radius: @variables_radius; input { border: 1px solid transparent; margin: 0; @@ -727,6 +776,7 @@ } &> span { padding: 14px 5px; + border-radius: @variables_radius; &.cp-app-drive-sort-clickable { cursor: pointer; &:hover { @@ -858,6 +908,7 @@ flex-flow: column; li, li .fa, li .cptools { cursor: pointer; + border-radius: @variables_radius; } &> p { display: flex; @@ -912,6 +963,18 @@ .cp-toolbar-bottom { + .cp-toolbar-bottom-left { + @drive-light: lighten(@cryptpad_color_brand, 30%); + .cp-app-drive-toolbar-new { + border-radius: @variables_radius; + color: @cryptpad_color_grey_900; + border-color: @drive-light; + background-color: @drive-light; + &:hover { + background-color: fade(@drive-light, 80%); + } + } + } .cp-toolbar-bottom-right { .fa-history { order: 50; } // .fa-list, .fa-th-large, diff --git a/customize.dist/src/less2/include/dropdown.less b/customize.dist/src/less2/include/dropdown.less index 5ce3ee677..5f55cb3e7 100644 --- a/customize.dist/src/less2/include/dropdown.less +++ b/customize.dist/src/less2/include/dropdown.less @@ -60,6 +60,8 @@ position: absolute; background-color: @cp_dropdown-bg; min-width: 250px; + padding: 5px; + border-radius: @variables_radius; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); z-index: 1000; //Z dropdown content max-height: 300px; @@ -77,7 +79,8 @@ & > a, & > span { color: @cp_dropdown-fg; - padding: 5px 16px; + border-radius: @variables_radius; + padding: 5px; text-decoration: none; display: flex; cursor: pointer; @@ -160,7 +163,6 @@ height: 1px; background: @cp_dropdown-bg-active; border: 0 !important; - border-top: 1px solid rgba(0,0,0,.1) !important; & + hr { display: none; } diff --git a/customize.dist/src/less2/include/fileupload.less b/customize.dist/src/less2/include/fileupload.less index bd36faf8d..9a1b0c3d2 100644 --- a/customize.dist/src/less2/include/fileupload.less +++ b/customize.dist/src/less2/include/fileupload.less @@ -1,6 +1,7 @@ @import (reference) "./browser.less"; @import (reference) './colortheme-all.less'; @import (reference) './modal.less'; +@import (reference) './variables.less'; .fileupload_main () { --LessLoader_require: LessLoader_currentFile(); @@ -13,6 +14,7 @@ position: absolute; right: 10vw; bottom: 10vh; + border-radius: @variables_radius; box-sizing: border-box; z-index: 100001; //Z file upload table container: just above the file picker display: none; @@ -88,6 +90,7 @@ height: 100%; background-color: @cp_upload-progress; z-index: -1; //Z file upload progress container + border-radius: @variables_radius; } .cp-fileupload-table-cancel { text-align: center; diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index 30c2e9197..fa51a3c8c 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -14,6 +14,7 @@ color: @cp_forms-fg; background-color: @cp_forms-bg; border: 1px solid @cp_forms-border; + border-radius: @variables_radius; font-size: 100%; padding: @alertify_padding-base; &:not(.tui-full-calendar-content) { @@ -39,6 +40,7 @@ input { margin: 0 !important; flex: 1; + border-radius: @variables_radius 0 0 @variables_radius !important; min-width: 0; } span { @@ -47,6 +49,7 @@ height: 100%; margin-left: -1px; text-transform: unset !important; + border-radius: 0 @variables_radius @variables_radius 0; } } } @@ -79,11 +82,15 @@ } button { margin: 0 !important; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } .cp-button-timer { height: 3px; & > div { height: 100%; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; background-color: @cp_buttons-primary; &.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt { background-color: @cp_buttons-red; @@ -109,7 +116,7 @@ font-size: 14px; text-decoration: none; cursor: pointer; - border-radius: 0; + border-radius: @variables_radius; transition: none; i, .fa, .cptools { @@ -230,7 +237,7 @@ margin: 0px 0px @alertify_padding-base 0px; font-size: 12px; padding: 5px; - border-radius: 0px; + border-radius: @variables_radius; i { margin-right: 10px; } @@ -288,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; @@ -303,7 +312,7 @@ .flatpickr-calendar { background: @cp_flatpickr-bg; color: @cryptpad_text_col; - border-radius: 0; + border-radius: @variables_radius; box-shadow: @variables_shadow; -webkit-box-shadow: @variables_shadow; &.arrowTop::before, &.arrowTop::after { diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index e64e38744..1882ffd6d 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -1,6 +1,9 @@ @import (reference) "./colortheme-all.less"; @import (reference) "./font.less"; +@infopages-radius: 5px; +@infopages-radius-L: 10px; + .infopages_link () { text-decoration: none; color: @cryptpad_color_link; @@ -11,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 () { @@ -52,7 +55,7 @@ body.html { padding-top: @infopages_padding; padding-bottom: @infopages_padding; min-height: 75vh; - max-width: 950px; + max-width: 1200px; h1 { font-size: 3em; margin-bottom: 0.5em; @@ -109,7 +112,7 @@ body.html { border: none; padding: 10px 20px; margin-right: 10px; - border-radius: 0px; + border-radius: @infopages-radius; cursor: pointer; &:hover, &:focus { background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%)); @@ -122,9 +125,9 @@ body.html { } .form-group { - & > * { - margin-top: 0.5em; - } + // & > * { + // margin-bottom: 0.5em; + // } display: flex; flex-direction: column; align-items: center; @@ -142,56 +145,103 @@ body.html { } } footer { - background-color: @cp_static-footer; - padding-top: 20px; align-self: normal; // override align-items:center from parent in index.html - - .container { - margin-bottom: 20px; + box-shadow: inset 0px 7px 15px -7px rgba(0,0,0,0.3); + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + flex-wrap: wrap; + .cp-footer-left, .cp-footer-center, .cp-footer-right { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; a { - color: @cp_static-link; - &:visited { - color: @cp_static-link; - } + margin-right: 10px; } } + .cp-logo-foot { display: flex; - flex-flow: column; - width: 100%; + flex-flow: row; align-items: center; + padding: 10px; img { - max-width: 60px; - display: block; + max-height: 40px; + margin-right: 10px; } .logo-font { display: block; font-family: "IBM Plex Mono"; font-size: 1.5rem; - color: @cp_static-title; - margin-bottom: 10px; + color: @cryptpad_text_col; + height: 40px; } } - .cp-version-footer { - background-color: @cp_static-footer; - display: flex; - flex-flow: column; - align-items: center; - padding: 0.5em; - border-top: 1px solid @cp_static-footer-border; + + .cp-logo-btns { + padding: 10px; + a { + background-color: @cryptpad_color_link; + color: @cryptpad_text_col_inv; + border-radius: @infopages-radius; + padding: 0.5em 0.7em; + white-space: nowrap; + display: inline-block; + i { + margin-right: 5px; + } + &:hover { + background-color: @cp_static-card-bg; + color: @cryptpad_text_col; + text-decoration: none; + } + } + + } + + .cp-footer-language { + padding: 10px; + margin-right: 10px; + i { + font-size: 1.3em; + margin-right: 5px; + } select { min-width: 0; - margin-bottom: 10px; + background-color: @cp_static-card-bg; + color: @cryptpad_text_col; + border: 0px; + border-radius: @infopages-radius; + padding: 0.5em 0.7em; } } + .cp-footer-version { + padding: 10px; + font-family: 'IBM Plex Mono'; + } + // .cp-version-footer { + // background-color: @cp_static-footer; + // display: flex; + // flex-flow: column; + // align-items: center; + // padding: 0.5em; + // border-top: 1px solid @cp_static-footer-border; + // select { + // min-width: 0; + // margin-bottom: 10px; + // } + // } } // navigation top bar .navbar { width: 100%; color: @cp_static-topbar-fg; + justify-content: flex-end; .navbar-brand { display: block; height: 50px; @@ -208,20 +258,39 @@ body.html { margin-right: 0; } a { - border: 2px solid transparent; + //border: 2px solid transparent; white-space: nowrap; color: @cp_static-title; + background-color: @cp_static-card-bg; + border-radius: @infopages-radius; } .nav-link { padding: 0.5em 0.7em; + margin: 5px; color: @cp_static-link; + display: inline-block; + img { + max-height: 30px; + margin-right: 10px; + } + &.cp-back-home { + margin-right: auto; + } &:hover { color: @cryptpad_text_col; } + i { + margin-right: 5px; + } } .cp-register-btn { - border: 2px solid @cp_static-topbar-fg; + background-color: @cp_static-topbar-fg; + color: @cp_static-bg; display: inline-block; + &:hover { + background-color: @cp_static-card-bg; + color: @cryptpad_text_col; + } } button:focus { outline: none; @@ -231,26 +300,5 @@ body.html { color: @cp_static-topbar-fg; } } - @media (max-width: 1000px) { - #menuCollapse { - text-align: right; - /* @media (min-width: 576px) { - top: 100%; - background: rgba(255,255,255,0.8); - position: absolute; - right: 0px; - padding: 0 20px; - z-index: 1; - } - */ - } - .navbar-nav a { - text-align: right !important; - } - .cp-register-btn { - margin-right: 13px; - text-align: center; - } - } } diff --git a/customize.dist/src/less2/include/leftside-menu.less b/customize.dist/src/less2/include/leftside-menu.less index 5a69f528f..bb9c86e56 100644 --- a/customize.dist/src/less2/include/leftside-menu.less +++ b/customize.dist/src/less2/include/leftside-menu.less @@ -4,20 +4,23 @@ .leftside-menu-category_main() { .unselectable_make(); - padding: 5px 15px; - margin: 15px 0; + padding: 5px; + margin: 10px 0; cursor: pointer; height: @variables_bar-height; + border-radius: @variables_radius; + background-color: @cp_sidebar-left-item-bg; .fa, .cptools { display: inline-flex; justify-content: center; margin-right: 5px; - min-width: 25px; + min-width: 20px; } &:hover { - background: fade(@cryptpad_text_col, 10%); + background: @cryptpad_text_col_inv; } &.cp-leftside-active { background: @cp_sidebar-left-active; + color: @cp_sidebar-left-active-fg; } } diff --git a/customize.dist/src/less2/include/limit-bar.less b/customize.dist/src/less2/include/limit-bar.less index 324daf722..a219674ba 100644 --- a/customize.dist/src/less2/include/limit-bar.less +++ b/customize.dist/src/less2/include/limit-bar.less @@ -1,4 +1,5 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./variables.less"; .limit-bar_main () { --LessLoader_require: LessLoader_currentFile(); @@ -23,6 +24,7 @@ width: ~"calc(100% - 10px)"; height: 10px; overflow: hidden; + border-radius: @variables_radius; .cp-limit-usage { height: 10px; display: inline-block; @@ -65,7 +67,7 @@ padding-bottom: 0; justify-content: center; flex: 1; - border-radius: 0px; + border-radius: @variables_radius; } } } diff --git a/customize.dist/src/less2/include/loading.less b/customize.dist/src/less2/include/loading.less index ba76e32ae..03b4929db 100644 --- a/customize.dist/src/less2/include/loading.less +++ b/customize.dist/src/less2/include/loading.less @@ -180,6 +180,7 @@ height: 24px; background: @cp_loading-progress-bg; border: 1px solid @cp_loading-progress-bar-bg; + border-radius: @variables_radius; } .cp-loading-progress-bar-value { height: 100%; diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less index ffb6f95c9..2b52c0cc0 100644 --- a/customize.dist/src/less2/include/modals-ui-elements.less +++ b/customize.dist/src/less2/include/modals-ui-elements.less @@ -41,6 +41,7 @@ .cp-app-prop-size-container { height: 20px; background-color: @cryptpad_color_brand; + border-radius: @variables_radius; margin: 10px 0; padding: 0; div { @@ -48,6 +49,8 @@ margin: 0; padding: 0; background-color: @cryptpad_color_grey_500; + border-top-left-radius: @variables_radius; + border-bottom-left-radius: @variables_radius; } } .cp-app-prop-size-legend { @@ -65,6 +68,7 @@ height: 20px; width: 20px; margin-right: 10px; + border-radius: @variables_radius; } .cp-app-prop-history-size-color { background-color: @cryptpad_color_grey_500; @@ -159,6 +163,7 @@ align-items: center; padding: 5px 0; outline: none; + border-radius: @variables_radius; & > i { margin-left: @snapshot_spacing; text-align: center; diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 564067fb7..0117244c6 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -24,12 +24,14 @@ background: @cp_sidebar-left-bg; display: flex; flex-flow: column; + padding: 0px 5px; .cp-sidebarlayout-categories { flex: 1; .cp-sidebarlayout-category { display: flex; align-items: center; .leftside-menu-category_main(); + box-shadow: @cryptpad_ui_shadow; } } &.cp-leftside-narrow { @@ -111,10 +113,12 @@ //border-radius: 0.25em 0 0 0.25em; border: 1px solid @cryptpad_color_grey_500; border-right: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; } button { - //border-radius: 0 0.25em 0.25em 0; - //border: 1px solid #adadad; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; border-left: 0px; height: 40px; margin: 0 !important; diff --git a/customize.dist/src/less2/include/support.less b/customize.dist/src/less2/include/support.less index a07d9d316..3e4b3ac9c 100644 --- a/customize.dist/src/less2/include/support.less +++ b/customize.dist/src/less2/include/support.less @@ -42,10 +42,11 @@ width: 1200px; max-width: 90%; margin: 5px auto; + border-radius: @variables_radius; .cp-support-list-message { background-color: @msg-bg; - margin: 2px; - padding: 2px 5px; + padding: 5px 5px; + border-radius: @variables_radius; .cp-support-fromme { background-color: @fromme-bg; } @@ -73,6 +74,7 @@ .cp-support-list-actions { display: flex; order: 3; + margin-top: 5px; .cp-support-hide { display: none; } diff --git a/customize.dist/src/less2/include/tippy.less b/customize.dist/src/less2/include/tippy.less index 5450d3114..bce6a2414 100644 --- a/customize.dist/src/less2/include/tippy.less +++ b/customize.dist/src/less2/include/tippy.less @@ -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] { diff --git a/customize.dist/src/less2/include/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less index e71d43c96..cf5eef0e7 100644 --- a/customize.dist/src/less2/include/tokenfield.less +++ b/customize.dist/src/less2/include/tokenfield.less @@ -1,5 +1,6 @@ @import (reference) "./colortheme-all.less"; @import (reference) "./tools.less"; +@import (reference) "./variables.less"; .tokenfield_main () { --LessLoader_require: LessLoader_currentFile(); @@ -35,6 +36,12 @@ flex: 1; min-width: 0 !important; } + button { + // no radius in input + button combo + // input .token-input is styled at the bottom of this file + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + } } .token { box-sizing: border-box; @@ -45,6 +52,7 @@ margin: 2px 0; margin-right: 5px; height: 24px; + border-radius: @variables_radius; vertical-align: middle; cursor: default; color: @cp_token-fg; @@ -92,6 +100,8 @@ max-width: 100%; width: 100%; min-width: 100% !important; + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; &:focus { outline: 0; box-shadow: none; diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less index 2c97de873..707dd47ea 100644 --- a/customize.dist/src/less2/include/toolbar-history.less +++ b/customize.dist/src/less2/include/toolbar-history.less @@ -1,4 +1,5 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./variables.less"; .history_main () { --LessLoader_require: LessLoader_currentFile(); @@ -88,13 +89,20 @@ } button { margin: 0 5px; - border: 1px solid @cryptpad_text_col; + border: 1px solid @cp_toolbar-fg; + background-color: @cp_toolbar-bg; + color: @cp_toolbar-fg; + border-radius: @variables_radius; text-transform: uppercase; display: inline-flex; align-items: center; .fa:not(:last-child) { margin-right: 5px; } + &:hover { + // XXX DB: check hover in light/dark themes + background-color: fade(@cp_toolbar-fg, 30%); + } &:disabled { cursor: not-allowed !important; opacity: 0.6; @@ -233,9 +241,11 @@ display: flex; justify-content: space-between; align-items: center; - margin-left: 40px; + margin: 5px 0px 5px 40px; button { width: 50px; + color: @cp_toolbar-fg; + border-radius: @variables_radius; .fa:first-child:not(:last-child) { margin-right: 5px; } diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 6ccec507d..d9ec40096 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -15,9 +15,9 @@ @bg-color: @colortheme_apps[default], // color of the toolbar background ) { @toolbar-bg-color: @bg-color; - @desat-color: desaturate(@bg-color, 20%); - @toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@desat-color, 20%)); - @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%)); + // XXX: check contrasts of app colors used as btn background + @toolbar-bg-color-light: lighten(@bg-color, 30%); + @toolbar-bg-color-fade: fade(@toolbar-bg-color-light, 80%); }; .toolbar_main ( @@ -27,8 +27,8 @@ .toolbar_vars(@bg-color); --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(); @@ -108,6 +108,7 @@ } .cp-toolbar-chat-drawer { + border-radius: @variables_radius; background-color: @toolbar-bg-color; background-color: var(--toolbar-bg-color); font: @colortheme_app-font-size @colortheme_font; @@ -392,7 +393,6 @@ //display: inline-block; button { height: 100%; - border-radius: 0; margin: 0; background: transparent; } @@ -439,6 +439,7 @@ screen and (max-height: 500px) { flex-wrap: wrap; height: @toolbar_line-height; + // XXX DB TODO: scale down icon logo on small screens .cp-pad-not-pinned { line-height: 32px; flex: unset; @@ -503,9 +504,12 @@ .cp-toolbar-link { height: @toolbar_line-height; width: @toolbar_line-height; - transform: scale(0.5); + //transform: scale(0.5); .cp-toolbar-link-logo { padding: 5px; + span { + font-size: 24px; + } } } .cp-toolbar-user { @@ -514,16 +518,20 @@ height: @toolbar_line-height; width: @toolbar_line-height; margin-left: 0; + padding: 0px; button { height: @toolbar_line-height; width: @toolbar_line-height; font-size: 15px; margin-top: -1px; - .cp-dropdown-button-title { - transform: scale(0.5); - bottom: -5px; - right: -5px; + &::before { + padding-top: 1px; } + // .cp-dropdown-button-title { + // transform: scale(0.5); + // bottom: -5px; + // right: -5px; + // } } } .cp-toolbar-user-dropdown { @@ -723,7 +731,7 @@ line-height: @toolbar_top-height; width: @toolbar_top-height; height: @toolbar_top-height; - padding: 0; + padding: 5px; box-sizing: border-box; display: inline-block; } @@ -735,9 +743,10 @@ display: flex; align-items: center; justify-content: center; - width: @toolbar_top-height; + width: @toolbar_top-height - 10px; font-size: 1em; - height: @toolbar_top-height; + height: @toolbar_top-height - 10px; + border-radius: @variables_radius; padding: 0px; margin: 0; &::before { @@ -795,22 +804,41 @@ text-decoration: none; height: auto; padding: 10px; + color: @toolbar-bg-color; + color: var(--toolbar-bg-color); - svg { - #outline, #squares { - fill: @toolbar-bg-color; - fill: var(--toolbar-bg-color); + span { + font-size: 45px; + } + + &:hover { + // Icons shown when hovering the toolbar icon (where logo used to be) + .cptools::before { + content: "\e920"; // shows drive icon in document toolbars } - #background { - fill: @cp_toolbar-logo-bg; + .fa::before { + content: "\f0a0"; // shows hdd-o for all FA icons (settings, etc) + } + .fa-hdd-o::before{ + content: "\f015"; // shows home for drive } } - img { - cursor: pointer; - height: 100%; - width: 100%; - } + // svg { + // #outline, #squares { + // fill: @toolbar-bg-color; + // fill: var(--toolbar-bg-color); + // } + // #background { + // fill: @cp_toolbar-logo-bg; + // } + // } + + // img { + // cursor: pointer; + // height: 100%; + // width: 100%; + // } } } .cp-toolbar-user { @@ -828,21 +856,10 @@ } .cp-toolbar-user-dropdown { z-index: 10000; //Z cp-toolbar-user-dropdown - //margin-left: 20px; - height: @toolbar_top-height; - width: @toolbar_top-height; - padding: 0px; + padding: 5px; box-sizing: border-box; text-align: center; -/* - background-color: rgba(0,0,0,0.3); - transition: all 0.15s; - &:hover { - background-color: rgba(0,0,0,0.4); - } - */ - .cp-dropdown-content { margin: 0; padding-bottom: 10px; @@ -851,8 +868,9 @@ display: flex; justify-content: center; align-items: center; - height: @toolbar_top-height; - width: @toolbar_top-height; + height: @toolbar_top-height - 10px; + width: @toolbar_top-height - 10px; + border-radius: @variables_radius; padding: 0; &:hover { border-color: transparent; @@ -876,6 +894,19 @@ } } } + .cp-user-menu-logo { + text-align: left; + font-family: "IBM Plex Mono"; + color: @cryptpad_color_grey_500; + font-size: 1.5em; + padding: 5px; + img { + width: 25px; + } + .cp-user-menu-logo-text { + margin-left: 10px; + } + } p.cp-toolbar-account { &> span { font-weight: bold; @@ -896,8 +927,8 @@ } .cp-toolbar-history, .cp-toolbar-snapshots { - background-color: @toolbar-bg-color-light; - background-color: var(--toolbar-bg-color-light); + background-color: @cp_toolbar-bg; + //background-color: var(--toolbar-bg-color-light); color: @toolbar-color; } .cp-toolbar-snapshots { @@ -935,24 +966,9 @@ } } .cp-toolbar-bottom { - background-color: @toolbar-bg-color-light; - background-color: var(--toolbar-bg-color-light); color: @cp_toolbar-bottom-fg; - button:hover, button.cp-toolbar-button-active { - background-color: @toolbar-bg-color-active; - background-color: var(--toolbar-bg-color-active); - } - button.cp-toolbar-button-active { - border-color: @toolbar-bg-color-active; - border-color: var(--toolbar-bg-color-active); - } - button:hover, button:focus { - border-color: @toolbar-bg-color-active; - border-color: var(--toolbar-bg-color-active); - //border-color: @cryptpad_text_col; - } - display: inline-flex; + margin: 5px 0px; align-items: center; justify-content: space-between; max-width: 100%; @@ -967,18 +983,59 @@ margin: 5px 0px; } } + button { - border: 1px solid transparent; + border: 1px solid @cp_toolbar-bottom-bg; box-sizing: border-box; position: relative; margin: 0px; - border-radius: 0; + border-radius: @variables_radius; height: @toolbar_line-height; display: inline-flex; align-items: center; .fa, .cptools { margin-right: 5px; } + &:hover { + // XXX DB: not working well in dark/light + background-color: fade(@cp_toolbar-bottom-bg, 70%); + } + } + .cp-toolbar-bottom-left > button, + .cp-toolbar-bottom-mid > button, + .cp-toolbar-bottom-right > button, + .cp-toolbar-bottom-right > span > button { + background-color: @cp_toolbar-bottom-bg; + color: @cp_toolbar-bottom-fg; + &:hover { + // XXX DB: not working well in dark/light + background-color: fade(@cp_toolbar-bottom-bg, 50%); + border-color: fade(@cp_toolbar-bottom-bg, 50%); + } + &.cp-toolbar-button-active { + background-color: @cp_toolbar-bg; + border-color: @cp_toolbar-fg; + color: @cp_toolbar-fg; + &:hover { + // XXX DB: not working well in dark/light + background-color: fade(@cp_toolbar-bottom-bg, 50%); + } + } + } + + button.cp-toolbar-button-primary { + background-color: @toolbar-bg-color-light; + background-color: var(--toolbar-bg-color-light); + border-color: @toolbar-bg-color-light; + border-color: var(--toolbar-bg-color-light); + color: @cp_toolbar-bottom-fg; + &:hover { + // XXX DB: not working well in dark/light + background-color: fade(@toolbar-bg-color-light, 80%); + background-color: var(--toolbar-bg-color-fade); + border-color: fade(@toolbar-bg-color-light, 80%); + border-color: var(--toolbar-bg-color-fade); + } } button.cp-toolbar-collapse { /* @@ -988,10 +1045,24 @@ is very small, which makes it unlikely that you'll see the title unless you hover perfectly. The same is true of the drive's grid/list view toggle. */ - + position: relative; .fa { margin-right: 0px; } + .cp-collapsed-notif { + display: inline-block; + width: 12px; + height: 12px; + background-color: @cryptpad_color_red; + position: absolute; + bottom: -3px; + right: -3px; + border: 2px solid @cp_toolbar-bg; + border-radius: 50%; + } + &:not(.cp-toolbar-button-active) .cp-collapsed-notif { + display: none; + } } &.cp-toolbar-small { @@ -1013,14 +1084,25 @@ .cp-toolbar-bottom-left { display: flex; order: 1; + padding-left: 5px; + button { + margin-right: 5px; + } } .cp-toolbar-bottom-mid { display: flex; order: 2; + button { + margin-right: 5px; + } } .cp-toolbar-bottom-right { order: 3; display: flex; + padding-right: 5px; + button { + margin-left: 5px; + } #cp-toolbar-chat-drawer-open { order: 0; } #cp-toolbar-userlist-drawer-open { order: 1; } & > .cp-dropdown-container { @@ -1081,6 +1163,7 @@ } .cp-toolbar-drawer-content { box-shadow: 0px 1px 5px 0px @cp_shadow-color; + border-radius: @variables_radius; overflow-y: auto; overflow-x: hidden; &.cp-dropdown-visible { @@ -1089,7 +1172,8 @@ position: absolute; left: 0px; top: @toolbar_line-height; - margin: -1px; + //margin: -1px; + padding: 5px; min-width: 50px; background: @cp_dropdown-bg; display: flex; @@ -1105,15 +1189,15 @@ box-sizing: border-box; min-width: 150px; height: @toolbar_line-height; - border-radius: 0; + border-radius: @variables_radius; border: 0; } button { white-space: nowrap; - padding: 5px 16px; + padding: 5px; text-align: left; margin: 0; - border-radius: 0; + border-radius: @variables_radius; border: 0; width: 100%; line-height: 1em; diff --git a/customize.dist/src/less2/include/usergrid.less b/customize.dist/src/less2/include/usergrid.less index d4b03e89c..bb5605dc4 100644 --- a/customize.dist/src/less2/include/usergrid.less +++ b/customize.dist/src/less2/include/usergrid.less @@ -1,6 +1,7 @@ @import (reference) "./colortheme-all.less"; @import (reference) "./avatar.less"; @import (reference) "./tools.less"; +@import (reference) "./variables.less"; .usergrid_main() { --LessLoader_require: LessLoader_currentFile(); @@ -52,6 +53,7 @@ justify-content: center; align-items: center; padding: 5px; + border-radius: @variables_radius; margin: 3px !important; cursor: default; transition: order 0.5s, background-color 0.5s; diff --git a/customize.dist/src/less2/include/variables.less b/customize.dist/src/less2/include/variables.less index 077e32d52..f945538fc 100644 --- a/customize.dist/src/less2/include/variables.less +++ b/customize.dist/src/less2/include/variables.less @@ -10,3 +10,8 @@ // Used in modal.less and alertify.less @variables_padding: 12px; @variables_shadow: 0 8px 32px 0 @cp_shadow-color; + +// Rounded corners +@variables_radius: 5px; +@variables_radius_L: 10px; + diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less index c305f087a..803dc1a3c 100644 --- a/customize.dist/src/less2/pages/page-contact.less +++ b/customize.dist/src/less2/pages/page-contact.less @@ -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; + } + } } } } diff --git a/customize.dist/src/less2/pages/page-features.less b/customize.dist/src/less2/pages/page-features.less index 5ec076a34..d1bd49fbb 100644 --- a/customize.dist/src/less2/pages/page-features.less +++ b/customize.dist/src/less2/pages/page-features.less @@ -22,10 +22,11 @@ .cp-shadow(); border: none; background-color: @cp_static-card-bg; - border-radius: 0px;; + border-radius: @infopages-radius; .title-card { background-color: @cryptpad_color_brand; padding: 20px; + border-radius: @infopages-radius @infopages-radius 0 0; } .card-body, .title-card { display: flex; diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index 26ef0328d..df74b7b93 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -10,21 +10,20 @@ flex-direction: column; justify-content: space-between; align-items: center; - .container { - @media only screen and (max-device-width : 576px) { - margin-top: 6em; - } + + .alert-info { + font-size: 16px; + background-color: @cp_alerts-info-bg; + color: @cp_alerts-info-text; } + & > .cp-container { flex: 1; display: flex; flex-flow: column; justify-content: space-around; justify-content: space-evenly; - .alert-info { - font-size: 16px; - border-radius: 0px; - } + max-width: 1000vh; } } body { @@ -32,35 +31,61 @@ color: @cryptpad_text_col; } + + h1.cp-instance-title { + text-align: center; + font-family: "IBM Plex Mono"; + font-weight: 500; + color: @cryptpad_color_brand; + font-size: 2.8rem; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + } + .cp-home-hero { width: 100%; - margin-bottom: 50px; 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; - color: @cryptpad_color_brand; - margin-top: 1.5em; + margin: 0 auto; + flex-grow: 1; + max-width: unset; img { max-width: 200px; margin-bottom: 1.5em; } - margin-left: 0; h1 { font-family: "IBM Plex Mono"; font-weight: 500; - //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; - //font-family: "Raleway"; + color: @cryptpad_color_brand; font-size: 3.7rem; } .tag-line { text-align: center; font-size: 1.4em; - color: @cp_static-link; + } + .cp-instance-location { + margin-top: 20px; + i { + font-size: 1.2em; + margin-right: 5px; + } + } + .cp-instance-links { + padding: 1.3rem; + a { + margin: 1.3rem; + } } } @@ -69,15 +94,35 @@ text-decoration: none; } + .cp-apps { + max-width: 575px; + @media screen and (max-width: 990px) { + align-self: baseline; + } + } + .cp-app-grid { - display: flex; - flex-wrap: wrap; - justify-content: space-around; + background-color: @cp_alertify-bg; + border-radius: @infopages-radius-L; + padding: 15px; + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2); + .cp-app-new { + font-size: 1.4em; + line-height: 100%; + color: fade(@cryptpad_text_col, 80%); + i { + margin-right: 5px; + } + } + .cp-app-grid-apps { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } a { margin: 10px; - text-decoration: none; } - @media screen and (max-width: 768px) { + @media screen and (max-width: 990px) { margin-top: 40px; } } @@ -153,6 +198,7 @@ each(@colortheme_apps, { .cp-callout-@{key} { + border-radius: @infopages-radius; i { color: @value; } &:hover { @desat: desaturate(@value, 15%); @@ -161,6 +207,55 @@ } } }); + .cp-app-drive { + display: flex; + flex-direction: row; + margin: 20px 0px; + // font-size: 1.4rem; + a.cp-drive-btn { + color: @cryptpad_text_col; + font-size: 1.5rem; + display: block; + height: min-content; + flex-shrink: 0; + width: fit-content; + padding: 10px; + border-radius: @infopages-radius-L; + margin-right: 25px; + &:visited { + color: @cryptpad_text_col; + } + &:hover { + background-color: fade(@cryptpad_text_col, 10%); + } + i { + color: @cryptpad_color_brand; + margin-right: 10px; + font-size: 1.3em; + } + } + .cp-sub-prompt { + * { + display: block; + } + button { + background-color: @cryptpad_color_link; + color: @cryptpad_text_col_inv; + font-size: 1.4rem; + 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; + } + } + } + } .cp-hidden { display: none !important; } .cp-callout-more { diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less index 07fcc7cb5..f6e417c19 100644 --- a/customize.dist/src/less2/pages/page-login.less +++ b/customize.dist/src/less2/pages/page-login.less @@ -23,11 +23,16 @@ .cp-shadow(); background-color: @cp_static-card-bg; padding: 10px; + margin: 0 10px 10px 10px; + border-radius: @infopages-radius-L; + .cp-login-instance { + margin-bottom: 10px; + } .form-control { - border-radius: 0; + border-radius: @infopages-radius; color: @cryptpad_text_col; background-color: @cp_forms-bg; - margin-bottom: 5px; + margin-bottom: 10px; &:focus { border-color: @cryptpad_color_brand; } @@ -43,14 +48,8 @@ } .extra { margin-top: 1em; - - #register { - border-color: @cryptpad_color_brand; - background: @cryptpad_color_white; - color: @cryptpad_color_brand; - padding: 10px; - border-radius: 0; - margin: 0px; + button.login { + margin-right: 0px; } } } diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less index 1ce8bbd5f..cafeaee05 100644 --- a/customize.dist/src/less2/pages/page-register.less +++ b/customize.dist/src/less2/pages/page-register.less @@ -13,13 +13,9 @@ .cp-container { .form-group { - .checkbox-container { - &:nth-of-type(1) { - margin-top: 2em; - } - &:last-of-type { - margin-bottom: 1em; - } + .cp-register-instance { + text-align: center; + margin-bottom: 10px; } #register { &.btn { @@ -85,12 +81,13 @@ position: relative; z-index: 2; margin-bottom: 100px; + border-radius: @infopages-radius-L; .cp-shadow(); .form-control { - border-radius: 0; + border-radius: @infopages-radius; color: @cryptpad_text_col; background-color: @cp_forms-bg; - margin-top: 5px; + margin-bottom: 10px; &:focus { border-color: @cryptpad_color_brand; } @@ -100,7 +97,7 @@ color: @cryptpad_text_col; } button#register { - margin: 0px; + margin-top: 10px; } } @@ -119,7 +116,7 @@ content: "\f071"; } .red { - color: @cryptpad_color_red; + background-color: @cp_static-danger; } } } diff --git a/customize.dist/terms.html b/customize.dist/terms.html deleted file mode 100644 index f1cf1b429..000000000 --- a/customize.dist/terms.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - CryptPad: Collaboration suite, encrypted and open-source - - - - - - - - diff --git a/customize.dist/what-is-cryptpad.html b/customize.dist/what-is-cryptpad.html deleted file mode 100644 index f1cf1b429..000000000 --- a/customize.dist/what-is-cryptpad.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - CryptPad: Collaboration suite, encrypted and open-source - - - - - - - - diff --git a/docs/example.nginx.conf b/docs/example.nginx.conf index a2d1cb1ce..23139c58c 100644 --- a/docs/example.nginx.conf +++ b/docs/example.nginx.conf @@ -183,7 +183,7 @@ server { # /api/config is loaded once per page load and is used to retrieve # the caching variable which is applied to every other resource # which is loaded during that session. - location ~ ^/api/(config|broadcast).*$ { + location ~ ^/api/.*$ { proxy_pass http://localhost:3000; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; diff --git a/lib/commands/admin-rpc.js b/lib/commands/admin-rpc.js index 57b91c8d6..a291cd969 100644 --- a/lib/commands/admin-rpc.js +++ b/lib/commands/admin-rpc.js @@ -359,6 +359,7 @@ var instanceStatus = function (Env, Server, cb) { instanceDescription: Env.instanceDescription, instanceJurisdiction: Env.instanceJurisdiction, instanceName: Env.instanceName, + instanceNotice: Env.instanceNotice, }); }; diff --git a/lib/decrees.js b/lib/decrees.js index 61f5130df..1d48f0164 100644 --- a/lib/decrees.js +++ b/lib/decrees.js @@ -43,8 +43,11 @@ PROVIDE_AGGREGATE_STATISTICS REMOVE_DONATE_BUTTON BLOCK_DAILY_CHECK +// Customized instance info SET_INSTANCE_JURISDICTION SET_INSTANCE_DESCRIPTION +SET_INSTANCE_NAME +SET_INSTANCE_NOTICE NOT IMPLEMENTED: @@ -196,14 +199,45 @@ commands.SET_SUPPORT_MAILBOX = makeGenericSetter('supportMailbox', function (arg // CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_INSTANCE_PURPOSE', ["development"]]], console.log) commands.SET_INSTANCE_PURPOSE = makeGenericSetter('instancePurpose', args_isString); +var makeTranslation = function (attr) { + return function (Env, args) { + if (!Array.isArray(args)) { throw new Error("INVALID_ARGS"); } + var value = args[0]; + var state = Env[attr]; + + if (typeof(value) === 'string') { + if (state.default === value) { return false; } + state.default = value; + return true; + } + if (value && typeof(value) === 'object') { + var changed = false; + Object.keys(value).forEach(function (lang) { + if (state[lang] === value[lang]) { return; } + state[lang] = value[lang]; + changed = true; + }); + return changed; + } + return false; + }; +}; + // CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_INSTANCE_JURISDICTION', ['France']]], console.log) -commands.SET_INSTANCE_JURISDICTION = makeGenericSetter('instanceJurisdiction', args_isString); +// CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_INSTANCE_JURISDICTION', [{default:'France',de:'Frankreich'}]]], console.log) +commands.SET_INSTANCE_JURISDICTION = makeTranslation('instanceJurisdiction'); // CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_INSTANCE_NAME', ['My Personal CryptPad']]], console.log) -commands.SET_INSTANCE_NAME = makeGenericSetter('instanceDescription', args_isString); +// CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_INSTANCE_NAME', [{default:'My Personal CryptPad', fr: "Mon CryptPad personnel"}]]], console.log) +commands.SET_INSTANCE_NAME = makeTranslation('instanceName'); // CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_INSTANCE_DESCRIPTION', ['A personal instance, hosted for me and nobody else']]], console.log) -commands.SET_INSTANCE_DESCRIPTION = makeGenericSetter('instanceDescription', args_isString); +// CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_INSTANCE_DESCRIPTION', [{default:'A personal server, not intended for public usage', fr: 'Un serveur personnel, non destiné à un usage public'}]]], console.log) +commands.SET_INSTANCE_DESCRIPTION = makeTranslation('instanceDescription'); + +// CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_INSTANCE_NOTICE', ['Our hosting costs have increased during the pandemic. Please consider donating!']]], console.log) +// CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_INSTANCE_NOTICE', [{default:'Our hosting costs have increased during the pandemic. Please consider donating!',fr:'Nos coûts d'hébergement ont augmenté pendant la pandémie. Veuillez envisager de faire un don !']]], console.log) +commands.SET_INSTANCE_NOTICE = makeTranslation('instanceNotice'); // Maintenance: Empty string or an object with a start and end time var isNumber = function (value) { @@ -370,7 +404,7 @@ Decrees.load = function (Env, _cb) { try { handler(void 0, JSON.parse(text)); } catch (err) { - handler(err); + handler(err, text); } next(); }, function (err) { diff --git a/lib/defaults.js b/lib/defaults.js index 524ef0720..f22277538 100644 --- a/lib/defaults.js +++ b/lib/defaults.js @@ -5,6 +5,7 @@ Default.commonCSP = function (Env) { var sandbox = Env.httpSafeOrigin; sandbox = (sandbox && sandbox !== domain? ' ' + sandbox: ''); // Content-Security-Policy + var accounts_api = Env.accounts_api? ' ' + Env.accounts_api: ''; return [ "default-src 'none'", @@ -25,7 +26,7 @@ Default.commonCSP = function (Env) { if you are deploying to production, you'll probably want to remove the ws://* directive */ - "connect-src 'self' blob: " + (/^https:/.test(domain)? 'wss:': domain.replace('http://', 'ws://')) + ' ' + domain + sandbox, + "connect-src 'self' blob: " + (/^https:/.test(domain)? 'wss:': domain.replace('http://', 'ws://')) + ' ' + domain + sandbox + accounts_api, // data: is used by codemirror "img-src 'self' data: blob:" + domain, @@ -54,13 +55,11 @@ Default.httpHeaders = function (Env) { "Permissions-policy":"interest-cohort=()" }; }; + Default.mainPages = function () { return [ 'index', - 'privacy', - 'terms', 'contact', - 'what-is-cryptpad', 'features', 'maintenance' ]; diff --git a/lib/env.js b/lib/env.js index d9c22feaf..bb32f88c0 100644 --- a/lib/env.js +++ b/lib/env.js @@ -73,6 +73,7 @@ module.exports.create = function (config) { fileHost: config.fileHost || undefined, NO_SANDBOX: NO_SANDBOX, httpSafePort: httpSafePort, + accounts_api: config.accounts_api || undefined, // this simplifies integration with an accounts page shouldUpdateNode: !isRecentVersion(), @@ -192,9 +193,10 @@ module.exports.create = function (config) { provideAggregateStatistics: false, updateAvailable: undefined, - instanceName: '', - instanceDescription: '', - instanceJurisdiction: '', + instanceName: {}, + instanceDescription: {}, + instanceJurisdiction: {}, + instanceNotice: {}, myDomain: config.myDomain, mySubdomain: config.mySubdomain, // only exists for the accounts integration @@ -205,7 +207,7 @@ module.exports.create = function (config) { maxWorkers: config.maxWorkers, disableIntegratedTasks: config.disableIntegratedTasks || false, - disableIntegratedEviction: typeof(config.disableIntegratedEviction) === 'undefined'? true: config.disableIntegratedEviction, // XXX 4.11.0 false, + disableIntegratedEviction: typeof(config.disableIntegratedEviction) === 'undefined'? true: config.disableIntegratedEviction, lastEviction: +new Date(), evictionReport: {}, commandTimers: {}, diff --git a/package.json b/package.json index 2bca4dea9..e150fdd03 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "unused-translations": "node ./scripts/translations/unused-translations.js", "test": "node scripts/TestSelenium.js", "test-rpc": "cd scripts/tests && node test-rpc", - "template": "cd customize.dist/src && for page in ../index.html ../privacy.html ../terms.html ../contact.html ../what-is-cryptpad.html ../features.html ../../www/login/index.html ../../www/register/index.html ../../www/user/index.html;do echo $page; cp template.html $page; done;", + "template": "cd customize.dist/src && for page in ../index.html ../contact.html ../features.html ../../www/login/index.html ../../www/register/index.html ../../www/user/index.html;do echo $page; cp template.html $page; done;", "evict-inactive": "node scripts/evict-inactive.js" } } diff --git a/server.js b/server.js index 7c9667d3c..3830a1fbc 100644 --- a/server.js +++ b/server.js @@ -237,6 +237,7 @@ var serveConfig = makeRouteCache(function (host) { enableEmbedding: Env.enableEmbedding, fileHost: Env.fileHost, shouldUpdateNode: Env.shouldUpdateNode || undefined, + listMyInstance: Env.listMyInstance, }, null, '\t'), '});' ].join(';\n') @@ -261,6 +262,22 @@ var serveBroadcast = makeRouteCache(function (host) { app.get('/api/config', serveConfig); app.get('/api/broadcast', serveBroadcast); +var define = function (obj) { + return `define(function (){ + return ${JSON.stringify(obj, null, '\t')}; +});` +}; + +app.get('/api/instance', function (req, res) { // XXX use caching? + res.setHeader('Content-Type', 'text/javascript'); + res.send(define({ + name: Env.instanceName, + description: Env.instanceDescription, + location: Env.instanceJurisdiction, + notice: Env.instanceNotice, + })); +}); + var four04_path = Path.resolve(__dirname + '/customize.dist/404.html'); var fivehundred_path = Path.resolve(__dirname + '/customize.dist/500.html'); var custom_four04_path = Path.resolve(__dirname + '/customize/404.html'); diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less index 4f0737cef..901aa0cd0 100644 --- a/www/admin/app-admin.less +++ b/www/admin/app-admin.less @@ -39,8 +39,7 @@ } } .cp-admin-setlimit-form, - .cp-admin-setjurisdiction-form, - .cp-admin-setdescription-form { + .cp-admin-setter { + button { margin-top: 5px !important; } @@ -208,11 +207,6 @@ input.cp-admin-inval { border-color: red !important; } - input[type="text"], textarea { - &.cp-listing-info[disabled] { - border: 1px solid transparent !important; //1px solid transparent !imprortant;;//none !important; - } - } .cp-admin-nopassword { .cp-admin-pw { diff --git a/www/admin/inner.js b/www/admin/inner.js index 48a8d6c33..c81fa55f8 100644 --- a/www/admin/inner.js +++ b/www/admin/inner.js @@ -62,6 +62,7 @@ define([ 'cp-admin-name', 'cp-admin-description', 'cp-admin-jurisdiction', + 'cp-admin-notice', ], 'quota': [ // Msg.admin_cat_quota 'cp-admin-defaultlimit', @@ -389,7 +390,6 @@ define([ }, }); - // XXX remove emailButton create['email'] = function () { var key = 'email'; var $div = makeBlock(key, true); // Msg.admin_emailHint, Msg.admin_emailTitle @@ -400,7 +400,7 @@ define([ value: ApiConfig.adminEmail || '' }); var $input = $(input); - var innerDiv = h('div.cp-admin-setlimit-form', input); + var innerDiv = h('div.cp-admin-setter.cp-admin-setlimit-form', input); var spinner = UI.makeSpinner($(innerDiv)); $button.click(function () { @@ -429,18 +429,28 @@ define([ return $div; }; - create['jurisdiction'] = function () { + var getInstanceString = function (attr) { + var val = APP.instanceStatus[attr]; + var type = typeof(val); + switch (type) { + case 'string': return val || ''; + case 'object': return val.default || ''; + default: return ''; + } + }; + + create['jurisdiction'] = function () { // TODO make translateable var key = 'jurisdiction'; var $div = makeBlock(key, true); // Msg.admin_jurisdictionHint, Msg.admin_jurisdictionTitle, Msg.admin_jurisdictionButton var $button = $div.find('button').addClass('cp-listing-action').text(Messages.settings_save); - var input = h('input.cp-listing-info', { + var input = h('input', { type: 'text', - value: APP.instanceStatus.instanceJurisdiction || '', + value: getInstanceString('instanceJurisdiction'), placeholder: Messages.owner_unknownUser || '', }); var $input = $(input); - var innerDiv = h('div.cp-admin-setjurisdiction-form', input); + var innerDiv = h('div.cp-admin-setter', input); var spinner = UI.makeSpinner($(innerDiv)); $button.click(function () { @@ -468,6 +478,46 @@ define([ return $div; }; + + create['notice'] = function () { // TODO make translateable + var key = 'notice'; + var $div = makeBlock(key, true); + + var $button = $div.find('button').addClass('cp-listing-action').text(Messages.settings_save); + + var input = h('input', { + type: 'text', + value: getInstanceString('instanceNotice'), + placeholder: '', + }); + var $input = $(input); + var innerDiv = h('div.cp-admin-setter', input); + var spinner = UI.makeSpinner($(innerDiv)); + + $button.click(function () { + spinner.spin(); + $button.attr('disabled', 'disabled'); + sFrameChan.query('Q_ADMIN_RPC', { + cmd: 'ADMIN_DECREE', + data: ['SET_INSTANCE_NOTICE', [$input.val().trim()]] + }, function (e, response) { + $button.removeAttr('disabled'); + spinner.hide(); + if (e || response.error) { + UI.warn(Messages.error); + $input.val(''); + console.error(e, response); + return; + } + UI.log(Messages._getKey('ui_saved', [Messages.admin_noticeTitle])); + }); + }); + + $button.before(innerDiv); + + return $div; + }; + create['instance-info-notice'] = function () { return $(h('div.cp-admin-instance-info-notice.cp-sidebarlayout-element', h('div.alert.alert-info.cp-admin-bigger-alert', [ @@ -478,20 +528,20 @@ define([ )); }; - create['name'] = function () { + create['name'] = function () { // TODO make translateable var key = 'name'; var $div = makeBlock(key, true); // Msg.admin_nameHint, Msg.admin_nameTitle, Msg.admin_nameButton var $button = $div.find('button').addClass('cp-listing-action').text(Messages.settings_save); - var input = h('input.cp-listing-info', { + var input = h('input', { type: 'text', - value: APP.instanceStatus.instanceName || ApiConfig.httpUnsafeOrigin || '', + value: getInstanceString('instanceName') || ApiConfig.httpUnsafeOrigin || '', placeholder: ApiConfig.httpUnsafeOrigin, style: 'margin-bottom: 5px;', }); var $input = $(input); - var innerDiv = h('div.cp-admin-setname-form', input); + var innerDiv = h('div.cp-admin-setter', input); var spinner = UI.makeSpinner($(innerDiv)); $button.click(function () { @@ -519,19 +569,19 @@ define([ return $div; }; - create['description'] = function () { + create['description'] = function () { // TODO support translation var key = 'description'; var $div = makeBlock(key, true); // Msg.admin_descriptionHint - var textarea = h('textarea.cp-admin-description-text.cp-listing-info', { + var textarea = h('textarea.cp-admin-description-text', { placeholder: Messages.home_host || '', - }, APP.instanceStatus.instanceDescription || ''); + }, getInstanceString('instanceDescription')); var $button = $div.find('button').text(Messages.settings_save); $button.addClass('cp-listing-action'); - var innerDiv = h('div.cp-admin-setdescription-form', [ + var innerDiv = h('div.cp-admin-setter', [ textarea, ]); $button.before(innerDiv); @@ -2290,20 +2340,6 @@ define([ if (!Array.isArray(data)) { return void cb('EINVAL'); } APP.instanceStatus = data[0]; console.log("Status", APP.instanceStatus); - -/* - var isListed = Boolean(APP.instanceStatus.listMyInstance); - var $actions = $('.cp-listing-action'); - var $fields = $('.cp-listing-info'); - - if (isListed) { - $actions.removeAttr('disabled'); - $fields.removeAttr('disabled'); - } else { - $actions.attr('disabled', 'disabled'); - $fields.attr('disabled', 'disabled'); - } -*/ cb(); }); }; diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less index d48914532..05bc4f31f 100644 --- a/www/calendar/app-calendar.less +++ b/www/calendar/app-calendar.less @@ -2,6 +2,7 @@ @import (reference) '../../customize/src/less2/include/sidebar-layout.less'; @import (reference) '../../customize/src/less2/include/tools.less'; @import (reference) '../../customize/src/less2/include/avatar.less'; +@import (reference) '../../customize/src/less2/include/variables.less'; &.cp-app-calendar { @@ -117,6 +118,7 @@ .tui-full-calendar-popup-container { background: @cp_flatpickr-bg; color: @cryptpad_text_col; + border-radius: @variables_radius; .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) { display: none; } @@ -182,6 +184,11 @@ .tui-full-calendar-section-allday { width: 100%; height: 32px; + border-radius: @variables_radius; + .tui-full-calendar-ic-checkbox { + margin-left: 5px; + border-radius: 2px; + } } } } @@ -255,7 +262,8 @@ align-items: center; margin-bottom: 20px; input { - width: 100px; + width: 80px; + margin-right: 5px; } } } @@ -273,6 +281,26 @@ #cp-toolbar .cp-calendar-browse { display: flex; align-items: center; + button { + color: @cp_toolbar-fg; + border-color: @cp_toolbar-fg; + &:hover { + background-color: fade(@cp_toolbar-fg, 50%); //XXX check light theme + cursor: pointer; + } + } + } + + .cp-calendar-newevent { + &:hover { + cursor: pointer; + } + } + + .cp-toolbar-bottom-right button, .cp-toolbar-user button { + &:hover { + cursor: pointer; + } } #cp-sidebarlayout-leftside { @@ -300,7 +328,7 @@ display: flex; align-items: center; justify-content: center; - margin: 5px 0; + margin: 5px 0 10px 0; &:not(:first-child) { margin-top: 30px; } @@ -310,12 +338,20 @@ align-items: center; justify-content: space-between; padding: 5px; + border-radius: @variables_radius; + background-color: @cp_sidebar-left-bg; &:not(.cp-unclickable) { cursor: pointer; } .cp-dropdown-container { position: initial; } + button.cp-calendar-actions { + background-color: transparent; + &:hover { + background-color: @cp_sidebar-left-bg; + } + } &.cp-ghost { padding: 0; button { @@ -326,12 +362,19 @@ justify-content: space-between; background: transparent; border: 1px solid @cryptpad_text_col; + border-radius: @variables_radius; + padding: 5px; height: 36px; font: @colortheme_app-font; align-items: center; color: @cryptpad_text_col; &:hover { - background: @cp_sidebar-left-active; + background-color: @cp_sidebar-left-active; + color: @cp_sidebar-left-active-fg; + border: 0px; + } + i { + margin-left: 5px; } } } @@ -339,21 +382,21 @@ margin-bottom: 10px; } &:hover { - background: fade(@cryptpad_text_col, 10%); + background: @cp_sidebar-left-item-bg; } &.cp-restricted { color: @cp_drive-header-fg; } .cp-calendar-icon { - width: 36px; + width: 30px; display: inline-flex; - height: 36px; - margin: -5px; + height: 30px; align-items: center; justify-content: center; + border-radius: @variables_radius; } &.cp-active { - background: @cp_sidebar-left-active; + background-color: @cp_sidebar-left-item-bg; .cp-calendar-inactive { display: none; } diff --git a/www/calendar/inner.js b/www/calendar/inner.js index 2789371ca..8f449bd88 100644 --- a/www/calendar/inner.js +++ b/www/calendar/inner.js @@ -616,7 +616,7 @@ define([ text: '', options: options, // Entries displayed in the menu common: common, - buttonCls: 'btn btn-cancel fa fa-ellipsis-h small' + buttonCls: 'btn btn-default fa fa-gear small cp-calendar-actions' }; return UIElements.createDropdown(dropdownConfig)[0]; }; diff --git a/www/checkup/dependency-warning.js b/www/checkup/dependency-warning.js index f55a83b6a..fd07c939b 100644 --- a/www/checkup/dependency-warning.js +++ b/www/checkup/dependency-warning.js @@ -12,6 +12,7 @@ var first = true; window.addEventListener('error', function (ev) { + if (window.CHECKUP_MAIN_LOADED) { return; } if (!ev) { return; } var srcElement = ev.srcElement; if (!srcElement) { return; } diff --git a/www/checkup/main.js b/www/checkup/main.js index 01192cfce..4632dfd9a 100644 --- a/www/checkup/main.js +++ b/www/checkup/main.js @@ -22,6 +22,8 @@ define([ ], function ($, ApiConfig, Assertions, h, Messages, DomReady, nThen, SFCommonO, Login, Hash, Util, Pinpad, NetConfig, Pages, Tools, AppConfig) { + window.CHECKUP_MAIN_LOADED = true; + var Assert = Assertions(); var trimSlashes = function (s) { if (typeof(s) !== 'string') { return s; } @@ -73,6 +75,7 @@ define([ var trimmedSafe = trimSlashes(ApiConfig.httpSafeOrigin); var trimmedUnsafe = trimSlashes(ApiConfig.httpUnsafeOrigin); var fileHost = ApiConfig.fileHost; + var accounts_api = ApiConfig.accounts_api || AppConfig.accounts_api || undefined; var getAPIPlaceholderPath = function (relative) { var absolute; @@ -984,7 +987,7 @@ define([ API_URL.origin, isHTTPS(fileHost)? fileHost: undefined, // support for cryptpad.fr configuration - AppConfig.accounts_api, + accounts_api, ![trimmedUnsafe, trimmedSafe].includes(ACCOUNTS_URL)? ACCOUNTS_URL: undefined, ], @@ -1023,7 +1026,7 @@ define([ $sandbox, API_URL.origin, isHTTPS(fileHost)? fileHost: undefined, - AppConfig.accounts_api, + accounts_api, ![trimmedUnsafe, trimmedSafe].includes(ACCOUNTS_URL)? ACCOUNTS_URL: undefined, ], 'img-src': ["'self'", 'data:', 'blob:', $outer], @@ -1364,6 +1367,55 @@ define([ }); }); + assert(function (cb, msg) { + var url = '/api/instance'; + msg.appendChild(h('span', [ + link(url, url), + " did not load as expected. This is most likely caused by a missing directive in your reverse proxy or an outdated version of the API server.", + ])); + + require([ + `optional!${url}`, + ], function (Instance) { + // if the URL fails to load then an empty object will be returned + // this can be interpreted as a failure, even though the rest of the platform should still work + if (!Object.keys(Instance).length) { + return void cb(Instance); + } + cb(true); + }); + }); + + assert(function (cb, msg) { + if (!ApiConfig.listMyInstance) { return void cb(true); } + msg.appendChild(h('span', [ + "The administrators of this instance have opted in to inclusion in ", + link('https://cryptpad.org/instances/', 'the public instance directory'), + ' but have not configured at least one of the expected ', + code('description'), + ' or ', + code('location'), + ' text fields via the instance admin panel.', + ])); + var expected = [ + 'description', + 'location', + //'name', + // 'notice', + ]; + + var url = '/api/instance'; + require([ + `optional!${url}`, + ], function (Instance) { + var good = expected.every(function (k) { + var val = Instance[k]; + return (val && typeof(val) === 'object' && typeof(val.default) === 'string' && val.default.trim()); + }); + return void cb(good || Instance); + }); + }); + var serverToken; Tools.common_xhr('/', function (xhr) { serverToken = xhr.getResponseHeader('server'); diff --git a/www/common/application_config_internal.js b/www/common/application_config_internal.js index 09999d500..49b4aa26c 100644 --- a/www/common/application_config_internal.js +++ b/www/common/application_config_internal.js @@ -96,7 +96,7 @@ define(function() { * * See the comments above for a description of possible configurations. */ - AppConfig.terms = true; + AppConfig.terms = false; /* The terms of CryptPad's license require that its source code be made available * to anyone who uses the software. If you have not made any modifications to the platform @@ -194,12 +194,18 @@ define(function() { whiteboard: 'cptools-whiteboard', todo: 'cptools-todo', contacts: 'fa-address-book', + calendar: 'fa-calendar', kanban: 'cptools-kanban', doc: 'fa-file-word-o', presentation: 'fa-file-powerpoint-o', sheet: 'fa-file-excel-o', drive: 'fa-hdd-o', teams: 'fa-users', + admin: 'fa-gears', + settings: 'fa-gear', + profile: 'fa-user-circle', + support: 'fa-life-ring', + accounts: 'fa-ticket' }; // Ability to create owned pads and expiring pads through a new pad creation screen. diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 944212896..96f7629cf 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -1731,6 +1731,14 @@ define([ var padType = metadataMgr.getMetadata().type; var options = []; + options.push({ + tag: 'div', + attributes: {'class': 'cp-user-menu-logo'}, + content: h('span', [ + h('img', {src: '/customize/CryptPad_logo_grey.svg',alt: 'CryptPad logo',}), + h('span.cp-user-menu-logo-text', "CryptPad") + ]), + }); if (config.displayNameCls) { var userAdminContent = []; if (accountName) { diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 053f2809d..607c1d1b1 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -626,6 +626,7 @@ define([ // UI containers var $tree = APP.$tree = $("#cp-app-drive-tree"); var $content = APP.$content = $("#cp-app-drive-content"); + var $contentContainer = APP.$content = $("#cp-app-drive-content-container"); var $appContainer = $(".cp-app-drive-container"); var $driveToolbar = APP.toolbar.$bottom; var $contextMenu = createContextMenu(common).appendTo($appContainer); @@ -635,6 +636,26 @@ define([ var $trashTreeContextMenu = $("#cp-app-drive-context-trashtree"); var $trashContextMenu = $("#cp-app-drive-context-trash"); + + var splitter = h('div.cp-splitter', [ + h('i.fa.fa-ellipsis-v') + ]); + $contentContainer.append(splitter); + APP.$splitter = $(splitter).on('mousedown', function (e) { + e.preventDefault(); + var x = e.pageX; + var w = $tree.width(); + var handler = function (evt) { + if (evt.type === 'mouseup') { + $(window).off('mouseup mousemove', handler); + return; + } + $tree.css('width', (w - x + evt.pageX) + 'px'); + }; + $(window).off('mouseup mousemove', handler); + $(window).on('mouseup mousemove', handler); + }); + // TOOLBAR // DRIVE @@ -3391,6 +3412,7 @@ define([ APP.toolbar.$bottomL.append(APP.$collapseButton); APP.$collapseButton.off('click').on('click', function () { APP.$tree.toggle(); + APP.$splitter.toggle(APP.$tree.is(':visible')); checkCollapseButton(); }); }; diff --git a/www/common/media-tag.js b/www/common/media-tag.js index 133e64805..264fbb462 100644 --- a/www/common/media-tag.js +++ b/www/common/media-tag.js @@ -149,6 +149,7 @@ var factory = function () { justify-content: center; box-sizing: border-box; vertical-align: top; + border-radius: 5px; } .mediatag-progress-bar { position: absolute; diff --git a/www/common/requireconfig.js b/www/common/requireconfig.js index 9068b2623..f94936df7 100644 --- a/www/common/requireconfig.js +++ b/www/common/requireconfig.js @@ -8,6 +8,7 @@ define([ // json plugin text: '/bower_components/requirejs-plugins/lib/text', json: '/bower_components/requirejs-plugins/src/json', + optional: '/lib/optional/optional', // jquery declares itself as literally "jquery" so it cannot be pulled by path :( "jquery": "/bower_components/jquery/dist/jquery.min", "mermaid": "/lib/mermaid/mermaid.min", diff --git a/www/common/toolbar.js b/www/common/toolbar.js index 11772ca06..147359f06 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -463,15 +463,18 @@ MessengerUI, Messages, Pages) { createCollapse = function (toolbar) { var up = h('i.fa.fa-chevron-up', {title: Messages.toolbar_collapse}); var down = h('i.fa.fa-chevron-down', {title: Messages.toolbar_expand}); + var notif = h('span.cp-collapsed-notif'); var $button = $(h('button.cp-toolbar-collapse',[ up, - down + down, + notif ])); var $up = $(up); var $down = $(down); toolbar.$bottomR.prepend($button); $down.hide(); + $(notif).hide(); $button.click(function () { toolbar.$top.toggleClass('toolbar-hidden'); var hidden = toolbar.$top.hasClass('toolbar-hidden'); @@ -482,6 +485,7 @@ MessengerUI, Messages, Pages) { } else { $up.show(); $down.hide(); + $(notif).hide(); } }); }; @@ -574,7 +578,7 @@ MessengerUI, Messages, Pages) { throw new Error("You must provide a `metadataMgr` to display the share button"); } - var $shareBlock = $(h('button.cp-toolar-share-button', [ + var $shareBlock = $(h('button.cp-toolar-share-button.cp-toolbar-button-primary', [ h('i.fa.fa-shhare-alt'), h('span.cp-button-name', Messages.shareButton) ])); @@ -608,7 +612,7 @@ MessengerUI, Messages, Pages) { throw new Error("You must provide a `metadataMgr` to display the access button"); } - var $accessBlock = $(h('button.cp-toolar-access-button', [ + var $accessBlock = $(h('button.cp-toolar-access-button.cp-toolbar-button-primary', [ h('i.fa.fa-unlock-alt'), h('span.cp-button-name', Messages.accessButton) ])); @@ -638,7 +642,7 @@ MessengerUI, Messages, Pages) { throw new Error("You must provide a `metadataMgr` to display the userlist"); } - var $shareBlock = $(h('button.cp-toolar-share-button', [ + var $shareBlock = $(h('button.cp-toolar-share-button.cp-toolbar-button-primary', [ h('i.fa.fa-shhare-alt'), h('span.cp-button-name', Messages.shareButton) ])); @@ -902,7 +906,7 @@ MessengerUI, Messages, Pages) { href: href, title: buttonTitle, 'class': "cp-toolbar-link-logo" - }).append(UIElements.getSvgLogo()); + }).append(UI.getIcon(privateData.app)); var onClick = function (e) { e.preventDefault(); @@ -1179,6 +1183,9 @@ MessengerUI, Messages, Pages) { Common.mailbox.subscribe(['notifications', 'team', 'broadcast', 'reminders'], { onMessage: function (data, el) { + if (toolbar.$top.hasClass('toolbar-hidden')) { + $('.cp-collapsed-notif').css('display', ''); + } if (el) { $(div).prepend(el); } diff --git a/www/form/app-form.less b/www/form/app-form.less index 7f8761996..3266a382c 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -526,6 +526,7 @@ background: @cp_form-bg1; padding: 10px; box-shadow: 0px 0px 15px @cp_shadow-color; + border-radius: @variables_radius; &:not(:last-child) { margin-bottom: 20px; } @@ -881,6 +882,7 @@ background: @cp_form-bg1; padding: 10px; margin-bottom: 20px; + border-radius: @variables_radius; & > *:not(:last-child) { margin-right: 10px; } @@ -903,6 +905,7 @@ padding: 5px; margin-top: -10px; margin-right: -10px; + border-radius: 0px @variables_radius 0px 0px; i { margin-right: 5px; } background: fade(@cryptpad_text_col, 10%); } diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index accff3219..fd1e93458 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -22,10 +22,15 @@ @palette0: @cp_kanban-color0; // Default bg color for header @kanban-colors: @cp_kanban-colors; + @kanban-card-colors: @cp_kanban-card-colors; .kanban-board-header { background-color: @palette0; - color: @cp_kanban-fg; + color: @cryptpad_color_grey_800; + border-radius: @variables_radius @variables_radius 0px 0px; + button.kanban-edit-item { + color: @cryptpad_color_grey_800; + } } .kanban-board { .kanban-board-inner { @@ -34,10 +39,12 @@ max-height: 100%; display: flex; flex-flow: column; + border-radius: @variables_radius; + box-shadow: @cryptpad_ui_shadow; } color: @cp_kanban-fg; button { - color: @cp_kanban-fg; + color: @cryptpad_text_col; } } @@ -52,13 +59,34 @@ // make a numbered class selector for each color .cp-kanban-palette-color@{index}{ background-color: @color !important; + &.cp-kanban-palette-board { + background-color: @color !important; + } &.kanban-board-inner { background-color: fade(@color, 50%) !important; } } } + .kanban-card-colors(@kanban-card-colors; @index) when (@index > 0){ + // loop through the @colors + .kanban-card-colors(@kanban-card-colors; (@index - 1)); + @color: extract(@kanban-card-colors, @index); + // make a numbered class selector for each color + // .cp-kanban-card-color@{index}{ + // background-color: @color !important; + // } + .cp-kanban-palette-color@{index}{ + &.cp-kanban-palette-card { + background-color: @color !important; + } + &.kanban-item { + background-color: @color !important; + } + } + } // call the loop .kanban-colors(@kanban-colors; length(@kanban-colors)); + .kanban-card-colors(@kanban-card-colors; length(@kanban-card-colors)); .cp-kanban-edit-modal { display: flex; @@ -84,9 +112,11 @@ } #cp-kanban-edit-body { border: 1px solid @cp_forms-border; + border-radius: @variables_radius; .CodeMirror { height: 105px; resize: vertical; + border-radius: 0px 0px @variables_radius @variables_radius; } .CodeMirror-scroll { box-sizing: content-box; @@ -94,6 +124,7 @@ .cp-markdown-toolbar { background-color: @cp_kanban-conflict-bg; color: @cp_kanban-fg; + border-radius: @variables_radius @variables_radius 0px 0px; button { &:hover { background-color: @cp_kanban-fg; @@ -115,6 +146,9 @@ line-height: 30px; color: @cp_kanban-fg; border: 1px solid fade(@cp_kanban-fg, 40%); + &.fa-check { // tick on selected color + color: @cryptpad_text_col; + } } } #cp-kanban-edit-tags { @@ -177,8 +211,10 @@ align-items: center; justify-content: space-between; padding: 5px; + border-radius: @variables_radius; flex-wrap: wrap; background: @cp_kanban-item-bg; + box-shadow: @cryptpad_ui_shadow; .tools_unselectable(); touch-action: none; cursor: move; @@ -253,6 +289,7 @@ padding: 0 5px; margin-right: 5px; margin-top: 5px; + border-radius: @variables_radius; background-color: @cp_kanban-tags-bg; display: inline-block; font-size: 12px; @@ -294,8 +331,8 @@ } main { - padding: 0 10px; - margin: 10px 0; + padding: 10px 5px; + //margin: 10px 0; flex: 1; overflow-y: auto; justify-content: space-around; @@ -330,8 +367,8 @@ } } footer { - margin: 10px; - margin-top: 0px; + margin: 5px; + margin-top: 5px; display: flex; span { .tools_unselectable(); @@ -339,7 +376,7 @@ width: 50%; border: 1px solid fade(@cp_kanban-fg, 70%); color: fade(@cp_kanban-fg, 70%); - border-radius: 0px; + border-radius: @variables_radius; font-size: 25px; display: inline-flex; justify-content: center; @@ -423,6 +460,7 @@ margin-right: 5px; margin-top: 5px; background-color: @cp_kanban-tags-bg; + border-radius: @variables_radius; display: inline-block; font-size: 14px; cursor: pointer; @@ -448,6 +486,12 @@ &:hover { background-color: darken(@board-bg, 10%); } + &:first-child { + border-radius: @variables_radius 0px 0px @variables_radius; + } + &:last-child { + border-radius: 0px @variables_radius @variables_radius 0px; + } } } } @@ -459,16 +503,16 @@ background-color: @cp_kanban-fg !important; color: @cp_app-bg; } - span.cp-kanban-view-small { - } + // span.cp-kanban-view-small { + // } } } } &.cp-kanban-quick { #cp-kanban-controls { .cp-kanban-changeView { - span.cp-kanban-view { - } + // span.cp-kanban-view { + // } span.cp-kanban-view-small { background-color: @cp_kanban-fg !important; color: @cp_app-bg; @@ -561,6 +605,7 @@ width: 50px; margin: 10px 5px; border: 1px solid @cp_kanban-fg; + border-radius: @variables_radius; color: @cp_kanban-fg; height: 40px; display: inline-flex; @@ -658,6 +703,6 @@ .form-group { text-align: right; - margin-button: 5px; + margin-bottom: 5px; } } diff --git a/www/kanban/inner.js b/www/kanban/inner.js index c3de0e0e8..75e01e658 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -363,6 +363,18 @@ define([ var palette = ['']; for (var i=1; i<=8; i++) { palette.push('color'+i); } var selectedColor = ''; + var resetThemeClass = function () { + $colors.find('.cp-kanban-palette').each(function (i, el) { + var $c = $(el); + $c.removeClass('cp-kanban-palette-card'); + $c.removeClass('cp-kanban-palette-board'); + if (isBoard) { + $c.addClass('cp-kanban-palette-board'); + } else { + $c.addClass('cp-kanban-palette-card'); + } + }); + }; palette.forEach(function (color) { var $color = $(h('span.cp-kanban-palette.fa')); $color.addClass('cp-kanban-palette-'+(color || 'nocolor')); @@ -383,6 +395,7 @@ define([ return selectedColor; }, setValue: function (color) { + resetThemeClass(); $colors.find('.cp-kanban-palette').removeClass('fa-check'); var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor')); $col.addClass('fa-check'); diff --git a/www/lib/changelog.md b/www/lib/changelog.md index 433a8e104..2ae4af7a2 100644 --- a/www/lib/changelog.md +++ b/www/lib/changelog.md @@ -10,4 +10,5 @@ This file is intended to be used as a log of what third-party source we have ven * [pdfjs](https://mozilla.github.io/pdf.js/) with some minor modifications to prevent CSP errors * [mermaid 9.0.0](https://github.com/mermaid-js/mermaid/releases/tag/8.13.4) extends our markdown integration to support a variety of diagram types * [Fabricjs 4.6.0](https://github.com/fabricjs/fabric.js) and [Fabric-history](https://github.com/lyzerk/fabric-history) for the whiteboard app +* [Requirejs optional module plugin](https://stackoverflow.com/a/27422370) diff --git a/www/lib/optional/optional.js b/www/lib/optional/optional.js new file mode 100644 index 000000000..4c4c0b8ca --- /dev/null +++ b/www/lib/optional/optional.js @@ -0,0 +1,33 @@ +define("optional", [], { + load : function (moduleName, parentRequire, onload, config){ + + var onLoadSuccess = function(moduleInstance){ + // Module successfully loaded, call the onload callback so that + // requirejs can work its internal magic. + onload(moduleInstance); + } + + var onLoadFailure = function(err){ + // optional module failed to load. + var failedId = err.requireModules && err.requireModules[0]; + console.warn("Could not load optional module: " + failedId); + + // Undefine the module to cleanup internal stuff in requireJS + requirejs.undef(failedId); + + // Now define the module instance as a simple empty object + // (NOTE: you can return any other value you want here) + define(failedId, [], function(){return {};}); + + // Now require the module make sure that requireJS thinks + // that is it loaded. Since we've just defined it, requirejs + // will not attempt to download any more script files and + // will just call the onLoadSuccess handler immediately + parentRequire([failedId], onLoadSuccess); + } + + parentRequire([moduleName], onLoadSuccess, onLoadFailure, { + accept: 'application/json', + }); + } +}); diff --git a/www/secureiframe/app-secure.less b/www/secureiframe/app-secure.less index 76956019b..3b7a76a1a 100644 --- a/www/secureiframe/app-secure.less +++ b/www/secureiframe/app-secure.less @@ -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; } @@ -43,11 +44,13 @@ } .cp-filepicker-content-element { + border-radius: @variables_radius; width: 125px; //min-width: 200px; //height: 1em; padding: 10px; margin: 5px; + border-radius: @variables_radius; display: inline-flex; flex-flow: column; diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less index 3d4577e99..6bd4874dd 100644 --- a/www/settings/app-settings.less +++ b/www/settings/app-settings.less @@ -32,6 +32,7 @@ margin-right: 5px; } .cp-settings-cursor-color-picker { + border-radius: @variables_radius; display: inline-block; vertical-align: middle; height: 25px; diff --git a/www/settings/inner.js b/www/settings/inner.js index 96683ae5e..6d4c920ac 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -1450,7 +1450,7 @@ define([ $('