gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-26 19:15:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

Updated UI and streamlined user interactions

Browse Source 
This commit brings several notable changes which majorly include updating the SVG sizes and dynamic UI updates based on user inputs. Some unnecessary lines of code have also been removed to enhance the code's efficiency.

Detailed Changes:
- The SVG width and height have been changed from 14 to 20 for better visibility.
- Svelte contexts and event handlers have been added to respond to user interactions such as mouse events and fetch operations.
- The import line including `{ base } from '$app/paths'` in the second part of the diff has been removed.
- HTML classes have been manipulated for a streamlined experience making the UI responsive.
- Introduces a refreshing icon that spins while fetching is in progress.
- Several changes inside the div tags for a better UX by enriching user feedback on hover and click actions.
- Removed lines setting the behind variable within the script block.
- Other changes include updating dynamic variables used in the DOM, tweaking UI colors and backgrounds.
This commit is contained in:
Kiril Videlov 2023-07-24 16:08:53 +02:00 committed by Kiril Videlov
parent 8a7cb858b6
commit 20946bf12e
4 changed files with 96 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/Tooltip/Tooltip.svelte
View File

@ -38,7 +38,7 @@
<div
role="tooltip"
class="h-fit w-fit flex-auto overflow-auto"
class="h-fit flex-auto overflow-auto"
on:mouseenter={() => (timeout = setTimeout(() => (showTooltip = true), timeoutMilliseconds))}
on:mouseleave={() => {
clearTimeout(timeout);
@ -64,7 +64,7 @@
"
use:floatingContent
>
<span class="whitespace-nowrap">{label}</span>
<span>{label}</span>
<div
class="
absolute

5
src/lib/icons/IconGithub.svelte
View File

@ -5,11 +5,10 @@
<svg
class={className}
width="14"
height="14"
width="20"
height="20"
viewBox="0 0 14 14"
fill="none"
style="margin-top: -1px; margin-left: -1px;"
xmlns="http://www.w3.org/2000/svg"
>
<path

14
src/lib/icons/IconRefresh.svelte
View File

@ -1,4 +1,16 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<script lang="ts">
let className = '';
export { className as class };
</script>
<svg
class={className}
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

148
src/routes/repo/[projectId]/UpstreamBranchLane.svelte
View File

@ -6,7 +6,6 @@
import type { BranchController } from '$lib/vbranches';
import { BRANCH_CONTROLLER_KEY } from '$lib/vbranches/branchController';
import { getContext } from 'svelte';
import { base } from '$app/paths';
export let baseBranch: BaseBranch;
@ -14,91 +13,102 @@
const branchController = getContext<BranchController>(BRANCH_CONTROLLER_KEY);
$: behind = baseBranch.behind > 0;
// $: behind = baseBranch.behind > 0;
$: behindMessage = baseBranch.behind > 0 ? `behind ${baseBranch.behind}` : 'up-to-date';
let fetching = false;
$: expanded = baseBranch.behind > 0;
let buttonHovered = false;
</script>
<div
class:w-64={behind}
class:w-16={!behind}
class="flex h-full shrink-0 cursor-default snap-center flex-col overflow-y-scroll overscroll-y-none
border-r border-light-600 bg-light-400 pt-2
transition-width dark:border-r-light-800 dark:bg-dark-1000 dark:text-dark-100"
class="flex h-full shrink-0 cursor-default snap-center flex-col overflow-y-scroll
overscroll-y-none border-light-600
bg-light-400
dark:border-l
dark:border-dark-600 dark:border-r-light-800 dark:bg-dark-700 dark:text-dark-100"
role="group"
>
<div class="flex">
<Tooltip label={baseBranch.branchName}>
<div class="flex items-center px-2">
{#if baseBranch.remoteUrl.includes('github.com')}
<IconGithub class="h-4 w-4" />
{:else}
<IconBranch class="h-4 w-4" />
{/if}
</div>
<div class="flex w-full items-center gap-4 border-b border-light-500 px-2 dark:border-dark-500">
<Tooltip label={'Fetch ' + baseBranch.branchName}>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<button
on:mouseover={() => (buttonHovered = true)}
on:mouseleave={() => (buttonHovered = false)}
on:click={() => {
fetching = true;
branchController.fetchFromTarget().finally(() => (fetching = false));
}}
>
<div
class="flex h-6 w-6 items-center justify-center rounded hover:bg-light-200 dark:hover:bg-dark-700"
>
{#if buttonHovered || fetching}
<div class:animate-spin={fetching}>
<IconRefresh class="h-4 w-4" />
</div>
{:else if baseBranch.remoteUrl.includes('github.com')}
<IconGithub class="h-4 w-4" />
{:else}
<IconBranch class="h-4 w-4" />
{/if}
</div>
</button>
</Tooltip>
{#if expanded}
<div class="font-mono font-bold">
{baseBranch.branchName}
</div>
<div class="flex-grow font-mono font-bold">{baseBranch.branchName}</div>
{/if}
</div>
{#if behind}
<div class="p-2">
<div class="flex flex-row justify-between px-2 pb-2">
<div class="flex flex-row space-x-2">
<IconBranch class="h-4 w-4" />
<div
class="w-full truncate border-0 font-bold text-light-900 dark:bg-dark-1000 dark:text-dark-100"
<div class="relative flex flex-grow justify-center overflow-y-scroll">
<div class="w-5" />
<div
class="
dark:form-dark-600
w-px bg-gradient-to-b from-transparent via-light-600 dark:from-dark-400 dark:via-dark-400"
/>
<div class="flex-grow" />
{#if expanded}
<div class="w-60 py-4 pr-4">
<div class="ml-4">
<Tooltip
label={'Merges the commits from ' +
baseBranch.branchName +
' into the base of all applied virtual branches'}
>
{baseBranch.branchName}
<Button
width="full-width"
height="small"
color="purple"
on:click={updateTargetModal.show}
>
Merge into common base
</Button>
</Tooltip>
</div>
<div class="-ml-[18px] flex h-full">
<div class="z-40 mt-4 flex w-full flex-col gap-2">
{#each baseBranch.upstreamCommits as commit}
<div class="flex w-full items-center pb-2">
<div class="ml-3 mr-2">
<div
class="h-3 w-3 rounded-full border-2 border-light-600 bg-light-600 dark:border-dark-400 dark:bg-dark-400"
class:bg-light-500={commit.isRemote}
class:dark:bg-dark-500={commit.isRemote}
/>
</div>
<CommitCard {commit} />
</div>
{/each}
</div>
</div>
<div class="text-sm text-light-600">
{behindMessage}
</div>
</div>
<Button class="w-full" height="small" color="purple" on:click={updateTargetModal.show}>
Merge Upstream
</Button>
<div class="flex h-full">
<div class="relative z-30 h-full">
<div
class="absolute top-0 z-30 ml-[20px] h-full w-px
bg-gradient-to-b from-transparent via-light-400 dark:via-dark-600
"
/>
</div>
<div class="z-40 mt-4 flex w-full flex-col gap-2">
{#each baseBranch.upstreamCommits as commit}
<CommitCard {commit} />
{/each}
</div>
</div>
</div>
{:else}
<div class="p-2">
<div class="text-light-600">Up to date</div>
<Tooltip label="Fetch the latest from remote">
<div
class="flex h-5 w-5 items-center justify-center rounded p-3 text-light-600 hover:bg-light-200 disabled:text-light-300 dark:hover:bg-dark-800 disabled:dark:text-dark-300"
>
<button
class:animate-spin={fetching}
on:click={() => {
fetching = true;
branchController.fetchFromTarget().finally(() => (fetching = false));
}}
title="click to fetch"
>
<IconRefresh />
</button>
</div>
</Tooltip>
</div>
{/if}
{:else}
<div class="w-5" />
{/if}
</div>
</div>
<!-- Confirm target update modal -->