small ux nits for sidebar tabs
This commit is contained in:
@@ -233,7 +233,7 @@
|
||||
|
||||
$: !!editTab ? openEditTab() : closeEditTab()
|
||||
|
||||
let pannelButtonWidth: number = 0
|
||||
let panelButtonWidth: number = 0
|
||||
export let pannelExtraButtonWidth: number = 0
|
||||
|
||||
export function updateJson() {
|
||||
@@ -246,8 +246,8 @@
|
||||
<div class="relative z-[100000]">
|
||||
<div
|
||||
class="absolute"
|
||||
style="right: calc({editPanelSize}% - 2px - {pannelExtraButtonWidth}px); top: 0px;"
|
||||
bind:clientWidth={pannelButtonWidth}
|
||||
style="right: calc({editPanelSize}% - 1px - {pannelExtraButtonWidth}px); top: 0px;"
|
||||
bind:clientWidth={panelButtonWidth}
|
||||
>
|
||||
<slot name="openEditTab" />
|
||||
</div>
|
||||
@@ -265,7 +265,7 @@
|
||||
<div
|
||||
style={editPanelSize > 0
|
||||
? `width: 100%;`
|
||||
: `width: calc(100% - ${pannelButtonWidth - pannelExtraButtonWidth}px);`}
|
||||
: `width: calc(100% - ${panelButtonWidth - pannelExtraButtonWidth}px);`}
|
||||
>
|
||||
<slot name="addProperty" />
|
||||
</div>
|
||||
@@ -317,7 +317,7 @@
|
||||
<Pane
|
||||
bind:size={editPanelSize}
|
||||
minSize={noPreview ? 100 : 50}
|
||||
class={twMerge('border rounded-md', pannelButtonWidth > 0 ? 'rounded-tl-none' : '')}
|
||||
class={twMerge('border rounded-md', panelButtonWidth > 0 ? 'rounded-tl-none' : '')}
|
||||
>
|
||||
{#if editTab !== 'inputEditor'}
|
||||
<slot name="extraTab" />
|
||||
|
||||
@@ -83,20 +83,19 @@
|
||||
let captureTable: CaptureTable | undefined = undefined
|
||||
let historicInputs: HistoricInputs | undefined = undefined
|
||||
$: selectedTab, (dropdownItems = getDropdownItems())
|
||||
|
||||
let inputPanelSize = 70
|
||||
</script>
|
||||
|
||||
<div class="h-fit">
|
||||
<div class="relative z-[100000] w-full">
|
||||
<div class="absolute" style="right: calc({100 - inputPanelSize}%); top: -1px;">
|
||||
<SideBarTab expandRight={rightPanelOpen} {dropdownItems} fullMenu={true} noTrigger={true} />
|
||||
</div>
|
||||
</div>
|
||||
<Splitpanes class={!rightPanelOpen ? 'splitter-hidden' : ''}>
|
||||
<Pane class="!overflow-visible" size={70} minSize={30}>
|
||||
<div class="relative w-full h-fit pr-12 pb-4 overflow-hidden" bind:clientHeight={rightHeight}>
|
||||
<div class="absolute right-[1px] -top-[1px] z-50">
|
||||
<SideBarTab
|
||||
expandRight={rightPanelOpen}
|
||||
{dropdownItems}
|
||||
fullMenu={true}
|
||||
noTrigger={true}
|
||||
/>
|
||||
</div>
|
||||
<Pane bind:size={inputPanelSize} class="!overflow-visible" minSize={30}>
|
||||
<div class="relative w-full h-fit pr-12 pb-4" bind:clientHeight={rightHeight}>
|
||||
<slot />
|
||||
</div>
|
||||
</Pane>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="flex flex-col relative !overflow-visible {expandRight ? 'pr-2 -mr-2' : ''}"
|
||||
class="flex flex-col relative !overflow-visible w-[33px]"
|
||||
on:mouseenter={handleMouseEnter}
|
||||
on:mouseleave={handleMouseLeave}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user