Entry indicator update (#1134)
* Move entry current indicator rules * Simplify rules * Add popupCurrentIndicatorMode option * Add option to settings page * Expose popupCurrentIndicatorMode * Restore asterisk current indicator * Implement dot * Update action button vars * Fix tests * Add none option * Add triangle option
This commit is contained in:
parent
dcb75cce1e
commit
1b1b24ab35
@ -109,7 +109,8 @@
|
||||
"useSecurePopupFrameUrl",
|
||||
"usePopupShadowDom",
|
||||
"usePopupWindow",
|
||||
"maximumClipboardSearchLength"
|
||||
"maximumClipboardSearchLength",
|
||||
"popupCurrentIndicatorMode"
|
||||
],
|
||||
"properties": {
|
||||
"enable": {
|
||||
@ -265,6 +266,11 @@
|
||||
"type": "integer",
|
||||
"default": 1000,
|
||||
"minimum": 0
|
||||
},
|
||||
"popupCurrentIndicatorMode": {
|
||||
"type": "string",
|
||||
"enum": ["none", "asterisk", "triangle", "bar-left", "bar-right", "dot-left", "dot-right"],
|
||||
"default": "bar-left"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -662,8 +662,10 @@ class OptionsUtil {
|
||||
_updateVersion7(options) {
|
||||
// Version 7 changes:
|
||||
// Added general.maximumClipboardSearchLength.
|
||||
// Added general.popupCurrentIndicatorMode.
|
||||
for (const profile of options.profiles) {
|
||||
profile.options.general.maximumClipboardSearchLength = 1000;
|
||||
profile.options.general.popupCurrentIndicatorMode = 'bar-left';
|
||||
}
|
||||
return options;
|
||||
}
|
||||
|
@ -476,6 +476,25 @@
|
||||
<label class="toggle"><input type="checkbox" data-setting="general.debugInfo"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="settings-item advanced-only">
|
||||
<div class="settings-item-inner settings-item-inner-wrappable">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label">Selection indicator style</div>
|
||||
<div class="settings-item-description">Change how the selected definition entry is visually indicated.</div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<select data-setting="general.popupCurrentIndicatorMode">
|
||||
<option value="none">None</option>
|
||||
<option value="asterisk">Asterisk</option>
|
||||
<option value="triangle">Triangle</option>
|
||||
<option value="bar-left">Vertical bar (left)</option>
|
||||
<option value="bar-right">Vertical bar (right)</option>
|
||||
<option value="dot-left">Small dot (left)</option>
|
||||
<option value="dot-right">Small dot (right)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item advanced-only">
|
||||
<div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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) {
|
||||
|
@ -293,7 +293,8 @@ function createProfileOptionsUpdatedTestData1() {
|
||||
useSecurePopupFrameUrl: true,
|
||||
usePopupShadowDom: true,
|
||||
usePopupWindow: false,
|
||||
maximumClipboardSearchLength: 1000
|
||||
maximumClipboardSearchLength: 1000,
|
||||
popupCurrentIndicatorMode: 'bar-left'
|
||||
},
|
||||
audio: {
|
||||
enabled: true,
|
||||
|
Loading…
Reference in New Issue
Block a user