infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

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

Browse Source
pull/1/head
yflory 8 years ago
parent fa8a0d5880
commit 36c8ade26c
5 changed files with 87 additions and 72 deletions
Show Stats Download Patch File Download Diff File

2
customize.dist/main.css
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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;

95
www/code/main.js
Unescape Escape 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 = [];
/* Let the user select different syntax highlighting modes */ Modes.list.forEach(function (l) {
var $language = module.$language = $('<select>', { options.push({
title: 'syntax highlighting', tag: 'a',
id: 'language-mode', attributes: {
'class': 'rightside-element' 'data-value': l.mode,
}).on('change', function () { 'href': '#',
setMode($language.val()); },
onLocal(); content: l.language // Pretty name of the language value
});
}); });
var dropdownConfig = {
Modes.list.map(function (o) { text: 'Mode', // Button initial text
$language.append($('<option>', { options: options, // Entries displayed in the menu
value: o.mode, left: true, // Open to the left of the button
}).text(o.language)); };
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(); 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
$rightside.append($themeDropdown); options: options, // Entries displayed in the menu
left: true, // Open to the left of the button
var $theme = $bar.find('select#display-theme'); };
var $block = module.$theme = Cryptpad.createDropdown(dropdownConfig);
setTheme(lastTheme, $theme); var $button = $block.find('.buttonTitle');
$theme.on('change', function () { setTheme(lastTheme, $block);
var theme = $theme.val();
console.log("Setting theme to %s", theme); $block.find('a').click(function (e) {
setTheme(theme, $theme); var theme = $(this).attr('data-value');
// remember user choices setTheme(theme, $block);
$button.text($(this).text());
localStorage.setItem(themeKey, theme); localStorage.setItem(themeKey, theme);
}); });
$rightside.append($block);
}; };
if (!readOnly) { if (!readOnly) {

58
www/slide/main.js
Unescape Escape 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
$rightside.append($themeDropdown); options: options, // Entries displayed in the menu
left: true, // Open to the left of the button
var $theme = $bar.find('select#display-theme'); };
var $block = module.$theme = Cryptpad.createDropdown(dropdownConfig);
setTheme(lastTheme, $theme); var $button = $block.find('.buttonTitle');
$theme.on('change', function () { setTheme(lastTheme, $block);
var theme = $theme.val();
console.log("Setting theme to %s", theme); $block.find('a').click(function (e) {
setTheme(theme, $theme); var theme = $(this).attr('data-value');
// remember user choices setTheme(theme, $block);
$button.text($(this).text());
localStorage.setItem(themeKey, theme); localStorage.setItem(themeKey, theme);
}); });
$rightside.append($block);
}; };
var configureColors = function () { var configureColors = function () {

Write Preview
Loading…
Cancel
Save