aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/pages/popup_src/Buttons.svelte86
-rw-r--r--src/pages/popup_src/components/PopupButton.svelte11
-rw-r--r--src/pages/popup_src/components/Switch.svelte58
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>