web: Refactor extension settings page
This commit is contained in:
relrelb
Mike Welsh
parent
304d618f27
commit
7b5d0b4359
|
|
@ -0,0 +1,9 @@
|
|||
.logo {
|
||||
max-width: 224px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
padding: 16px 32px;
|
||||
}
|
||||
|
|
@ -1,117 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Ruffle Settings</title>
|
||||
<script type="text/javascript" src="dist/main.js"></script>
|
||||
<style>
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
background-color: #37528C;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #FFAD33;
|
||||
font-weight: bold;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.Ruffle-logo {
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
background-color: #184778;
|
||||
box-shadow: 0 0 15px #0008;
|
||||
}
|
||||
|
||||
.Ruffle-user_settings {
|
||||
width: 384px;
|
||||
color: #FFF;
|
||||
text-align: left;
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
.Ruffle-user_setting {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.Ruffle-checkbox_with_slider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.Ruffle-user_setting_text {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.Ruffle-checkbox_slider {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
|
||||
width: 30px;
|
||||
height: 7px;
|
||||
border-radius: 5px;
|
||||
margin: 4px 0px auto 15px;
|
||||
|
||||
background-color: #966214;
|
||||
box-shadow: 0 2px 1px #0008;
|
||||
}
|
||||
|
||||
.Ruffle-checkbox_slider:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 20%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
background-color: #FFAD33;
|
||||
box-shadow: 0 1px 1px #0008;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 100%;
|
||||
|
||||
transition: left 0.1s;
|
||||
}
|
||||
|
||||
.Ruffle-checkbox_with_slider:checked ~ .Ruffle-checkbox_slider:after {
|
||||
left: 80%;
|
||||
}
|
||||
|
||||
.Ruffle-links {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/common.css" />
|
||||
<link rel="stylesheet" href="css/settings.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="Ruffle-logo">
|
||||
<a href="https://ruffle.rs/"><img src="logo/328.png" alt="Ruffle" width="224"></a>
|
||||
<div class="header">
|
||||
<a href="https://ruffle.rs/" target="_blank">
|
||||
<img
|
||||
src="logo/328.png"
|
||||
alt="Ruffle"
|
||||
data-canonical-src="logo/328.png"
|
||||
class="logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<form class="Ruffle-user_settings">
|
||||
<label class="Ruffle-user_setting" for="ruffle_enable">
|
||||
<input class="Ruffle-checkbox_with_slider" type="checkbox" name="ruffle_enable" id="ruffle_enable">
|
||||
<span class="Ruffle-user_setting_text"></span>
|
||||
<div class="Ruffle-checkbox_slider"></div>
|
||||
</label>
|
||||
<label class="Ruffle-user_setting" for="ignore_optout">
|
||||
<input class="Ruffle-checkbox_with_slider" type="checkbox" name="ignore_optout" id="ignore_optout">
|
||||
<span class="Ruffle-user_setting_text"></span>
|
||||
<div class="Ruffle-checkbox_slider"></div>
|
||||
</label>
|
||||
</form>
|
||||
|
||||
<div class="Ruffle-links">
|
||||
<a href="https://github.com/ruffle-rs/ruffle">GitHub</a>
|
||||
<a href="https://ruffle.rs/">Ruffle.rs</a>
|
||||
<div class="container">
|
||||
<div class="option">
|
||||
<input type="checkbox" id="ruffle_enable" />
|
||||
<label for="ruffle_enable">Play Flash content in Ruffle</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="checkbox" id="ignore_optout" />
|
||||
<label for="ignore_optout">Ignore website compatibility warnings</label>
|
||||
</div>
|
||||
</div>
|
||||
<script src="dist/settings.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,7 @@
|
|||
const { getSyncStorage, getI18nString, setSyncStorage } = require("./util.js");
|
||||
import * as utils from "./utils";
|
||||
import { bindBooleanOptions } from "./common";
|
||||
|
||||
getSyncStorage(["ruffleEnable", "ignoreOptout"], function (data) {
|
||||
var playFlashMessage = getI18nString("settings_ruffle_enable");
|
||||
var ignoreOptoutMessage = getI18nString("settings_page_ignore_optout");
|
||||
var titleText = getI18nString("settings_page");
|
||||
var saveText = getI18nString("save_settings");
|
||||
var playFlashLabel = document.getElementById("enablelabel");
|
||||
var ignoreOptoutLabel = document.getElementById("ignorelabel");
|
||||
var playFlashCheckbox = document.getElementById("enable");
|
||||
var ignoreOptoutCheckbox = document.getElementById("ignoreoptout");
|
||||
var saveButton = document.getElementById("save");
|
||||
var title = document.getElementById("title");
|
||||
title.innerHTML = titleText;
|
||||
document.title = titleText;
|
||||
playFlashLabel.innerHTML = playFlashMessage + "<br />";
|
||||
ignoreOptoutLabel.innerHTML = ignoreOptoutMessage + "<br />";
|
||||
saveButton.value = saveText;
|
||||
playFlashCheckbox.checked = data.ruffleEnable;
|
||||
ignoreOptoutCheckbox.checked = data.ignoreOptout;
|
||||
saveButton.onclick = function () {
|
||||
setSyncStorage({
|
||||
ruffleEnable: playFlashCheckbox.checked,
|
||||
ignoreOptout: ignoreOptoutCheckbox.checked,
|
||||
});
|
||||
alert(getI18nString("settings_saved"));
|
||||
};
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
document.title = utils.i18n.getMessage("settings_page");
|
||||
bindBooleanOptions();
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue