gist editor: tweak how we create new gist (fixes #4)

YoutacRandS-VA · Aug 25, 2024 · 6ad6ff1 · 6ad6ff1
1 parent e4ce28c
commit 6ad6ff1
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/frontend/src/gisteditor/GistEditor.svelte b/frontend/src/gisteditor/GistEditor.svelte
@@ -6,10 +6,9 @@
   import HelpButton from "./HelpButton.svelte";
   import GistEditorNav from "./GistEditorNav.svelte";
   import GistLine from "./GistLine.svelte";
-  import CreateGists from "./CreateGists.svelte";
   import About from "./About.svelte";
   import SelectLangDialog from "./SelectLangDialog.svelte";
-  // import { tooltip } from "../actions/tooltip.js";
+  import { tooltip } from "../actions/tooltip.js";
   import {
     gistsSummary,
     localGists,
@@ -21,7 +20,7 @@
     githubUserInfo,
     setOnGitHubLogin,
   } from "../github_login.js";
-  import { goToGistById } from "./router";
+  import { goToCreateNewGist, goToGistById } from "./router";
   import { focus } from "../actions/focus";
 
   let showingSelectLang = $state(false);
@@ -126,6 +125,10 @@
     refreshGistsForLoggedUser(true);
   }
 
+  function createNewTextGist() {
+    goToCreateNewGist("text");
+  }
+
   /**
    * @param {KeyboardEvent} ev
    */
@@ -159,11 +162,16 @@
     </div>
   {/if}
 
-  <CreateGists />
-  {#if true && totalGistsCount > 0}
-    <div class="relative bg-slate-200 w-[95vw] mx-auto flex mt-2">
+  <!-- <CreateGists /> -->
+  <div class="flex flex-row w-[95vw] mx-auto mt-2">
+    <button
+      class="mr-4 border border-gray-400 px-2 py-1 hover:bg-gray-100 self-center"
+      onclick={createNewTextGist}
+      use:tooltip={"Create new text gist"}>New Gist</button
+    >
+    <div class="flex-1 relative bg-slate-200 flex">
       <input
-        class="w-full border-2 border-gray-300 px-2 py-0.5"
+        class="w-full border border-gray-400 px-2 py-0.5"
         use:focus
         bind:value={searchTerm}
         autocomplete="off"
@@ -180,7 +188,7 @@
         private
       </div>
     </div>
-  {/if}
+  </div>
 
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->

diff --git a/frontend/src/gisteditor/GistEditorNav.svelte b/frontend/src/gisteditor/GistEditorNav.svelte
@@ -6,11 +6,12 @@
   import Overlay from "../Overlay.svelte";
   import About from "./About.svelte";
   import { positionModal } from "../actions/positionnode";
+  import { tooltip } from "../actions/tooltip";
 
   /** @type {Function} */
 
   /** @type {{
-    onNewGist: Function,
+   onNewGist: () => void,
   }} */
   let { onNewGist } = $props();
 
@@ -20,7 +21,7 @@
 </script>
 
 <div
-  class="flex items-center mb-2 pt-1 pb-2 border-b justify-between center text-gray-500"
+  class="flex items-center mb-2 pt-1 pb-2 justify-between center text-gray-500"
 >
   <div class="flex font-bold text-lg items-center">
     <a class="px-1 py-1 mr-1 hover:bg-gray-100" href="/">
@@ -29,7 +30,12 @@
     <div class="mr-2">/</div>
     <span class="text-purple-800">Gist</span>
     <span class="text-yellow-800 ml-2">Editor</span>
+    <!-- <button
+      class="mr-4 ml-4 font-normal px-2 py-1 hover:bg-gray-100 self-center"
+      use:tooltip={"Create new text gist"}>New Gist</button
+    > -->
   </div>
+
   <button
     class="ml-8 px-3 py-1 hover:bg-gray-100"
     onclick={() => (showingAbout = !showingAbout)}

diff --git a/frontend/src/gisteditor/Login.svelte b/frontend/src/gisteditor/Login.svelte
@@ -10,10 +10,10 @@
   import { goGistEditorHome } from "./router.js";
 
   /** @type {{
-   gistid: string,
-   onGoHome: () => void,
-   onNewGist: () => void,
-   showTwitter: boolean,
+   gistid?: string,
+   onGoHome?: () => void,
+   onNewGist?: () => void,
+   showTwitter?: boolean,
   }}*/
   let {
     gistid = "",