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

Refactor cursor and selection styles in components

Browse Source
This commit is contained in:
Ian Donahue 2023-03-30 15:17:48 +02:00
parent 3b598163db
commit e648849b6d
11 changed files with 41 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@ -7,7 +7,7 @@
</head> </head>
<body <body
class="h-full w-full font-sans text-base text-zinc-300 antialiased select-none cursor-default" class="h-full w-full cursor-default select-none font-sans text-base text-zinc-300 antialiased"
style="height: 100vh; background: linear-gradient(152.08deg, #27272a 17.75%, #19191f 99.04%)" style="height: 100vh; background: linear-gradient(152.08deg, #27272a 17.75%, #19191f 99.04%)"
> >
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>

5
src/app.postcss
View File

@ -3,6 +3,10 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
a {
@apply cursor-default;
}
/* SCROLL BAR STYLING */ /* SCROLL BAR STYLING */
/* width */ /* width */
@ -52,7 +56,6 @@
@apply rounded-sm border border-[#3A393F] bg-[#343338] px-[3px] font-mono text-[11px] shadow; @apply rounded-sm border border-[#3A393F] bg-[#343338] px-[3px] font-mono text-[11px] shadow;
} }
/* Text Editor */ /* Text Editor */
.token-attribute { .token-attribute {
@apply cursor-default select-none; @apply cursor-default select-none;

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

@ -43,9 +43,9 @@
<div class="flex items-center justify-center space-x-3 text-zinc-600"> <div class="flex items-center justify-center space-x-3 text-zinc-600">
<button <button
class="group rounded-md p-2 select-none" class="group cursor-default select-none rounded-md p-2"
class:hover:bg-zinc-700={canGoBack} class:hover:bg-zinc-700={canGoBack}
class:cursor-pointer={canGoBack} class:cursor-default={canGoBack}
on:click={onBackClicked} on:click={onBackClicked}
disabled={!canGoBack} disabled={!canGoBack}
title="Go back" title="Go back"
@ -69,7 +69,7 @@
</div> </div>
</button> </button>
<button <button
class="group rounded-md p-2" class="group cursor-default rounded-md p-2"
title="Go forward" title="Go forward"
class:hover:bg-zinc-700={canGoForward} class:hover:bg-zinc-700={canGoForward}
on:click={onForwardClicked} on:click={onForwardClicked}

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

@ -14,7 +14,7 @@
<div class="flex flex-row items-center text-zinc-400"> <div class="flex flex-row items-center text-zinc-400">
<a <a
Title="GitButler home" Title="GitButler home"
class="button-home group rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200 cursor-default" class="button-home group cursor-default rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200"
href="/" href="/"
> >
<div class="flex h-4 w-4 items-center justify-center"> <div class="flex h-4 w-4 items-center justify-center">
@ -37,7 +37,7 @@
{#if $project} {#if $project}
<div class="ml-1"> <div class="ml-1">
<div Title="Project" class="project-home-button flex rounded-md py-2 px-2 hover:bg-zinc-700"> <div Title="Project" class="project-home-button flex rounded-md py-2 px-2 hover:bg-zinc-700">
<a class="flex h-4 items-center cursor-default" href={`/projects/${$project.id}`}> <a class="flex h-4 cursor-default items-center" href={`/projects/${$project.id}`}>
{$project.title} {$project.title}
</a> </a>
</div> </div>

8
src/routes/+page.svelte
View File

@ -155,9 +155,9 @@
<div class="select-none p-8"> <div class="select-none p-8">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between">
<div class="mb-1 text-2xl text-zinc-300 select-none pointer-events-none"> <div class="pointer-events-none mb-1 select-none text-2xl text-zinc-300">
My Projects My Projects
<div class="mb-1 text-lg text-zinc-500 select-none pointer-events-none"> <div class="pointer-events-none mb-1 select-none text-lg text-zinc-500">
All the projects that I am currently assisting you with. All the projects that I am currently assisting you with.
</div> </div>
</div> </div>
@ -167,7 +167,7 @@
title="Track a new project" title="Track a new project"
on:click={onAddLocalRepositoryClick} on:click={onAddLocalRepositoryClick}
type="button" type="button"
class="add-new-project-button inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 select-none cursor-default" class="add-new-project-button inline-flex cursor-default select-none items-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
> >
Track a New Project Track a New Project
</button> </button>
@ -178,7 +178,7 @@
<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 "> <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 ">
{#each $projects as project} {#each $projects as project}
<a <a
class="project-card-container text-lg text-zinc-300 hover:text-zinc-200 cursor-default " class="project-card-container cursor-default text-lg text-zinc-300 hover:text-zinc-200 "
href="/projects/{project.id}/" href="/projects/{project.id}/"
> >
<div <div

2
src/routes/projects/[projectId]/+layout.svelte
View File

@ -86,7 +86,7 @@
<a href="/projects/{$project?.id}/settings" class="text-zinc-400 hover:text-zinc-300"> <a href="/projects/{$project?.id}/settings" class="text-zinc-400 hover:text-zinc-300">
<div <div
title="Project settings" title="Project settings"
class="project-settings-button rounded-md p-1 hover:bg-zinc-700 hover:text-zinc-200 cursor-default" class="project-settings-button cursor-default rounded-md p-1 hover:bg-zinc-700 hover:text-zinc-200"
> >
<div class="h-6 w-6 "> <div class="h-6 w-6 ">
<svg <svg

20
src/routes/projects/[projectId]/+page.svelte
View File

@ -158,12 +158,16 @@
class="main-column-containercol-span-2 mt-4" class="main-column-containercol-span-2 mt-4"
style="width: calc(100% * 0.66); height: calc(-126px + 100vh)" style="width: calc(100% * 0.66); height: calc(-126px + 100vh)"
> >
<h1 class="project-title flex py-4 px-8 text-xl text-zinc-300 select-none pointer-events-none"> <h1
class="project-title pointer-events-none flex select-none py-4 px-8 text-xl text-zinc-300"
>
{$project?.title} <span class="ml-2 text-zinc-600">Project</span> {$project?.title} <span class="ml-2 text-zinc-600">Project</span>
</h1> </h1>
<div class="mt-4"> <div class="mt-4">
<div class="recent-file-changes-container h-full w-full"> <div class="recent-file-changes-container h-full w-full">
<h2 class="mb-4 px-8 text-lg font-bold text-zinc-300 select-none pointer-events-none">Recently changed files</h2> <h2 class="pointer-events-none mb-4 select-none px-8 text-lg font-bold text-zinc-300">
Recently changed files
</h2>
{#if latestDeltasByDateByFile === undefined} {#if latestDeltasByDateByFile === undefined}
<div class="p-8 text-center text-zinc-400">Loading...</div> <div class="p-8 text-center text-zinc-400">Loading...</div>
{:else} {:else}
@ -203,7 +207,7 @@
{#each Object.entries(fileSessions) as filetime} {#each Object.entries(fileSessions) as filetime}
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between">
<div class="w-96 truncate font-mono text-zinc-300"> <div class="w-96 truncate font-mono text-zinc-300">
<a class="cursor-pointer" href={playerURL(dateMilliseconds, filetime[0])}> <a class="cursor-default" href={playerURL(dateMilliseconds, filetime[0])}>
<span use:collapsable={{ value: filetime[0], separator: '/' }} /> <span use:collapsable={{ value: filetime[0], separator: '/' }} />
</a> </a>
</div> </div>
@ -227,8 +231,10 @@
<div class="work-in-progress-container border-b border-zinc-700 py-4 px-4 "> <div class="work-in-progress-container border-b border-zinc-700 py-4 px-4 ">
<h2 class="mb-2 text-lg font-bold text-zinc-300">Work in Progress</h2> <h2 class="mb-2 text-lg font-bold text-zinc-300">Work in Progress</h2>
<div class="w-100 mb-4 flex items-center justify-between"> <div class="w-100 mb-4 flex items-center justify-between">
<Tooltip label="{$head}"> <Tooltip label={$head}>
<div class="button group flex max-w-[200px] justify-between rounded border border-zinc-600 bg-zinc-700 py-2 px-4 text-zinc-300 shadow select-text"> <div
class="button group flex max-w-[200px] select-text justify-between rounded border border-zinc-600 bg-zinc-700 py-2 px-4 text-zinc-300 shadow"
>
<div class="h-4 w-4"> <div class="h-4 w-4">
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -261,7 +267,7 @@
<a <a
href="/projects/{$project?.id}/commit" href="/projects/{$project?.id}/commit"
title="Commit changes" title="Commit changes"
class="btn-commit-changes button rounded bg-blue-600 py-2 px-3 text-white hover:bg-blue-700 cursor-default select-none" class="btn-commit-changes button cursor-default select-none rounded bg-blue-600 py-2 px-3 text-white hover:bg-blue-700"
>Commit changes</a >Commit changes</a
> >
</div> </div>
@ -308,7 +314,7 @@
<div <div
class="recent-activity-card mt-4 mb-1 rounded border border-zinc-700 text-zinc-400 drop-shadow-lg" class="recent-activity-card mt-4 mb-1 rounded border border-zinc-700 text-zinc-400 drop-shadow-lg"
> >
<div class="flex flex-col rounded bg-[#2F2F33] p-3 select-text"> <div class="flex select-text flex-col rounded bg-[#2F2F33] p-3">
<div class="flex flex-row justify-between pb-2 text-zinc-500"> <div class="flex flex-row justify-between pb-2 text-zinc-500">
<div class=""> <div class="">
{new Date(activity.timestampMs).toLocaleDateString('en-us', { {new Date(activity.timestampMs).toLocaleDateString('en-us', {

10
src/routes/projects/[projectId]/commit/+page.svelte
View File

@ -116,7 +116,7 @@
<header class="flex w-full items-center py-2 px-4"> <header class="flex w-full items-center py-2 px-4">
<input <input
type="checkbox" type="checkbox"
class="cursor-pointer disabled:opacity-50" class="cursor-default disabled:opacity-50"
on:click={onGroupCheckboxClick} on:click={onGroupCheckboxClick}
checked={$statuses.every(({ staged }) => staged)} checked={$statuses.every(({ staged }) => staged)}
indeterminate={$statuses.some(({ staged }) => staged) && indeterminate={$statuses.some(({ staged }) => staged) &&
@ -134,10 +134,10 @@
class:bg-gb-700={$selectedDiffPath === path} class:bg-gb-700={$selectedDiffPath === path}
class:hover:bg-divider={$selectedDiffPath !== path} class:hover:bg-divider={$selectedDiffPath !== path}
class:border-b={i < $statuses.length - 1} class:border-b={i < $statuses.length - 1}
class="flex items-center gap-2 border-gb-700 bg-card-default" class="file-changed-item flex cursor-text select-text items-center gap-2 border-gb-700 bg-card-default"
> >
<input <input
class="ml-4 cursor-pointer py-2 disabled:opacity-50" class="ml-4 cursor-default py-2 disabled:opacity-50"
disabled={isCommitting || isGeneratingCommitMessage} disabled={isCommitting || isGeneratingCommitMessage}
on:click|preventDefault={() => { on:click|preventDefault={() => {
staged staged
@ -158,7 +158,7 @@
disabled={isCommitting || isGeneratingCommitMessage} disabled={isCommitting || isGeneratingCommitMessage}
on:click|preventDefault={() => ($selectedDiffPath = path)} on:click|preventDefault={() => ($selectedDiffPath = path)}
type="button" type="button"
class="h-full w-full py-2 pr-4 text-left font-mono disabled:opacity-50" class="h-full w-full cursor-text select-auto py-2 pr-4 text-left font-mono disabled:opacity-50"
use:collapsable={{ value: path, separator: '/' }} use:collapsable={{ value: path, separator: '/' }}
/> />
</label> </label>
@ -224,7 +224,7 @@
</form> </form>
</div> </div>
<div id="preview" class="m-2 flex flex-auto overflow-auto select-text cursor-text"> <div id="preview" class="m-2 flex flex-auto cursor-text select-text overflow-auto">
{#if $selectedDiff !== undefined} {#if $selectedDiff !== undefined}
<DiffViewer diff={$selectedDiff} path={$selectedDiffPath} /> <DiffViewer diff={$selectedDiff} path={$selectedDiffPath} />
{:else} {:else}

6
src/routes/projects/[projectId]/player/[date]/[sessionId]/+page.svelte
View File

@ -252,7 +252,7 @@
</span> </span>
{#if isCurrent} {#if isCurrent}
<ul class="list-disk bg-zinc-800 p-2 rounded-bl rounded-br" style:list-style="disc"> <ul class="list-disk rounded-bl rounded-br bg-zinc-800 p-2" style:list-style="disc">
{#each session.deltas {#each session.deltas
.map((d) => d[0]) .map((d) => d[0])
.filter(unique) .filter(unique)
@ -331,7 +331,7 @@
<div class="w-full"> <div class="w-full">
<input <input
type="range" type="range"
class="-mt-3 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-transparent" class="-mt-3 w-full cursor-default appearance-none rounded-lg border-transparent bg-transparent"
max={$maxInput} max={$maxInput}
step="1" step="1"
bind:value={$inputValue} bind:value={$inputValue}
@ -399,7 +399,7 @@
<button class="checkbox-button"> <button class="checkbox-button">
<label <label
for="full-context-checkbox" for="full-context-checkbox"
class="group block cursor-pointer rounded transition-colors duration-200 ease-in-out hover:bg-zinc-700 " class="group block cursor-default rounded transition-colors duration-200 ease-in-out hover:bg-zinc-700 "
> >
<input <input
type="checkbox" type="checkbox"

4
src/routes/projects/[projectId]/settings/+page.svelte
View File

@ -193,7 +193,9 @@
<span>Updating...</span> <span>Updating...</span>
</div> </div>
{:else} {:else}
<button type="submit" class="rounded bg-blue-600 py-2 px-3 text-white cursor-default hover:bg-blue-700" <button
type="submit"
class="cursor-default rounded bg-blue-600 py-2 px-3 text-white hover:bg-blue-700"
>Update profile</button >Update profile</button
> >
{/if} {/if}

2
src/routes/users/+page.svelte
View File

@ -107,7 +107,7 @@
<button <button
title="Update profile" title="Update profile"
type="submit" type="submit"
class="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none cursor-default" class="cursor-default rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none"
>Update profile</button >Update profile</button
> >
{/if} {/if}