dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Small improvements for the new toolbar

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: @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;

98
customize.dist/toolbar.css
View File

@ -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 {

7
www/code/main.js
View File

@ -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 */

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

@ -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(); }
};

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

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

14
www/common/toolbar2.js
View File

@ -33,7 +33,7 @@ define([
var LAG_CLS = Bar.constants.lag = 'cryptpad-lag';
var LIMIT_CLS = Bar.constants.lag = 'cryptpad-limit';
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";
// User admin menu
@ -74,6 +74,7 @@ define([
}
var $topContainer = $('<div>', {'class': TOP_CLS});
$('<span>', {'class': 'filler'}).appendTo($topContainer);
var $userContainer = $('<span>', {
'class': USER_CLS
}).appendTo($topContainer);
@ -92,9 +93,9 @@ define([
var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
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);
$drawer.click(function (e) {
$drawer.click(function () {
$drawerContent.toggle();
});
}
@ -224,11 +225,6 @@ define([
// Update the buttons
var fa_editusers = '<span class="fa fa-users"></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);
$userButtons.find('.buttonTitle').html('').append($spansmall);
@ -670,7 +666,7 @@ define([
var createNewPad = function (toolbar) {
var $newPad = $('<span>', {
'class': "cryptpad-new dropdown-bar"
'class': NEWPAD_CLS + " dropdown-bar"
}).appendTo(toolbar.$top);
var pads_options = [];

11
www/slide/main.js
View File

@ -366,6 +366,7 @@ define([
CodeMirror.init(config.onLocal, Title, toolbar);
var $rightside = toolbar.$rightside;
var $drawer = toolbar.$drawer;
var editHash;
@ -386,7 +387,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)) {
@ -401,12 +402,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 */
@ -459,7 +460,7 @@ define([
}, {ok: Messages.printButton});
//$('body').append(createPrintDialog());
});
$rightside.append($printButton);
$drawer.append($printButton);
var $slideOptions = $('<button>', {
title: Messages.slideOptionsTitle,
@ -468,7 +469,7 @@ define([
}).click(function () {
$('body').append(createPrintDialog());
});
$rightside.append($slideOptions);
$drawer.append($slideOptions);
var $present = Cryptpad.createButton('present', true)
.click(function () {