blob: 98f765b76b90895dd4813d000c7553f0a0a23b43 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<script>
const 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"
import SettingsIcon from "../../icons/SettingsIcon.svelte"
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 margin margin_{document.body.dir}"
on:keydown={null}
on:click={() =>
browser.tabs.create({ url: _config.services[serviceKey].url }, () => {
window.close()
})}
>
<ServiceIcon details={{ value: serviceKey, label: _config.services[serviceKey].name }} />
<Label>{_config.services[serviceKey].name}</Label>
</div>
<div>
<Checkbox
class="margin margin_{document.body.dir}"
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) }, () => {
window.close()
})}
/>
<SettingsIcon
class="interactive"
on:click={() =>
browser.tabs.create({ url: browser.runtime.getURL(`pages/options/index.html#services:${serviceKey}`) }, () => {
window.close()
})}
/>
</div>
</Row>
<style>
div {
display: flex;
align-items: center;
}
:global(.margin) {
margin-right: 5px;
margin-left: 0;
}
:global(.margin_rtl) {
margin-right: 0;
margin-left: 5px;
}
</style>
|
