fix config ui
This commit is contained in:
Julian Freeman
@@ -37,139 +37,146 @@ const iconOptions = computed(() =>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="content-scroll-area">
|
||||
<section class="content-section">
|
||||
<div v-if="configError" class="inline-error">
|
||||
{{ configError }}
|
||||
</div>
|
||||
<section class="config-page styled-scrollbar">
|
||||
<div v-if="configError" class="inline-error">
|
||||
{{ configError }}
|
||||
</div>
|
||||
|
||||
<div class="config-form-card">
|
||||
<div class="config-form-header collapsible">
|
||||
<div>
|
||||
<h3>Add Custom Browser</h3>
|
||||
<p>Add a custom executable and Chromium user data path when needed.</p>
|
||||
<div class="config-form-card">
|
||||
<div class="config-form-header collapsible">
|
||||
<div>
|
||||
<h3>Add Custom Browser</h3>
|
||||
<p>Add a custom executable and Chromium user data path when needed.</p>
|
||||
</div>
|
||||
<button
|
||||
class="secondary-button config-toggle-button"
|
||||
type="button"
|
||||
@click="formExpanded = !formExpanded"
|
||||
>
|
||||
{{ formExpanded ? "Collapse" : "Expand" }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="formExpanded" class="config-form-fields compact">
|
||||
<div class="config-inline-row">
|
||||
<label class="field-group">
|
||||
<span>Name</span>
|
||||
<input
|
||||
:value="createConfigForm.name"
|
||||
placeholder="Work Chrome"
|
||||
@input="emit('updateName', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</label>
|
||||
<label class="field-group">
|
||||
<span>Icon</span>
|
||||
<SortDropdown
|
||||
:model-value="createConfigForm.iconKey ?? 'chrome'"
|
||||
:options="iconOptions"
|
||||
@update:model-value="emit('updateIconKey', $event)"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label class="field-group">
|
||||
<span>Executable Path</span>
|
||||
<div class="path-input-row">
|
||||
<input
|
||||
:value="createConfigForm.executablePath"
|
||||
placeholder="C:\Program Files\...\chrome.exe"
|
||||
@input="emit('updateExecutablePath', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<button class="secondary-button" type="button" @click="emit('pickExecutablePath')">
|
||||
Browse File
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
<label class="field-group">
|
||||
<span>User Data Path</span>
|
||||
<div class="path-input-row">
|
||||
<input
|
||||
:value="createConfigForm.userDataPath"
|
||||
placeholder="C:\Users\...\User Data"
|
||||
@input="emit('updateUserDataPath', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<button class="secondary-button" type="button" @click="emit('pickUserDataPath')">
|
||||
Browse Folder
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
<div class="config-form-actions">
|
||||
<button
|
||||
class="secondary-button config-toggle-button"
|
||||
class="primary-button"
|
||||
type="button"
|
||||
@click="formExpanded = !formExpanded"
|
||||
:disabled="savingConfig"
|
||||
@click="emit('createConfig')"
|
||||
>
|
||||
{{ formExpanded ? "Collapse" : "Expand" }}
|
||||
{{ savingConfig ? "Saving..." : "Add Config" }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="formExpanded" class="config-form-fields compact">
|
||||
<div class="config-inline-row">
|
||||
<label class="field-group">
|
||||
<span>Name</span>
|
||||
<input
|
||||
:value="createConfigForm.name"
|
||||
placeholder="Work Chrome"
|
||||
@input="emit('updateName', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</label>
|
||||
<label class="field-group">
|
||||
<span>Icon</span>
|
||||
<SortDropdown
|
||||
:model-value="createConfigForm.iconKey ?? 'chrome'"
|
||||
:options="iconOptions"
|
||||
@update:model-value="emit('updateIconKey', $event)"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label class="field-group">
|
||||
<span>Executable Path</span>
|
||||
<div class="path-input-row">
|
||||
<input
|
||||
:value="createConfigForm.executablePath"
|
||||
placeholder="C:\Program Files\...\chrome.exe"
|
||||
@input="emit('updateExecutablePath', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<button class="secondary-button" type="button" @click="emit('pickExecutablePath')">
|
||||
Browse File
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
<label class="field-group">
|
||||
<span>User Data Path</span>
|
||||
<div class="path-input-row">
|
||||
<input
|
||||
:value="createConfigForm.userDataPath"
|
||||
placeholder="C:\Users\...\User Data"
|
||||
@input="emit('updateUserDataPath', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<button class="secondary-button" type="button" @click="emit('pickUserDataPath')">
|
||||
Browse Folder
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
<div class="config-form-actions">
|
||||
<button
|
||||
class="primary-button"
|
||||
type="button"
|
||||
:disabled="savingConfig"
|
||||
@click="emit('createConfig')"
|
||||
>
|
||||
{{ savingConfig ? "Saving..." : "Add Config" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="config-form-collapsed-note">
|
||||
<span>Collapsed by default to keep this page focused on existing configs.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="config-form-collapsed-note">
|
||||
<span>Collapsed by default to keep this page focused on existing configs.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="configsLoading" class="empty-card">
|
||||
<p>Loading browser configs...</p>
|
||||
</div>
|
||||
<div v-else class="stack-list">
|
||||
<article
|
||||
v-for="config in browserConfigs"
|
||||
:key="config.id"
|
||||
class="config-card"
|
||||
>
|
||||
<div class="config-card-header">
|
||||
<div class="config-card-lead">
|
||||
<div class="browser-nav-icon config-icon">
|
||||
<img
|
||||
v-if="browserIconSrc(config.iconKey ?? config.browserFamilyId)"
|
||||
:src="browserIconSrc(config.iconKey ?? config.browserFamilyId) ?? undefined"
|
||||
:alt="`${config.name} icon`"
|
||||
/>
|
||||
<span v-else>{{ configMonogram(config) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-title-row">
|
||||
<h4>{{ config.name }}</h4>
|
||||
</div>
|
||||
<div v-if="configsLoading" class="empty-card">
|
||||
<p>Loading browser configs...</p>
|
||||
</div>
|
||||
<div v-else class="stack-list">
|
||||
<article
|
||||
v-for="config in browserConfigs"
|
||||
:key="config.id"
|
||||
class="config-card"
|
||||
>
|
||||
<div class="config-card-header">
|
||||
<div class="config-card-lead">
|
||||
<div class="browser-nav-icon config-icon">
|
||||
<img
|
||||
v-if="browserIconSrc(config.iconKey ?? config.browserFamilyId)"
|
||||
:src="browserIconSrc(config.iconKey ?? config.browserFamilyId) ?? undefined"
|
||||
:alt="`${config.name} icon`"
|
||||
/>
|
||||
<span v-else>{{ configMonogram(config) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-title-row">
|
||||
<h4>{{ config.name }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-if="config.deletable"
|
||||
class="danger-button"
|
||||
type="button"
|
||||
:disabled="isDeletingConfig(config.id)"
|
||||
@click="emit('deleteConfig', config.id)"
|
||||
>
|
||||
{{ isDeletingConfig(config.id) ? "Deleting..." : "Delete" }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="config-meta">
|
||||
<div class="config-meta-row">
|
||||
<span class="config-label">Executable</span>
|
||||
<p :title="config.executablePath">{{ config.executablePath || "Not resolved" }}</p>
|
||||
</div>
|
||||
<div class="config-meta-row">
|
||||
<span class="config-label">User Data</span>
|
||||
<p :title="config.userDataPath">{{ config.userDataPath }}</p>
|
||||
</div>
|
||||
<button
|
||||
v-if="config.deletable"
|
||||
class="danger-button"
|
||||
type="button"
|
||||
:disabled="isDeletingConfig(config.id)"
|
||||
@click="emit('deleteConfig', config.id)"
|
||||
>
|
||||
{{ isDeletingConfig(config.id) ? "Deleting..." : "Delete" }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="config-meta">
|
||||
<div class="config-meta-row">
|
||||
<span class="config-label">Executable</span>
|
||||
<p :title="config.executablePath">{{ config.executablePath || "Not resolved" }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<div class="config-meta-row">
|
||||
<span class="config-label">User Data</span>
|
||||
<p :title="config.userDataPath">{{ config.userDataPath }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.config-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 0 2px 0 0;
|
||||
}
|
||||
|
||||
.config-form-card,
|
||||
.config-card {
|
||||
border-radius: 18px;
|
||||
|
||||
Reference in New Issue
Block a user