Skip to content

Commit

Permalink
Allow hiding of select UI elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@neobooru
neobooru committed Dec 29, 2023
1 parent dfd9c87 commit 828e8c5
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 43 deletions.
2 changes: 1 addition & 1 deletion .vscode/extensions.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"recommendations": ["vue.volar", "dbaeumer.vscode-eslint"]
"recommendations": ["vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}
103 changes: 66 additions & 37 deletions src/options/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,22 +110,52 @@ wnd.szc_set_config_version = (v = 0) => (cfg.value.version = v);

<template>
<div class="content-holder">
<div class="content-wrapper flex flex-column gap-3">
<div class="content-wrapper flex flex-auto flex-column gap-3">
<div><strong>SzuruChrome Settings</strong></div>

<TabView>
<TabPanel header="General">
<div class="grid">
<div class="col-12 md:col-6">
<label>
<input type="checkbox" v-model="cfg.addPageUrlToSource" />
Add page URL to the source list
</label>
<p class="hint">
This will add the current page URL (e.g. the booru link) to the source list in addition to the actual
source (e.g. twitter/pixiv/artstation). Note: if the source is empty/not detected then the page URL will
always be used as fallback source.
</p>
</div>

<div class="col-12 md:col-6">
<label>
<input type="checkbox" v-model="cfg.addAllParsedTags" />
Automatically import all tags on supported pages
</label>
<p class="hint">
This will automatically import all tags, including their categories, on supported pages such as Danbooru
and Zerochan.
</p>
</div>

<span class="col-12 status-quiet">{{ versionInfo }}</span>
</div>
</TabPanel>

<TabPanel header="Interface">
<div class="grid">
<div class="col-12 md:col-6 mb-2">
<label>Theme</label>
<select v-model="mode">
<option value="auto">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<p class="hint">This setting auto-saves.</p>
</div>
</div>

<div class="grid">
<div class="col-12 md:col-6">
<label>
<input type="checkbox" v-model="cfg.autoSearchSimilar" />
Expand All @@ -139,46 +169,42 @@ wnd.szc_set_config_version = (v = 0) => (cfg.value.version = v);

<div class="col-12 md:col-6">
<label>
<input type="checkbox" v-model="cfg.addPageUrlToSource" />
Add page URL to the source list
<input type="checkbox" v-model="cfg.loadTagCounts" />
Show how often a tag is used in the selected szurubooru instance
</label>
<p class="hint">
This will add the current page URL (e.g. the booru link) to the source list in addition to the actual
source (e.g. twitter/pixiv/artstation). Note: if the source is empty/not detected then the page URL will
always be used as fallback source.
Shows how often a given tag is used in the selected szurubooru instance. No number will be displayed
when the tag does not yet exist.
</p>
</div>

<div class="col-12 md:col-6">
<label>
<input type="checkbox" v-model="cfg.addAllParsedTags" />
Automatically import all tags on supported pages
<input type="checkbox" v-model="cfg.popup.showSource" />
Show source textbox in popup
</label>
<p class="hint">
This will automatically import all tags, including their categories, on supported pages such as Danbooru
and Zerochan.
</p>
</div>

<div class="col-12 md:col-6">
<label>
<input type="checkbox" v-model="cfg.loadTagCounts" />
Show how often a tag is used in the selected szurubooru instance
<input type="checkbox" v-model="cfg.popup.showPools" />
Show pools in popup
</label>
<p class="hint">
Shows how often a given tag is used in the selected szurubooru instance. No number will be displayed
when the tag does not yet exist.
</p>
</div>

<span class="col-12 status-quiet">{{ versionInfo }}</span>
<div class="col-12 md:col-6">
<label>
<input type="checkbox" v-model="cfg.popup.showInstancePicker" />
Show instance picker in popup
</label>
</div>
</div>
</TabPanel>

<TabPanel header="Instances">
<div class="formgrid grid">
<div class="field col-12">
<label>Szurubooru Instances</label>
<label>Selected Szurubooru Instance</label>

<div class="flex gap-1">
<select v-model="cfg.selectedSiteId">
Expand All @@ -195,13 +221,8 @@ wnd.szc_set_config_version = (v = 0) => (cfg.value.version = v);
<template v-if="selectedSite">
<div class="field col-12">
<label>URL</label>
<input
v-if="selectedSite"
text="Szurubooru URL"
type="text"
name="domain"
v-model="selectedSite.domain"
/>
<input v-if="selectedSite" text="Szurubooru URL" type="text" name="domain"
v-model="selectedSite.domain" />
</div>

<div class="field col-12 md:col-6">
Expand Down Expand Up @@ -230,14 +251,10 @@ wnd.szc_set_config_version = (v = 0) => (cfg.value.version = v);
<template v-if="field == 'color'">
<div class="color-preview">
<input type="text" class="color" v-model="data[field]" />
<div
class="preview background-preview"
:style="{ 'border-color': data[field], 'background-color': data[field] }"
></div>
<div
class="preview text-preview"
:style="{ 'border-color': data[field], color: data[field] }"
></div>
<div class="preview background-preview"
:style="{ 'border-color': data[field], 'background-color': data[field] }"></div>
<div class="preview text-preview" :style="{ 'border-color': data[field], color: data[field] }">
</div>
</div>
</template>

Expand Down Expand Up @@ -268,7 +285,19 @@ wnd.szc_set_config_version = (v = 0) => (cfg.value.version = v);
<!-- TODO: Category ignore list -->
</TabPanel>

<!-- TODO: Settings import/export? -->
<!--
<TabPanel header="Developer">
<div class="flex flex-column gap-2">
<b>Config</b>
<Textarea v-model="configText" autoResize rows="16" />
<div class="flex flex-wrap gap-1">
<button class="primary" @click="showConfig">Show config</button>
<button class="bg-danger" @click="importConfig">Import config</button>
</div>
</div>
</TabPanel>
-->
</TabView>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/popup/pages/PopupMain.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -528,7 +528,7 @@ useDark();
</div>
</div>
<div class="section-row">
<div v-if="cfg.popup.showSource" class="section-row">
<span class="section-label">Source</span>
<textarea v-model="pop.selectedPost.source"></textarea>
</div>
Expand All @@ -549,7 +549,7 @@ useDark();
</div>
</PopupSection>
<PopupSection header="Pools" toggleable v-model="cfg.popup.expandPools">
<PopupSection v-if="cfg.popup.showPools" header="Pools" toggleable v-model="cfg.popup.expandPools">
<div class="section-row">
<PoolInput :szuru="szuru" @add-pool="addPool" />
</div>
Expand All @@ -564,7 +564,7 @@ useDark();
</div>
</PopupSection>
<div class="popup-section">
<div v-if="cfg.popup.showInstancePicker" class="popup-section">
<div class="section-row">
<select v-model="cfg.selectedSiteId">
<option v-for="site in cfg.sites" :key="site.id" :value="site.id">
Expand Down
3 changes: 3 additions & 0 deletions src/stores/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ export const cfg = useStorageLocal(
popup: {
expandTags: true,
expandPools: false,
showSource: true,
showPools: true,
showInstancePicker: true,
},
tagCategories: [] as Array<TagCategoryColor>,
},
Expand Down
4 changes: 2 additions & 2 deletions src/styles/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ select {
border: 2px solid var(--border-color);

padding: 0.2em 0.3em;
box-sizing: border-box;
// box-sizing: border-box;

width: 100%;

Expand All @@ -119,7 +119,7 @@ textarea {

&:focus {
outline: var(--primary-color) solid 2px;
box-sizing: content-box;
// box-sizing: content-box;
}
}

Expand Down

0 comments on commit 828e8c5

Please sign in to comment.