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

Lines changed: 0 additions & 7 deletions
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

Lines changed: 0 additions & 13 deletions
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

Lines changed: 7 additions & 2 deletions
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

Lines changed: 4 additions & 20 deletions
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

Lines changed: 95 additions & 88 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy