Fix UI display issue for twitter downloader and git-skyline

kunkunsh · May 30, 2024 · b1df371 · b1df371
1 parent 9599b38
commit b1df371
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 18 deletions.
diff --git a/extensions/download-twitter-video/src/components/download-form.tsx b/extensions/download-twitter-video/src/components/download-form.tsx
@@ -84,7 +84,7 @@ export default function DownloadForm({ className }: { className: string }) {
   }
 
   return (
-    <div className={cn("container max-w-2xl", className)}>
+    <div className={cn("container max-w-2xl overflow-x-hidden", className)}>
       <Label className="text-md">Tweet Url</Label>
       <form
         onSubmit={(e: FormEvent<HTMLFormElement>) => {
@@ -106,8 +106,8 @@ export default function DownloadForm({ className }: { className: string }) {
       </form>
       <br />
       {downloadUrl && (
-        <span className="flex">
-          <small>{downloadUrl}</small>
+        <span className="flex space-x-2">
+          <small className="break-all">{downloadUrl}</small>
           <Button
             variant="outline"
             size="icon"

diff --git a/extensions/git-skyline/src/Main.vue b/extensions/git-skyline/src/Main.vue
@@ -31,19 +31,17 @@ onMounted(() => {
   </div>
   <div class="h-screen flex flex-col">
     <div :class="cn('h-32 z-50')" data-tauri-drag-region>
-      <Card v-if="showInstructions" class="w-full h-full flex justify-center items-center">
+      <div v-if="showInstructions" class="w-full h-full flex justify-center items-center border border-red-400">
         <h1 class="text-3xl z-0 select-none">
           Left Click and Drag this region to move this window
         </h1>
-      </Card>
+      </div>
     </div>
     <div class="grow"></div>
     <div :class="cn('h-32 z-50')" data-tauri-drag-region>
-      <Card v-if="showInstructions" class="w-full h-full flex flex-col justify-center items-center">
-        <h1 class="text-3xl z-0 select-none">Right Click on This Region to Go To Settings</h1>
-        <h1 class="text-3xl z-0 select-none">Press Escape To Close Window</h1>
-        <ContextMenu />
-      </Card>
+      <div class="w-full h-full">
+        <ContextMenu :showInstructions="showInstructions" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/extensions/git-skyline/src/SettingPage.vue b/extensions/git-skyline/src/SettingPage.vue
@@ -84,6 +84,9 @@ function updateUrl() {
                     enter your Username. A 3D model will be generated. Click on
                     <strong>Embed Page</strong> button in the top right corner to generate a embed
                     URL, and paste it here.
+
+                    Or use this url with your GitHub username: `https://git-skyline.huakun.tech/contribution/github/{githubUsername}/embed?enableZoom=true&autoRotate=true`
+
                   </span>
                 </PopoverContent>
               </Popover>

diff --git a/extensions/git-skyline/src/components/context-menu.vue b/extensions/git-skyline/src/components/context-menu.vue
@@ -8,24 +8,31 @@ import {
 import { HTMLAttributes } from "vue";
 import { cn } from "@/lib/utils";
 import { router } from "@/lib/router";
+import { window } from "jarvis-api/ui";
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+const props = defineProps<{ class?: HTMLAttributes["class"]; showInstructions: boolean }>();
 function selectSetting() {
-  console.log("setting");
   router.push({ path: "/setting" });
 }
+
+function close() {
+  window.closeWindow();
+}
 </script>
 
 <template>
   <ContextMenu :class="cn(props.class, '')" data-tauri-drag-region>
-    <ContextMenuTrigger class="">
-      <div class="h-full w-full"></div>
+    <ContextMenuTrigger class="w-full h-full">
+      <div :class="cn('h-full w-full', showInstructions ? 'border border-red-400' : '')">
+        <div v-if="showInstructions" class="flex flex-col h-full w-full justify-center items-center">
+          <h1 class="text-3xl z-0 select-none">Right Click on This Region to Go To Settings</h1>
+          <h1 class="text-3xl z-0 select-none">Press Escape To Close Window</h1>
+        </div>
+      </div>
     </ContextMenuTrigger>
     <ContextMenuContent>
-      <ContextMenuItem @select="selectSetting">
-        Setting
-        <!-- <SettingDialog /> -->
-      </ContextMenuItem>
+      <ContextMenuItem @select="selectSetting"> Setting </ContextMenuItem>
+      <ContextMenuItem @select="close"> Close </ContextMenuItem>
     </ContextMenuContent>
   </ContextMenu>
 </template>