feat: styling

nuxt · Apr 18, 2023 · 4be0a97 · 4be0a97
1 parent 0ed638e
commit 4be0a97
Show file tree

Hide file tree

Showing 14 changed files with 59 additions and 58 deletions.
diff --git a/packages/devtools-ui-kit/src/components/NLoading.vue b/packages/devtools-ui-kit/src/components/NLoading.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="n-loading n-panel-grids">
+  <div class="n-loading n-panel-grids-center">
     <div class="flex flex-col animate-pulse items-center text-lg">
       <div class="i-carbon-circle-dash animate-spin text-4xl op50" />
       <slot>

diff --git a/packages/devtools-ui-kit/src/components/NPanelGrids.vue b/packages/devtools-ui-kit/src/components/NPanelGrids.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="n-panel-grids">
+  <div class="n-panel-grids-center">
     <slot />
   </div>
 </template>
diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
@@ -144,7 +144,8 @@ export function unocssPreset(): Preset {
 
       // loading
       'n-loading': 'flex h-full w-full justify-center items-center',
-      'n-panel-grids': 'n-panel-grids-light dark:n-panel-grids-dark flex flex-col h-full gap-2 items-center justify-center',
+      'n-panel-grids': 'n-panel-grids-light dark:n-panel-grids-dark',
+      'n-panel-grids-center': 'n-panel-grids flex flex-col h-full gap-2 items-center justify-center',
     },
   }
 }

diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
@@ -28,6 +28,10 @@ useHead({
 setupClientRPC()
 
 const client = useClient()
+const route = useRoute()
+const isUtilityView = computed(() => route.path.startsWith('/__'))
+const waiting = computed(() => !client.value && !showConnectionWarning.value)
+
 addEventListener('keypress', (e) => {
   if (e.code === 'KeyD' && e.altKey) {
     client.value?.closeDevTools()
@@ -54,9 +58,19 @@ onMounted(() => {
 <template>
   <div fixed inset-0 h-screen w-screen>
     <NuxtLoadingIndicator />
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
+    <Notification />
+    <NLoading v-if="waiting">
+      Connecting....
+    </NLoading>
+    <div
+      v-else :grid="isUtilityView ? 'flex' : '~ cols-[50px_1fr]'"
+      h-full h-screen of-hidden font-sans bg-base
+    >
+      <SideNav v-show="!isUtilityView" of-x-hidden of-y-auto />
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </div>
     <DisconnectIndicator />
     <RestartDialogs />
   </div>

diff --git a/packages/devtools/client/components/SideNav.vue b/packages/devtools/client/components/SideNav.vue
@@ -8,7 +8,6 @@ const tabs = useTabs()
     <div flex="~ col" sticky top-0 z-1 mb1 items-center pt3 bg-base>
       <VDropdown placement="left-start" :distance="20">
         <button
-
           i-logos-nuxt-icon h-6 w-6 text-lg
           :class="client ? '' : 'saturate-0'"
           :title="client ? 'Nuxt DevTools' : 'DevTools Client not connected, try open it in iframe mode'"

diff --git a/packages/devtools/client/layouts/default.vue b/packages/devtools/client/layouts/default.vue
@@ -1,19 +1,7 @@
-<script setup lang="ts">
-const client = useClient()
-const waiting = computed(() => !client.value && !showConnectionWarning.value)
-</script>
-
 <template>
-  <div h-screen of-hidden font-sans bg-base>
-    <Notification />
-    <NLoading v-if="waiting">
-      Connecting....
-    </NLoading>
-    <div v-else grid="~ cols-[50px_1fr]" h-full of-hidden>
-      <SideNav of-x-hidden of-y-auto />
-      <div h-full of-auto>
-        <slot />
-      </div>
+  <div h-full of-auto n-panel-grids>
+    <div bg-base>
+      <slot />
     </div>
   </div>
 </template>
diff --git a/packages/devtools/client/layouts/full.vue b/packages/devtools/client/layouts/full.vue
@@ -0,0 +1,5 @@
+<template>
+  <div h-full of-auto>
+    <slot />
+  </div>
+</template>
diff --git a/packages/devtools/client/pages/__inspecting.vue b/packages/devtools/client/pages/__inspecting.vue
@@ -16,12 +16,12 @@ function close() {
 </script>
 
 <template>
-  <div flex="~" h-screen items-center justify-center px5 bg-base>
+  <NPanelGrids h-screen w-screen px5>
     <div absolute right-0 top-0 p2>
       <button carbon-close ma text-xl op50 hover:op100 @click="close" />
     </div>
     <div>
       Inspecting Vue components
     </div>
-  </div>
+  </NPanelGrids>
 </template>
diff --git a/packages/devtools/client/pages/modules/assets.vue b/packages/devtools/client/pages/modules/assets.vue
@@ -6,6 +6,7 @@ import type { AssetInfo } from '~/../src/types'
 definePageMeta({
   icon: 'carbon-image-copy',
   title: 'Assets',
+  layout: 'full',
 })
 
 const assets = useStaticAssets()
@@ -99,7 +100,6 @@ function refreshAssets() {}
     </div>
     <DrawerRight
       :model-value="!!selected"
-
       auto-close w-120
       :navbar="navbar"
       @close="selected = undefined"

diff --git a/packages/devtools/client/pages/modules/custom-[name].vue b/packages/devtools/client/pages/modules/custom-[name].vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import type { ModuleCustomTab } from '~/../src/types'
 
+definePageMeta({
+  layout: 'full',
+})
+
 const route = useRoute()
 const router = useRouter()
 const name = computed(() => route.params.name)
@@ -20,18 +24,20 @@ onMounted(() => {
 
 <template>
   <template v-if="!tab">
-    <div flex="~ col gap-2" h-full items-center justify-center>
-      <div i-carbon-queued mb2 text-5xl op50 />
-      <p text-xl>
-        Tab <code text-rose>{{ name }}</code> not found
-      </p>
-      <p op50>
-        It might because the module contributing this tab is not installed or enabled
-      </p>
-      <p mt8 animate-pulse>
-        Redirecting to overview page...
-      </p>
-    </div>
+    <NPanelGrids>
+      <div flex="~ col gap2" mxa items-center>
+        <div i-carbon-queued mb2 text-5xl op50 />
+        <p text-xl>
+          Tab <code text-rose>{{ name }}</code> not found
+        </p>
+        <p op50>
+          It might because the module contributing this tab is not installed or enabled
+        </p>
+        <p mt8 animate-pulse>
+          Redirecting to overview page...
+        </p>
+      </div>
+    </NPanelGrids>
   </template>
   <template v-else-if="tab.view.type === 'iframe'">
     <IframeView :tab="tab" />
@@ -49,8 +55,10 @@ onMounted(() => {
     />
   </template>
   <template v-else>
-    <div flex="~ col" h-full items-center justify-center>
-      Unknown tab type {{ tab.view }}
-    </div>
+    <NPanelGrids>
+      <NCard flex="~ col" h-full items-center justify-center>
+        Unknown tab type {{ tab.view }}
+      </NCard>
+    </NPanelGrids>
   </template>
 </template>
diff --git a/packages/devtools/client/pages/modules/layouts.vue b/packages/devtools/client/pages/modules/layouts.vue
diff --git a/packages/devtools/client/pages/modules/overview.vue b/packages/devtools/client/pages/modules/overview.vue
@@ -22,7 +22,7 @@ function goIntro() {
 </script>
 
 <template>
-  <NPanelGrids h-full w-full flex>
+  <NPanelGrids h-screen w-full flex>
     <div v-if="!config">
       Loading...
     </div>

diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
@@ -5,6 +5,7 @@ definePageMeta({
   icon: 'carbon-data-base',
   title: 'Storage',
   experimental: true,
+  layout: 'full',
 })
 
 const nuxtApp = useNuxtApp()
@@ -198,7 +199,7 @@ async function renameCurrentItem() {
       </NPanelGrids>
     </template>
   </PanelLeftRight>
-  <NPanelGrids v-else card-class="flex flex-col gap-2 items-center text-center p6">
+  <NPanelGrids v-else>
     <p v-if="Object.keys(storageMounts as any).length" op50>
       Select one storage to start:
     </p>

diff --git a/packages/devtools/client/styles/global.css b/packages/devtools/client/styles/global.css
@@ -90,7 +90,7 @@ textarea {
 .json-editor-vue {
   --jse-theme-color: #8886 !important;
   --jse-theme-color-highlight: #8889 !important;
-  --jse-background-color: #8881 !important;
+  --jse-background-color: #8888880A !important;
 }
 
 .json-editor-vue .no-main-menu {