julian/chrom-tool
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix config ui

Browse Source
This commit is contained in:
Julian Freeman
2026-04-16 15:57:09 -04:00
parent b890c609d9
commit 7e912bd9d0
2 changed files with 103 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/App.vue
View File

@@ -118,69 +118,73 @@ const {
<h3>Add Custom Browser</h3>
<p>Provide a name, executable path, and Chromium user data path.</p>
</div>
<div class="config-form-grid">
<label class="field-group">
<span>Name</span>
<input v-model="createConfigForm.name" placeholder="Work Chrome" />
</label>
<label class="field-group">
<span>Icon</span>
<div class="icon-option-grid">
<div class="config-form-layout">
<div class="config-form-fields">
<label class="field-group">
<span>Name</span>
<input v-model="createConfigForm.name" placeholder="Work Chrome" />
</label>
<label class="field-group">
<span>Executable Path</span>
<div class="path-input-row">
<input
v-model="createConfigForm.executablePath"
placeholder="C:\Program Files\...\chrome.exe"
/>
<button
class="secondary-button"
type="button"
@click="pickExecutablePath"
>
Browse File
</button>
</div>
</label>
<label class="field-group">
<span>User Data Path</span>
<div class="path-input-row">
<input
v-model="createConfigForm.userDataPath"
placeholder="C:\Users\...\User Data"
/>
<button
class="secondary-button"
type="button"
@click="pickUserDataPath"
>
Browse Folder
</button>
</div>
</label>
</div>
<div class="config-form-side">
<label class="field-group">
<span>Icon</span>
<div class="icon-option-grid">
<button
v-for="option in browserIconOptions"
:key="option.key"
class="icon-option-button"
:class="{ active: createConfigForm.iconKey === option.key }"
type="button"
@click="createConfigForm.iconKey = option.key"
>
<img :src="option.src" :alt="option.label" />
<span>{{ option.label }}</span>
</button>
</div>
</label>
<div class="config-form-actions">
<button
v-for="option in browserIconOptions"
:key="option.key"
class="icon-option-button"
:class="{ active: createConfigForm.iconKey === option.key }"
class="primary-button"
type="button"
@click="createConfigForm.iconKey = option.key"
:disabled="savingConfig"
@click="createCustomBrowserConfig"
>
<img :src="option.src" :alt="option.label" />
<span>{{ option.label }}</span>
{{ savingConfig ? "Saving..." : "Add Config" }}
</button>
</div>
</label>
<label class="field-group">
<span>Executable Path</span>
<div class="path-input-row">
<input
v-model="createConfigForm.executablePath"
placeholder="C:\Program Files\...\chrome.exe"
/>
<button
class="secondary-button"
type="button"
@click="pickExecutablePath"
>
Browse File
</button>
</div>
</label>
<label class="field-group field-span">
<span>User Data Path</span>
<div class="path-input-row">
<input
v-model="createConfigForm.userDataPath"
placeholder="C:\Users\...\User Data"
/>
<button
class="secondary-button"
type="button"
@click="pickUserDataPath"
>
Browse Folder
</button>
</div>
</label>
</div>
<div class="config-form-actions">
<button
class="primary-button"
type="button"
:disabled="savingConfig"
@click="createCustomBrowserConfig"
>
{{ savingConfig ? "Saving..." : "Add Config" }}
</button>
</div>
</div>
</div>

56
src/styles.css
View File

@@ -321,12 +321,30 @@ button {
}
.config-form-grid {
display: none;
}
.config-form-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
gap: 14px;
margin-top: 12px;
}
.config-form-fields,
.config-form-side {
display: grid;
gap: 10px;
}
.config-form-side {
align-content: start;
padding: 10px 12px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.8));
border: 1px solid rgba(148, 163, 184, 0.14);
}
.icon-option-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -336,8 +354,9 @@ button {
.icon-option-button {
display: grid;
justify-items: center;
gap: 6px;
padding: 10px 8px;
gap: 5px;
min-height: 86px;
padding: 9px 8px;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
background: rgba(255, 255, 255, 0.9);
@@ -350,15 +369,16 @@ button {
}
.icon-option-button img {
width: 28px;
height: 28px;
width: 26px;
height: 26px;
object-fit: contain;
}
.icon-option-button span {
font-size: 0.76rem;
font-size: 0.72rem;
font-weight: 600;
text-align: center;
line-height: 1.25;
}
.icon-option-button.active {
@@ -407,7 +427,7 @@ button {
.config-form-actions {
display: flex;
justify-content: flex-end;
margin-top: 12px;
margin-top: 2px;
}
.primary-button,
@@ -457,6 +477,7 @@ button {
align-items: flex-start;
gap: 10px;
min-width: 0;
flex: 1;
}
.config-icon {
@@ -469,13 +490,18 @@ button {
.config-meta {
display: grid;
gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 10px;
}
.config-meta-row {
display: grid;
gap: 3px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(248, 250, 252, 0.78);
border: 1px solid rgba(148, 163, 184, 0.12);
}
.config-meta-row p {
@@ -880,16 +906,12 @@ button {
}
@media (max-width: 720px) {
.config-form-grid {
.config-form-layout {
grid-template-columns: 1fr;
}
.field-span {
grid-column: auto;
}
.icon-option-grid {
grid-template-columns: 1fr;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sort-bar {
@@ -911,6 +933,10 @@ button {
flex-direction: column;
}
.config-meta {
grid-template-columns: 1fr;
}
.profile-avatar,
.extension-icon {
width: 50px;