Merge branch 'sidebar' into support2

This commit is contained in:
yflory 2024-03-15 16:51:02 +01:00
commit c07fc805ab
4 changed files with 2477 additions and 1041 deletions

View File

@ -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;

View File

@ -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 () {

View File

@ -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