I commit

imaegg11 · Jul 29, 2024 · d1196f5 · d1196f5
1 parent 3a8d99b
commit d1196f5
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 15 deletions.
diff --git a/index.css b/index.css
@@ -19,7 +19,7 @@
     height: calc(100% - var(--bottom-height));
     font-size: 1.3rem;
     outline: none;
-    border: none; 
+    border: none;
     resize: none;
     margin: 0;
     padding: 1rem;
@@ -65,7 +65,7 @@ body {
 #cmdP-input {
     width: 100%;
     height: 3.5rem;
-    
+
     padding: 12px 20px;
     font-size: 1rem;
     border-style: none;
@@ -111,7 +111,7 @@ body {
     width: 100%;
     text-overflow: ellipsis;
     overflow-x: hidden;
-    white-space: nowrap; 
+    white-space: nowrap;
 }
 
 .color-selected {
@@ -123,12 +123,12 @@ body {
 }
 
 #bottom {
-    
+
     position: absolute;
     bottom: 0;
     height: 2rem;
     width: 100%;
-    
+
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -157,7 +157,8 @@ body {
     display: none !important;
 }
 
-#current-note-name:active, #current-note-name:focus {
+#current-note-name:active,
+#current-note-name:focus {
     border: none;
     outline: none;
 }
@@ -211,4 +212,63 @@ body {
     border-left-style: solid;
     border-left-color: var(--selected-bg);
     border-left-width: 1px;
-}
+
+    padding-left: calc(0.8rem + 13%);
+    padding-right: 13%;
+}
+
+.settings-list-content-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+
+.switch {
+    --button-width: 3rem;
+    --button-height: 1.4rem;
+    --toggle-diameter: calc(var(--button-height) - 0.4rem);
+    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
+    --toggle-shadow-offset: 10px;
+    --color-grey: #cccccc;
+    --color-blue: #4296f4;
+}
+
+.slider {
+    display: inline-block;
+    width: var(--button-width);
+    height: var(--button-height);
+    background-color: var(--color-grey);
+    border-radius: calc(var(--button-height) / 2);
+    position: relative;
+    transition: 0.2s all ease-in-out;
+
+    cursor: pointer;
+}
+
+.slider::after {
+    content: "";
+    display: inline-block;
+    width: var(--toggle-diameter);
+    height: var(--toggle-diameter);
+    background-color: var(--bg);
+    border-radius: calc(var(--toggle-diameter) / 2);
+    position: absolute;
+    top: var(--button-toggle-offset);
+    transform: translateX(var(--button-toggle-offset));
+    transition: 0.2s all ease-in-out;
+}
+
+.checkbox:checked+.slider {
+    background-color: var(--color-blue);
+}
+
+.checkbox:checked+.slider::after {
+    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
+    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+}
+
+.checkbox {
+    display: none;
+}
+
diff --git a/index.html b/index.html
@@ -14,15 +14,15 @@
         </dialog>
         <dialog class="hidden" id="settings" tabindex="-1">
             <div id="settings-list">
-                <p class="settings-list-value">Settings 1</p>
-                <p class="settings-list-value">Settings 2</p>
-                <p class="settings-list-value">Settings 3</p>
-                <p class="settings-list-value">Settings 4</p>
-                <p class="settings-list-value">Settings 5</p>
-                <p class="settings-list-value">Settings 6</p>
             </div>
             <div id="settings-list-content">
-
+                <div class="settings-list-content-item">
+                    <p class="settings-list-content-item">Show Scrollbar</p>
+                    <label class="switch">
+                        <input class="checkbox" type="checkbox">
+                        <span class="slider"></span>
+                    </label>                    
+                </div>
             </div>
         </dialog>
         <div id="bottom" class="color-bottom height-zero">

diff --git a/main.js b/main.js
@@ -480,7 +480,11 @@ let add_tab = (e) => {
 // Settings 
 
 let check_and_set_settings = () => {
-    required_settings = [["isLightTheme", true, switch_theme], ["scrollbarActive", true, toggle_scrollbar], ["fullWidth", true, toggle_fullwidth]]
+    required_settings = [
+                        ["isLightTheme", true, switch_theme], 
+                        ["scrollbarActive", true, toggle_scrollbar], 
+                        ["fullWidth", true, toggle_fullwidth]
+                    ]
     for (let setting of required_settings) {
         if (localStorage[setting[0]] == null) {
             localStorage[setting[0]] = setting[1]
@@ -491,13 +495,43 @@ let check_and_set_settings = () => {
     }
 }
 
+const settings = {
+    "Appearance": {
+        "Scrollbar": ["Show Scrollbar", "checkmark", localStorage["scrollbarActive"], toggle_scrollbar]
+    },
+    "Settings Menu 2": {},
+    "Settings Menu 3": {},
+    "Settings Menu 4": {},
+    "Settings Menu 5": {},
+    "Settings Menu 6": {},
+}
+
+let load_settings_into_settings_page = () => {
+    let settings_pages = Object.keys(settings);
+    let parent = document.getElementById("settings-list");
+    for (let name of settings_pages) {
+        let child = document.createElement("p");
+        child.classList.add("settings-list-value");
+        child.innerText = name;
+        parent.appendChild(child);
+    }
+}
+
+let load_setting_contents_into_settings_page = (shown_settings) => {
+    let parent = document.getElementById("")
+    for (setting of shown_settings) {
+
+    }
+}
+
 let toggle_settings = () => {
     let settings = document.getElementById("settings");
     if (settingsOpen) {
         settings.close();
         document.activeElement.blur();
         document.getElementById("textarea").focus();
     } else {
+        load_settings_into_settings_page();
         settings.showModal();
         document.activeElement.blur();