Context popup update (#594)

* Add link to the help button

* Update context.html to not use bootstrap

Styles moved into a separate file
Update icons

* Update terminology to correspond to new icons
This commit is contained in:
toasted-nutbread 2020-06-21 15:57:18 -04:00 committed by GitHub
parent 0c69e54fde
commit 4ebee3e17c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 338 additions and 190 deletions

View File

@ -90,7 +90,7 @@ primary language is not English, you may consider also importing the English ver
[![](https://foosoft.net/projects/yomichan/img/ui-actions-thumb.png)](https://foosoft.net/projects/yomichan/img/ui-actions.png) [![](https://foosoft.net/projects/yomichan/img/ui-actions-thumb.png)](https://foosoft.net/projects/yomichan/img/ui-actions.png)
2. Click on the *spanner/monkey wrench* icon in the middle to open the options page. 2. Click on the *spanner/cog* icon in the middle to open the options page.
3. Import the dictionaries you wish to use for term and kanji searches. If you do not have any dictionaries installed 3. Import the dictionaries you wish to use for term and kanji searches. If you do not have any dictionaries installed
(or enabled), Yomichan will warn you that it is not ready for use by displaying an orange exclamation mark over its (or enabled), Yomichan will warn you that it is not ready for use by displaying an orange exclamation mark over its

View File

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/png" href="/mixed/img/icon16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/mixed/img/icon16.png" sizes="16x16">
@ -10,183 +10,51 @@
<link rel="icon" type="image/png" href="/mixed/img/icon48.png" sizes="48x48"> <link rel="icon" type="image/png" href="/mixed/img/icon48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/mixed/img/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/mixed/img/icon64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128"> <link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128">
<link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/bg/css/context.css">
<link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css"> </head>
<style type="text/css"> <body>
body {
padding: 10px;
}
h3 { <div id="mini">
margin-top: 10px; <label class="toggle">
} <input type="checkbox" id="enable-search">
label {
font-weight: normal;
}
#mini {
text-align: center;
}
#full {
display: none;
}
.btn-group {
display: flex;
justify-content: center;
margin-top: 10px;
white-space: nowrap;
}
html:root[data-mode=full] #mini {
display: none;
}
html:root[data-mode=full] #full {
display: initial;
}
.link-group {
display: block;
line-height: 1.5em;
margin: 0 -10px;
padding: 0.5em 10px;
cursor: pointer;
color: #333;
text-decoration: none;
background-color: transparent;
transition: background-color 0.125s linear 0s;
max-width: none;
}
.link-group:hover,
.link-group:active {
color: #333;
text-decoration: none;
}
.link-group:hover>.link-group-label,
.link-group:active>.link-group-label {
text-decoration: underline;
}
.link-group:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.link-group:active {
background-color: rgba(0, 0, 0, 0.1);
}
.link-group-icon {
width: 16px;
height: 16px;
text-align: center;
vertical-align: middle;
display: inline-block;
margin-right: 0.25em;
}
.link-group-icon>input {
margin: 0;
padding: 0;
}
.link-group-icon>.glyphicon {
top: 0;
}
.link-group-label {
vertical-align: middle;
}
.toggle {
width: 60px;
height: 34px;
position: relative;
overflow: hidden;
}
.toggle-group {
position: absolute;
width: 200%;
left: 0;
top: 0;
bottom: 0;
user-select: none;
}
.toggle-group.toggle-group-animated {
transition: transform 0.35s;
}
.toggle-on,
.toggle-off {
position: absolute;
top: 0;
bottom: 0;
margin: 0;
border: 0;
border-radius: 0;
}
.toggle-on {
padding-right: 24px;
left: 0;
right: 50%;
}
.toggle-off {
padding-left: 24px;
left: 50%;
right: 0;
}
.toggle-handle {
position: relative;
margin: 0 auto;
padding-top: 0;
padding-bottom: 0;
height: 100%;
width: 0;
border-width: 0 1px;
}
.toggle>input[type=checkbox] {
display: none;
}
.toggle>input[type=checkbox]:not(:checked)~.toggle-group {
transform: translateX(-50%);
}
</style>
</head>
<body>
<div id="mini">
<div>
<label class="btn btn-primary toggle">
<input type="checkbox" id="enable-search" />
<div class="toggle-group"> <div class="toggle-group">
<span class="btn btn-primary toggle-on">On</span> <span class="toggle-on">On</span>
<span class="btn btn-default active toggle-off">Off</span> <span class="btnx btn-defaulxt toggle-off">Off</span>
<span class="btn btn-default toggle-handle"></span> <span class="btnx xbtn-default toggle-handle"></span>
</div> </div>
</label> </label>
<div class="nav-button-container">
<a class="nav-button action-open-search" data-icon="magnifying-glass" title="Search (Alt + Insert)&#10;(Middle click to open in new tab)"></a>
<a class="nav-button action-open-options" data-icon="cog" title="Options&#10;(Middle click to open in new tab)"></a>
<a class="nav-button action-open-help" data-icon="question-mark" title="Help"></a>
</div> </div>
<div class="btn-group"> </div>
<a title="Search (Alt + Insert)&#10;(Middle click to open in new tab)" class="btn btn-default btn-xs action-open-search"><span class="glyphicon glyphicon-search"></span></a>
<a title="Options&#10;(Middle click to open in new tab)" class="btn btn-default btn-xs action-open-options"><span class="glyphicon glyphicon-wrench"></span></a> <div id="full">
<a title="Help" class="btn btn-default btn-xs action-open-help"><span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
<div id="full">
<h3 id="extension-info">Yomichan</h3> <h3 id="extension-info">Yomichan</h3>
<label class="link-group"> <label class="link-group">
<span class="link-group-icon"><input type="checkbox" id="enable-search2" /></span><span class="link-group-label">Enable content scanning</span> <span class="link-group-icon"><input type="checkbox" id="enable-search2" /></span><span class="link-group-label">Enable content scanning</span>
</label> </label>
<a class="link-group action-open-options"> <a class="link-group action-open-options">
<span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Options</span> <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Options</span>
</a> </a>
<a class="link-group action-open-search"> <a class="link-group action-open-search">
<span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Search</span> <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Search</span>
</a> </a>
<a class="link-group action-open-help"> <a class="link-group action-open-help">
<span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Help</span> <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Help</span>
</a> </a>
</div> </div>
<script src="/mixed/js/core.js"></script> <script src="/mixed/js/core.js"></script>
<script src="/mixed/js/comm.js"></script> <script src="/mixed/js/comm.js"></script>
<script src="/mixed/js/dom.js"></script> <script src="/mixed/js/dom.js"></script>
<script src="/mixed/js/api.js"></script> <script src="/mixed/js/api.js"></script>
<script src="/bg/js/options.js"></script> <script src="/bg/js/options.js"></script>
<script src="/bg/js/util.js"></script> <script src="/bg/js/util.js"></script>
<script src="/bg/js/context-main.js"></script> <script src="/bg/js/context-main.js"></script>
</body>
</body>
</html> </html>

282
ext/bg/css/context.css Normal file
View File

@ -0,0 +1,282 @@
/*
* Copyright (C) 2020 Yomichan Authors
*
* 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 <https://www.gnu.org/licenses/>.
*/
body {
padding: 10px;
margin: 0;
font-family: "Segoe UI", Tahoma, sans-serif;
font-size: 14px;
}
h3 {
margin: 10px 0;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
font-size: 24px;
color: inherit;
}
label {
font-weight: normal;
}
#mini {
text-align: center;
}
#full {
display: none;
}
:root[data-mode=full] #mini {
display: none;
}
:root[data-mode=full] #full {
display: initial;
}
.link-group {
display: block;
line-height: 1.5em;
margin: 0 -10px;
padding: 0.5em 10px;
cursor: pointer;
color: #333;
text-decoration: none;
background-color: transparent;
transition: background-color 0.125s linear 0s;
max-width: none;
}
.link-group:hover,
.link-group:active {
color: #333;
text-decoration: none;
}
.link-group:hover>.link-group-label,
.link-group:active>.link-group-label {
text-decoration: underline;
}
.link-group:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.link-group:active {
background-color: rgba(0, 0, 0, 0.1);
}
.link-group-icon {
width: 16px;
height: 16px;
text-align: center;
vertical-align: middle;
display: inline-block;
margin-right: 0.25em;
}
.link-group-icon>input {
margin: 0;
padding: 0;
}
.link-group-icon[data-icon=chevron]::after {
content: "";
display: block;
width: 100%;
height: 100%;
background-image: url(/mixed/img/right-chevron.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.link-group-label {
vertical-align: middle;
}
/* Toggle */
.toggle>input[type=checkbox] {
display: none;
}
.toggle>input[type=checkbox]:not(:checked)~.toggle-group {
transform: translateX(-50%);
}
.toggle {
box-sizing: border-box;
width: 60px;
height: 34px;
position: relative;
overflow: hidden;
border: 1px solid #245580;
border-radius: 4px;
display: inline-block;
padding: 6px 12px;
}
.toggle-group {
position: absolute;
width: 200%;
left: 0;
top: 0;
bottom: 0;
user-select: none;
}
body[data-loaded=true] .toggle-group {
transition: transform 0.35s;
}
.toggle-on,
.toggle-off,
.toggle-handle {
display: block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
.toggle-on,
.toggle-off {
position: absolute;
top: 0;
bottom: 0;
margin: 0;
border: 0;
}
.toggle-on {
padding-right: 24px;
left: 0;
right: 50%;
color: #ffffff;
background-color: #337ab7;
border-color: #2e6da4;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 3px 5px rgba(0, 0, 0, 0);
background-image: linear-gradient(#337ab7, #265a88);
background-repeat: repeat-x;
}
.toggle-on:focus,
.toggle-on:hover {
background-color: #265a88;
background-image: linear-gradient(#2d65a0, #265a88 50%);
}
.toggle-on:active {
background-color: #204d74;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.toggle-off {
padding-left: 24px;
left: 50%;
right: 0;
}
.toggle-handle {
position: relative;
margin: 0 auto;
padding-top: 0;
padding-bottom: 0;
height: 100%;
width: 0;
border-style: solid;
border-width: 0 1px;
border-radius: 4px;
border-color: #cccccc;
}
.toggle-off,
.toggle-handle {
color: #333333;
text-shadow: 0 1px 0 #ffffff;
background-color: #ffffff;
background-image: linear-gradient(#ffffff, #e0e0e0);
background-repeat: repeat-x;
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
.toggle-off:focus,
.toggle-off:hover,
.toggle-handle:focus,
.toggle-handle:hover {
background-color: #e6e6e6;
background-image: linear-gradient(#e0e0e0, #e6e6e6 50%);
border-color: #adadad;
}
.toggle-off:active,
.toggle-handle:active {
background-color:#d4d4d4;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
border-color: #8c8c8c;
}
/* Navigation buttons and icons */
.nav-button-container {
display: flex;
justify-content: center;
margin-top: 10px;
white-space: nowrap;
}
.nav-button {
background-image: linear-gradient(#f8f8f8, #e0e0e0);
border: 1px solid #cccccc;
margin: 0;
padding: 2px 3px;
margin: 0;
cursor: pointer;
}
.nav-button+.nav-button {
margin-left: -1px;
}
.nav-button::after {
content: "";
display: block;
width: 16px;
height: 16px;
background-position: center center;
background-size: 16px 16px;
background-repeat: no-repeat;
box-sizing: content-box;
}
.nav-button:hover {
z-index: 1;
border-color: #aaaaaa;
background-image: linear-gradient(#e8e8e8, #d0d0d0);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}
.nav-button:active {
z-index: 1;
border-color: #808080;
background-image: linear-gradient(#c8c8c8, #e0e0e0);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}
.nav-button:focus {
outline: none;
}
.nav-button[data-icon=magnifying-glass]::after {
background-image: url(/mixed/img/magnifying-glass.svg);
}
.nav-button[data-icon=cog]::after {
background-image: url(/mixed/img/cog.svg);
}
.nav-button[data-icon=question-mark]::after {
background-image: url(/mixed/img/question-mark-circle.svg);
}
.nav-button:first-of-type {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.nav-button:last-of-type {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

View File

@ -27,7 +27,7 @@
<ol> <ol>
<li>Click on the <img src="/mixed/img/yomichan-icon.svg" alt> icon in the browser toolbar to open the Yomichan actions dialog.</li> <li>Click on the <img src="/mixed/img/yomichan-icon.svg" alt> icon in the browser toolbar to open the Yomichan actions dialog.</li>
<li>Click on the <em>monkey wrench</em> icon in the middle to open the options page.</li> <li>Click on the <em>cog</em> icon in the middle to open the options page.</li>
<li>Import the dictionaries you wish to use for term and Kanji searches.</li> <li>Import the dictionaries you wish to use for term and Kanji searches.</li>
<li>Hold down <kbd>Shift</kbd> key or the middle mouse button as you move your mouse over text to display definitions.</li> <li>Hold down <kbd>Shift</kbd> key or the middle mouse button as you move your mouse over text to display definitions.</li>
<li>Click on the <img src="/mixed/img/play-audio.svg" alt> icon to hear the term pronounced by a native speaker.</li> <li>Click on the <img src="/mixed/img/play-audio.svg" alt> icon to hear the term pronounced by a native speaker.</li>

View File

@ -66,7 +66,7 @@ async function mainInner() {
setupButtonEvents('.action-open-search', 'search', chrome.runtime.getURL('/bg/search.html')); setupButtonEvents('.action-open-search', 'search', chrome.runtime.getURL('/bg/search.html'));
setupButtonEvents('.action-open-options', 'options', chrome.runtime.getURL(manifest.options_ui.page)); setupButtonEvents('.action-open-options', 'options', chrome.runtime.getURL(manifest.options_ui.page));
setupButtonEvents('.action-open-help', 'help'); setupButtonEvents('.action-open-help', 'help', 'https://foosoft.net/projects/yomichan/');
const optionsContext = { const optionsContext = {
depth: 0, depth: 0,
@ -82,9 +82,7 @@ async function mainInner() {
toggle2.addEventListener('change', () => api.commandExec('toggle'), false); toggle2.addEventListener('change', () => api.commandExec('toggle'), false);
setTimeout(() => { setTimeout(() => {
for (const n of document.querySelectorAll('.toggle-group')) { document.body.dataset.loaded = 'true';
n.classList.add('toggle-group-animated');
}
}, 10); }, 10);
}); });
} }