mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-01 04:14:45 +03:00
add quick change project to palette
This commit is contained in:
Scott Chacon
parent
0aca2e8400
commit
558bb72b20
@ -5,10 +5,12 @@
|
||||
import BookmarkIcon from './icons/BookmarkIcon.svelte';
|
||||
import BranchIcon from './icons/BranchIcon.svelte';
|
||||
import ContactIcon from './icons/ContactIcon.svelte';
|
||||
import ProjectIcon from './icons/ProjectIcon.svelte';
|
||||
import { invoke } from '@tauri-apps/api';
|
||||
import { goto } from '$app/navigation';
|
||||
import { shortPath } from '$lib/paths';
|
||||
import { currentProject } from '$lib/current_project';
|
||||
import type { Project } from '$lib/projects';
|
||||
|
||||
let showCommand = false;
|
||||
let showCommit = false;
|
||||
@ -16,6 +18,7 @@
|
||||
let is_command_down = false;
|
||||
let is_k_down = false;
|
||||
let is_c_down = false;
|
||||
let is_e_down = false;
|
||||
|
||||
let palette: HTMLElement;
|
||||
let commitPalette: HTMLElement;
|
||||
@ -30,6 +33,8 @@
|
||||
const matchFiles = (params: { projectId: string; matchPattern: string }) =>
|
||||
invoke<Array<string>>('git_match_paths', params);
|
||||
|
||||
const listProjects = () => invoke<Project[]>('list_projects');
|
||||
|
||||
const commit = (params: {
|
||||
projectId: string;
|
||||
message: string;
|
||||
@ -50,6 +55,9 @@
|
||||
case 'c':
|
||||
is_c_down = true;
|
||||
break;
|
||||
case 'e':
|
||||
is_e_down = true;
|
||||
break;
|
||||
case 'Escape':
|
||||
showCommand = false;
|
||||
showCommit = false;
|
||||
@ -83,6 +91,9 @@
|
||||
showCommit = true;
|
||||
executeCommand('commit');
|
||||
}
|
||||
if (is_command_down && is_e_down) {
|
||||
executeCommand('contact');
|
||||
}
|
||||
}
|
||||
|
||||
function onKeyUp(event: KeyboardEvent) {
|
||||
@ -99,6 +110,10 @@
|
||||
is_c_down = false;
|
||||
event.preventDefault();
|
||||
break;
|
||||
case 'e':
|
||||
is_e_down = false;
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -117,7 +132,7 @@
|
||||
function upMenu() {
|
||||
const menu = document.getElementById('commandMenu');
|
||||
if (menu) {
|
||||
const items = menu.querySelectorAll('li');
|
||||
const items = menu.querySelectorAll('li.item');
|
||||
const active = menu.querySelector('li.active');
|
||||
if (active) {
|
||||
const index = Array.from(items).indexOf(active);
|
||||
@ -132,14 +147,10 @@
|
||||
}
|
||||
|
||||
function downMenu() {
|
||||
console.log('DOWN');
|
||||
const menu = document.getElementById('commandMenu');
|
||||
console.log('menu', menu);
|
||||
if (menu) {
|
||||
const items = menu.querySelectorAll('li');
|
||||
console.log('items', items);
|
||||
const items = menu.querySelectorAll('li.item');
|
||||
const active = menu.querySelector('li.active');
|
||||
console.log('active', active);
|
||||
if (active) {
|
||||
const index = Array.from(items).indexOf(active);
|
||||
if (index < items.length - 1) {
|
||||
@ -160,10 +171,10 @@
|
||||
const active = menu.querySelector('li.active');
|
||||
if (active) {
|
||||
const command = active.getAttribute('data-command');
|
||||
const context = active.getAttribute('data-context');
|
||||
if (command) {
|
||||
executeCommand(command);
|
||||
executeCommand(command, context);
|
||||
}
|
||||
console.log('active', active);
|
||||
} else {
|
||||
if ($currentProject) {
|
||||
goto('/projects/' + $currentProject.id + '/search?search=' + search);
|
||||
@ -172,7 +183,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
function executeCommand(command: string) {
|
||||
function executeCommand(command: string, context?: string | null) {
|
||||
switch (command) {
|
||||
case 'commit':
|
||||
if ($currentProject) {
|
||||
@ -190,6 +201,10 @@
|
||||
console.log('contact us');
|
||||
goto('/contact');
|
||||
break;
|
||||
case 'switch':
|
||||
console.log('switch', command, context);
|
||||
goto('/projects/' + context);
|
||||
break;
|
||||
case 'bookmark':
|
||||
break;
|
||||
case 'branch':
|
||||
@ -209,14 +224,34 @@
|
||||
{ text: 'Branch', key: 'R', icon: BranchIcon, command: 'branch' }
|
||||
];
|
||||
|
||||
let baseCommands = [{ text: 'Contact Us', key: 'H', icon: ContactIcon, command: 'contact' }];
|
||||
let switchCommands = [];
|
||||
$: if ($currentProject) {
|
||||
listProjects().then((projects) => {
|
||||
switchCommands = [];
|
||||
projects.forEach((p) => {
|
||||
if (p.id !== $currentProject?.id) {
|
||||
switchCommands.push({
|
||||
text: p.title,
|
||||
icon: ProjectIcon,
|
||||
command: 'switch',
|
||||
context: p.id
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
let baseCommands = [{ text: 'Contact Us', key: 'E', icon: ContactIcon, command: 'contact' }];
|
||||
|
||||
function commandList() {
|
||||
let commands = [];
|
||||
let divider = [{ type: 'divider' }];
|
||||
if ($currentProject) {
|
||||
commands = projectCommands;
|
||||
commands = projectCommands.concat(divider).concat(switchCommands);
|
||||
} else {
|
||||
commands = switchCommands;
|
||||
}
|
||||
commands = commands.concat(baseCommands);
|
||||
commands = commands.concat(divider).concat(baseCommands);
|
||||
return commands;
|
||||
}
|
||||
|
||||
@ -330,25 +365,30 @@
|
||||
<li class="p-1">
|
||||
<ul id="commandMenu" class="text-sm text-zinc-400">
|
||||
{#each menuItems as item}
|
||||
<!-- Active: "bg-zinc-800 text-white" -->
|
||||
<li
|
||||
class="group flex cursor-default select-none items-center rounded-md px-3 py-2"
|
||||
on:click={() => {
|
||||
executeCommand(item.command);
|
||||
}}
|
||||
data-command={item.command}
|
||||
>
|
||||
<!-- Active: "text-white", Not Active: "text-zinc-500" -->
|
||||
<svelte:component this={item.icon} />
|
||||
<span class="ml-3 flex-auto truncate">{item.text}</span>
|
||||
{#if item.key}
|
||||
<span
|
||||
class="ml-3 flex-none text-xs font-semibold text-zinc-400 px-1 py-1 bg-zinc-800 border-b border-black rounded"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd><kbd class="font-sans">{item.key}</kbd>
|
||||
</span>
|
||||
{/if}
|
||||
</li>
|
||||
{#if item.type == 'divider'}
|
||||
<li class="border-t border-zinc-500 border-opacity-20 my-2" />
|
||||
{:else}
|
||||
<!-- Active: "bg-zinc-800 text-white" -->
|
||||
<li
|
||||
class="item group flex cursor-default select-none items-center rounded-md px-3 py-2"
|
||||
on:click={() => {
|
||||
executeCommand(item.command);
|
||||
}}
|
||||
data-command={item.command}
|
||||
data-context={item.context}
|
||||
>
|
||||
<!-- Active: "text-white", Not Active: "text-zinc-500" -->
|
||||
<svelte:component this={item.icon} />
|
||||
<span class="ml-3 flex-auto truncate">{item.text}</span>
|
||||
{#if item.key}
|
||||
<span
|
||||
class="ml-3 flex-none text-xs font-semibold text-zinc-400 px-1 py-1 bg-zinc-800 border-b border-black rounded"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd><kbd class="font-sans">{item.key}</kbd>
|
||||
</span>
|
||||
{/if}
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
14
src/lib/components/icons/ProjectIcon.svelte
Normal file
14
src/lib/components/icons/ProjectIcon.svelte
Normal file
@ -0,0 +1,14 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 460 B |
@ -119,7 +119,7 @@
|
||||
<div class="recent-file-changes-container w-full h-full">
|
||||
<h2 class="mb-4 px-8 text-lg font-bold text-zinc-300">Recent File Changes</h2>
|
||||
{#if $dateSessions === undefined}
|
||||
<span>Loading...</span>
|
||||
<div class="p-8 text-zinc-400 text-center">Loading...</div>
|
||||
{:else}
|
||||
<div
|
||||
class="flex flex-col space-y-4 overflow-y-auto px-8 pb-8"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user