diff options
| -rw-r--r-- | src/pages/popup_src/Buttons.svelte | 86 | ||||
| -rw-r--r-- | src/pages/popup_src/components/PopupButton.svelte | 11 | ||||
| -rw-r--r-- | src/pages/popup_src/components/Switch.svelte | 58 |
3 files changed, 77 insertions, 78 deletions
diff --git a/src/pages/popup_src/Buttons.svelte b/src/pages/popup_src/Buttons.svelte index 39208c37..449404ba 100644 --- a/src/pages/popup_src/Buttons.svelte +++ b/src/pages/popup_src/Buttons.svelte @@ -9,10 +9,9 @@ import SwitchInstanceIcon from "../icons/SwitchInstanceIcon.svelte" import SettingsIcon from "../icons/SettingsIcon.svelte" import { options, config } from "./stores" - import ServiceIcon from "./components/ServiceIcon.svelte" import { onDestroy } from "svelte" import servicesHelper from "../../assets/javascripts/services" - import Checkbox from "../components/Checkbox.svelte" + import Switch from "./components/Switch.svelte" let _options let _config @@ -35,117 +34,70 @@ servicesHelper.switchInstance(url).then(r => (switchInstance = r)) servicesHelper.reverse(url).then(r => (redirectToOriginal = r)) servicesHelper.redirectAsync(url, "main_frame", null, true).then(r => (redirect = r)) - currentService = await servicesHelper.computeService(url) + servicesHelper.computeService(url).then(r => (currentService = r)) } }) </script> {#if redirect} - <Row class="row" on:click={() => browser.runtime.sendMessage("redirectTab")}> + <Row class="interactive" on:click={() => browser.runtime.sendMessage("redirectTab")}> <Label>Redirect</Label> <RedirectIcon /> </Row> {/if} {#if switchInstance} - <Row class="row" on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })}> + <Row + class="interactive" + on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })} + > <Label>Switch Instance</Label> <SwitchInstanceIcon /> </Row> {/if} {#if redirectToOriginal} - <Row class="row" on:click={() => servicesHelper.copyRaw(url)}> + <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}> <Label>Copy Original</Label> <CopyIcon /> </Row> - <Row class="row" on:click={() => browser.runtime.sendMessage("reverseTab")}> + <Row class="interactive" on:click={() => browser.runtime.sendMessage("reverseTab")}> <Label>Redirect To Original</Label> <RedirectToOriginalIcon /> </Row> {/if} -<hr /> +{#if redirect || switchInstance || redirectToOriginal} + <hr /> +{/if} {#if currentService} - <Row> - <div - style="display: flex;justify-content: space-between;align-items: center;" - class="row" - on:keydown={null} - on:click={() => window.open(browser.runtime.getURL(_config.services[currentService].url), "_blank")} - > - <ServiceIcon details={{ value: currentService, label: _config.services[currentService].name }} /> - <Label>{_config.services[currentService].name}</Label> - </div> - <div style="display: flex;align-items: center;"> - <Checkbox - style="margin-right:5px" - label="Enable" - checked={_options[currentService].enabled} - onChange={e => { - _options[currentService].enabled = e.target.checked - options.set(_options) - }} - /> - <SwitchInstanceIcon - class="row" - on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url, currentService) })} - /> - </div> - </Row> + <Switch serviceKey={currentService} {url} /> + <hr /> {/if} -<hr /> - {#each _options.popupServices as serviceKey} {#if currentService !== serviceKey} - <Row> - <div - style="display: flex;align-items: center;" - class="row" - on:keydown={null} - on:click={() => window.open(browser.runtime.getURL(_config.services[serviceKey].url), "_blank")} - > - <ServiceIcon details={{ value: serviceKey, label: _config.services[serviceKey].name }} /> - <Label>{_config.services[serviceKey].name}</Label> - </div> - <div style="display: flex;align-items: center;"> - <Checkbox - style="margin-right:5px" - label="Enable" - checked={_options[serviceKey].enabled} - onChange={e => { - console.log(e.target.checked) - _options[serviceKey].enabled = e.target.checked - options.set(_options) - }} - /> - <SwitchInstanceIcon - class="row" - on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url, serviceKey) })} - /> - </div> - </Row> + <Switch {serviceKey} {url} /> {/if} {/each} <hr /> -<Row class="row" on:click={() => window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}> +<Row class="interactive" on:click={() => window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}> <Label>Settings</Label> <SettingsIcon /> </Row> <style> - :global(.row) { + :global(.interactive) { transition: 0.1s; } - :global(.row:hover) { + :global(.interactive:hover) { color: var(--active); cursor: pointer; } - :global(.row:active) { + :global(.interactive:active) { transform: translateY(1px); } diff --git a/src/pages/popup_src/components/PopupButton.svelte b/src/pages/popup_src/components/PopupButton.svelte deleted file mode 100644 index 9c4953c4..00000000 --- a/src/pages/popup_src/components/PopupButton.svelte +++ /dev/null @@ -1,11 +0,0 @@ -<script> - import Row from "../components/Row.svelte" - import Label from "../components/Label.svelte" - import CopyIcon from "../icons/CopyIcon.svelte" - export let label -</script> - -<Row on:click> - <Label>{label}</Label> - <CopyIcon /> -</Row> diff --git a/src/pages/popup_src/components/Switch.svelte b/src/pages/popup_src/components/Switch.svelte new file mode 100644 index 00000000..f420caa1 --- /dev/null +++ b/src/pages/popup_src/components/Switch.svelte @@ -0,0 +1,58 @@ +<script> + let browser = window.browser || window.chrome + + import Checkbox from "../../components/Checkbox.svelte" + import Label from "../../components/Label.svelte" + import SwitchInstanceIcon from "../../icons/SwitchInstanceIcon.svelte" + import Row from "./Row.svelte" + import ServiceIcon from "./ServiceIcon.svelte" + import { onDestroy } from "svelte" + import servicesHelper from "../../../assets/javascripts/services" + import { options, config } from "../stores" + + let _options + let _config + + const unsubscribeOptions = options.subscribe(val => (_options = val)) + const unsubscribeConfig = config.subscribe(val => (_config = val)) + onDestroy(() => { + unsubscribeOptions() + unsubscribeConfig() + }) + + export let serviceKey + export let url +</script> + +<Row> + <div + class="interactive" + on:keydown={null} + on:click={() => window.open(browser.runtime.getURL(_config.services[serviceKey].url), "_blank")} + > + <ServiceIcon details={{ value: serviceKey, label: _config.services[serviceKey].name }} /> + <Label>{_config.services[serviceKey].name}</Label> + </div> + <div> + <Checkbox + style="margin-right:5px" + label="Enable" + checked={_options[serviceKey].enabled} + onChange={e => { + _options[serviceKey].enabled = e.target.checked + options.set(_options) + }} + /> + <SwitchInstanceIcon + class="interactive" + on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url, serviceKey) })} + /> + </div> +</Row> + +<style> + div { + display: flex; + align-items: center; + } +</style> |