summaryrefslogtreecommitdiff
path: root/ext/mixed
diff options
context:
space:
mode:
Diffstat (limited to 'ext/mixed')
-rw-r--r--ext/mixed/css/display.css208
-rw-r--r--ext/mixed/display-templates.html10
-rw-r--r--ext/mixed/js/display.js1
3 files changed, 166 insertions, 53 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index ac6e50ae..a18724cc 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -34,6 +34,8 @@
--expression-thin-border-size: calc(1em / (var(--expression-font-size-no-units) * var(--font-size-no-units)));
--action-button-size-no-units: 16;
+ --action-button-size: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));
+ --action-button-padding: 0.3em;
--list-margin: 0.72em;
--main-content-vertical-padding: 0em;
@@ -71,6 +73,9 @@
--list-padding1: 1.4em;
--list-padding2: var(--list-padding1);
+ --entry-current-indicator-triangle-size-no-units: 6;
+ --entry-current-indicator-triangle-size: calc(1em * (var(--entry-current-indicator-triangle-size-no-units) / var(--font-size-no-units)));
+
--animation-duration: 0.125s;
/* Colors */
@@ -463,15 +468,34 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
/* Action buttons */
+.actions {
+ display: flex;
+ flex-flow: row nowrap;
+ float: right;
+ margin: -0.25em;
+}
+.actions::after {
+ clear: both;
+ content: '';
+ display: block;
+}
.action-button {
display: block;
opacity: 1;
+ border: 0;
+ margin: 0;
+ padding: var(--action-button-padding);
+ background: transparent;
+ font-size: inherit;
transition:
opacity var(--animation-duration) linear,
visibility 0s linear 0s,
filter var(--animation-duration) linear,
-webkit-filter var(--animation-duration) linear;
}
+button.action-button {
+ cursor: pointer;
+}
.action-button[hidden] {
display: block;
visibility: hidden;
@@ -491,31 +515,10 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
.action-button:disabled:not([hidden]) {
opacity: 0.25;
}
-.actions {
- display: flex;
- float: right;
- margin: -0.25em;
-}
-.actions::after {
- clear: both;
- content: '';
- display: block;
-}
-.action-button {
- display: inline-block;
- border: 0;
- margin: 0;
- padding: 0.3em;
- background: transparent;
- font-size: inherit;
-}
-button.action-button {
- cursor: pointer;
-}
.action-button::before {
content: "";
- width: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));
- height: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));
+ width: var(--action-button-size);
+ height: var(--action-button-size);
display: block;
background-color: transparent;
background-repeat: no-repeat;
@@ -619,34 +622,20 @@ 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-width);
- visibility: visible;
- transition:
- width var(--entry-current-indicator-transition-duration) linear,
- visibility 0s linear 0s;
-}
.kanji-link {
border-bottom: var(--expression-thin-border-size) dashed var(--kanji-border-color);
color: var(--kanji-text-color);
text-decoration: none;
cursor: pointer;
}
+.term-expression-text-container {
+ display: inline-block;
+}
.term-expression-text {
color: var(--kanji-text-color);
+ font-size: var(--expression-font-size);
+ display: inline-block;
+ position: relative;
}
.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-text,
.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .kanji-link {
@@ -684,13 +673,6 @@ button.action-button {
.term-expression {
display: inline;
}
-.term-expression-text-container {
- display: inline-block;
-}
-.term-expression-text {
- display: inline;
- font-size: var(--expression-font-size);
-}
.term-expression-details {
display: inline;
}
@@ -705,6 +687,132 @@ button.action-button {
}
+/* Entry indicator */
+.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-width);
+ visibility: visible;
+ transition:
+ width var(--entry-current-indicator-transition-duration) linear,
+ visibility 0s linear 0s;
+}
+:root[data-popup-current-indicator-mode=bar-right] .entry-current-indicator,
+:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {
+ left: auto;
+ right: 0;
+}
+.entry-current-indicator-inner {
+ display: none;
+ pointer-events: auto;
+ width: 100%;
+ height: 0;
+ top: 0;
+ background-color: var(--entry-current-indicator-color);
+ transition:
+ height var(--entry-current-indicator-transition-duration) linear;
+}
+.entry.entry-current .entry-current-indicator-inner {
+ height: var(--entry-current-indicator-width);
+ transition:
+ height var(--entry-current-indicator-transition-duration) linear;
+}
+:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator,
+:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {
+ background-color: transparent;
+}
+:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator-inner,
+:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator-inner {
+ display: block;
+ position: sticky;
+}
+:root[data-popup-current-indicator-mode=none] .entry-current-indicator,
+:root[data-popup-current-indicator-mode=asterisk] .entry-current-indicator,
+:root[data-popup-current-indicator-mode=triangle] .entry-current-indicator {
+ display: none;
+}
+
+
+/* Triangle entry indicator */
+.term-expression-current-indicator {
+ pointer-events: none;
+ position: absolute;
+ font-size: calc(1em / var(--expression-font-size-no-units));
+ left: calc(-1 * var(--main-content-horizontal-padding));
+ top: 0;
+ bottom: 0;
+ opacity: 0;
+ visibility: hidden;
+ transition:
+ opacity var(--entry-current-indicator-transition-duration) linear,
+ visibility 0s linear var(--entry-current-indicator-transition-duration);
+}
+.entry.entry-current .term-expression-current-indicator {
+ opacity: 1;
+ visibility: visible;
+ transition:
+ opacity var(--entry-current-indicator-transition-duration) linear,
+ visibility 0s linear 0s;
+}
+.term-expression-current-indicator::after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: var(--entry-current-indicator-triangle-size);
+ height: calc(2 * var(--entry-current-indicator-triangle-size));
+ left: calc(-1 * var(--entry-horizontal-padding));
+ top: calc(50% - var(--entry-current-indicator-triangle-size));
+ background-color: var(--entry-current-indicator-color);
+ mask-repeat: no-repeat;
+ mask-position: center center;
+ mask-mode: alpha;
+ mask-size: contain;
+ mask-image: url(/mixed/img/material-right-arrow.svg);
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: center center;
+ -webkit-mask-mode: alpha;
+ -webkit-mask-size: contain;
+ -webkit-mask-image: url(/mixed/img/material-right-arrow.svg);
+}
+.term-expression:not(:first-of-type) .term-expression-current-indicator,
+:root:not([data-popup-current-indicator-mode=triangle]) .term-expression-current-indicator {
+ display: none;
+}
+
+
+/* Old entry indicator */
+.entry-current-indicator-icon {
+ display: block;
+ padding: var(--action-button-padding);
+}
+.entry-current-indicator-icon[hidden],
+.entry:not(.entry-current) .entry-current-indicator-icon,
+:root:not([data-popup-current-indicator-mode=asterisk]) .entry-current-indicator-icon {
+ display: none;
+}
+.entry-current-indicator-icon::before {
+ content: "";
+ width: var(--action-button-size);
+ height: var(--action-button-size);
+ display: block;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-image: url("/mixed/img/entry-current.svg");
+}
+
+
/* Merged term styles */
.entry[data-expression-multi=true] .term-expression-list,
.entry:not([data-expression-multi=true]) .term-expression-text-container {
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index 40d11d7a..3f6437ee 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -2,7 +2,7 @@
<!-- Term entry templates -->
<template id="term-entry-template" data-remove-whitespace-text="true"><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-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"><span class="entry-current-indicator-inner"></span></div>
<div class="entry-header1">
<div class="entry-header2">
<div class="entry-header3">
@@ -11,6 +11,7 @@
<button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression (Alt + E)"></button>
<button class="action-button action-add-note" hidden 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="entry-current-indicator-icon" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span>
</div>
<div class="term-expression-list"></div>
</div>
@@ -26,7 +27,9 @@
</div></template>
<template id="term-expression-template" data-remove-whitespace-text="true"><div class="term-expression">
<div class="term-expression-text-container">
- <span class="term-expression-text source-text"></span>
+ <span class="term-expression-text source-text">
+ <span class="term-expression-current-indicator"></span>
+ </span>
</div>
<div class="term-expression-details">
<button class="action-button action-play-audio" data-icon="play-audio" title="Play audio"></button>
@@ -55,13 +58,14 @@
<!-- Kanji entry templates -->
<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-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"><span class="entry-current-indicator-inner"></span></div>
<div class="entry-header1">
<div class="entry-header2">
<div class="entry-header3">
<div class="actions">
<button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note (Alt + V)"></button>
<button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="kanji" title="Add Kanji (Alt + K)"></button>
+ <span class="entry-current-indicator-icon" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span>
</div>
<div class="kanji-glyph source-text"></div>
</div>
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 91168748..9e2cd931 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -836,6 +836,7 @@ class Display extends EventDispatcher {
data.showPitchAccentGraph = `${options.general.showPitchAccentGraph}`;
data.debug = `${options.general.debugInfo}`;
data.popupDisplayMode = `${options.general.popupDisplayMode}`;
+ data.popupCurrentIndicatorMode = `${options.general.popupCurrentIndicatorMode}`;
}
_updateTheme(themeName) {