devol/libredirect
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added mobile support in Svelte

Browse Source
This commit is contained in:
ManeraKai 2024-07-26 17:39:22 +03:00
parent f047a1d02d
commit 2cb60e91cd
No known key found for this signature in database
GPG Key ID: 5ABC31FFD562E337
17 changed files with 157 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -9,7 +9,7 @@
"scripts": {
"start": "web-ext run",
"nightly": "web-ext run --firefox=/home/esmail/software/firefox_nightly/firefox",
"android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix",
"android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix ",
"build": "web-ext build",
"test": "web-ext lint",
"html": "rollup -c --config-popup && rollup -c --config-options"

8
src/assets/javascripts/utils.js
View File

@ -20,13 +20,6 @@ function getNextInstance(currentInstanceUrl, instances) {
return instances[nextInstanceIndex]
}
/**
* @param {string} str
*/
function camelCase(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
/**
* @param {URL} url
*/
@ -178,7 +171,6 @@ export default {
protocolHost,
getList,
getBlacklist,
camelCase,
getConfig,
getOptions,
getPingCache,

5
src/pages/components/Input.svelte
View File

@ -38,4 +38,9 @@
input:focus {
outline-color: var(--active);
}
@media (max-width: 715px) {
input {
width: 200px;
}
}
</style>

14
src/pages/components/RowCheckbox.svelte
View File

@ -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>

19
src/pages/components/RowSelect.svelte
View File

@ -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>

0
src/pages/stylesheets/Inter-VariableFont_slnt,wght.ttf → src/pages/fonts/Inter-VariableFont_slnt,wght.ttf
View File

0
src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf → src/pages/fonts/Vazirmatn-VariableFont_wght.ttf
View File

13
src/pages/fonts/styles.css Normal file
View File

@ -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;
}

1
src/pages/options/index.html
View File

@ -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>

20
src/pages/options_src/App.svelte
View File

@ -93,7 +93,6 @@
{/if}
<style>
:global(body) {
width: 100vw;
height: 100vh;
@ -115,4 +114,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>

89
src/pages/options_src/General/General.svelte
View File

@ -3,10 +3,12 @@
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>Theme</Label>
<Select
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>
<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>Fetch public instances</Label>
<Select
value={_options.fetchInstances}
values={[
{ value: "github", name: "GitHub" },
{ value: "codeberg", name: "Codeberg" },
{ value: "disable", name: "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>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>Bookmarks menu</Label>
<Checkbox bind:checked={bookmarksPermission} />
</Row>
<Exceptions opts={_options} />

5
src/pages/options_src/Services/Instances.svelte
View File

@ -63,10 +63,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) {
@ -225,6 +225,7 @@
a {
color: var(--text);
text-decoration: none;
word-wrap: anywhere;
}
a:hover {

23
src/pages/options_src/Services/RedirectType.svelte
View File

@ -1,12 +1,11 @@
<script>
import { onDestroy } from "svelte"
import RowSelect from "../../components/RowSelect.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
@ -63,15 +62,17 @@
}
</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>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>

71
src/pages/options_src/Services/Services.svelte
View File

@ -1,6 +1,4 @@
<script>
import Checkbox from "../../components/RowCheckbox.svelte"
import RowSelect from "../../components/RowSelect.svelte"
import Row from "../../components/Row.svelte"
import Label from "../../components/Label.svelte"
import Select from "../../components/Select.svelte"
@ -11,6 +9,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
@ -58,29 +57,33 @@
<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>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>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>
@ -118,18 +121,20 @@
<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" },
]}
/>
<Row>
<Label>Unsupported embeds handling</Label>
<Select
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" },
]}
/>
</Row>
{#if selectedService == "search"}
<Row>
@ -163,6 +168,7 @@
--item-padding: 0 10px;
--border: none;
--border-hover: none;
--border-focused: none;
--width: 210px;
--background: var(--bg-secondary);
--list-background: var(--bg-secondary);
@ -178,7 +184,6 @@
justify-content: start;
align-items: center;
}
:global(.svelte_select img, .svelte_select svg) {
margin-right: 10px;
height: 26px;

14
src/pages/options_src/Sidebar.svelte
View File

@ -40,4 +40,18 @@
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;
}
}
</style>

2
src/pages/popup/index.html
View File

@ -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>

88
src/pages/stylesheets/styles.css
View File

@ -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%;
} */