Skip to content

Commit cf40e22

Browse files
AkryumAkryum
committed
feat: new navigation UX with sidebar
1 parent 1089964 commit cf40e22

File tree

12 files changed

+490
-378
lines changed

12 files changed

+490
-378
lines changed

‎packages/app-frontend/src/assets/style/index.postcss

-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
11
.v-popper__popper.v-popper--theme-tooltip code {
22
@apply bg-gray-500/50 rounded px-1 text-[11px] font-mono;
33
}
4-
5-
/* @TODO remove when vue-ui style is updated */
6-
7-
.vue-ui-group:not(.vertical) > .indicator > .content {
8-
margin: 0 12px;
9-
width: calc(100% - 24px);
10-
}

‎packages/app-frontend/src/assets/style/index.styl

-13
Original file line numberDiff line numberDiff line change
@@ -64,19 +64,6 @@ button:focus
6464
.vue-ui-icon svg
6565
fill currentColor
6666

67-
.preferences
68-
display flex
69-
flex-wrap wrap
70-
padding 12px 4px
71-
72-
> *
73-
margin 16px 24px
74-
75-
.vue-ui-form-field
76-
> .wrapper > .content
77-
min-height 32px
78-
justify-content center
79-
8067
// Popover
8168

8269
.v-popper--theme-dropdown

‎packages/app-frontend/src/features/App.vue

+7-2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
import { darkMode } from '@front/util/theme'
1919
import { useAppConnection } from './connection'
2020
import { showAppsSelector } from './header/header'
21+
import { useOrientation } from './layout/orientation'
2122
2223
const chromeTheme = isChrome ? chrome.devtools.panels.themeName : undefined
2324
@@ -72,20 +73,24 @@ export default defineComponent({
7273
}
7374
})
7475
76+
const { orientation } = useOrientation()
77+
7578
return {
7679
isConnected,
7780
isInitializing,
7881
showAppsSelector,
82+
orientation,
7983
}
8084
},
8185
})
8286
</script>
8387

8488
<template>
8589
<div
86-
class="app w-full h-full flex flex-col relative outline-none"
90+
class="app w-full h-full flex relative outline-none"
8791
:class="{
88-
'disconnected pointer-events-none': !isInitializing && !isConnected
92+
'disconnected pointer-events-none': !isInitializing && !isConnected,
93+
'flex-col': orientation === 'portrait',
8994
}"
9095
tabindex="0"
9196
>

‎packages/app-frontend/src/features/apps/AppSelect.vue

+4-20
Original file line numberDiff line numberDiff line change
@@ -86,30 +86,14 @@ export default defineComponent({
8686
>
8787
<template #trigger>
8888
<VueButton
89-
class="flat"
90-
icon-left="wysiwyg"
91-
:icon-right="orientation === 'landscape' ? 'arrow_drop_down' : null"
92-
:class="{
93-
'icon-button': orientation === 'portrait'
94-
}"
89+
class="flat icon-button"
9590
>
96-
<div class="flex items-center space-x-2">
97-
<template v-if="orientation === 'landscape'">
98-
<span v-if="currentApp">
99-
{{ currentApp.name }}
100-
</span>
101-
<span
102-
v-else
103-
class="opacity-50"
104-
>
105-
No app
106-
</span>
107-
</template>
108-
91+
<div class="flex items-center space-x-2 relative">
92+
<img src="~@front/assets/vue-logo.svg" class="w-8 h-8">
10993
<VueIcon
11094
v-if="hasNewVueVersion"
11195
icon="new_releases"
112-
class="text-green-500"
96+
class="text-green-400 absolute right-0 bottom-0 w-4 h-4"
11397
/>
11498
</div>
11599
</VueButton>

‎packages/app-frontend/src/features/components/ComponentsInspector.vue

+95-88
Original file line numberDiff line numberDiff line change
@@ -105,18 +105,101 @@ export default defineComponent({
105105
>
106106
<template #left>
107107
<div class="flex flex-col h-full">
108-
<VueInput
109-
ref="treeFilterInput"
110-
v-model="treeFilter"
111-
v-tooltip="{
112-
content: $t('ComponentTree.filter.tooltip'),
113-
html: true
114-
}"
115-
icon-left="search"
116-
placeholder="Find components..."
117-
select-all
118-
class="search flat border-b border-gray-200 dark:border-gray-800 !min-w-0"
119-
/>
108+
<div class="flex items-center border-b border-gray-200 dark:border-gray-800">
109+
<VueInput
110+
ref="treeFilterInput"
111+
v-model="treeFilter"
112+
v-tooltip="{
113+
content: $t('ComponentTree.filter.tooltip'),
114+
html: true
115+
}"
116+
icon-left="search"
117+
placeholder="Find components..."
118+
select-all
119+
class="search flat !min-w-0 flex-1"
120+
/>
121+
122+
<VueButton
123+
v-tooltip="{
124+
content: $t('ComponentTree.select.tooltip'),
125+
html: true
126+
}"
127+
class="icon-button flat"
128+
icon-left="gps_fixed"
129+
@click="startPickingComponent()"
130+
/>
131+
132+
<VueButton
133+
v-tooltip="{
134+
content: $t('ComponentTree.refresh.tooltip'),
135+
html: true
136+
}"
137+
class="icon-button flat"
138+
:class="{
139+
'animate-icon': animateRefresh,
140+
}"
141+
icon-left="refresh"
142+
@click="refresh()"
143+
/>
144+
145+
<VueDropdown
146+
placement="bottom-end"
147+
>
148+
<template #trigger>
149+
<VueButton
150+
icon-left="more_vert"
151+
class="icon-button flat"
152+
/>
153+
</template>
154+
155+
<div class="space-y-1 px-3 py-2 text-sm">
156+
<div>Component names:</div>
157+
158+
<VueGroup
159+
v-model="$shared.componentNameStyle"
160+
>
161+
<VueGroupButton
162+
value="original"
163+
label="Original"
164+
/>
165+
<VueGroupButton
166+
value="class"
167+
label="PascalCase"
168+
/>
169+
<VueGroupButton
170+
value="kebab"
171+
label="kebab-case"
172+
/>
173+
</VueGroup>
174+
</div>
175+
176+
<div class="space-y-1 px-3 py-2 text-sm">
177+
<VueSwitch v-model="$shared.editableProps">
178+
Editable props
179+
</VueSwitch>
180+
<div class="flex items-center space-x-1 text-xs opacity-50">
181+
<VueIcon
182+
icon="warning"
183+
class="w-4 h-4 flex-none"
184+
/>
185+
<span>May print warnings in the console</span>
186+
</div>
187+
</div>
188+
189+
<div class="space-y-1 px-3 py-2 text-sm">
190+
<VueSwitch v-model="$shared.flashUpdates">
191+
Highlight updates
192+
</VueSwitch>
193+
<div class="flex items-center space-x-1 text-xs opacity-50">
194+
<VueIcon
195+
icon="warning"
196+
class="w-4 h-4 flex-none"
197+
/>
198+
<span>Don't enable if you are sensitive to flashing</span>
199+
</div>
200+
</div>
201+
</VueDropdown>
202+
</div>
120203

121204
<div
122205
ref="treeScroller"
@@ -136,82 +219,6 @@ export default defineComponent({
136219
</template>
137220
</SplitPane>
138221

139-
<SafeTeleport to="#more-menu">
140-
<div class="space-y-1 px-3 py-2 text-sm">
141-
<div>Component names:</div>
142-
143-
<VueGroup
144-
v-model="$shared.componentNameStyle"
145-
>
146-
<VueGroupButton
147-
value="original"
148-
label="Original"
149-
/>
150-
<VueGroupButton
151-
value="class"
152-
label="PascalCase"
153-
/>
154-
<VueGroupButton
155-
value="kebab"
156-
label="kebab-case"
157-
/>
158-
</VueGroup>
159-
</div>
160-
161-
<div class="space-y-1 px-3 py-2 text-sm">
162-
<VueSwitch v-model="$shared.editableProps">
163-
Editable props
164-
</VueSwitch>
165-
<div class="flex items-center space-x-1 text-xs opacity-50">
166-
<VueIcon
167-
icon="warning"
168-
class="w-4 h-4 flex-none"
169-
/>
170-
<span>May print warnings in the console</span>
171-
</div>
172-
</div>
173-
174-
<div class="space-y-1 px-3 py-2 text-sm">
175-
<VueSwitch v-model="$shared.flashUpdates">
176-
Highlight updates
177-
</VueSwitch>
178-
<div class="flex items-center space-x-1 text-xs opacity-50">
179-
<VueIcon
180-
icon="warning"
181-
class="w-4 h-4 flex-none"
182-
/>
183-
<span>Don't enable if you are sensitive to flashing</span>
184-
</div>
185-
</div>
186-
187-
<div class="border-t border-gray-200 dark:border-gray-800 my-1" />
188-
</SafeTeleport>
189-
190-
<SafeTeleport to="#header-end">
191-
<VueButton
192-
v-tooltip="{
193-
content: $t('ComponentTree.select.tooltip'),
194-
html: true
195-
}"
196-
class="icon-button flat"
197-
icon-left="gps_fixed"
198-
@click="startPickingComponent()"
199-
/>
200-
201-
<VueButton
202-
v-tooltip="{
203-
content: $t('ComponentTree.refresh.tooltip'),
204-
html: true
205-
}"
206-
class="icon-button flat"
207-
:class="{
208-
'animate-icon': animateRefresh,
209-
}"
210-
icon-left="refresh"
211-
@click="refresh()"
212-
/>
213-
</SafeTeleport>
214-
215222
<SafeTeleport to="#root">
216223
<div
217224
v-if="pickingComponent"

0 commit comments

Comments
 (0)