Skip to content

Commit

Permalink
feat: new navigation UX with sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akryum
Akryum committed Feb 4, 2024
1 parent 1089964 commit cf40e22
Show file tree
Hide file tree
Showing 12 changed files with 490 additions and 378 deletions.
7 changes: 0 additions & 7 deletions packages/app-frontend/src/assets/style/index.postcss
View file
@@ -1,10 +1,3 @@
.v-popper__popper.v-popper--theme-tooltip code {
@apply bg-gray-500/50 rounded px-1 text-[11px] font-mono;
}

/* @TODO remove when vue-ui style is updated */

.vue-ui-group:not(.vertical) > .indicator > .content {
margin: 0 12px;
width: calc(100% - 24px);
}
13 changes: 0 additions & 13 deletions packages/app-frontend/src/assets/style/index.styl
View file
Expand Up @@ -64,19 +64,6 @@ button:focus
.vue-ui-icon svg
fill currentColor

.preferences
display flex
flex-wrap wrap
padding 12px 4px

> *
margin 16px 24px

.vue-ui-form-field
> .wrapper > .content
min-height 32px
justify-content center

// Popover

.v-popper--theme-dropdown
Expand Down
9 changes: 7 additions & 2 deletions packages/app-frontend/src/features/App.vue
View file
Expand Up @@ -18,6 +18,7 @@ import {
import { darkMode } from '@front/util/theme'
import { useAppConnection } from './connection'
import { showAppsSelector } from './header/header'
import { useOrientation } from './layout/orientation'
const chromeTheme = isChrome ? chrome.devtools.panels.themeName : undefined
Expand Down Expand Up @@ -72,20 +73,24 @@ export default defineComponent({
}
})
const { orientation } = useOrientation()
return {
isConnected,
isInitializing,
showAppsSelector,
orientation,
}
},
})
</script>

<template>
<div
class="app w-full h-full flex flex-col relative outline-none"
class="app w-full h-full flex relative outline-none"
:class="{
'disconnected pointer-events-none': !isInitializing && !isConnected
'disconnected pointer-events-none': !isInitializing && !isConnected,
'flex-col': orientation === 'portrait',
}"
tabindex="0"
>
Expand Down
24 changes: 4 additions & 20 deletions packages/app-frontend/src/features/apps/AppSelect.vue
View file
Expand Up @@ -86,30 +86,14 @@ export default defineComponent({
>
<template #trigger>
<VueButton
class="flat"
icon-left="wysiwyg"
:icon-right="orientation === 'landscape' ? 'arrow_drop_down' : null"
:class="{
'icon-button': orientation === 'portrait'
}"
class="flat icon-button"
>
<div class="flex items-center space-x-2">
<template v-if="orientation === 'landscape'">
<span v-if="currentApp">
{{ currentApp.name }}
</span>
<span
v-else
class="opacity-50"
>
No app
</span>
</template>

<div class="flex items-center space-x-2 relative">
<img src="~@front/assets/vue-logo.svg" class="w-8 h-8">
<VueIcon
v-if="hasNewVueVersion"
icon="new_releases"
class="text-green-500"
class="text-green-400 absolute right-0 bottom-0 w-4 h-4"
/>
</div>
</VueButton>
Expand Down
183 changes: 95 additions & 88 deletions packages/app-frontend/src/features/components/ComponentsInspector.vue
View file
Expand Up @@ -105,18 +105,101 @@ export default defineComponent({
>
<template #left>
<div class="flex flex-col h-full">
<VueInput
ref="treeFilterInput"
v-model="treeFilter"
v-tooltip="{
content: $t('ComponentTree.filter.tooltip'),
html: true
}"
icon-left="search"
placeholder="Find components..."
select-all
class="search flat border-b border-gray-200 dark:border-gray-800 !min-w-0"
/>
<div class="flex items-center border-b border-gray-200 dark:border-gray-800">
<VueInput
ref="treeFilterInput"
v-model="treeFilter"
v-tooltip="{
content: $t('ComponentTree.filter.tooltip'),
html: true
}"
icon-left="search"
placeholder="Find components..."
select-all
class="search flat !min-w-0 flex-1"
/>

<VueButton
v-tooltip="{
content: $t('ComponentTree.select.tooltip'),
html: true
}"
class="icon-button flat"
icon-left="gps_fixed"
@click="startPickingComponent()"
/>

<VueButton
v-tooltip="{
content: $t('ComponentTree.refresh.tooltip'),
html: true
}"
class="icon-button flat"
:class="{
'animate-icon': animateRefresh,
}"
icon-left="refresh"
@click="refresh()"
/>

<VueDropdown
placement="bottom-end"
>
<template #trigger>
<VueButton
icon-left="more_vert"
class="icon-button flat"
/>
</template>

<div class="space-y-1 px-3 py-2 text-sm">
<div>Component names:</div>

<VueGroup
v-model="$shared.componentNameStyle"
>
<VueGroupButton
value="original"
label="Original"
/>
<VueGroupButton
value="class"
label="PascalCase"
/>
<VueGroupButton
value="kebab"
label="kebab-case"
/>
</VueGroup>
</div>

<div class="space-y-1 px-3 py-2 text-sm">
<VueSwitch v-model="$shared.editableProps">
Editable props
</VueSwitch>
<div class="flex items-center space-x-1 text-xs opacity-50">
<VueIcon
icon="warning"
class="w-4 h-4 flex-none"
/>
<span>May print warnings in the console</span>
</div>
</div>

<div class="space-y-1 px-3 py-2 text-sm">
<VueSwitch v-model="$shared.flashUpdates">
Highlight updates
</VueSwitch>
<div class="flex items-center space-x-1 text-xs opacity-50">
<VueIcon
icon="warning"
class="w-4 h-4 flex-none"
/>
<span>Don't enable if you are sensitive to flashing</span>
</div>
</div>
</VueDropdown>
</div>

<div
ref="treeScroller"
Expand All @@ -136,82 +219,6 @@ export default defineComponent({
</template>
</SplitPane>

<SafeTeleport to="#more-menu">
<div class="space-y-1 px-3 py-2 text-sm">
<div>Component names:</div>

<VueGroup
v-model="$shared.componentNameStyle"
>
<VueGroupButton
value="original"
label="Original"
/>
<VueGroupButton
value="class"
label="PascalCase"
/>
<VueGroupButton
value="kebab"
label="kebab-case"
/>
</VueGroup>
</div>

<div class="space-y-1 px-3 py-2 text-sm">
<VueSwitch v-model="$shared.editableProps">
Editable props
</VueSwitch>
<div class="flex items-center space-x-1 text-xs opacity-50">
<VueIcon
icon="warning"
class="w-4 h-4 flex-none"
/>
<span>May print warnings in the console</span>
</div>
</div>

<div class="space-y-1 px-3 py-2 text-sm">
<VueSwitch v-model="$shared.flashUpdates">
Highlight updates
</VueSwitch>
<div class="flex items-center space-x-1 text-xs opacity-50">
<VueIcon
icon="warning"
class="w-4 h-4 flex-none"
/>
<span>Don't enable if you are sensitive to flashing</span>
</div>
</div>

<div class="border-t border-gray-200 dark:border-gray-800 my-1" />
</SafeTeleport>

<SafeTeleport to="#header-end">
<VueButton
v-tooltip="{
content: $t('ComponentTree.select.tooltip'),
html: true
}"
class="icon-button flat"
icon-left="gps_fixed"
@click="startPickingComponent()"
/>

<VueButton
v-tooltip="{
content: $t('ComponentTree.refresh.tooltip'),
html: true
}"
class="icon-button flat"
:class="{
'animate-icon': animateRefresh,
}"
icon-left="refresh"
@click="refresh()"
/>
</SafeTeleport>

<SafeTeleport to="#root">
<div
v-if="pickingComponent"
Expand Down

0 comments on commit cf40e22

Please sign in to comment.