alex/yomichan
1
Fork 0
Code Releases Activity

Update selection indicator (#1044)

Browse Source 
* Add new current indicator

* Remove old indicator
This commit is contained in:
toasted-nutbread 2020-11-19 18:34:41 -05:00 committed by GitHub
parent 1588f6210c
commit b0a5650625
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,6 +55,9 @@
--progress-bar-active-transition-start-delay: 0.0625s;
--progress-bar-animation-duration: 2s;
--entry-current-indicator: calc(4em / var(--font-size-no-units));
--entry-current-indicator-transition-duration: 0.125s;
/* Colors */
--background-color: #ffffff;
--glossary-image-background-color: #eeeeee;
@ -101,6 +104,7 @@
--progress-bar-track-color: #cccccc;
--progress-bar-indicator-color: #0275d8;
--entry-current-indicator-color: #0275d8;
}
:root[data-yomichan-theme=dark] {
/* Colors */
@ -149,6 +153,7 @@
--progress-bar-track-color: #3a3a3a;
--progress-bar-indicator-color: #0275d8;
--entry-current-indicator-color: #0275d8;
}
@ -435,9 +440,6 @@ button.action-button {
background-repeat: no-repeat;
background-size: contain;
}
.action-button[data-icon=entry-current]::before {
background-image: url("/mixed/img/entry-current.svg");
}
.action-button[data-icon=view-note]::before {
background-image: url("/mixed/img/view-note.svg");
}
@ -522,6 +524,26 @@ button.action-button {
padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
position: relative;
}
.entry>.entry-current-indicator {
display: block;
position: absolute;
left: calc(-1 * var(--main-content-horizontal-padding));
top: 0;
bottom: 0;
width: 0;
background-color: var(--entry-current-indicator-color);
visibility: hidden;
transition:
width var(--entry-current-indicator-transition-duration) linear,
visibility 0s linear var(--entry-current-indicator-transition-duration);
}
.entry.entry-current>.entry-current-indicator {
width: var(--entry-current-indicator);
visibility: visible;
transition:
width var(--entry-current-indicator-transition-duration) linear,
visibility 0s linear 0s;
}
.term-expression .kanji-link {
border-bottom: var(--expression-thin-border-size) dashed var(--dark-border-color);
color: var(--default-text-color);
@ -536,9 +558,6 @@ button.action-button {
.term-expression[data-frequency=rare]>.term-expression-text .kanji-link {
color: var(--very-light-text-color);
}
.entry:not(.entry-current) .action-current-indicator {
display: none;
}
.entry-header2,
.entry-header3 {
display: inline;

4
ext/mixed/display-templates.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html><html><head></head><body>
<template id="term-entry-template"><div class="entry" data-type="term">
<div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></div>
<div class="entry-header1">
<div class="entry-header2">
<div class="entry-header3">
@ -9,7 +10,6 @@
<button class="action-button action-add-note pending disabled" data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression (Alt + E)"></button>
<button class="action-button action-add-note pending disabled" data-icon="add-term-kana" data-mode="term-kana" title="Add reading (Alt + R)"></button>
<button class="action-button action-play-audio" data-icon="play-audio" title="Play audio (Alt + P)"></button>
<span class="action-button action-current-indicator" data-icon="entry-current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span>
</div>
<div class="term-expression-list"></div>
</div>
@ -47,13 +47,13 @@
<template id="term-pitch-accent-character-template"><span class="term-pitch-accent-character"><span class="term-pitch-accent-character-inner"></span></span></template>
<template id="kanji-entry-template"><div class="entry" data-type="kanji">
<div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></div>
<div class="entry-header1">
<div class="entry-header2">
<div class="entry-header3">
<div class="actions">
<button class="action-button action-view-note pending disabled" data-icon="view-note" title="View added note (Alt + V)"></button>
<button class="action-button action-add-note pending disabled" data-icon="add-term-kanji" data-mode="kanji" title="Add Kanji (Alt + K)"></button>
<span class="action-button action-current-indicator" data-icon="entry-current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span>
</div>
<div class="kanji-glyph source-text"></div>
</div>