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

Replace spinner by text and fix mobile UI

Browse Source
This commit is contained in:
yflory 2017-07-12 14:30:28 +02:00
parent 7f5c301734
commit b3e225cb3b
6 changed files with 104 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -302,8 +302,8 @@ body .cryptpad-toolbar {
z-index: 9001; z-index: 9001;
.dropdown-bar { .dropdown-bar {
height: 100%; //height: 100%;
display: inline-block; //display: inline-block;
button { button {
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
@ -620,6 +620,32 @@ body .cryptpad-toolbar {
} }
} }
.app-slide {
@media screen and (max-width: @media-medium-screen) {
.cryptpad-toolbar-leftside {
flex-flow: row wrap;
width: 175px;
height: auto;
.cryptpad-spinner { order: 0; }
}
.cryptpad-toolbar-rightside {
height: 2*@toolbar-line-height;
}
}
@media screen and (max-width: 320px) {
.cryptpad-toolbar-leftside {
flex-flow: row wrap;
width: 175px;
height: auto;
padding-top: @toolbar-line-height;
.cryptpad-spinner { order: 0; }
}
.cryptpad-toolbar-rightside {
height: auto;
}
}
}
.cryptpad-toolbar-top { .cryptpad-toolbar-top {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
@ -727,7 +753,6 @@ body .cryptpad-toolbar {
&:hover { &:hover {
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.3);
} }
order: 2;
text-align: center; text-align: center;
font-size: 32px; font-size: 32px;
margin-left: 10px; margin-left: 10px;
@ -785,10 +810,14 @@ body .cryptpad-toolbar {
} }
.cryptpad-user { .cryptpad-user {
height: 100%; height: 100%;
display: inline-block; display: inline-flex;
order: 5; order: 5;
line-height: @toolbar-top-height; line-height: @toolbar-top-height;
color: white; color: white;
.cryptpad-upgrade { order: 1; }
.cryptpad-new { order: 2; }
.cryptpad-user-dropdown { order: 3; }
.cryptpad-backup { order: 4; }
&> * { &> * {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
@ -837,6 +866,14 @@ body .cryptpad-toolbar {
} }
} }
} }
p.accountData {
&> span {
font-weight: bold;
span {
font-weight: normal;
}
}
}
.cryptpad-backup { .cryptpad-backup {
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
@ -848,12 +885,14 @@ body .cryptpad-toolbar {
} }
} }
.cryptpad-toolbar-leftside { .cryptpad-toolbar-leftside {
height: @toolbar-line-height; //height: @toolbar-line-height;
&:empty { &:empty {
height: 0; height: 0;
} }
float: left; float: left;
margin-bottom: -1px; display: inline-flex;
align-items: center;
//margin-bottom: -1px;
.cryptpad-dropdown-users { .cryptpad-dropdown-users {
pre { pre {
/* needed for ckeditor */ /* needed for ckeditor */
@ -869,17 +908,22 @@ body .cryptpad-toolbar {
.dropdown-bar-content { .dropdown-bar-content {
margin-top: -1px; margin-top: -1px;
} }
.limit-container a {
height: 26px; & > span {
margin: 3px 0; height: @toolbar-line-height;
line-height: 26px; }
padding: 0 5px;
box-sizing: border-box; #userButtons { order: 1; }
border: 1px solid transparent; .shareButton { order: 2; }
font-size: 14px; .cryptpad-spinner { order: 3; }
&:hover {
text-decoration: none; #userButtons button {
} width: 125px;
text-align: center;
}
.shareButton button {
width: 50px;
text-align: center;
} }
} }
.cryptpad-toolbar-rightside { .cryptpad-toolbar-rightside {
@ -986,11 +1030,12 @@ body .cryptpad-toolbar {
} }
} }
.cryptpad-spinner { .cryptpad-spinner {
line-height: @toolbar-top-height; line-height: @toolbar-line-height;
padding: 0 20px;
&> span.fa { &> span.fa {
height: 20px; height: 20px;
width: 20px; width: 20px;
margin: 8px; //margin: 8px;
line-height: 20px; line-height: 20px;
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
@ -1001,16 +1046,6 @@ body .cryptpad-toolbar {
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }
.cryptpad-user {
p.accountData {
&> span {
font-weight: bold;
span {
font-weight: normal;
}
}
}
}
.cryptpad-dropdown-share { .cryptpad-dropdown-share {
a { a {
.fa { .fa {

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

@ -37,6 +37,7 @@ define(function () {
out.disconnected = 'Déconnecté'; out.disconnected = 'Déconnecté';
out.synchronizing = 'Synchronisation'; out.synchronizing = 'Synchronisation';
out.reconnecting = 'Reconnexion...'; out.reconnecting = 'Reconnexion...';
out.typing = "Édition";
out.lag = 'Latence'; out.lag = 'Latence';
out.readonly = 'Lecture seule'; out.readonly = 'Lecture seule';
out.anonymous = "Anonyme"; out.anonymous = "Anonyme";

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

@ -41,6 +41,7 @@ define(function () {
out.disconnected = 'Disconnected'; out.disconnected = 'Disconnected';
out.synchronizing = 'Synchronizing'; out.synchronizing = 'Synchronizing';
out.reconnecting = 'Reconnecting...'; out.reconnecting = 'Reconnecting...';
out.typing = "Typing";
out.lag = 'Lag'; out.lag = 'Lag';
out.readonly = 'Read only'; out.readonly = 'Read only';
out.anonymous = "Anonymous"; out.anonymous = "Anonymous";

170
www/common/toolbar2.js
View File

@ -29,12 +29,9 @@ define([
// Top parts // Top parts
var USER_CLS = Bar.constants.userAdmin = "cryptpad-user"; var USER_CLS = Bar.constants.userAdmin = "cryptpad-user";
var SPINNER_CLS = Bar.constants.spinner = 'cryptpad-spinner'; var SPINNER_CLS = Bar.constants.spinner = 'cryptpad-spinner';
var STATE_CLS = Bar.constants.state = 'cryptpad-state';
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-new"; var NEWPAD_CLS = Bar.constants.newpad = "cryptpad-new";
var UPGRADE_CLS = Bar.constants.upgrade = "cryptpad-upgrade";
// User admin menu // User admin menu
var USERADMIN_CLS = Bar.constants.user = 'cryptpad-user-dropdown'; var USERADMIN_CLS = Bar.constants.user = 'cryptpad-user-dropdown';
@ -66,10 +63,6 @@ define([
var $userContainer = $('<span>', { var $userContainer = $('<span>', {
'class': USER_CLS 'class': USER_CLS
}).appendTo($topContainer); }).appendTo($topContainer);
$('<button>', {'class': UPGRADE_CLS + ' buttonSuccess'}).hide().appendTo($userContainer);
$('<span>', {'class': SPINNER_CLS}).hide().appendTo($userContainer);
$('<span>', {'class': STATE_CLS}).hide().appendTo($userContainer);
$('<span>', {'class': LAG_CLS}).hide().appendTo($userContainer);
$('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer); $('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer);
$('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer); $('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
$('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer); $('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
@ -124,17 +117,6 @@ define([
// Userlist elements // Userlist elements
var checkSynchronizing = function (toolbar, config) {
if (!toolbar.state) { return; }
var userList = config.userList.list.users;
var userNetfluxId = config.userList.userNetfluxId;
var meIdx = userList.indexOf(userNetfluxId);
if (meIdx === -1) {
toolbar.state.text(Messages.synchronizing);
return;
}
toolbar.state.text('');
};
var getOtherUsers = function(config) { var getOtherUsers = function(config) {
var userList = config.userList.list.users; var userList = config.userList.list.users;
var userData = config.userList.data; var userData = config.userList.data;
@ -283,7 +265,6 @@ define([
var users = userList.users; var users = userList.users;
if (users.indexOf(config.userList.userNetfluxId) !== -1) {toolbar.connected = true;} if (users.indexOf(config.userList.userNetfluxId) !== -1) {toolbar.connected = true;}
if (!toolbar.connected) { return; } if (!toolbar.connected) { return; }
checkSynchronizing(toolbar, config);
if (config.userList.data) { if (config.userList.data) {
updateUserList(toolbar, config); updateUserList(toolbar, config);
} }
@ -315,7 +296,6 @@ define([
var $button = $('<button>').appendTo($container); var $button = $('<button>').appendTo($container);
$('<span>',{'class': 'buttonTitle'}).appendTo($button); $('<span>',{'class': 'buttonTitle'}).appendTo($button);
toolbar.$leftside.prepend($('<span>', {'class': 'separator'}));
toolbar.$leftside.prepend($container); toolbar.$leftside.prepend($container);
if (config.$contentContainer) { if (config.$contentContainer) {
@ -446,6 +426,7 @@ define([
var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare); var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
//$shareBlock.find('button').attr('id', 'shareButton'); //$shareBlock.find('button').attr('id', 'shareButton');
$shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS); $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
$shareBlock.addClass('shareButton');
if (hashes.editHash) { if (hashes.editHash) {
$shareBlock.find('a.editShare').click(function () { $shareBlock.find('a.editShare').click(function () {
@ -481,8 +462,8 @@ define([
throw new Error("Unable to display the share button: hash required in the URL"); throw new Error("Unable to display the share button: hash required in the URL");
} }
var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'}); var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
//var $span = $('<span>', {'class': 'large'}).append(' ' +Messages.shareButton); var $button = $('<button>', {'title': Messages.shareButton}).append($shareIcon);
var $button = $('<button>', {'title': Messages.shareButton}).append($shareIcon);//:.append($span); $button.addClass('shareButton');
$button.click(function () { $button.click(function () {
var url = window.location.href; var url = window.location.href;
var success = Cryptpad.Clipboard.copy(url); var success = Cryptpad.Clipboard.copy(url);
@ -607,6 +588,8 @@ define([
'class': TITLE_CLS 'class': TITLE_CLS
}).appendTo(toolbar.$top); }).appendTo(toolbar.$top);
toolbar.$top.find('.filler').hide();
var $hoverable = $('<span>', {'class': 'hoverable'}).appendTo($titleContainer); var $hoverable = $('<span>', {'class': 'hoverable'}).appendTo($titleContainer);
// Buttons // Buttons
@ -644,76 +627,28 @@ define([
return $linkContainer; return $linkContainer;
}; };
var checkLag = function (toolbar, config, $lagEl) { var typing = -1;
var lag;
var $lag = $lagEl || toolbar.lag;
if (!$lag) { return; }
var getLag = config.network.getLag;
if(typeof getLag === "function") {
lag = getLag();
}
var title;
if (lag && toolbar.connected) {
$lag.attr('class', LAG_CLS);
toolbar.firstConnection = false;
title = Messages.lag + ' : ' + lag + ' ms\n';
if (lag > 30000) {
$lag.addClass('lag0');
title = Messages.redLight;
} else if (lag > 5000) {
$lag.addClass('lag1');
title += Messages.orangeLight;
} else if (lag > 1000) {
$lag.addClass('lag2');
title += Messages.orangeLight;
} else if (lag > 300) {
$lag.addClass('lag3');
title += Messages.greenLight;
} else {
$lag.addClass('lag4');
title += Messages.greenLight;
}
}
else if (!toolbar.firstConnection) {
$lag.attr('class', LAG_CLS);
$lag.addClass('dc');
title = Messages.redLight;
} else {
$lag.addClass('lag4');
}
if (title) {
$lag.attr('title', title);
}
};
var createLag = function (toolbar, config) {
var $a = toolbar.$userAdmin.find('.'+LAG_CLS).show();
var $container = $('<span>', {'class': 'bars'}).appendTo($a);
$('<span>', {'class': 'bar1'}).appendTo($container);
$('<span>', {'class': 'bar2'}).appendTo($container);
$('<span>', {'class': 'bar3'}).appendTo($container);
$('<span>', {'class': 'bar4'}).appendTo($container);
$('<span>', {'class': 'disconnected fa fa-exclamation-circle'}).appendTo($a);
if (config.network) {
checkLag(toolbar, config, $a);
setInterval(function () {
if (!toolbar.connected) { return; }
checkLag(toolbar, config);
}, 3000);
}
return $a;
};
var kickSpinner = function (toolbar, config, local) { var kickSpinner = function (toolbar, config, local) {
if (!toolbar.spinner) { return; } if (!toolbar.spinner) { return; }
var $spin = toolbar.spinner; var $spin = toolbar.spinner;
$spin.find('.spin').show();
$spin.find('.synced').hide(); if (typing === -1) {
typing = 1;
$spin.text(Messages.typing);
$spin.interval = window.setInterval(function () {
var dots = Array(typing+1).join('.');
$spin.text(Messages.typing + dots);
typing++;
if (typing > 3) { typing = 0; }
}, 500);
}
var onSynced = function () { var onSynced = function () {
if ($spin.timeout) { clearTimeout($spin.timeout); } if ($spin.timeout) { clearTimeout($spin.timeout); }
$spin.timeout = setTimeout(function () { $spin.timeout = setTimeout(function () {
$spin.find('.spin').hide(); window.clearInterval($spin.interval);
$spin.find('.synced').show(); typing = -1;
}, local ? 0 : SPINNER_DISAPPEAR_TIME); $spin.text(Messages.saved);
}, /*local ? 0 :*/ SPINNER_DISAPPEAR_TIME);
}; };
if (Cryptpad) { if (Cryptpad) {
Cryptpad.whenRealtimeSyncs(config.realtime, onSynced); Cryptpad.whenRealtimeSyncs(config.realtime, onSynced);
@ -727,16 +662,9 @@ define([
}; };
}; };
var createSpinner = function (toolbar, config) { var createSpinner = function (toolbar, config) {
var $spin = toolbar.$userAdmin.find('.'+SPINNER_CLS).show(); var $spin = $('<span>', {'class': SPINNER_CLS}).appendTo(toolbar.$leftside);
$('<span>', { $spin.text(Messages.synchronizing);
id: uid(),
'class': 'spin fa fa-spinner fa-pulse',
}).appendTo($spin).hide();
$('<span>', {
id: uid(),
'class': 'synced fa fa-check',
title: Messages.synced
}).appendTo($spin);
if (config.realtime) { if (config.realtime) {
config.realtime.onPatch(ks(toolbar, config)); config.realtime.onPatch(ks(toolbar, config));
config.realtime.onMessage(ks(toolbar, config, true)); config.realtime.onMessage(ks(toolbar, config, true));
@ -744,10 +672,6 @@ define([
return $spin; return $spin;
}; };
var createState = function (toolbar) {
return toolbar.$userAdmin.find('.'+STATE_CLS).text(Messages.synchronizing).show();
};
var createLimit = function (toolbar) { var createLimit = function (toolbar) {
if (!Config.enablePinning) { return; } if (!Config.enablePinning) { return; }
var $limitIcon = $('<span>', {'class': 'fa fa-exclamation-triangle'}); var $limitIcon = $('<span>', {'class': 'fa fa-exclamation-triangle'});
@ -853,34 +777,6 @@ define([
return $userAdmin; return $userAdmin;
}; };
var createUpgrade = function (/*toolbar*/) {
return; // TODO
/*if (ApiConfig.removeDonateButton) { return; }
if (Cryptpad.account.plan) { return; }
var text;
var feedback;
var url;
if (ApiConfig.allowSubscriptions && Cryptpad.isLoggedIn()) {
text = Messages.upgradeAccount;
feedback = "UPGRADE_ACCOUNT";
url = Cryptpad.upgradeURL;
} else {
text = Messages.supportCryptpad;
feedback = "SUPPORT_CRYPTPAD";
url = Cryptpad.donateURL;
}
var $upgrade = toolbar.$top.find('.' + UPGRADE_CLS).attr({
'title': Messages.supportCryptpad
}).text(text).show()
.click(function () {
Cryptpad.feedback(feedback);
window.open(url,'_blank');
});
return $upgrade;*/
};
// Events // Events
var initClickEvents = function (toolbar, config) { var initClickEvents = function (toolbar, config) {
var removeDropdowns = function () { var removeDropdowns = function () {
@ -1036,11 +932,11 @@ define([
tb['fileshare'] = createFileShare; tb['fileshare'] = createFileShare;
tb['title'] = createTitle; tb['title'] = createTitle;
tb['pageTitle'] = createPageTitle; tb['pageTitle'] = createPageTitle;
tb['lag'] = createLag; tb['lag'] = $.noop;
tb['spinner'] = createSpinner; tb['spinner'] = createSpinner;
tb['state'] = createState; tb['state'] = $.noop;
tb['limit'] = createLimit; tb['limit'] = createLimit;
tb['upgrade'] = createUpgrade; tb['upgrade'] = $.noop;
tb['newpad'] = createNewPad; tb['newpad'] = createNewPad;
tb['useradmin'] = createUserAdmin; tb['useradmin'] = createUserAdmin;
@ -1068,18 +964,14 @@ define([
var failed = toolbar.failed = function () { var failed = toolbar.failed = function () {
toolbar.connected = false; toolbar.connected = false;
if (toolbar.state) { toolbar.spinner.text(Messages.disconnected);
toolbar.state.text(Messages.disconnected); //checkLag(toolbar, config);
}
checkLag(toolbar, config);
}; };
toolbar.reconnecting = function (userId) { toolbar.reconnecting = function (userId) {
if (config.userList) { config.userList.userNetfluxId = userId; } if (config.userList) { config.userList.userNetfluxId = userId; }
toolbar.connected = false; toolbar.connected = false;
if (toolbar.state) { toolbar.spinner.text(Messages.reconnecting);
toolbar.state.text(Messages.reconnecting); //checkLag(toolbar, config);
}
checkLag(toolbar, config);
}; };
// On log out, remove permanently the realtime elements of the toolbar // On log out, remove permanently the realtime elements of the toolbar

6
www/drive/file.less
View File

@ -67,10 +67,16 @@ img.icon {
flex-flow: row; flex-flow: row;
@media screen and (max-width: @size-mobile) { @media screen and (max-width: @size-mobile) {
display: block; display: block;
#driveToolbar {
.path .element {
display: none;
}
}
#tree { #tree {
resize: none; resize: none;
width: 100%; width: 100%;
max-width: unset; max-width: unset;
max-height: unset;
border-bottom: 1px solid @toolbar-border-col; border-bottom: 1px solid @toolbar-border-col;
.category { .category {
margin-top: 0.5em; margin-top: 0.5em;

2
www/drive/main.js
View File

@ -2723,7 +2723,7 @@ define([
var userList = APP.userList = info.userList; var userList = APP.userList = info.userList;
var config = { var config = {
displayed: ['useradmin', 'spinner', 'lag', 'state', 'limit', 'newpad', 'pageTitle'], displayed: ['useradmin', 'limit', 'newpad', 'pageTitle'],
userList: { userList: {
list: userList, list: userList,
userNetfluxId: info.myID userNetfluxId: info.myID