chore: move expand/collapse to the left

This commit is contained in:
Kiril Videlov 2023-10-28 19:23:35 +02:00 committed by Kiril Videlov
parent 579807687c
commit a9f1da75af
3 changed files with 23 additions and 34 deletions

View File

@ -4,7 +4,7 @@
import IconHelp from '$lib/icons/IconHelp.svelte';
import Scrollbar from '$lib/components/Scrollbar.svelte';
import Tooltip from '$lib/components/Tooltip/Tooltip.svelte';
import { IconTriangleDown, IconTriangleUp } from '$lib/icons';
import { IconTriangleDown } from '$lib/icons';
import TimeAgo from '$lib/components/TimeAgo/TimeAgo.svelte';
import { accordion } from './accordion';
import type { CustomStore, RemoteBranch, BaseBranch, Branch } from '$lib/vbranches/types';
@ -21,11 +21,13 @@
}>();
export let remoteBranchStore: CustomStore<RemoteBranch[] | undefined>;
let rbViewport: HTMLElement;
let rbContents: HTMLElement;
let rbSection: HTMLElement;
let rbViewport: HTMLElement;
let rbContents: HTMLElement;
let rbSection: HTMLElement;
export let peekTrayExpanded = false;
export let selectedItem: Readable<Branch | RemoteBranch | BaseBranch | PullRequest | undefined> | undefined;
export let selectedItem:
| Readable<Branch | RemoteBranch | BaseBranch | PullRequest | undefined>
| undefined;
$: remoteBranchesState = remoteBranchStore?.state;
@ -42,7 +44,10 @@
class="bg-color-4 border-color-4 flex items-center justify-between border-b border-t px-2 py-1 pr-1"
>
<div class="flex flex-row place-items-center space-x-2">
<div class="text-color-2 font-bold">Remote Branches</div>
<button class="h-full w-full" on:click={() => (open = !open)}>
<IconTriangleDown class={!open ? '-rotate-90' : ''} />
</button>
<div class="text-color-2 whitespace-nowrap font-bold">Remote Branches</div>
<a
target="_blank"
rel="noreferrer"
@ -51,15 +56,7 @@
<IconHelp class="text-color-3 h-3 w-3" />
</a>
</div>
<div class="flex h-4 w-4 justify-around">
<button class="h-full w-full" on:click={() => (open = !open)}>
{#if open}
<IconTriangleUp />
{:else}
<IconTriangleDown />
{/if}
</button>
</div>
<div class="flex h-4 w-4 justify-around"></div>
</div>
<div bind:this={rbSection} use:accordion={open} class="border-color-5 relative flex-grow border-b">

View File

@ -1,7 +1,7 @@
<script lang="ts">
import { Branch, BaseBranch, RemoteBranch, type CustomStore } from '$lib/vbranches/types';
import { IconBranch } from '$lib/icons';
import { IconTriangleDown, IconTriangleUp } from '$lib/icons';
import { IconTriangleDown } from '$lib/icons';
import { accordion } from './accordion';
import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/userSettings';
import { getContext } from 'svelte';
@ -194,16 +194,13 @@
<div
class="bg-color-4 border-color-4 flex items-center justify-between border-b border-t px-2 py-1 pr-1"
>
<div class="font-bold">Stashed branches</div>
<div class="flex h-4 w-4 justify-around">
<IconButton class="h-full w-full" on:click={() => (yourBranchesOpen = !yourBranchesOpen)}>
{#if yourBranchesOpen}
<IconTriangleUp />
{:else}
<IconTriangleDown />
{/if}
</IconButton>
<div class="flex flex-row place-items-center space-x-2">
<button class="h-full w-full" on:click={() => (yourBranchesOpen = !yourBranchesOpen)}>
<IconTriangleDown class={!yourBranchesOpen ? '-rotate-90' : ''} />
</button>
<div class="whitespace-nowrap font-bold">Stashed branches</div>
</div>
<div class="flex h-4 w-4 justify-around"></div>
</div>
<div
use:accordion={yourBranchesOpen}

View File

@ -4,7 +4,7 @@
import TimeAgo from '$lib/components/TimeAgo/TimeAgo.svelte';
import { IconPullRequest, IconDraftPullRequest } from '$lib/icons';
import Scrollbar from '$lib/components/Scrollbar.svelte';
import { IconTriangleDown, IconTriangleUp } from '$lib/icons';
import { IconTriangleDown } from '$lib/icons';
import { accordion } from '../accordion';
import type { PullRequest } from '$lib/github/types';
import { createEventDispatcher } from 'svelte';
@ -36,17 +36,12 @@
class="bg-color-4 border-color-4 flex items-center justify-between border-b border-t px-2 py-1 pr-1"
>
<div class="flex flex-row place-items-center space-x-2">
<div class="text-color-2 font-bold">Pull Requests</div>
</div>
<div class="flex h-4 w-4 justify-around">
<button class="h-full w-full" on:click={() => (open = !open)}>
{#if open}
<IconTriangleUp />
{:else}
<IconTriangleDown />
{/if}
<IconTriangleDown class={!open ? '-rotate-90' : ''} />
</button>
<div class="text-color-2 whitespace-nowrap font-bold">Pull Requests</div>
</div>
<div class="flex h-4 w-4 justify-around"></div>
</div>
<div bind:this={rbSection} use:accordion={open} class="border-color-5 relative flex-grow border-b">
<div