From a5cd0bdbff95af5cc06aefa131b505f0a8397d96 Mon Sep 17 00:00:00 2001 From: Alexander Dietrich Date: Sun, 26 Apr 2020 15:10:13 +0200 Subject: [PATCH 001/125] Add privacy policy option --- customize.dist/pages.js | 2 +- www/common/application_config_internal.js | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index e271dd74b..df45d9ef4 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -96,7 +96,7 @@ define([ ]), footerCol('footer_legal', [ footLink('/terms.html', 'footer_tos'), - footLink('/privacy.html', 'privacy'), + footLink(AppConfig.privacy, 'privacy'), AppConfig.imprint ? footLink(imprintUrl, 'imprint') : undefined, ]), /*footerCol('footer_contact', [ diff --git a/www/common/application_config_internal.js b/www/common/application_config_internal.js index ab573ae70..6ce4d9dc5 100644 --- a/www/common/application_config_internal.js +++ b/www/common/application_config_internal.js @@ -40,6 +40,12 @@ define(function() { // config.imprint = true; // config.imprint = 'https://xwiki.com/en/company/legal-notice'; + /* You can display a link to your own privacy policy in the static pages footer. + * To do so, set the following value to the absolute URL of your privacy policy. + */ + config.privacy = '/privacy.html'; + // config.privacy = 'https://xwiki.com/en/company/PrivacyPolicy'; + /* Cryptpad apps use a common API to display notifications to users * by default, notifications are hidden after 5 seconds * You can change their duration here (measured in milliseconds) From c50054904873dc6660fb6e0cdb3831b34bea1aa6 Mon Sep 17 00:00:00 2001 From: Alexander Dietrich Date: Sun, 26 Apr 2020 15:57:10 +0200 Subject: [PATCH 002/125] List premium features only with subscriptions --- customize.dist/pages/features.js | 185 ++++++++++++++++--------------- 1 file changed, 97 insertions(+), 88 deletions(-) diff --git a/customize.dist/pages/features.js b/customize.dist/pages/features.js index 07aed6367..00308fc29 100644 --- a/customize.dist/pages/features.js +++ b/customize.dist/pages/features.js @@ -4,8 +4,9 @@ define([ '/customize/messages.js', '/customize/application_config.js', '/common/outer/local-store.js', - '/customize/pages.js' -], function ($, h, Msg, AppConfig, LocalStore, Pages) { + '/customize/pages.js', + '/api/config', +], function ($, h, Msg, AppConfig, LocalStore, Pages, Config) { var origin = encodeURIComponent(window.location.hostname); var accounts = { donateURL: 'https://accounts.cryptpad.fr/#/donate?on=' + origin, @@ -29,6 +30,98 @@ define([ sessionStorage.redirectTo = '/features.html'; window.location.href = '/login/'; });*/ + + var anonymousFeatures = + h('div.col-12.col-sm-4.cp-anon-user',[ + h('div.card',[ + h('div.card-body',[ + h('h3.text-center',Msg.features_anon) + ]), + h('div.card-body.cp-pricing',[ + h('div.text-center', '0€'), + h('div.text-center', Msg.features_noData), + ]), + h('ul.list-group.list-group-flush', + ['apps', 'core', 'file0', 'cryptdrive0', 'storage0'].map(function (f) { + return h('li.list-group-item', [ + h('div.cp-check'), + h('div.cp-content', [ + h('div.cp-feature', Msg['features_f_' + f]), + h('div.cp-note', Msg['features_f_' + f + '_note']) + ]) + ]); + }) + ), + ]), + ]); + var registeredFeatures = + h('div.col-12.col-sm-4.cp-regis-user',[ + h('div.card',[ + h('div.card-body',[ + h('h3.text-center',Msg.features_registered) + ]), + h('div.card-body.cp-pricing',[ + h('div.text-center', '0€'), + h('div.text-center', Msg.features_noData), + ]), + h('ul.list-group.list-group-flush', [ + ['anon', 'social', 'file1', 'cryptdrive1', 'devices', 'storage1'].map(function (f) { + return h('li.list-group-item', [ + h('div.cp-check'), + h('div.cp-content', [ + h('div.cp-feature', Msg['features_f_' + f]), + h('div.cp-note', Msg['features_f_' + f + '_note']) + ]) + ]); + }), + ]), + h('div.card-body',[ + h('div.cp-features-register#cp-features-register', [ + h('a', { + href: '/register/' + }, h('button.cp-features-register-button', Msg.features_f_register)) + ]), + h('div.cp-note', Msg.features_f_register_note) + ]), + ]), + ]); + var premiumFeatures = + h('div.col-12.col-sm-4.cp-anon-user',[ + h('div.card',[ + h('div.card-body',[ + h('h3.text-center',Msg.features_premium) + ]), + h('div.card-body.cp-pricing',[ + h('div.text-center', h('a', { + href: accounts.upgradeURL, + target: '_blank' + }, Msg._getKey('features_pricing', ['5', '10', '15']))), + h('div.text-center', Msg.features_emailRequired), + ]), + h('ul.list-group.list-group-flush', [ + ['reg', 'storage2', 'support', 'supporter'].map(function (f) { + return h('li.list-group-item', [ + h('div.cp-check'), + h('div.cp-content', [ + h('div.cp-feature', Msg['features_f_' + f]), + h('div.cp-note', Msg['features_f_' + f + '_note']) + ]) + ]); + }), + ]), + h('div.card-body',[ + h('div.cp-features-register#cp-features-subscribe', [ + premiumButton + ]), + LocalStore.isLoggedIn() ? undefined : h('div.cp-note', Msg.features_f_subscribe_note) + ]), + ]), + ]); + var availableFeatures = + Config.allowSubscriptions ? + [anonymousFeatures, registeredFeatures, premiumFeatures] : + [anonymousFeatures, registeredFeatures]; + return h('div#cp-main', [ Pages.infopageTopbar(), h('div.container-fluid.cp_cont_features',[ @@ -36,92 +129,8 @@ define([ h('center', h('h1', Msg.features_title)), ]), ]), - h('div.container',[ - h('div.row.cp-container.cp-features-web.justify-content-sm-center',[ - h('div.col-12.col-sm-4.cp-anon-user',[ - h('div.card',[ - h('div.card-body',[ - h('h3.text-center',Msg.features_anon) - ]), - h('div.card-body.cp-pricing',[ - h('div.text-center', '0€'), - h('div.text-center', Msg.features_noData), - ]), - h('ul.list-group.list-group-flush', - ['apps', 'core', 'file0', 'cryptdrive0', 'storage0'].map(function (f) { - return h('li.list-group-item', [ - h('div.cp-check'), - h('div.cp-content', [ - h('div.cp-feature', Msg['features_f_' + f]), - h('div.cp-note', Msg['features_f_' + f + '_note']) - ]) - ]); - }) - ), - ]), - ]), - h('div.col-12.col-sm-4.cp-regis-user',[ - h('div.card',[ - h('div.card-body',[ - h('h3.text-center',Msg.features_registered) - ]), - h('div.card-body.cp-pricing',[ - h('div.text-center', '0€'), - h('div.text-center', Msg.features_noData), - ]), - h('ul.list-group.list-group-flush', [ - ['anon', 'social', 'file1', 'cryptdrive1', 'devices', 'storage1'].map(function (f) { - return h('li.list-group-item', [ - h('div.cp-check'), - h('div.cp-content', [ - h('div.cp-feature', Msg['features_f_' + f]), - h('div.cp-note', Msg['features_f_' + f + '_note']) - ]) - ]); - }), - ]), - h('div.card-body',[ - h('div.cp-features-register#cp-features-register', [ - h('a', { - href: '/register/' - }, h('button.cp-features-register-button', Msg.features_f_register)) - ]), - h('div.cp-note', Msg.features_f_register_note) - ]), - ]), - ]), - h('div.col-12.col-sm-4.cp-anon-user',[ - h('div.card',[ - h('div.card-body',[ - h('h3.text-center',Msg.features_premium) - ]), - h('div.card-body.cp-pricing',[ - h('div.text-center', h('a', { - href: accounts.upgradeURL, - target: '_blank' - }, Msg._getKey('features_pricing', ['5', '10', '15']))), - h('div.text-center', Msg.features_emailRequired), - ]), - h('ul.list-group.list-group-flush', [ - ['reg', 'storage2', 'support', 'supporter'].map(function (f) { - return h('li.list-group-item', [ - h('div.cp-check'), - h('div.cp-content', [ - h('div.cp-feature', Msg['features_f_' + f]), - h('div.cp-note', Msg['features_f_' + f + '_note']) - ]) - ]); - }), - ]), - h('div.card-body',[ - h('div.cp-features-register#cp-features-subscribe', [ - premiumButton - ]), - LocalStore.isLoggedIn() ? undefined : h('div.cp-note', Msg.features_f_subscribe_note) - ]), - ]), - ]), - ]), + h('div.container', [ + h('div.row.cp-container.cp-features-web.justify-content-sm-center', availableFeatures), ]), Pages.infopageFooter() ]); From 079329cc28825ebea1431952766b24744c065aa9 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 7 May 2020 11:58:58 +0200 Subject: [PATCH 003/125] Rename toolbar file --- www/admin/inner.js | 2 +- www/common/drive-ui.js | 2 +- www/common/onlyoffice/inner.js | 2 +- www/common/sframe-app-framework.js | 2 +- www/common/{toolbar3.js => toolbar.js} | 0 www/contacts/inner.js | 2 +- www/debug/inner.js | 2 +- www/drive/inner.js | 2 +- www/file/inner.js | 2 +- www/notifications/inner.js | 2 +- www/poll/inner.js | 2 +- www/profile/inner.js | 2 +- www/settings/inner.js | 2 +- www/support/inner.js | 2 +- www/teams/inner.js | 2 +- www/todo/inner.js | 2 +- www/worker/inner.js | 2 +- 17 files changed, 16 insertions(+), 16 deletions(-) rename www/common/{toolbar3.js => toolbar.js} (100%) diff --git a/www/admin/inner.js b/www/admin/inner.js index 8a9c2d4f4..9fab8020a 100644 --- a/www/admin/inner.js +++ b/www/admin/inner.js @@ -2,7 +2,7 @@ define([ 'jquery', '/api/config', '/bower_components/chainpad-crypto/crypto.js', - '/common/toolbar3.js', + '/common/toolbar.js', '/bower_components/nthen/index.js', '/common/sframe-common.js', '/common/hyperscript.js', diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index dcb540ee7..db2436692 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -1,6 +1,6 @@ define([ 'jquery', - '/common/toolbar3.js', + '/common/toolbar.js', 'json.sortify', '/common/common-util.js', '/common/common-hash.js', diff --git a/www/common/onlyoffice/inner.js b/www/common/onlyoffice/inner.js index b65aac99d..4ebe813c0 100644 --- a/www/common/onlyoffice/inner.js +++ b/www/common/onlyoffice/inner.js @@ -1,6 +1,6 @@ define([ 'jquery', - '/common/toolbar3.js', + '/common/toolbar.js', 'json.sortify', '/bower_components/nthen/index.js', '/common/sframe-common.js', diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js index 7fc6e6692..8b3f6d4fc 100644 --- a/www/common/sframe-app-framework.js +++ b/www/common/sframe-app-framework.js @@ -1,7 +1,7 @@ define([ 'jquery', '/bower_components/hyperjson/hyperjson.js', - '/common/toolbar3.js', + '/common/toolbar.js', 'json.sortify', '/bower_components/nthen/index.js', '/common/sframe-common.js', diff --git a/www/common/toolbar3.js b/www/common/toolbar.js similarity index 100% rename from www/common/toolbar3.js rename to www/common/toolbar.js diff --git a/www/contacts/inner.js b/www/contacts/inner.js index e63e5cddc..5cd498e63 100644 --- a/www/contacts/inner.js +++ b/www/contacts/inner.js @@ -1,7 +1,7 @@ define([ 'jquery', '/bower_components/chainpad-crypto/crypto.js', - '/common/toolbar3.js', + '/common/toolbar.js', '/bower_components/nthen/index.js', '/common/sframe-common.js', '/common/hyperscript.js', diff --git a/www/debug/inner.js b/www/debug/inner.js index f7857dda5..f73e9120a 100644 --- a/www/debug/inner.js +++ b/www/debug/inner.js @@ -1,7 +1,7 @@ define([ 'jquery', '/bower_components/chainpad-crypto/crypto.js', - '/common/toolbar3.js', + '/common/toolbar.js', 'json.sortify', '/common/common-util.js', '/bower_components/nthen/index.js', diff --git a/www/drive/inner.js b/www/drive/inner.js index 8165a10b0..3d439eda4 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -1,6 +1,6 @@ define([ 'jquery', - '/common/toolbar3.js', + '/common/toolbar.js', '/common/drive-ui.js', '/common/common-util.js', '/common/common-hash.js', diff --git a/www/file/inner.js b/www/file/inner.js index f0753005f..10eba7e7d 100644 --- a/www/file/inner.js +++ b/www/file/inner.js @@ -1,7 +1,7 @@ define([ 'jquery', '/bower_components/chainpad-crypto/crypto.js', - '/common/toolbar3.js', + '/common/toolbar.js', '/bower_components/nthen/index.js', '/common/sframe-common.js', '/common/common-realtime.js', diff --git a/www/notifications/inner.js b/www/notifications/inner.js index 0cc4ad87e..b3813bfa1 100644 --- a/www/notifications/inner.js +++ b/www/notifications/inner.js @@ -2,7 +2,7 @@ define([ 'jquery', '/api/config', '/bower_components/chainpad-crypto/crypto.js', - '/common/toolbar3.js', + '/common/toolbar.js', '/bower_components/nthen/index.js', '/common/sframe-common.js', '/common/hyperscript.js', diff --git a/www/poll/inner.js b/www/poll/inner.js index 204835555..1ca36f1f0 100644 --- a/www/poll/inner.js +++ b/www/poll/inner.js @@ -1,6 +1,6 @@ define([ 'jquery', - '/common/toolbar3.js', + '/common/toolbar.js', '/common/common-util.js', '/bower_components/nthen/index.js', '/common/sframe-common.js', diff --git a/www/profile/inner.js b/www/profile/inner.js index 7bc6c4022..535da563e 100644 --- a/www/profile/inner.js +++ b/www/profile/inner.js @@ -2,7 +2,7 @@ define([ 'jquery', '/bower_components/chainpad-crypto/crypto.js', '/bower_components/chainpad-listmap/chainpad-listmap.js', - '/common/toolbar3.js', + '/common/toolbar.js', '/bower_components/nthen/index.js', '/common/sframe-common.js', '/common/common-util.js', diff --git a/www/settings/inner.js b/www/settings/inner.js index 255670c27..26646ee3c 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -1,6 +1,6 @@ define([ 'jquery', - '/common/toolbar3.js', + '/common/toolbar.js', '/bower_components/nthen/index.js', '/common/sframe-common.js', '/common/common-interface.js', diff --git a/www/support/inner.js b/www/support/inner.js index 701d01817..740109bd3 100644 --- a/www/support/inner.js +++ b/www/support/inner.js @@ -1,6 +1,6 @@ define([ 'jquery', - '/common/toolbar3.js', + '/common/toolbar.js', '/bower_components/nthen/index.js', '/common/sframe-common.js', '/common/common-interface.js', diff --git a/www/teams/inner.js b/www/teams/inner.js index af011167d..1cacec694 100644 --- a/www/teams/inner.js +++ b/www/teams/inner.js @@ -1,6 +1,6 @@ define([ 'jquery', - '/common/toolbar3.js', + '/common/toolbar.js', '/common/drive-ui.js', '/common/common-util.js', '/common/common-hash.js', diff --git a/www/todo/inner.js b/www/todo/inner.js index 75bcb4fb1..2b69077f3 100644 --- a/www/todo/inner.js +++ b/www/todo/inner.js @@ -2,7 +2,7 @@ define([ 'jquery', '/bower_components/chainpad-crypto/crypto.js', '/bower_components/chainpad-listmap/chainpad-listmap.js', - '/common/toolbar3.js', + '/common/toolbar.js', '/bower_components/nthen/index.js', '/common/sframe-common.js', '/common/common-interface.js', diff --git a/www/worker/inner.js b/www/worker/inner.js index 2e6d98153..5a6c39da8 100644 --- a/www/worker/inner.js +++ b/www/worker/inner.js @@ -1,6 +1,6 @@ define([ 'jquery', - '/common/toolbar3.js', + '/common/toolbar.js', '/common/cryptpad-common.js', '/bower_components/nthen/index.js', '/common/sframe-common.js', From a1d9294036c2b43ab57c1d25d0575885fb4f3df7 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 7 May 2020 14:58:27 +0200 Subject: [PATCH 004/125] New topbar in toolbar --- customize.dist/src/less2/include/toolbar.less | 241 ++++++++++-------- www/common/common-ui-elements.js | 18 ++ www/common/toolbar.js | 32 ++- 3 files changed, 174 insertions(+), 117 deletions(-) diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 542d3f35b..b56888e83 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -17,11 +17,13 @@ @warn-color: @colortheme_default-warn // color of the warning text in the toolbar ) { @toolbar-color: @color; + //@toolbar-color: @bg-color; @toolbar-color-l20: lighten(@color, 20%); @toolbar-color-d20: darken(@color, 20%); @toolbar-color-d15: darken(@color, 15%); @toolbar-bg-color: @bg-color; + //@toolbar-bg-color: #FFFFFF; @toolbar-bg-color-l8: lighten(@bg-color, 8%); @toolbar-bg-color-l20: lighten(@bg-color, 20%); @toolbar-bg-color-d5: darken(@bg-color, 5%); @@ -88,7 +90,7 @@ .toolbar_vars(); @toolbar_line-height: 32px; - @toolbar_top-height: 64px; + @toolbar_top-height: 76px; @toolbar_button-font: @colortheme_app-font; // if we spell 'share' correctly, then adblock plus hides the share button @@ -166,7 +168,7 @@ padding: 0; box-sizing: border-box; position: relative; - order: -2; + order: 99; resize: horizontal; z-index: 1; #cp-app-contacts-container { @@ -196,7 +198,7 @@ overflow-x: hidden; padding: 10px; box-sizing: border-box; - order: -3; + order: 100; z-index: 1; .cp-toolbar-userlist-drawer-close { position: absolute; @@ -438,10 +440,17 @@ display: flex; flex-wrap: wrap; justify-content: space-between; +/* +// XXX background-color: @toolbar-bg-color; background-color: var(--toolbar-bg-color); color: @toolbar-color; color: var(--toolbar-color); + */ +background-color: #ffffff; +color: @toolbar-bg-color; +color: var(--toolbar-bg-color); + .fa { font: normal normal normal 14px/1 FontAwesome; @@ -628,57 +637,9 @@ margin: 0; } } - /* - .cp-toolbar-top-filler { - flex: 1; - } - .cp-toolbar-title { - flex: auto; - width: 100%; - order: 10; - height: @toolbar_line-height; - line-height: initial; - margin: 0; - .cp-toolbar-title-hoverable { - width: 100%; - } - .cp-toolbar-title-editable { - max-width: ~"calc(100vw - 26px)"; - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - font-size: @colortheme_app-font-size; - height: @toolbar_line-height; - box-sizing: border-box; - line-height: 20px; - } - .cp-toolbar-title-edit, .cp-toolbar-title-save { - box-sizing: border-box; - height: @toolbar_line-height; - line-height: @colortheme_app-font-size; - display: inline-block; - - .fa { - font-size: @colortheme_app-font-size; - } - } - input { - height: @toolbar_line-height; - font-size: @colortheme_app-font-size; - flex: 1; - max-width: none; - line-height: calc(@toolbar_line-height - 12px); // padding + border - } - } - */ } } - .cp-toolbar-spinner { - font-size: @colortheme_app-font-size; - color: @toolbar-color; - color: var(--toolbar-color); - } .cp-toolbar-limit { text-shadow: -1px 0 @toolbar-color, 0 1px @toolbar-color, 1px 0 @toolbar-color, 0 -1px @toolbar-color; text-shadow: -1px 0 var(--toolbar-color), 0 1px var(--toolbar-color), 1px 0 var(--toolbar-color), 0 -1px var(--toolbar-color); @@ -688,45 +649,7 @@ .cp-toolbar-leftside, .cp-toolbar-rightside { background-color: @toolbar-bg-color-l8; background-color: var(--toolbar-bg-color-l8); - button:hover, button.cp-toolbar-button-active { - background-color: @toolbar-bg-color; - background-color: var(--toolbar-bg-color); - } - } - .cp-toolbar-title-hoverable:hover { - .cp-toolbar-title-editable, .cp-toolbar-title-edit { - cursor: text; - border: 1px solid @toolbar-bg-color-d15; - border: 1px solid var(--toolbar-bg-color-d15); - background: @toolbar-bg-color-d10; - background: var(--toolbar-bg-color-d10); - transition: all 0.15s; - color: @toolbar-color; - color: var(--toolbar-color); - } - .cp-toolbar-title-editable { - cursor: text; - } - } - .cp-toolbar-title-save { - border: 1px solid @toolbar-bg-color-d15; - border: 1px solid var(--toolbar-bg-color-d15); - background: @toolbar-bg-color-d10; - background: var(--toolbar-bg-color-d10); - color: @toolbar-color; - color: var(--toolbar-color); - &:hover { - background: @toolbar-bg-color-d5; - background: var(--toolbar-bg-color-d5); - } - } - input { - border: 1px solid @toolbar-bg-color-d15; - border: 1px solid var(--toolbar-bg-color-d15); - background: @toolbar-bg-color-d10; - background: var(--toolbar-bg-color-d10); - color: @toolbar-color; - color: var(--toolbar-color); + color: #FFF; // XXX } .cp-dropdown-content.cp-dropdown-left a { color: black; @@ -784,34 +707,32 @@ //flex: 1; } .cp-toolbar-title { + color: @cryptpad_text_col; flex: 1; overflow: hidden; text-overflow: ellipsis; order: 3; height: 100%; display: inline-flex; - align-items: center; - line-height: @toolbar_top-height; + flex-flow: column; + justify-content: center; margin: 0 10px; .cp-toolbar-title-value { border: 1px solid transparent; - padding: 5px; - font-size: 25px; + padding: 0 5px; + font-size: 30px; vertical-align: middle; - line-height: 25px; white-space: nowrap; } .cp-toolbar-title-value-page { border: 1px solid transparent; padding: 0 5px; - line-height: 48px; } .cp-toolbar-title-edit, .cp-toolbar-title-save { display: flex; align-items: center; font-size: 20px; vertical-align: middle; - line-height: 20px; .fa { font-size: 20px; } @@ -825,17 +746,30 @@ .cp-toolbar-title-hoverable { display: inline-flex; overflow: hidden; + align-self: baseline; + &:hover { + .cp-toolbar-title-editable, .cp-toolbar-title-edit { + border: 1px solid @toolbar-bg-color-d15; + border: 1px solid var(--toolbar-bg-color-d15); + transition: all 0.15s; + } + .cp-toolbar-title-editable { + cursor: text; + } + } } .cp-toolbar-title-edit { cursor: pointer; border: 1px solid transparent; - padding: 5px; + padding: 0 5px; border-collapse: collapse; span { cursor: pointer; } } .cp-toolbar-title-save { + border: 1px solid @toolbar-bg-color-d15; + border: 1px solid var(--toolbar-bg-color-d15); cursor: pointer; padding: 5px; border-collapse: collapse; @@ -849,38 +783,48 @@ border-collapse: collapse; } input { + color: @cryptpad_text_col; + border: 1px solid @toolbar-bg-color-d15; + border: 1px solid var(--toolbar-bg-color-d15); max-width: ~"calc(100% - 40px)"; //flex: 1; vertical-align: middle; box-sizing: border-box; cursor: auto; width: 300px; - font-size: 20px; - padding: 5px 5px; - height: 40px; - line-height: 28px; // padding + border + font-size: 30px; + padding: 0 5px; + height: 43px; } } .cp-toolbar-link, .cp-toolbar-new, .cp-toolbar-notifications { font-size: 48px; - line-height: 64px; - width: @toolbar_top-height; + line-height: @toolbar_top-height; + width: 64px; height: @toolbar_top-height; padding: 0; box-sizing: border-box; display: inline-block; +/* + // XXX color: white; a { color: white; } transition: all 0.15s; + */ + } .cp-toolbar-notifications, .cp-toolbar-new { +/* + // XXX background-color: rgba(0,0,0,0.2); &:hover { background-color: rgba(0,0,0,0.3); } + */ + text-align: center; font-size: 32px; &> button { @@ -890,7 +834,7 @@ width: 64px; font-size: 1em; color: inherit; - height: 64px; + height: @toolbar_top-height; padding: 0px; margin: 0; &::before { @@ -899,7 +843,6 @@ padding-top: 4px; } &:hover { - background-color: initial; border-color: transparent; } span { @@ -940,10 +883,15 @@ align-items: center; justify-content: center; cursor: pointer; +/* +// XXX background-color: rgba(0,0,0,0.4); &:hover { background-color: rgba(0,0,0,0.5); } + */ + + order: 1; .fa { margin: 0; @@ -955,6 +903,13 @@ height: auto; padding: 10px; + svg { + * { + fill: @toolbar-bg-color; + fill: var(--toolbar-bg-color); + } + } + img { cursor: pointer; height: 100%; @@ -967,7 +922,11 @@ display: inline-flex; order: 6; line-height: @toolbar_top-height; - color: white; +/* +// XXX + color: white; + */ + .cp-toolbar-notifications { order: 1; } .cp-toolbar-new { order: 2; } .cp-toolbar-user-dropdown { order: 3; } @@ -980,16 +939,20 @@ .cp-toolbar-user-dropdown { z-index: 10000; //Z cp-toolbar-user-dropdown //margin-left: 20px; - height: 64px; + height: @toolbar_top-height; width: 64px; padding: 0px; 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; overflow: visible; @@ -998,7 +961,7 @@ display: flex; justify-content: center; align-items: center; - height: 64px; + height: @toolbar_top-height; width: 64px; padding: 0; span { @@ -1037,6 +1000,58 @@ } } + .cp-toolbar-bottom { + background-color: @toolbar-bg-color-l8; + background-color: var(--toolbar-bg-color-l8); + color: #FFF; // XXX + button:hover, button.cp-toolbar-button-active { + background-color: @toolbar-bg-color; + background-color: var(--toolbar-bg-color); + } + + display: inline-flex; + align-items: center; + justify-content: space-between; + max-width: 100%; + flex: 1 1 auto; + &:empty { + height: 0; + } + .cp-toolbar-users { + pre { + /* needed for ckeditor */ + white-space: pre; + margin: 5px 0px; + } + } + button { + margin: 0px; + border-radius: 0; + height: 100%; + } + .cp-dropdown-content { + margin-top: -1px; + } + + & > span { + height: @toolbar_line-height; + } + + + .cp-toolbar-bottom-left { + order: 1; + } + .cp-toolbar-bottom-mid { + order: 2; + } + .cp-toolbar-bottom-right { + order: 3; + display: flex; + #cp-toolbar-chat-drawer-open { order: 0; } + #cp-toolbar-userlist-drawer-open { order: 1; } + } + } + .cp-toolbar-leftside { //height: @toolbar_line-height; &:empty { @@ -1188,13 +1203,17 @@ } } .cp-toolbar-spinner { - line-height: @toolbar_line-height; - padding: 0 20px; + color: @cryptpad_text_col; + font-size: 14px; + padding: 0 8px; + height: 20px; + line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 200px; box-sizing: border-box; + margin-bottom: 5px; &> span.fa { height: 20px; width: 20px; diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index fe28eb6d0..d364512b6 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -21,6 +21,24 @@ define([ Messages, AppConfig, Pages, NThen, InviteInner, Visible) { var UIElements = {}; + UIElements.getSvgLogo = function () { + var svg = (function(){/* + + + + + image/svg+xml + + + + + + + +*/}).toString().slice(14,-3); + return svg; + }; + UIElements.prettySize = function (bytes) { var kB = Util.bytesToKilobytes(bytes); if (kB < 1024) { return kB + Messages.KB; } diff --git a/www/common/toolbar.js b/www/common/toolbar.js index e2be585d1..f2edb7c7c 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -24,6 +24,10 @@ MessengerUI, Messages) { // Toolbar parts var TOOLBAR_CLS = Bar.constants.toolbar = 'cp-toolbar'; var TOP_CLS = Bar.constants.top = 'cp-toolbar-top'; + var BOTTOM_CLS = Bar.constants.bottom = 'cp-toolbar-bottom'; + var BOTTOM_LEFT_CLS = Bar.constants.bottomL = 'cp-toolbar-bottom-left'; + var BOTTOM_MID_CLS = Bar.constants.bottomM = 'cp-toolbar-bottom-mid'; + var BOTTOM_RIGHT_CLS = Bar.constants.bottomR = 'cp-toolbar-bottom-right'; var LEFTSIDE_CLS = Bar.constants.leftside = 'cp-toolbar-leftside'; var RIGHTSIDE_CLS = Bar.constants.rightside = 'cp-toolbar-rightside'; var DRAWER_CLS = Bar.constants.drawer = 'cp-toolbar-drawer-content'; @@ -77,10 +81,19 @@ MessengerUI, Messages) { $('', {'class': NEWPAD_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer); $('', {'class': USERADMIN_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer); + /* $toolbar.append($topContainer) .append($('
', {'class': LEFTSIDE_CLS})) .append($('
', {'class': RIGHTSIDE_CLS})) .append($('
', {'class': HISTORY_CLS})); + */ + $toolbar.append($topContainer); + var $bottom = $(h('div.'+BOTTOM_CLS, [ + h('div.'+BOTTOM_LEFT_CLS), + h('div.'+BOTTOM_MID_CLS), + h('div.'+BOTTOM_RIGHT_CLS) + ])).appendTo($toolbar); + $toolbar.append(h('div.'+HISTORY_CLS)); var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS); if (!config.hideDrawer) { @@ -398,7 +411,7 @@ MessengerUI, Messages) { var $button = $('