Skip to content

Commit

Permalink
UI fixes (#6282)
Browse files Browse the repository at this point in the history 
* remove unnecessary css

* fix wrong css nesting

* Change "patch" to "commit"

* remove bottom border if it's a first message

* remove unused variables

* switch between resolve/approve

* don't render avatars if length is 0

* remove unused css

* fix avatars layout

* made branch info side wider
  • Loading branch information
@PavelLaptev
PavelLaptev authored Feb 7, 2025
1 parent 6bf8ebf commit 16df0eb
Show file tree
Hide file tree
Showing 12 changed files with 324 additions and 153 deletions.
4 changes: 2 additions & 2 deletions apps/web/src/lib/components/Navigation.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,8 +177,8 @@
padding: 0;
}
:global(.navigation .user-btn, .label) {
padding: 0 1px;
:global(.navigation .user-btn .label) {
padding: 0 3px;
}
.user-btn {
Expand Down
3 changes: 0 additions & 3 deletions apps/web/src/lib/components/branches/BranchIndexCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,6 @@
</Loading>

<style lang="postcss">
.title {
font-weight: bold;
}
.uuid {
font-size: 0.8em;
color: var(--clr-text-2);
Expand Down
38 changes: 8 additions & 30 deletions apps/web/src/lib/components/chat/Message.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<img class="chat-message__avatar-small" src={message.user.avatarUrl} alt={authorName} />
{/if}

<div class="chat-message__author-name">
<div class="text-13 text-bold chat-message__author-name">
{authorName}
</div>

Expand All @@ -60,13 +60,13 @@
{/if}
{/if}

<div class="chat-message__timestamp" title={event.createdAt}>
<div class="text-12 chat-message__timestamp" title={event.createdAt}>
{timestamp}
</div>
</div>

<div class="chat-message-content">
<div class="chat-message__content-text">
<div class="text-13 text-body chat-message__content-text">
<MessageMarkdown content={message.comment} mentions={message.mentions} />
</div>

Expand Down Expand Up @@ -128,8 +128,8 @@
color: var(--clr-br-commit-changes-requested-text);
&.resolved {
background: var(--clr-core-ntrl-60, #b4afac);
color: var(--clr-core-ntrl-100, #d4d0ce);
background: var(--clr-core-ntrl-60);
color: var(--clr-core-ntrl-100);
}
}
Expand Down Expand Up @@ -159,30 +159,15 @@
.chat-message__timestamp {
overflow: hidden;
color: var(--clr-text-1, #1a1614);
color: var(--clr-text-1);
text-overflow: ellipsis;
/* base/12 */
font-family: var(--text-fontfamily-default, Inter);
font-size: 12px;
font-style: normal;
font-weight: var(--text-weight-regular, 400);
line-height: 120%; /* 14.4px */
opacity: 0.4;
}
.chat-message__author-name {
overflow: hidden;
color: var(--text-1, #1a1614);
color: var(--clr-text-1);
text-overflow: ellipsis;
/* base/13-bold */
font-family: var(--text-fontfamily-default, Inter);
font-size: 13px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 15.6px */
}
.chat-message-content {
Expand All @@ -194,13 +179,6 @@
}
.chat-message__content-text {
color: var(--text-1, #1a1614);
/* base-body/13 */
font-family: var(--text-fontfamily-default, Inter);
font-size: 13px;
font-style: normal;
font-weight: var(--text-weight-regular, 400);
line-height: 160%; /* 20.8px */
color: var(--clr-text-1);
}
</style>
54 changes: 15 additions & 39 deletions apps/web/src/lib/components/chat/PatchStatus.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@
{#if event.user}
<img class="patch-status__avatar" src={event.user.avatarUrl} alt={userName} />
{/if}
<p class="patch-status__name">{userName}</p>
<p class="patch-status__message">{statusAction} this commit</p>
<div class="patch-status__timestamp" title={event.createdAt}>{timestamp}</div>
<p class="text-13 text-bold patch-status__name">{userName}</p>
<p class="text-12 patch-status__message">{statusAction} this commit</p>
<div class="text-12 patch-status__timestamp" title={event.createdAt}>{timestamp}</div>
</div>

{#if event.data.message}
<p class="patch-status__text-content">{event.data.message}</p>
<p class="text-13 text-body patch-status__text-content">{event.data.message}</p>
{/if}
</div>
</div>
Expand All @@ -46,9 +46,13 @@
padding-left: 10px;
gap: 12px;
border-left: 4px solid var(--clr-theme-succ-element, #4ab582);
border-bottom: 1px solid var(--clr-border-3, #eae9e8);
background: var(--clr-theme-succ-bg, #f6fcfb);
border-left: 4px solid var(--clr-theme-succ-element);
border-bottom: 1px solid var(--clr-border-3);
background: var(--clr-theme-succ-bg);
&:first-child {
border-bottom: none;
}
&.request-changes {
border-left-color: var(--clr-br-commit-changes-requested-bg);
Expand Down Expand Up @@ -95,53 +99,25 @@
.patch-status__name {
overflow: hidden;
color: var(--clr-text-1, #1a1614);
color: var(--clr-text-1);
text-overflow: ellipsis;
/* base/13-bold */
font-family: var(--text-fontfamily-default, Inter);
font-size: 13px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 15.6px */
}
.patch-status__message {
overflow: hidden;
color: var(--clr-text-1, #1a1614);
color: var(--clr-text-1);
text-overflow: ellipsis;
/* base/12 */
font-family: var(--text-fontfamily-default, Inter);
font-size: 12px;
font-style: normal;
font-weight: var(--text-weight-regular, 400);
line-height: 120%; /* 14.4px */
}
.patch-status__timestamp {
overflow: hidden;
color: var(--clr-text-1, #1a1614);
color: var(--clr-text-1);
text-overflow: ellipsis;
/* base/12 */
font-family: var(--text-fontfamily-default, Inter);
font-size: 12px;
font-style: normal;
font-weight: var(--text-weight-regular, 400);
line-height: 120%; /* 14.4px */
opacity: 0.4;
}
.patch-status__text-content {
color: var(--clr-text-1, #1a1614);
/* base-body/13 */
font-family: var(--text-fontfamily-default, Inter);
font-size: 13px;
font-style: normal;
font-weight: var(--text-weight-regular, 400);
line-height: 160%; /* 20.8px */
color: var(--clr-text-1);
}
</style>
155 changes: 126 additions & 29 deletions apps/web/src/lib/components/review/ChangeActionButton.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<script lang="ts">
import { UserService } from '$lib/user/userService';
import { PatchService } from '@gitbutler/shared/branches/patchService';
import { type Patch } from '@gitbutler/shared/branches/types';
import { getContext } from '@gitbutler/shared/context';
import Button from '@gitbutler/ui/Button.svelte';
import ContextMenuItem from '@gitbutler/ui/ContextMenuItem.svelte';
import ContextMenuSection from '@gitbutler/ui/ContextMenuSection.svelte';
import DropDownButton from '@gitbutler/ui/DropDownButton.svelte';
import type { Patch } from '@gitbutler/shared/branches/types';
interface Props {
branchUuid: string;
Expand All @@ -17,10 +19,24 @@
} as const;
type Action = keyof typeof actionLabels;
type UserActionType = 'requested-changes' | 'approved' | 'not-reviewed';
const { patch, branchUuid }: Props = $props();
const patchService = getContext(PatchService);
const userService = getContext(UserService);
const user = userService.user;
const userAction = $derived.by<UserActionType>(() => {
if (!$user) return 'not-reviewed';
if (patch.reviewAll.rejected.some((rejector) => rejector.id === $user.id)) {
return 'requested-changes';
} else if (patch.reviewAll.signedOff.some((approver) => approver.id === $user.id)) {
return 'approved';
}
return 'not-reviewed';
});
let action = $state<Action>('approve');
let isExecuting = $state(false);
Expand Down Expand Up @@ -55,6 +71,7 @@
async function handleClick() {
if (isExecuting) return;
isExecuting = true;
try {
switch (action) {
case 'approve':
Expand All @@ -68,33 +85,113 @@
isExecuting = false;
}
}
function handleRequestChanges() {
action = 'requestChanges';
handleClick();
}
function handleApprove() {
action = 'approve';
handleClick();
}
$effect(() => {
console.log('userAction', userAction);
});
</script>

<DropDownButton
bind:this={dropDownButton}
loading={isExecuting}
menuPosition="top"
{icon}
style={buttonColor}
onclick={handleClick}
>
{actionLabels[action]}
{#snippet contextMenuSlot()}
<ContextMenuSection>
<ContextMenuItem
label={actionLabels.approve}
onclick={() => {
action = 'approve';
dropDownButton?.close();
}}
/>
<ContextMenuItem
label={actionLabels.requestChanges}
onclick={() => {
action = 'requestChanges';
dropDownButton?.close();
}}
/>
</ContextMenuSection>
{/snippet}
</DropDownButton>
{#if userAction === 'approved'}
<div class="my-status-wrap">
<div class="user-status-label approved">
<span class="text-12">You approved this</span>
</div>
<Button
loading={isExecuting}
icon="undo-small"
style="warning"
class="my-status-btn"
onclick={handleRequestChanges}
>
Revert approval
</Button>
</div>
{:else if userAction === 'requested-changes'}
<div class="my-status-wrap">
<div class="user-status-label requested-changes">
<span class="text-12">You requested changes</span>
</div>
<Button
loading={isExecuting}
icon="tick-small"
style="success"
class="my-status-btn"
onclick={handleApprove}
>
Approve
</Button>
</div>
{:else}
<DropDownButton
bind:this={dropDownButton}
loading={isExecuting}
menuPosition="top"
{icon}
style={buttonColor}
onclick={handleClick}
>
{actionLabels[action]}
{#snippet contextMenuSlot()}
<ContextMenuSection>
<ContextMenuItem
label={actionLabels.approve}
onclick={() => {
action = 'approve';
dropDownButton?.close();
}}
/>
<ContextMenuItem
label={actionLabels.requestChanges}
onclick={() => {
action = 'requestChanges';
dropDownButton?.close();
}}
/>
</ContextMenuSection>
{/snippet}
</DropDownButton>
{/if}

<style lang="postcss">
.my-status-wrap {
display: flex;
align-items: center;
}
.user-status-label {
user-select: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px;
height: 100%;
font-style: italic;
border-radius: var(--radius-m) 0 0 var(--radius-m);
color: var(--clr-text-2);
&.approved {
background-color: var(--clr-theme-succ-soft);
color: var(--clr-theme-succ-on-soft);
}
&.requested-changes {
background-color: var(--clr-theme-warn-soft);
color: var(--clr-theme-warn-on-soft);
}
}
:global(.my-status-wrap .my-status-btn) {
border-radius: 0 var(--radius-m) var(--radius-m) 0;
}
</style>
Loading

0 comments on commit 16df0eb

Please sign in to comment.