gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-24 05:29:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #68 from gitbutlerapp/ian/testing-button-component

Browse Source 
Button component improvements
This commit is contained in:
Ian Donahue 2023-03-28 12:48:45 +02:00 committed by GitHub
commit ff21137cd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 88 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.storybook/preview.ts
View File

@ -12,12 +12,12 @@ const preview: Preview = {
backgrounds: {
default: 'GitButler_1',
values: [
{
name: 'GitButler_1',
value: '#27272A',
},
],
},
{
name: 'GitButler_1',
value: '#27272A'
}
]
}
}
};

32
src/app.postcss
View File

@ -3,12 +3,44 @@
@tailwind components;
@tailwind utilities;
/* this is trick to make webkit use hardware acceleration */
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
-webkit-perspective: 1000;
}
/* SCROLL BAR STYLING */
/* width */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* Track */
::-webkit-scrollbar-track {
border-radius: 2px;
}
/* Handle */
::-webkit-scrollbar-thumb {
/* background: #44444A; */
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #6E6E78;
}
.scrollbar-hidden::-webkit-scrollbar {
-webkit-appearance: none;
width: 0;
height: 0;
}
/* COMMAND PALETTE */
.result-section-header {

56
src/lib/components/Button.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
export let primary = false;
export let filled = false;
export let filled = true;
export let small = false;
export let label: string;
</script>
@ -39,37 +39,63 @@ And the following optional props:
type="button"
on:click
>
<span class="overflow-hidden text-ellipsis">{label}</span>
{label}
</button>
<style>
.base {
@apply flex items-center justify-center rounded text-base text-white;
}
.base:hover {
/* @apply bg-gray-100; */
@apply flex items-center justify-center rounded text-base text-zinc-50 shadow transition ease-in-out;
}
.base:disabled {
@apply opacity-40;
}
.primary-nofill {
border: 1px solid #3662e3;
}
/* Primary */
.primary-filled {
border: 1px solid #3662e3;
background: #3662e3;
}
.default-nofill {
background: #71717a;
.primary-filled:hover {
border: 1px solid #1c48c9;
background: #1c48c9;
@apply transition ease-in-out;
}
.primary-nofill {
background: rgba(28, 72, 201, 0);
border: 1px solid #3662e3;
@apply transition ease-in-out;
}
.primary-nofill:hover {
background: rgba(28, 72, 201, 0.3);
border: 1px solid #3662e3;
@apply transition ease-in-out;
}
/* Default */
.default-filled {
border: 1px solid #71717a;
background: #71717a;
@apply transition ease-in-out;
}
.default-filled:hover {
@apply border-zinc-600 bg-zinc-600;
}
.default-nofill {
background: rgba(113, 113, 122, 0);
border: 1px solid #71717a;
@apply transition ease-in-out;
}
.default-nofill:hover {
background: rgba(113, 113, 122, 0.4);
border: 1px solid #71717a;
@apply transition ease-in-out;
}
/* Size */
.size-normal {
width: 66px;
height: 36px;
@apply px-4 py-2;
}
.size-small {
width: 66px;
height: 24px;
@apply px-2 py-1;
}
</style>

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

@ -200,20 +200,23 @@
<a href="#" class="text-yellow-200" on:click={toggleAllOn}>all</a>
<a href="#" class="text-yellow-200" on:click={toggleAllOff}>none</a>
</div>
<ul class="w-80 truncate px-2 pb-2">
<ul class="truncate px-2 pb-2">
{#each $filesStatus as activity}
<li class="list-none text-zinc-300">
<div class="flex flex-row space-x-2">
<div class="flex flex-row align-middle">
<input
type="checkbox"
on:click={showMessage}
bind:group={filesSelectedForCommit}
value={activity.path}
class="mr-2 mt-1 w-4"
/>
<div>{activity.status.slice(0, 1)}</div>
<div class="w-4">{activity.status.slice(0, 1)}</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="cursor-pointer {currentPath == activity.path ? 'text-white' : ''}"
class="w-[100%] cursor-pointer truncate {currentPath == activity.path
? 'text-white'
: ''}"
on:click={selectPath(activity.path)}
use:collapsable={{ value: activity.path, separator: '/' }}
/>
@ -231,14 +234,14 @@
name="subject"
bind:value={commitSubject}
placeholder={placeholderSubject}
class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-3 sm:text-sm sm:leading-4"
/>
<textarea
rows={messageRows}
name="message"
placeholder={placeholderMessage}
bind:value={commitMessage}
class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
class="mb-2 block w-full rounded-md border-zinc-600 bg-zinc-700 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-3 sm:text-sm sm:leading-4"
/>
</div>