diff options
Diffstat (limited to 'src')
28 files changed, 390 insertions, 406 deletions
diff --git a/src/assets/javascripts/localise.js b/src/assets/javascripts/localise.js deleted file mode 100644 index d26d07d4..00000000 --- a/src/assets/javascripts/localise.js +++ /dev/null @@ -1,34 +0,0 @@ -window.browser = window.browser || window.chrome - -function localisePage() { - /** - * @param {string} tag - */ - function getMessage(tag) { - return tag.replace(/__MSG_(\w+)__/g, (_match, v1) => { - return v1 ? browser.i18n.getMessage(v1) : null - }) - } - - const elements = document.querySelectorAll("[data-localise]") - for (let i in elements) - if (elements.hasOwnProperty(i)) { - const obj = elements[i] - const tag = obj.getAttribute("data-localise").toString() - const msg = getMessage(tag) - if (msg && msg !== tag) obj.textContent = msg - } - - const placeholders = document.querySelectorAll("[data-localise-placeholder]") - for (let i in placeholders) - if (placeholders.hasOwnProperty(i)) { - const obj = placeholders[i] - const tag = obj.getAttribute("data-localise-placeholder").toString() - const msg = getMessage(tag) - if (msg && msg !== tag) obj.placeholder = msg - } -} - -export default { - localisePage, -} diff --git a/src/assets/javascripts/utils.js b/src/assets/javascripts/utils.js index 439826dd..18168e90 100644 --- a/src/assets/javascripts/utils.js +++ b/src/assets/javascripts/utils.js @@ -21,13 +21,6 @@ function getNextInstance(currentInstanceUrl, instances) { } /** - * @param {string} str - */ -function camelCase(str) { - return str.charAt(0).toUpperCase() + str.slice(1) -} - -/** * @param {URL} url */ function protocolHost(url) { @@ -178,7 +171,6 @@ export default { protocolHost, getList, getBlacklist, - camelCase, getConfig, getOptions, getPingCache, diff --git a/src/pages/components/Checkbox.svelte b/src/pages/components/Checkbox.svelte index dbefd7e9..9ba9c56c 100644 --- a/src/pages/components/Checkbox.svelte +++ b/src/pages/components/Checkbox.svelte @@ -1,9 +1,10 @@ <script> export let checked export let onChange + console.log(document.body.dir) </script> -<input {...$$restProps} bind:checked on:change={onChange} type="checkbox" /> +<input class={document.body.dir} {...$$restProps} bind:checked on:change={onChange} type="checkbox" /> <style> input[type="checkbox"] { @@ -40,13 +41,13 @@ left: 24px; } - /* body.rtl div.block input[type="checkbox"]::before { - left: auto; - right: 4px; - } */ + input[type="checkbox"].rtl::before { + left: auto; + right: 3.5px; + } - /* body.rtl div.block input[type="checkbox"]:checked::before { - left: auto; - right: 24px; - } */ + input[type="checkbox"].rtl:checked::before { + left: auto; + right: 24px; + } </style> diff --git a/src/pages/components/Input.svelte b/src/pages/components/Input.svelte index d963233c..97a47e6d 100644 --- a/src/pages/components/Input.svelte +++ b/src/pages/components/Input.svelte @@ -38,4 +38,9 @@ input:focus { outline-color: var(--active); } + @media (max-width: 715px) { + input { + width: 200px; + } + } </style> diff --git a/src/pages/components/RowCheckbox.svelte b/src/pages/components/RowCheckbox.svelte deleted file mode 100644 index b7ccab93..00000000 --- a/src/pages/components/RowCheckbox.svelte +++ /dev/null @@ -1,14 +0,0 @@ -<script> - import Row from "./Row.svelte" - import Checkbox from "./Checkbox.svelte" - import Label from "./Label.svelte" - - export let label - export let checked - export let onChange -</script> - -<Row> - <Label>{label}</Label> - <Checkbox bind:checked {onChange} /> -</Row> diff --git a/src/pages/components/RowSelect.svelte b/src/pages/components/RowSelect.svelte deleted file mode 100644 index d685803e..00000000 --- a/src/pages/components/RowSelect.svelte +++ /dev/null @@ -1,19 +0,0 @@ -<script> - import Row from "./Row.svelte" - import Select from "./Select.svelte" - import Label from "./Label.svelte" - - export let label - export let values - export let value - export let onChange - export let ariaLabel -</script> - -<Row> - <Label>{label}</Label> - <Select {value} {values} {onChange} {ariaLabel} /> -</Row> - -<style> -</style> diff --git a/src/pages/stylesheets/Inter-VariableFont_slnt,wght.ttf b/src/pages/fonts/Inter-VariableFont_slnt,wght.ttf index 969a990f..969a990f 100644 --- a/src/pages/stylesheets/Inter-VariableFont_slnt,wght.ttf +++ b/src/pages/fonts/Inter-VariableFont_slnt,wght.ttf Binary files differdiff --git a/src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf b/src/pages/fonts/Vazirmatn-VariableFont_wght.ttf index f4b97c01..f4b97c01 100644 --- a/src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf +++ b/src/pages/fonts/Vazirmatn-VariableFont_wght.ttf Binary files differdiff --git a/src/pages/fonts/styles.css b/src/pages/fonts/styles.css new file mode 100644 index 00000000..754543b1 --- /dev/null +++ b/src/pages/fonts/styles.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "Inter"; + src: url("Inter-VariableFont_slnt,wght.ttf"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Vazirmatn"; + src: url("Vazirmatn-VariableFont_wght.ttf"); + font-weight: normal; + font-style: normal; +} \ No newline at end of file diff --git a/src/pages/icons/ExportIcon.svelte b/src/pages/icons/ExportIcon.svelte index 196726a8..d155e5c5 100644 --- a/src/pages/icons/ExportIcon.svelte +++ b/src/pages/icons/ExportIcon.svelte @@ -1,4 +1,11 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> +<svg + {...$$restProps} + xmlns="http://www.w3.org/2000/svg" + height="24px" + viewBox="0 0 24 24" + width="24px" + fill="currentColor" +> <path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" /> diff --git a/src/pages/icons/ImportIcon.svelte b/src/pages/icons/ImportIcon.svelte index f022b4f0..f64d0ff6 100644 --- a/src/pages/icons/ImportIcon.svelte +++ b/src/pages/icons/ImportIcon.svelte @@ -1,5 +1,12 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> - <path - d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" - /> - </svg> \ No newline at end of file +<svg + {...$$restProps} + xmlns="http://www.w3.org/2000/svg" + height="24px" + viewBox="0 0 24 24" + width="24px" + fill="currentColor" +> + <path + d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" + /> +</svg> diff --git a/src/pages/icons/PingIcon.svelte b/src/pages/icons/PingIcon.svelte index 8fcfe27b..34c4a37d 100644 --- a/src/pages/icons/PingIcon.svelte +++ b/src/pages/icons/PingIcon.svelte @@ -1,4 +1,11 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> +<svg + {...$$restProps} + xmlns="http://www.w3.org/2000/svg" + height="20px" + viewBox="0 0 24 24" + width="20px" + fill="currentColor" +> <path d="M10.45 15.5q.6.6 1.55.587.95-.012 1.4-.687L19 7l-8.4 5.6q-.675.45-.712 1.375-.038.925.562 1.525ZM12 4q1.475 0 2.838.412Q16.2 4.825 17.4 5.65l-1.9 1.2q-.825-.425-1.712-.637Q12.9 6 12 6 8.675 6 6.338 8.337 4 10.675 4 14q0 1.05.287 2.075Q4.575 17.1 5.1 18h13.8q.575-.95.838-1.975Q20 15 20 13.9q0-.9-.212-1.75-.213-.85-.638-1.65l1.2-1.9q.75 1.175 1.188 2.5.437 1.325.462 2.75.025 1.425-.325 2.725-.35 1.3-1.025 2.475-.275.45-.75.7-.475.25-1 .25H5.1q-.525 0-1-.25t-.75-.7q-.65-1.125-1-2.387Q2 15.4 2 14q0-2.075.788-3.888.787-1.812 2.15-3.175Q6.3 5.575 8.125 4.787 9.95 4 12 4Zm.175 7.825Z" /></svg diff --git a/src/pages/icons/ResetIcon.svelte b/src/pages/icons/ResetIcon.svelte index 0900aef8..6daf57e6 100644 --- a/src/pages/icons/ResetIcon.svelte +++ b/src/pages/icons/ResetIcon.svelte @@ -5,6 +5,7 @@ viewBox="0 0 24 24" width="24px" fill="currentColor" + {...$$restProps} > <path d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z" diff --git a/src/pages/options/index.html b/src/pages/options/index.html index c3dcff71..b197d4a7 100644 --- a/src/pages/options/index.html +++ b/src/pages/options/index.html @@ -7,6 +7,7 @@ <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg"> <title>Settings</title> <link rel='stylesheet' href='build/bundle.css'> + <link rel='stylesheet' href='../fonts/styles.css'> <script defer src='build/bundle.js'></script> </head> diff --git a/src/pages/options/init.js b/src/pages/options/init.js deleted file mode 100644 index 5a7ffb6e..00000000 --- a/src/pages/options/init.js +++ /dev/null @@ -1,8 +0,0 @@ -window.browser = window.browser || window.chrome -import localise from "../../assets/javascripts/localise.js" - -if (["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage())) { - document.getElementsByTagName("body")[0].classList.add("rtl") - document.getElementsByTagName("body")[0].dir = "rtl" -} -localise.localisePage() \ No newline at end of file diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte index 6bbacb9b..dfafe1f0 100644 --- a/src/pages/options_src/App.svelte +++ b/src/pages/options_src/App.svelte @@ -1,5 +1,5 @@ <script> - let browser = window.browser || window.chrome + const browser = window.browser || window.chrome import General from "./General/General.svelte" import utils from "../../assets/javascripts/utils.js" @@ -67,12 +67,15 @@ cssVariables = light } } + + const dir = ["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage()) ? "rtl" : "ltr" + document.body.dir = dir </script> {#if _options && _config} <div - class="main" - dir="auto" + class={dir} + {dir} style=" --text: {cssVariables.text}; --bg-main: {cssVariables.bgMain}; @@ -93,7 +96,6 @@ {/if} <style> - :global(body) { width: 100vw; height: 100vh; @@ -115,4 +117,23 @@ color: var(--text); overflow: scroll; } + + @media (max-width: 1250px) { + div { + grid-template-columns: auto; + grid-template-rows: min-content auto; + padding-left: 5vw; + padding-right: 5vw; + } + } + + @media (max-width: 715px) { + div { + font-size: 14px; + grid-template-columns: auto; + grid-template-rows: min-content auto; + padding-left: 5vw; + padding-right: 5vw; + } + } </style> diff --git a/src/pages/options_src/General/Exceptions.svelte b/src/pages/options_src/General/Exceptions.svelte index 4ef5591b..7315877d 100644 --- a/src/pages/options_src/General/Exceptions.svelte +++ b/src/pages/options_src/General/Exceptions.svelte @@ -1,4 +1,6 @@ <script> + const browser = window.browser || window.chrome + import Row from "../../components/Row.svelte" import Select from "../../components/Select.svelte" import AddIcon from "../../icons/AddIcon.svelte" @@ -54,10 +56,10 @@ } </script> -<div class="block block-option"> - <Row> - <Label>Excluded from redirecting</Label> - </Row> +<Row> + <Label>{browser.i18n.getMessage("excludeFromRedirecting") || "Excluded from redirecting"}</Label> +</Row> +<div dir="ltr"> <Row> <div> <Input diff --git a/src/pages/options_src/General/General.svelte b/src/pages/options_src/General/General.svelte index d5b2dd59..732ad83b 100644 --- a/src/pages/options_src/General/General.svelte +++ b/src/pages/options_src/General/General.svelte @@ -1,12 +1,14 @@ <script> - let browser = window.browser || window.chrome + const browser = window.browser || window.chrome import Exceptions from "./Exceptions.svelte" import SettingsButtons from "./SettingsButtons.svelte" - import RowSelect from "../../components/RowSelect.svelte" - import Checkbox from "../../components/RowCheckbox.svelte" import { options } from "../stores" import { onDestroy } from "svelte" + import Row from "../../components/Row.svelte" + import Label from "../../components/Label.svelte" + import Select from "../../components/Select.svelte" + import Checkbox from "../../components/Checkbox.svelte" let _options const unsubscribe = options.subscribe(val => (_options = val)) @@ -23,46 +25,55 @@ </script> <div> - <RowSelect - label="Theme" - values={[ - { value: "detect", name: "Auto" }, - { value: "light", name: "Light" }, - { value: "dark", name: "Dark" }, - ]} - value={_options.theme} - onChange={e => { - _options["theme"] = e.target.options[e.target.options.selectedIndex].value - options.set(_options) - }} - ariaLabel="select theme" - /> + <Row> + <Label>{browser.i18n.getMessage("theme") || "Theme"}</Label> + <Select + values={[ + { value: "detect", name: browser.i18n.getMessage("auto") || "Auto" }, + { value: "light", name: browser.i18n.getMessage("light") || "Light" }, + { value: "dark", name: browser.i18n.getMessage("dark") || "Dark" }, + ]} + value={_options.theme} + onChange={e => { + _options.theme = e.target.options[e.target.options.selectedIndex].value + options.set(_options) + }} + ariaLabel="select theme" + /> + </Row> - <RowSelect - label="Fetch public instances" - value={_options.fetchInstances} - onChange={e => { - _options["fetchInstances"] = e.target.options[e.target.options.selectedIndex].value - options.set(_options) - }} - ariaLabel="Select fetch public instances" - values={[ - { value: "github", name: "GitHub" }, - { value: "codeberg", name: "Codeberg" }, - { value: "disable", name: "Disable" }, - ]} - /> + <Row> + <Label>{browser.i18n.getMessage("fetchPublicInstances") || "Fetch public instances"}</Label> + <Select + value={_options.fetchInstances} + values={[ + { value: "github", name: "GitHub" }, + { value: "codeberg", name: "Codeberg" }, + { value: "disable", name: browser.i18n.getMessage("disable") || "Disable" }, + ]} + onChange={e => { + _options.fetchInstances = e.target.options[e.target.options.selectedIndex].value + options.set(_options) + }} + ariaLabel={"Select fetch public instances"} + /> + </Row> - <Checkbox - label="Redirect Only in Incognito" - checked={_options.redirectOnlyInIncognito} - onChange={e => { - _options["redirectOnlyInIncognito"] = e.target.checked - options.set(_options) - }} - /> + <Row> + <Label>{browser.i18n.getMessage("redirectOnlyInIncognito") || "Redirect Only in Incognito"}</Label> + <Checkbox + checked={_options.redirectOnlyInIncognito} + onChange={e => { + _options.redirectOnlyInIncognito = e.target.checked + options.set(_options) + }} + /> + </Row> - <Checkbox label="Bookmarks menu" bind:checked={bookmarksPermission} /> + <Row> + <Label>{browser.i18n.getMessage("bookmarksMenu") || "Bookmarks menu"}</Label> + <Checkbox bind:checked={bookmarksPermission} /> + </Row> <Exceptions opts={_options} /> diff --git a/src/pages/options_src/General/SettingsButtons.svelte b/src/pages/options_src/General/SettingsButtons.svelte index c37a3702..3ea46a2d 100644 --- a/src/pages/options_src/General/SettingsButtons.svelte +++ b/src/pages/options_src/General/SettingsButtons.svelte @@ -1,5 +1,5 @@ <script> - let browser = window.browser || window.chrome + const browser = window.browser || window.chrome import { onDestroy } from "svelte" import Button from "../../components/Button.svelte" @@ -85,8 +85,8 @@ <div class="buttons"> <Button on:click={() => importSettingsInput.click()} disabled={disableButtons}> - <ImportIcon /> - <x data-localise="__MSG_importSettings__">Import Settings</x> + <ImportIcon class="margin margin_{document.body.dir}" /> + <x data-localise="__MSG_importSettings__">{browser.i18n.getMessage("importSettings") || "Import Settings"}</x> </Button> <input type="file" @@ -97,22 +97,33 @@ /> <Button on:click={exportSettings} disabled={disableButtons}> - <ExportIcon /> - <x data-localise="__MSG_exportSettings__">Export Settings</x> + <ExportIcon class="margin margin_{document.body.dir}" /> + <x data-localise="__MSG_exportSettings__">{browser.i18n.getMessage("exportSettings") || "Export Settings"}</x> </Button> <Button on:click={exportSettingsSync} disabled={disableButtons}> - <ExportIcon /> + <ExportIcon class="margin margin_{document.body.dir}" /> <x>Export Settings to Sync</x> </Button> <Button on:click={importSettingsSync} disabled={disableButtons}> - <ImportIcon /> - <x>Import Settings from Sync</x> + <ImportIcon class="margin margin_{document.body.dir}" /> + <x>{browser.i18n.getMessage("importSettingsFromSync") || "Import Settings from Sync"}</x> </Button> <Button on:click={resetSettings} disabled={disableButtons}> - <ResetIcon /> - <x>Reset Settings</x> + <ResetIcon class="margin margin_{document.body.dir}" /> + <x>{browser.i18n.getMessage("resetSettings") || "Reset Settings"}</x> </Button> </div> + +<style> + :global(.margin) { + margin-right: 10px; + margin-left: 0; + } + :global(.margin_rtl) { + margin-right: 0; + margin-left: 10px; + } +</style> diff --git a/src/pages/options_src/Services/Instances.svelte b/src/pages/options_src/Services/Instances.svelte index 892e395b..862bbf7e 100644 --- a/src/pages/options_src/Services/Instances.svelte +++ b/src/pages/options_src/Services/Instances.svelte @@ -1,5 +1,5 @@ <script> - let browser = window.browser || window.chrome + const browser = window.browser || window.chrome import Button from "../../components/Button.svelte" import AddIcon from "../../icons/AddIcon.svelte" @@ -28,7 +28,6 @@ let blacklist let redirects - $: serviceOptions = _options[selectedService] $: serviceConf = _config.services[selectedService] let allInstances = [] @@ -63,10 +62,10 @@ console.log("pinging...", instance) pingCache[instance] = { color: "lightblue", value: "pinging..." } const time = await utils.ping(instance) - pingCache[instance] = processTime(time) + pingCache[instance] = colorTime(time) } } - function processTime(time) { + function colorTime(time) { let value let color if (time < 5000) { @@ -103,18 +102,18 @@ {#if serviceConf.frontends[selectedFrontend].instanceList && redirects && blacklist} <hr /> - <div dir="ltr"> - <div class="ping"> - <Button on:click={pingInstances}> - <PingIcon /> - Ping Instances - </Button> - </div> - <Row> - <Label>Add your favorite instances</Label> - </Row> + <div class="ping"> + <Button on:click={pingInstances}> + <PingIcon class="margin margin_{document.body.dir}" /> + {browser.i18n.getMessage("pingInstances") || "Ping Instances"} + </Button> + </div> + <Row> + <Label>{browser.i18n.getMessage("addYourFavoriteInstances") || "Add your favorite instances"}</Label> + </Row> + <div dir="ltr"> <Row> <Input bind:value={addInstanceValue} @@ -225,9 +224,19 @@ a { color: var(--text); text-decoration: none; + word-wrap: anywhere; } a:hover { text-decoration: underline; } + + :global(.margin) { + margin-right: 10px; + margin-left: 0; + } + :global(.margin_rtl) { + margin-right: 0; + margin-left: 10px; + } </style> diff --git a/src/pages/options_src/Services/RedirectType.svelte b/src/pages/options_src/Services/RedirectType.svelte index 7f7a2843..29c169bc 100644 --- a/src/pages/options_src/Services/RedirectType.svelte +++ b/src/pages/options_src/Services/RedirectType.svelte @@ -1,12 +1,13 @@ <script> - import { onDestroy } from "svelte" + const browser = window.browser || window.chrome - import RowSelect from "../../components/RowSelect.svelte" + import { onDestroy } from "svelte" import SvelteSelect from "svelte-select" import { options, config } from "../stores" import Row from "../../components/Row.svelte" import Label from "../../components/Label.svelte" import FrontendIcon from "./FrontendIcon.svelte" + import Select from "../../components/Select.svelte" let _options let _config @@ -27,9 +28,9 @@ let values $: if (serviceConf.frontends[frontendName].embeddable) { values = [ - { value: "both", name: "Both" }, - { value: "sub_frame", name: "Only Embedded" }, - { value: "main_frame", name: "Only Not Embedded" }, + { value: "both", name: browser.i18n.getMessage("both") || "Both" }, + { value: "sub_frame", name: browser.i18n.getMessage("onlyEmbedded") || "Only Embedded" }, + { value: "main_frame", name: browser.i18n.getMessage("onlyNotEmbedded") || "Only Not Embedded" }, ] } else if ( serviceConf.frontends[frontendName].desktopApp && @@ -63,19 +64,21 @@ } </script> -<RowSelect - label="Redirect Type" - value={serviceOptions.redirectType} - onChange={e => { - serviceOptions.redirectType = e.target.options[e.target.options.selectedIndex].value - options.set(_options) - }} - {values} -/> +<Row> + <Label>{browser.i18n.getMessage("redirectType") || "Redirect Type"}</Label> + <Select + value={serviceOptions.redirectType} + onChange={e => { + serviceOptions.redirectType = e.target.options[e.target.options.selectedIndex].value + options.set(_options) + }} + {values} + /> +</Row> {#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"} <Row> - <Label>Embed Frontend</Label> + <Label>{browser.i18n.getMessage("embedFrontend") || "Embed Frontend"}</Label> <SvelteSelect clearable={false} class="svelte_select" diff --git a/src/pages/options_src/Services/Services.svelte b/src/pages/options_src/Services/Services.svelte index cb1efacb..4e719447 100644 --- a/src/pages/options_src/Services/Services.svelte +++ b/src/pages/options_src/Services/Services.svelte @@ -1,6 +1,6 @@ <script> - import Checkbox from "../../components/RowCheckbox.svelte" - import RowSelect from "../../components/RowSelect.svelte" + const browser = window.browser || window.chrome + import Row from "../../components/Row.svelte" import Label from "../../components/Label.svelte" import Select from "../../components/Select.svelte" @@ -11,6 +11,7 @@ import SvelteSelect from "svelte-select" import ServiceIcon from "./ServiceIcon.svelte" import FrontendIcon from "./FrontendIcon.svelte" + import Checkbox from "../../components/Checkbox.svelte" let _options let _config @@ -34,113 +35,124 @@ Service: <a href={serviceConf.url} target="_blank" rel="noopener noreferrer">{serviceConf.url}</a> </Label> - <SvelteSelect - clearable={false} - class="svelte_select" - value={selectedService} - on:change={e => (selectedService = e.detail.value)} - items={[ - ...Object.entries(_config.services).map(([serviceKey, service]) => { - return { value: serviceKey, label: service.name } - }), - ]} - > - <div class="slot" slot="item" let:item> - <ServiceIcon details={item} /> - {item.label} - </div> - <div class="slot" slot="selection" let:selection> - <ServiceIcon details={selection} /> - {selection.label} - </div> - </SvelteSelect> + <div dir="ltr"> + <SvelteSelect + clearable={false} + class="svelte_select" + value={selectedService} + on:change={e => (selectedService = e.detail.value)} + items={[ + ...Object.entries(_config.services).map(([serviceKey, service]) => { + return { value: serviceKey, label: service.name } + }), + ]} + > + <div class="slot" slot="item" let:item> + <ServiceIcon details={item} /> + {item.label} + </div> + <div class="slot" slot="selection" let:selection> + <ServiceIcon details={selection} /> + {selection.label} + </div> + </SvelteSelect> + </div> </Row> <hr /> - <Checkbox - label="Enable" - checked={serviceOptions.enabled} - onChange={e => { - serviceOptions.enabled = e.target.checked - options.set(_options) - }} - /> - - <div style={!serviceOptions.enabled && "pointer-events: none;opacity: 0.4;user-select: none;"}> + <Row> + <Label>{browser.i18n.getMessage("enable") || "Enable"}</Label> <Checkbox - label="Show in popup" - checked={_options.popupServices.includes(selectedService)} + checked={serviceOptions.enabled} onChange={e => { - if (e.target.checked && !_options.popupServices.includes(selectedService)) { - _options.popupServices.push(selectedService) - } else if (_options.popupServices.includes(selectedService)) { - const index = _options.popupServices.indexOf(selectedService) - if (index !== -1) _options.popupServices.splice(index, 1) - } + serviceOptions.enabled = e.target.checked options.set(_options) }} /> + </Row> + + <div style={!serviceOptions.enabled && "pointer-events: none;opacity: 0.4;user-select: none;"}> + <Row> + <Label>{browser.i18n.getMessage("showInPopup") || "Show in popup"}</Label> + <Checkbox + checked={_options.popupServices.includes(selectedService)} + onChange={e => { + if (e.target.checked && !_options.popupServices.includes(selectedService)) { + _options.popupServices.push(selectedService) + } else if (_options.popupServices.includes(selectedService)) { + const index = _options.popupServices.indexOf(selectedService) + if (index !== -1) _options.popupServices.splice(index, 1) + } + options.set(_options) + }} + /> + </Row> <Row> <Label> - Frontend: + {browser.i18n.getMessage("frontend") || "Frontend"}: <a href={frontendWebsite} target="_blank" rel="noopener noreferrer"> {frontendWebsite} </a> </Label> + <div dir="ltr"> + <SvelteSelect + clearable={false} + dir="ltr" + class="svelte_select" + value={serviceOptions.frontend} + on:change={e => { + serviceOptions.frontend = e.detail.value + options.set(_options) + }} + items={[ + ...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({ + value: frontendId, + label: frontend.name, + })), + ]} + > + <div class="slot" slot="item" let:item> + <FrontendIcon details={item} {selectedService} /> + {item.label} + </div> + <div class="slot" slot="selection" let:selection> + <FrontendIcon details={selection} {selectedService} /> + {selection.label} + </div> + </SvelteSelect> + </div> + </Row> - <SvelteSelect - clearable={false} - class="svelte_select" - value={serviceOptions.frontend} - on:change={e => { - serviceOptions.frontend = e.detail.value + <RedirectType {selectedService} /> + + <Row> + <Label>{browser.i18n.getMessage("unsupportedIframesHandling") || "Unsupported embeds handling"}</Label> + <Select + value={serviceOptions.unsupportedUrls} + onChange={e => { + serviceOptions.unsupportedUrls = e.target.options[e.target.options.selectedIndex].value options.set(_options) }} - items={[ - ...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({ - value: frontendId, - label: frontend.name, - })), + values={[ + { value: "bypass", name: browser.i18n.getMessage("bypass") || "Bypass" }, + { value: "block", name: browser.i18n.getMessage("block") || "Block" }, ]} - > - <div class="slot" slot="item" let:item> - <FrontendIcon details={item} {selectedService} /> - {item.label} - </div> - <div class="slot" slot="selection" let:selection> - <FrontendIcon details={selection} {selectedService} /> - {selection.label} - </div> - </SvelteSelect> + /> </Row> - <RedirectType {selectedService} /> - - <RowSelect - label="Unsupported embeds handling" - value={serviceOptions.unsupportedUrls} - onChange={e => { - serviceOptions.unsupportedUrls = e.target.options[e.target.options.selectedIndex].value - options.set(_options) - }} - values={[ - { value: "bypass", name: "Bypass" }, - { value: "block", name: "Block" }, - ]} - /> - {#if selectedService == "search"} <Row> <Label> - Set LibRedirect as Default Search Engine. For how to do in chromium browsers, click + {@html browser.i18n.getMessage("searchHint") || + `Set LibRedirect as Default Search Engine. For how to do in chromium browsers, click <a href="https://libredirect.github.io/docs.html#search_engine_chromium" target="_blank" rel="noopener noreferrer" >here - </a>. + </a>.`} </Label> </Row> {/if} @@ -163,6 +175,7 @@ --item-padding: 0 10px; --border: none; --border-hover: none; + --border-focused: none; --width: 210px; --background: var(--bg-secondary); --list-background: var(--bg-secondary); @@ -181,6 +194,7 @@ :global(.svelte_select img, .svelte_select svg) { margin-right: 10px; + margin-left: 0; height: 26px; width: 26px; color: var(--text); diff --git a/src/pages/options_src/Sidebar.svelte b/src/pages/options_src/Sidebar.svelte index ff44995f..fb515f53 100644 --- a/src/pages/options_src/Sidebar.svelte +++ b/src/pages/options_src/Sidebar.svelte @@ -1,4 +1,6 @@ <script> + const browser = window.browser || window.chrome + import { page } from "./stores" import GeneralIcon from "../icons/GeneralIcon.svelte" import ServicesIcon from "../icons/ServicesIcon.svelte" @@ -7,16 +9,16 @@ <div> <a href="#general" on:click={() => page.set("general")} style={$page == "general" && "color: var(--active);"}> - <GeneralIcon style="margin-right: 5px" /> - <span data-localise="__MSG_general__">General</span> + <GeneralIcon class="margin margin_{document.body.dir}" /> + <span data-localise="__MSG_general__">{browser.i18n.getMessage("general") || "General"}</span> </a> <a href="#services" on:click={() => page.set("services")} style={$page == "services" && "color: var(--active);"}> - <ServicesIcon style="margin-right: 5px" /> - <span data-localise="__MSG_services__">Services</span> + <ServicesIcon class="margin margin_{document.body.dir}" /> + <span data-localise="__MSG_services__">{browser.i18n.getMessage("general") || "Services"}</span> </a> <a href="https://libredirect.github.io" target="_blank" rel="noopener noreferrer"> - <AboutIcon style="margin-right: 5px" /> - <span data-localise="__MSG_about__">About</span> + <AboutIcon class="margin margin_{document.body.dir}" /> + <span data-localise="__MSG_about__">{browser.i18n.getMessage("about") || "About"}</span> </a> </div> @@ -40,4 +42,27 @@ a:hover { color: var(--active); } + + @media (max-width: 1250px) { + div { + flex-direction: row; + justify-content: center; + margin: 0; + } + } + + @media (max-width: 715px) { + a { + margin: 5px; + } + } + + :global(.margin) { + margin-right: 5px; + margin-left: 0; + } + :global(.margin_rtl) { + margin-right: 0; + margin-left: 5px; + } </style> diff --git a/src/pages/popup/index.html b/src/pages/popup/index.html index 5c589bf7..b197d4a7 100644 --- a/src/pages/popup/index.html +++ b/src/pages/popup/index.html @@ -7,7 +7,7 @@ <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg"> <title>Settings</title> <link rel='stylesheet' href='build/bundle.css'> - <link rel='stylesheet' href='../stylesheets/styles.css'> + <link rel='stylesheet' href='../fonts/styles.css'> <script defer src='build/bundle.js'></script> </head> diff --git a/src/pages/popup_src/App.svelte b/src/pages/popup_src/App.svelte index cf88234d..df37d55d 100644 --- a/src/pages/popup_src/App.svelte +++ b/src/pages/popup_src/App.svelte @@ -1,5 +1,5 @@ <script> - let browser = window.browser || window.chrome + const browser = window.browser || window.chrome import utils from "../../assets/javascripts/utils.js" import { onDestroy } from "svelte" diff --git a/src/pages/popup_src/Buttons.svelte b/src/pages/popup_src/Buttons.svelte index 449404ba..bfa162f8 100644 --- a/src/pages/popup_src/Buttons.svelte +++ b/src/pages/popup_src/Buttons.svelte @@ -1,5 +1,5 @@ <script> - let browser = window.browser || window.chrome + const browser = window.browser || window.chrome import Row from "./components/Row.svelte" import Label from "../components/Label.svelte" @@ -39,55 +39,57 @@ }) </script> -{#if redirect} - <Row class="interactive" on:click={() => browser.runtime.sendMessage("redirectTab")}> - <Label>Redirect</Label> - <RedirectIcon /> - </Row> -{/if} - -{#if switchInstance} - <Row - class="interactive" - on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })} - > - <Label>Switch Instance</Label> - <SwitchInstanceIcon /> - </Row> -{/if} +<div class={document.body.dir}> + {#if redirect} + <Row class="interactive" on:click={() => browser.runtime.sendMessage("redirectTab")}> + <Label>{browser.i18n.getMessage("redirect") || "Redirect"}</Label> + <RedirectIcon /> + </Row> + {/if} -{#if redirectToOriginal} - <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}> - <Label>Copy Original</Label> - <CopyIcon /> - </Row> - <Row class="interactive" on:click={() => browser.runtime.sendMessage("reverseTab")}> - <Label>Redirect To Original</Label> - <RedirectToOriginalIcon /> - </Row> -{/if} + {#if switchInstance} + <Row + class="interactive" + on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })} + > + <Label>{browser.i18n.getMessage("switchInstance") || "Switch Instance"}</Label> + <SwitchInstanceIcon /> + </Row> + {/if} -{#if redirect || switchInstance || redirectToOriginal} - <hr /> -{/if} + {#if redirectToOriginal} + <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}> + <Label>{browser.i18n.getMessage("copyOriginal") || "Copy Original"}</Label> + <CopyIcon /> + </Row> + <Row class="interactive" on:click={() => browser.runtime.sendMessage("reverseTab")}> + <Label>{browser.i18n.getMessage("redirectToOriginal" || "Redirect to Original")}</Label> + <RedirectToOriginalIcon /> + </Row> + {/if} -{#if currentService} - <Switch serviceKey={currentService} {url} /> - <hr /> -{/if} + {#if redirect || switchInstance || redirectToOriginal} + <hr /> + {/if} -{#each _options.popupServices as serviceKey} - {#if currentService !== serviceKey} - <Switch {serviceKey} {url} /> + {#if currentService} + <Switch serviceKey={currentService} {url} /> + <hr /> {/if} -{/each} -<hr /> + {#each _options.popupServices as serviceKey} + {#if currentService !== serviceKey} + <Switch {serviceKey} {url} /> + {/if} + {/each} + + <hr /> -<Row class="interactive" on:click={() => window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}> - <Label>Settings</Label> - <SettingsIcon /> -</Row> + <Row class="interactive" on:click={() => window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}> + <Label>{browser.i18n.getMessage("settings")}</Label> + <SettingsIcon /> + </Row> +</div> <style> :global(.interactive) { @@ -103,8 +105,14 @@ :global(img, svg) { margin-right: 10px; + margin-left: 0; height: 26px; width: 26px; color: var(--text); } + + :global(.rtl img, .rtl svg) { + margin-right: 0; + margin-left: 10px; + } </style> diff --git a/src/pages/popup_src/components/Switch.svelte b/src/pages/popup_src/components/Switch.svelte index f420caa1..e581e5f4 100644 --- a/src/pages/popup_src/components/Switch.svelte +++ b/src/pages/popup_src/components/Switch.svelte @@ -1,5 +1,5 @@ <script> - let browser = window.browser || window.chrome + const browser = window.browser || window.chrome import Checkbox from "../../components/Checkbox.svelte" import Label from "../../components/Label.svelte" @@ -35,7 +35,7 @@ </div> <div> <Checkbox - style="margin-right:5px" + class="margin margin_{document.body.dir}" label="Enable" checked={_options[serviceKey].enabled} onChange={e => { @@ -55,4 +55,13 @@ display: flex; align-items: center; } + + :global(.margin) { + margin-right: 5px; + margin-left: 0; + } + :global(.margin_rtl) { + margin-right: 0; + margin-left: 5px; + } </style> diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css deleted file mode 100644 index 9e8fedb3..00000000 --- a/src/pages/stylesheets/styles.css +++ /dev/null @@ -1,88 +0,0 @@ -@font-face { - font-family: "Inter"; - src: url("Inter-VariableFont_slnt,wght.ttf"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "Vazirmatn"; - src: url("Vazirmatn-VariableFont_wght.ttf"); - font-weight: normal; - font-style: normal; -} - -/* - -@media (max-width: 1250px) { - body.option { - flex-direction: column; - width: 95vw; - align-items: center; - padding: 40px 0px; - } - - section.links { - flex-direction: row; - width: 95vw; - padding: 0 55px; - } - - section.block-option { - width: 95vw; - } - - div.checklist div x { - overflow: hidden; - } -} - -html.mobile img, -html.mobile svg { - margin-right: 10px; - height: 30px; - width: 30px; - color: var(--text); -} - -html.mobile div.block { - padding: 0 15px; - justify-content: space-between; - display: flex; - align-items: center; - margin-top: 20px; - margin-bottom: 20px; -} - -html.mobile div.block input[type="checkbox"] { - width: 58px; - height: 30px; -} - -html.mobile div.block input[type="checkbox"]::before { - width: 24px; - height: 24px; - top: 3px; - left: 3.5px; -} - -html.mobile div.block input[type="checkbox"]:checked::before { - left: 30px; -} - -html.mobile body.option { - flex-direction: column; - width: 100%; - padding: 0; - align-items: center; -} - -html.mobile section.links { - flex-direction: row; - width: 100%; - padding: 0 55px; -} - -html.mobile section.block-option { - width: 100%; -} */ \ No newline at end of file |