alex/yomichan
1
Fork 0
Code Releases Activity

Popup style updates (#1066)

Browse Source 
* Replace compactGlossaries option with new glossaryLayoutMode option

* Update attributes

* Update attributes

* Update color definitions

* Fix default theme scrollbar
This commit is contained in:
toasted-nutbread 2020-11-25 23:22:05 -05:00 committed by GitHub
parent c6c4631817
commit 92e9f69c80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 84 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ext/bg/data/options-schema.json
View File

@ -94,7 +94,7 @@
"popupScaleRelativeToVisualViewport", "popupScaleRelativeToVisualViewport",
"showGuide", "showGuide",
"compactTags", "compactTags",
"compactGlossaries", "glossaryLayoutMode",
"mainDictionary", "mainDictionary",
"popupTheme", "popupTheme",
"popupOuterTheme", "popupOuterTheme",
@ -198,9 +198,10 @@
"type": "boolean", "type": "boolean",
"default": false "default": false
}, },
"compactGlossaries": { "glossaryLayoutMode": {
"type": "boolean", "type": "string",
"default": false "enum": ["default", "compact"],
"default": "default"
}, },
"mainDictionary": { "mainDictionary": {
"type": "string" "type": "string"

9
ext/bg/js/anki-note-builder.js
View File

@ -34,7 +34,7 @@ class AnkiNoteBuilder {
checkForDuplicates=true, checkForDuplicates=true,
duplicateScope='collection', duplicateScope='collection',
resultOutputMode='split', resultOutputMode='split',
compactGlossaries=false, glossaryLayoutMode='default',
compactTags=false, compactTags=false,
modeOptions: {fields, deck, model}, modeOptions: {fields, deck, model},
audioDetails=null, audioDetails=null,
@ -71,7 +71,7 @@ class AnkiNoteBuilder {
} }
}; };
const data = this._createNoteData(definition, mode, context, resultOutputMode, compactGlossaries, compactTags); const data = this._createNoteData(definition, mode, context, resultOutputMode, glossaryLayoutMode, compactTags);
const formattedFieldValuePromises = []; const formattedFieldValuePromises = [];
for (const [, fieldValue] of fieldEntries) { for (const [, fieldValue] of fieldEntries) {
const formattedFieldValuePromise = this._formatField(fieldValue, data, templates, errors); const formattedFieldValuePromise = this._formatField(fieldValue, data, templates, errors);
@ -105,7 +105,7 @@ class AnkiNoteBuilder {
// Private // Private
_createNoteData(definition, mode, context, resultOutputMode, compactGlossaries, compactTags) { _createNoteData(definition, mode, context, resultOutputMode, glossaryLayoutMode, compactTags) {
const pitches = DictionaryDataUtil.getPitchAccentInfos(definition); const pitches = DictionaryDataUtil.getPitchAccentInfos(definition);
const pitchCount = pitches.reduce((i, v) => i + v.pitches.length, 0); const pitchCount = pitches.reduce((i, v) => i + v.pitches.length, 0);
return { return {
@ -118,7 +118,8 @@ class AnkiNoteBuilder {
modeTermKanji: mode === 'term-kanji', modeTermKanji: mode === 'term-kanji',
modeTermKana: mode === 'term-kana', modeTermKana: mode === 'term-kana',
modeKanji: mode === 'kanji', modeKanji: mode === 'kanji',
compactGlossaries, compactGlossaries: (glossaryLayoutMode === 'compact'),
glossaryLayoutMode,
compactTags, compactTags,
context context
}; };

3
ext/bg/js/options.js
View File

@ -614,10 +614,13 @@ class OptionsUtil {
// Updated handlebars templates to include "conjugation" definition. // Updated handlebars templates to include "conjugation" definition.
// Added global option showPopupPreview. // Added global option showPopupPreview.
// Added anki.checkForDuplicates. // Added anki.checkForDuplicates.
// Added general.glossaryLayoutMode; removed general.compactGlossaries.
await this._addFieldTemplatesToOptions(options, '/bg/data/anki-field-templates-upgrade-v6.handlebars'); await this._addFieldTemplatesToOptions(options, '/bg/data/anki-field-templates-upgrade-v6.handlebars');
options.global.showPopupPreview = false; options.global.showPopupPreview = false;
for (const profile of options.profiles) { for (const profile of options.profiles) {
profile.options.anki.checkForDuplicates = true; profile.options.anki.checkForDuplicates = true;
profile.options.general.glossaryLayoutMode = (profile.options.general.compactGlossaries ? 'compact' : 'default');
delete profile.options.general.compactGlossaries;
const fieldTemplates = profile.options.anki.fieldTemplates; const fieldTemplates = profile.options.anki.fieldTemplates;
if (typeof fieldTemplates === 'string') { if (typeof fieldTemplates === 'string') {
profile.options.anki.fieldTemplates = this._updateVersion6AnkiTemplatesCompactTags(fieldTemplates); profile.options.anki.fieldTemplates = this._updateVersion6AnkiTemplatesCompactTags(fieldTemplates);

4
ext/bg/js/settings/anki-templates-controller.js
View File

@ -184,14 +184,14 @@ class AnkiTemplatesController {
const ankiNoteBuilder = new AnkiNoteBuilder({ const ankiNoteBuilder = new AnkiNoteBuilder({
renderTemplate: this._renderTemplate.bind(this) renderTemplate: this._renderTemplate.bind(this)
}); });
const {general: {resultOutputMode, compactGlossaries, compactTags}} = options; const {general: {resultOutputMode, glossaryLayoutMode, compactTags}} = options;
const note = await ankiNoteBuilder.createNote({ const note = await ankiNoteBuilder.createNote({
definition, definition,
mode, mode,
context, context,
templates, templates,
resultOutputMode, resultOutputMode,
compactGlossaries, glossaryLayoutMode,
compactTags, compactTags,
modeOptions: { modeOptions: {
fields: {field}, fields: {field},

2
ext/bg/search.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-yomichan-page="search"> <html lang="en" data-page-type="popup">
<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">

31
ext/bg/settings.html
View File

@ -144,10 +144,6 @@
<label><input type="checkbox" id="compact-tags" data-setting="general.compactTags"> Compact tags</label> <label><input type="checkbox" id="compact-tags" data-setting="general.compactTags"> Compact tags</label>
</div> </div>
<div class="checkbox">
<label><input type="checkbox" id="compact-glossaries" data-setting="general.compactGlossaries"> Compact glossaries</label>
</div>
<div class="checkbox"> <div class="checkbox">
<label><input type="checkbox" id="show-advanced-options" data-setting="general.showAdvanced" data-transform-pre="setDocumentAttribute" data-transform-post="setDocumentAttribute" data-document-attribute="data-options-general-show-advanced"> Show advanced options</label> <label><input type="checkbox" id="show-advanced-options" data-setting="general.showAdvanced" data-transform-pre="setDocumentAttribute" data-transform-post="setDocumentAttribute" data-document-attribute="data-options-general-show-advanced"> Show advanced options</label>
</div> </div>
@ -205,14 +201,6 @@
</select> </select>
</div> </div>
<div class="form-group">
<label for="popup-display-mode">Popup display mode</label>
<select class="form-control" id="popup-display-mode" data-setting="general.popupDisplayMode">
<option value="default">Default</option>
<option value="full-width">Full width</option>
</select>
</div>
<div class="form-group"> <div class="form-group">
<label for="popup-scaling-factor">Popup size multiplier</label> <label for="popup-scaling-factor">Popup size multiplier</label>
<input type="number" min="0" id="popup-scaling-factor" data-setting="general.popupScalingFactor" class="form-control"> <input type="number" min="0" id="popup-scaling-factor" data-setting="general.popupScalingFactor" class="form-control">
@ -284,6 +272,25 @@
</div> </div>
</div> </div>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label for="popup-display-mode">Popup display mode</label>
<select class="form-control" id="popup-display-mode" data-setting="general.popupDisplayMode">
<option value="default">Default</option>
<option value="full-width">Full width</option>
</select>
</div>
<div class="col-xs-6">
<label for="glossary-layout-mode">Glossary layout mode</label>
<select class="form-control" id="glossary-layout-mode" data-setting="general.glossaryLayoutMode">
<option value="default">Default</option>
<option value="compact">Compact</option>
</select>
</div>
</div>
</div>
<div class="form-group"> <div class="form-group">
<div class="row"> <div class="row">
<div class="col-xs-6"> <div class="col-xs-6">

4
ext/fg/css/client.css
View File

@ -28,8 +28,8 @@ iframe.yomichan-float {
box-sizing: border-box; box-sizing: border-box;
} }
iframe.yomichan-float[data-yomichan-theme=dark], iframe.yomichan-float[data-outer-theme=dark],
iframe.yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] { iframe.yomichan-float[data-outer-theme=auto][data-site-color=dark] {
background-color: #1e1e1e; background-color: #1e1e1e;
border: 1px solid #666; border: 1px solid #666;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);

2
ext/fg/float.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-yomichan-page="float"> <html lang="en" data-page-type="popup">
<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">

6
ext/fg/js/popup.js
View File

@ -186,8 +186,10 @@ class Popup extends EventDispatcher {
} }
updateTheme() { updateTheme() {
this._frame.dataset.yomichanTheme = this._options.general.popupOuterTheme; const {popupTheme, popupOuterTheme} = this._options.general;
this._frame.dataset.yomichanSiteColor = this._getSiteColor(); this._frame.dataset.theme = popupTheme;
this._frame.dataset.outerTheme = popupOuterTheme;
this._frame.dataset.siteColor = this._getSiteColor();
} }
async setCustomOuterCss(css, useWebExtensionApi) { async setCustomOuterCss(css, useWebExtensionApi) {

65
ext/mixed/css/display.css
View File

@ -72,8 +72,10 @@
--default-text-color: #333333; --default-text-color: #333333;
--light-text-color: #777777; --light-text-color: #777777;
--very-light-text-color: #999999; --very-light-text-color: #999999;
--popuplar-kanji-text-color: var(--accent-color); --kanji-text-color: var(--default-text-color);
--kanji-popular-text-color: var(--accent-color);
--kanji-rare-text-color: var(--very-light-text-color);
--kanji-furigana-text-color: inherit;
--reason-text-color: var(--light-text-color); --reason-text-color: var(--light-text-color);
--light-border-color: #eeeeee; --light-border-color: #eeeeee;
@ -115,7 +117,7 @@
--progress-bar-indicator-color: var(--accent-color); --progress-bar-indicator-color: var(--accent-color);
--entry-current-indicator-color: var(--accent-color); --entry-current-indicator-color: var(--accent-color);
} }
:root[data-yomichan-theme=dark] { :root[data-theme=dark] {
/* Colors */ /* Colors */
--background-color: #1e1e1e; --background-color: #1e1e1e;
--glossary-image-background-color: #2f2f2f; --glossary-image-background-color: #2f2f2f;
@ -126,8 +128,10 @@
--default-text-color: #d4d4d4; --default-text-color: #d4d4d4;
--light-text-color: #888888; --light-text-color: #888888;
--very-light-text-color: #666666; --very-light-text-color: #666666;
--popuplar-kanji-text-color: var(--accent-color); --kanji-text-color: var(--default-text-color);
--kanji-popular-text-color: var(--accent-color);
--kanji-rare-text-color: var(--very-light-text-color);
--kanji-furigana-text-color: inherit;
--reason-text-color: var(--light-text-color); --reason-text-color: var(--light-text-color);
--light-border-color: #2f2f2f; --light-border-color: #2f2f2f;
@ -179,8 +183,8 @@
/* General */ /* General */
:root[data-yomichan-page=float]:not([data-yomichan-theme]), :root[data-page-type=popup]:not([data-theme]),
:root[data-yomichan-page=float]:not([data-yomichan-theme]) body { :root[data-page-type=popup]:not([data-theme]) body {
background-color: transparent; background-color: transparent;
} }
:root { :root {
@ -227,25 +231,25 @@ a {
/* Scrollbars */ /* Scrollbars */
:root:not([data-yomichan-theme=light]) .scrollbar { :root:not([data-theme=default]) .scrollbar {
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
} }
:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar { :root:not([data-theme=default]) .scrollbar::-webkit-scrollbar {
width: auto; width: auto;
} }
:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-button { :root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-button {
height: 0; height: 0;
} }
:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-thumb { :root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color); background-color: var(--scrollbar-thumb-color);
} }
:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-track { :root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track {
background-color: var(--scrollbar-thumb-color); background-color: var(--scrollbar-thumb-color);
} }
:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-track-piece { :root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track-piece {
background-color: var(--scrollbar-track-color); background-color: var(--scrollbar-track-color);
} }
:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-corner { :root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-corner {
background-color: var(--scrollbar-track-color); background-color: var(--scrollbar-track-color);
} }
@ -586,17 +590,20 @@ button.action-button {
} }
.term-expression .kanji-link { .term-expression .kanji-link {
border-bottom: var(--expression-thin-border-size) dashed var(--kanji-border-color); border-bottom: var(--expression-thin-border-size) dashed var(--kanji-border-color);
color: var(--default-text-color); color: var(--kanji-text-color);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
.term-expression[data-frequency=popular] .term-expression-text, .term-expression[data-frequency=popular] .term-expression-text,
.term-expression[data-frequency=popular] .term-expression-text .kanji-link { .term-expression[data-frequency=popular] .term-expression-text .kanji-link {
color: var(--popuplar-kanji-text-color); color: var(--kanji-popular-text-color);
} }
.term-expression[data-frequency=rare] .term-expression-text, .term-expression[data-frequency=rare] .term-expression-text,
.term-expression[data-frequency=rare] .term-expression-text .kanji-link { .term-expression[data-frequency=rare] .term-expression-text .kanji-link {
color: var(--very-light-text-color); color: var(--kanji-rare-text-color);
}
.term-expression-text>ruby>rt {
color: var(--kanji-furigana-text-color);
} }
.entry-header2, .entry-header2,
.entry-header3 { .entry-header3 {
@ -770,19 +777,19 @@ button.action-button {
:root[data-audio-enabled=false] .action-play-audio { :root[data-audio-enabled=false] .action-play-audio {
display: none; display: none;
} }
:root[data-compact-glossaries=true] .term-definition-tag-list, :root[data-glossary-layout-mode=compact] .term-definition-tag-list,
:root[data-compact-glossaries=true] .term-definition-disambiguation-list:not([data-count="0"]) { :root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count="0"]) {
display: inline; display: inline;
} }
:root[data-compact-glossaries=true] .term-glossary-list { :root[data-glossary-layout-mode=compact] .term-glossary-list {
display: inline; display: inline;
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
} }
:root[data-compact-glossaries=true] .term-glossary-list>li { :root[data-glossary-layout-mode=compact] .term-glossary-list>li {
display: inline; display: inline;
} }
:root[data-compact-glossaries=true] .term-glossary-list>li:not(:first-child)::before { :root[data-glossary-layout-mode=compact] .term-glossary-list>li:not(:first-child)::before {
white-space: pre-wrap; white-space: pre-wrap;
content: " | "; content: " | ";
display: inline; display: inline;
@ -1022,29 +1029,29 @@ button.action-button {
content: "]"; content: "]";
} }
:root[data-compact-glossaries=true] .term-glossary-image-container { :root[data-glossary-layout-mode=compact] .term-glossary-image-container {
display: none; display: none;
position: absolute; position: absolute;
left: 0; left: 0;
top: 100%; top: 100%;
z-index: 1; z-index: 1;
} }
:root[data-compact-glossaries=true] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container { :root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container {
bottom: 100%; bottom: 100%;
top: auto; top: auto;
} }
:root[data-compact-glossaries=true] .term-glossary-image-link { :root[data-glossary-layout-mode=compact] .term-glossary-image-link {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
:root[data-compact-glossaries=true] .term-glossary-image-link:hover .term-glossary-image-container, :root[data-glossary-layout-mode=compact] .term-glossary-image-link:hover .term-glossary-image-container,
:root[data-compact-glossaries=true] .term-glossary-image-link:focus .term-glossary-image-container { :root[data-glossary-layout-mode=compact] .term-glossary-image-link:focus .term-glossary-image-container {
display: block; display: block;
} }
:root:not([data-compact-glossaries=true]) .term-glossary-image-link-text { :root:not([data-glossary-layout-mode=compact]) .term-glossary-image-link-text {
display: none; display: none;
} }
:root:not([data-compact-glossaries=true]) .term-glossary-image-description { :root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description {
display: block; display: block;
} }

2
ext/mixed/css/search.css
View File

@ -59,7 +59,7 @@
:root[data-loaded=true] { :root[data-loaded=true] {
--animation-duration: 0.125s; --animation-duration: 0.125s;
} }
:root[data-yomichan-theme=dark] { :root[data-theme=dark] {
--text-color-default: #d8d8d8; --text-color-default: #d8d8d8;
--background-color: #1e1e1e; --background-color: #1e1e1e;
--shadow-color: rgba(255, 255, 255, 0.185); --shadow-color: rgba(255, 255, 255, 0.185);

8
ext/mixed/js/display.js
View File

@ -786,7 +786,7 @@ class Display extends EventDispatcher {
const data = document.documentElement.dataset; const data = document.documentElement.dataset;
data.ankiEnabled = `${options.anki.enable}`; data.ankiEnabled = `${options.anki.enable}`;
data.audioEnabled = `${options.audio.enabled && options.audio.sources.length > 0}`; data.audioEnabled = `${options.audio.enabled && options.audio.sources.length > 0}`;
data.compactGlossaries = `${options.general.compactGlossaries}`; data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`;
data.compactTags = `${options.general.compactTags}`; data.compactTags = `${options.general.compactTags}`;
data.enableSearchTags = `${options.scanning.enableSearchTags}`; data.enableSearchTags = `${options.scanning.enableSearchTags}`;
data.showPitchAccentDownstepNotation = `${options.general.showPitchAccentDownstepNotation}`; data.showPitchAccentDownstepNotation = `${options.general.showPitchAccentDownstepNotation}`;
@ -796,7 +796,7 @@ class Display extends EventDispatcher {
} }
_updateTheme(themeName) { _updateTheme(themeName) {
document.documentElement.dataset.yomichanTheme = themeName; document.documentElement.dataset.theme = themeName;
} }
async _findDefinitions(isTerms, source, wildcardsEnabled, optionsContext) { async _findDefinitions(isTerms, source, wildcardsEnabled, optionsContext) {
@ -1461,7 +1461,7 @@ class Display extends EventDispatcher {
async _createNote(definition, mode, context, options, templates, injectMedia) { async _createNote(definition, mode, context, options, templates, injectMedia) {
const { const {
general: {resultOutputMode, compactGlossaries, compactTags}, general: {resultOutputMode, glossaryLayoutMode, compactTags},
anki: {tags, checkForDuplicates, duplicateScope, kanji, terms, screenshot: {format, quality}}, anki: {tags, checkForDuplicates, duplicateScope, kanji, terms, screenshot: {format, quality}},
audio: {sources, customSourceUrl} audio: {sources, customSourceUrl}
} = options; } = options;
@ -1501,7 +1501,7 @@ class Display extends EventDispatcher {
checkForDuplicates, checkForDuplicates,
duplicateScope, duplicateScope,
resultOutputMode, resultOutputMode,
compactGlossaries, glossaryLayoutMode,
compactTags, compactTags,
modeOptions modeOptions
}); });

2
test/test-options-util.js
View File

@ -278,7 +278,7 @@ function createProfileOptionsUpdatedTestData1() {
popupScaleRelativeToVisualViewport: true, popupScaleRelativeToVisualViewport: true,
showGuide: true, showGuide: true,
compactTags: false, compactTags: false,
compactGlossaries: false, glossaryLayoutMode: 'default',
mainDictionary: '', mainDictionary: '',
popupTheme: 'default', popupTheme: 'default',
popupOuterTheme: 'default', popupOuterTheme: 'default',