New sidebar, click to copy

linkie · Aug 6, 2022 · 2352f5a · 2352f5a
1 parent 2ebdd72
commit 2352f5a
Show file tree

Hide file tree

Showing 17 changed files with 351 additions and 103 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,10 +8,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "copy-to-clipboard": "^3.3.2",
     "daisyui": "^2.15.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.0-rc.10",
     "pinia-plugin-persistedstate": "^1.6.1",
+    "tailwind-gradient-mask-image": "^1.0.0",
     "vue": "^3.2.25",
     "vue-axios": "^3.4.1"
   },

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -11,6 +11,7 @@ import {mapActions, mapState} from "pinia"
 
 import Footer from "./components/Footer.vue"
 import Navbar from "./components/Navbar.vue"
+import {useNotificationStore} from "./app/notification-store";
 
 const routes: { [route: string]: any; } = {
     "/": Home,
@@ -31,12 +32,14 @@ export default defineComponent({
             return routes[this.current || "/"] || NotFound
         },
         ...mapState(useAlertsStore, ["alerts"]),
+        ...mapState(useNotificationStore, ["notifications"]),
     },
     methods: {
         getAlertFor(type: string): Alert[] {
             return this.alerts.filter((alert: Alert) => alert.type === type)
         },
         ...mapActions(useAlertsStore, ["removeAlert"]),
+        ...mapActions(useNotificationStore, ["removeNotification"]),
     },
     mounted() {
         let theme = localStorage.getItem("theme")
@@ -90,6 +93,15 @@ export default defineComponent({
                 </div>
             </div>
 
+            <div class="absolute right-10 z-10">
+                <TransitionGroup name="list" tag="div">
+                    <div v-for="notification in Object.keys(notifications)" @click="removeNotification(notification)"
+                         class="toast mt-4 bg-base-100 p-5 shadow-2xl rounded-xl">
+                        {{ notifications[notification].message }}
+                    </div>
+                </TransitionGroup>
+            </div>
+
             <component :is="currentView"/>
         </div>
         <Footer/>
@@ -105,4 +117,16 @@ body {
     outline: 0 !important;
     border: 0 !important;
 }
+
+.list-move, /* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+    transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+}
 </style>
diff --git a/frontend/src/app/backend.ts b/frontend/src/app/backend.ts
@@ -34,14 +34,23 @@ export function reqOss<T = any>(): Promise<AxiosResponse<T>> {
     return HTTP.get(`/api/oss`)
 }
 
+export let namespaceGroups: { [key: string]: string | string[] } = {
+    "yarn": "Fabric",
+    "mojang": "Fabric",
+    "mojang_srg": "Forge",
+    "mojang_hashed": "Quilt",
+    "mcp": "Forge",
+    "quilt-mappings": "Quilt",
+}
+
 export let namespaceLocalizations: { [namespace: string]: string } = {
     "yarn": "Yarn",
-    "mojang": "Official Mojang (Fabric Intermediary)",
-    "mojang_srg": "Official Mojang (Forge SRG)",
-    "mojang_hashed": "Official Mojang (Quilt Hashed)",
+    "mojang": "Mojang (Intermediary)",
+    "mojang_srg": "Mojang (SRG)",
+    "mojang_hashed": "Mojang (Hashed)",
     "mcp": "MCP",
     "quilt-mappings": "Quilt Mappings",
-    "legacy-yarn": "Legacy Yarn (Unofficial)",
+    "legacy-yarn": "Legacy Yarn",
     "yarrn": "Yarrn",
     "plasma": "Plasma",
 } 
diff --git a/frontend/src/app/copy.ts b/frontend/src/app/copy.ts
@@ -0,0 +1,7 @@
+import copy from "copy-to-clipboard";
+import {useNotificationStore} from "./notification-store";
+
+export function copyAs(str: string) {
+    copy(str);
+    useNotificationStore().addNotification({message: "Copied to clipboard"});
+}
diff --git a/frontend/src/app/dep-format.ts b/frontend/src/app/dep-format.ts
@@ -31,8 +31,12 @@ export function formatDepLine(configuration: string, notation: string, wrap?: st
 
 export function formatDep(configuration: string, notation: string, block: boolean, wrap?: string): string {
     if (!block) return formatDepLine(configuration, notation, wrap)
+    return formatBlock(formatDepLine(configuration, notation, wrap))
+}
+
+export function formatBlock(inner: string): string {
     return `dependencies {
-    ${formatDepLine(configuration, notation, wrap)}
+    ${inner}
 }`
 }
 

diff --git a/frontend/src/app/notification-store.ts b/frontend/src/app/notification-store.ts
@@ -0,0 +1,28 @@
+import {defineStore} from "pinia"
+
+export interface Notification {
+    message: string,
+}
+
+export interface State {
+    notifications: Notification[],
+}
+
+function newState(): State {
+    return {
+        notifications: [],
+    }
+}
+
+export const useNotificationStore = defineStore({
+    id: "notification",
+    state: newState,
+    actions: {
+        addNotification(alert: Notification) {
+            this.notifications.push(alert)
+        },
+        removeNotification(index: number) {
+            this.notifications = this.notifications.filter((value, i) => i != index)
+        },
+    },
+})
diff --git a/frontend/src/components/dependencies/DependencyBlock.vue b/frontend/src/components/dependencies/DependencyBlock.vue
@@ -1,7 +1,7 @@
 <template>
     <Block>
         <Header>{{ title }}</Header>
-        <slot></slot>
+        <slot/>
     </Block>
 </template>
 

diff --git a/frontend/src/components/dependencies/DependencyFilterBlock.vue b/frontend/src/components/dependencies/DependencyFilterBlock.vue
@@ -1,40 +1,50 @@
 <template>
     <div class="flex flex-col">
-        <SubHeader :add-padding="false" class="pb-2">Loader</SubHeader>
-        <select class="select select-sm font-light p-0"
-                @change="loader = (($event.target as any)?.value?.toLowerCase() ?? loader)" :value="loader ?? ''">
-            <option disabled selected>Select mod loader</option>
-            <option v-for="loader in loaders">
-                {{ loader }}
-            </option>
-        </select>
+        <SubHeader :add-padding="false" class="pb-1">Loader</SubHeader>
 
-        <div class="divider mt-0 mb-0"/>
-        <SubHeader :add-padding="false" class="pb-2">Build System</SubHeader>
-        <select class="select select-sm font-light p-0"
-                @change="forgeGradle = (($event.target as any)?.value === 'ForgeGradle')" :value="forgeGradle ? 'ForgeGradle' : 'Architectury Loom'">
-            <option disabled selected>Select build system</option>
-            <option>Architectury Loom</option>
-            <option>ForgeGradle</option>
-        </select>
+        <div v-for="l in loaders" :class="[
+            loader === l ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
+            'cursor-pointer p-2 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral hover:text-white']" @click="loader = l">
+            {{ l }}
+        </div>
+
+        <div v-if="loader === 'forge'">
+            <div class="divider mt-0 mb-0"/>
+            <SubHeader :add-padding="false" class="pb-1">Build System</SubHeader>
+
+            <div :class="[
+            !forgeGradle ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
+            'cursor-pointer p-2 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral hover:text-white']" @click="forgeGradle = false">
+                Architectury Loom
+            </div>
+
+            <div :class="[
+            forgeGradle ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
+            'cursor-pointer p-2 capitalize rounded transition-all hover:opacity-100 hover:bg-neutral hover:text-white']" @click="forgeGradle = true">
+                ForgeGradle
+            </div>
+        </div>
 
         <div class="divider mt-0 mb-0"/>
-        <SubHeader :add-padding="false" class="pb-2">Version</SubHeader>
-        <div class="flex flex-col flex-nowrap justify-center h-full whitespace-nowrap pb-2">
+        <SubHeader :add-padding="false" class="pb-1">Version</SubHeader>
+        <div class="flex flex-col flex-nowrap justify-center h-full whitespace-nowrap pb-2" v-if="loader === 'fabric'">
             <div>
                 <span class="pr-2">Enable snapshots</span>
                 <input type="checkbox" class="checkbox checkbox-primary h-4" :checked="allowSnapshots" aria-label="Enable Snapshots"
                        @input="allowSnapshots = (($event.target as any)?.checked ?? allowSnapshots)"/>
             </div>
         </div>
-
-        <select class="select select-sm font-light"
-                @change="version = (($event.target as any)?.value ?? version)" :value="version ?? ''">
-            <option disabled selected>Select version</option>
-            <option v-for="v in applicableVersions">
-                {{ v }}
-            </option>
-        </select>
+
+        <div class="bg-base-300 rounded-lg">
+            <div class="px-1 py-2 h-52 overflow-x-clip gradient-mask-b-80 overflow-y-scroll">
+                <p v-for="v in applicableVersions"
+                   :class="[version === v ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
+                    'transition-all hover:opacity-100 hover:bg-neutral hover:text-white px-2 py-1 rounded-md cursor-pointer']"
+                   @click="version = v">
+                    {{ v }}
+                </p>
+            </div>
+        </div>
     </div>
 </template>
 

diff --git a/frontend/src/components/dependencies/SubHeader.vue b/frontend/src/components/dependencies/SubHeader.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="text-base-content font-extrabold text-xl" :class="addPadding ? 'py-2' : ''">
+    <div class="font-extrabold text-xl" :class="addPadding ? 'py-2' : ''">
         <slot/>
     </div>
 </template>

diff --git a/frontend/src/components/mappings/EntryDetails.vue b/frontend/src/components/mappings/EntryDetails.vue
@@ -2,9 +2,9 @@
     <div class="text-base whitespace-nowrap flex py-1">
         <span class="pr-2">{{ title }}</span>
         <div class="px-2 rounded bg-base-300 overflow-x-auto" v-if="code">
-            <pre><code class="break-all whitespace-pre text-xs">{{ content }}</code></pre>
+            <pre><code class="break-all whitespace-pre text-xs"><slot/></code></pre>
         </div>
-        <span v-else>{{ content }}</span>
+        <span v-else><slot/></span>
     </div>
 </template>
 
@@ -16,7 +16,6 @@ export default defineComponent({
     name: "EntryDetails",
     props: {
         title: String,
-        content: String,
         code: {
             type: Boolean,
             default: () => true,