Merge pull request #396 from scidsg/kenny/settings-toggle-autosave

update settings public user directory toggle
scidsg · Jul 9, 2024 · 6893c1a · 6893c1a
2 parents 485f654 + 185b136
commit 6893c1a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 3 deletions.
diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css
@@ -1097,6 +1097,59 @@ p.helper {
     }
 }
 
+.toggle-ui {
+    position: relative;
+}
+
+.toggle-ui label {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: .5rem;
+}
+
+.toggle-ui input[type="checkbox"] {
+    position: absolute;
+    left: -100%;
+}
+
+.toggle {
+    width: 50px;
+    height: 18px;
+    padding: 3px 0px;
+    background: var(--color-text-light);
+    position: relative;
+    border-radius: 100px;
+    overflow: hidden;
+}
+
+.toggle__ball {
+    height: 18px;
+    width: 18px;
+    position: absolute;
+    left: 4px;
+    background: white;
+    border-radius: 100%;
+    transition: transform 0.2s;
+}
+
+.toggle-ui input[type="checkbox"]:checked ~ label .toggle {
+    background: var(--color-brand);
+}
+
+.toggle-ui input[type="checkbox"]:checked ~ label .toggle__ball {
+    transform: translateX(24px);
+}
+
+.toggle-ui input[type="checkbox"]:focus-visible ~ label .toggle {
+    outline: 2px solid  var(--color-brand);
+    outline-offset: 2px;
+}
+
+button[name="update_directory_visibility"] {
+    visibility: hidden;
+    display: none;
+}
 
 @media only screen and (max-width: 480px) {
     #searchInput {

diff --git a/hushline/static/js/settings.js b/hushline/static/js/settings.js
@@ -30,4 +30,11 @@ document.addEventListener('DOMContentLoaded', function() {
             event.preventDefault();
         }
     });
+
+    document.querySelector("input[name='show_in_directory']").addEventListener('change', function(e) {
+        // time out to let animation finish
+        setTimeout(() => {
+            document.querySelector("button[name='update_directory_visibility']").click();
+        }, 200)
+    });
 });
diff --git a/hushline/templates/settings.html b/hushline/templates/settings.html
@@ -41,9 +41,14 @@ <h3>Update Display Name</h3>
         <h3>Public User Directory</h3>
         <form method="POST" action="{{ url_for('settings.index') }}">
             {{ directory_visibility_form.hidden_tag() }}
-            <div class="checkbox-group">
-                {{ directory_visibility_form.show_in_directory.label }}
-                {{ directory_visibility_form.show_in_directory() }}
+            <div class="checkbox-group toggle-ui">
+                {{ directory_visibility_form.show_in_directory() }}    
+                <label for="show_in_directory" class="toggle-label">
+                    Show on public directory
+                    <div class="toggle">
+                        <div class="toggle__ball"></div>
+                    </div>
+                </label>
             </div>
             <button type="submit" name="update_directory_visibility">Update Visibility</button>
         </form>