From 24fbe22c9d5028ede6d19b5a90889b9be26606ef Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 12 Oct 2016 18:40:26 +0200 Subject: [PATCH] Improve the toolbar style and the way the userlist is displayed --- customize.dist/DecorateToolbar.js | 2 +- customize.dist/src/toolbar.less | 67 ++++++-- customize.dist/toolbar.css | 70 +++++++-- customize.dist/translations/messages.fr.js | 11 +- customize.dist/translations/messages.js | 10 +- www/code/index.html | 24 ++- www/code/inner.html | 22 +-- www/code/main.js | 21 ++- www/common/cryptpad-common.js | 61 +++++++- www/common/toolbar.js | 169 ++++++++++++++++----- www/pad/main.js | 19 ++- www/slide/index.html | 24 ++- www/slide/inner.html | 16 +- www/slide/main.js | 142 +++++++++-------- www/slide/slide.js | 21 +-- 15 files changed, 493 insertions(+), 186 deletions(-) diff --git a/customize.dist/DecorateToolbar.js b/customize.dist/DecorateToolbar.js index 8f155148f..d6f77ea30 100644 --- a/customize.dist/DecorateToolbar.js +++ b/customize.dist/DecorateToolbar.js @@ -13,7 +13,7 @@ define([ $.ajax({ url: isHtml ? '/customize/BottomBar.html' : '/customize/Header.html', success: function (ret) { - $('iframe').height('96%'); + //:$('iframe').height('96%'); $('body').append(ret); LS.main(); Messages._applyTranslation(); diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less index ff68cb4b7..0d83775a0 100644 --- a/customize.dist/src/toolbar.less +++ b/customize.dist/src/toolbar.less @@ -16,8 +16,6 @@ color: #666; font-weight: bold; - height: 30px; - margin-bottom: -3px; display: inline-block; width: 100%; z-index: 9001; @@ -39,20 +37,40 @@ } } - button { + button, .rightside-element { height: 26px; + padding-right: 5px; + padding-left: 5px; + margin: 2px; + } + + button { background-color: inherit; background-image: linear-gradient(to bottom,#fff,#e4e4e4); border: 1px solid #A6A6A6; border-bottom-color: #979797; border-radius: 3px; - margin-right: 5px; - padding-right: 5px; - padding-left: 5px; &:hover { background-image:linear-gradient(to bottom,#f2f2f2,#ccc); } + &.userlist { + @media screen and (max-width: 800px) { + display: none; + } + @media screen and (min-width: 801px) { + display: inline-block; + } + &.small { + @media screen and (max-width: 800px) { + display: inline-block; + } + @media screen and (min-width: 801px) { + display: none; + } + } + } } + .rightside-button { float: right; cursor: pointer; @@ -63,18 +81,47 @@ float: left; } + .rightside-element { + vertical-align: middle; + white-space: nowrap; + //float: right; + } + select { border: 0px; margin-left: 5px; margin-right: 5px; padding-left: 5px; + border: 1px solid #A6A6A6; + border-bottom-color: #979797; } } .cryptpad-toolbar-leftside { float: left; - div { - float: left; + max-width: 35%; + .cryptpad-dropdown-container { + position: relative; + display: inline-block; + padding: 0px; + .cryptpad-dropdown { + z-index:1000; + display:none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + overflow: auto; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + height: auto; + p { + width: 210px; + padding: 0; + margin: 0; + } + } + } + .cryptpad-userbuttons-container { + display: none; } } @@ -87,6 +134,7 @@ } .cryptpad-spinner { float: left; + display: inline-block; } .cryptpad-readonly { margin-right: 20px; @@ -94,13 +142,12 @@ text-transform: uppercase; } .cryptpad-toolbar-username { - font-style: italic; } .lag { display: inline-block; vertical-align: middle; padding: 0 !important; - margin: 0 !important; + margin: 0 5px !important; height: 15px !important; width: 15px !important; border-radius: 50%; diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index 58d3c07ed..34758d2d0 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -16,8 +16,6 @@ user-select: none; color: #666; font-weight: bold; - height: 30px; - margin-bottom: -3px; display: inline-block; width: 100%; z-index: 9001; @@ -37,20 +35,43 @@ cursor: pointer; color: #000; } -.cryptpad-toolbar button { +.cryptpad-toolbar button, +.cryptpad-toolbar .rightside-element { height: 26px; + padding-right: 5px; + padding-left: 5px; + margin: 2px; +} +.cryptpad-toolbar button { background-color: inherit; background-image: linear-gradient(to bottom, #fff, #e4e4e4); border: 1px solid #A6A6A6; border-bottom-color: #979797; border-radius: 3px; - margin-right: 5px; - padding-right: 5px; - padding-left: 5px; } .cryptpad-toolbar button:hover { background-image: linear-gradient(to bottom, #f2f2f2, #ccc); } +@media screen and (max-width: 800px) { + .cryptpad-toolbar button.userlist { + display: none; + } +} +@media screen and (min-width: 801px) { + .cryptpad-toolbar button.userlist { + display: inline-block; + } +} +@media screen and (max-width: 800px) { + .cryptpad-toolbar button.userlist.small { + display: inline-block; + } +} +@media screen and (min-width: 801px) { + .cryptpad-toolbar button.userlist.small { + display: none; + } +} .cryptpad-toolbar .rightside-button { float: right; cursor: pointer; @@ -59,17 +80,44 @@ cursor: pointer; float: left; } +.cryptpad-toolbar .rightside-element { + vertical-align: middle; + white-space: nowrap; +} .cryptpad-toolbar select { border: 0px; margin-left: 5px; margin-right: 5px; padding-left: 5px; + border: 1px solid #A6A6A6; + border-bottom-color: #979797; } .cryptpad-toolbar-leftside { float: left; + max-width: 35%; } -.cryptpad-toolbar-leftside div { - float: left; +.cryptpad-toolbar-leftside .cryptpad-dropdown-container { + position: relative; + display: inline-block; + padding: 0px; +} +.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown { + z-index: 1000; + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + overflow: auto; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + height: auto; +} +.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p { + width: 210px; + padding: 0; + margin: 0; +} +.cryptpad-toolbar-leftside .cryptpad-userbuttons-container { + display: none; } .cryptpad-toolbar-rightside { text-align: right; @@ -79,20 +127,18 @@ } .cryptpad-spinner { float: left; + display: inline-block; } .cryptpad-readonly { margin-right: 20px; font-weight: bold; text-transform: uppercase; } -.cryptpad-toolbar-username { - font-style: italic; -} .lag { display: inline-block; vertical-align: middle; padding: 0 !important; - margin: 0 !important; + margin: 0 5px !important; height: 15px !important; width: 15px !important; border-radius: 50%; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index f5fe9b09f..6243bf9dc 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -22,7 +22,7 @@ define(function () { out.reconnecting = 'Reconnexion...'; out.lag = 'Latence'; out.readonly = 'Lecture seule'; - out.anonymous = "Vous êtes actuellement anonyme"; + out.anonymous = "nonyme"; out.yourself = "Vous-même"; out.anonymousUsers = "utilisateurs anonymes"; out.anonymousUser = "utilisateur anonyme"; @@ -78,7 +78,14 @@ define(function () { out.readonlyUrl = 'Document en lecture seule'; out.copyReadOnly = "Copier l'URL dans le presse-papiers"; out.openReadOnly = "Ouvrir dans un nouvel onglet"; - + out.editing = "en édition"; + out.viewing = "en lecture"; + out.editShare = "Partager l'URL"; + out.editShareTitle = "Copier l'URL d'édition dans le presse-papiers"; + out.viewShare = "Partager l'URL de lecture"; + out.viewShareTitle = "Copier l'URL d'accès en lecture seule dans le presse-papiers"; + out.viewOpen = "Voir dans un nouvel onglet"; + out.viewOpenTitle = "Ouvrir le document en lecture seule dans un nouvel onglet"; out.disconnectAlert = 'Perte de la connexion au réseau !'; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index d4651ffb2..af2941507 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -22,7 +22,7 @@ define(function () { out.reconnecting = 'Reconnecting...'; out.lag = 'Lag'; out.readonly = 'Read only'; - out.anonymous = "You are currently anonymous"; + out.anonymous = "Anonymous"; out.yourself = "Yourself"; out.anonymousUsers = "anonymous users"; out.anonymousUser = "anonymous user"; @@ -79,6 +79,14 @@ define(function () { out.readonlyUrl = 'Read only document'; out.copyReadOnly = "Copy URL to clipboard"; out.openReadOnly = "Open in a new tab"; + out.editing = "editing"; + out.viewing = "viewing"; + out.editShare = "Share"; + out.editShareTitle = "Copy the edit URL to clipboard"; + out.viewShare = "Share view URL"; + out.viewShareTitle = "Copy the read-only URL to clipboard"; + out.viewOpen = "View in new tab"; + out.viewOpenTitle = "Open the document in read-only mode in a new tab"; out.disconnectAlert = 'Network connection lost!'; diff --git a/www/code/index.html b/www/code/index.html index eee5ba3a8..70d088b49 100644 --- a/www/code/index.html +++ b/www/code/index.html @@ -19,23 +19,35 @@ html, body { overflow-y: hidden; } + #iframe-container { + position: fixed; + top: 2.5em; + bottom: 0px; + right: 0px; + left: 0px; + padding: 0px; + } #pad-iframe { - position:fixed; - top:2.5em; - left:0px; - bottom:0px; - right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; + box-sizing: border-box; + } + /* We use !important here to override the 96% set to the element in DecorateToolbar.js + when we enter fullscreen mode. It allows us to avoid changing the iframe's size in JS */ + #pad-iframe.fullscreen { + top: 0px; + height: 100% !important; } - +
+ +
diff --git a/www/code/inner.html b/www/code/inner.html index 970171ef0..0fba082e5 100644 --- a/www/code/inner.html +++ b/www/code/inner.html @@ -31,24 +31,24 @@ + #iframe-container.fullscreen { + top: 0px; + height: 100% !important; + } + - +
+ +
diff --git a/www/slide/inner.html b/www/slide/inner.html index ad933baa0..82cab120c 100644 --- a/www/slide/inner.html +++ b/www/slide/inner.html @@ -41,6 +41,10 @@ box-sizing: border-box; position: relative; } + body { + display: flex; + flex-flow: column; + } #bar > button { margin: 5px; } @@ -111,21 +115,11 @@ html { height: 100%; } - body { - height: 100%; - margin: 0px; - } .CodeMirror { - position: absolute; - top: 25px; - bottom: 0px; - left: 0px; - right: 0px; - height: auto; + height: 100%; } #cme_toolbox { font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif; - height: 25px; background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(white, #DDDDDD); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(white, #DDDDDD); /* For Firefox 3.6 to 15 */ diff --git a/www/slide/main.js b/www/slide/main.js index 8a96dbd7a..0069586c8 100644 --- a/www/slide/main.js +++ b/www/slide/main.js @@ -328,17 +328,68 @@ define([ onLocal(); }; + var updateTitle = function (newTitle) { + if (newTitle === APP.title) { return; } + // Change the title now, and set it back to the old value if there is an error + var oldTitle = APP.title; + APP.title = newTitle; + setTabTitle(); + Cryptpad.setPadTitle(newTitle, function (err, data) { + if (err) { + console.log("Couldn't set pad title"); + console.error(err); + APP.title = oldTitle; + setTabTitle(); + return; + } + }); + }; + + var updateColors = function (text, back) { + if (text) { + textColor = text; + $modal.css('color', text); + $pad.contents().find('#' + SLIDE_COLOR_ID).css('color', text); + } + if (back) { + backColor = back; + $modal.css('background-color', back); + $pad.contents().find('#' + SLIDE_COLOR_ID).css('background', back); + $pad.contents().find('#' + SLIDE_BACKCOLOR_ID).css('color', back); + } + }; + + var updateMetadata = function(shjson) { + // Extract the user list (metadata) from the hyperjson + var json = (shjson === "") ? "" : JSON.parse(shjson); + if (json && json.metadata) { + if (json.metadata.users) { + var userData = json.metadata.users; + // Update the local user data + addToUserList(userData); + } + if (json.metadata.title) { + updateTitle(json.metadata.title); + } + updateColors(json.metadata.color, json.metadata.backColor); + } + }; + var onInit = config.onInit = function (info) { var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox'); toolbarList = info.userList; var config = { userData: userList, - readOnly: readOnly + readOnly: readOnly, + ifrw: $('#pad-iframe')[0].contentWindow }; if (readOnly) {delete config.changeNameID; } toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config); var $rightside = $bar.find('.' + Toolbar.constants.rightside); + var $userBlock = $bar.find('.' + Toolbar.constants.username); + var $editShare = $bar.find('.' + Toolbar.constants.editShare); + var $viewShare = $bar.find('.' + Toolbar.constants.viewShare); var editHash; var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys); @@ -352,8 +403,8 @@ define([ var usernameCb = function (newName) { setName (newName); }; - var $username = Cryptpad.createButton('username', true, {lastName: lastName}, usernameCb); - $rightside.append($username); + var $username = Cryptpad.createButton('username', false, {lastName: lastName}, usernameCb); + $userBlock.append($username).hide(); }); /* add an export button */ @@ -385,10 +436,18 @@ define([ var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb); $rightside.append($forgetPad); - if (!readOnly && viewHash) { + if (!readOnly) { + var $links = Cryptpad.createButton('editshare', false, {editHash: editHash}); + $editShare.append($links); + } + if (viewHash) { /* add a 'links' button */ - var $links = Cryptpad.createButton('readonly', true, {viewHash: viewHash + '/present'}); - $rightside.append($links); + var $links = Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'}); + $viewShare.append($links); + if (!readOnly) { + var $links = Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'}); + $viewShare.append($links); + } } var $present = Cryptpad.createButton('present', true) @@ -407,13 +466,14 @@ define([ } $rightside.append($leavePresent); - var $language = $('', { - 'style': "margin-right: 10px;" - }).text(Messages.type.slide + " (Markdown)"); - $rightside.append($language); - var configureTheme = function () { + /*var $language = $('', { + 'style': "margin-right: 10px;", + 'class': 'rightside-element' + }).text("Markdown"); + $rightside.append($language);*/ + /* Remember the user's last choice of theme using localStorage */ var themeKey = 'CRYPTPAD_CODE_THEME'; var lastTheme = localStorage.getItem(themeKey) || 'default'; @@ -422,6 +482,7 @@ define([ var $themeDropdown = $('', { type: 'color', value: '!' }); + var $testColor = $('', { type: 'color', value: '!' }); var $check = $pad.contents().find("#colorPicker_check"); if ($testColor.attr('type') !== "color" || $testColor.val() === '!') { return; } // TODO $back.on('click', function() { @@ -488,8 +549,8 @@ define([ $rightside.append($back).append($text); }; - configureTheme(); configureColors(); + configureTheme(); if (presentMode) { $('#top-bar').hide(); @@ -517,53 +578,6 @@ define([ }); }; - var updateTitle = function (newTitle) { - if (newTitle === APP.title) { return; } - // Change the title now, and set it back to the old value if there is an error - var oldTitle = APP.title; - APP.title = newTitle; - setTabTitle(); - Cryptpad.setPadTitle(newTitle, function (err, data) { - if (err) { - console.log("Couldn't set pad title"); - console.error(err); - APP.title = oldTitle; - setTabTitle(); - return; - } - }); - }; - - var updateColors = function (text, back) { - if (text) { - textColor = text; - $modal.css('color', text); - $pad.contents().find('#' + SLIDE_COLOR_ID).css('color', text); - } - if (back) { - backColor = back; - $modal.css('background-color', back); - $pad.contents().find('#' + SLIDE_COLOR_ID).css('background', back); - $pad.contents().find('#' + SLIDE_BACKCOLOR_ID).css('color', back); - } - }; - - var updateMetadata = function(shjson) { - // Extract the user list (metadata) from the hyperjson - var json = (shjson === "") ? "" : JSON.parse(shjson); - if (json && json.metadata) { - if (json.metadata.users) { - var userData = json.metadata.users; - // Update the local user data - addToUserList(userData); - } - if (json.metadata.title) { - updateTitle(json.metadata.title); - } - updateColors(json.metadata.color, json.metadata.backColor); - } - }; - var unnotify = module.unnotify = function () { if (module.tabNotification && typeof(module.tabNotification.cancel) === 'function') { diff --git a/www/slide/slide.js b/www/slide/slide.js index 8e0218e66..b07c1b63d 100644 --- a/www/slide/slide.js +++ b/www/slide/slide.js @@ -18,13 +18,6 @@ define([ var $modal; var $content; var $pad; - Slide.setModal = function ($m, $c, $p, iframe) { - $modal = Slide.$modal = $m; - $content = Slide.$content = $c; - $pad = Slide.$pad = $p; - ifrw = Slide.ifrw = iframe; - addEvent(); - }; Slide.onChange = function (f) { if (typeof(f) === 'function') { @@ -135,6 +128,7 @@ define([ $pad.contents().find('.cryptpad-present-button').hide(); $pad.contents().find('.cryptpad-source-button').show(); $pad.addClass('fullscreen'); + $('#iframe-container').addClass('fullscreen'); $('.top-bar').hide(); return; } @@ -143,6 +137,7 @@ define([ $pad.contents().find('.cryptpad-present-button').show(); $pad.contents().find('.cryptpad-source-button').hide(); $pad.removeClass('fullscreen'); + $('#iframe-container').removeClass('fullscreen'); $('.top-bar').show(); $modal.removeClass('shown'); }; @@ -174,7 +169,7 @@ define([ Slide.draw(i); }; - var first = Slide.first = function () {$ + var first = Slide.first = function () { console.log('first'); Slide.lastIndex = Slide.index; @@ -210,7 +205,7 @@ define([ break; case 35: // end Slide.last(); - break + break; case 27: // esc show(false); break; @@ -220,5 +215,13 @@ define([ }); }; + Slide.setModal = function ($m, $c, $p, iframe) { + $modal = Slide.$modal = $m; + $content = Slide.$content = $c; + $pad = Slide.$pad = $p; + ifrw = Slide.ifrw = iframe; + addEvent(); + }; + return Slide; });