alex/yomichan
1
Fork 0
Code Releases Activity

Merge pull request #226 from toasted-nutbread/settings-style

Browse Source 
Style updates and fixes
This commit is contained in:
Alex Yatskov 2019-09-30 19:51:48 -07:00 committed by GitHub
commit eadd03624c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 253 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@ -117,7 +117,7 @@ primary language is not English, you may consider also importing the English ver
Yomichan supports the use of custom dictionaries including the esoteric but popular
[EPWING](https://ja.wikipedia.org/wiki/EPWING) format. They were often utilized in portable electronic dictionaries
similar to the ones pictured below. These dictionaries are often sought after by language learners for their correctness
and excellent coverage of the Japanese language.
and excellent coverage of the Japanese language.
Unfortunately, as most of the dictionaries released in this format are proprietary I am unable to bundle them with
Yomichan. You will need to procure these dictionaries yourself and import them with [Yomichan
@ -252,16 +252,16 @@ tmpl/*.html -f ext/bg/js/templates.js` from the project's base directory to comp
### Dependencies ###
Yomichan uses several third-party libraries to function. Below are links to homepages and snapshots of the exact
Yomichan uses several third-party libraries to function. Below are links to homepages, snapshots, and licenses of the exact
versions packaged.
* Bootstrap Toggle: [homepage](https://www.bootstraptoggle.com/) - [snapshot](https://github.com/minhur/bootstrap-toggle/archive/b76c094.zip)
* Bootstrap: [homepage](https://getbootstrap.com/) - [snapshot](https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip)
* Dexie: [homepage](https://dexie.org/) - [snapshot](https://github.com/dfahlander/Dexie.js/archive/v2.0.0-beta.10.zip)
* Handlebars: [homepage](https://handlebarsjs.com/) - [snapshot](http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-714a4c4.js)
* JQuery: [homepage](https://blog.jquery.com/) - [snapshot](https://code.jquery.com/jquery-3.2.1.min.js)
* JSZip: [homepage](https://stuk.github.io/jszip/) - [snapshot](https://raw.githubusercontent.com/Stuk/jszip/de7f52fbcba485737bef7923a83f0fad92d9f5bc/dist/jszip.min.js)
* WanaKana: [homepage](https://wanakana.com/) - [snapshot](https://raw.githubusercontent.com/WaniKani/WanaKana/7c4a052/gh-pages/assets/js/wanakana.min.js)
* Bootstrap: [homepage](https://getbootstrap.com/) - [snapshot](https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip) - [license](https://github.com/twbs/bootstrap/blob/v3.3.7/LICENSE)
* Bootstrap Toggle: [homepage](https://www.bootstraptoggle.com/) - [snapshot](https://github.com/minhur/bootstrap-toggle/archive/b76c094.zip) - [license](https://github.com/minhur/bootstrap-toggle/blob/2.2.0/LICENSE)
* Dexie: [homepage](https://dexie.org/) - [snapshot](https://github.com/dfahlander/Dexie.js/archive/v2.0.0-beta.10.zip) - [license](https://github.com/dfahlander/Dexie.js/blob/v2.0.0-beta.10/LICENSE)
* Handlebars: [homepage](https://handlebarsjs.com/) - [snapshot](http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-714a4c4.js) - [license](https://github.com/wycats/handlebars.js/blob/v4.0.6/LICENSE)
* jQuery: [homepage](https://blog.jquery.com/) - [snapshot](https://code.jquery.com/jquery-3.2.1.min.js) - [license](https://github.com/jquery/jquery/blob/3.2.1/LICENSE.txt)
* JSZip: [homepage](https://stuk.github.io/jszip/) - [snapshot](https://raw.githubusercontent.com/Stuk/jszip/de7f52fbcba485737bef7923a83f0fad92d9f5bc/dist/jszip.min.js) - [license](https://github.com/Stuk/jszip/blob/v3.1.3/LICENSE.markdown)
* WanaKana: [homepage](https://wanakana.com/) - [snapshot](https://raw.githubusercontent.com/WaniKani/WanaKana/7c4a052/gh-pages/assets/js/wanakana.min.js) - [license](https://github.com/WaniKani/WanaKana/blob/2.2.3/LICENSE)
## Frequently Asked Questions ##

18
ext/bg/context.html
View File

@ -14,20 +14,20 @@
.btn-group {
display: flex;
margin-top: 10px;
white-space: nowrap;
}
</style>
</head>
<body>
<p>
<div>
<input type="checkbox" id="enable-search">
</p>
<p>
<div class="btn-group" style="white-space: nowrap">
<button type="button" id="open-search" title="Search (Alt + Insert)" class="btn btn-default btn-xs glyphicon glyphicon-search"></button>
<button type="button" id="open-options" title="Options" class="btn btn-default btn-xs glyphicon glyphicon-wrench"></button>
<button type="button" id="open-help" title="Help" class="btn btn-default btn-xs glyphicon glyphicon-question-sign"></button>
</div>
</p>
</div>
<div class="btn-group">
<button type="button" id="open-search" title="Search (Alt + Insert)" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" id="open-options" title="Options" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-wrench"></span></button>
<button type="button" id="open-help" title="Help" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-question-sign"></span></button>
</div>
<script src="/mixed/lib/jquery.min.js"></script>
<script src="/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.js"></script>

154
ext/bg/css/settings.css Normal file
View File

@ -0,0 +1,154 @@
/*
* Copyright (C) 2019 Alex Yatskov <alex@foosoft.net>
* Author: Alex Yatskov <alex@foosoft.net>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
#anki-spinner, #anki-general, #anki-error,
#dict-spinner, #dict-error, #dict-warning, #dict-purge, #dict-import-progress,
#debug, .options-advanced, .storage-hidden, #storage-spinner {
display: none;
}
.tab-content {
border-bottom: 1px #ddd solid;
border-left: 1px #ddd solid;
border-right: 1px #ddd solid;
padding: 10px;
}
#field-templates {
font-family: monospace;
overflow-x: hidden;
white-space: pre;
}
.bottom-links {
padding-bottom: 1em;
}
.label-light {
font-weight: normal;
}
.form-control.is-invalid {
border-color: #f00000;
}
.condition {
display: flex;
-flex-wrap: wrap;
}
.condition-input {
flex: 1 1 auto;
}
.condition-line-break {
flex: 1 0 100%;
display: none;
}
.condition>.input-group-btn {
width: auto;
}
.condition>.condition-prefix:after {
content: "IF";
}
.condition:nth-child(n+2)>.condition-prefix:after {
content: "AND";
}
.input-group .condition-prefix {
flex: 0 0 auto;
}
.input-group .condition-prefix,
.input-group .condition-group-separator-label {
width: 60px;
text-align: center;
}
.input-group .condition-group-separator-label {
padding: 6px 12px;
font-weight: bold;
display: inline-block;
}
.input-group .condition-type,
.input-group .condition-operator {
width: auto;
text-align: center;
text-align-last: center;
}
.condition-group>.condition>div:first-child {
border-bottom-left-radius: 0;
}
.condition-group>.condition:nth-child(n+2)>div:first-child {
border-top-left-radius: 0;
}
.condition-group>.condition:nth-child(n+2)>div:last-child>button {
border-top-right-radius: 0;
}
.condition-group>.condition:nth-last-child(n+2)>div:last-child>button {
border-bottom-right-radius: 0;
}
.condition-group-options>.condition-add {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.condition-groups>*:last-of-type {
display: none;
}
#custom-popup-css {
width: 100%;
min-height: 34px;
height: 96px;
resize: vertical;
font-family: 'Courier New', Courier, monospace;
white-space: pre;
}
[data-show-for-browser] {
display: none;
}
[data-browser=edge] [data-show-for-browser~=edge],
[data-browser=chrome] [data-show-for-browser~=chrome],
[data-browser=firefox] [data-show-for-browser~=firefox],
[data-browser=firefox-mobile] [data-show-for-browser~=firefox-mobile] {
display: initial;
}
@media screen and (max-width: 740px) {
.col-xs-6 {
float: none;
width: 100%;
}
.col-xs-6+.col-xs-6 {
margin-top: 15px;
}
}
@media screen and (max-width: 600px) {
.condition {
flex-wrap: wrap;
}
.condition-input {
order: 2;
}
.condition-line-break {
display: block;
order: 1;
}
}

21
ext/bg/js/settings.js
View File

@ -151,6 +151,7 @@ async function formWrite(options) {
function formSetupEventListeners() {
$('#dict-purge-link').click(utilAsync(onDictionaryPurge));
$('#dict-file').change(utilAsync(onDictionaryImport));
$('#dict-file-button').click(onDictionaryImportButtonClick);
$('#field-templates-reset').click(utilAsync(onAnkiFieldTemplatesReset));
$('input, select, textarea').not('.anki-model').not('.profile-form *').change(utilAsync(onFormOptionsChanged));
@ -240,6 +241,8 @@ async function onFormOptionsChanged(e) {
}
async function onReady() {
showExtensionInformation();
formSetupEventListeners();
await profileOptionsSetup();
@ -446,6 +449,11 @@ async function onDictionaryPurge(e) {
}
}
function onDictionaryImportButtonClick() {
const dictFile = document.querySelector('#dict-file');
dictFile.click();
}
async function onDictionaryImport(e) {
const dictFile = $('#dict-file');
const dictControls = $('#dict-importer').hide();
@ -741,3 +749,16 @@ function storageSpinnerShow(show) {
spinner.hide();
}
}
/*
* Information
*/
function showExtensionInformation() {
const node = document.getElementById('extension-info');
if (node === null) { return; }
const manifest = chrome.runtime.getManifest();
node.textContent = `${manifest.name} v${manifest.version}`;
}

20
ext/bg/legal.html
View File

@ -8,10 +8,10 @@
<link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container-fluid">
<div class="container">
<h3>Yomichan License</h3>
<pre>
Copyright (C) 2016-2017 Alex Yatskov
Copyright (C) 2016-2019 Alex Yatskov
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
@ -28,10 +28,20 @@ along with this program. If not, see &lt;http://www.gnu.org/licenses/&gt;.
</pre>
<h3>EDRDG License</h3>
<pre>
This package uses the <a href="http://www.csse.monash.edu.au/~jwb/edict.html">EDICT</a> and <a href="http://www.csse.monash.edu.au/~jwb/kanjidic.html">KANJIDIC</a> dictionary files. These files are
the property of the <a href="http://www.edrdg.org/"> Electronic Dictionary Research and Development Group</a>,
and are used in conformance with the Group's <a href="http://www.edrdg.org/edrdg/licence.html">licence</a>.
This package uses the <a href="https://www.edrdg.org/jmdict/edict.html">EDICT</a> and <a href="https://www.edrdg.org/wiki/index.php/KANJIDIC_Project">KANJIDIC</a> dictionary files. These files are
the property of the <a href="https://www.edrdg.org/">Electronic Dictionary Research and Development Group</a>,
and are used in conformance with the Group's <a href="https://www.edrdg.org/edrdg/licence.html">licence</a>.
</pre>
<h3>Third-Party Software Licenses</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/blob/v3.3.7/LICENSE" target="_blank" rel="noopener">Bootstrap v3.3.7</a></li>
<li><a href="https://github.com/minhur/bootstrap-toggle/blob/2.2.0/LICENSE" target="_blank" rel="noopener">Bootstrap Toggle v2.2.0</a></li>
<li><a href="https://github.com/dfahlander/Dexie.js/blob/v2.0.0-beta.10/LICENSE" target="_blank" rel="noopener">Dexie v2.0.0-beta.10</a></li>
<li><a href="https://github.com/wycats/handlebars.js/blob/v4.0.6/LICENSE" target="_blank" rel="noopener">Handlebars v4.0.6</a></li>
<li><a href="https://github.com/jquery/jquery/blob/3.2.1/LICENSE.txt" target="_blank" rel="noopener">jQuery v3.2.1</a></li>
<li><a href="https://github.com/Stuk/jszip/blob/v3.1.3/LICENSE.markdown" target="_blank" rel="noopener">JSZip v3.1.3</a></li>
<li><a href="https://github.com/WaniKani/WanaKana/blob/2.2.3/LICENSE" target="_blank" rel="noopener">WanaKana v2.2.3</a></li>
</ul>
</div>
</div>
</body>

2
ext/bg/search.html
View File

@ -9,7 +9,7 @@
<link rel="stylesheet" type="text/css" href="/mixed/css/display.css">
</head>
<body>
<div class="container-fluid">
<div class="container">
<div id="intro" style="overflow: hidden;">
<div class="page-header">
<h1>Yomichan Search</h1>

165
ext/bg/settings.html
View File

@ -6,116 +6,14 @@
<title>Yomichan Options</title>
<link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
<style>
#anki-spinner, #anki-general, #anki-error,
#dict-spinner, #dict-error, #dict-warning, #dict-purge, #dict-import-progress,
#debug, .options-advanced, .storage-hidden, #storage-spinner {
display: none;
}
.tab-content {
border-bottom: 1px #ddd solid;
border-left: 1px #ddd solid;
border-right: 1px #ddd solid;
padding: 10px;
}
#field-templates {
font-family: monospace;
overflow-x: hidden;
white-space: pre;
}
.bottom-links {
padding-bottom: 1em;
}
.label-light {
font-weight: normal;
}
.form-control.is-invalid {
border-color: #f00000;
}
.condition>.condition-prefix:after {
content: "IF";
}
.condition:nth-child(n+2)>.condition-prefix:after {
content: "AND";
}
.input-group .condition-prefix,
.input-group .condition-group-separator-label {
width: 60px;
text-align: center;
}
.input-group .condition-group-separator-label {
padding: 6px 12px;
font-weight: bold;
display: inline-block;
}
.input-group .condition-type,
.input-group .condition-operator {
width: auto;
text-align: center;
text-align-last: center;
}
.condition-group>.condition>div:first-child {
border-bottom-left-radius: 0;
}
.condition-group>.condition:nth-child(n+2)>div:first-child {
border-top-left-radius: 0;
}
.condition-group>.condition:nth-child(n+2)>div:last-child>button {
border-top-right-radius: 0;
}
.condition-group>.condition:nth-last-child(n+2)>div:last-child>button {
border-bottom-right-radius: 0;
}
.condition-group-options>.condition-add {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.condition-groups>*:last-of-type {
display: none;
}
#custom-popup-css {
width: 100%;
min-height: 34px;
height: 96px;
resize: vertical;
font-family: 'Courier New', Courier, monospace;
white-space: pre;
}
[data-show-for-browser] {
display: none;
}
[data-browser=edge] [data-show-for-browser~=edge],
[data-browser=chrome] [data-show-for-browser~=chrome],
[data-browser=firefox] [data-show-for-browser~=firefox],
[data-browser=firefox-mobile] [data-show-for-browser~=firefox-mobile] {
display: initial;
}
@media screen and (max-width: 740px) {
.col-xs-6 {
float: none;
width: 100%;
}
.col-xs-6+.col-xs-6 {
margin-top: 15px;
}
}
</style>
<link rel="stylesheet" type="text/css" href="/bg/css/settings.css">
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="page-header">
<h1>Yomichan Options</h1>
</div>
<div class="profile-form">
<h3>Profiles</h3>
@ -211,7 +109,8 @@
<div class="input-group-addon condition-prefix"></div>
<div class="input-group-btn"><select class="form-control btn btn-default condition-type"><optgroup label="Type"></optgroup></select></div>
<div class="input-group-btn"><select class="form-control btn btn-default condition-operator"><optgroup label="Operator"></optgroup></select></div>
<input type="text" class="form-control" />
<div class="condition-line-break"></div>
<div class="condition-input"><input type="text" class="form-control" /></div>
<div class="input-group-btn"><button class="btn btn-danger condition-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></div>
</div></template>
<template id="condition-group-separator-template"><div class="input-group">
@ -293,14 +192,14 @@
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label for="popup-display-mode">Popup position for horizontal text</label>
<label for="popup-horizontal-text-position">Popup position for horizontal text</label>
<select class="form-control" id="popup-horizontal-text-position">
<option value="below">Below text</option>
<option value="above">Above text</option>
</select>
</div>
<div class="col-xs-6">
<label for="popup-display-mode">Popup position for vertical text</label>
<label for="popup-vertical-text-position">Popup position for vertical text</label>
<select class="form-control" id="popup-vertical-text-position">
<option value="default">Same as for horizontal text</option>
<option value="before">Before text reading direction</option>
@ -315,11 +214,11 @@
<div class="form-group options-advanced">
<div class="row">
<div class="col-xs-6">
<label for="popup-display-mode">Popup width <span class="label-light">(in pixels)</span></label>
<label for="popup-width">Popup width <span class="label-light">(in pixels)</span></label>
<input type="number" min="1" id="popup-width" class="form-control">
</div>
<div class="col-xs-6">
<label for="popup-display-mode">Popup height <span class="label-light">(in pixels)</span></label>
<label for="popup-height">Popup height <span class="label-light">(in pixels)</span></label>
<input type="number" min="1" id="popup-height" class="form-control">
</div>
</div>
@ -328,11 +227,11 @@
<div class="form-group options-advanced">
<div class="row">
<div class="col-xs-6">
<label for="popup-display-mode">Horizontal popup offset <span class="label-light">(in pixels)</span></label>
<label for="popup-horizontal-offset">Horizontal popup offset <span class="label-light">(in pixels)</span></label>
<input type="number" min="0" id="popup-horizontal-offset" class="form-control">
</div>
<div class="col-xs-6">
<label for="popup-display-mode">Vertical popup offset <span class="label-light">(in pixels)</span></label>
<label for="popup-vertical-offset">Vertical popup offset <span class="label-light">(in pixels)</span></label>
<input type="number" min="0" id="popup-vertical-offset" class="form-control">
</div>
</div>
@ -341,11 +240,11 @@
<div class="form-group options-advanced">
<div class="row">
<div class="col-xs-6">
<label for="popup-display-mode">Horizontal popup offset for vertical text <span class="label-light">(in pixels)</span></label>
<label for="popup-horizontal-offset2">Horizontal popup offset for vertical text <span class="label-light">(in pixels)</span></label>
<input type="number" min="0" id="popup-horizontal-offset2" class="form-control">
</div>
<div class="col-xs-6">
<label for="popup-display-mode">Vertical popup offset for vertical text <span class="label-light">(in pixels)</span></label>
<label for="popup-vertical-offset2">Vertical popup offset for vertical text <span class="label-light">(in pixels)</span></label>
<input type="number" min="0" id="popup-vertical-offset2" class="form-control">
</div>
</div>
@ -414,7 +313,7 @@
</p>
<div class="checkbox">
<label><input type="checkbox" id="enable-search-within-first-popup"> Enable search within the first popup with Alt+B</label>
<label><input type="checkbox" id="enable-search-within-first-popup"> Enable search when clicking glossary entries</label>
</div>
<div class="checkbox">
@ -469,7 +368,8 @@
<a href="https://foosoft.net/projects/yomichan" target="_blank" rel="noopener">download free dictionaries</a>
for use with this extension and to learn about importing proprietary EPWING dictionaries.
</p>
<input type="file" id="dict-file">
<button class="btn btn-primary" id="dict-file-button">Import Dictionary</button>
<div hidden><input type="file" id="dict-file"></div>
</div>
</div>
@ -503,7 +403,7 @@
</div></div>
<div>
<input type="button" value="Refresh" id="storage-refresh" />
<button class="btn btn-default" id="storage-refresh">Refresh</button>
</div>
</div>
@ -620,6 +520,29 @@
</div>
</div>
<div>
<h3>Keyboard Shortcuts</h3>
<p class="help-block">
Yomichan includes keyboard shortcuts for common actions which can be adjusted
using the web browser's settings.
Instructions on how to access this settings page are listed below for a few browsers.
</p>
<h4>Chrome</h4>
<ul class="help-block">
<li>Open the settings page (<a href="chrome://settings/">chrome://settings/</a>)</li>
<li>Click the "Extensions" link in the left sidebar (<a href="chrome://extensions/">chrome://extensions/</a>)</li>
<li>Open the left side panel using the hamburger (<strong>&#8801;</strong>) menu button, then click "Keyboard shortcuts"</li>
</ul>
<h4>Firefox</h4>
<ul class="help-block">
<li>Open the extensions page (<a href="about:addons">about:addons</a>)</li>
<li>Click the button on the right with the gear icon, then click "Manage Extension Shortcuts"</li>
</ul>
</div>
<div>
<h3>Support Development</h3>
@ -639,7 +562,7 @@
<pre id="debug"></pre>
<div class="pull-right bottom-links">
<small><a href="search.html">Search</a> &bull; <a href="https://foosoft.net/projects/yomichan/" target="_blank" rel="noopener">Homepage</a> &bull; <a href="legal.html">Legal</a></small>
<small><span id="extension-info"></span> &bull; <a href="search.html">Search</a> &bull; <a href="https://foosoft.net/projects/yomichan/" target="_blank" rel="noopener">Homepage</a> &bull; <a href="legal.html">Legal</a></small>
</div>
</div>