add folder select mock and adjust minor styles

fujohnwang · Mar 15, 2022 · e8a72dd · e8a72dd
1 parent 6a10267
commit e8a72dd
Show file tree

Hide file tree

Showing 7 changed files with 20,007 additions and 32 deletions.
diff --git a/public/bundle.css b/public/bundle.css
diff --git a/public/bundle.js b/public/bundle.js
diff --git a/public/bundle.js.map b/public/bundle.js.map
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,7 +1,6 @@
 <script>
     import {onMount} from 'svelte';
     import {themeChange} from 'theme-change'
-    // import {idb, dbName, tableName} from './idb';
     import _ from 'lodash';
     import Router from 'svelte-spa-router';
     import {link} from 'svelte-spa-router';
@@ -44,17 +43,6 @@
 
     onMount(async () => {
         themeChange(false)
-
-        // idb init
-        // await idb.initDb({
-        //     name: dbName,
-        //     tables: [{
-        //         name: tableName,
-        //         columns: {}
-        //     }]
-        // });
-
-
     })
 
 </script>
@@ -65,8 +53,8 @@
             <div class="flex-1">
                 <h1 class="text-3xl font-extrabold text-primary"><a href="/" use:link>kBookmarks</a></h1>
             </div>
-            <div class="form-control w-full flex-auto ml-4 -mr-3">
-                <input type="text" placeholder="Search" class="input input-bordered"
+            <div class="form-control w-full flex-auto ml-4 -mr-2">
+                <input type="text" placeholder="Search..." class="input input-bordered"
                        on:input={handleInput}
                        on:keypress={onEnter}>
             </div>
@@ -118,21 +106,21 @@
             </div>
             <div class="item">
                 <div class="tooltip tooltip-right" data-tip="change theme">
-                    <label for="theme-select" class="font-bold input-group">
-                        <!--                                        <span class="bg-transparent font-bold">Themes</span>-->
-                        <select id="theme-select" data-choose-theme class="select">
-                            <option value="Business">Default</option>
-                            <option value="dark">Dark</option>
+                    <label for="theme-select">
+<!--                        <span class="bg-transparent text-secondary">Change Theme</span>-->
+                        <select id="theme-select" data-choose-theme class="select text-accent">
+                            <option value="Business">DEFAULT</option>
+                            <option value="dark">DARK</option>
                             <option value="dracula">Dracula</option>
-                            <option value="luxury">luxury</option>
-                            <option value="Coffee">Coffee</option>
+                            <option value="luxury">LUXURY</option>
+                            <option value="Coffee">COFFEE</option>
                         </select>
                     </label>
                 </div>
             </div>
             <div class="item">
                 <div class="flex justify-between items-center space-x-0.5">
-                    <button class="btn gap-2 bg-transparent" on:click={goSettings}>
+                    <button class="btn btn-ghost gap-2 bg-transparent text-accent" on:click={goSettings}>
                         Settings
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                              stroke="currentColor" stroke-width="2">

diff --git a/src/ResultList.svelte b/src/ResultList.svelte
@@ -37,10 +37,10 @@
 
 </script>
 
-<div class="overflow-x-auto">
+<div class="space-y-1 m-1">
     {#if bookmarks && bookmarks.length}
         {#each bookmarks as bk}
-            <div class="card w-96 bg-base-100 shadow-xl">
+            <div class="card w-full bg-base-100 m-1">
                 <div class="card-body cursor-pointer" on:click={openInTab(bk.url)}>
                     <h2 class="card-title">{bk.title}</h2>
                     <p>{bk.comment}</p>

diff --git a/src/SaveBookmark.svelte b/src/SaveBookmark.svelte
@@ -5,7 +5,10 @@
     let url = "";
     let comment = "";
 
+    let folderSelected = "to be done...(disabled for the time being)";
+
     function updateViewAtPopup() {
+        // TODO load default folder or latest folder
         chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
             let tab = tabs[0];
             title = tab.title;
@@ -45,7 +48,33 @@
             <label class="label" for="title">
                 <span class="label-text">Title</span>
             </label>
-            <input id="title" type="text" placeholder="Type here" class="input w-full" bind:value={title}/>
+            <input id="title" type="text" placeholder="Type here" class="input input-bordered input-sm w-full" bind:value={title}/>
+        </div>
+    </div>
+    <div class="p-2 w-full">
+        <div class="form-control w-full">
+            <label class="label" for="title">
+                <span class="label-text">Folder</span>
+            </label>
+            <div class="inline-flex space-x-2">
+                <select id="parentFolder" class="select select-bordered select-sm w-4/5" bind:value={folderSelected} disabled>
+                    <option value="volvo">Volvo</option>
+                    <option value="saab">Saab</option>
+                    <option value="opel">Opel</option>
+                    <option value="audi">Audi</option>
+                    <!--                {#each folders as folder}-->
+                    <!--                    <option value={folder.id}>-->
+                    <!--                        {folder.text}-->
+                    <!--                    </option>-->
+                    <!--                {/each}-->
+                </select>
+                <button class="btn btn-sm btn-ghost w-1/5 bg-transparent text-accent">
+                    More<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
+                        </svg>
+                </button>
+            </div>
+
         </div>
     </div>
     <div class="p-2 w-full">
@@ -56,7 +85,7 @@
             <!-- svelte-ignore a11y-autofocus -->
             <textarea id="comment"
                       placeholder="add keywords or anything seperated by space you would like to recall in your memory"
-                      class="textarea h-36 " bind:value={comment} autofocus/>
+                      class="textarea textarea-bordered h-36 " bind:value={comment} autofocus/>
         </div>
     </div>
     <div class="p-2 w-full inline-flex items-baseline">

diff --git a/src/Settings.svelte b/src/Settings.svelte
@@ -5,6 +5,6 @@
 
 <div class="flex bg-gray-100 py-24 justify-center">
     <div class="p-12 text-center max-w-2xl">
-        settings
+        settings (persisted with sync store of chrome)
     </div>
 </div>