gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-25 02:26:14 +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>
<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%)"
>
<div style="display: contents">%sveltekit.body%</div>

7
src/app.postcss
View File

@ -3,6 +3,10 @@
@tailwind components;
@tailwind utilities;
a {
@apply cursor-default;
}
/* SCROLL BAR STYLING */
/* width */
@ -52,8 +56,7 @@
@apply rounded-sm border border-[#3A393F] bg-[#343338] px-[3px] font-mono text-[11px] shadow;
}
/* Text Editor */
.token-attribute {
@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">
<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:cursor-pointer={canGoBack}
class:cursor-default={canGoBack}
on:click={onBackClicked}
disabled={!canGoBack}
title="Go back"
@ -69,7 +69,7 @@
</div>
</button>
<button
class="group rounded-md p-2"
class="group cursor-default rounded-md p-2"
title="Go forward"
class:hover:bg-zinc-700={canGoForward}
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">
<a
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="/"
>
<div class="flex h-4 w-4 items-center justify-center">
@ -37,7 +37,7 @@
{#if $project}
<div class="ml-1">
<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}
</a>
</div>

8
src/routes/+page.svelte
View File

@ -155,9 +155,9 @@
<div class="select-none p-8">
<div class="flex flex-col">
<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
<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.
</div>
</div>
@ -167,7 +167,7 @@
title="Track a new project"
on:click={onAddLocalRepositoryClick}
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
</button>
@ -178,7 +178,7 @@
<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 ">
{#each $projects as project}
<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}/"
>
<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">
<div
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 ">
<svg

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

@ -158,12 +158,16 @@
class="main-column-containercol-span-2 mt-4"
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>
</h1>
<div class="mt-4">
<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}
<div class="p-8 text-center text-zinc-400">Loading...</div>
{:else}
@ -203,7 +207,7 @@
{#each Object.entries(fileSessions) as filetime}
<div class="flex flex-row justify-between">
<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: '/' }} />
</a>
</div>
@ -227,8 +231,10 @@
<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>
<div class="w-100 mb-4 flex items-center justify-between">
<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">
<Tooltip label={$head}>
<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">
<svg
aria-hidden="true"
@ -261,7 +267,7 @@
<a
href="/projects/{$project?.id}/commit"
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
>
</div>
@ -308,7 +314,7 @@
<div
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="">
{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">
<input
type="checkbox"
class="cursor-pointer disabled:opacity-50"
class="cursor-default disabled:opacity-50"
on:click={onGroupCheckboxClick}
checked={$statuses.every(({ staged }) => staged)}
indeterminate={$statuses.some(({ staged }) => staged) &&
@ -134,10 +134,10 @@
class:bg-gb-700={$selectedDiffPath === path}
class:hover:bg-divider={$selectedDiffPath !== path}
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
class="ml-4 cursor-pointer py-2 disabled:opacity-50"
class="ml-4 cursor-default py-2 disabled:opacity-50"
disabled={isCommitting || isGeneratingCommitMessage}
on:click|preventDefault={() => {
staged
@ -158,7 +158,7 @@
disabled={isCommitting || isGeneratingCommitMessage}
on:click|preventDefault={() => ($selectedDiffPath = path)}
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: '/' }}
/>
</label>
@ -224,7 +224,7 @@
</form>
</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}
<DiffViewer diff={$selectedDiff} path={$selectedDiffPath} />
{:else}

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

@ -252,7 +252,7 @@
</span>
{#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
.map((d) => d[0])
.filter(unique)
@ -331,7 +331,7 @@
<div class="w-full">
<input
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}
step="1"
bind:value={$inputValue}
@ -399,7 +399,7 @@
<button class="checkbox-button">
<label
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
type="checkbox"

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

@ -193,7 +193,9 @@
<span>Updating...</span>
</div>
{: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
>
{/if}

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

@ -107,7 +107,7 @@
<button
title="Update profile"
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
>
{/if}