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

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

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 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 [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 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 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 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 ### ### 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. 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) - [license](https://github.com/twbs/bootstrap/blob/v3.3.7/LICENSE)
* Bootstrap: [homepage](https://getbootstrap.com/) - [snapshot](https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip) * 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) * 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) * 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) * 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) * 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) * 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 ## ## Frequently Asked Questions ##

View File

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

View File

@ -151,6 +151,7 @@ async function formWrite(options) {
function formSetupEventListeners() { function formSetupEventListeners() {
$('#dict-purge-link').click(utilAsync(onDictionaryPurge)); $('#dict-purge-link').click(utilAsync(onDictionaryPurge));
$('#dict-file').change(utilAsync(onDictionaryImport)); $('#dict-file').change(utilAsync(onDictionaryImport));
$('#dict-file-button').click(onDictionaryImportButtonClick);
$('#field-templates-reset').click(utilAsync(onAnkiFieldTemplatesReset)); $('#field-templates-reset').click(utilAsync(onAnkiFieldTemplatesReset));
$('input, select, textarea').not('.anki-model').not('.profile-form *').change(utilAsync(onFormOptionsChanged)); $('input, select, textarea').not('.anki-model').not('.profile-form *').change(utilAsync(onFormOptionsChanged));
@ -240,6 +241,8 @@ async function onFormOptionsChanged(e) {
} }
async function onReady() { async function onReady() {
showExtensionInformation();
formSetupEventListeners(); formSetupEventListeners();
await profileOptionsSetup(); await profileOptionsSetup();
@ -446,6 +449,11 @@ async function onDictionaryPurge(e) {
} }
} }
function onDictionaryImportButtonClick() {
const dictFile = document.querySelector('#dict-file');
dictFile.click();
}
async function onDictionaryImport(e) { async function onDictionaryImport(e) {
const dictFile = $('#dict-file'); const dictFile = $('#dict-file');
const dictControls = $('#dict-importer').hide(); const dictControls = $('#dict-importer').hide();
@ -741,3 +749,16 @@ function storageSpinnerShow(show) {
spinner.hide(); 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}`;
}

View File

@ -8,10 +8,10 @@
<link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container">
<h3>Yomichan License</h3> <h3>Yomichan License</h3>
<pre> <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 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 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> </pre>
<h3>EDRDG License</h3> <h3>EDRDG License</h3>
<pre> <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 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="http://www.edrdg.org/"> Electronic Dictionary Research and Development Group</a>, 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="http://www.edrdg.org/edrdg/licence.html">licence</a>. and are used in conformance with the Group's <a href="https://www.edrdg.org/edrdg/licence.html">licence</a>.
</pre> </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>
</div> </div>
</body> </body>

View File

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

View File

@ -6,116 +6,14 @@
<title>Yomichan Options</title> <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.min.css">
<link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
<style> <link rel="stylesheet" type="text/css" href="/bg/css/settings.css">
#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>
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container">
<div class="page-header">
<h1>Yomichan Options</h1>
</div>
<div class="profile-form"> <div class="profile-form">
<h3>Profiles</h3> <h3>Profiles</h3>
@ -211,7 +109,8 @@
<div class="input-group-addon condition-prefix"></div> <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-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> <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 class="input-group-btn"><button class="btn btn-danger condition-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></div>
</div></template> </div></template>
<template id="condition-group-separator-template"><div class="input-group"> <template id="condition-group-separator-template"><div class="input-group">
@ -293,14 +192,14 @@
<div class="form-group"> <div class="form-group">
<div class="row"> <div class="row">
<div class="col-xs-6"> <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"> <select class="form-control" id="popup-horizontal-text-position">
<option value="below">Below text</option> <option value="below">Below text</option>
<option value="above">Above text</option> <option value="above">Above text</option>
</select> </select>
</div> </div>
<div class="col-xs-6"> <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"> <select class="form-control" id="popup-vertical-text-position">
<option value="default">Same as for horizontal text</option> <option value="default">Same as for horizontal text</option>
<option value="before">Before text reading direction</option> <option value="before">Before text reading direction</option>
@ -315,11 +214,11 @@
<div class="form-group options-advanced"> <div class="form-group options-advanced">
<div class="row"> <div class="row">
<div class="col-xs-6"> <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"> <input type="number" min="1" id="popup-width" class="form-control">
</div> </div>
<div class="col-xs-6"> <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"> <input type="number" min="1" id="popup-height" class="form-control">
</div> </div>
</div> </div>
@ -328,11 +227,11 @@
<div class="form-group options-advanced"> <div class="form-group options-advanced">
<div class="row"> <div class="row">
<div class="col-xs-6"> <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"> <input type="number" min="0" id="popup-horizontal-offset" class="form-control">
</div> </div>
<div class="col-xs-6"> <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"> <input type="number" min="0" id="popup-vertical-offset" class="form-control">
</div> </div>
</div> </div>
@ -341,11 +240,11 @@
<div class="form-group options-advanced"> <div class="form-group options-advanced">
<div class="row"> <div class="row">
<div class="col-xs-6"> <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"> <input type="number" min="0" id="popup-horizontal-offset2" class="form-control">
</div> </div>
<div class="col-xs-6"> <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"> <input type="number" min="0" id="popup-vertical-offset2" class="form-control">
</div> </div>
</div> </div>
@ -414,7 +313,7 @@
</p> </p>
<div class="checkbox"> <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>
<div class="checkbox"> <div class="checkbox">
@ -469,7 +368,8 @@
<a href="https://foosoft.net/projects/yomichan" target="_blank" rel="noopener">download free dictionaries</a> <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. for use with this extension and to learn about importing proprietary EPWING dictionaries.
</p> </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>
</div> </div>
@ -503,7 +403,7 @@
</div></div> </div></div>
<div> <div>
<input type="button" value="Refresh" id="storage-refresh" /> <button class="btn btn-default" id="storage-refresh">Refresh</button>
</div> </div>
</div> </div>
@ -620,6 +520,29 @@
</div> </div>
</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> <div>
<h3>Support Development</h3> <h3>Support Development</h3>
@ -639,7 +562,7 @@
<pre id="debug"></pre> <pre id="debug"></pre>
<div class="pull-right bottom-links"> <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>
</div> </div>