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

Make it clear that the number is the history represents a version

Browse Source
This commit is contained in:
yflory 2017-04-28 13:06:55 +02:00
parent 0ee228666b
commit 16f6ab813c
5 changed files with 72 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,7 +42,7 @@
} }
button { button {
&#shareButton { &#shareButton, &.btn.btn-success {
// Bootstrap 4 colors // Bootstrap 4 colors
color: #fff; color: #fff;
background: @toolbar-green; background: @toolbar-green;
@ -58,7 +58,7 @@
margin-left: 5px; margin-left: 5px;
} }
} }
&#newdoc { &#newdoc, &.btn.btn-primary {
// Bootstrap 4 colors // Bootstrap 4 colors
color: #fff; color: #fff;
background: #0275d8; background: #0275d8;
@ -77,6 +77,18 @@
&.hidden { &.hidden {
display: none; display: none;
} }
// Bootstrap 4 colors (btn-secondary)
border: 1px solid transparent;
border-radius: .25rem;
color: #292b2c;
background-color: #fff;
border-color: #ccc;
&:hover {
color: #292b2c;
background-color: #e6e6e6;
border-color: #adadad;
}
} }
.cryptpad-limit { .cryptpad-limit {
@ -195,17 +207,6 @@
margin-right: 2px; margin-right: 2px;
} }
button {
color: #000;
background-color: inherit;
background-image: linear-gradient(to bottom,#fff,#e4e4e4);
border: 1px solid #A6A6A6;
border-bottom-color: #979797;
border-radius: 3px;
&:hover {
background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
}
}
.cryptpad-state { .cryptpad-state {
line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */ line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
} }
@ -429,13 +430,19 @@
display: none; display: none;
text-align: center; text-align: center;
.next { .next {
float: right; display: inline-block;
vertical-align: middle;
margin: 20px;
} }
.previous { .previous {
float: left; display: inline-block;
vertical-align: middle;
margin: 20px;
} }
.goto { .goto {
display: inline-block; display: inline-block;
vertical-align: middle;
text-align: center;
input { width: 50px; } input { width: 50px; }
} }
.gotoInput { .gotoInput {

57
customize.dist/toolbar.css
View File

@ -117,39 +117,59 @@
.cryptpad-toolbar a { .cryptpad-toolbar a {
float: right; float: right;
} }
.cryptpad-toolbar button#shareButton { .cryptpad-toolbar button {
border: 1px solid transparent;
border-radius: .25rem;
color: #292b2c;
background-color: #fff;
border-color: #ccc;
}
.cryptpad-toolbar button#shareButton,
.cryptpad-toolbar button.btn.btn-success {
color: #fff; color: #fff;
background: #5cb85c; background: #5cb85c;
border-color: #5cb85c; border-color: #5cb85c;
} }
.cryptpad-toolbar button#shareButton:hover { .cryptpad-toolbar button#shareButton:hover,
.cryptpad-toolbar button.btn.btn-success:hover {
background: #449d44; background: #449d44;
border: 1px solid #419641; border: 1px solid #419641;
} }
.cryptpad-toolbar button#shareButton span { .cryptpad-toolbar button#shareButton span,
.cryptpad-toolbar button.btn.btn-success span {
color: #fff; color: #fff;
} }
.cryptpad-toolbar button#shareButton .large { .cryptpad-toolbar button#shareButton .large,
.cryptpad-toolbar button.btn.btn-success .large {
margin-left: 5px; margin-left: 5px;
} }
.cryptpad-toolbar button#newdoc { .cryptpad-toolbar button#newdoc,
.cryptpad-toolbar button.btn.btn-primary {
color: #fff; color: #fff;
background: #0275d8; background: #0275d8;
border-color: #0275d8; border-color: #0275d8;
} }
.cryptpad-toolbar button#newdoc:hover { .cryptpad-toolbar button#newdoc:hover,
.cryptpad-toolbar button.btn.btn-primary:hover {
background: #025aa5; background: #025aa5;
border: 1px solid #01549b; border: 1px solid #01549b;
} }
.cryptpad-toolbar button#newdoc span { .cryptpad-toolbar button#newdoc span,
.cryptpad-toolbar button.btn.btn-primary span {
color: #fff; color: #fff;
} }
.cryptpad-toolbar button#newdoc .large { .cryptpad-toolbar button#newdoc .large,
.cryptpad-toolbar button.btn.btn-primary .large {
margin-left: 5px; margin-left: 5px;
} }
.cryptpad-toolbar button.hidden { .cryptpad-toolbar button.hidden {
display: none; display: none;
} }
.cryptpad-toolbar button:hover {
color: #292b2c;
background-color: #e6e6e6;
border-color: #adadad;
}
.cryptpad-toolbar .cryptpad-limit { .cryptpad-toolbar .cryptpad-limit {
box-sizing: content-box; box-sizing: content-box;
height: 16px; height: 16px;
@ -265,17 +285,6 @@
margin-top: -3px; margin-top: -3px;
margin-right: 2px; margin-right: 2px;
} }
.cryptpad-toolbar button {
color: #000;
background-color: inherit;
background-image: linear-gradient(to bottom, #fff, #e4e4e4);
border: 1px solid #A6A6A6;
border-bottom-color: #979797;
border-radius: 3px;
}
.cryptpad-toolbar button:hover {
background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
}
.cryptpad-toolbar .cryptpad-state { .cryptpad-toolbar .cryptpad-state {
line-height: 32px; line-height: 32px;
/* equivalent to 26px + 2*2px margin used for buttons */ /* equivalent to 26px + 2*2px margin used for buttons */
@ -492,13 +501,19 @@
text-align: center; text-align: center;
} }
.cryptpad-toolbar-history .next { .cryptpad-toolbar-history .next {
float: right; display: inline-block;
vertical-align: middle;
margin: 20px;
} }
.cryptpad-toolbar-history .previous { .cryptpad-toolbar-history .previous {
float: left; display: inline-block;
vertical-align: middle;
margin: 20px;
} }
.cryptpad-toolbar-history .goto { .cryptpad-toolbar-history .goto {
display: inline-block; display: inline-block;
vertical-align: middle;
text-align: center;
} }
.cryptpad-toolbar-history .goto input { .cryptpad-toolbar-history .goto input {
width: 50px; width: 50px;

1
customize.dist/translations/messages.fr.js
View File

@ -133,6 +133,7 @@ define(function () {
out.history_restoreTitle = "Restaurer la version du document sélectionnée"; out.history_restoreTitle = "Restaurer la version du document sélectionnée";
out.history_restorePrompt = "Êtes-vous sûr de vouloir remplacer la version actuelle du document par la version affichée ?"; out.history_restorePrompt = "Êtes-vous sûr de vouloir remplacer la version actuelle du document par la version affichée ?";
out.history_restoreDone = "Document restauré"; out.history_restoreDone = "Document restauré";
out.history_version = "Version :";
// Polls // Polls

1
customize.dist/translations/messages.js
View File

@ -135,6 +135,7 @@ define(function () {
out.history_restoreTitle = "Restore the selected version of the document"; out.history_restoreTitle = "Restore the selected version of the document";
out.history_restorePrompt = "Are you sure you want to replace the current version of the document by the displayed one?"; out.history_restorePrompt = "Are you sure you want to replace the current version of the document by the displayed one?";
out.history_restoreDone = "Document restored"; out.history_restoreDone = "Document restored";
out.history_version = "Version:";
// Polls // Polls

28
www/common/common-history.js
View File

@ -112,9 +112,9 @@ define([
var val = states[i].getContent().doc; var val = states[i].getContent().doc;
c = i; c = i;
if (typeof onUpdate === "function") { onUpdate(); } if (typeof onUpdate === "function") { onUpdate(); }
$hist.find('.next, .previous').show(); $hist.find('.next, .previous').css('visibility', '');
if (c === states.length - 1) { $hist.find('.next').hide(); } if (c === states.length - 1) { $hist.find('.next').css('visibility', 'hidden'); }
if (c === 0) { $hist.find('.previous').hide(); } if (c === 0) { $hist.find('.previous').css('visibility', 'hidden'); }
return val || ''; return val || '';
}; };
@ -132,15 +132,16 @@ define([
$right.hide(); $right.hide();
$cke.hide(); $cke.hide();
var $prev =$('<button>', { var $prev =$('<button>', {
'class': 'previous fa fa-step-backward', 'class': 'previous fa fa-step-backward btn btn-primary',
title: Messages.history_prev title: Messages.history_prev
}).appendTo($hist); }).appendTo($hist);
var $nav = $('<div>', {'class': 'goto'}).appendTo($hist);
var $next = $('<button>', { var $next = $('<button>', {
'class': 'next fa fa-step-forward', 'class': 'next fa fa-step-forward btn btn-primary',
title: Messages.history_next title: Messages.history_next
}).appendTo($hist); }).appendTo($hist);
var $nav = $('<div>', {'class': 'goto'}).appendTo($hist); var $label = $('<label>').text(Messages.history_version).appendTo($nav);
var $cur = $('<input>', { var $cur = $('<input>', {
'class' : 'gotoInput', 'class' : 'gotoInput',
'type' : 'number', 'type' : 'number',
@ -151,19 +152,15 @@ define([
e.stopPropagation(); e.stopPropagation();
}); });
var $label = $('<label>').text(' / '+ states.length).appendTo($nav); var $label = $('<label>').text(' / '+ states.length).appendTo($nav);
var $goTo = $('<button>', {
'class': 'fa fa-check',
'title': Messages.history_goTo
}).appendTo($nav);
$('<br>').appendTo($nav); $('<br>').appendTo($nav);
var $rev = $('<button>', {
'class':'revertHistory',
title: Messages.history_restoreTitle
}).text(Messages.history_restore).appendTo($nav);
var $close = $('<button>', { var $close = $('<button>', {
'class':'closeHistory', 'class':'closeHistory',
title: Messages.history_closeTitle title: Messages.history_closeTitle
}).text(Messages.history_close).appendTo($nav); }).text(Messages.history_close).appendTo($nav);
var $rev = $('<button>', {
'class':'revertHistory btn btn-success',
title: Messages.history_restoreTitle
}).text(Messages.history_restore).appendTo($nav);
onUpdate = function () { onUpdate = function () {
$cur.attr('max', states.length); $cur.attr('max', states.length);
@ -181,7 +178,6 @@ define([
// Buttons actions // Buttons actions
$prev.click(function () { render(getPrevious()); }); $prev.click(function () { render(getPrevious()); });
$next.click(function () { render(getNext()); }); $next.click(function () { render(getNext()); });
$goTo.click(function () { render( get($cur.val() - 1) ); });
$cur.keydown(function (e) { $cur.keydown(function (e) {
var p = function () { e.preventDefault(); }; var p = function () { e.preventDefault(); };
if (e.which === 13) { p(); return render( get($cur.val() - 1) ); } // Enter if (e.which === 13) { p(); return render( get($cur.val() - 1) ); } // Enter
@ -192,7 +188,7 @@ define([
if (e.which === 27) { p(); $close.click(); } if (e.which === 27) { p(); $close.click(); }
}).focus(); }).focus();
$cur.on('change', function () { $cur.on('change', function () {
$goTo.click(); render( get($cur.val() - 1) );
}); });
$close.click(function () { $close.click(function () {
states = []; states = [];