super_settings 2.4.3 → 2.6.0

data/lib/super_settings/application/layout_styles.css

@@ -1,42 +1,94 @@
-* {
+*, *::before, *::after {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
+html { font-size: 16px; }
+
 body {
-  font-family: sans-serif;
-  font-size: 1rem;
-  line-height: 1.5;
-  text-align: left;
+  font-family: system-ui, -apple-system, sans-serif;
+  background: var(--background-color);
   color: var(--text-color);
-  background-color: var(--background-color);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   margin: 0;
   padding: 0;
+  min-height: 100vh;
 }
 
-header {
-  background-color: #666;
-  color: white;
-  padding: 1rem;
+.super-settings-page-header {
+  border-bottom: 1px solid var(--border-color, #e2e5ea);
+  background: var(--header-background-color, #edeef1);
 }
 
-header h1.logo {
-  font-size: 20px;
-  margin: 0;
+.super-settings-page-header-inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 20px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-header h1.logo a {
-  color: #ffffff;
+.super-settings-page-header-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   text-decoration: none;
+  color: inherit;
+}
+
+a.super-settings-page-header-brand:visited {
+  color: inherit;
 }
-header h1.logo a:visited {
-  color: #ffffff;
+
+.super-settings-page-header-mark {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #0d9488;
+  flex-shrink: 0;
+}
+
+.super-settings-page-header-mark svg {
+  width: 24px;
+  height: 24px;
 }
 
-header h1.logo img {
-  max-height: 3rem;
+.super-settings-page-header-mark img {
+  max-height: 32px;
+  max-width: 32px;
   vertical-align: middle;
-  display: inline-block;
-  margin-right: 1rem;
+}
+
+.super-settings-page-header-title {
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--text-color);
+  letter-spacing: -0.025em;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.super-settings-page-header-subtitle {
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  color: #9ca3af;
+  line-height: 1.3;
+  margin: 0;
+  letter-spacing: 0.01em;
+}
+
+.super-settings-container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
 }
 
 a {
@@ -47,3 +99,241 @@ a {
 a:visited {
   color: var(--link-color);
 }
+
+/* ══════════════════════════════════════════
+   FOOTER
+   ══════════════════════════════════════════ */
+
+.super-settings-page-footer {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px 24px 24px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.super-settings-theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: #9ca3af;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color 0.2s, border-color 0.2s;
+}
+
+.super-settings-theme-toggle:hover {
+  color: var(--link-color);
+  border-color: var(--link-color);
+}
+
+.super-settings-theme-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.super-settings-theme-icon-moon {
+  display: none;
+}
+
+[data-theme="dark"] .super-settings-theme-icon-sun {
+  display: none;
+}
+
+[data-theme="dark"] .super-settings-theme-icon-moon {
+  display: block;
+}
+
+/* ══════════════════════════════════════════
+   LANGUAGE MENU (in footer)
+   ══════════════════════════════════════════ */
+
+.super-settings-language-menu {
+  position: relative;
+  display: block;
+  flex-shrink: 0;
+}
+
+.super-settings-language-menu > summary {
+  list-style: none;
+}
+
+.super-settings-language-menu > summary::-webkit-details-marker {
+  display: none;
+}
+
+.super-settings-language-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color, #ccc);
+  background: var(--background-color, #fff);
+  color: var(--text-color);
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease;
+  max-width: 180px;
+  white-space: nowrap;
+}
+
+.super-settings-language-trigger:hover {
+  border-color: var(--link-color);
+  color: var(--link-color);
+}
+
+.super-settings-language-trigger:focus-visible {
+  outline: 2px solid var(--link-color);
+  outline-offset: 2px;
+}
+
+.super-settings-language-trigger-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.super-settings-language-trigger-icon svg {
+  width: 13px;
+  height: 13px;
+}
+
+.super-settings-language-trigger-current {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.75rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.super-settings-language-trigger-caret {
+  width: 12px;
+  height: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  opacity: 0.5;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.super-settings-language-trigger-caret svg {
+  width: 100%;
+  height: 100%;
+}
+
+.super-settings-language-menu[open] .super-settings-language-trigger {
+  border-color: var(--link-color);
+  color: var(--link-color);
+}
+
+.super-settings-language-menu[open] .super-settings-language-trigger-caret {
+  opacity: 0.8;
+  transform: rotate(180deg);
+}
+
+.super-settings-language-popup {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 6px);
+  min-width: 160px;
+  max-height: 260px;
+  margin: 0;
+  padding: 4px;
+  background: var(--background-color, #fff);
+  border: 1px solid var(--border-color, #ccc);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  opacity: 0;
+  transform: translateY(4px);
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  overflow-y: auto;
+}
+
+.super-settings-language-popup li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.super-settings-language-menu[open] .super-settings-language-popup {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.super-settings-language-option {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-color);
+  cursor: pointer;
+  text-align: start;
+  transition: background 0.1s ease;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.super-settings-language-option-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.75rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.super-settings-language-option:hover,
+.super-settings-language-option:focus-visible {
+  background: var(--border-color, #eee);
+}
+
+.super-settings-language-option-check {
+  width: 12px;
+  height: 12px;
+  color: var(--link-color);
+  opacity: 0;
+  transform: scale(0.5);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+.super-settings-language-option-check svg {
+  width: 100%;
+  height: 100%;
+}
+
+.super-settings-language-option.is-active {
+  background: color-mix(in srgb, var(--link-color) 10%, transparent);
+}
+
+.super-settings-language-option.is-active .super-settings-language-option-check {
+  opacity: 1;
+  transform: scale(1);
+}
+
+@media (max-width: 640px) {
+  .super-settings-page-header-inner {
+    padding: 16px 24px;
+  }
+  .super-settings-page-footer {
+    padding: 0 24px 16px 24px;
+  }
+}

data/lib/super_settings/application/layout_vars.css.erb

@@ -1,8 +1,10 @@
-<% unless color_scheme != :dark %>
+<% unless color_scheme == :dark %>
   :root {
-    --text-color: #212529;
-    --background-color: #ffffff;
-    --link-color: #369;
+    --text-color: #111827;
+    --background-color: #f4f5f7;
+    --header-background-color: #edeef1;
+    --link-color: #0d9488;
+    --border-color: #e2e5ea;
   }
 <% end %>
 
@@ -11,9 +13,15 @@
 <% end %>
 <% if color_scheme == :system || color_scheme == :dark %>
   :root {
-    --text-color: #fff;
-    --background-color: #333;
-    --link-color: rgb(133, 179, 225);
+<% elsif dark_mode_selector %>
+  :root<%= dark_mode_selector %> {
+<% end %>
+<% if color_scheme == :system || color_scheme == :dark || dark_mode_selector %>
+    --text-color: #eef0f8;
+    --background-color: #1a1d23;
+    --header-background-color: #21252b;
+    --link-color: #2dd4bf;
+    --border-color: #363b44;
   }
 <% end %>
 <% if color_scheme == :system %>

data/lib/super_settings/application/scripts.js

@@ -1,4 +1,8 @@
 (function() {
+  // ── i18n helper ──
+  const _i18n = window.__superSettingsI18n || {};
+  const t = (key) => _i18n[key] || key;
+
   // Return the card element for a setting.
   function findSettingCard(id) {
     if (id) {
@@ -29,6 +33,8 @@
         countSpan.innerHTML = count;
         discardButton.disabled = false;
       }
+      // Force repaint to prevent Safari box-shadow artifact when button width changes
+      void saveButton.offsetWidth;
     }
   }
 
@@ -255,6 +261,7 @@
     }
     bindSettingControlEvents(card);
     filterSettings(document.querySelector("#super-settings-filter").value);
+    card.classList.add("super-settings-card-reveal");
     card.scrollIntoView({block: "nearest"});
     enableSaveButton();
     return card;
@@ -277,7 +284,11 @@
 
   // Update the settings count display.
   function updateSettingsCount(count) {
-    document.querySelector(".js-settings-count").textContent = `${count} ${count === 1 ? "Setting" : "Settings"}`;
+    document.querySelector(".js-settings-count").textContent = `${count} ${count === 1 ? t("count.setting") : t("count.settings")}`;
+    const sortControls = document.querySelector(".super-settings-sort-controls");
+    if (sortControls) {
+      sortControls.style.display = (count > 0) ? "" : "none";
+    }
   }
 
   // Apply the given filter to only show settings that have a key, value, or description
@@ -358,7 +369,7 @@
       flash.classList.add("super-settings-text-success");
       flash.classList.remove("super-settings-text-danger");
     } else {
-      flash.classList.add("tsuper-settings-ext-danger");
+      flash.classList.add("super-settings-text-danger");
       flash.classList.remove("super-settings-text-success");
     }
     flash.innerText = message;
@@ -366,6 +377,13 @@
     dismissFlash();
   }
 
+  // Show an API error in the flash message area instead of using window.alert.
+  function showAPIError(error) {
+    console.error("Error:", error);
+    const message = t("error.generic");
+    showFlash(message, false);
+  }
+
   // Automatically hide the flash message displaying the results of the last save operation.
   function dismissFlash() {
     if (document.querySelector(".js-flash")) {
@@ -392,12 +410,12 @@
   function renderHistoryTable(parent, payload) {
     parent.innerHTML = document.querySelector("#setting-history-table").innerHTML.trim();
     parent.querySelector(".super-settings-history-key").innerText = payload.key;
-    const historyItems = parent.querySelector("#super-settings-history");
+    const historyItems = parent.querySelector(".super-settings-history-items");
     let itemsHTML = "";
     payload.histories.forEach(function(history) {
       const date = new Date(Date.parse(history.created_at));
       const dateString = dateFormatter().format(date);
-      const value = (history.deleted ? '<em class="super-settings-text-danger">deleted</em>' : escapeHTML(history.value));
+      const value = (history.deleted ? '<em class="super-settings-text-danger">' + escapeHTML(t("history.deleted")) + '</em>' : escapeHTML(history.value));
       itemsHTML += `<div class="super-settings-history-item">
         <div class="super-settings-history-time">${escapeHTML(dateString)}</div>
         <div class="super-settings-history-user">${escapeHTML(history.changed_by)}</div>
@@ -409,10 +427,10 @@
     if (payload.previous_page_params || payload.next_page_params) {
       let paginationHTML = `<div class="super-settings-align-center">`;
       if (payload.previous_page_params) {
-        paginationHTML += `<div style="float:left;"><a href="#" class="js-show-history" title="Newer" data-offset="${payload.previous_page_params.offset}" data-limit="${payload.previous_page_params.limit}" data-key="${payload.previous_page_params.key}")>&#8592; Newer</a></div>`;
+        paginationHTML += `<div style="float:left;"><a href="#" class="js-show-history" title="${escapeHTML(t("history.newer"))}" data-offset="${payload.previous_page_params.offset}" data-limit="${payload.previous_page_params.limit}" data-key="${payload.previous_page_params.key}")>&#8592; ${escapeHTML(t("history.newer"))}</a></div>`;
       }
       if (payload.next_page_params) {
-        paginationHTML += `<div style="float:right;"><a href="#" class="js-show-history" title="Older" data-offset="${payload.next_page_params.offset}" data-limit="${payload.next_page_params.limit}" data-key="${payload.next_page_params.key}")>Older &#8594;</a></div>`;
+        paginationHTML += `<div style="float:right;"><a href="#" class="js-show-history" title="${escapeHTML(t("history.older"))}" data-offset="${payload.next_page_params.offset}" data-limit="${payload.next_page_params.limit}" data-key="${payload.next_page_params.key}")>${escapeHTML(t("history.older"))} &#8594;</a></div>`;
       }
       paginationHTML += '<div style="clear:both;"></div>';
       parent.querySelector(".super-settings-history-container").insertAdjacentHTML("afterend", paginationHTML);
@@ -538,7 +556,7 @@
     SuperSettingsAPI.fetchHistory(params, function(settingHistory){
       renderHistoryTable(content, settingHistory);
       showModal();
-    });
+    }, showAPIError);
   }
 
   // Listener for closing the modal window overlay.
@@ -611,6 +629,7 @@
     if (setting) {
       const newCard = settingCard(setting);
       bindSettingControlEvents(newCard);
+      newCard.classList.add("super-settings-card-reveal");
       card.replaceWith(newCard);
     } else {
       card.remove();
@@ -676,15 +695,15 @@
     SuperSettingsAPI.updateSettings({settings: settingsData}, function(results) {
       if (results.success) {
         fetchActiveSettings();
-        showFlash("Settings saved", true)
+        showFlash(t("flash.saved"), true)
       } else {
         event.target.disabled = false;
-        showFlash("Failed to save settings", false)
+        showFlash(t("flash.save_failed"), false)
         if (results.errors) {
           showValidationErrors(results.errors)
         }
       }
-    });
+    }, showAPIError);
   }
 
   // Listener for the filter input field.
@@ -861,7 +880,7 @@
 
   function promptUnsavedChanges(event) {
     if (changesCount() > 0) {
-      return "Are you sure you want to leave?";
+      return t("prompt.unsaved");
     } else {
       return undefined;
     }
@@ -881,7 +900,7 @@
       const settings = settings_hash["settings"];
       activeSettings = settings;
       renderSettingsContainer(settings);
-      if (hashParams && hashParams.edit) {
+      if (hashParams && hashParams.edit && !document.querySelector(".super-settings[data-read-only]")) {
         const setting = findSettingByKey(hashParams.edit);
         if (setting) {
           editSetting(setting);
@@ -890,12 +909,17 @@
         }
       }
       enableSaveButton();
-    });
+    }, showAPIError);
   }
 
   let activeSettings = [];
 
   docReady(function() {
+    const appElement = document.querySelector(".super-settings[data-api-base-url]");
+    if (appElement) {
+      SuperSettingsAPI.baseUrl = appElement.dataset.apiBaseUrl;
+    }
+
     storeAccessToken();
 
     addListener(document.querySelector("#super-settings-filter"), "input", filterListener);
@@ -915,5 +939,40 @@
     fetchActiveSettings(hashParams);
 
     window.onbeforeunload = promptUnsavedChanges;
+
+    // ── Language Menu ──
+    const languageMenu = document.getElementById("super-settings-language-menu");
+    const languageOptions = document.querySelectorAll(".super-settings-language-option");
+    const closeLanguageMenu = () => {
+      if (languageMenu) languageMenu.removeAttribute("open");
+    };
+
+    if (languageMenu && languageOptions.length > 0) {
+      languageOptions.forEach((option) => {
+        option.addEventListener("click", () => {
+          const locale = option.dataset.locale;
+          if (!locale) return;
+
+          closeLanguageMenu();
+
+          // Persist the choice in a cookie (accessible server-side)
+          document.cookie = "super_settings_locale=" + encodeURIComponent(locale) + ";path=/;max-age=31536000;SameSite=Lax";
+
+          // Also store in localStorage for client-side persistence
+          try { localStorage.setItem("super_settings_locale", locale); } catch(e) {}
+
+          // Reload with lang query param so server picks it up immediately
+          const url = new URL(window.location.href);
+          url.searchParams.set("lang", locale);
+          window.location.href = url.toString();
+        });
+      });
+
+      document.addEventListener("click", (e) => {
+        if (languageMenu.hasAttribute("open") && !e.target.closest("#super-settings-language-menu")) {
+          closeLanguageMenu();
+        }
+      });
+    }
   })
 })();