gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-01 04:14:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

App bar UI components have clearer interactions

Browse Source 
App bar buttons are now more clearer you are able to click
This commit is contained in:
Ian Donahue 2023-03-03 19:06:02 +01:00
parent a9e4d4e468
commit 1e24daff14
3 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/components/BackForwardButtons.svelte
View File

@ -4,24 +4,28 @@
</script>
<div class="flex items-center justify-center space-x-3 text-zinc-400">
<button class="hover:text-zinc-200" title="Go back" on:click={() => history.back()}>
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14.9998 5H3.41376L6.70676 1.707C7.09776 1.316 7.09776 0.684 6.70676 0.293C6.31576 -0.0979999 5.68376 -0.0979999 5.29276 0.293L0.292762 5.293C-0.0982383 5.684 -0.0982383 6.316 0.292762 6.707L5.29276 11.707C5.48776 11.902 5.74376 12 5.99976 12C6.25576 12 6.51176 11.902 6.70676 11.707C7.09776 11.316 7.09776 10.684 6.70676 10.293L3.41376 7H14.9998C15.5528 7 15.9998 6.552 15.9998 6C15.9998 5.448 15.5528 5 14.9998 5Z"
fill="#5C5F62"
/>
</svg>
<button class="p-2 rounded-md hover:text-zinc-200 hover:bg-zinc-700" title="Go back" on:click={() => history.back()}>
<div class="w-4 h-4 flex justify-center items-center">
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14.9998 5H3.41376L6.70676 1.707C7.09776 1.316 7.09776 0.684 6.70676 0.293C6.31576 -0.0979999 5.68376 -0.0979999 5.29276 0.293L0.292762 5.293C-0.0982383 5.684 -0.0982383 6.316 0.292762 6.707L5.29276 11.707C5.48776 11.902 5.74376 12 5.99976 12C6.25576 12 6.51176 11.902 6.70676 11.707C7.09776 11.316 7.09776 10.684 6.70676 10.293L3.41376 7H14.9998C15.5528 7 15.9998 6.552 15.9998 6C15.9998 5.448 15.5528 5 14.9998 5Z"
fill="#5C5F62"
/>
</svg>
</div>
</button>
<button class="hover:text-zinc-200" title="Go forward" on:click={() => history.forward()}>
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.707 5.293L10.707 0.293C10.316 -0.0979999 9.684 -0.0979999 9.293 0.293C8.902 0.684 8.902 1.316 9.293 1.707L12.586 5H1C0.447 5 0 5.448 0 6C0 6.552 0.447 7 1 7H12.586L9.293 10.293C8.902 10.684 8.902 11.316 9.293 11.707C9.488 11.902 9.744 12 10 12C10.256 12 10.512 11.902 10.707 11.707L15.707 6.707C16.098 6.316 16.098 5.684 15.707 5.293Z"
fill="#5C5F62"
/>
</svg>
<button class="p-2 rounded-md hover:text-zinc-200 hover:bg-zinc-700" title="Go forward" on:click={() => history.forward()}>
<div class="w-4 h-4 flex justify-center items-center">
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.707 5.293L10.707 0.293C10.316 -0.0979999 9.684 -0.0979999 9.293 0.293C8.902 0.684 8.902 1.316 9.293 1.707L12.586 5H1C0.447 5 0 5.448 0 6C0 6.552 0.447 7 1 7H12.586L9.293 10.293C8.902 10.684 8.902 11.316 9.293 11.707C9.488 11.902 9.744 12 10 12C10.256 12 10.512 11.902 10.707 11.707L15.707 6.707C16.098 6.316 16.098 5.684 15.707 5.293Z"
fill="#5C5F62"
/>
</svg>
</div>
</button>
</div>

16
src/lib/components/Breadcrumbs.svelte
View File

@ -12,13 +12,15 @@
</script>
<div class="flex flex-row items-center bg-zinc-800 text-zinc-400">
<a class="" href="/">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.5547 0.16795C7.2188 -0.0559832 6.7812 -0.0559832 6.4453 0.16795L0.8906 3.87108C0.334202 4.24201 0 4.86648 0 5.53518V12C0 13.1046 0.895431 14 2 14H4C4.55228 14 5 13.5523 5 13V9H9V13C9 13.5523 9.44771 14 10 14H12C13.1046 14 14 13.1046 14 12V5.53518C14 4.86648 13.6658 4.24202 13.1094 3.87108L7.5547 0.16795Z"
fill="#5C5F62"
/>
</svg>
<a class="p-2 rounded-md hover:text-zinc-200 hover:bg-zinc-700" href="/">
<div class="w-4 h-4 flex justify-center items-center">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.5547 0.16795C7.2188 -0.0559832 6.7812 -0.0559832 6.4453 0.16795L0.8906 3.87108C0.334202 4.24201 0 4.86648 0 5.53518V12C0 13.1046 0.895431 14 2 14H4C4.55228 14 5 13.5523 5 13V9H9V13C9 13.5523 9.44771 14 10 14H12C13.1046 14 14 13.1046 14 12V5.53518C14 4.86648 13.6658 4.24202 13.1094 3.87108L7.5547 0.16795Z"
fill="#5C5F62"
/>
</svg>
</div>
</a>
{#if $project}
<div class="ml-3">

2
src/routes/+layout.svelte
View File

@ -21,7 +21,7 @@
<div class="flex flex-col min-h-full max-h-full h-full bg-zinc-800 text-zinc-400">
<header
data-tauri-drag-region
class="flex flex-row items-center h-full max-h-8 border-b select-none text-zinc-400 border-zinc-700 bg-zinc-800 "
class="flex flex-row items-center border-b select-none pt-1 pb-1 text-zinc-400 border-zinc-700 bg-zinc-800 "
>
<div class="ml-24">
<BackForwardButtons />