web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
yflory 2017-01-19 12:13:57 +01:00
parent fa8a0d5880
commit 36c8ade26c
5 changed files with 82 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/main.css
View File

@ -349,6 +349,8 @@
min-width: 200px; min-width: 200px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000; z-index: 1000;
max-height: 300px;
overflow-y: auto;
} }
.dropdown-bar .dropdown-bar-content.left { .dropdown-bar .dropdown-bar-content.left {
right: 0; right: 0;

2
customize.dist/src/less/dropdown.less
View File

@ -29,6 +29,8 @@
min-width: 200px; min-width: 200px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000; z-index: 1000;
max-height: 300px;
overflow-y: auto;
&.left { &.left {
right: 0; right: 0;

2
customize.dist/toolbar.css
View File

@ -16,6 +16,8 @@
min-width: 200px; min-width: 200px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000; z-index: 1000;
max-height: 300px;
overflow-y: auto;
} }
.dropdown-bar .dropdown-bar-content.left { .dropdown-bar .dropdown-bar-content.left {
right: 0; right: 0;

89
www/code/main.js
View File

@ -77,7 +77,10 @@ define([
} }
CodeMirror.autoLoadMode(editor, mode); CodeMirror.autoLoadMode(editor, mode);
editor.setOption('mode', 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 editor.setValue(Messages.codeInitialState); // HERE
@ -107,7 +110,7 @@ define([
} }
editor.setOption('theme', theme); 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) { var configureLanguage = function (cb) {
// FIXME this is async so make it happen as early as possible // 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 */ $block.find('a').click(function (e) {
var $language = module.$language = $('<select>', { setMode($(this).attr('data-value'));
title: 'syntax highlighting', $button.text($(this).text());
id: 'language-mode',
'class': 'rightside-element'
}).on('change', function () {
setMode($language.val());
onLocal();
}); });
Modes.list.map(function (o) { $rightside.append($block);
$language.append($('<option>', {
value: o.mode,
}).text(o.language));
});
$rightside.append($language);
cb(); cb();
}; };
var configureTheme = function () { var configureTheme = function () {
/* Remember the user's last choice of theme using localStorage */ /* Remember the user's last choice of theme using localStorage */
var themeKey = 'CRYPTPAD_CODE_THEME'; var themeKey = 'CRYPTPAD_CODE_THEME';
var lastTheme = localStorage.getItem(themeKey) || 'default'; var lastTheme = localStorage.getItem(themeKey) || 'default';
/* Let the user select different themes */ var options = [];
var $themeDropdown = $('<select>', { Themes.forEach(function (l) {
title: 'color theme', options.push({
id: 'display-theme', tag: 'a',
'class': 'rightside-element' attributes: {
}); 'data-value': l.name,
Themes.forEach(function (o) { 'href': '#',
$themeDropdown.append($('<option>', { },
selected: o.name === lastTheme, content: l.name // Pretty name of the language value
}).val(o.name).text(o.name)); });
}); });
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); $block.find('a').click(function (e) {
var theme = $(this).attr('data-value');
var $theme = $bar.find('select#display-theme'); setTheme(theme, $block);
$button.text($(this).text());
setTheme(lastTheme, $theme);
$theme.on('change', function () {
var theme = $theme.val();
console.log("Setting theme to %s", theme);
setTheme(theme, $theme);
// remember user choices
localStorage.setItem(themeKey, theme); localStorage.setItem(themeKey, theme);
}); });
$rightside.append($block);
}; };
if (!readOnly) { if (!readOnly) {

54
www/slide/main.js
View File

@ -126,7 +126,7 @@ define([
} }
editor.setOption('theme', theme); 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); $rightside.append($leavePresent);
var configureTheme = function () { 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 */ /* Remember the user's last choice of theme using localStorage */
var themeKey = 'CRYPTPAD_CODE_THEME'; var themeKey = 'CRYPTPAD_CODE_THEME';
var lastTheme = localStorage.getItem(themeKey) || 'default'; var lastTheme = localStorage.getItem(themeKey) || 'default';
/* Let the user select different themes */ var options = [];
var $themeDropdown = $('<select>', { Themes.forEach(function (l) {
title: 'color theme', options.push({
id: 'display-theme', tag: 'a',
'class': 'rightside-element' attributes: {
}); 'data-value': l.name,
Themes.forEach(function (o) { 'href': '#',
$themeDropdown.append($('<option>', { },
selected: o.name === lastTheme, content: l.name // Pretty name of the language value
}).val(o.name).text(o.name)); });
}); });
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); $block.find('a').click(function (e) {
var theme = $(this).attr('data-value');
var $theme = $bar.find('select#display-theme'); setTheme(theme, $block);
$button.text($(this).text());
setTheme(lastTheme, $theme);
$theme.on('change', function () {
var theme = $theme.val();
console.log("Setting theme to %s", theme);
setTheme(theme, $theme);
// remember user choices
localStorage.setItem(themeKey, theme); localStorage.setItem(themeKey, theme);
}); });
$rightside.append($block);
}; };
var configureColors = function () { var configureColors = function () {