mirror of https://github.com/xwiki-labs/cryptpad
Update the lists in the code and slide toolbars to use the new dropdown
This commit is contained in:
yflory
parent
88d5b4cc9c
commit
efdae19f0c
|
|
@ -347,6 +347,8 @@
|
|||
min-width: 160px;
|
||||
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.dropdown-bar .dropdown-bar-content.left {
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@
|
|||
min-width: 160px;
|
||||
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
|
||||
&.left {
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
min-width: 160px;
|
||||
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.dropdown-bar .dropdown-bar-content.left {
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -77,7 +77,10 @@ define([
|
|||
}
|
||||
CodeMirror.autoLoadMode(editor, mode);
|
||||
editor.setOption('mode', mode);
|
||||
if ($select && $select.val) { $select.val(mode); }
|
||||
if ($select) {
|
||||
var name = $select.find('a[data-value="' + mode + '"]').text() || 'Mode';
|
||||
$select.find('.buttonTitle').text(name);
|
||||
}
|
||||
};
|
||||
|
||||
editor.setValue(Messages.codeInitialState); // HERE
|
||||
|
|
@ -107,7 +110,7 @@ define([
|
|||
}
|
||||
editor.setOption('theme', theme);
|
||||
}
|
||||
if ($select && $select.val) { $select.val(theme || 'default'); }
|
||||
if ($select) { $select.find('.buttonTitle').text(theme || 'Theme'); }
|
||||
};
|
||||
}());
|
||||
|
||||
|
|
@ -441,58 +444,68 @@ define([
|
|||
|
||||
var configureLanguage = function (cb) {
|
||||
// FIXME this is async so make it happen as early as possible
|
||||
var options = [];
|
||||
Modes.list.forEach(function (l) {
|
||||
options.push({
|
||||
tag: 'a',
|
||||
attributes: {
|
||||
'data-value': l.mode,
|
||||
'href': '#',
|
||||
},
|
||||
content: l.language // Pretty name of the language value
|
||||
});
|
||||
});
|
||||
var dropdownConfig = {
|
||||
text: 'Mode', // Button initial text
|
||||
options: options, // Entries displayed in the menu
|
||||
left: true, // Open to the left of the button
|
||||
};
|
||||
var $block = module.$language = Cryptpad.createDropdown(dropdownConfig);
|
||||
var $button = $block.find('.buttonTitle');
|
||||
|
||||
/* Let the user select different syntax highlighting modes */
|
||||
var $language = module.$language = $('<select>', {
|
||||
title: 'syntax highlighting',
|
||||
id: 'language-mode',
|
||||
'class': 'rightside-element'
|
||||
}).on('change', function () {
|
||||
setMode($language.val());
|
||||
onLocal();
|
||||
$block.find('a').click(function (e) {
|
||||
setMode($(this).attr('data-value'));
|
||||
$button.text($(this).text());
|
||||
});
|
||||
|
||||
Modes.list.map(function (o) {
|
||||
$language.append($('<option>', {
|
||||
value: o.mode,
|
||||
}).text(o.language));
|
||||
});
|
||||
$rightside.append($language);
|
||||
$rightside.append($block);
|
||||
cb();
|
||||
};
|
||||
|
||||
|
||||
var configureTheme = function () {
|
||||
/* Remember the user's last choice of theme using localStorage */
|
||||
var themeKey = 'CRYPTPAD_CODE_THEME';
|
||||
var lastTheme = localStorage.getItem(themeKey) || 'default';
|
||||
|
||||
/* Let the user select different themes */
|
||||
var $themeDropdown = $('<select>', {
|
||||
title: 'color theme',
|
||||
id: 'display-theme',
|
||||
'class': 'rightside-element'
|
||||
});
|
||||
Themes.forEach(function (o) {
|
||||
$themeDropdown.append($('<option>', {
|
||||
selected: o.name === lastTheme,
|
||||
}).val(o.name).text(o.name));
|
||||
var options = [];
|
||||
Themes.forEach(function (l) {
|
||||
options.push({
|
||||
tag: 'a',
|
||||
attributes: {
|
||||
'data-value': l.name,
|
||||
'href': '#',
|
||||
},
|
||||
content: l.name // Pretty name of the language value
|
||||
});
|
||||
});
|
||||
var dropdownConfig = {
|
||||
text: 'Theme', // Button initial text
|
||||
options: options, // Entries displayed in the menu
|
||||
left: true, // Open to the left of the button
|
||||
};
|
||||
var $block = module.$theme = Cryptpad.createDropdown(dropdownConfig);
|
||||
var $button = $block.find('.buttonTitle');
|
||||
|
||||
setTheme(lastTheme, $block);
|
||||
|
||||
$rightside.append($themeDropdown);
|
||||
|
||||
var $theme = $bar.find('select#display-theme');
|
||||
|
||||
setTheme(lastTheme, $theme);
|
||||
|
||||
$theme.on('change', function () {
|
||||
var theme = $theme.val();
|
||||
console.log("Setting theme to %s", theme);
|
||||
setTheme(theme, $theme);
|
||||
// remember user choices
|
||||
$block.find('a').click(function (e) {
|
||||
var theme = $(this).attr('data-value');
|
||||
setTheme(theme, $block);
|
||||
$button.text($(this).text());
|
||||
localStorage.setItem(themeKey, theme);
|
||||
});
|
||||
|
||||
$rightside.append($block);
|
||||
};
|
||||
|
||||
if (!readOnly) {
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ define([
|
|||
}
|
||||
editor.setOption('theme', theme);
|
||||
}
|
||||
if ($select && $select.val) { $select.val(theme || 'default'); }
|
||||
if ($select) { $select.find('.buttonTitle').text(theme || 'Theme'); }
|
||||
};
|
||||
}());
|
||||
|
||||
|
|
@ -499,44 +499,40 @@ define([
|
|||
}
|
||||
$rightside.append($leavePresent);
|
||||
|
||||
|
||||
var configureTheme = function () {
|
||||
/*var $language = $('<span>', {
|
||||
'style': "margin-right: 10px;",
|
||||
'class': 'rightside-element'
|
||||
}).text("Markdown");
|
||||
$rightside.append($language);*/
|
||||
|
||||
/* Remember the user's last choice of theme using localStorage */
|
||||
var themeKey = 'CRYPTPAD_CODE_THEME';
|
||||
var lastTheme = localStorage.getItem(themeKey) || 'default';
|
||||
|
||||
/* Let the user select different themes */
|
||||
var $themeDropdown = $('<select>', {
|
||||
title: 'color theme',
|
||||
id: 'display-theme',
|
||||
'class': 'rightside-element'
|
||||
});
|
||||
Themes.forEach(function (o) {
|
||||
$themeDropdown.append($('<option>', {
|
||||
selected: o.name === lastTheme,
|
||||
}).val(o.name).text(o.name));
|
||||
var options = [];
|
||||
Themes.forEach(function (l) {
|
||||
options.push({
|
||||
tag: 'a',
|
||||
attributes: {
|
||||
'data-value': l.name,
|
||||
'href': '#',
|
||||
},
|
||||
content: l.name // Pretty name of the language value
|
||||
});
|
||||
});
|
||||
var dropdownConfig = {
|
||||
text: 'Theme', // Button initial text
|
||||
options: options, // Entries displayed in the menu
|
||||
left: true, // Open to the left of the button
|
||||
};
|
||||
var $block = module.$theme = Cryptpad.createDropdown(dropdownConfig);
|
||||
var $button = $block.find('.buttonTitle');
|
||||
|
||||
setTheme(lastTheme, $block);
|
||||
|
||||
$rightside.append($themeDropdown);
|
||||
|
||||
var $theme = $bar.find('select#display-theme');
|
||||
|
||||
setTheme(lastTheme, $theme);
|
||||
|
||||
$theme.on('change', function () {
|
||||
var theme = $theme.val();
|
||||
console.log("Setting theme to %s", theme);
|
||||
setTheme(theme, $theme);
|
||||
// remember user choices
|
||||
$block.find('a').click(function (e) {
|
||||
var theme = $(this).attr('data-value');
|
||||
setTheme(theme, $block);
|
||||
$button.text($(this).text());
|
||||
localStorage.setItem(themeKey, theme);
|
||||
});
|
||||
|
||||
$rightside.append($block);
|
||||
};
|
||||
|
||||
var configureColors = function () {
|
||||
|
|
|
|||
Loading…
Reference in New Issue