Skip to content

Commit 425136d

Browse files
PavelLaptevPavelLaptev
authored
Edit mode updates (#4792)
* Add `Scrollbar` and `ScrollableContainer` to the UI lib * event fixes * replace app components with UI * Move `ContentWrapper` to the UI side * update file status badge colors * move scrollbar components back to to app because of the user settings * dummy commit card added to the edit mode * add the commit line * edit modal UI tweaks * remove unused code * lint fixes * lint fixes
1 parent 9234939 commit 425136d

File tree

27 files changed

+475
-319
lines changed

27 files changed

+475
-319
lines changed

‎apps/desktop/src/lib/branch/BranchCard.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import EmptyStatePlaceholder from '../components/EmptyStatePlaceholder.svelte';
44
import PullRequestCard from '../pr/PullRequestCard.svelte';
55
import InfoMessage from '../shared/InfoMessage.svelte';
6-
import ScrollableContainer from '../shared/ScrollableContainer.svelte';
76
import { PromptService } from '$lib/ai/promptService';
87
import { AIService } from '$lib/ai/service';
98
import laneNewSvg from '$lib/assets/empty-state/lane-new.svg?raw';
@@ -17,6 +16,7 @@
1716
import { showError } from '$lib/notifications/toasts';
1817
import { persisted } from '$lib/persisted/persisted';
1918
import { isFailure } from '$lib/result';
19+
import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
2020
import { SETTINGS, type Settings } from '$lib/settings/userSettings';
2121
import Resizer from '$lib/shared/Resizer.svelte';
2222
import { User } from '$lib/stores/user';

‎apps/desktop/src/lib/components/BranchPreview.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script lang="ts">
22
import BranchPreviewHeader from '../branch/BranchPreviewHeader.svelte';
33
import Resizer from '../shared/Resizer.svelte';
4-
import ScrollableContainer from '../shared/ScrollableContainer.svelte';
54
import { Project } from '$lib/backend/projects';
65
import CommitCard from '$lib/commit/CommitCard.svelte';
76
import { transformAnyCommit } from '$lib/commitLines/transformers';
87
import FileCard from '$lib/file/FileCard.svelte';
98
import { getGitHost } from '$lib/gitHost/interface/gitHost';
9+
import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
1010
import { SETTINGS, type Settings } from '$lib/settings/userSettings';
1111
import { RemoteBranchService } from '$lib/stores/remoteBranches';
1212
import { getContext, getContextStoreBySymbol } from '$lib/utils/context';

‎apps/desktop/src/lib/components/EditMode.svelte‎

Lines changed: 168 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script lang="ts">
2-
import ProjectNameLabel from '../shared/ProjectNameLabel.svelte';
3-
import { Project } from '$lib/backend/projects';
2+
// import { Project } from '$lib/backend/projects';
3+
import ActionView from '$lib/layout/ActionView.svelte';
44
import { ModeService, type EditModeMetadata } from '$lib/modes/service';
55
import { UncommitedFilesWatcher } from '$lib/uncommitedFiles/watcher';
66
import { getContext } from '$lib/utils/context';
77
import Button from '@gitbutler/ui/Button.svelte';
8+
import Avatar from '@gitbutler/ui/avatar/Avatar.svelte';
89
import FileListItem from '@gitbutler/ui/file/FileListItem.svelte';
910
import type { RemoteFile } from '$lib/vbranches/types';
1011
import type { FileStatus } from '@gitbutler/ui/file/types';
@@ -15,7 +16,7 @@
1516
1617
const { editModeMetadata }: Props = $props();
1718
18-
const project = getContext(Project);
19+
// const project = getContext(Project);
1920
const uncommitedFileWatcher = getContext(UncommitedFilesWatcher);
2021
const modeService = getContext(ModeService);
2122
@@ -116,92 +117,93 @@
116117
}
117118
</script>
118119

119-
<div class="editmode">
120-
<div class="container">
121-
<div class="project-name">
122-
<ProjectNameLabel projectName={project?.title} />
120+
<ActionView
121+
paddings={{
122+
left: 48
123+
}}
124+
>
125+
<h2 class="editmode__title text-18 text-body text-bold">
126+
You are currently editing commit <span class="code-string">
127+
{editModeMetadata.commitOid.slice(0, 7)}
128+
</span>
129+
</h2>
130+
<!-- <p class="editmode__message text-12 text-body">
131+
Edit Mode lets you modify an existing commit in isolation or resolve conflicts.
132+
<br />
133+
Any changes made, including new files, will be added to the selected commit.
134+
<br />
135+
Finalize the edit by either saving or discarding your changes.
136+
</p> -->
137+
138+
<div class="commit-group">
139+
<div class="commit-line__container">
140+
<div class="commit-line__top-line"></div>
141+
<div class="commit-line__avatar">
142+
<Avatar srcUrl="oops" tooltip="author" />
143+
</div>
144+
<div class="commit-line__bottom-line"></div>
123145
</div>
124-
<h2 class="editmode__title text-18 text-body text-bold">
125-
You are currently editing commit <span class="code-string">
126-
{editModeMetadata.commitOid.slice(0, 7)}
127-
</span>
128-
</h2>
129-
<p class="editmode__message text-13 text-body">
130-
Edit Mode lets you modify an existing commit in isolation or resolve conflicts. Any changes
131-
made, including new files, will be added to the selected commit. You can finalize the edit by
132-
either saving or discarding your changes.
133-
</p>
134-
135-
<div class="files">
136-
<p class="text-13 text-semibold header">Commit files</p>
137-
{#each files as file}
138-
<div class="file">
139-
<FileListItem
140-
fileName={file.name}
141-
filePath={file.path}
142-
fileStatus={file.status}
143-
conflicted={file.conflicted}
144-
fileStatusStyle="full"
145-
clickable={false}
146-
/>
146+
147+
<div class="commit-data">
148+
<div class="card commit-card">
149+
<h3 class="text-13 text-semibold commit-card__title">Awesome title</h3>
150+
<div class="text-11 commit-card__details">
151+
<span class="">234234</span>
152+
<span class="commit-card__divider">•</span>
153+
<span class="">Author</span>
147154
</div>
148-
{/each}
149-
</div>
150155

151-
<p class="editmode__message text-13 text-body">
152-
Please do not make any commits whilst in edit mode.
153-
<br />
154-
To leave edit mode, use the provided actions.
155-
</p>
156-
157-
<div class="editmode__actions">
158-
<Button style="ghost" outline onclick={abort} disabled={modeServiceAborting === 'loading'}>
159-
Cancel
160-
</Button>
161-
<Button
162-
style="pop"
163-
kind="solid"
164-
icon="tick-small"
165-
onclick={save}
166-
disabled={modeServiceSaving === 'loading'}
167-
>
168-
Save and exit
169-
</Button>
156+
<div class="commit-card__type-indicator"></div>
157+
</div>
158+
159+
<div class="card files">
160+
<h3 class="text-13 text-semibold header">Commit files</h3>
161+
{#each files as file}
162+
<div class="file">
163+
<FileListItem
164+
fileName={file.name}
165+
filePath={file.path}
166+
fileStatus={file.status}
167+
conflicted={file.conflicted}
168+
fileStatusStyle="full"
169+
clickable={false}
170+
/>
171+
</div>
172+
{/each}
173+
</div>
170174
</div>
171175
</div>
172-
</div>
173-
174-
<style lang="postcss">
175-
.editmode {
176-
display: flex;
177-
flex-direction: column;
178-
179-
flex-grow: 1;
180-
181-
align-items: center;
182-
justify-content: center;
183-
184-
background-color: var(--clr-bg-1);
185-
}
186-
187-
.container {
188-
width: 100%;
189-
max-width: 500px;
190-
}
191176

192-
.project-name {
193-
margin-bottom: 12px;
194-
}
177+
<!-- <div class="editmode__helpbox"> -->
178+
<p class="text-12 text-body editmode__helptext">
179+
Please don't make any commits while in edit mode.
180+
<br />
181+
To exit edit mode, use the provided actions.
182+
</p>
183+
<!-- </div> -->
184+
185+
<div class="editmode__actions">
186+
<Button style="ghost" outline onclick={abort} disabled={modeServiceAborting === 'loading'}>
187+
Cancel
188+
</Button>
189+
<Button
190+
style="pop"
191+
kind="solid"
192+
icon="tick-small"
193+
onclick={save}
194+
disabled={modeServiceSaving === 'loading'}
195+
>
196+
Save and exit
197+
</Button>
198+
</div>
199+
</ActionView>
195200

201+
<style lang="postcss">
196202
.editmode__title {
197203
color: var(--clr-text-1);
198204
margin-bottom: 12px;
199205
}
200206
201-
.editmode__message {
202-
color: var(--clr-text-2);
203-
margin-bottom: 20px;
204-
}
205207
.editmode__actions {
206208
display: flex;
207209
gap: 8px;
@@ -211,13 +213,8 @@
211213
}
212214
213215
.files {
214-
border: 1px solid var(--clr-border-2);
215-
border-radius: var(--radius-m);
216-
217-
margin-bottom: 16px;
218-
216+
margin-bottom: 12px;
219217
overflow: hidden;
220-
221218
padding-bottom: 8px;
222219
223220
& .header {
@@ -233,4 +230,92 @@
233230
}
234231
}
235232
}
233+
234+
/* COMMIT */
235+
.commit-group {
236+
position: relative;
237+
display: flex;
238+
gap: 14px;
239+
}
240+
241+
.commit-data {
242+
position: relative;
243+
display: flex;
244+
flex-direction: column;
245+
gap: 4px;
246+
width: 100%;
247+
}
248+
249+
/* COMMIT CARD */
250+
.commit-card {
251+
position: relative;
252+
padding: 14px 14px 14px 16px;
253+
gap: 6px;
254+
overflow: hidden;
255+
}
256+
257+
.commit-card__title {
258+
color: var(--clr-text-1);
259+
}
260+
261+
.commit-card__details {
262+
display: flex;
263+
gap: 4px;
264+
color: var(--clr-text-2);
265+
}
266+
267+
.commit-card__type-indicator {
268+
position: absolute;
269+
top: 0;
270+
left: 0;
271+
width: 4px;
272+
height: 100%;
273+
background-color: var(--clr-commit-local);
274+
}
275+
276+
/* COMMIT LINE */
277+
.commit-line__container {
278+
position: absolute;
279+
top: 0;
280+
left: -26px;
281+
display: flex;
282+
flex-direction: column;
283+
align-items: center;
284+
height: 100%;
285+
}
286+
287+
.commit-line__avatar {
288+
position: absolute;
289+
top: 15px;
290+
left: 50%;
291+
transform: translateX(-50%);
292+
border: 2px solid var(--clr-commit-local);
293+
border-radius: 50%;
294+
}
295+
296+
.commit-line__top-line {
297+
width: 2px;
298+
height: 48px;
299+
margin-top: -26px;
300+
background: linear-gradient(180deg, transparent 0%, var(--clr-commit-local) 100%);
301+
}
302+
303+
.commit-line__bottom-line {
304+
width: 2px;
305+
height: 100%;
306+
background: linear-gradient(180deg, var(--clr-commit-local) 0%, transparent 100%);
307+
}
308+
309+
/* .editmode__helpbox {
310+
color: var(--clr-text-2);
311+
margin-bottom: 16px;
312+
padding: 12px;
313+
border-radius: var(--radius-m);
314+
background-color: var(--clr-bg-1-muted);
315+
} */
316+
317+
.editmode__helptext {
318+
color: var(--clr-text-3);
319+
margin-bottom: 16px;
320+
}
236321
</style>

‎apps/desktop/src/lib/file/FileCard.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import FileCardHeader from './FileCardHeader.svelte';
33
import FileDiff from './FileDiff.svelte';
4-
import ScrollableContainer from '$lib/shared/ScrollableContainer.svelte';
4+
import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
55
import { getContext } from '$lib/utils/context';
66
import { ContentSection, HunkSection, parseFileSections } from '$lib/utils/fileSections';
77
import { BranchController } from '$lib/vbranches/branchController';

‎apps/desktop/src/lib/history/History.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
import EmptyStatePlaceholder from '../components/EmptyStatePlaceholder.svelte';
33
import FullviewLoading from '../components/FullviewLoading.svelte';
44
import LazyloadContainer from '../shared/LazyloadContainer.svelte';
5-
import ScrollableContainer from '../shared/ScrollableContainer.svelte';
65
import emptyFolderSvg from '$lib/assets/empty-state/empty-folder.svg?raw';
76
import { Project } from '$lib/backend/projects';
87
import { clickOutside } from '$lib/clickOutside';
98
import FileCard from '$lib/file/FileCard.svelte';
109
import SnapshotCard from '$lib/history/SnapshotCard.svelte';
1110
import { HistoryService, createdOnDay } from '$lib/history/history';
11+
import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
1212
import { getContext } from '$lib/utils/context';
1313
import { RemoteFile } from '$lib/vbranches/types';
1414
import Button from '@gitbutler/ui/Button.svelte';

0 commit comments

Comments
 (0)