From 453174a18b563b2412c42d554d52e8b35e6d005d Mon Sep 17 00:00:00 2001 From: kkapsner <github@mail.kkapsner.de> Date: Sun, 22 Dec 2024 00:53:15 +0100 Subject: [PATCH] Improve settings export For #705 --- _locales/en/messages.json | 4 ++-- options/export.css | 22 ++++++++++++++++++---- options/export.html | 1 + options/export.js | 6 ++++++ 4 files changed, 27 insertions(+), 6 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 73b7acc..9e9e68f 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1456,11 +1456,11 @@ }, "exportSettings_title": { - "message": "Export settings", + "message": "CanvasBlocker settings export", "description": "" }, "exportSettings_description": { - "message": "", + "message": "This allows you to copy your current settings. You can also paste and modify them here. If something is invalid the textarea will get a red background and the change is not stored.", "description": "" }, diff --git a/options/export.css b/options/export.css index 9a9e589..8346edf 100644 --- a/options/export.css +++ b/options/export.css @@ -1,12 +1,26 @@ -html, body { +html { height: 100%; padding: 0; margin: 0; } -#settings { - width: 100%; - box-sizing: border-box; + +body { height: 100%; + margin: 0; + padding: 0.5em; + box-sizing: border-box; + display: grid; + grid-template-columns: 100%; + grid-template-rows: max-content auto; +} + +#description { + margin: 0.5em 0em; +} + +#settings { + box-sizing: border-box; + margin: 0; } #settings.invalid { background-color: var(--input-error-background-color); diff --git a/options/export.html b/options/export.html index 94b2268..0de672c 100644 --- a/options/export.html +++ b/options/export.html @@ -9,6 +9,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> + <div id="description"></div> <textarea id="settings"></textarea> <script src="../lib/require.js"></script> <script src="../lib/logging.js"></script> diff --git a/options/export.js b/options/export.js index 4984da9..fb454fe 100644 --- a/options/export.js +++ b/options/export.js @@ -8,6 +8,12 @@ const logging = require("../lib/logging"); const settingsMigration = require("../lib/settingsMigration"); require("../lib/theme").init(); + const extension = require("../lib/extension"); + document.querySelector("head title").textContent = extension.getTranslation("exportSettings_title"); + document.getElementById("description").appendChild( + extension.parseTranslation(extension.getTranslation("exportSettings_description")) + ); + const input = document.getElementById("settings"); settings.onloaded(function(){ const data = {};