web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Small improvements for the new toolbar

Browse Source
This commit is contained in:
yflory 2017-06-22 11:13:53 +02:00
parent 8d956c3de6
commit 92b6e60573
7 changed files with 95 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
customize.dist/src/less/toolbar.less
View File

@ -32,52 +32,7 @@
//background-color: #BBBBFF; //background-color: #BBBBFF;
background-color: @toolbar-default-bg; background-color: @toolbar-default-bg;
color: @toolbar-default-color;/* 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;
}*/
.addToolbarColors (@color, @bg-color) { .addToolbarColors (@color, @bg-color) {
background-color: @bgcolor; background-color: @bgcolor;
@ -118,7 +73,6 @@
color: @color; color: @color;
} }
.dropdown-bar-content { .dropdown-bar-content {
line-height: 14px;
background: darken(@bgcolor, 5%); background: darken(@bgcolor, 5%);
border: 1px solid @color; border: 1px solid @color;
color: @color; color: @color;
@ -208,6 +162,9 @@
margin: 0; margin: 0;
background: transparent; background: transparent;
} }
.dropdown-bar-content {
line-height: 14px;
}
} }
.separator { .separator {
@ -523,12 +480,17 @@
flex-flow: row; flex-flow: row;
height: @toolbar-top-height; height: @toolbar-top-height;
position: relative; position: relative;
.filler {
height: 100%;
display: inline-block;
order: 4;
flex: 1;
}
.cryptpad-title { .cryptpad-title {
order: 3; order: 3;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
line-height: @toolbar-top-height; line-height: @toolbar-top-height;
flex: 1;
margin-left: 20px; margin-left: 20px;
.title, .pencilIcon, .saveIcon { .title, .pencilIcon, .saveIcon {
font-size: 25px; font-size: 25px;
@ -632,6 +594,9 @@
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
} }
order: 1; order: 1;
.fa {
margin: 0;
}
a.cryptpad-logo { a.cryptpad-logo {
cursor: pointer; cursor: pointer;
font-size: 1em; font-size: 1em;
@ -644,7 +609,7 @@
.cryptpad-user { .cryptpad-user {
height: 100%; height: 100%;
display: inline-block; display: inline-block;
order: 4; order: 5;
line-height: @toolbar-top-height; line-height: @toolbar-top-height;
&> * { &> * {
display: inline-block; display: inline-block;
@ -714,17 +679,37 @@
border-radius: 0; border-radius: 0;
padding: 0 10px; padding: 0 10px;
} }
.drawer-content:empty ~ .drawer-button {
display: none;
}
.drawer-content { .drawer-content {
position: absolute; position: absolute;
right:0px; right:0px;
top:96px; top:96px;
width: 50px; min-width: 50px;
background: white; background: white;
border: 1px solid black; 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 { button {
text-align: center;
width: 100%; width: 100%;
}
&> button {
text-align: center;
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
border: 1px solid transparent; border: 1px solid transparent;

98
customize.dist/toolbar.css
View File

@ -106,52 +106,6 @@
padding: 0px; padding: 0px;
background-color: #ddd; background-color: #ddd;
color: #000; 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-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -204,7 +158,6 @@
color: #fff; color: #fff;
} }
.cryptpad-toolbar.pad .dropdown-bar-content { .cryptpad-toolbar.pad .dropdown-bar-content {
line-height: 14px;
background: #18448a; background: #18448a;
border: 1px solid #fff; border: 1px solid #fff;
color: #fff; color: #fff;
@ -271,7 +224,6 @@
color: #000; color: #000;
} }
.cryptpad-toolbar.code .dropdown-bar-content { .cryptpad-toolbar.code .dropdown-bar-content {
line-height: 14px;
background: #e69d00; background: #e69d00;
border: 1px solid #000; border: 1px solid #000;
color: #000; color: #000;
@ -338,7 +290,6 @@
color: #fff; color: #fff;
} }
.cryptpad-toolbar.slide .dropdown-bar-content { .cryptpad-toolbar.slide .dropdown-bar-content {
line-height: 14px;
background: #ce6a12; background: #ce6a12;
border: 1px solid #fff; border: 1px solid #fff;
color: #fff; color: #fff;
@ -405,7 +356,6 @@
color: #fff; color: #fff;
} }
.cryptpad-toolbar.poll .dropdown-bar-content { .cryptpad-toolbar.poll .dropdown-bar-content {
line-height: 14px;
background: #004a03; background: #004a03;
border: 1px solid #fff; border: 1px solid #fff;
color: #fff; color: #fff;
@ -472,7 +422,6 @@
color: #fff; color: #fff;
} }
.cryptpad-toolbar.whiteboard .dropdown-bar-content { .cryptpad-toolbar.whiteboard .dropdown-bar-content {
line-height: 14px;
background: #670066; background: #670066;
border: 1px solid #fff; border: 1px solid #fff;
color: #fff; color: #fff;
@ -539,7 +488,6 @@
color: #fff; color: #fff;
} }
.cryptpad-toolbar.drive .dropdown-bar-content { .cryptpad-toolbar.drive .dropdown-bar-content {
line-height: 14px;
background: #0079e6; background: #0079e6;
border: 1px solid #fff; border: 1px solid #fff;
color: #fff; color: #fff;
@ -606,7 +554,6 @@
color: #fff; color: #fff;
} }
.cryptpad-toolbar.file .dropdown-bar-content { .cryptpad-toolbar.file .dropdown-bar-content {
line-height: 14px;
background: #b7212d; background: #b7212d;
border: 1px solid #fff; border: 1px solid #fff;
color: #fff; color: #fff;
@ -648,6 +595,9 @@
margin: 0; margin: 0;
background: transparent; background: transparent;
} }
.cryptpad-toolbar .dropdown-bar .dropdown-bar-content {
line-height: 14px;
}
.cryptpad-toolbar .separator { .cryptpad-toolbar .separator {
content: ''; content: '';
display: inline-block; display: inline-block;
@ -961,12 +911,17 @@
height: 64px; height: 64px;
position: relative; position: relative;
} }
.cryptpad-toolbar-top .filler {
height: 100%;
display: inline-block;
order: 4;
flex: 1;
}
.cryptpad-toolbar-top .cryptpad-title { .cryptpad-toolbar-top .cryptpad-title {
order: 3; order: 3;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
line-height: 64px; line-height: 64px;
flex: 1;
margin-left: 20px; margin-left: 20px;
} }
.cryptpad-toolbar-top .cryptpad-title .title, .cryptpad-toolbar-top .cryptpad-title .title,
@ -1073,6 +1028,9 @@
.cryptpad-toolbar-top .cryptpad-link:hover { .cryptpad-toolbar-top .cryptpad-link:hover {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
.cryptpad-toolbar-top .cryptpad-link .fa {
margin: 0;
}
.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo { .cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo {
cursor: pointer; cursor: pointer;
font-size: 1em; font-size: 1em;
@ -1084,7 +1042,7 @@
.cryptpad-toolbar-top .cryptpad-user { .cryptpad-toolbar-top .cryptpad-user {
height: 100%; height: 100%;
display: inline-block; display: inline-block;
order: 4; order: 5;
line-height: 64px; line-height: 64px;
} }
.cryptpad-toolbar-top .cryptpad-user > * { .cryptpad-toolbar-top .cryptpad-user > * {
@ -1152,26 +1110,46 @@
border-radius: 0; border-radius: 0;
padding: 0 10px; padding: 0 10px;
} }
.cryptpad-toolbar-rightside .drawer-content:empty ~ .drawer-button {
display: none;
}
.cryptpad-toolbar-rightside .drawer-content { .cryptpad-toolbar-rightside .drawer-content {
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 96px; top: 96px;
width: 50px; min-width: 50px;
background: white; background: white;
border: 1px solid black; 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 { .cryptpad-toolbar-rightside .drawer-content button {
text-align: center;
width: 100%; width: 100%;
}
.cryptpad-toolbar-rightside .drawer-content > button {
text-align: center;
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
border: 1px solid transparent; border: 1px solid transparent;
} }
.cryptpad-toolbar-rightside .drawer-content button:hover { .cryptpad-toolbar-rightside .drawer-content > button:hover {
border: 1px solid transparent; 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); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
} }
.cryptpad-toolbar-history { .cryptpad-toolbar-history {

7
www/code/main.js
View File

@ -196,6 +196,7 @@ define([
CodeMirror.init(config.onLocal, Title, toolbar); CodeMirror.init(config.onLocal, Title, toolbar);
var $rightside = toolbar.$rightside; var $rightside = toolbar.$rightside;
var $drawer = toolbar.$drawer;
var editHash; var editHash;
if (!readOnly) { if (!readOnly) {
@ -215,7 +216,7 @@ define([
$toolbar: $bar $toolbar: $bar
}; };
var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig}); var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
$rightside.append($hist); $drawer.append($hist);
/* save as template */ /* save as template */
if (!Cryptpad.isTemplate(window.location.href)) { if (!Cryptpad.isTemplate(window.location.href)) {
@ -230,12 +231,12 @@ define([
/* add an export button */ /* add an export button */
var $export = Cryptpad.createButton('export', true, {}, CodeMirror.exportText); var $export = Cryptpad.createButton('export', true, {}, CodeMirror.exportText);
$rightside.append($export); $drawer.append($export);
if (!readOnly) { if (!readOnly) {
/* add an import button */ /* add an import button */
var $import = Cryptpad.createButton('import', true, {}, CodeMirror.importText); var $import = Cryptpad.createButton('import', true, {}, CodeMirror.importText);
$rightside.append($import); $drawer.append($import);
} }
/* add a forget button */ /* add a forget button */

6
www/common/common-codemirror.js
View File

@ -21,12 +21,14 @@ define([
var Title; var Title;
var onLocal = function () {}; var onLocal = function () {};
var $rightside; var $rightside;
var $drawer;
exp.init = function (local, title, toolbar) { exp.init = function (local, title, toolbar) {
if (typeof local === "function") { if (typeof local === "function") {
onLocal = local; onLocal = local;
} }
Title = title; Title = title;
$rightside = toolbar.$rightside; $rightside = toolbar.$rightside;
$drawer = toolbar.$drawer;
}; };
var editor = exp.editor = CMeditor.fromTextArea($textarea[0], { var editor = exp.editor = CMeditor.fromTextArea($textarea[0], {
@ -156,7 +158,7 @@ define([
onLocal(); onLocal();
}); });
if ($rightside) { $rightside.append($block); } if ($drawer) { $drawer.append($block); }
if (cb) { cb(); } if (cb) { cb(); }
}; };
@ -194,7 +196,7 @@ define([
localStorage.setItem(themeKey, theme); localStorage.setItem(themeKey, theme);
}); });
if ($rightside) { $rightside.append($block); } if ($drawer) { $drawer.append($block); }
if (cb) { cb(); } if (cb) { cb(); }
}; };

2
www/common/cryptpad-common.js
View File

@ -1100,7 +1100,7 @@ define([
case 'more': case 'more':
button = $('<button>', { button = $('<button>', {
title: Messages.moreActions || 'TODO', title: Messages.moreActions || 'TODO',
'class': "fa fa-ellipsis-h", 'class': "drawer-button fa fa-ellipsis-h",
style: 'font:'+size+' FontAwesome' style: 'font:'+size+' FontAwesome'
}); });
break; break;

14
www/common/toolbar2.js
View File

@ -33,7 +33,7 @@ define([
var LAG_CLS = Bar.constants.lag = 'cryptpad-lag'; var LAG_CLS = Bar.constants.lag = 'cryptpad-lag';
var LIMIT_CLS = Bar.constants.lag = 'cryptpad-limit'; var LIMIT_CLS = Bar.constants.lag = 'cryptpad-limit';
var TITLE_CLS = Bar.constants.title = "cryptpad-title"; var TITLE_CLS = Bar.constants.title = "cryptpad-title";
var NEWPAD_CLS = Bar.constants.newpad = "cryptpad-newpad"; var NEWPAD_CLS = Bar.constants.newpad = "cryptpad-new";
var UPGRADE_CLS = Bar.constants.upgrade = "cryptpad-upgrade"; var UPGRADE_CLS = Bar.constants.upgrade = "cryptpad-upgrade";
// User admin menu // User admin menu
@ -74,6 +74,7 @@ define([
} }
var $topContainer = $('<div>', {'class': TOP_CLS}); var $topContainer = $('<div>', {'class': TOP_CLS});
$('<span>', {'class': 'filler'}).appendTo($topContainer);
var $userContainer = $('<span>', { var $userContainer = $('<span>', {
'class': USER_CLS 'class': USER_CLS
}).appendTo($topContainer); }).appendTo($topContainer);
@ -92,9 +93,9 @@ define([
var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS); var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
if (!config.hideDrawer) { if (!config.hideDrawer) {
var $drawerContent = $('<div>', {'class': 'drawer-content'}).appendTo($rightside); var $drawerContent = $('<div>', {'class': DRAWER_CLS}).appendTo($rightside).hide();
var $drawer = Cryptpad.createButton('more', true).appendTo($rightside); var $drawer = Cryptpad.createButton('more', true).appendTo($rightside);
$drawer.click(function (e) { $drawer.click(function () {
$drawerContent.toggle(); $drawerContent.toggle();
}); });
} }
@ -224,11 +225,6 @@ define([
// Update the buttons // Update the buttons
var fa_editusers = '<span class="fa fa-users"></span>'; var fa_editusers = '<span class="fa fa-users"></span>';
var fa_viewusers = '<span class="fa fa-eye"></span>'; var fa_viewusers = '<span class="fa fa-eye"></span>';
var viewersText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
var editorsText = numberOfEditUsers !== 1 ? Messages.editors : Messages.editor;
//var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
//var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
//$userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
var $spansmall = $('<span>').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers); var $spansmall = $('<span>').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
$userButtons.find('.buttonTitle').html('').append($spansmall); $userButtons.find('.buttonTitle').html('').append($spansmall);
@ -670,7 +666,7 @@ define([
var createNewPad = function (toolbar) { var createNewPad = function (toolbar) {
var $newPad = $('<span>', { var $newPad = $('<span>', {
'class': "cryptpad-new dropdown-bar" 'class': NEWPAD_CLS + " dropdown-bar"
}).appendTo(toolbar.$top); }).appendTo(toolbar.$top);
var pads_options = []; var pads_options = [];

11
www/slide/main.js
View File

@ -366,6 +366,7 @@ define([
CodeMirror.init(config.onLocal, Title, toolbar); CodeMirror.init(config.onLocal, Title, toolbar);
var $rightside = toolbar.$rightside; var $rightside = toolbar.$rightside;
var $drawer = toolbar.$drawer;
var editHash; var editHash;
@ -386,7 +387,7 @@ define([
$toolbar: $bar $toolbar: $bar
}; };
var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig}); var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
$rightside.append($hist); $drawer.append($hist);
/* save as template */ /* save as template */
if (!Cryptpad.isTemplate(window.location.href)) { if (!Cryptpad.isTemplate(window.location.href)) {
@ -401,12 +402,12 @@ define([
/* add an export button */ /* add an export button */
var $export = Cryptpad.createButton('export', true, {}, CodeMirror.exportText); var $export = Cryptpad.createButton('export', true, {}, CodeMirror.exportText);
$rightside.append($export); $drawer.append($export);
if (!readOnly) { if (!readOnly) {
/* add an import button */ /* add an import button */
var $import = Cryptpad.createButton('import', true, {}, CodeMirror.importText); var $import = Cryptpad.createButton('import', true, {}, CodeMirror.importText);
$rightside.append($import); $drawer.append($import);
} }
/* add a forget button */ /* add a forget button */
@ -459,7 +460,7 @@ define([
}, {ok: Messages.printButton}); }, {ok: Messages.printButton});
//$('body').append(createPrintDialog()); //$('body').append(createPrintDialog());
}); });
$rightside.append($printButton); $drawer.append($printButton);
var $slideOptions = $('<button>', { var $slideOptions = $('<button>', {
title: Messages.slideOptionsTitle, title: Messages.slideOptionsTitle,
@ -468,7 +469,7 @@ define([
}).click(function () { }).click(function () {
$('body').append(createPrintDialog()); $('body').append(createPrintDialog());
}); });
$rightside.append($slideOptions); $drawer.append($slideOptions);
var $present = Cryptpad.createButton('present', true) var $present = Cryptpad.createButton('present', true)
.click(function () { .click(function () {