alex/yomichan
1
Fork 0
Code Releases Activity

Settings and welcome page improvements (#1326)

Browse Source 
* Update wording to be less repetitive

* Remove the shadow theme option from the welcome page, to avoid confusion

* Update input sizes

* Update select text to not clip the triangle icon

* Update wording

* Update descriptions

* Remove "popup" to not exclude the search page
This commit is contained in:
toasted-nutbread 2021-01-29 19:10:57 -05:00 committed by GitHub
parent c7c5bab1a9
commit 04cf4ec8d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -88,9 +88,9 @@ primary language is not English, you may consider also importing the English ver
<a href="resources/images/browser-action-popup1.png"><img src="resources/images/browser-action-popup1.png" width="103" height="100"></a> <a href="resources/images/browser-action-popup1.png"><img src="resources/images/browser-action-popup1.png" width="103" height="100"></a>
* The <img src="ext/mixed/img/cog.svg" alt="" width="16" height="16"> _cog_ button will open the settings page. * The <img src="ext/mixed/img/cog.svg" alt="" width="16" height="16"> _cog_ button will open the Settings page.
* The <img src="ext/mixed/img/magnifying-glass.svg" alt="" width="16" height="16"> _magnifying glass_ button will open the search page. * The <img src="ext/mixed/img/magnifying-glass.svg" alt="" width="16" height="16"> _magnifying glass_ button will open the Search page.
* The <img src="ext/mixed/img/question-mark-circle.svg" alt="" width="16" height="16"> _question mark_ button will open a page with some general information about Yomichan. * The <img src="ext/mixed/img/question-mark-circle.svg" alt="" width="16" height="16"> _question mark_ button will open the Information page.
* The <img src="ext/mixed/img/profile.svg" alt="" width="16" height="16"> _profile_ button will appear when multiple profiles exist, allowing the current profile to be quickly changed. * The <img src="ext/mixed/img/profile.svg" alt="" width="16" height="16"> _profile_ button will appear when multiple profiles exist, allowing the current profile to be quickly changed.
2. Import the dictionaries you wish to use for term and kanji searches. If you do not have any dictionaries installed 2. Import the dictionaries you wish to use for term and kanji searches. If you do not have any dictionaries installed
@ -99,7 +99,7 @@ primary language is not English, you may consider also importing the English ver
<a href="resources/images/settings-dictionaries-popup.png"><img src="resources/images/settings-dictionaries-popup-thumb.png" width="128" height="86"></a> <a href="resources/images/settings-dictionaries-popup.png"><img src="resources/images/settings-dictionaries-popup-thumb.png" width="128" height="86"></a>
3. Webpage text can be scanned by moving the cursor while holding the scanning modifier key, which is <kbd>Shift</kbd> 3. Webpage text can be scanned by moving the cursor while holding a modifier key, which is <kbd>Shift</kbd>
by default. If definitions are found for the text at the cursor position, a popup window containing term definitions by default. If definitions are found for the text at the cursor position, a popup window containing term definitions
will open. This window can be dismissed by clicking anywhere outside of it. will open. This window can be dismissed by clicking anywhere outside of it.

18
ext/bg/css/settings2.css
View File

@ -45,9 +45,8 @@
--line-height-default: calc(20 / var(--font-size-no-units)); --line-height-default: calc(20 / var(--font-size-no-units));
--outline-item-height: 40px; --outline-item-height: 40px;
--outline-item-icon-size: 32px; --outline-item-icon-size: 32px;
--input-short: 80px; --input-short-width: calc(var(--input-width-large) / 2 - var(--padding) / 2);
--input-height-short: 24px; --input-short-height: 24px;
--input-half-width: calc(var(--input-width-large) / 2 - var(--padding) / 2);
--fab-button-size: 56px; --fab-button-size: 56px;
--fab-button-padding: 16px; --fab-button-padding: 16px;
--modal-width: 600px; --modal-width: 600px;
@ -648,19 +647,14 @@ a.settings-item.settings-item-button {
input[type=text].short-width, input[type=text].short-width,
input[type=number].short-width, input[type=number].short-width,
select.short-width { select.short-width {
width: var(--input-short); width: var(--input-short-width);
}
input[type=text].half-width,
input[type=number].half-width,
select.short-width {
width: var(--input-half-width);
} }
input[type=text].short-height, input[type=text].short-height,
input[type=number].short-height, input[type=number].short-height,
select.short-height { select.short-height {
height: var(--input-height-short); height: var(--input-short-height);
margin-top: calc(var(--settings-group-right-max-height) - var(--input-height-short) - var(--font-size-small)); margin-top: calc(var(--settings-group-right-max-height) - var(--input-short-height) - var(--font-size-small));
line-height: var(--input-height-short); line-height: var(--input-short-height);
} }
.settings-item-button-group-container { .settings-item-button-group-container {
max-height: none; max-height: none;

8
ext/bg/settings2.html
View File

@ -579,7 +579,7 @@
<div class="settings-item-group-item"> <div class="settings-item-group-item">
<div class="settings-item-group-item-label">Shadow</div> <div class="settings-item-group-item-label">Shadow</div>
<select data-setting="general.popupOuterTheme" class="short-width short-height"> <select data-setting="general.popupOuterTheme" class="short-width short-height">
<option value="auto">Auto-detect</option> <option value="auto">Auto</option>
<option value="default">Light</option> <option value="default">Light</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
</select> </select>
@ -876,9 +876,9 @@
</div> </div>
<div class="settings-item-right"> <div class="settings-item-right">
<select data-setting="general.popupVerticalTextPosition"> <select data-setting="general.popupVerticalTextPosition">
<option value="default">Same as for horizontal text</option> <option value="default">Same as horizontal text</option>
<option value="before">Before text reading direction</option> <option value="before">Before reading direction</option>
<option value="after">After text reading direction</option> <option value="after">After reading direction</option>
<option value="left">Left of text</option> <option value="left">Left of text</option>
<option value="right">Right of text</option> <option value="right">Right of text</option>
</select> </select>

31
ext/bg/welcome.html
View File

@ -40,16 +40,16 @@
</div></div></div> </div></div></div>
<div class="settings-item-children settings-item-children-group"> <div class="settings-item-children settings-item-children-group">
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
The <img src="/mixed/img/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the settings page. The <img src="/mixed/img/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the <a href="settings2.html" target="_blank" rel="noopener">Settings</a> page.
</div></div></div></div> </div></div></div></div>
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
The <img src="/mixed/img/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open a search page, The <img src="/mixed/img/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open the <a href="/bg/search.html" target="_blank" rel="noopener">Search</a> page,
enabling text and terms to be looked up using the installed dictionaries. enabling text and terms to be looked up using the installed dictionaries.
This can even be used in offline mode! This can even be used in offline mode!
</div></div></div></div> </div></div></div></div>
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
The <img src="/mixed/img/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open a page The <img src="/mixed/img/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open the <a href="/bg/info.html" target="_blank" rel="noopener">Information</a> page,
with some general information about Yomichan. which has some helpful information and links about Yomichan.
</div></div></div></div> </div></div></div></div>
</div> </div>
</div> </div>
@ -74,12 +74,12 @@
</div> </div>
<div class="settings-item"> <div class="settings-item">
<div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding the scanning modifier key. After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding a modifier key.
The default key is <kbd>Shift</kbd>, which can be configured below. The default key is <kbd>Shift</kbd>, which can be disabled or configured below.
</div></div></div> </div></div></div>
<div class="settings-item-children settings-item-children-group"> <div class="settings-item-children settings-item-children-group">
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
Clicking the <img src="/mixed/img/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the popup search results Clicking the <img src="/mixed/img/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the search results
will play an audio clip of a term's pronunciation using an online dictionary, if available. will play an audio clip of a term's pronunciation using an online dictionary, if available.
</div></div></div></div> </div></div></div></div>
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label"> <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
@ -167,28 +167,15 @@
<div class="settings-item-description">Adjust the style of the popup.</div> <div class="settings-item-description">Adjust the style of the popup.</div>
</div> </div>
<div class="settings-item-right"> <div class="settings-item-right">
<div class="settings-item-group"> <select data-setting="general.popupTheme" class="short-width">
<div class="settings-item-group-item">
<div class="settings-item-group-item-label">Body</div>
<select data-setting="general.popupTheme" class="short-width short-height">
<option value="default">Light</option> <option value="default">Light</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
</select> </select>
</div> </div>
<div class="settings-item-group-item">
<div class="settings-item-group-item-label">Shadow</div>
<select data-setting="general.popupOuterTheme" class="short-width short-height">
<option value="auto">Auto-detect</option>
<option value="default">Light</option>
<option value="dark">Dark</option>
</select>
</div>
</div>
</div>
</div></div> </div></div>
<a href="settings2.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner"> <a href="settings2.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner">
<div class="settings-item-left"> <div class="settings-item-left">
<div class="settings-item-label">View more settings on the Settings page</div> <div class="settings-item-label">More customization options are available on the Settings page</div>
</div> </div>
<div class="settings-item-right open-panel-button-container"> <div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button> <button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>

3
ext/mixed/css/material.css
View File

@ -33,7 +33,8 @@
--input-font-size-no-units: 1; --input-font-size-no-units: 1;
--input-font-size: calc(1em * var(--input-font-size-no-units)); --input-font-size: calc(1em * var(--input-font-size-no-units));
--input-width: calc(100em / (var(--font-size-no-units) * var(--input-font-size-no-units))); --input-spacing: calc(10em / var(--font-size-no-units));
--input-width: calc(100em / (var(--font-size-no-units) * var(--input-font-size-no-units)) - var(--input-spacing) / 2);
--input-width-large: calc(200em / (var(--font-size-no-units) * var(--input-font-size-no-units))); --input-width-large: calc(200em / (var(--font-size-no-units) * var(--input-font-size-no-units)));
--input-height: calc(32em / (var(--font-size-no-units) * var(--input-font-size-no-units))); --input-height: calc(32em / (var(--font-size-no-units) * var(--input-font-size-no-units)));
--input-border-radius: 0.25em; --input-border-radius: 0.25em;