', {id: 'leftSide'}).appendTo(APP.$container);
+ var $rightside = APP.$rightside = $('
', {id: 'rightSide'}).appendTo(APP.$container);
+
+ createToolbar();
+
+ //$rightside.append(createTitle());
+ $rightside.append(createInfoBlock(obj));
+ $rightside.append(createDisplayNameInput(obj));
+ $rightside.append(createLanguageSelector());
if (Cryptpad.isLoggedIn()) {
- APP.$container.append(createLogoutEverywhere(obj));
+ $rightside.append(createLogoutEverywhere(obj));
}
- APP.$container.append(createResetTips());
- APP.$container.append(createUsageButton(obj));
- APP.$container.append(createBackupDrive(obj));
- APP.$container.append(createImportLocalPads(obj));
- APP.$container.append(createResetDrive(obj));
- APP.$container.append(createUserFeedbackToggle(obj));
+ $rightside.append(createResetTips());
+ $rightside.append(createBackupDrive(obj));
+ $rightside.append(createImportLocalPads(obj));
+ $rightside.append(createResetDrive(obj));
+ $rightside.append(createUserFeedbackToggle(obj));
+
obj.proxy.on('change', [], refresh);
obj.proxy.on('remove', [], refresh);
+ Cryptpad.onDisplayNameChanged(refresh);
+
+ createLeftside();
+ createUsageButton();
+
+ Cryptpad.removeLoadingScreen();
};
$(function () {
@@ -342,6 +414,7 @@ define([
$main.removeClass('hidden');
APP.$container = $('#container');
+ APP.$toolbar = $('#toolbar');
Cryptpad.ready(function () {
//if (!Cryptpad.getUserHash()) { return redirectToMain(); }
diff --git a/www/settings/main.less b/www/settings/main.less
index 336a1cec4..954f48f52 100644
--- a/www/settings/main.less
+++ b/www/settings/main.less
@@ -1,31 +1,99 @@
@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;
+
+
.cp {
input[type="text"] {
padding-left: 10px;
}
- #mainBlock {
- z-index: 1;
- width: 1000px;
- max-width: 90%;
- margin: auto;
-
- #container {
- .infoBlock {
- padding: 15px;
- border: @border;
- background: @dark-base;
- .label {
+ #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;
- text-decoration: underline;
- margin-right: 5px;
+ margin-bottom: 0;
+ }
+ .description {
+ display: block;
+ color: @description-color;
+ margin-bottom: 5px;
}
+ margin-bottom: 20px;
}
- .displayName {
- input, button {
+ [type="text"], button {
+ vertical-align: middle;
+ height: 40px;
+ box-sizing: border-box;
+ }
+ .userFeedback {
+ input {
vertical-align: middle;
+ margin-right: 5px;
+ }
+ }
+ .languageSelector {
+ button.btn {
+ width: @button-width;
+ background-color: @button-alt-bg;
+ border-color: #adadad;
+ color: black;
+ &:hover {
+ background-color: darken(@button-alt-bg, 15%);
+ }
+ }
+ }
+ .infoBlock {
+ [type="text"] {
+ 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 {
@@ -36,6 +104,22 @@
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;
}
diff --git a/www/slide/main.js b/www/slide/main.js
index 23861fb40..b3347e501 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -230,11 +230,15 @@ define([
var $span = $('', {'class': 'element'}).appendTo($container);
var $inner = $('').text(name);
$span.append($inner).click(function () {
- var cleanName = name.replace(/[\[\]]/g, '');
- var text = '';
- editor.replaceSelection(text);
+ var parsed = Cryptpad.parsePadUrl(data.href);
+ var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
+ var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
+ var mt = '';
+ editor.replaceSelection(mt);
+ //var cleanName = name.replace(/[\[\]]/g, '');
+ //var text = '';
+ //editor.replaceSelection(text);
$block.hide();
- console.log(data.href);
});
});
};
@@ -622,12 +626,13 @@ define([
body: $iframe.find('body'),
onUploaded: function (ev, data) {
//var cursor = editor.getCursor();
- var cleanName = data.name.replace(/[\[\]]/g, '');
- var text = '';
- /*if (data.mediatag) {
- text = '!'+text;
- }*/
- editor.replaceSelection(text);
+ //var cleanName = data.name.replace(/[\[\]]/g, '');
+ //var text = '';
+ var parsed = Cryptpad.parsePadUrl(data.url);
+ var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
+ var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
+ var mt = '';
+ editor.replaceSelection(mt);
}
};
APP.FM = Cryptpad.createFileManager(fmConfig);
diff --git a/www/slide/slide.less b/www/slide/slide.less
index 4482d85d3..3fcf134b8 100644
--- a/www/slide/slide.less
+++ b/www/slide/slide.less
@@ -279,7 +279,7 @@ div#modal #content, #print {
* {
.size(2.75);
* {
- font-size: 100%;
+ font-size: 1em;
line-height: 1em;
}
}
@@ -396,23 +396,26 @@ div#modal #content, #print {
}
p {
- display: flex;
- flex-flow: column;
- padding: 0;
- margin: 0;
- min-height:0;
- flex: 1;
+ //display: flex;
+ //flex-flow: row wrap;
+ padding: 0;
+ margin: 0;
+ min-height:0;
+ min-width:0;
+ //flex: 1;
}
media-tag {
- min-height: 0;
- flex: 1;
- display: block;
- text-align: center;
+ min-height: 0;
+ flex: 1;
+ display: flex;
+ flex-flow: column;
+ text-align: center;
}
media-tag img {
- max-height: 100% !important;
+ flex: 1;
+ max-height: 100% !important;
}
media-tag iframe {