alex/yomichan
1
Fork 0
Code Releases Activity

Update display results style (#1536)

Browse Source 
* Expose resultOutputMode

* Update display styles
This commit is contained in:
toasted-nutbread 2021-03-16 18:48:24 -04:00 committed by GitHub
parent 97ac9099e8
commit 28f97ba40b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ext/css/display.css
View File

@ -688,7 +688,7 @@ button.action-button[data-icon=play-audio]::before {
button.action-button[data-icon=source-term]::before { button.action-button[data-icon=source-term]::before {
background-image: url('/images/source-term.svg'); background-image: url('/images/source-term.svg');
} }
.entry[data-type=term][data-expression-multi=true] .actions>button.action-button.action-play-audio { :root[data-result-output-mode=merge] .entry[data-type=term] .actions>button.action-button.action-play-audio {
display: none; display: none;
} }
.action-button-badge { .action-button-badge {
@ -850,14 +850,14 @@ button.action-button[data-icon=source-term]::before {
display: inline-block; display: inline-block;
} }
.entry[data-expression-multi=true] .expression[data-frequency=popular] { :root[data-result-output-mode=merge] .expression[data-frequency=popular] {
--expression-current-text-color: var(--expression-text-color-popular); --expression-current-text-color: var(--expression-text-color-popular);
--expression-current-reading-text-color: var(--expression-reading-text-color-popular); --expression-current-reading-text-color: var(--expression-reading-text-color-popular);
--expression-current-furigana-text-color: var(--expression-furigana-text-color-popular); --expression-current-furigana-text-color: var(--expression-furigana-text-color-popular);
--expression-current-kanji-text-color: var(--expression-kanji-text-color-popular); --expression-current-kanji-text-color: var(--expression-kanji-text-color-popular);
--expression-current-kanji-border-color: var(--expression-kanji-border-color-popular); --expression-current-kanji-border-color: var(--expression-kanji-border-color-popular);
} }
.entry[data-expression-multi=true] .expression[data-frequency=rare] { :root[data-result-output-mode=merge] .expression[data-frequency=rare] {
--expression-current-text-color: var(--expression-text-color-rare); --expression-current-text-color: var(--expression-text-color-rare);
--expression-current-reading-text-color: var(--expression-reading-text-color-rare); --expression-current-reading-text-color: var(--expression-reading-text-color-rare);
--expression-current-furigana-text-color: var(--expression-furigana-text-color-rare); --expression-current-furigana-text-color: var(--expression-furigana-text-color-rare);
@ -915,7 +915,7 @@ button.action-button[data-icon=source-term]::before {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
.entry[data-expression-multi=true] .expression-list-details { :root[data-result-output-mode=merge] .expression-list-details {
display: block; display: block;
} }
:root[data-term-display-mode=ruby-and-reading] .expression-text-outer::after, :root[data-term-display-mode=ruby-and-reading] .expression-text-outer::after,
@ -1069,7 +1069,7 @@ button.action-button[data-icon=source-term]::before {
/* Merged term styles */ /* Merged term styles */
.entry[data-expression-multi=true] .expression-list .expression-details { :root[data-result-output-mode=merge] .expression-list .expression-details {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 0; width: 0;
@ -1077,28 +1077,28 @@ button.action-button[data-icon=source-term]::before {
visibility: hidden; visibility: hidden;
z-index: 1; z-index: 1;
} }
.entry[data-expression-multi=true] .expression-list>.expression:not(:last-of-type) .expression-details { :root[data-result-output-mode=merge] .expression-list>.expression:not(:last-of-type) .expression-details {
left: calc(-1 * var(--expression-font-size)); left: calc(-1 * var(--expression-font-size));
} }
.entry[data-expression-multi=true] .expression:hover .expression-details { :root[data-result-output-mode=merge] .expression:hover .expression-details {
visibility: visible; visibility: visible;
} }
.entry[data-expression-multi=true] .expression-list .expression-details>.action-play-audio { :root[data-result-output-mode=merge] .expression-list .expression-details>.action-play-audio {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0.5em; bottom: 0.5em;
} }
.entry:not([data-expression-multi=true]) .expression-list .expression-details>.action-play-audio { :root:not([data-result-output-mode=merge]) .expression-list .expression-details>.action-play-audio {
display: none; display: none;
} }
.entry[data-expression-multi=true] .expression-list .expression-tag-list { :root[data-result-output-mode=merge] .expression-list .expression-tag-list {
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: -0.5em; bottom: -0.5em;
white-space: nowrap; white-space: nowrap;
} }
.entry[data-type=term][data-expression-multi=true] .expression-list-tag-list>.tag[data-category=search] { :root[data-result-output-mode=merge] .entry[data-type=term] .expression-list-tag-list>.tag[data-category=search] {
display: none; display: none;
} }

1
ext/js/display/display.js
View File

@ -819,6 +819,7 @@ class Display extends EventDispatcher {
_updateDocumentOptions(options) { _updateDocumentOptions(options) {
const data = document.documentElement.dataset; const data = document.documentElement.dataset;
data.ankiEnabled = `${options.anki.enable}`; data.ankiEnabled = `${options.anki.enable}`;
data.resultOutputMode = `${options.general.resultOutputMode}`;
data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`; data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`;
data.compactTags = `${options.general.compactTags}`; data.compactTags = `${options.general.compactTags}`;
data.frequencyDisplayMode = `${options.general.frequencyDisplayMode}`; data.frequencyDisplayMode = `${options.general.frequencyDisplayMode}`;