ultra_settings 2.7.0 → 2.8.1

data/app/application.css

@@ -2,22 +2,22 @@
   margin-bottom: 1rem;
 }
 
-.ultra-settings-nav form {
-  margin: 0;
-}
-
-.ultra-settings-config-file {
+.ultra-settings-description-container {
   margin-bottom: 1.5rem;
-  padding: 1rem;
-  background-color: var(--config-file-bg-color);
+  line-height: 1.5;
   border: 1px solid var(--config-file-border-color);
   border-radius: 0.375rem;
+  padding: 1rem 1rem 0 1rem;
+}
+
+.ultra-settings-description {
+  margin-bottom: 1rem;
+  color: var(--description-color);
 }
 
 .ultra-settings-config-file-label {
-  font-weight: 600;
-  color: var(--text-color);
-  margin-right: 0.5rem;
+  font-weight: 500;
+  color: var(--description-color);
 }
 
 .ultra-settings-config-file-path {
@@ -132,6 +132,10 @@ code.ultra-settings-field-data-value {
   gap: 0.5rem;
 }
 
+.ultra-settings-field-description svg {
+  margin-top: 0.125rem;
+}
+
 .ultra-settings-description-text {
   flex: 1;
 }
@@ -166,13 +170,19 @@ code.ultra-settings-field-data-value {
   min-width: 120px;
 }
 
+.ultra-settings-source-value-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+  margin: 0 0.75rem;
+}
+
 .ultra-settings-source-value {
   font-family: monospace;
   font-size: 0.875rem;
   color: var(--source-value-color);
   font-weight: 550;
-  flex: 1;
-  margin: 0 0.75rem;
   word-break: break-all;
 }
 
@@ -184,24 +194,100 @@ code.ultra-settings-field-data-value {
   letter-spacing: 0.025em;
 }
 
-.ultra-settings-source-value-dfn {
-  display: inline-block;
-  margin-left: 0.25rem;
+.ultra-settings-source-indicator::before {
+  content: "● ";
+  font-size: 1rem;
+}
+
+.ultra-settings-source-overridden {
+  background-color: var(--source-overridden-bg-color);
+  border-color: var(--source-overridden-border-color);
+}
+
+.ultra-settings-source-overridden .ultra-settings-source-type {
+  color: var(--source-overridden-type-color);
+}
+
+.ultra-settings-source-overridden .ultra-settings-source-value-container .ultra-settings-source-value {
+  color: var(--source-overridden-value-color);
+}
+
+.ultra-settings-source-override {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--source-overridden-warning-color);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.ultra-settings-source-override svg {
+  flex-shrink: 0;
+}
+
+.ultra-settings-source-override-text {
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
 }
 
 .ultra-settings-icon-info {
   color: var(--info-color);
   cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ultra-settings-icon-info:hover {
+  background-color: var(--source-bg-color);
+  transform: scale(1.15);
+}
+
+.ultra-settings-icon-info:active {
+  transform: scale(1.05);
 }
 
 .ultra-settings-icon-not-set {
   color: var(--warning-color);
   cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ultra-settings-icon-not-set:hover {
+  background-color: var(--source-bg-color);
+  transform: scale(1.15);
+}
+
+.ultra-settings-icon-not-set:active {
+  transform: scale(1.05);
 }
 
 .ultra-settings-icon-secret {
   color: var(--disabled-color);
   cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ultra-settings-icon-secret:hover {
+  background-color: var(--source-bg-color);
+  transform: scale(1.15);
+}
+
+.ultra-settings-icon-secret:active {
+  transform: scale(1.05);
 }
 
 .ultra-settings-edit-link {
@@ -218,47 +304,55 @@ code.ultra-settings-field-data-value {
   opacity: 1;
 }
 
-.ultra-settings-select {
-  display: inline-block;
-  padding: .375rem 2.25rem .375rem .75rem;
-  -moz-padding-start: calc(0.75rem - 3px);
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--form-control-color);
-  background-color: var(--form-control-bg-color);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right .75rem center;
-  background-size: 16px 12px;
-  border: 1px solid var(--form-control-border-color);
-  border-radius: .25rem;
-  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 .ultra-settings-dialog {
-  min-width: 20rem;
+  min-width: 24rem;
+  max-width: 90vw;
   padding: 0;
-  border: 1px solid var(--field-border-color);
-  border-radius: 0.375rem;
+  border: none;
+  border-radius: 0.5rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  animation: ultra-settings-dialog-show 0.2s ease-out;
+}
+
+.ultra-settings-dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: ultra-settings-backdrop-show 0.2s ease-out;
+}
+
+@keyframes ultra-settings-dialog-show {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes ultra-settings-backdrop-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .ultra-settings-dialog-header {
-  padding: 0.5rem;
+  padding: 1rem 1.25rem;
   background-color: var(--field-header-bg-color);
   color: var(--field-header-text-color);
   font-size: 1rem;
   display: flex;
-  align-items: top;
+  align-items: center;
+  border-bottom: 1px solid var(--field-border-color);
 }
 
 .ultra-settings-dialog-title {
   flex: 1;
-  text-align: center;
-  font-weight: 550;
+  font-weight: 600;
+  font-size: 1.125rem;
 }
 
 .ultra-settings-dialog-close {
@@ -267,10 +361,194 @@ code.ultra-settings-field-data-value {
   color: var(--field-header-text-color);
   cursor: pointer;
   padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease;
+  margin-left: 0.5rem;
+}
+
+.ultra-settings-dialog-close:hover {
+  background-color: var(--source-bg-color);
+}
+
+.ultra-settings-dialog-close:active {
+  transform: scale(0.95);
 }
 
 .ultra-settings-dialog-body {
-  padding: 1rem;
+  padding: 1.5rem;
   background-color: var(--background-color);
   color: var(--text-color);
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.ultra-settings-dialog-body .ultra-settings-field-data-value {
+  display: block;
+  word-break: break-all;
+  white-space: pre-wrap;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  padding: 0.75rem 1rem;
+}
+
+/* Dropdown Styles */
+.ultra-settings-dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  max-width: 400px;
+}
+
+.ultra-settings-dropdown-button {
+  width: 100%;
+  text-align: left;
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+  background-color: var(--form-control-bg-color);
+  color: var(--form-control-color);
+  border: 1px solid var(--form-control-border-color);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ultra-settings-dropdown-button::after {
+  content: "";
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 0.5rem;
+  vertical-align: middle;
+  border-top: 4px solid;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+}
+
+.ultra-settings-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  min-width: 100%;
+  padding: 0.5rem 0;
+  margin: 0.125rem 0 0;
+  font-size: 1rem;
+  color: var(--text-color);
+  text-align: left;
+  list-style: none;
+  background-color: var(--form-control-bg-color);
+  background-clip: padding-box;
+  border: 1px solid var(--form-control-border-color);
+  border-radius: 0.375rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.ultra-settings-search-container {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--form-control-border-color);
+}
+
+#config-search {
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--form-control-color);
+  background-color: var(--value-bg-color);
+  background-clip: padding-box;
+  border: 1px solid var(--form-control-border-color);
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+}
+
+.ultra-settings-dropdown-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.ultra-settings-dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  clear: both;
+  font-weight: 400;
+  color: var(--form-control-color);
+  text-align: inherit;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+.ultra-settings-dropdown-item:hover {
+  background-color: var(--field-header-bg-color);
+}
+
+.ultra-settings-check-icon {
+  width: 1.5rem;
+  display: inline-block;
+  text-align: center;
+  font-weight: bold;
+}
+
+.ultra-settings-dropdown-item.selected .ultra-settings-check-icon::before {
+  content: "✓";
+}
+
+.ultra-settings-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+/* Configuration List Styles */
+.ultra-settings-configuration-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(max(300px, 30%), 1fr));
+  gap: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.ultra-settings-configuration-summary {
+  background-color: var(--field-bg-color);
+  border: 1px solid var(--field-border-color);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  overflow: hidden;
+}
+
+.ultra-settings-configuration-summary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+}
+
+.ultra-settings-configuration-title {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--description-color);
+  text-decoration: none;
+  margin-bottom: 0.75rem;
+}
+
+.ultra-settings-configuration-title:hover {
+  text-decoration: underline;
+}
+
+.ultra-settings-configuration-summary p {
+  margin: 0;
+  color: var(--description-color);
+  line-height: 1.5;
 }

data/app/application.js

@@ -1,41 +1,124 @@
 document.addEventListener("DOMContentLoaded", () => {
-  const menu = document.getElementById("config-selector");
+  const dropdown = document.getElementById("config-dropdown");
+  const button = document.getElementById("config-dropdown-button");
+  const menu = document.getElementById("config-dropdown-menu");
+  const searchInput = document.getElementById("config-search");
+  const items = document.querySelectorAll(".ultra-settings-dropdown-item");
+  const configurations = document.querySelectorAll(".ultra-settings-configuration");
+  const configList = document.querySelector(".ultra-settings-configuration-list");
 
-  showCurrentConfiguration = () => {
-    const selectedId = menu.options[menu.selectedIndex].value;
-    const hash = selectedId.replace(/^config-/, "");
+  // If no dropdown, we might be in single config mode or no configs.
+  if (!dropdown) {
+    // If there is exactly one configuration, show it.
+    if (configurations.length === 1) {
+      configurations[0].style.display = "block";
+    }
+    return;
+  }
 
-    document.querySelectorAll(".ultra-settings-configuration").forEach((configuration) => {
-      if (configuration.id === selectedId) {
-        configuration.style.display = "block";
-        window.location.hash = hash;
+  const toggleMenu = () => {
+    const isVisible = menu.style.display === "block";
+    menu.style.display = isVisible ? "none" : "block";
+    if (!isVisible) {
+      searchInput.value = "";
+      filterItems("");
+      searchInput.focus();
+    }
+  };
+
+  const closeMenu = () => {
+    menu.style.display = "none";
+  };
+
+  const filterItems = (query) => {
+    const lowerQuery = query.toLowerCase();
+    items.forEach(item => {
+      const label = item.getAttribute("data-search").toLowerCase();
+      if (label.includes(lowerQuery)) {
+        item.style.display = "flex";
       } else {
-        configuration.style.display = "none";
+        item.style.display = "none";
       }
     });
-  }
+  };
 
-  menu.addEventListener("change", showCurrentConfiguration);
+  const showConfigList = () => {
+    if (configList) configList.style.display = "grid";
+    configurations.forEach(config => config.style.display = "none");
+    items.forEach(item => item.classList.remove("selected"));
+    button.textContent = "Select Configuration";
+    closeMenu();
+  };
 
-  const setCurrentSelection =  () => {
-    const hash = window.location.hash.replace(/^#/, "");
-    const selectedId = `config-${hash}`;
-    for (const option of menu.options) {
-      if (option.value === selectedId) {
-        option.selected = true;
-        break;
+  const showConfig = (configId) => {
+    if (configList) configList.style.display = "none";
+
+    configurations.forEach(config => {
+      config.style.display = config.id === configId ? "block" : "none";
+    });
+
+    items.forEach(item => {
+      if (item.getAttribute("data-value") === configId) {
+        item.classList.add("selected");
+        button.textContent = item.getAttribute("data-label");
+      } else {
+        item.classList.remove("selected");
       }
+    });
+
+    closeMenu();
+  };
+
+  // Event Listeners
+  button.addEventListener("click", (e) => {
+    e.stopPropagation();
+    toggleMenu();
+  });
+
+  document.addEventListener("click", (e) => {
+    if (!dropdown.contains(e.target)) {
+      closeMenu();
     }
+  });
 
-    showCurrentConfiguration();
-  }
+  searchInput.addEventListener("input", (e) => {
+    filterItems(e.target.value);
+  });
 
-  window.addEventListener('hashchange', setCurrentSelection);
+  items.forEach(item => {
+    item.addEventListener("click", () => {
+      const configId = item.getAttribute("data-value");
+      const hash = configId.replace(/^config-/, "");
 
+      if (item.classList.contains("selected")) {
+        // Toggle off: clear hash
+        history.pushState("", document.title, window.location.pathname + window.location.search);
+        handleHashChange();
+      } else {
+        window.location.hash = hash;
+      }
+    });
+  });
 
-  if (window.location.hash) {
-    setCurrentSelection()
-  }
+  // Initial Load & Hash Change
+  const handleHashChange = () => {
+    const hash = window.location.hash.replace(/^#/, "");
+    if (hash) {
+      const configId = `config-${hash}`;
+      // Check if config exists
+      const exists = Array.from(items).some(item => item.getAttribute("data-value") === configId);
+      if (exists) {
+        showConfig(configId);
+      } else {
+        showConfigList();
+      }
+    } else {
+      showConfigList();
+    }
+  };
+
+  window.addEventListener("hashchange", handleHashChange);
 
-  showCurrentConfiguration();
+  // Run once on load
+  handleHashChange();
 });

data/app/application_vars.css.erb

@@ -28,6 +28,11 @@
     --source-border-color: #e9ecef;
     --source-active-bg-color: #e7f3ff;
     --source-active-border-color: #0d6efd;
+    --source-overridden-bg-color: #fff3cd;
+    --source-overridden-border-color: #ffc107;
+    --source-overridden-type-color: #4d4d4d;
+    --source-overridden-value-color: #2b2b2b;
+    --source-overridden-warning-color: #996900;
     --source-type-color: #666666;
     --source-value-color: #444444;
     --source-indicator-color: #0d6efd;
@@ -77,6 +82,11 @@
     --source-border-color: #444444;
     --source-active-bg-color: #1a3a52;
     --source-active-border-color: #0d6efd;
+    --source-overridden-bg-color: #3d3416;
+    --source-overridden-border-color: #997404;
+    --source-overridden-type-color: #d4d4d4;
+    --source-overridden-value-color: #e8e8e8;
+    --source-overridden-warning-color: #ffb84d;
     --source-type-color: #adb5bd;
     --source-value-color: #ced4da;
     --source-indicator-color: #6ea8fe;