Improve settings menu animation

4 files changed, 19 insertions, 14 deletions

diff --git a/extension/src/Body.tsx b/extension/src/Body.tsx
index f878ef4..2a46a67 100644
--- a/extension/src/Body.tsx
+++ b/extension/src/Body.tsx
@@ -47,7 +47,7 @@ function Body() {
             <button id="settings-button" onClick={_ => setSettingsOpen(!settingsOpen)}>
                 <img alt="open settings" src={imageUrl}/>
             </button>
-            {settingsOpen && (<SettingsEditor tree={ogBookmarkTree!} closer={setSettingsOpen}/>)}
+            <SettingsEditor tree={ogBookmarkTree!} isOpen={[settingsOpen, setSettingsOpen]}/>
             {bookmarkTree[0] && (<FolderBody data={bookmarkTree[0]}/>)}
         </Settings.Provider>
     )
diff --git a/extension/src/Settings.ts b/extension/src/Settings.ts
index a38680a..2f2c8e1 100644
--- a/extension/src/Settings.ts
+++ b/extension/src/Settings.ts
@@ -22,7 +22,9 @@ export let defaultSettings: ISettings = {
 
 export function loadSettings(): Promise<ISettings> {
     // @ts-ignore
-    return getBrowser().storage.local.get(defaultSettings)
+    let tmp: Promise<ISettings> = getBrowser().storage.local.get(defaultSettings);
+    tmp.then(j => console.log(j))
+    return tmp;
 }
 
 export function writeSettings(settings: ISettings) {
diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx
index 9bbf153..f1f90cf 100644
--- a/extension/src/SettingsEditor.tsx
+++ b/extension/src/SettingsEditor.tsx
@@ -4,12 +4,13 @@ import imageUrl from "./assets/close.svg"
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
 import {Settings} from "./Body.tsx";
 
-function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean) => void}) {
+function SettingsEditor(props: {tree: BookmarkTreeNode[], isOpen: [boolean,  React.Dispatch<React.SetStateAction<boolean>>]}) {
     const [settings, setSettings] = useContext(Settings)
+    const [open, setOpen] = props.isOpen;
 
     return (
-        <div id="settings-menu">
-            <button id="settings-close" onClick={_ => props.closer(false)}>
+        <div id="settings-menu" className={open? "open": "closed"}>
+            <button id="settings-close" onClick={_ => setOpen(false)}>
                 <img alt="close settings" src={imageUrl}/>
             </button>
             <h1>Settings</h1>
@@ -40,13 +41,13 @@ function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean
 
             {(() => { switch (settings.backgroundMode) {
                 case "image": return (<>
-                    <h3>Background Color</h3>
+                    <h3>Background Image URL</h3>
                     <input type={"url"}
                            defaultValue={settings.backgroundImage}
                            onChange={e => setSettings({...settings, backgroundImage: e.target.value})}/>
                 </>)
                 case "color": return (<>
-                    <h3>Background URL</h3>
+                    <h3>Background Color</h3>
                     <input type={"color"}
                            defaultValue={settings.backgroundColor}
                            onChange={e => setSettings({...settings, backgroundColor: e.target.value})}/>
diff --git a/extension/src/index.css b/extension/src/index.css
index 54e8ea1..9d5a47e 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -27,11 +27,17 @@ body {
   background-color: black;
   padding: 10px;
   right: 0;
-  animation: slideIn 0.3s ease-in-out;
   display: flex;
   flex-direction: column;
   place-items: flex-start;
   z-index: 4;
+
+  transform: translateX(100%);
+  transition: all 0.2s ease-in-out;
+}
+
+#settings-menu.open {
+  transform: translateX(0);
 }
 
 .radio-group {
@@ -39,11 +45,6 @@ body {
   flex-direction: column;
 }
 
-@keyframes slideIn {
-  from { transform: translateX(100%); }
-  to   { transform: translateX( 0% ); }
-}
-
 /* Folder */
 .folderBody {
   width: 100%;
@@ -64,13 +65,14 @@ body {
 }
 
 @keyframes slideDown {
-  from { transform: translateY(-50%); opacity: 0 }
+  from { transform: translateY(-30%); opacity: 0 }
 }
 
 body > .folderBody {
   margin: 0;
   border-style: none;
   position: relative;
+  animation: none;
 }
 
 /* Bookmark */