Skip to content

Commit

Permalink
feat: enhance inspect component ux
Browse files Browse the repository at this point in the history
  • Loading branch information
webfansplz committed Jun 18, 2024
1 parent e0dd924 commit bd0cc77
Show file tree
Hide file tree
Showing 5 changed files with 12 additions and 11 deletions.
2 changes: 1 addition & 1 deletion packages/applet/src/components/state/RootStateViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const { expanded, toggleExpanded } = useToggleExpanded(props.expandedStateId)
/>
<!-- placeholder -->
<span v-else pl5 />
<span font-state-field text-4>
<span font-state-field text-14px>
{{ key }}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/applet/src/components/state/StateFieldViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ async function submitDrafting() {
<div>
<div
ref="containerRef"
class="font-state-field flex items-center"
class="font-state-field flex items-center text-14px"
:class="[hasChildren && 'cursor-pointer hover:(bg-active)']"
:style="{ paddingLeft: `${depth * 15 + 4}px` }"
@click="toggleExpanded(`${depth}-${index}`)"
Expand Down
2 changes: 1 addition & 1 deletion packages/applet/src/components/tree/TreeViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ function select(id: string) {
/>
<!-- placeholder -->
<span v-else pl5 />
<span font-state-field text-4>
<span font-state-field text-14px>
<span v-if="withTag" class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&lt;</span>
<span group-hover:text-white class="ws-nowrap [.active_&]:(text-white)">{{ normalizeLabel(item) }}</span>
<span v-if="withTag" class="text-gray-400 dark:text-gray-600 group-hover:(text-white op50) [.active_&]:(op50 text-white!)">&gt;</span>
Expand Down
16 changes: 8 additions & 8 deletions packages/applet/src/modules/components/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
} from '@vue/devtools-core'
import { parse } from '@vue/devtools-kit'
import { useElementSize, useToggle, watchDebounced } from '@vueuse/core'
import { VueInput, vTooltip } from '@vue/devtools-ui'
import { VueButton, VueDialog, VueInput, vTooltip } from '@vue/devtools-ui'
import { flatten, groupBy } from 'lodash-es'
import ComponentRenderCode from './components/RenderCode.vue'
import ComponentTree from '~/components/tree/TreeViewer.vue'
Expand Down Expand Up @@ -272,11 +272,11 @@ function closeComponentRenderCode() {
<Pane border="base" h-full>
<div v-if="componentTreeLoaded" class="h-full flex flex-col p2">
<div class="flex py2">
<VueInput v-model="filterComponentName" :loading-debounce-time="250" :loading="!filtered" placeholder="Find components..." flex-1 />
<button px-1 @click="inspectComponentInspector">
<VueInput v-model="filterComponentName" :loading-debounce-time="250" :loading="!filtered" placeholder="Find components..." class="flex-1 text-14px" />
<button v-tooltip.bottom="'Select component in the page'" px-1 class="hover:(color-#00dc82)" @click="inspectComponentInspector">
<svg
xmlns="http://www.w3.org/2000/svg"
style="height: 1.1em; width: 1.1em;color:#00dc82;"
style="height: 1.1em; width: 1.1em;"
class="op-80 hover:(op-100)"
viewBox="0 0 24 24"
>
Expand All @@ -293,13 +293,13 @@ function closeComponentRenderCode() {
<div class="h-full flex flex-col p2">
<div class="flex py2">
<!-- component name -->
<span v-if="activeTreeNode?.name" class="font-state-field flex items-center px-1 text-4">
<span v-if="activeTreeNode?.name" class="font-state-field flex items-center px-1 text-14px">
<span class="text-gray-400 dark:text-gray-600">&lt;</span>
<span group-hover:text-white class="max-w-40 of-hidden text-ellipsis ws-nowrap [.active_&]:(text-white)">{{ activeTreeNode.name }}</span>
<span class="text-gray-400 dark:text-gray-600">&gt;</span>
</span>

<VueInput v-model="filterStateName" :loading-debounce-time="250" placeholder="Filter State..." flex-1 />
<VueInput v-model="filterStateName" :loading-debounce-time="250" placeholder="Filter State..." class="flex-1 text-14px" />

<div class="flex items-center gap-2 px-1">
<i v-tooltip.bottom="'Scroll to component'" class="i-material-symbols-light:eye-tracking-outline h-4 w-4 cursor-pointer hover:(op-70)" @click="scrollToComponent" />
Expand All @@ -315,7 +315,7 @@ function closeComponentRenderCode() {
</Splitpanes>

<!-- inspect-component dialog -->
<!-- <VueDialog v-model="inspectComponentTipVisible" title="" height="12rem" :closable="false">
<VueDialog v-if="isInChromePanel" v-model="inspectComponentTipVisible" title="" height="12rem" :closable="false">
<div class="h-full flex flex-col items-center justify-center gap-2">
<span class="block">
<svg
Expand All @@ -338,7 +338,7 @@ function closeComponentRenderCode() {
</VueButton>
</div>
</template>
</VueDialog> -->
</VueDialog>
</div>
</template>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@ function selectComponentFn(e: MouseEvent, cb) {
let inspectComponentHighLighterSelectFn: (e: MouseEvent) => void = null!

export function cancelInspectComponentHighLighter() {
unhighlight()
window.removeEventListener('mouseover', inspectFn)
window.removeEventListener('click', inspectComponentHighLighterSelectFn, true)
inspectComponentHighLighterSelectFn = null!
Expand Down

0 comments on commit bd0cc77

Please sign in to comment.