Skip to content

Commit 7f5a6b3

Browse files
PavelLaptevPavelLaptev
authored
ui-fixes-76 (#8877)
* remove unused * fix: add bottom margin * ui: update design for the "Forge" section * feat(modal): disalow select text
1 parent 58ab068 commit 7f5a6b3

File tree

7 files changed

+89
-87
lines changed

7 files changed

+89
-87
lines changed

‎apps/desktop/src/components/ForgeForm.svelte

Lines changed: 83 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
if (!$project) return;
5454
5555
const mutableProject: Project & { unset_forge_override?: boolean } = structuredClone($project);
56+
5657
if (selectedOption === 'default') {
5758
mutableProject.unset_forge_override = true;
5859
} else {
@@ -62,75 +63,89 @@
6263
}
6364
</script>
6465

65-
<Spacer />
66-
<SectionCard>
67-
<h3 class="text-bold text-15">Forge override</h3>
68-
{#if $determinedForgeType === 'default'}
69-
<p class="text-13">
70-
We were unable to determine what forge you were using. In order to make use of a forge
71-
integration, select your forge of it from the dropdown below.
72-
</p>
73-
<p class="text-13">
74-
Please note that only the GitHub and GitLab support PR creation at the moment.
75-
</p>
76-
<Select
77-
value={selectedOption}
78-
options={forgeOptions}
79-
wide
80-
onselect={(value) => {
81-
selectedOption = value as ForgeName;
82-
handleSelectionChange(selectedOption);
83-
}}
84-
>
85-
{#snippet itemSnippet({ item, highlighted })}
86-
<SelectItem selected={item.value === selectedOption} {highlighted}>
87-
{item.label}
88-
</SelectItem>
89-
{/snippet}
90-
</Select>
91-
{:else}
92-
<p class="text-13">
93-
We have determined that you are currently using <code>{$determinedForgeType}</code>. We
94-
currently do not support overriding an automatically determined forge type.
95-
</p>
96-
{/if}
97-
</SectionCard>
66+
<div>
67+
<SectionCard roundedBottom={forge.current.name !== 'gitlab'}>
68+
{#snippet title()}
69+
Forge override
70+
{/snippet}
9871

99-
{#if forge.current.name === 'gitlab'}
100-
<Spacer />
101-
<SectionCard>
102-
<h3 class="text-bold text-15">Configure GitLab Integration</h3>
103-
<p class="text-13">
104-
Learn how find your GitLab Personal Token and Project ID in our <Link
105-
href="https://docs.gitbutler.com/features/gitlab-integration">documentation</Link
106-
>
107-
</p>
108-
<p class="text-13">
109-
The Fork Project ID should be the project that your branches get pushed to, and the Upstream
110-
Project ID should be project where you want the Merge Requests to be created.
111-
</p>
72+
{#snippet caption()}
73+
{#if $determinedForgeType === 'default'}
74+
We couldn't detect which Forge you're using.
75+
<br />
76+
To enable Forge integration, please select your Forge from the dropdown below.
77+
<br />
78+
<span class="text-bold">Note:</span> Currently, only GitHub and GitLab support pull request creation.
79+
{:else}
80+
We’ve detected that you’re using <span class="text-bold"
81+
>{$determinedForgeType.toUpperCase()}</span
82+
>.
83+
<br />
84+
At the moment, it’s not possible to manually override the detected forge type.
85+
{/if}
86+
{/snippet}
11287

113-
<Textbox label="Personal Token" value={$token} oninput={(value) => ($token = value)} />
114-
<Textbox
115-
label="Your Fork's Project ID"
116-
value={$forkProjectId}
117-
oninput={(value) => ($forkProjectId = value)}
118-
/>
119-
<Textbox
120-
label="Upstream Project ID"
121-
value={$upstreamProjectId}
122-
oninput={(value) => ($upstreamProjectId = value)}
123-
/>
124-
<Textbox
125-
label="Instance URL"
126-
value={$instanceUrl}
127-
oninput={(value) => ($instanceUrl = value)}
128-
/>
129-
<p class="text-13">
130-
If you use a custom GitLab instance (not gitlab.com), you will need to add it as a custom CSP
131-
entry so that GitButler trusts connecting to that host. Read more in the <Link
132-
href="https://docs.gitbutler.com/troubleshooting/custom-csp">docs</Link
88+
{#if $determinedForgeType === 'default'}
89+
<Select
90+
value={selectedOption}
91+
options={forgeOptions}
92+
wide
93+
onselect={(value) => {
94+
selectedOption = value as ForgeName;
95+
handleSelectionChange(selectedOption);
96+
}}
13397
>
134-
</p>
98+
{#snippet itemSnippet({ item, highlighted })}
99+
<SelectItem selected={item.value === selectedOption} {highlighted}>
100+
{item.label}
101+
</SelectItem>
102+
{/snippet}
103+
</Select>
104+
{:else}{/if}
135105
</SectionCard>
136-
{/if}
106+
107+
{#if forge.current.name === 'gitlab'}
108+
<SectionCard roundedTop={false} roundedBottom={false}>
109+
{#snippet title()}
110+
Configure GitLab integration
111+
{/snippet}
112+
113+
{#snippet caption()}
114+
Learn how find your GitLab Personal Token and Project ID in our <Link
115+
href="https://docs.gitbutler.com/features/gitlab-integration">docs</Link
116+
>
117+
<br />
118+
The Fork Project ID is where your branches will be pushed, and the Upstream Project ID is where
119+
you want merge requests to be created.
120+
<br />
121+
{/snippet}
122+
123+
<Textbox label="Personal token" value={$token} oninput={(value) => ($token = value)} />
124+
<Textbox
125+
label="Your fork's project ID"
126+
value={$forkProjectId}
127+
oninput={(value) => ($forkProjectId = value)}
128+
/>
129+
<Textbox
130+
label="Upstream project ID"
131+
value={$upstreamProjectId}
132+
oninput={(value) => ($upstreamProjectId = value)}
133+
/>
134+
<Textbox
135+
label="Instance URL"
136+
value={$instanceUrl}
137+
oninput={(value) => ($instanceUrl = value)}
138+
/>
139+
</SectionCard>
140+
141+
<SectionCard roundedTop={false}>
142+
{#snippet caption()}
143+
If you use a custom GitLab instance (not gitlab.com), you will need to add it as a custom
144+
CSP entry so that GitButler trusts connecting to that host. Read more in the <Link
145+
href="https://docs.gitbutler.com/troubleshooting/custom-csp">docs</Link
146+
>
147+
{/snippet}
148+
</SectionCard>
149+
{/if}
150+
</div>
151+
<Spacer />

‎apps/desktop/src/components/RemoveProjectForm.svelte

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,7 @@
3434
Remove project
3535
{/snippet}
3636
{#snippet caption()}
37-
You can remove projects from GitButler, your code remains safe as this only clears
38-
configuration.
37+
Removing projects from GitButler only clears configuration — your code stays safe.
3938
{/snippet}
4039
<div>
4140
<RemoveProjectButton projectTitle={project.title} {isDeleting} {onDeleteClicked} />

‎apps/desktop/src/components/TabContent.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,6 @@
2727
align-items: stretch;
2828
justify-content: flex-start;
2929
margin-top: 1rem;
30+
margin-bottom: 3rem;
3031
}
3132
</style>

‎apps/desktop/src/components/v3/projectSettings/GeneralSettings.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@
77

88
<DetailsForm />
99
<BaseBranchSwitch />
10-
<RemoveProjectForm />
1110
<ForgeForm />
11+
<RemoveProjectForm />

‎apps/desktop/src/routes/[projectId]/settings/+page.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
import TabContent from '$components/TabContent.svelte';
1313
import TabList from '$components/TabList.svelte';
1414
import TabTrigger from '$components/TabTrigger.svelte';
15+
1516
import Tabs from '$components/Tabs.svelte';
1617
</script>
1718

@@ -35,8 +36,8 @@
3536
<Section>
3637
<DetailsForm />
3738
<BaseBranchSwitch />
38-
<RemoveProjectForm />
3939
<ForgeForm />
40+
<RemoveProjectForm />
4041
</Section>
4142
</TabContent>
4243
<TabContent value="cloud">

‎packages/ui/src/lib/Modal.svelte

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,6 @@
174174
width: 100%;
175175
height: 100%;
176176
padding: 24px;
177-
178177
background-color: var(--clr-overlay-bg);
179178
}
180179
@@ -203,7 +202,6 @@
203202
border-radius: var(--radius-l);
204203
background-color: var(--clr-bg-1);
205204
box-shadow: var(--fx-shadow-l);
206-
user-select: text;
207205
}
208206
209207
.modal__body {

‎packages/ui/src/styles/utility/helpers.css

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -86,23 +86,11 @@ pre {
8686
}
8787
}
8888

89-
/* FOCUS STATE */
89+
/* ACCESSIBILITY */
9090
.focus-state {
9191
outline: none;
9292

9393
&:focus-visible {
9494
outline: 2px solid var(--focus-color);
9595
}
9696
}
97-
98-
/* NO TRANSITION ON MOUNT */
99-
.h-no-transition {
100-
transition: none !important;
101-
& * {
102-
transition: none !important;
103-
}
104-
}
105-
106-
.h-dotted-underline {
107-
text-decoration: underline dotted;
108-
}

0 commit comments

Comments
 (0)