Formatting popup
This commit is contained in:
parent
4ed39f9e23
commit
404f1a92a3
|
|
@ -9,10 +9,10 @@
|
|||
"browser_action": {
|
||||
"default_title": "MetamorPOV",
|
||||
"default_icon": {
|
||||
"32": "icons/icon-32.png",
|
||||
"48": "icons/icon-48.png"
|
||||
"32": "img/mpov-32.png",
|
||||
"48": "img/mpov-48.png"
|
||||
},
|
||||
"default_popup": "popup.html"
|
||||
"default_popup": "popup/popup.html"
|
||||
},
|
||||
"permissions": [
|
||||
"storage",
|
||||
|
|
@ -20,12 +20,12 @@
|
|||
],
|
||||
|
||||
"icons": {
|
||||
"16": "icons/icon-16.png",
|
||||
"32": "icons/icon-32.png",
|
||||
"48": "icons/icon-48.png",
|
||||
"64": "icons/icon-64.png",
|
||||
"96": "icons/icon-96.png",
|
||||
"128": "icons/icon-128.png"
|
||||
"16": "img/mpov-16.png",
|
||||
"32": "img/mpov-32.png",
|
||||
"48": "img/mpov-48.png",
|
||||
"64": "img/mpov-64.png",
|
||||
"96": "img/mpov-96.png",
|
||||
"128": "img/mpov-128.png"
|
||||
},
|
||||
|
||||
"content_scripts": [
|
||||
|
|
@ -39,9 +39,8 @@
|
|||
]
|
||||
}
|
||||
],
|
||||
"incognito": "split",
|
||||
"background": {
|
||||
"page": "popup.html"
|
||||
"page": "popup/popup.html"
|
||||
},
|
||||
"homepage_url": "https://git.viscogliosi-pate.com/jean/metamorpov"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,100 +1,88 @@
|
|||
:root {
|
||||
--background-color: white;
|
||||
--text-color: black;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
color: #2C3531;
|
||||
width: 380px;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
width: 350px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
padding:10px;
|
||||
margin: 8px;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
a{
|
||||
color: #51A99C;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
a:hover{
|
||||
color: #1E7669;
|
||||
#hostname {
|
||||
font-size: 14pt;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label *:not([type="checkbox"]){
|
||||
display:block;
|
||||
#display-enabled {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
|
||||
.other-words input:not([type="checkbox"]){
|
||||
margin-top:0.5em;
|
||||
width:100%;
|
||||
}
|
||||
.other-words .other, .other-words .replace-with{
|
||||
width:98%;
|
||||
}
|
||||
.other-words .change{
|
||||
margin-right:0;
|
||||
}
|
||||
.change {
|
||||
border-color: rgb(49, 47, 47);
|
||||
border-width: 1px;
|
||||
border-radius: 0.3em;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.change:hover {
|
||||
background-color: #84DCCF;
|
||||
#display-enabled img {
|
||||
width: 50%;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
#clear-name, #refresh-replacements{
|
||||
margin-top:0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
width:96%;
|
||||
|
||||
#display-enabled h2 {
|
||||
font-size: 14pt;
|
||||
font-weight: 400;
|
||||
margin-right: 15%;
|
||||
}
|
||||
|
||||
#refresh-replacements {
|
||||
font-size: 1.005em;
|
||||
background-color: #EF626C;
|
||||
border-radius: 0.5em;
|
||||
color: white;
|
||||
border-color: rgba(0, 0, 0, 0);
|
||||
#display-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#display-features img {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#display-features p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
border-radius: 30px;
|
||||
width: 100%;
|
||||
font-size: 12pt;
|
||||
padding: 6px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
#refresh-replacements:hover {
|
||||
background-color: #D64953;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="text"]{
|
||||
width:70%;
|
||||
}
|
||||
.strikethrough{
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.one-saved-item:hover{
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.saved-items-list-wrapper{
|
||||
height:100px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
details {
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="button"]{
|
||||
margin-top: 0.8em;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
input[type="checkbox"]:hover{
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#src-code {
|
||||
font-size: 0.8em;
|
||||
ul {
|
||||
text-align: right;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a{
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,65 +5,48 @@
|
|||
<link href='popup.css' rel='stylesheet' type='text/css'>
|
||||
<script src="popup.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Website name here</h1>
|
||||
<h1>MetamorPOV is <b>TODO</b> for this website</h1>
|
||||
<main>
|
||||
<h1 id="hostname">TODO</h1>
|
||||
|
||||
<form id="change-name-form">
|
||||
<input type="text" id="change-name-form-text"/>
|
||||
<input type="submit" class="change" value="Change"/>
|
||||
</form>
|
||||
|
||||
<details>
|
||||
<summary>Need to replace something other than Y/N?</summary>
|
||||
<p><small>This change will go away when you refresh/go to another page unless you check the box next to "Store this replacement".</small></p>
|
||||
<p>
|
||||
<form id="replace-other-words-form" class="other-words">
|
||||
<label>
|
||||
<span>Value (e.g. L/N, E/C, etc):</span>
|
||||
<input type="text" id="replace-word" class="other"/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="is-case-sensitive">Case sensitive
|
||||
</label>
|
||||
<br><br>
|
||||
<label>
|
||||
<span>Replace with:</span>
|
||||
<input type="text" id="replace-with" class="replace-with"/>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" id="is-perm">Store this replacement
|
||||
</label>
|
||||
<input type="submit" class="change" value="Change">
|
||||
</form>
|
||||
</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary id="show-saved">Stored Replacements</summary>
|
||||
<p><small>To remove, simply click on a replacement. To change, re-enter in the previous section.</small></p>
|
||||
<div class="saved-items-list-wrapper">
|
||||
<ul id="saved-items-list">
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div>
|
||||
<details>
|
||||
<summary>⚙️ Settings</summary>
|
||||
<div><input type="checkbox" id="enable-observer"> Auto-detect page changes <small>(Wattpad support)</small><br></div>
|
||||
<div><input type="checkbox" id="pause"> Pause extension on "<span id="this-url"></span>"<br></div>
|
||||
<input type="checkbox" id="deactivate"> Deactivate extension
|
||||
</details>
|
||||
<div id="display-enabled">
|
||||
<img id="toggle" src="../img/toggle-on.svg" alt="Toggle"/>
|
||||
<h2>MetamorPOV is <b>TODO</b> for this website</h2>
|
||||
</div>
|
||||
|
||||
<input type="button" id="refresh-replacements" value="Refresh replacements"/>
|
||||
<div id="display-features">
|
||||
<div id="yn-usage">
|
||||
<img src="../img/check.svg" alt="Check"/>
|
||||
<p>Y/n is used on this page</p>
|
||||
</div>
|
||||
|
||||
<div id="prn-usage">
|
||||
<img src="../img/check.svg" alt="Check"/>
|
||||
<p>prn/ is used on this page</p>
|
||||
</div>
|
||||
|
||||
<div id="pov-usage">
|
||||
<img src="../img/check.svg" alt="Check"/>
|
||||
<p>pov/ is used on this page</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<button id="configure">
|
||||
<img src="../img/configure.svg" alt=""/>
|
||||
Configure name, pronouns, and POV
|
||||
</button>
|
||||
|
||||
<button id="refresh">
|
||||
<img src="../img/refresh.svg" alt=""/>
|
||||
Refresh replacements
|
||||
</button>
|
||||
|
||||
<ul class="links">
|
||||
<li><a href="https://git.viscogliosi-pate.com/jean/metamorpov/wiki" target="_blank">How to write for MetamorPOV</a></li>
|
||||
<li><a href="https://git.viscogliosi-pate.com/jean/metamorpov/issues" target="_blank">Report an issue</a></li>
|
||||
<li><a href="https://git.viscogliosi-pate.com/jean/metamorpov" target="_blank">Source code</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
DEACTIVATE_KEY = 'deactivate-this-extension-pls-interactive-fics-yalla-bina';
|
||||
MUTATION_OBSERVER_KEY = 'observe-this-dom-pls-interactive-fics-yalla-bina';
|
||||
PAUSED_KEY = 'pause-this-domain-pls-interactive-fics-yalla-bina';
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
|
@ -9,15 +8,12 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
document.getElementById('replace-other-words-form').addEventListener('submit', replaceOther)
|
||||
document.getElementById('show-saved').addEventListener('click', loadSaved)
|
||||
document.getElementById('refresh-replacements').addEventListener('click', refreshReplacements)
|
||||
document.getElementById('deactivate').addEventListener('click', toggleDeactivate)
|
||||
document.getElementById('enable-observer').addEventListener('click', toggleMutationObserver)
|
||||
document.getElementById('pause').addEventListener('click', togglePauseDomain)
|
||||
document.getElementById('toggle').addEventListener('click', togglePauseDomain)
|
||||
|
||||
// set settings buttons
|
||||
setDeactivateKey()
|
||||
setMutationObserverKey()
|
||||
setPauseDomainKey()
|
||||
addToucanBanner()
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -173,24 +169,6 @@ const togglePauseDomainLabel = (isPaused) => {
|
|||
document.getElementById('pause').checked = isPaused;
|
||||
}
|
||||
|
||||
const toggleDeactivate = () => {
|
||||
chrome.storage.sync.get(DEACTIVATE_KEY, obj => {
|
||||
const was_deactivated = obj[DEACTIVATE_KEY]
|
||||
toggleDeactivateLabel(!was_deactivated)
|
||||
|
||||
if (was_deactivated) {
|
||||
chrome.storage.sync.remove(DEACTIVATE_KEY)
|
||||
} else {
|
||||
const new_object = {}
|
||||
new_object[DEACTIVATE_KEY] = true
|
||||
chrome.storage.sync.set(new_object)
|
||||
}
|
||||
|
||||
chrome.tabs.reload()
|
||||
window.close()
|
||||
})
|
||||
}
|
||||
|
||||
const toggleMutationObserver = () => {
|
||||
chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => {
|
||||
const was_enabled = obj[MUTATION_OBSERVER_KEY]
|
||||
|
|
|
|||
Loading…
Reference in New Issue