diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index 706cacbd7..8626066e0 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -32,52 +32,7 @@ //background-color: #BBBBFF; background-color: @toolbar-default-bg; - color: @toolbar-default-color;/* - &.pad { - @bgcolor: @toolbar-pad-bg; - @color: @toolbar-pad-color; - background-color: @bgcolor; - color: @color; - } - &.code { - @bgcolor: @toolbar-code-bg; - @color: @toolbar-code-color; - background-color: @bgcolor; - color: @color; - .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside { - lighten($bgcolor, 15%); - } - } - &.slide { - @bgcolor: @toolbar-slide-bg; - @color: @toolbar-slide-color; - background-color: @toolbar-default-bg 150px); - border-bottom: 2px solid @color; - } - &.poll { - @bgcolor: @toolbar-poll-bg; - @color: @toolbar-poll-color; - background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); - border-bottom: 2px solid @color; - } - &.whiteboard { - @bgcolor: @toolbar-whiteboard-bg; - @color: @toolbar-whiteboard-color; - background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); - border-bottom: 2px solid @color; - } - &.drive { - @bgcolor: @toolbar-drive-bg; - @color: @toolbar-drive-color; - background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); - border-bottom: 2px solid @color; - } - &.file { - @bgcolor: @toolbar-file-bg; - @color: @toolbar-file-color; - background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); - border-bottom: 2px solid @color; - }*/ + color: @toolbar-default-color; .addToolbarColors (@color, @bg-color) { background-color: @bgcolor; @@ -118,7 +73,6 @@ color: @color; } .dropdown-bar-content { - line-height: 14px; background: darken(@bgcolor, 5%); border: 1px solid @color; color: @color; @@ -208,6 +162,9 @@ margin: 0; background: transparent; } + .dropdown-bar-content { + line-height: 14px; + } } .separator { @@ -523,12 +480,17 @@ flex-flow: row; height: @toolbar-top-height; position: relative; + .filler { + height: 100%; + display: inline-block; + order: 4; + flex: 1; + } .cryptpad-title { order: 3; height: 100%; display: inline-block; line-height: @toolbar-top-height; - flex: 1; margin-left: 20px; .title, .pencilIcon, .saveIcon { font-size: 25px; @@ -632,6 +594,9 @@ background-color: rgba(0,0,0,0.5); } order: 1; + .fa { + margin: 0; + } a.cryptpad-logo { cursor: pointer; font-size: 1em; @@ -644,7 +609,7 @@ .cryptpad-user { height: 100%; display: inline-block; - order: 4; + order: 5; line-height: @toolbar-top-height; &> * { display: inline-block; @@ -714,17 +679,37 @@ border-radius: 0; padding: 0 10px; } + .drawer-content:empty ~ .drawer-button { + display: none; + } .drawer-content { position: absolute; right:0px; top:96px; - width: 50px; + min-width: 50px; background: white; border: 1px solid black; - display: none; + display: flex; + flex-flow: column; + z-index:1000; + &> span { + box-sizing: border-box; + width: 150px; + height: 26px; + border-radius: 0; + border: 0; + &:not(:last-child) { + border-bottom: 1px solid rgba(0,0,0,0.2); + } + button { + border: 0; + } + } button { - text-align: center; width: 100%; + } + &> button { + text-align: center; margin: 0; border-radius: 0; border: 1px solid transparent; diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index 7a63bc9df..70bcff7a2 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -106,52 +106,6 @@ padding: 0px; background-color: #ddd; color: #000; - /* - &.pad { - @bgcolor: @toolbar-pad-bg; - @color: @toolbar-pad-color; - background-color: @bgcolor; - color: @color; - } - &.code { - @bgcolor: @toolbar-code-bg; - @color: @toolbar-code-color; - background-color: @bgcolor; - color: @color; - .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside { - lighten($bgcolor, 15%); - } - } - &.slide { - @bgcolor: @toolbar-slide-bg; - @color: @toolbar-slide-color; - background-color: @toolbar-default-bg 150px); - border-bottom: 2px solid @color; - } - &.poll { - @bgcolor: @toolbar-poll-bg; - @color: @toolbar-poll-color; - background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); - border-bottom: 2px solid @color; - } - &.whiteboard { - @bgcolor: @toolbar-whiteboard-bg; - @color: @toolbar-whiteboard-color; - background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); - border-bottom: 2px solid @color; - } - &.drive { - @bgcolor: @toolbar-drive-bg; - @color: @toolbar-drive-color; - background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); - border-bottom: 2px solid @color; - } - &.file { - @bgcolor: @toolbar-file-bg; - @color: @toolbar-file-color; - background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px); - border-bottom: 2px solid @color; - }*/ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -204,7 +158,6 @@ color: #fff; } .cryptpad-toolbar.pad .dropdown-bar-content { - line-height: 14px; background: #18448a; border: 1px solid #fff; color: #fff; @@ -271,7 +224,6 @@ color: #000; } .cryptpad-toolbar.code .dropdown-bar-content { - line-height: 14px; background: #e69d00; border: 1px solid #000; color: #000; @@ -338,7 +290,6 @@ color: #fff; } .cryptpad-toolbar.slide .dropdown-bar-content { - line-height: 14px; background: #ce6a12; border: 1px solid #fff; color: #fff; @@ -405,7 +356,6 @@ color: #fff; } .cryptpad-toolbar.poll .dropdown-bar-content { - line-height: 14px; background: #004a03; border: 1px solid #fff; color: #fff; @@ -472,7 +422,6 @@ color: #fff; } .cryptpad-toolbar.whiteboard .dropdown-bar-content { - line-height: 14px; background: #670066; border: 1px solid #fff; color: #fff; @@ -539,7 +488,6 @@ color: #fff; } .cryptpad-toolbar.drive .dropdown-bar-content { - line-height: 14px; background: #0079e6; border: 1px solid #fff; color: #fff; @@ -606,7 +554,6 @@ color: #fff; } .cryptpad-toolbar.file .dropdown-bar-content { - line-height: 14px; background: #b7212d; border: 1px solid #fff; color: #fff; @@ -648,6 +595,9 @@ margin: 0; background: transparent; } +.cryptpad-toolbar .dropdown-bar .dropdown-bar-content { + line-height: 14px; +} .cryptpad-toolbar .separator { content: ''; display: inline-block; @@ -961,12 +911,17 @@ height: 64px; position: relative; } +.cryptpad-toolbar-top .filler { + height: 100%; + display: inline-block; + order: 4; + flex: 1; +} .cryptpad-toolbar-top .cryptpad-title { order: 3; height: 100%; display: inline-block; line-height: 64px; - flex: 1; margin-left: 20px; } .cryptpad-toolbar-top .cryptpad-title .title, @@ -1073,6 +1028,9 @@ .cryptpad-toolbar-top .cryptpad-link:hover { background-color: rgba(0, 0, 0, 0.5); } +.cryptpad-toolbar-top .cryptpad-link .fa { + margin: 0; +} .cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo { cursor: pointer; font-size: 1em; @@ -1084,7 +1042,7 @@ .cryptpad-toolbar-top .cryptpad-user { height: 100%; display: inline-block; - order: 4; + order: 5; line-height: 64px; } .cryptpad-toolbar-top .cryptpad-user > * { @@ -1152,26 +1110,46 @@ border-radius: 0; padding: 0 10px; } +.cryptpad-toolbar-rightside .drawer-content:empty ~ .drawer-button { + display: none; +} .cryptpad-toolbar-rightside .drawer-content { position: absolute; right: 0px; top: 96px; - width: 50px; + min-width: 50px; background: white; border: 1px solid black; - display: none; + display: flex; + flex-flow: column; + z-index: 1000; +} +.cryptpad-toolbar-rightside .drawer-content > span { + box-sizing: border-box; + width: 150px; + height: 26px; + border-radius: 0; + border: 0; +} +.cryptpad-toolbar-rightside .drawer-content > span:not(:last-child) { + border-bottom: 1px solid rgba(0, 0, 0, 0.2); +} +.cryptpad-toolbar-rightside .drawer-content > span button { + border: 0; } .cryptpad-toolbar-rightside .drawer-content button { - text-align: center; width: 100%; +} +.cryptpad-toolbar-rightside .drawer-content > button { + text-align: center; margin: 0; border-radius: 0; border: 1px solid transparent; } -.cryptpad-toolbar-rightside .drawer-content button:hover { +.cryptpad-toolbar-rightside .drawer-content > button:hover { border: 1px solid transparent; } -.cryptpad-toolbar-rightside .drawer-content button:not(:last-child) { +.cryptpad-toolbar-rightside .drawer-content > button:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .cryptpad-toolbar-history { diff --git a/www/code/main.js b/www/code/main.js index e9f42dae3..6e0270285 100644 --- a/www/code/main.js +++ b/www/code/main.js @@ -196,6 +196,7 @@ define([ CodeMirror.init(config.onLocal, Title, toolbar); var $rightside = toolbar.$rightside; + var $drawer = toolbar.$drawer; var editHash; if (!readOnly) { @@ -215,7 +216,7 @@ define([ $toolbar: $bar }; var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig}); - $rightside.append($hist); + $drawer.append($hist); /* save as template */ if (!Cryptpad.isTemplate(window.location.href)) { @@ -230,12 +231,12 @@ define([ /* add an export button */ var $export = Cryptpad.createButton('export', true, {}, CodeMirror.exportText); - $rightside.append($export); + $drawer.append($export); if (!readOnly) { /* add an import button */ var $import = Cryptpad.createButton('import', true, {}, CodeMirror.importText); - $rightside.append($import); + $drawer.append($import); } /* add a forget button */ diff --git a/www/common/common-codemirror.js b/www/common/common-codemirror.js index ca53b8887..75da658b8 100644 --- a/www/common/common-codemirror.js +++ b/www/common/common-codemirror.js @@ -21,12 +21,14 @@ define([ var Title; var onLocal = function () {}; var $rightside; + var $drawer; exp.init = function (local, title, toolbar) { if (typeof local === "function") { onLocal = local; } Title = title; $rightside = toolbar.$rightside; + $drawer = toolbar.$drawer; }; var editor = exp.editor = CMeditor.fromTextArea($textarea[0], { @@ -156,7 +158,7 @@ define([ onLocal(); }); - if ($rightside) { $rightside.append($block); } + if ($drawer) { $drawer.append($block); } if (cb) { cb(); } }; @@ -194,7 +196,7 @@ define([ localStorage.setItem(themeKey, theme); }); - if ($rightside) { $rightside.append($block); } + if ($drawer) { $drawer.append($block); } if (cb) { cb(); } }; diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index 26295c14a..fb19e0f52 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -1100,7 +1100,7 @@ define([ case 'more': button = $('