mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-09-11 12:25:42 +03:00
I broke everything!
Trying to add a rewind icon but I broke everything
This commit is contained in:
parent
c5d124a98e
commit
0e16fcbe5e
@ -8,3 +8,7 @@
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-webkit-perspective: 1000;
|
||||
}
|
||||
|
||||
.quick-command-key {
|
||||
@apply shadow bg-[#343338] font-mono px-[3px] rounded-sm border border-[#3A393F] text-[11px];
|
||||
}
|
||||
|
@ -13,6 +13,7 @@
|
||||
import Commit from './Commit.svelte';
|
||||
import { invoke } from '@tauri-apps/api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { RewindIcon } from '$lib/components/icons';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
@ -90,6 +91,7 @@
|
||||
action: {
|
||||
component: Commit
|
||||
},
|
||||
icon: RewindIcon,
|
||||
visible: 'commit'.includes(userInput?.toLowerCase())
|
||||
},
|
||||
{
|
||||
@ -99,6 +101,7 @@
|
||||
action: {
|
||||
component: Replay
|
||||
},
|
||||
icon: 'RewindIcon',
|
||||
visible: 'replay history'.includes(userInput?.toLowerCase())
|
||||
}
|
||||
]
|
||||
@ -170,9 +173,9 @@
|
||||
|
||||
<Modal on:close>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="flex h-[640px] w-[640px] flex-col rounded text-zinc-400" on:click|stopPropagation>
|
||||
<div class="commnand-pallete flex h-[640px] w-[640px] flex-col rounded text-zinc-400" on:click|stopPropagation>
|
||||
<!-- Search input area -->
|
||||
<div class="flex items-center border-b border-zinc-400/20 py-2">
|
||||
<div class="search-input flex items-center border-b border-zinc-400/20 py-2">
|
||||
<div class="ml-4 mr-2 flex flex-grow items-center">
|
||||
<!-- Project scope -->
|
||||
{#if scopeToProject}
|
||||
@ -198,17 +201,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main part -->
|
||||
<div class="flex-auto overflow-y-auto">
|
||||
<div class="search-results h-[640px] flex-auto overflow-y-auto">
|
||||
{#each commandGroups as group, groupIdx}
|
||||
{#if group.visible}
|
||||
<div class="mx-2 cursor-default select-none">
|
||||
<p class="mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300/80">
|
||||
<p class="result-section-header mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300">
|
||||
<span>{group.name}</span>
|
||||
{#if group.description}
|
||||
<span class="ml-2 font-light italic text-zinc-300/60">({group.description})</span>
|
||||
<span class="ml-2 font-light italic text-zinc-300/70">({group.description})</span>
|
||||
{/if}
|
||||
</p>
|
||||
<ul class="">
|
||||
<ul class="section-list text-zinc-300">
|
||||
{#each group.commands as command, commandIdx}
|
||||
{#if command.visible}
|
||||
{#if Action.isLink(command.action)}
|
||||
@ -221,8 +224,8 @@
|
||||
? 'bg-zinc-700/70'
|
||||
: ''} flex cursor-default items-center rounded-lg p-2 px-2 outline-none"
|
||||
>
|
||||
<span class="flex-grow">{command.title}</span>
|
||||
<span>{command.description}</span>
|
||||
<span class="quick-command flex-grow">{command.title}</span>
|
||||
<span class="quick-command-key">{command.description}</span>
|
||||
</a>
|
||||
{:else if Action.isActionInPalette(command.action)}
|
||||
<div
|
||||
@ -230,11 +233,14 @@
|
||||
on:focus={() => (selection = [groupIdx, commandIdx])}
|
||||
on:click={triggerCommand}
|
||||
class="{selection[0] === groupIdx && selection[1] === commandIdx
|
||||
? 'bg-zinc-700/70'
|
||||
: ''} flex cursor-default items-center rounded-lg p-2 px-2 outline-none"
|
||||
? 'bg-zinc-50/10'
|
||||
: ''} flex cursor-default items-center rounded-lg p-2 px-2 outline-none gap-2"
|
||||
>
|
||||
<span class="flex-grow">{command.title}</span>
|
||||
<span>{command.description}</span>
|
||||
<span class="quick-command-icon">
|
||||
{command.icon}
|
||||
</span>
|
||||
<span class="quick-command flex-grow">{command.title}</span>
|
||||
<span class="quick-command-key ">{command.description}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
@ -80,7 +80,7 @@
|
||||
|
||||
<Modal on:close>
|
||||
<div class="mx-2 cursor-default select-none">
|
||||
<p class="mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300/80">
|
||||
<p class="mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300">
|
||||
Replay working history from...
|
||||
</p>
|
||||
|
||||
|
@ -22,6 +22,7 @@ export type CommandGroup = {
|
||||
description?: string;
|
||||
visible: boolean;
|
||||
commands: Command[];
|
||||
icon: ComponentType;
|
||||
};
|
||||
|
||||
export const firstVisibleCommand = (commandGroups: CommandGroup[]): [number, number] => {
|
||||
|
21
src/lib/components/icons/RewindIcon.svelte
Normal file
21
src/lib/components/icons/RewindIcon.svelte
Normal file
@ -0,0 +1,21 @@
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M4.35744 9.90001L8.9 13.6467L8.9 6.15336L4.35744 9.90001ZM2.93534 9.12855C2.45039 9.52854 2.45039 10.2715 2.93534 10.6715L8.76372 15.4786C9.41596 16.0166 10.4 15.5526 10.4 14.7072L10.4 5.09284C10.4 4.24738 9.41595 3.78343 8.76371 4.32139L2.93534 9.12855Z"
|
||||
fill="#71717A"/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.1633 9.89999L15.7 13.3032L15.7 6.49683L12.1633 9.89999ZM10.7488 9.17942C10.34 9.57282 10.34 10.2272 10.7488 10.6206L15.5066 15.1987C16.1419 15.8101 17.2 15.3598 17.2 14.4782L17.2 5.32182C17.2 4.44016 16.1419 3.98992 15.5066 4.60124L10.7488 9.17942Z"
|
||||
fill="#71717A"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 803 B |
@ -6,6 +6,7 @@ export { default as FileIcon } from './FileIcon.svelte';
|
||||
export { default as FolderIcon } from './FolderIcon.svelte';
|
||||
export { default as LabelIcon } from './LabelIcon.svelte';
|
||||
export { default as ProjectIcon } from './ProjectIcon.svelte';
|
||||
export { default as RewindIcon } from './RewindIcon.svelte';
|
||||
export { default as IconRotateClockwise } from './IconRotateClockwise.svelte';
|
||||
export { default as IconPlayerPauseFilled } from './IconPlayerPauseFilled.svelte';
|
||||
export { default as IconPlayerPlayFilled } from './IconPlayerPlayFilled.svelte';
|
||||
|
Loading…
Reference in New Issue
Block a user