mirror of https://github.com/xwiki-labs/cryptpad
Merge branch 'sidebar' into support2
This commit is contained in:
commit
c07fc805ab
|
@ -115,7 +115,10 @@
|
|||
}
|
||||
nav {
|
||||
display: flex;
|
||||
margin-top: 0.5rem;
|
||||
align-items: baseline;
|
||||
.btn.btn-primary {
|
||||
margin: 5px 0.5rem 0 0;
|
||||
}
|
||||
}
|
||||
.cp-sidebar-bigger-alert {
|
||||
font-size: 16px;
|
||||
|
@ -124,6 +127,29 @@
|
|||
margin-bottom: 0;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
th{
|
||||
max-width: 60vw;
|
||||
border: 1px solid #777;
|
||||
padding: 7px;
|
||||
}
|
||||
td{
|
||||
padding: 2px;
|
||||
}
|
||||
.cp-checkmark{
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.cp-broadcast-container{
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.cp-broadcast-lang{
|
||||
order: 4;
|
||||
margin: 30px;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: baseline;
|
||||
}
|
||||
.button.btn.primary.cp-report{
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
|
@ -153,8 +179,12 @@
|
|||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
table {
|
||||
.cp-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cp-sidebarlayout-description {
|
||||
display: block;
|
||||
color: @cp_sidebar-hint;
|
||||
|
|
|
@ -19,7 +19,7 @@ define([
|
|||
Util,
|
||||
Hash,
|
||||
Messages,
|
||||
h,
|
||||
h
|
||||
) {
|
||||
const Sidebar = {};
|
||||
|
||||
|
@ -73,18 +73,35 @@ define([
|
|||
}
|
||||
return h('div.cp-sidebar-input-block', [input, button]);
|
||||
};
|
||||
blocks.text = (value) => {
|
||||
blocks.code = val => {
|
||||
return h('code', val);
|
||||
};
|
||||
blocks.inline = (value) => {
|
||||
return h('span', value);
|
||||
};
|
||||
blocks.block = (content, className) => {
|
||||
return h('div', { class: className }, content);
|
||||
};
|
||||
blocks.paragraph = (content) => {
|
||||
return h('p', content);
|
||||
};
|
||||
|
||||
blocks.alert = function (type, big, content) {
|
||||
var isBigClass = big ? '.cp-sidebar-bigger-alert' : ''; // Add the class if we want a bigger font-size
|
||||
return h('div.alert.alert-' + type + isBigClass, content);
|
||||
};
|
||||
|
||||
blocks.alertHTML = function (message, element) {
|
||||
return h('span', [
|
||||
UIElements.setHTML(h('p'), message),
|
||||
element
|
||||
]);
|
||||
};
|
||||
blocks.pre = (value) => {
|
||||
return h('pre', value);
|
||||
}
|
||||
};
|
||||
|
||||
blocks.textArea = function (attributes, value) {
|
||||
blocks.textarea = function (attributes, value) {
|
||||
return h('textarea', attributes, value || '');
|
||||
};
|
||||
|
||||
|
@ -97,48 +114,71 @@ define([
|
|||
return ul;
|
||||
};
|
||||
|
||||
|
||||
blocks.checkbox = (key, label, state, opts, onChange) => {
|
||||
var box = UI.createCheckbox(`cp-${app}-${key}`, label, state, { label: { class: 'noTitle' } });
|
||||
if (opts && opts.spinner) {
|
||||
box.spinner = UI.makeSpinner($(box));
|
||||
}
|
||||
// Attach event listener for checkbox change
|
||||
$(box).on('change', function() {
|
||||
// Invoke the provided onChange callback function with the new checkbox state
|
||||
onChange(this.checked);
|
||||
});
|
||||
if (typeof(onChange) === "function"){
|
||||
$(box).find('input').on('change', function() {
|
||||
onChange(this.checked);
|
||||
});
|
||||
}
|
||||
return box;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
blocks.list = function (header, entries) {
|
||||
blocks.table = function (header, entries) {
|
||||
const table = h('table.cp-sidebar-list');
|
||||
if (header) {
|
||||
const headerValues = header.map(value => {
|
||||
const lastWord = value.split(' ').pop(); // Extracting the last word
|
||||
return h('th', { class: lastWord.toLowerCase() }, value); // Modified to use the last word
|
||||
});
|
||||
const headerRow = h('thead', h('tr', headerValues));
|
||||
table.appendChild(headerRow);
|
||||
}
|
||||
|
||||
const headerValues = header.map(value => { return h('th', value); });
|
||||
const headerRow = h('thead', h('tr', headerValues));
|
||||
table.appendChild(headerRow);
|
||||
|
||||
|
||||
let getRow = line => {
|
||||
return h('tr', line.map(value => {
|
||||
if (typeof(value) === "object" && value.content) {
|
||||
return h('td', value.attr || {}, value.content);
|
||||
}
|
||||
return h('td', value);
|
||||
}));
|
||||
};
|
||||
table.updateContent = (newEntries) => {
|
||||
$(table).find('tbody').remove();
|
||||
let bodyContent = [];
|
||||
newEntries.forEach(line => {
|
||||
const row = h('tr', line.map(value => { return h('td', value); }));
|
||||
const row = getRow(line);
|
||||
bodyContent.push(row);
|
||||
});
|
||||
table.appendChild(h('tbody', bodyContent));
|
||||
};
|
||||
table.updateContent(entries);
|
||||
table.addLine = (line) => {
|
||||
const row = getRow(line);
|
||||
$(table).find('tbody').append(row);
|
||||
};
|
||||
|
||||
return table;
|
||||
};
|
||||
|
||||
blocks.link = function (text, url, isSafe) {
|
||||
var link = h('a', { href: url }, text);
|
||||
$(link).click(function (ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
if (isSafe) {
|
||||
common.openURL(url);
|
||||
} else {
|
||||
common.openUnsafeURL(url);
|
||||
}
|
||||
});
|
||||
return link;
|
||||
};
|
||||
|
||||
|
||||
blocks.clickableButton = function (type, icon, text, callback) {
|
||||
blocks.activeButton = function (type, icon, text, callback, keepEnabled) {
|
||||
var button = blocks.button(type, icon, text);
|
||||
var $button = $(button);
|
||||
button.spinner = h('span');
|
||||
|
@ -146,23 +186,45 @@ define([
|
|||
|
||||
Util.onClickEnter($button, function () {
|
||||
spinner.spin();
|
||||
$button.attr('disabled', 'disabled');
|
||||
callback(function (success) {
|
||||
if (!keepEnabled) { $button.attr('disabled', 'disabled'); }
|
||||
let done = success => {
|
||||
$button.removeAttr('disabled');
|
||||
if (success) { return void spinner.done(); }
|
||||
spinner.hide();
|
||||
});
|
||||
};
|
||||
// The callback can be synchrnous or async, handle "done" in both ways
|
||||
let success = callback(done); // Async
|
||||
if (typeof(success) === "boolean") { done(success); } // Sync
|
||||
});
|
||||
return button;
|
||||
};
|
||||
|
||||
blocks.box = (content, className) => {
|
||||
return h('div', { class: className }, content);
|
||||
};
|
||||
|
||||
const keyToCamlCase = (key) => {
|
||||
return key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
|
||||
};
|
||||
blocks.activeCheckbox = (data) => {
|
||||
const state = data.getState();
|
||||
const key = data.key;
|
||||
const safeKey = keyToCamlCase(key);
|
||||
var labelKey = `${app}_${safeKey}Label`;
|
||||
var titleKey = `${app}_${safeKey}Title`;
|
||||
var label = Messages[labelKey] || Messages[titleKey];
|
||||
var box = blocks.checkbox(key, label, state, { spinner: true }, checked => {
|
||||
var $cbox = $(box);
|
||||
var $checkbox = $cbox.find('input');
|
||||
let spinner = box.spinner;
|
||||
spinner.spin();
|
||||
$checkbox.attr('disabled', 'disabled');
|
||||
var val = !!checked;
|
||||
data.query(val, function (state) {
|
||||
spinner.done();
|
||||
$checkbox[0].checked = state;
|
||||
$checkbox.removeAttr('disabled');
|
||||
});
|
||||
});
|
||||
return box;
|
||||
};
|
||||
|
||||
sidebar.addItem = (key, get, options) => {
|
||||
const safeKey = keyToCamlCase(key);
|
||||
get((content, config) => {
|
||||
|
@ -174,6 +236,9 @@ define([
|
|||
}, Messages[`${app}_${safeKey}Title`] || key);
|
||||
const hint = options.noHint ? undefined : h('span.cp-sidebarlayout-description',
|
||||
Messages[`${app}_${safeKey}Hint`] || 'Coming soon...');
|
||||
if (hint && options.htmlHint) {
|
||||
hint.innerHTML = Messages[`${app}_${safeKey}Hint`];
|
||||
}
|
||||
const div = h(`div.cp-sidebarlayout-element`, {
|
||||
'data-item': key,
|
||||
style: 'display:none;'
|
||||
|
@ -188,29 +253,11 @@ define([
|
|||
};
|
||||
|
||||
sidebar.addCheckboxItem = (data) => {
|
||||
const state = data.getState();
|
||||
const key = data.key;
|
||||
const safeKey = keyToCamlCase(key);
|
||||
|
||||
let box = blocks.activeCheckbox(data);
|
||||
sidebar.addItem(key, function (cb) {
|
||||
var labelKey = `${app}_${safeKey}Label`;
|
||||
var titleKey = `${app}_${safeKey}Title`;
|
||||
var label = Messages[labelKey] || Messages[titleKey];
|
||||
var box = sidebar.blocks.checkbox(key, label, state, { spinner: true });
|
||||
var $cbox = $(box);
|
||||
var spinner = box.spinner;
|
||||
var $checkbox = $cbox.find('input').on('change', function() {
|
||||
spinner.spin();
|
||||
var val = $checkbox.is(':checked') || false;
|
||||
$checkbox.attr('disabled', 'disabled');
|
||||
data.query(val, function (state) {
|
||||
spinner.done();
|
||||
$checkbox[0].checked = state;
|
||||
$checkbox.removeAttr('disabled');
|
||||
});
|
||||
});
|
||||
cb(box);
|
||||
});
|
||||
}, data.options);
|
||||
};
|
||||
|
||||
var hideCategories = function () {
|
||||
|
|
|
@ -492,8 +492,8 @@ define([
|
|||
let searchBlock = blocks.labelledInput(Messages.support_searchLabel,
|
||||
inputSearch, inputBlock);
|
||||
|
||||
let list = blocks.box([], 'cp-support-container');
|
||||
let container = blocks.box([searchBlock, list], 'cp-support-search-container');
|
||||
let list = blocks.block([], 'cp-support-container');
|
||||
let container = blocks.block([searchBlock, list], 'cp-support-search-container');
|
||||
let $list = $(list);
|
||||
let searchText = '';
|
||||
APP.searchAutoRefresh = false;
|
||||
|
@ -634,7 +634,7 @@ define([
|
|||
}, { noTitle: true, noHint: true });
|
||||
|
||||
sidebar.addItem('recorded', cb => {
|
||||
let empty = blocks.text(Messages.support_recordedEmpty);
|
||||
let empty = blocks.inline(Messages.support_recordedEmpty);
|
||||
let list = blocks.list([
|
||||
Messages.support_recordedId,
|
||||
Messages.support_recordedContent,
|
||||
|
@ -643,7 +643,7 @@ define([
|
|||
let labelledList = blocks.labelledInput(Messages.support_recordedList, list);
|
||||
let inputId = blocks.input({type:'text', class: 'cp-support-recorded-id',
|
||||
maxlength: 20 });
|
||||
let inputContent = blocks.textArea();
|
||||
let inputContent = blocks.textarea();
|
||||
let labelId = blocks.labelledInput(Messages.support_recordedId, inputId);
|
||||
let labelContent = blocks.labelledInput(Messages.support_recordedContent, inputContent);
|
||||
|
||||
|
@ -746,7 +746,7 @@ define([
|
|||
|
||||
let reset = blocks.button('danger-alt', 'fa-times', Messages.form_reset);
|
||||
|
||||
let paste = blocks.textArea({
|
||||
let paste = blocks.textarea({
|
||||
class: 'cp-support-newticket-paste',
|
||||
placeholder: Messages.support_pasteUserData
|
||||
});
|
||||
|
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue