The_Great_Archive/cryptpad
1
0
Fork 0
mirror of https://github.com/cryptpad/cryptpad.git synced 2026-09-14 11:05:41 +05:00
Code Issues Packages Projects Releases Wiki Activity

improvements to dropdown and storing theme settings

Browse Source
This commit is contained in:
Zuzanna 2026-03-10 11:30:47 +01:00
parent 13ffd83ce6
commit b27d5bfc5d
2 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
www/common/common-ui-elements.js
View File

@ -1611,7 +1611,6 @@ define([
}
});
}
// Everything is added as an "li" tag
// Links and items with action are focusable
// Add correct "role" attribute
@ -1642,7 +1641,14 @@ define([
if ($(e.target).attr('href') === '#') {
e.preventDefault();
}
if (config.isSelect) { return; }
if (config.isSelect && config.attributes["data-app"] !== 'diagram') { return; }
if ($el.length !== 1) { return; }
if (config.attributes["data-app"] === 'diagram') {
$('.cp-dropdown-content').find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
$el.addClass('cp-dropdown-element-active');
$el.closest('li').focus();
}
e.stopPropagation();
if (typeof(config.action) === "function") {
var close = config.action(e);
@ -1829,7 +1835,7 @@ define([
}
$innerblock.find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
setTimeout(() => {
if (config.isSelect && value) {
if (config.isSelect && value || config.attributes && config.attributes["data-app"] === 'diagram' && value) {
// We use JSON.stringify here to escape quotes
if (typeof(value) === "object") { value = JSON.stringify(value); }
var $val = $innerblock.find('[data-value='+JSON.stringify(value)+']');

36
www/diagram/inner.js
View File

@ -194,23 +194,27 @@ define([
// starting the CryptPad framework
framework.start();
var themes = JSON.parse(localStorage.original.getItem('drawio-theme')) || [];
var checkTheme = function (fileChannel) {
var themes = localStorage.original.getItem('drawio-theme') || [];
if (themes.length) { return JSON.parse(themes).some(theme => theme[fileChannel]); };
if (themes.length) { return themes.find(obj => obj.hasOwnProperty(fileChannel)); };
};
var loadDiagram = function () {
var checkDefaultTheme = function () {
privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
var defaultTheme;
if (framework.isIntegrated()) {
defaultTheme = 'kennedy';
} else if (checkTheme(privateData.channel)) {
defaultTheme = localStorage.original.getItem('drawio-theme')[privateData.channel];
defaultTheme = themes.find(item => item[privateData.channel])?.[privateData.channel];
} else {
defaultTheme = 'sketch';
}
return defaultTheme;
};
var loadDiagram = function () {
var defaultTheme = checkDefaultTheme();
parameters.set('ui', defaultTheme);
drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
@ -230,25 +234,27 @@ define([
}
}, false);
var addTheme = function (fileChannel, theme) {
var existingThemes = JSON.parse(localStorage.original.getItem('drawio-theme')) || [];
var setTheme = function (fileChannel, theme) {
if (checkTheme(fileChannel)) {
existingThemes[fileChannel] = theme;
var currentTheme = themes.find(obj => obj.hasOwnProperty(fileChannel));
currentTheme[fileChannel] = theme;
} else {
existingThemes.push({[fileChannel]: theme});
themes.push({[fileChannel]: theme});
}
localStorage.original.setItem('drawio-theme', JSON.stringify(existingThemes));
localStorage.original.setItem('drawio-theme', JSON.stringify(themes));
};
var mkModeButton = function (framework) {
var modes = ['kennedy', 'sketch'];
var types = [];
modes.forEach(function(mode){
types.push({
tag: 'a',
attributes: {
'data-value': mode,
'aria-label': Messages._getKey('diagram_modesOptionLabel', [mode]),
'data-app': 'diagram'
},
content: mode,
action: function () {
@ -256,16 +262,18 @@ define([
drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
+ parameters;
privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
addTheme(privateData.channel, mode);
setTheme(privateData.channel, mode);
},
});
});
const $drawer = UIElements.createDropdown({
text: Messages.diagram_modes, // XXX
var $drawer = UIElements.createDropdown({
text: Messages.diagram_modes,
options: types,
common: framework._.sfCommon,
iconCls: 'color-palette'
isSelect: true,
iconCls: 'color-palette',
initialValue: parameters.get('ui') || checkDefaultTheme(),
});
framework._.toolbar.$theme = $drawer.find('ul.cp-dropdown-content');
framework._.toolbar.$bottomL.append($drawer);