sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-08 08:39:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hide advanced options by default and add toggle checkbox

Browse Source
This commit is contained in:
hensm
2022-08-09 18:31:08 +01:00
parent 2d954e9a5e
commit e7788c1b17
5 changed files with 186 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ext/src/_locales/en/messages.json
View File

@@ -415,5 +415,9 @@
"optionsSaved": { "optionsSaved": {
"message": "Saved!", "message": "Saved!",
"description": "Status text displayed by save button once options have been successfully saved." "description": "Status text displayed by save button once options have been successfully saved."
},
"optionsShowAdvancedOptions": {
"message": "Show advanced options",
"description": "Show advanced options checkbox label."
} }
} }

4
ext/src/defaultOptions.ts
View File

@@ -19,6 +19,7 @@ export interface Options {
siteWhitelistEnabled: boolean; siteWhitelistEnabled: boolean;
siteWhitelist: WhitelistItemData[]; siteWhitelist: WhitelistItemData[];
siteWhitelistCustomUserAgent: string; siteWhitelistCustomUserAgent: string;
showAdvancedOptions: boolean;
[key: string]: Options[keyof Options]; [key: string]: Options[keyof Options];
} }
@@ -39,5 +40,6 @@ export default {
receiverSelectorWaitForConnection: true, receiverSelectorWaitForConnection: true,
siteWhitelistEnabled: true, siteWhitelistEnabled: true,
siteWhitelist: [{ pattern: "https://www.netflix.com/*" }], siteWhitelist: [{ pattern: "https://www.netflix.com/*" }],
siteWhitelistCustomUserAgent: "" siteWhitelistCustomUserAgent: "",
showAdvancedOptions: false
} as Options; } as Options;

299
ext/src/ui/options/Options.svelte
View File

@@ -68,13 +68,19 @@
} }
function resetForm() { function resetForm() {
opts = JSON.parse(JSON.stringify(defaultOptions)); if (!opts) return;
opts = {
...JSON.parse(JSON.stringify(defaultOptions)),
// Retain advanced options shown state
showAdvancedOptions: opts.showAdvancedOptions
};
} }
</script> </script>
{#if opts} {#if opts}
<form <form
id="form" class="form"
bind:this={formElement} bind:this={formElement}
on:input={onFormInput} on:input={onFormInput}
on:submit|preventDefault={onFormSubmit} on:submit|preventDefault={onFormSubmit}
@@ -102,21 +108,23 @@
</label> </label>
</div> </div>
<div class="option option--inline"> {#if opts.showAdvancedOptions}
<div class="option__control"> <div class="option option--inline">
<input <div class="option__control">
id="mediaSyncElement" <input
type="checkbox" id="mediaSyncElement"
bind:checked={opts.mediaSyncElement} type="checkbox"
/> bind:checked={opts.mediaSyncElement}
/>
</div>
<label class="option__label" for="mediaSyncElement">
{_("optionsMediaSyncElement")}
</label>
<div class="option__description">
{_("optionsMediaSyncElementDescription")}
</div>
</div> </div>
<label class="option__label" for="mediaSyncElement"> {/if}
{_("optionsMediaSyncElement")}
</label>
<div class="option__description">
{_("optionsMediaSyncElementDescription")}
</div>
</div>
<div class="option option--inline"> <div class="option option--inline">
<div class="option__control"> <div class="option__control">
@@ -166,88 +174,93 @@
</div> </div>
</fieldset> </fieldset>
<fieldset class="category"> {#if opts.showAdvancedOptions}
<legend class="category__name"> <fieldset class="category">
<h2>{_("optionsMirroringCategoryName")}</h2> <legend class="category__name">
</legend> <h2>{_("optionsMirroringCategoryName")}</h2>
<p class="category__description"> </legend>
{_("optionsMirroringCategoryDescription")} <p class="category__description">
</p> {_("optionsMirroringCategoryDescription")}
</p>
<div class="option option--inline"> <div class="option option--inline">
<div class="option__control"> <div class="option__control">
<input <input
id="mirroringEnabled" id="mirroringEnabled"
type="checkbox" type="checkbox"
bind:checked={opts.mirroringEnabled} bind:checked={opts.mirroringEnabled}
/> />
</div>
<label class="option__label" for="mirroringEnabled">
{_("optionsMirroringEnabled")}
</label>
</div> </div>
<label class="option__label" for="mirroringEnabled"> <div class="option">
{_("optionsMirroringEnabled")} <label class="option__label" for="mirroringAppId">
</label> {_("optionsMirroringAppId")}
</div> </label>
<div class="option__control">
<div class="option"> <input
<label class="option__label" for="mirroringAppId"> id="mirroringAppId"
{_("optionsMirroringAppId")} type="text"
</label> required
<div class="option__control"> bind:value={opts.mirroringAppId}
<input />
id="mirroringAppId" <div class="option__description">
type="text" {_("optionsMirroringAppIdDescription")}
required </div>
bind:value={opts.mirroringAppId}
/>
<div class="option__description">
{_("optionsMirroringAppIdDescription")}
</div> </div>
</div> </div>
</div> </fieldset>
</fieldset> {/if}
<fieldset class="category"> {#if opts.showAdvancedOptions}
<legend class="category__name"> <fieldset class="category">
<h2>{_("optionsReceiverSelectorCategoryName")}</h2> <legend class="category__name">
</legend> <h2>{_("optionsReceiverSelectorCategoryName")}</h2>
<p class="category__description"> </legend>
{_("optionsReceiverSelectorCategoryDescription")} <p class="category__description">
</p> {_("optionsReceiverSelectorCategoryDescription")}
</p>
<div class="option option--inline"> <div class="option option--inline">
<div class="option__control"> <div class="option__control">
<input <input
id="receiverSelectorWaitForConnection" id="receiverSelectorWaitForConnection"
type="checkbox" type="checkbox"
bind:checked={opts.receiverSelectorWaitForConnection} bind:checked={opts.receiverSelectorWaitForConnection}
/> />
</div>
<label
class="option__label"
for="receiverSelectorWaitForConnection"
>
{_("optionsReceiverSelectorWaitForConnection")}
</label>
<div class="option__description">
{_(
"optionsReceiverSelectorWaitForConnectionDescription"
)}
</div>
</div> </div>
<label
class="option__label"
for="receiverSelectorWaitForConnection"
>
{_("optionsReceiverSelectorWaitForConnection")}
</label>
<div class="option__description">
{_("optionsReceiverSelectorWaitForConnectionDescription")}
</div>
</div>
<div class="option option--inline"> <div class="option option--inline">
<div class="option__control"> <div class="option__control">
<input <input
id="receiverSelectorCloseIfFocusLost" id="receiverSelectorCloseIfFocusLost"
type="checkbox" type="checkbox"
bind:checked={opts.receiverSelectorCloseIfFocusLost} bind:checked={opts.receiverSelectorCloseIfFocusLost}
/> />
</div>
<label
class="option__label"
for="receiverSelectorCloseIfFocusLost"
>
{_("optionsReceiverSelectorCloseIfFocusLost")}
</label>
</div> </div>
<label </fieldset>
class="option__label" {/if}
for="receiverSelectorCloseIfFocusLost"
>
{_("optionsReceiverSelectorCloseIfFocusLost")}
</label>
</div>
</fieldset>
<fieldset class="category"> <fieldset class="category">
<legend class="category__name"> <legend class="category__name">
@@ -257,41 +270,48 @@
{_("optionsSiteWhitelistCategoryDescription")} {_("optionsSiteWhitelistCategoryDescription")}
</p> </p>
<div class="option option--inline"> {#if opts.showAdvancedOptions}
<div class="option__control"> <div class="option option--inline">
<input <div class="option__control">
id="siteWhitelistEnabled" <input
type="checkbox" id="siteWhitelistEnabled"
bind:checked={opts.siteWhitelistEnabled} type="checkbox"
/> bind:checked={opts.siteWhitelistEnabled}
</div> />
<label class="option__label" for="siteWhitelistEnabled"> </div>
{_("optionsSiteWhitelistEnabled")} <label class="option__label" for="siteWhitelistEnabled">
<span class="option__recommended"> {_("optionsSiteWhitelistEnabled")}
{_("optionsOptionRecommended")} <span class="option__recommended">
</span> {_("optionsOptionRecommended")}
</label> </span>
<div class="option__description"> </label>
{_("optionsSiteWhitelistEnabledDescription")}
</div>
</div>
<div class="option">
<label class="option__label" for="siteWhitelistCustomUserAgent">
{_("optionsSiteWhitelistCustomUserAgent")}
</label>
<div class="option__control">
<input
id="siteWhitelistCustomUserAgent"
type="text"
bind:value={opts.siteWhitelistCustomUserAgent}
placeholder={defaultUserAgent}
/>
<div class="option__description"> <div class="option__description">
{_("optionsSiteWhitelistCustomUserAgentDescription")} {_("optionsSiteWhitelistEnabledDescription")}
</div> </div>
</div> </div>
</div>
<div class="option">
<label
class="option__label"
for="siteWhitelistCustomUserAgent"
>
{_("optionsSiteWhitelistCustomUserAgent")}
</label>
<div class="option__control">
<input
id="siteWhitelistCustomUserAgent"
type="text"
bind:value={opts.siteWhitelistCustomUserAgent}
placeholder={defaultUserAgent}
/>
<div class="option__description">
{_(
"optionsSiteWhitelistCustomUserAgentDescription"
)}
</div>
</div>
</div>
{/if}
<div class="option"> <div class="option">
<div class="option__label"> <div class="option__label">
@@ -307,19 +327,34 @@
</div> </div>
</fieldset> </fieldset>
<div id="buttons"> <div class="form__footer">
{#if isSavedIndicatorVisible} <div class="option option--inline">
<div id="status-line"> <div class="option__control">
{_("optionsSaved")} <input
id="showAdvancedOptions"
type="checkbox"
bind:checked={opts.showAdvancedOptions}
/>
</div> </div>
{/if} <label class="option__label" for="showAdvancedOptions">
{_("optionsShowAdvancedOptions")}
</label>
</div>
<button on:click={resetForm} type="button"> <div class="form__buttons">
{_("optionsReset")} {#if isSavedIndicatorVisible}
</button> <div class="form__status-line">
<button type="submit" default disabled={!isFormValid}> {_("optionsSaved")}
{_("optionsSave")} </div>
</button> {/if}
<button on:click={resetForm} type="button">
{_("optionsReset")}
</button>
<button type="submit" default disabled={!isFormValid}>
{_("optionsSave")}
</button>
</div>
</div> </div>
</form> </form>
{/if} {/if}

2
ext/src/ui/options/Whitelist.svelte
View File

@@ -183,7 +183,7 @@
<img src="assets/photon_delete.svg" alt="icon, remove" /> <img src="assets/photon_delete.svg" alt="icon, remove" />
</button> </button>
{#if !isEditingItem} {#if !isEditingItem && opts.showAdvancedOptions}
<button <button
type="button" type="button"
class="whitelist__expand-button ghost" class="whitelist__expand-button ghost"

20
ext/src/ui/options/styles/index.css
View File

@@ -48,23 +48,25 @@ button.ghost:not(:hover) {
background-color: initial; background-color: initial;
} }
#form { .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#buttons { .form__footer {
display: flex;
align-items: center; align-items: center;
align-self: flex-end; display: flex;
margin-block-start: 20px; margin-top: 20px;
} }
#buttons > :not(:last-child) { .form__buttons {
margin-inline-end: 5px; align-items: center;
display: flex;
gap: 5px;
margin-inline-start: auto;
} }
#status-line { .form__status-line {
color: var(--secondary-color); color: var(--secondary-color);
} }
@@ -228,7 +230,7 @@ button.ghost:not(:hover) {
padding: 10px 0; padding: 10px 0;
} }
#form > .category { .form > .category {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }