Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-09 23:40:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add category collapsing and expanding

Browse source
This commit is contained in:
Zander Otavka 2016-07-28 17:14:48 -07:00
parent 987a8c802f
commit bcff561eb8
2 changed files with 48 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
domain-server/resources/web/css/style.css
View file

@ -37,8 +37,9 @@ body {
margin-right: auto; margin-right: auto;
} }
.table .value-category { .value-category:not(.inputs) {
font-weight: bold; font-weight: bold;
background: #f5f5f5;
} }
.table .value-category [message]::after { .table .value-category [message]::after {
@ -47,8 +48,18 @@ body {
font-weight: normal; font-weight: normal;
} }
.table .value-category.inputs { .table .value-row.contracted,
font-weight: normal; .table .inputs.contracted {
display: none;
}
.toggle-category {
cursor: pointer;
}
.toggle-category-icon {
padding: 4px;
margin-right: 8px;
} }
.glyphicon-remove { .glyphicon-remove {

40
domain-server/resources/web/settings/js/settings.js
View file

@ -14,6 +14,11 @@ var Settings = {
DEL_ROW_SPAN_CLASSES: 'glyphicon glyphicon-remove del-row', DEL_ROW_SPAN_CLASSES: 'glyphicon glyphicon-remove del-row',
ADD_CATEGORY_BUTTON_CLASS: 'add-category', ADD_CATEGORY_BUTTON_CLASS: 'add-category',
ADD_CATEGORY_SPAN_CLASSES: 'glyphicon glyphicon-plus add-category', ADD_CATEGORY_SPAN_CLASSES: 'glyphicon glyphicon-plus add-category',
TOGGLE_CATEGORY_COLUMN_CLASS: 'toggle-category',
TOGGLE_CATEGORY_SPAN_CLASS: 'toggle-category-icon',
TOGGLE_CATEGORY_SPAN_CLASSES: 'glyphicon toggle-category-icon',
TOGGLE_CATEGORY_EXPANDED_CLASS: 'glyphicon-triangle-bottom',
TOGGLE_CATEGORY_CONTRACTED_CLASS: 'glyphicon-triangle-right',
DEL_CATEGORY_BUTTON_CLASS: 'del-category', DEL_CATEGORY_BUTTON_CLASS: 'del-category',
DEL_CATEGORY_SPAN_CLASSES: 'glyphicon glyphicon-remove del-category', DEL_CATEGORY_SPAN_CLASSES: 'glyphicon glyphicon-remove del-category',
MOVE_UP_BUTTON_CLASS: 'move-up', MOVE_UP_BUTTON_CLASS: 'move-up',
@ -184,6 +189,10 @@ $(document).ready(function(){
deleteTableCategory($(this).closest('tr')); deleteTableCategory($(this).closest('tr'));
}); });
$('#' + Settings.FORM_ID).on('click', '.' + Settings.TOGGLE_CATEGORY_COLUMN_CLASS, function(){
toggleTableCategory($(this).closest('tr'));
});
$('#' + Settings.FORM_ID).on('click', '.' + Settings.MOVE_UP_BUTTON_CLASS, function(){ $('#' + Settings.FORM_ID).on('click', '.' + Settings.MOVE_UP_BUTTON_CLASS, function(){
moveTableRow($(this).closest('tr'), true); moveTableRow($(this).closest('tr'), true);
}); });
@ -937,9 +946,10 @@ $('body').on('click', '.save-button', function(e){
}); });
function makeTable(setting, keypath, setting_value, isLocked) { function makeTable(setting, keypath, setting_value, isLocked) {
// TODO: enforce category sorting
var isArray = !_.has(setting, 'key'); var isArray = !_.has(setting, 'key');
var categoryKey = setting.categorize_by_key;
var isCategorized = !!categoryKey && isArray;
if (!isArray && setting.can_order) { if (!isArray && setting.can_order) {
setting.can_order = false; setting.can_order = false;
} }
@ -1013,8 +1023,6 @@ function makeTable(setting, keypath, setting_value, isLocked) {
var rowIsObject = setting.columns.length > 1; var rowIsObject = setting.columns.length > 1;
_.each(setting_value, function(row, rowIndexOrName) { _.each(setting_value, function(row, rowIndexOrName) {
var categoryKey = setting.categorize_by_key;
var isCategorized = !!categoryKey && isArray;
var categoryPair = {}; var categoryPair = {};
var categoryValue = ""; var categoryValue = "";
if (isCategorized) { if (isCategorized) {
@ -1118,7 +1126,8 @@ function makeTable(setting, keypath, setting_value, isLocked) {
function makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns, canRemove, message) { function makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns, canRemove, message) {
var html = var html =
"<tr class='" + Settings.DATA_CATEGORY_CLASS + "' data-key='" + categoryKey + "' data-category='" + categoryValue + "'>" + "<tr class='" + Settings.DATA_CATEGORY_CLASS + "' data-key='" + categoryKey + "' data-category='" + categoryValue + "'>" +
"<td colspan='" + (numVisibleColumns - 1) + "'>" + "<td colspan='" + (numVisibleColumns - 1) + "' class='" + Settings.TOGGLE_CATEGORY_COLUMN_CLASS + "'>" +
"<span class='" + Settings.TOGGLE_CATEGORY_SPAN_CLASSES + " " + Settings.TOGGLE_CATEGORY_EXPANDED_CLASS + "'></span>" +
"<span message='" + message + "'>" + categoryValue + "</span>" + "<span message='" + message + "'>" + categoryValue + "</span>" +
"</td>" + "</td>" +
((canRemove) ? ( ((canRemove) ? (
@ -1418,7 +1427,7 @@ function addTableCategory($categoryInputRow) {
setTimeout(function () { setTimeout(function () {
$categoryInputRow.removeClass("has-warning"); $categoryInputRow.removeClass("has-warning");
}, 1000); }, 400);
return; return;
} }
@ -1477,6 +1486,25 @@ function deleteTableCategory($categoryHeaderRow) {
}); });
} }
function toggleTableCategory($categoryHeaderRow) {
var $icon = $categoryHeaderRow.find("." + Settings.TOGGLE_CATEGORY_SPAN_CLASS).first();
var categoryName = $categoryHeaderRow.data("category");
var wasExpanded = $icon.hasClass(Settings.TOGGLE_CATEGORY_EXPANDED_CLASS);
if (wasExpanded) {
$icon
.addClass(Settings.TOGGLE_CATEGORY_CONTRACTED_CLASS)
.removeClass(Settings.TOGGLE_CATEGORY_EXPANDED_CLASS);
} else {
$icon
.addClass(Settings.TOGGLE_CATEGORY_EXPANDED_CLASS)
.removeClass(Settings.TOGGLE_CATEGORY_CONTRACTED_CLASS);
}
$categoryHeaderRow
.closest("table")
.find("tr[data-category='" + categoryName + "']")
.toggleClass("contracted", wasExpanded);
}
function moveTableRow(row, move_up) { function moveTableRow(row, move_up) {
var table = $(row).closest('table') var table = $(row).closest('table')
var isArray = table.data('setting-type') === 'array' var isArray = table.data('setting-type') === 'array'