Update the lists in the code and slide toolbars to use the new dropdown

pull/1/head
yflory 8 years ago
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
/* 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();
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
});
});
Modes.list.map(function (o) {
$language.append($('<option>', {
value: o.mode,
}).text(o.language));
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');
$block.find('a').click(function (e) {
setMode($(this).attr('data-value'));
$button.text($(this).text());
});
$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
});
});
$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
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);
$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
});
});
$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
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);
$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…
Cancel
Save