mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-02 07:53:55 +03:00
use buttons for the nav header
This commit is contained in:
Nikita Galaiko
parent
25f084d711
commit
6c49f5c6d2
@ -1,6 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { afterNavigate, goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { Button } from '$lib/components';
|
||||
import { IconArrowLeft, IconArrowRight } from './icons';
|
||||
|
||||
const getUri = (url: URL) => url.pathname + url.search + url.hash;
|
||||
|
||||
@ -42,55 +44,11 @@
|
||||
</script>
|
||||
|
||||
<div class="flex items-center justify-center space-x-3 text-zinc-600">
|
||||
<button
|
||||
class="group cursor-default select-none rounded-md p-2"
|
||||
class:hover:bg-zinc-700={canGoBack}
|
||||
class:cursor-default={canGoBack}
|
||||
on:click={onBackClicked}
|
||||
disabled={!canGoBack}
|
||||
title="Go back"
|
||||
>
|
||||
<div class="flex h-4 w-4 items-center justify-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"
|
||||
class:fill-zinc-300={canGoBack}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="group cursor-default rounded-md p-2"
|
||||
title="Go forward"
|
||||
class:hover:bg-zinc-700={canGoForward}
|
||||
<Button filled={false} on:click={onBackClicked} disabled={!canGoBack} icon={IconArrowLeft} />
|
||||
<Button
|
||||
filled={false}
|
||||
on:click={onForwardClicked}
|
||||
icon={IconArrowRight}
|
||||
disabled={!canGoForward}
|
||||
>
|
||||
<div class="flex h-4 w-4 items-center justify-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"
|
||||
class:fill-zinc-300={canGoForward}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -2,32 +2,24 @@
|
||||
import type { Project } from '$lib/api';
|
||||
import type { Readable } from 'svelte/store';
|
||||
import { IconHome } from './icons';
|
||||
import { Tooltip } from '$lib/components';
|
||||
import { Tooltip, Button } from '$lib/components';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let project: Readable<Project | undefined>;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-row items-center text-zinc-400">
|
||||
<a
|
||||
Title="GitButler home"
|
||||
class="button-home group cursor-default rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200"
|
||||
href="/"
|
||||
>
|
||||
<IconHome class="hover:fill-zinc-300 hover:text-zinc-200" />
|
||||
</a>
|
||||
<div class="flex flex-row items-center gap-1 text-zinc-400">
|
||||
<Button icon={IconHome} filled={false} height="small" on:click={() => goto('/')} />
|
||||
|
||||
{#if $project}
|
||||
<div class="ml-1">
|
||||
<Tooltip label="{$project.title} home">
|
||||
<a
|
||||
class="project-home-button group flex rounded-md py-2 px-2 hover:bg-zinc-700"
|
||||
href={`/projects/${$project.id}`}
|
||||
>
|
||||
<span class="flex h-4 items-center group-hover:text-zinc-200">
|
||||
{$project.title}
|
||||
</span>
|
||||
</a>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Tooltip label="{$project.title} home">
|
||||
<Button
|
||||
filled={false}
|
||||
height="small"
|
||||
on:click={() => $project && goto(`/projects/${$project.id}`)}
|
||||
>
|
||||
{$project.title}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
|
||||
<style lang="postcss">
|
||||
button {
|
||||
@apply relative flex w-fit cursor-pointer items-center justify-center gap-[10px] whitespace-nowrap rounded py-2 text-base font-medium transition transition duration-150 ease-in-out ease-out hover:ease-in;
|
||||
@apply relative flex h-[36px] w-fit cursor-pointer items-center justify-center gap-[10px] whitespace-nowrap rounded py-2 text-base font-medium transition transition duration-150 ease-in-out ease-out hover:ease-in;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
@ -80,12 +80,6 @@
|
||||
@apply bg-zinc-600;
|
||||
}
|
||||
|
||||
.basic,
|
||||
.primary,
|
||||
.destructive {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.primary {
|
||||
@apply text-blue-500;
|
||||
}
|
||||
|
||||
20
src/lib/components/icons/IconArrowLeft.svelte
Normal file
20
src/lib/components/icons/IconArrowLeft.svelte
Normal file
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
let className = '';
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={className}
|
||||
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="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
20
src/lib/components/icons/IconArrowRight.svelte
Normal file
20
src/lib/components/icons/IconArrowRight.svelte
Normal file
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
let className = '';
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={className}
|
||||
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="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
@ -17,3 +17,5 @@ export { default as IconDiscord } from './IconDiscord.svelte';
|
||||
export { default as IconExternalLink } from './IconExternalLink.svelte';
|
||||
export { default as IconFeedback } from './IconFeedback.svelte';
|
||||
export { default as IconSearch } from './IconSearch.svelte';
|
||||
export { default as IconArrowLeft } from './IconArrowLeft.svelte';
|
||||
export { default as IconArrowRight } from './IconArrowRight.svelte';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user