diff --git a/_locales/de/messages.json b/_locales/de/messages.json index 9cb8476..89576a0 100644 --- a/_locales/de/messages.json +++ b/_locales/de/messages.json @@ -17,6 +17,32 @@ "description": "" }, + + "section_asking": { + "message": "Nachfragen", + "description": "" + }, + "section_faking": { + "message": "Vortäuschen", + "description": "" + }, + "section_notifications": { + "message": "Benachrichtigungen", + "description": "" + }, + "section_lists": { + "message": "Listen", + "description": "" + }, + "section_misc": { + "message": "Gemischtes", + "description": "" + }, + "section_settings": { + "message": "Einstellungen", + "description": "" + }, + "displayAdvancedSettings_title": { "message": "Expertenmodus", "description": "" diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 2e5f555..a8ccbb2 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -17,6 +17,32 @@ "description": "" }, + + "section_asking": { + "message": "Asking", + "description": "" + }, + "section_faking": { + "message": "Faking", + "description": "" + }, + "section_notifications": { + "message": "Notifications", + "description": "" + }, + "section_lists": { + "message": "Lists", + "description": "" + }, + "section_misc": { + "message": "Misc", + "description": "" + }, + "section_settings": { + "message": "Settings", + "description": "" + }, + "displayAdvancedSettings_title": { "message": "Expert mode", "description": "" diff --git a/options/options.css b/options/options.css index 7c338e7..bd94273 100644 --- a/options/options.css +++ b/options/options.css @@ -10,10 +10,22 @@ vertical-align: top; } -.settings .settingRow.hidden { +.settings .hidden { display: none; } +.settings td, .settings th { + margin: 0; + padding: 0; +} + +.settings .section h2 { + border: 1px #c1c1c1 solid; + border-radius: 0.5em ; + padding: 0.2em 0.5em; + margin: 0.7em 1px 0.2em; +} + .settings .settingRow .content { overflow: visible; padding: 0.5em 0; @@ -21,6 +33,17 @@ position: relative; } +.settings .settingRow td:first-child .content { + margin-left: 0.6em; +} +.settings .settingRow td:last-child .content { + margin-right: 0.6em; +} + +.settings .section + .settingRow .content { + border-top: 0 solid black; +} + .settings.hideDescriptions .settingRow .info { margin: 0 0.5em; border-radius: 100%; diff --git a/options/options.js b/options/options.js index a81637f..54fab9b 100644 --- a/options/options.js +++ b/options/options.js @@ -39,48 +39,88 @@ settings.on("displayDescriptions", function(){ table.className = "settings " + (settings.displayDescriptions? "display": "hide") + "Descriptions"; }); - document.body.appendChild(table); - settingsDisplay.forEach(function(display){ - var setting = settings.getDefinition(display.name); - if (!setting){ - if (display.inputs){ - setting = { - name: display.name, - inputs: display.inputs.map(settings.getDefinition) - }; - } - else if (callbacks[display.name]){ - setting = { - name: display.name, - action: callbacks[display.name] - }; - } + + let lastSection = null; + let addSection = function addSection(name){ + let body = document.createElement("tbody"); + if (name){ + let row = document.createElement("tr"); + row.className = "section"; + let cell = document.createElement("td"); + cell.colSpan = 2; + row.appendChild(cell); + let heading = document.createElement("h2"); + heading.textContent = browser.i18n.getMessage("section_" + name); + cell.appendChild(heading); + body.appendChild(row); } - if (setting){ - var row = optionsGui.createSettingRow(setting); - table.appendChild(row); - if (display.displayDependencies){ - var displayDependencies = display.displayDependencies; - displayDependencies = Array.isArray(displayDependencies)? - displayDependencies: - [displayDependencies]; - var computeDependencies = function(){ - logging.verbose("evaluate display dependencies for", setting); - row.classList[( - displayDependencies.some(function(displayDependency){ - return Object.keys(displayDependency).every(function(key){ - return displayDependency[key].indexOf(settings[key]) !== -1; - }); - }) - )? "remove": "add"]("hidden"); - }; - computeDependencies(); - displayDependencies.forEach(function(displayDependency){ - Object.keys(displayDependency).forEach(function(name){ - settings.on(name, computeDependencies); + table.appendChild(body); + let rows = []; + let section = { + addRow: function(row){ + rows.push(row); + body.appendChild(row); + }, + updateDisplay: function(){ + body.classList[( + rows.some(function(row){ + return !row.classList.contains("hidden"); + }) + )? "remove": "add"]("hidden"); + } + }; + lastSection = section; + }; + addSection(); + + settingsDisplay.forEach(function(display){ + if (typeof display === "string"){ + addSection(display); + } + else { + var setting = settings.getDefinition(display.name); + if (!setting){ + if (display.inputs){ + setting = { + name: display.name, + inputs: display.inputs.map(settings.getDefinition) + }; + } + else if (callbacks[display.name]){ + setting = { + name: display.name, + action: callbacks[display.name] + }; + } + } + if (setting){ + var row = optionsGui.createSettingRow(setting); + let section = lastSection; + section.addRow(row); + if (display.displayDependencies){ + var displayDependencies = display.displayDependencies; + displayDependencies = Array.isArray(displayDependencies)? + displayDependencies: + [displayDependencies]; + var computeDependencies = function(){ + logging.verbose("evaluate display dependencies for", setting); + row.classList[( + displayDependencies.some(function(displayDependency){ + return Object.keys(displayDependency).every(function(key){ + return displayDependency[key].indexOf(settings[key]) !== -1; + }); + }) + )? "remove": "add"]("hidden"); + section.updateDisplay(); + }; + computeDependencies(); + displayDependencies.forEach(function(displayDependency){ + Object.keys(displayDependency).forEach(function(name){ + settings.on(name, computeDependencies); + }); }); - }); + } } } }); diff --git a/options/settingsDisplay.js b/options/settingsDisplay.js index 8b5f0e8..32d17a9 100644 --- a/options/settingsDisplay.js +++ b/options/settingsDisplay.js @@ -13,20 +13,7 @@ { "name": "blockMode" }, - { - "name": "whiteList", - "displayDependencies": { - "blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "block", "ask"], - "displayAdvancedSettings": [true] - } - }, - { - "name": "blackList", - "displayDependencies": { - "blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "ask", "allow"], - "displayAdvancedSettings": [true] - } - }, + "asking", { "name": "askOnlyOnce", "displayDependencies": { @@ -40,6 +27,7 @@ "displayAdvancedSettings": [true] } }, + "faking", { "name": "minFakeSize", "displayDependencies": [ @@ -187,6 +175,7 @@ } ] }, + "notifications", { "name": "showNotifications", "displayDependencies": [ @@ -252,6 +241,7 @@ } ] }, + "lists", { "name": "enableStackList", "displayDependencies": { @@ -267,6 +257,21 @@ } }, + { + "name": "whiteList", + "displayDependencies": { + "blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "block", "ask"], + "displayAdvancedSettings": [true] + } + }, + { + "name": "blackList", + "displayDependencies": { + "blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "ask", "allow"], + "displayAdvancedSettings": [true] + } + }, + "misc", { "name": "showReleaseNotes" }, @@ -276,6 +281,7 @@ "displayAdvancedSettings": [true] } }, + "settings", { "name": "exportSettings", "displayDependencies": {