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

Use the APP toolbar in profile

This commit is contained in:
yflory 2017-07-12 18:34:16 +02:00
parent 2d509e3e25
commit ac684a8dc7
11 changed files with 189 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
customize.dist/pages.js
View File

@ -282,10 +282,6 @@ define([
return h('div#container');
};
Pages['/profile/'] = Pages['/profile/index.html'] = function () {
return h('div#container');
};
Pages['/register/'] = Pages['/register/index.html'] = function () {
return [h('div#main', [
h('div.mainOverlay'),
@ -513,5 +509,13 @@ define([
];
};
Pages['/profile/'] = Pages['/profile/index.html'] = function () {
return [
h('div#toolbar'),
h('div#container'),
loadingScreen()
];
};
return Pages;
});

97
customize.dist/src/less/sidebar-layout.less Normal file
View File

@ -0,0 +1,97 @@
@import '/customize/src/less/variables.less';
@import '/customize/src/less/mixins.less';
@leftside-bg: #eee;
@leftside-color: #000;
@rightside-color: #000;
@description-color: #777;
@button-width: 400px;
@button-bg: #3066e5;
@button-alt-bg: #fff;
@button-red-bg: #e54e4e;
.cp {
input[type="text"] {
padding-left: 10px;
}
#container {
font-size: 16px;
display: flex;
flex: 1;
min-height: 0;
#leftSide {
color: @leftside-color;
width: 250px;
background: @leftside-bg;
display: flex;
flex-flow: column;
.categories {
flex: 1;
.category {
.leftsideCategory();
}
}
}
#rightSide {
flex: 1;
padding: 5px 20px;
color: @rightside-color;
overflow: auto;
.element {
label:not(.noTitle), .label {
display: block;
font-weight: bold;
margin-bottom: 0;
}
.description {
display: block;
color: @description-color;
margin-bottom: 5px;
}
margin-bottom: 20px;
}
[type="text"], button {
vertical-align: middle;
height: 40px;
box-sizing: border-box;
}
.inputBlock {
display: inline-flex;
width: @button-width;
input {
flex: 1;
border-radius: 0.25em 0 0 0.25em;
border: 1px solid #adadad;
border-right: 0px;
}
button {
border-radius: 0 0.25em 0.25em 0;
//border: 1px solid #adadad;
border-left: 0px;
}
}
button.btn {
background-color: @button-bg;
border-color: darken(@button-bg, 10%);
color: white;
&:hover {
background-color: darken(@button-bg, 10%);
}
&.btn-danger {
background-color: @button-red-bg;
border-color: darken(@button-red-bg, 10%);
color: white;
&:hover {
background-color: darken(@button-red-bg, 10%);
}
}
}
&>div {
margin: 10px 0;
}
}
}
}

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

@ -25,6 +25,7 @@
.whiteboardColor { color: @toolbar-whiteboard-bg; }
.driveColor { color: @toolbar-drive-bg; }
.settingsColor { color: @toolbar-settings-bg; }
.profileColor { color: @toolbar-settings-bg; }
.defaultColor { color: @toolbar-default-bg; }
.toolbar-container {
@ -268,6 +269,11 @@ body {
@color: @toolbar-settings-color;
.addToolbarColors(@color, @bgcolor);
}
&.app-profile {
@bgcolor: @toolbar-profile-bg;
@color: @toolbar-profile-color;
.addToolbarColors(@color, @bgcolor);
}
}

2
customize.dist/src/less/variables.less
View File

@ -105,6 +105,8 @@
@toolbar-default-color: #000;
@toolbar-settings-bg: #0087ff;
@toolbar-settings-color: #fff;
@toolbar-profile-bg: #0087ff;
@toolbar-profile-color: #fff;
@topbar-back: #fff;

11
customize.dist/template.js
View File

@ -12,7 +12,7 @@ $(function () {
var Messages = Cryptpad.Messages;
var $body = $('body');
var isMainApp = function () {
return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive|settings)\/$/.test(location.pathname);
return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive|settings|profile)\/$/.test(location.pathname);
};
var rightLink = function (ref, loc, txt) {
@ -145,7 +145,7 @@ $(function () {
} else if (/drive/.test(pathname)) {
$('body').append(h('body', Pages[pathname]()).innerHTML);
require(['/drive/main.js'], ready);
} else if (/file/.test(pathname)) {
} else if (/\/file\//.test(pathname)) {
$('body').append(h('body', Pages[pathname]()).innerHTML);
require([ '/file/main.js' ], ready);
} else if (/friends/.test(pathname)) {
@ -163,6 +163,9 @@ $(function () {
} else if (/^\/settings\//.test(pathname)) {
$('body').append(h('body', Pages[pathname]()).innerHTML);
require([ '/settings/main.js', ], ready);
} else if (/^\/profile\//.test(pathname)) {
$('body').append(h('body', Pages[pathname]()).innerHTML);
require([ '/profile/main.js', ], ready);
}
});
@ -176,9 +179,7 @@ $(function () {
], function () {
$body.append($topbar).append($main).append($footer);
if (/^\/profile\//.test(pathname)) {
require([ '/profile/main.js'], function () {});
} else if (/^\/user\//.test(pathname)) {
if (/^\/user\//.test(pathname)) {
require([ '/user/main.js'], function () {});
} else if (/^\/register\//.test(pathname)) {
require([ '/register/main.js' ], function () {});

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

@ -1657,7 +1657,7 @@ define([
content: Messages.user_rename
});
}
if (account && parsed && (!parsed.type || parsed.type !== 'profile')) {
if (account) {
options.push({
tag: 'a',
attributes: {'class': 'profile'},

2
www/common/toolbar2.js
View File

@ -648,7 +648,7 @@ define([
window.clearInterval($spin.interval);
typing = -1;
$spin.text(Messages.saved);
}, /*local ? 0 :*/ SPINNER_DISAPPEAR_TIME);
}, local ? 0 : SPINNER_DISAPPEAR_TIME);
};
if (Cryptpad) {
Cryptpad.whenRealtimeSyncs(config.realtime, onSynced);

90
www/profile/main.js
View File

@ -9,10 +9,14 @@ define([
'/bower_components/chainpad-listmap/chainpad-listmap.js',
'/bower_components/chainpad-crypto/crypto.js',
'/bower_components/marked/marked.min.js',
'/common/toolbar2.js',
'cm/lib/codemirror',
'cm/mode/markdown/markdown',
'less!/profile/main.less',
], function ($, Cryptpad, Listmap, Crypto, Marked, CodeMirror) {
'less!/customize/src/less/toolbar.less',
'less!/customize/src/less/cryptpad.less',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
], function ($, Cryptpad, Listmap, Crypto, Marked, Toolbar, CodeMirror) {
var APP = window.APP = {
Cryptpad: Cryptpad,
@ -396,6 +400,38 @@ define([
$container.append($block);
};
var hideCategories = function () {
APP.$rightside.find('> div').hide();
};
var showCategories = function (cat) {
hideCategories();
cat.forEach(function (c) {
APP.$rightside.find('.'+c).show();
});
};
var createLeftside = function () {
var $categories = $('<div>', {'class': 'categories'}).appendTo(APP.$leftside);
APP.$usage = $('<div>', {'class': 'usage'}).appendTo(APP.$leftside);
var $category = $('<div>', {'class': 'category'}).appendTo($categories);
$category.append($('<span>', {'class': 'fa fa-user'}));
$category.addClass('active');
$category.append(Messages.profileButton);
};
var createToolbar = function () {
var displayed = ['useradmin', 'newpad', 'limit', 'upgrade', 'pageTitle'];
var configTb = {
displayed: displayed,
ifrw: window,
common: Cryptpad,
$container: APP.$toolbar,
pageTitle: Messages.settings_title
};
var toolbar = APP.toolbar = Toolbar.create(configTb);
toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
};
var onReady = function () {
APP.$container.find('#'+CREATE_ID).remove();
@ -409,22 +445,24 @@ define([
}
if (!APP.initialized) {
var $header = $('<div>', {id: HEADER_ID}).appendTo(APP.$container);
var $header = $('<div>', {id: HEADER_ID}).appendTo(APP.$rightside);
addAvatar($header);
var $rightside = $('<div>', {id: HEADER_RIGHT_ID}).appendTo($header);
addDisplayName($rightside);
addLink($rightside);
addDescription(APP.$container);
addViewButton(APP.$container); //$rightside);
addPublicKey(APP.$container);
addDescription(APP.$rightside);
addViewButton(APP.$rightside); //$rightside);
addPublicKey(APP.$rightside);
APP.initialized = true;
}
createLeftside();
Cryptpad.removeLoadingScreen();
};
var onInit = function () {
};
var onDisconnect = function () {};
var onChange = function () {};
@ -471,6 +509,8 @@ define([
});
};
Cryptpad.removeLoadingScreen();
if (!Cryptpad.isLoggedIn()) {
var $p = $('<p>', {id: CREATE_ID}).append(Messages.profile_register);
var $a = $('<a>', {
@ -489,39 +529,29 @@ define([
APP.$container.append($create);
};
var onCryptpadReady = function () {
APP.$leftside = $('<div>', {id: 'leftSide'}).appendTo(APP.$container);
var $rightside = APP.$rightside = $('<div>', {id: 'rightSide'}).appendTo(APP.$container);
createToolbar();
if (window.location.hash) {
return void andThen(window.location.hash.slice(1));
}
getOrCreateProfile();
};
$(function () {
var $main = $('#mainBlock');
// Language selector
var $sel = $('#language-selector');
Cryptpad.createLanguageSelector(undefined, $sel);
$sel.find('button').addClass('btn').addClass('btn-secondary');
$sel.show();
// User admin menu
var $userMenu = $('#user-menu');
var userMenuCfg = {
$initBlock: $userMenu,
'static': true
};
var $userAdmin = Cryptpad.createUserAdminMenu(userMenuCfg);
$userAdmin.find('button').addClass('btn').addClass('btn-secondary');
$(window).click(function () {
$('.cryptpad-dropdown').hide();
});
// main block is hidden in case javascript is disabled
$main.removeClass('hidden');
APP.$container = $('#container');
APP.$toolbar = $('#toolbar');
Cryptpad.ready(function () {
Cryptpad.reportAppUsage();
if (window.location.hash) {
return void andThen(window.location.hash.slice(1));
}
getOrCreateProfile();
onCryptpadReady();
});
});

18
www/profile/main.less
View File

@ -1,15 +1,8 @@
@import '/customize/src/less/variables.less';
@import '/customize/src/less/mixins.less';
@import '/customize/src/less/sidebar-layout.less';
.cp {
#mainBlock {
z-index: 1;
width: 1000px;
max-width: 90%;
margin: auto;
#container {
font-size: 25px;
width: 100%;
height: 100%;
}
}
#header {
display: flex;
#rightside {
@ -92,6 +85,9 @@
font-weight: bold;
font-size: 30px;
}
.link {
font-size: 25px;
}
.displayName, .link {
line-height: 40px;
}

5
www/settings/main.js
View File

@ -404,15 +404,10 @@ define([
};
$(function () {
var $main = $('#mainBlock');
$(window).click(function () {
$('.cryptpad-dropdown').hide();
});
// main block is hidden in case javascript is disabled
$main.removeClass('hidden');
APP.$container = $('#container');
APP.$toolbar = $('#toolbar');

90
www/settings/main.less
View File

@ -1,64 +1,10 @@
@import '/customize/src/less/variables.less';
@import '/customize/src/less/mixins.less';
@border: 1px solid #555;
@leftside-bg: #eee;
@leftside-color: #000;
@rightside-color: #000;
@description-color: #777;
@button-width: 400px;
@button-bg: #3066e5;
@button-alt-bg: #fff;
@button-red-bg: #e54e4e;
@import '/customize/src/less/sidebar-layout.less';
.cp {
input[type="text"] {
padding-left: 10px;
}
#container {
font-size: 16px;
display: flex;
flex: 1;
min-height: 0;
#leftSide {
color: @leftside-color;
width: 250px;
background: @leftside-bg;
display: flex;
flex-flow: column;
.categories {
flex: 1;
.category {
.leftsideCategory();
}
}
}
#rightSide {
flex: 1;
padding: 5px 20px;
color: @rightside-color;
overflow: auto;
.element {
label:not(.noTitle), .label {
display: block;
font-weight: bold;
margin-bottom: 0;
}
.description {
display: block;
color: @description-color;
margin-bottom: 5px;
}
margin-bottom: 20px;
}
[type="text"], button {
vertical-align: middle;
height: 40px;
box-sizing: border-box;
}
.userFeedback {
input {
vertical-align: middle;
@ -81,21 +27,6 @@
width: @button-width;
}
}
.inputBlock {
display: inline-flex;
width: @button-width;
input {
flex: 1;
border-radius: 0.25em 0 0 0.25em;
border: 1px solid #adadad;
border-right: 0px;
}
button {
border-radius: 0 0.25em 0.25em 0;
//border: 1px solid #adadad;
border-left: 0px;
}
}
.backupDrive {
button {
span.fa {
@ -104,25 +35,6 @@
margin-right: 5px;
}
}
button.btn {
background-color: @button-bg;
border-color: darken(@button-bg, 10%);
color: white;
&:hover {
background-color: darken(@button-bg, 10%);
}
&.btn-danger {
background-color: @button-red-bg;
border-color: darken(@button-red-bg, 10%);
color: white;
&:hover {
background-color: darken(@button-red-bg, 10%);
}
}
}
&>div {
margin: 10px 0;
}
}
}
}