Skip to content

Commit

Permalink
feat: improve settings ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@antfu
antfu committed Apr 28, 2023
1 parent 19fda12 commit c0b4bd6
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 52 deletions.
2 changes: 1 addition & 1 deletion packages/devtools/client/components/DockingPanel.vue
View file
Expand Up @@ -53,7 +53,7 @@ function refreshPage() {
</NButton>
</NDarkToggle>
<NButton n="sm primary" to="/settings">
<div carbon-settings translate-y--1px /> Settings
<div carbon-settings-adjust translate-y--1px /> Settings
</NButton>
</div>
<div px3 py2 flex="~ gap2">
Expand Down
45 changes: 31 additions & 14 deletions packages/devtools/client/components/SideNav.vue
View file
Expand Up @@ -4,32 +4,49 @@ const categories = useCategorizedTabs()
</script>

<template>
<div border="r base" flex="~ col gap-0.5" z-100 h-full items-center bg-base class="no-scrollbar">
<div flex="~ col" sticky top-0 z-1 mb1 items-center pt3 bg-base>
<div border="r base" flex="~ col" z-100 h-full items-center of-hidden bg-base>
<div flex="~ none col items-center">
<VDropdown placement="left-start" :distance="20">
<button
i-logos-nuxt-icon h-6 w-6 text-lg
i-logos-nuxt-icon my3 h-6 w-6 pb-2 text-lg
:class="client ? '' : 'saturate-0'"
:title="client ? 'Nuxt DevTools' : 'DevTools Client not connected, try open it in iframe mode'"
/>
<template #popper>
<DockingPanel />
</template>
</VDropdown>
<div h-1px w-8 border="b base" />
</div>

<template v-for="[name, tabs] of categories" :key="name">
<template v-if="tabs.length">
<div my1 h-1px w-8 border="b base" />

<SideNavItem
v-for="tab of tabs"
:key="tab.name"
:tab="tab"
/>
<div flex="~ auto col gap-0.5 items-center" of-auto class="no-scrollbar" py1>
<template v-for="[name, tabs], idx of categories" :key="name">
<template v-if="tabs.length">
<div v-if="idx" my1 h-1px w-8 border="b base" />
<SideNavItem
v-for="tab of tabs"
:key="tab.name"
:tab="tab"
/>
</template>
</template>
</template>
<div flex-auto />
</div>

<div flex-auto />
<div flex="~ none col items-center">
<div h-1px w-8 border="b base" />
<NuxtLink
to="/settings"
flex="~ items-center justify-center"
hover="bg-active"
relative my1 block h-10 w-10 select-none rounded-xl p1 text-secondary
exact-active-class="!text-primary bg-active"
>
<TabIcon
text-xl
icon="i-carbon-settings-adjust" title="Settings" :show-title="false"
/>
</NuxtLink>
</div>
</div>
</template>
92 changes: 55 additions & 37 deletions packages/devtools/client/pages/settings.vue
View file
@@ -1,4 +1,8 @@
<script setup lang="ts">
definePageMeta({
layout: 'full',
})
const {
interactionCloseOnOutsideClick,
showExperimentalFeatures,
Expand Down Expand Up @@ -37,11 +41,59 @@ function toggleTabCategory(name: string, v: boolean) {
<div px6 py6>
<NIconTitle
class="mb-5 text-xl op75"
icon="i-carbon-settings"
icon="i-carbon-settings-adjust"
text="DevTools Settings"
/>
<div grid="~ cols-2 gap-10">
<div grid="~ md:cols-2 gap-x-10 gap-y-3" max-w-300>
<div flex="~ col gap-1" py3>
<h3 mb1 text-lg>
Tabs
</h3>
<template v-for="[name, tabs] of categories" :key="name">
<div
v-if="tabs.length"
flex="~ col gap-1" mx--1
:class="hiddenTabCategories.includes(name) ? 'op50 grayscale' : ''" pt-2
>
<NSwitch
flex="~ row-reverse" px2 py1 n-lime
:model-value="!hiddenTabCategories.includes(name)"
@update:model-value="v => toggleTabCategory(name, v)"
>
<div flex="~ gap-2" flex-auto items-center justify-start>
<span capitalize op75>{{ name }}</span>
</div>
</NSwitch>
<div flex="~ col gap-1" border="~ base rounded" py3 pl4 pr2>
<template v-for="tab of tabs" :key="tab.name">
<NSwitch
flex="~ row-reverse" py1 n-primary
:model-value="!hiddenTabs.includes(tab.name)"
@update:model-value="v => toggleTab(tab.name, v)"
>
<div flex="~ gap-2" flex-auto items-center justify-start :class="hiddenTabs.includes(tab.name) ? 'op25' : ''">
<TabIcon text-xl :icon="tab.icon" :title="tab.title" />
<span>{{ tab.title }}</span>
</div>
</NSwitch>
</template>
</div>
</div>
</template>
</div>
<div>
<div py3 flex="~ col gap-1" border="b base">
<h3 mb1 text-lg>
Appearance
</h3>
<div>
<NDarkToggle v-slot="{ toggle, isDark }">
<NButton n="primary" @click="toggle()">
<div carbon-sun dark:carbon-moon translate-y--1px /> {{ isDark.value ? 'Dark' : 'Light' }}

Check warning on line 92 in packages/devtools/client/pages/settings.vue

View workflow job for this annotation

GitHub Actions / ci 

UnoCSS attributes are not ordered
</NButton>
</NDarkToggle>
</div>
</div>
<div py3 flex="~ col gap-1" border="b base">
<h3 mb1 text-lg>
UI Scale
Expand All @@ -52,7 +104,7 @@ function toggleTabCategory(name: string, v: boolean) {
</option>
</NSelect>
</div>
<div py3 flex="~ col gap-1" border="b base">
<div py3 flex="~ col gap-1">
<h3 mb1 text-lg>
Features
</h3>
Expand All @@ -67,40 +119,6 @@ function toggleTabCategory(name: string, v: boolean) {
</NCheckbox>
</div>
</div>
<div flex="~ col gap-1" max-w-150 py3>
<h3 mb1 text-lg>
Tabs
</h3>
<template v-for="[name, tabs] of categories" :key="name">
<div
v-if="tabs.length"
flex="~ col gap-1"
:class="hiddenTabCategories.includes(name) ? 'op50 grayscale' : ''" pt-2
>
<NSwitch
flex="~ row-reverse" py1 n-lime border="b base"
:model-value="!hiddenTabCategories.includes(name)"
@update:model-value="v => toggleTabCategory(name, v)"
>
<div flex="~ gap-2" flex-auto items-center justify-start>
<span capitalize op75>{{ name }}</span>
</div>
</NSwitch>
<template v-for="tab of tabs" :key="tab.name">
<NSwitch
flex="~ row-reverse" py1 n-primary
:model-value="!hiddenTabs.includes(tab.name)"
@update:model-value="v => toggleTab(tab.name, v)"
>
<div flex="~ gap-2" flex-auto items-center justify-start :class="hiddenTabs.includes(tab.name) ? 'op25' : ''">
<TabIcon text-xl :icon="tab.icon" :title="tab.title" />
<span>{{ tab.title }}</span>
</div>
</NSwitch>
</template>
</div>
</template>
</div>
</div>
</div>
</template>

0 comments on commit c0b4bd6

Please sign in to comment.