infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

Browse Source
pull/1/head
ansuz 8 years ago
parent 6f07a3b7b4 ac79fbb5a2
commit 8a1acc3c37
11 changed files with 257 additions and 151 deletions
Show Stats Download Patch File Download Diff File

2
customize.dist/main.css
Unescape Escape View File

@ -64,7 +64,7 @@
.alertify .dialog > *,
.alertify .alert > * {
width: 30%;
min-width: 500px;
width: 500px;
max-width: 95%;
margin: 0 auto;
text-align: center;

2
customize.dist/src/less/alertify.less
Unescape Escape View File

@ -72,7 +72,7 @@
> * {
width: 30%;
min-width: 500px;
width: 500px;
max-width: 95%;
margin: 0 auto;
text-align: center;

123
customize.dist/src/less/toolbar.less
Unescape Escape View File

@ -41,6 +41,7 @@
button {
&#shareButton {
// Bootstrap 4 colors
color: #fff;
background: #5cb85c;
border-color: #5cb85c;
@ -51,6 +52,9 @@
span {
color: #fff;
}
.large {
margin-left: 5px;
}
}
}
@ -97,24 +101,6 @@
background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
}
}
.large {
@media screen and (max-width: 800px) {
display: none;
}
@media screen and (min-width: 801px) {
display: inline-block;
}
}
.small {
@media screen and (max-width: 800px) {
display: inline-block;
}
@media screen and (min-width: 801px) {
display: none;
}
}
.cryptpad-state {
line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
}
@ -150,6 +136,74 @@
height: 24px;
}
}
.big {
@media screen and (max-width: @media-not-big) {
display: none;
}
@media screen and (min-width: @media-not-small) {
display: inline-block;
}
}
.small {
@media screen and (max-width: @media-not-big) {
display: inline-block;
}
@media screen and (min-width: @media-not-small) {
display: none;
}
}
.med-big {
@media screen and (max-width: @media-medium-screen) {
display: none;
}
@media screen and (min-width: (@media-medium-screen + 1px)) {
display: inline-block;
}
}
.med-small {
@media screen and (max-width: @media-medium-screen) {
display: inline-block;
}
@media screen and (min-width: (@media-medium-screen + 1px)) {
display: none;
}
}
.large {
@media screen and (max-width: @media-narrow-screen) {
display: none;
}
@media screen and (min-width: (@media-narrow-screen + 1px)) {
display: inline-block;
}
}
.narrow {
@media screen and (max-width: @media-narrow-screen) {
display: inline-block;
}
@media screen and (min-width: (@media-narrow-screen + 1px)) {
display: none;
}
}
}
.cryptpad-toolbar:not(.notitle) {
.cryptpad-toolbar-top {
@media screen and (max-width: @media-medium-screen) {
height: 67px;
}
.cryptpad-link, .cryptpad-user {
@media screen and (max-width: @media-medium-screen) {
top: 35px;
}
@media screen and (min-width: (@media-medium-screen + 1px)) {
top: 0px;
}
}
}
}
.cryptpad-toolbar-top {
@ -157,9 +211,6 @@
text-align: center;
height: 32px;
position: relative;
@media screen and (max-width: @media-narrow-screen) {
height: 67px;
}
.cryptpad-title {
.title, .pencilIcon {
font-size: 1.5em;
@ -212,12 +263,6 @@
position: absolute;
left: 0px;
height: 32px;
@media screen and (max-width: (@media-short-screen - 1px)) {
top: 35px;
}
@media screen and (min-width: @media-short-screen) {
top: 0px;
}
a.cryptpad-logo {
cursor: pointer;
@ -242,41 +287,19 @@
cursor: pointer;
}
}
.big {
@media screen and (max-width: @media-narrow-screen) {
display: none;
}
@media screen and (min-width: (@media-narrow-screen + 1px)) {
display: inline-block;
}
}
.small {
@media screen and (max-width: @media-narrow-screen) {
display: inline-block;
}
@media screen and (min-width: (@media-narrow-screen + 1px)) {
display: none;
}
}
}
.cryptpad-user {
position: absolute;
right: 0;
span:not(.cryptpad-lag) {
vertical-align: top;
display: inline-block;
//display: inline-block;
}
button {
span.fa {
vertical-align: baseline;
}
}
@media screen and (max-width: @media-narrow-screen) {
top: 3em;
}
@media screen and (min-width: (@media-narrow-screen + 1px)) {
top: 0px;
}
}
}
.cryptpad-toolbar-leftside {

1
customize.dist/src/less/variables.less
Unescape Escape View File

@ -69,6 +69,7 @@
@media-short-screen: 450px;
@media-narrow-screen: 400px;
@media-medium-screen: 600px;
@toolbar-gradient-start: #f5f5f5;
@toolbar-gradient-end: #DDDDDD;

146
customize.dist/toolbar.css
Unescape Escape View File

@ -124,6 +124,9 @@
.cryptpad-toolbar button#shareButton span {
color: #fff;
}
.cryptpad-toolbar button#shareButton .large {
margin-left: 5px;
}
.cryptpad-toolbar .cryptpad-lag {
box-sizing: content-box;
height: 16px;
@ -166,26 +169,6 @@
.cryptpad-toolbar button:hover {
background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar .large {
display: none;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar .large {
display: inline-block;
}
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar .small {
display: inline-block;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar .small {
display: none;
}
}
.cryptpad-toolbar .cryptpad-state {
line-height: 32px;
/* equivalent to 26px + 2*2px margin used for buttons */
@ -218,17 +201,89 @@
.cryptpad-toolbar select option {
height: 24px;
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar .big {
display: none;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar .big {
display: inline-block;
}
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar .small {
display: inline-block;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar .small {
display: none;
}
}
@media screen and (max-width: 600px) {
.cryptpad-toolbar .med-big {
display: none;
}
}
@media screen and (min-width: 601px) {
.cryptpad-toolbar .med-big {
display: inline-block;
}
}
@media screen and (max-width: 600px) {
.cryptpad-toolbar .med-small {
display: inline-block;
}
}
@media screen and (min-width: 601px) {
.cryptpad-toolbar .med-small {
display: none;
}
}
@media screen and (max-width: 400px) {
.cryptpad-toolbar .large {
display: none;
}
}
@media screen and (min-width: 401px) {
.cryptpad-toolbar .large {
display: inline-block;
}
}
@media screen and (max-width: 400px) {
.cryptpad-toolbar .narrow {
display: inline-block;
}
}
@media screen and (min-width: 401px) {
.cryptpad-toolbar .narrow {
display: none;
}
}
@media screen and (max-width: 600px) {
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top {
height: 67px;
}
}
@media screen and (max-width: 600px) {
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-link,
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-user {
top: 35px;
}
}
@media screen and (min-width: 601px) {
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-link,
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-user {
top: 0px;
}
}
.cryptpad-toolbar-top {
display: block;
text-align: center;
height: 32px;
position: relative;
}
@media screen and (max-width: 400px) {
.cryptpad-toolbar-top {
height: 67px;
}
}
.cryptpad-toolbar-top .cryptpad-title .title,
.cryptpad-toolbar-top .cryptpad-title .pencilIcon {
font-size: 1.5em;
@ -278,16 +333,6 @@
left: 0px;
height: 32px;
}
@media screen and (max-width: 449px) {
.cryptpad-toolbar-top .cryptpad-link {
top: 35px;
}
}
@media screen and (min-width: 450px) {
.cryptpad-toolbar-top .cryptpad-link {
top: 0px;
}
}
.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo {
cursor: pointer;
height: 32px;
@ -309,47 +354,16 @@
vertical-align: middle;
cursor: pointer;
}
@media screen and (max-width: 400px) {
.cryptpad-toolbar-top .cryptpad-link .big {
display: none;
}
}
@media screen and (min-width: 401px) {
.cryptpad-toolbar-top .cryptpad-link .big {
display: inline-block;
}
}
@media screen and (max-width: 400px) {
.cryptpad-toolbar-top .cryptpad-link .small {
display: inline-block;
}
}
@media screen and (min-width: 401px) {
.cryptpad-toolbar-top .cryptpad-link .small {
display: none;
}
}
.cryptpad-toolbar-top .cryptpad-user {
position: absolute;
right: 0;
}
.cryptpad-toolbar-top .cryptpad-user span:not(.cryptpad-lag) {
vertical-align: top;
display: inline-block;
}
.cryptpad-toolbar-top .cryptpad-user button span.fa {
vertical-align: baseline;
}
@media screen and (max-width: 400px) {
.cryptpad-toolbar-top .cryptpad-user {
top: 3em;
}
}
@media screen and (min-width: 401px) {
.cryptpad-toolbar-top .cryptpad-user {
top: 0px;
}
}
.cryptpad-toolbar-leftside {
float: left;
margin-bottom: -1px;

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

@ -218,7 +218,7 @@ define([
var patharr = window.location.hash.match(/[?&]path=([^&]+)/);
var namearr = window.location.hash.match(/[?&]name=([^&]+)/);
common.initialPath = patharr[1] || undefined;
common.initialName = namearr[1] ? decodeURIComponent(namearr[1]) : undefined;
common.initialName = namearr && namearr[1] ? decodeURIComponent(namearr[1]) : undefined;
window.location.hash = '';
}
if (!secretHash && !/#/.test(window.location.href)) {

33
www/common/toolbar.js
Unescape Escape View File

@ -63,7 +63,7 @@ define([
});
};
var createRealtimeToolbar = function ($container) {
var createRealtimeToolbar = function ($container, config) {
var $toolbar = $('<div>', {
'class': TOOLBAR_CLS,
id: uid(),
@ -72,6 +72,11 @@ define([
.append($('<div>', {'class': LEFTSIDE_CLS}))
.append($('<div>', {'class': RIGHTSIDE_CLS}));
// The 'notitle' class removes the line added for the title with a small screen
if (!config || typeof config !== "object") {
$toolbar.addClass('notitle');
}
$container.prepend($toolbar);
styleToolbar($container);
return $toolbar;
@ -81,7 +86,7 @@ define([
if (config.displayed.indexOf('spinner') !== -1) {
var $spinner = $('<span>', {
id: uid(),
'class': SPINNER_CLS + ' fa fa fa-spinner fa-pulse',
'class': SPINNER_CLS + ' fa fa-spinner fa-pulse',
}).hide();
$container.prepend($spinner);
return $spinner[0];
@ -117,10 +122,9 @@ define([
// Share button
if (config.displayed.indexOf('share') !== -1) {
var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
var $span = $('<span>', {'class': 'large'}).append($shareIcon.clone()).append(' ' +Messages.shareButton);
var $spanSmall = $('<span>', {'class': 'small'}).append($shareIcon.clone());
var $span = $('<span>', {'class': 'large'}).append(' ' +Messages.shareButton);
var dropdownConfigShare = {
text: $('<div>').append($span).append($spanSmall).html(),
text: $('<div>').append($shareIcon).append($span).html(),
options: []
};
var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
@ -234,7 +238,7 @@ define([
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': 'small'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
$userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
}
@ -314,8 +318,8 @@ define([
'class': "cryptpad-logo"
}).append($imgTag);
var $span = $('<span>').text('CryptPad');
var $aTagBig = $aTagSmall.clone().addClass('big').append($span);
$aTagSmall.addClass('small');
var $aTagBig = $aTagSmall.clone().addClass('large').append($span);
$aTagSmall.addClass('narrow');
var onClick = function (e) {
e.preventDefault();
window.location = "/";
@ -362,7 +366,9 @@ define([
content: Messages.type[p]
});
});
var $newButton = $('<div>').append($('<span>', {'class': 'fa fa-plus'})).append(Messages.newButton);
var $plusIcon = $('<span>', {'class': 'fa fa-plus'});
var $newbig = $('<span>', {'class': 'big'}).append(' ' +Messages.newButton);
var $newButton = $('<div>').append($plusIcon).append($newbig);
var dropdownConfig = {
text: $newButton.html(), // Button initial text
options: pads_options, // Entries displayed in the menu
@ -436,12 +442,13 @@ define([
});
}
var $icon = $('<span>', {'class': 'fa fa-user'});
var $button = $('<div>').append($icon).append($displayedName.clone());
var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
var $userButton = $('<div>').append($icon).append($userbig);
if (account) {
$button.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')'));
$userbig.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')'));
}
var dropdownConfigUser = {
text: $button.html(), // Button initial text
text: $userButton.html(), // Button initial text
options: options, // Entries displayed in the menu
left: true, // Open to the left of the button
};
@ -555,7 +562,7 @@ define([
var Cryptpad = config.common;
config.displayed = config.displayed || [];
var toolbar = createRealtimeToolbar($container);
var toolbar = createRealtimeToolbar($container, config.title);
var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), config, readOnly, Cryptpad);
var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));

23
www/drive/file.css
Unescape Escape View File

@ -29,6 +29,20 @@ body {
display: flex;
flex-flow: row;
}
@media screen and (max-width: 600px) {
.app-container {
display: block;
}
.app-container #tree {
resize: none;
width: 100%;
max-width: unset;
border-bottom: 1px solid #ccc;
}
.app-container #tree .category2 {
margin-top: 0.5em;
}
}
.fa {
/*min-width: 17px;*/
margin-right: 3px;
@ -188,7 +202,6 @@ span.fa-folder-open {
margin-top: 10px;
}
#content .info-box {
height: 40px;
line-height: 40px;
padding-left: 10px;
margin: 10px auto;
@ -347,17 +360,17 @@ span.fa-folder-open {
position: relative;
display: inline-block;
}
#driveToolbar .dropdown-bar.right {
#driveToolbar .right {
float: right;
/* Right-side buttons */
}
#driveToolbar .dropdown-bar.right button {
#driveToolbar .right button {
display: inline-block;
}
#driveToolbar .dropdown-bar.right button.active {
#driveToolbar .right button.active {
display: none;
}
#driveToolbar .dropdown-bar.right button .fa {
#driveToolbar .right button .fa {
margin-right: 0px;
}
#driveToolbar .dropdown-bar-content {

37
www/drive/file.less
Unescape Escape View File

@ -18,6 +18,8 @@
@toolbar-path-bg: #fff;
@toolbar-path-border: #888;
@size-mobile: 600px;
/* PAGE */
html, body {
@ -51,6 +53,18 @@ body {
width: 100%;
display: flex;
flex-flow: row;
@media screen and (max-width: @size-mobile) {
display: block;
#tree {
resize: none;
width: 100%;
max-width: unset;
border-bottom: 1px solid @toolbar-border-col;
.category2 {
margin-top: 0.5em;
}
}
}
}
.fa {
@ -228,7 +242,6 @@ span {
margin-top: 10px;
}
.info-box {
height: 40px;
line-height: 40px;
padding-left: 10px;
margin: 10px auto;
@ -404,17 +417,17 @@ span {
line-height: 1em;
position: relative;
display: inline-block;
&.right {
float: right;
/* Right-side buttons */
button {
display: inline-block;
&.active {
display: none;
}
.fa {
margin-right: 0px;
}
}
.right {
float: right;
/* Right-side buttons */
button {
display: inline-block;
&.active {
display: none;
}
.fa {
margin-right: 0px;
}
}
}

1
www/drive/index.html
Unescape Escape View File

@ -2,6 +2,7 @@
<html class="cp">
<head>
<title>CryptDrive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link rel="icon" type="image/png"
href="/customize/main-favicon.png"

38
www/drive/main.js
Unescape Escape View File

@ -29,7 +29,8 @@ define([
var APP = window.APP = {
editable: false,
Cryptpad: Cryptpad,
loggedIn: Cryptpad.isLoggedIn()
loggedIn: Cryptpad.isLoggedIn(),
mobile: $('body').width() <= 600 // Menu and content area are not inline-block anymore for mobiles
};
var stringify = APP.stringify = function (obj) {
@ -353,6 +354,14 @@ define([
} else {
$element.removeClass("selected");
}
$driveToolbar.find('#contextButton').css({
background: '#000'
});
window.setTimeout(function () {
$driveToolbar.find('#contextButton').css({
background: ''
});
}, 500);
};
// Open the selected context menu on the closest "li" element
@ -776,6 +785,9 @@ define([
if (!path || path.length === 0) { return; }
var isTrash = filesOp.isPathInTrash(path);
var $title = $('<span>', {'class': 'path unselectable'});
if (APP.mobile) {
return $title;
}
path.forEach(function (p, idx) {
if (isTrash && [1,2].indexOf(idx) !== -1) { return; }
@ -1142,7 +1154,9 @@ define([
var $toolbar = $driveToolbar;
$toolbar.html('');
var $leftside = $('<div>', {'class': 'leftside'}).appendTo($toolbar);
$leftside.width($tree.width());
if (!APP.mobile) {
$leftside.width($tree.width());
}
var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
return $toolbar;
};
@ -1307,6 +1321,25 @@ define([
var $modeButton = createViewModeButton().appendTo($toolbar.find('.rightside'));
var $title = createTitle(path).appendTo($toolbar.find('.rightside'));
if (APP.mobile) {
var $context = $('<button>', {'class': 'element right dropdown-bar', id: 'contextButton'});
$context.append($('<span>', {'class': 'fa fa-caret-down'}));
$context.click(function (e) {
e.preventDefault();
e.stopPropagation();
var $li = $content.find('.selected');
if ($li.length !== 1) {
$li = $tree.find('.element.active').closest('li');
}
$iframe.find('.contextMenu').css({
top: ($li.offset().top + 10) + 'px',
left: ($li.offset().left + 50) + 'px'
});
$li.contextmenu();
});
$context.appendTo($toolbar.find('.rightside'));
}
// NewButton can be undefined if we're in read only mode
$toolbar.find('.leftside').append(createNewButton(isInRoot));
@ -1761,6 +1794,7 @@ define([
});
$iframe.find('#tree').mousedown(function (e) {
if (APP.mobile) { return; }
if (APP.resizeTree) { return; }
APP.resizeTree = window.setInterval(function () {
$driveToolbar.find('.leftside').width($tree.width());

Write Preview
Loading…
Cancel
Save