mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-11-04 02:01:30 +01:00
Code Issues Projects Releases Wiki Activity

css: adds UI skin variants builder (only for colibris skin)

Browse Source
This commit is contained in:
Sebastian Castro 2020-04-09 08:41:00 +02:00 committed by muxator
parent cbc6304243
commit c6f5ced23c
4 changed files with 95 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
settings.json.docker
View File

@ -98,6 +98,8 @@
/*
* Skin Variants
*
* Use the UI skin variants builder at /p/test#skinvariantsbuilder
*
* For the colibris skin only, you can choose how to render the three main
* containers:
* - toolbar (top menu with icons)

2
settings.json.template
View File

@ -89,6 +89,8 @@
/*
* Skin Variants
*
* Use the UI skin variants builder at /p/test#skinvariantsbuilder
*
* For the colibris skin only, you can choose how to render the three main
* containers:
* - toolbar (top menu with icons)

55
src/static/js/skin_variants.js Normal file
View File

@ -0,0 +1,55 @@
// Specific hash to display the skin variants builder popup
if (window.location.hash.toLowerCase() == "#skinvariantsbuilder") {
$('#skin-variants').addClass('popup-show');
$('.skin-variant').change(function() {
updateSkinVariantsClasses();
});
var containers = ['editor', 'background', 'toolbar'];
var colors = ['super-light', 'light', 'dark', 'super-dark'];
updateCheckboxFromSkinClasses();
updateSkinVariantsClasses();
// add corresponding classes when config change
function updateSkinVariantsClasses() {
var domsToUpdate = [
$('html'),
$('iframe[name=ace_outer]').contents().find('html'),
$('iframe[name=ace_outer]').contents().find('iframe[name=ace_inner]').contents().find('html')
];
colors.forEach(function(color) {
containers.forEach(function(container) {
domsToUpdate.forEach(function(el) { el.removeClass(color + '-' + container); });
})
})
domsToUpdate.forEach(function(el) { el.removeClass('full-width-editor'); });
var new_classes = [];
$('.skin-variant-color').each(function() {
new_classes.push($(this).val() + "-" + $(this).data('container'));
})
if ($('#skin-variant-full-width').is(':checked')) new_classes.push("full-width-editor");
domsToUpdate.forEach(function(el) { el.addClass(new_classes.join(" ")); });
$('#skin-variants-result').val('"skinVariants": "' + new_classes.join(" ") + '"');
}
// run on init
function updateCheckboxFromSkinClasses() {
$('html').attr('class').split(' ').forEach(function(classItem) {
var container = classItem.split('-').slice(-1);
var container = classItem.substring(classItem.lastIndexOf("-") + 1, classItem.length);
if (containers.indexOf(container) > -1) {
var color = classItem.substring(0, classItem.lastIndexOf("-"));
$('.skin-variant-color[data-container="' + container + '"').val(color);
}
})
$('#skin-variant-full-width').prop('checked', $('html').hasClass('full-width-editor'));
}
}

36
src/templates/pad.html
View File

@ -387,6 +387,40 @@
</div>
</div>
<!------------------------------------------------------------------>
<!-- SKIN VARIANTS BUILDER (Customize rendering, only for admins) -->
<!------------------------------------------------------------------>
<% if (settings.skinName == 'colibris') { %>
<div id="skin-variants" class="popup"><div class="popup-content">
<h1>Skin Builder</h1>
<div class="dropdowns-container">
<% containers = [ "toolbar", "background", "editor" ]; %>
<% for(var i=0; i < containers.length; i++) { %>
<p class="dropdown-line">
<label class="skin-variant-container"><%=containers[i]%></label>
<select class="skin-variant skin-variant-color" data-container="<%=containers[i]%>">
<option value="super-light">Super Light</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="super-dark">Super Dark</option>
</select>
</p>
<% } %>
</div>
<p>
<input type="checkbox" id="skin-variant-full-width" class="skin-variant"/>
<label for="skin-variant-full-width">Full Width Editor</label>
</p>
<p>
<label>Result to copy in settings.json</label>
<input id="skin-variants-result" type="text" readonly class="disabled" />
</p>
</div></div>
<% } %>
<% e.end_block(); %>
</div> <!-- End of #editorcontainerbox -->
@ -472,6 +506,8 @@
chat = require('ep_etherpad-lite/static/js/chat').chat;
padeditbar = require('ep_etherpad-lite/static/js/pad_editbar').padeditbar;
padimpexp = require('ep_etherpad-lite/static/js/pad_impexp').padimpexp;
require('ep_etherpad-lite/static/js/skin_variants');
}());
// @license-end
</script>