fix(ui): improve some ui details

nuxt · Sep 27, 2023 · cd0b8a5 · cd0b8a5
1 parent 5011c35
commit cd0b8a5
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 18 deletions.
diff --git a/packages/devtools-ui-kit/src/components/NTextInput.vue b/packages/devtools-ui-kit/src/components/NTextInput.vue
@@ -8,6 +8,7 @@ const props = withDefaults(
     placeholder?: string
     disabled?: boolean
     autofocus?: boolean
+    readonly?: boolean
     type?: string
   }>(),
   {

diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
@@ -147,7 +147,8 @@ export function unocssPreset(): Preset {
       'n-icon-button': 'aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:n-bg-active',
 
       // badge
-      'n-badge': 'bg-context/10 text-context mx-0.5 select-none whitespace-nowrap rounded px-1.5 py-0.5 text-xs',
+      'n-badge-base': 'bg-context/10 text-context rounded whitespace-nowrap select-none',
+      'n-badge': 'n-badge-base mx-0.5 px-1.5 py-0.5 text-xs',
 
       // loading
       'n-loading': 'flex h-full w-full justify-center items-center',

diff --git a/packages/devtools/client/components/ServerRouteDetails.vue b/packages/devtools/client/components/ServerRouteDetails.vue
@@ -296,31 +296,39 @@ const copy = useCopy()
 <template>
   <div h-full w-full flex="~ col">
     <div flex="~ col gap-2" flex-none p4 navbar-glass>
-      <div flex="~ gap2">
-        <NButton v-if="route.method" :class="getRequestMethodClass(routeMethod)" pointer-events-none tabindex="-1">
+      <div flex="~ gap2 items-center">
+        <NButton
+          v-if="route.method" class="n-badge-base n-sm"
+          :class="getRequestMethodClass(routeMethod)"
+          pointer-events-none font-mono tabindex="-1"
+        >
           {{ routeMethod.toUpperCase() }}
         </NButton>
-        <NSelect v-else v-model="routeMethod" :class="getRequestMethodClass(routeMethod)">
+        <NSelect
+          v-else v-model="routeMethod"
+          class="n-badge-base n-sm"
+          :class="getRequestMethodClass(routeMethod)"
+        >
           <option v-for="method of methods" :key="method" :class="getRequestMethodClass(method)">
             {{ method.toUpperCase() }}
           </option>
         </NSelect>
         <div relative w-full>
           <NTextInput
             :model-value="finalPath"
-            disabled flex-auto font-mono
+            readonly flex-auto font-mono
             p="x5 y2"
-            n="primary xs"
+            n="sm"
           />
           <NButton
             v-tooltip="'Copy URL'"
             title="Copy URL"
-            absolute right-2 top-1.7
+            absolute right-2 top-1.5
             n="xs blue"
+            icon="carbon:copy"
+            :border="false"
             @click="copy(finalURL)"
-          >
-            <NIcon icon="carbon:copy" />
-          </NButton>
+          />
         </div>
         <NButton n="primary solid" @click="fetchData">
           <NIcon icon="carbon:send" />

diff --git a/packages/devtools/client/components/ServerRouteListItem.vue b/packages/devtools/client/components/ServerRouteListItem.vue
@@ -24,7 +24,7 @@ const currentServerRoute = useCurrentServeRoute()
         <NIcon v-if="item.type === 'collection'" icon="carbon:chevron-right" mb0.5 :transform-rotate="open ? 90 : 0" transition />
         <NBadge
           v-else
-          :n="getRequestMethodClass(item.method || '*')"
+          :class="getRequestMethodClass(item.method || '*')"
           v-text="(item.method || '*').toUpperCase()"
         />
       </div>

diff --git a/packages/devtools/client/composables/utils.ts b/packages/devtools/client/composables/utils.ts
@@ -82,13 +82,13 @@ export function getIsMacOS() {
 
 // @unocss-include
 const requestMethodClass: Record<string, string> = {
-  get: 'green',
-  post: 'blue',
-  put: 'orange',
-  delete: 'red',
-  patch: 'purple',
-  head: 'teal',
-  default: 'gray',
+  get: 'n-green',
+  post: 'n-blue',
+  put: 'n-orange',
+  delete: 'n-red',
+  patch: 'n-purple',
+  head: 'n-teal',
+  default: 'n-gray',
 }
 
 export function getRequestMethodClass(method: string) {