alex/yomichan
1
Fork 0
Code Releases Activity

Improve frequency display (#1438)

Browse Source 
* Add frequencyDisplayMode option

* Update tests

* Add setting

* Update frequency display styles

* Improve wrapping
This commit is contained in:
toasted-nutbread 2021-02-25 17:48:39 -05:00 committed by GitHub
parent 6bda81b422
commit ec495bd7b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 229 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
ext/css/display.css
View File

@ -683,7 +683,6 @@ button.action-button[data-icon=source-term]::before {
border: none;
border-right: none;
font-size: 1em;
vertical-align: middle;
margin: calc(1em / var(--font-size-no-units)) 0.375em calc(1em / var(--font-size-no-units)) 0;
}
.tag-label {
@ -702,9 +701,14 @@ button.action-button[data-icon=source-term]::before {
font-weight: var(--tag-font-weight);
}
.tag-body {
display: block;
display: flex;
flex-flow: row nowrap;
align-items: center;
position: relative;
padding: 0 0.375em 0 0.375em;
border-radius: var(--tag-border-radius);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.tag-body::before {
content: '';
@ -715,10 +719,10 @@ button.action-button[data-icon=source-term]::before {
bottom: 0;
right: 0;
border-radius: var(--tag-border-radius);
border: var(--tag-border-size) var(--tag-border-style) var(--tag-color);
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border: var(--tag-border-size) var(--tag-border-style) var(--tag-color);
border-left: none;
pointer-events: none;
}
.tag-body-content {
@ -1069,37 +1073,16 @@ button.action-button[data-icon=source-term]::before {
/* Frequencies */
.frequency-group-list {
margin: 0;
padding: 0 0 0 var(--list-padding1);
list-style-type: decimal;
.frequency-group-item {
display: inline;
}
.frequency-group-list[data-count='0'],
.frequency-group-list[data-count='1'] {
padding-left: 0;
list-style-type: none;
}
.frequency-list {
margin: 0;
padding: 0 0 0 var(--list-padding2);
list-style-type: circle;
}
.frequency-list[data-count='0'],
.frequency-list[data-count='1'] {
padding-left: 0;
list-style-type: none;
}
.frequency-group-item::marker,
.frequency-item::marker {
color: var(--text-color-light3);
.frequency-item {
display: inline;
}
.frequency-disambiguation {
color: var(--text-color-light3);
padding-right: 0.25em;
}
.frequency-separator::before {
content: '';
}
.frequency-disambiguation-separator::before {
content: ':';
}
@ -1113,6 +1096,11 @@ button.action-button[data-icon=source-term]::before {
display: inline;
font-size: 1em;
}
.frequency-body::after {
white-space: pre-wrap;
display: inline;
color: var(--text-color-light3);
}
.entry[data-unique-expression-count='1'] .frequency-item[data-has-reading=false] .frequency-disambiguation,
.entry[data-unique-reading-count='1'][data-unique-expression-count='1'] .frequency-disambiguation,
.frequency-item[data-reading-is-same=true] .frequency-disambiguation-separator,
@ -1125,33 +1113,155 @@ button.action-button[data-icon=source-term]::before {
.entry[data-unique-reading-count='1'] .frequency-disambiguation-reading {
display: none;
}
:root[data-glossary-layout-mode=compact] .frequency-group-list,
:root[data-glossary-layout-mode=compact] .frequency-list,
.frequency-list[data-count='1'] {
:root[data-frequency-display-mode=tags] .frequency-group-tag,
:root[data-frequency-display-mode=split-tags] .frequency-group-tag {
margin: 0;
display: inline;
list-style: none;
}
:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-label,
:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-label {
display: none;
}
:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body,
:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body {
display: inline;
padding: 0;
}
:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body::before,
:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body::before {
display: none;
}
:root[data-frequency-display-mode=tags] .frequency-list,
:root[data-frequency-display-mode=split-tags] .frequency-list {
display: inline;
}
:root[data-frequency-display-mode=list] .frequency-tag,
:root[data-frequency-display-mode=inline-list] .frequency-tag,
:root[data-frequency-display-mode=tags-grouped] .frequency-tag,
:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag {
margin: 0;
display: inline;
}
:root[data-frequency-display-mode=list] .frequency-tag>.tag-label,
:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-label,
:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-label,
:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-label {
display: none;
}
:root[data-frequency-display-mode=list] .frequency-tag>.tag-body,
:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body,
:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body,
:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body {
display: inline;
padding: 0;
}
:root[data-frequency-display-mode=list] .frequency-tag>.tag-body::before,
:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body::before,
:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body::before,
:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body::before {
display: none;
}
:root[data-frequency-display-mode=list] .frequency-body,
:root[data-frequency-display-mode=inline-list] .frequency-body,
:root[data-frequency-display-mode=tags-grouped] .frequency-body,
:root[data-frequency-display-mode=split-tags-grouped] .frequency-body {
display: inline-block;
}
:root[data-frequency-display-mode=inline-list] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,
:root[data-frequency-display-mode=tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,
:root[data-frequency-display-mode=split-tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after {
content: var(--compact-list-separator);
}
:root[data-frequency-display-mode=list] .frequency-group-tag>.tag-body::before,
:root[data-frequency-display-mode=inline-list] .frequency-group-tag>.tag-body::before {
display: none;
}
:root[data-frequency-display-mode=list] .frequency-group-tag.tag.tag-has-body>.tag-label,
:root[data-frequency-display-mode=inline-list] .frequency-group-tag.tag.tag-has-body>.tag-label {
border-radius: var(--tag-border-radius);
}
:root[data-frequency-display-mode=tags] .frequency-tag>.tag-body::before {
display: none;
}
:root[data-frequency-display-mode=tags] .frequency-tag>.tag-body {
background-color: var(--tag-color);
padding-left: 0;
}
:root[data-glossary-layout-mode=compact] .frequency-group-item {
display: inline-block;
margin-right: 1em;
:root[data-frequency-display-mode=tags] .frequency-body {
font-size: var(--tag-font-size);
font-weight: var(--tag-font-weight);
color: var(--tag-text-color);
}
:root[data-glossary-layout-mode=compact] .entry-body-section[data-section-type=frequencies] {
margin-right: -1em;
:root[data-frequency-display-mode=tags] .frequency-tag>.tag-label>.tag-label-content::after {
content: ':';
}
:root[data-glossary-layout-mode=compact] .frequency-item,
.frequency-list[data-count='1'] .frequency-item {
display: inline-block;
:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body::before {
display: none;
}
:root[data-glossary-layout-mode=compact] .frequency-item:not(:first-child)::before,
.frequency-list[data-count='1'] .frequency-item:not(:first-child)::before {
white-space: pre-wrap;
content: var(--compact-list-separator);
display: inline;
:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body {
background-color: var(--tag-color);
padding-left: 0;
}
:root[data-frequency-display-mode=tags-grouped] .frequency-list {
font-size: var(--tag-font-size);
font-weight: var(--tag-font-weight);
color: var(--tag-text-color);
}
:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-label>.tag-label-content::after {
content: ':';
}
:root[data-frequency-display-mode=tags] .frequency-disambiguation,
:root[data-frequency-display-mode=tags-grouped] .frequency-disambiguation,
:root[data-frequency-display-mode=tags] .frequency-body::after,
:root[data-frequency-display-mode=tags-grouped] .frequency-body::after {
color: inherit;
font-weight: normal;
opacity: 0.75;
}
:root[data-frequency-display-mode=list] .frequency-group-list {
list-style-type: decimal;
padding: 0 0 0 var(--list-padding1);
}
:root[data-frequency-display-mode=list] .frequency-group-item {
display: list-item;
}
:root[data-frequency-display-mode=list] .frequency-group-item::marker {
color: var(--text-color-light3);
}
:root[data-glossary-layout-mode=compact] .frequency-tag-list,
.frequency-group-item[data-count='1'] .frequency-tag-list {
:root[data-frequency-display-mode=list] .frequency-group-tag {
display: block;
}
:root[data-frequency-display-mode=list] .frequency-group-tag>.tag-label {
display: inline-flex;
}
:root[data-frequency-display-mode=list] .frequency-list {
list-style-type: circle;
padding: 0 0 0 var(--list-padding2);
}
:root[data-frequency-display-mode=list] .frequency-item {
display: list-item;
}
:root[data-frequency-display-mode=list] .frequency-item::marker {
color: var(--text-color-light3);
}
:root[data-frequency-display-mode=list] .frequency-group-list[data-count='1'] {
list-style-type: none;
padding-left: 0;
}
:root[data-frequency-display-mode=list] .frequency-group-list[data-count='1']>.frequency-group-item {
display: inline;
}
:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body {
display: inline-flex;
}
:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body>.frequency-body {
display: inline;
}
:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-list {
list-style-type: none;
padding-left: 0;
}
:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-item {
display: inline;
}

5
ext/data/schemas/options-schema.json
View File

@ -271,6 +271,11 @@
"type": "string",
"enum": ["left", "right", "top", "bottom"],
"default": "top"
},
"frequencyDisplayMode": {
"type": "string",
"enum": ["tags", "tags-grouped", "split-tags", "split-tags-grouped", "inline-list", "list"],
"default": "split-tags-grouped"
}
}
},

20
ext/display-templates.html
View File

@ -23,7 +23,7 @@
</div>
<div class="entry-body">
<div class="entry-body-section" data-section-type="frequencies">
<ol class="entry-body-section-content frequency-group-list"></ol>
<div class="entry-body-section-content frequency-group-list"></div>
</div>
<div class="entry-body-section" data-section-type="pitch-accents">
<ol class="entry-body-section-content term-pitch-accent-group-list"></ol>
@ -52,8 +52,10 @@
<template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template>
<!-- Frequency templates -->
<template id="frequency-group-item-template"><li class="frequency-group-item"><div class="frequency-tag-list tag-list"></div><ul class="frequency-list"></ul></li></template>
<template id="term-frequency-item-template" data-remove-whitespace-text="true"><li class="frequency-item" data-frequency-type="term">
<template id="frequency-group-item-template"><span class="frequency-group-item"><span class="tag tag-has-body frequency-group-tag" data-category="frequency"><span class="tag-label"><span class="tag-label-content"></span></span><span class="tag-body"><span class="tag-body-content frequency-list"></span></span></span></span></template>
<template id="term-frequency-item-template" data-remove-whitespace-text="true"><span class="frequency-item"><span class="tag tag-has-body frequency-tag" data-category="frequency" data-frequency-type="term">
<span class="tag-label"><span class="tag-label-content"></span></span>
<span class="tag-body"><span class="tag-body-content frequency-body">
<ruby class="frequency-disambiguation">
<span class="frequency-disambiguation-expression"></span>
<span class="frequency-disambiguation-separator"></span>
@ -61,10 +63,14 @@
</ruby>
<span class="frequency-separator"></span>
<span class="frequency-value"></span>
</li></template>
<template id="kanji-frequency-item-template" data-remove-whitespace-text="true"><li class="frequency-item" data-frequency-type="kanji">
</span></span>
</span></span></template>
<template id="kanji-frequency-item-template" data-remove-whitespace-text="true"><span class="frequency-item"><span class="tag tag-has-body frequency-tag" data-category="frequency" data-frequency-type="kanji">
<span class="tag-label"><span class="tag-label-content"></span></span>
<span class="tag-body"><span class="tag-body-content frequency-body">
<span class="frequency-value"></span>
</li></template>
</span></span>
</span></span></template>
<!-- Pitch accent templates -->
<template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;" focusable="false">
@ -100,7 +106,7 @@
<div class="tags tag-list"></div>
<div class="entry-body">
<div class="entry-body-section" data-section-type="frequencies">
<ol class="entry-body-section-content frequency-group-list"></ol>
<div class="entry-body-section-content frequency-group-list"></div>
</div>
</div>
<table class="kanji-glyph-data"><tbody>

12
ext/js/data/options-util.js
View File

@ -457,7 +457,8 @@ class OptionsUtil {
{async: false, update: this._updateVersion5.bind(this)},
{async: true, update: this._updateVersion6.bind(this)},
{async: false, update: this._updateVersion7.bind(this)},
{async: true, update: this._updateVersion8.bind(this)}
{async: true, update: this._updateVersion8.bind(this)},
{async: false, update: this._updateVersion9.bind(this)}
];
}
@ -736,4 +737,13 @@ class OptionsUtil {
}
return options;
}
_updateVersion9(options) {
// Version 9 changes:
// Added general.frequencyDisplayMode.
for (const profile of options.profiles) {
profile.options.general.frequencyDisplayMode = 'split-tags-grouped';
}
return options;
}
}

20
ext/js/display/display-generator.js
View File

@ -581,16 +581,21 @@ class DisplayGenerator {
_createFrequencyGroup(details, kanji) {
const {dictionary, frequencyData} = details;
const node = this._templates.instantiate('frequency-group-item');
const body = node.querySelector('.tag-body-content');
const tagList = node.querySelector('.frequency-tag-list');
const tag = this._createTag({notes: '', name: dictionary, category: 'frequency'});
tagList.appendChild(tag);
this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
node.dataset.details = dictionary;
const frequencyListContainer = node.querySelector('.frequency-list');
const createItem = (kanji ? this._createKanjiFrequency.bind(this) : this._createTermFrequency.bind(this));
this._appendMultiple(frequencyListContainer, createItem, frequencyData, dictionary);
for (let i = 0, ii = frequencyData.length; i < ii; ++i) {
const item = frequencyData[i];
const itemNode = (kanji ? this._createKanjiFrequency(item, dictionary) : this._createTermFrequency(item, dictionary));
itemNode.dataset.index = `${i}`;
body.appendChild(itemNode);
}
body.dataset.count = `${frequencyData.length}`;
node.dataset.count = `${frequencyData.length}`;
return node;
@ -600,6 +605,8 @@ class DisplayGenerator {
const {expression, reading, frequencies} = details;
const node = this._templates.instantiate('term-frequency-item');
this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
const frequency = frequencies.join(', ');
this._setTextContent(node.querySelector('.frequency-disambiguation-expression'), expression, 'ja');
@ -622,6 +629,7 @@ class DisplayGenerator {
const frequency = frequencies.join(', ');
this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
this._setTextContent(node.querySelector('.frequency-value'), frequency, 'ja');
node.dataset.character = character;

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

@ -812,6 +812,7 @@ class Display extends EventDispatcher {
data.ankiEnabled = `${options.anki.enable}`;
data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`;
data.compactTags = `${options.general.compactTags}`;
data.frequencyDisplayMode = `${options.general.frequencyDisplayMode}`;
data.enableSearchTags = `${options.scanning.enableSearchTags}`;
data.showPitchAccentDownstepNotation = `${options.general.showPitchAccentDownstepNotation}`;
data.showPitchAccentPositionNotation = `${options.general.showPitchAccentPositionNotation}`;

16
ext/settings.html
View File

@ -677,6 +677,22 @@
<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">
<div class="settings-item-left">
<div class="settings-item-label">Frequency display style</div>
<div class="settings-item-description">Change how frequency information is presented.</div>
</div>
<div class="settings-item-right">
<select data-setting="general.frequencyDisplayMode">
<option value="tags">Tags</option>
<option value="tags-grouped">Tags, grouped content</option>
<option value="split-tags">Split tags</option>
<option value="split-tags-grouped">Split tags, grouped content</option>
<option value="inline-list">Inline list</option>
<option value="list">List</option>
</select>
</div>
</div></div>
<div class="settings-item advanced-only">
<div class="settings-item-inner settings-item-inner-wrappable">
<div class="settings-item-left">

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

@ -294,7 +294,8 @@ function createProfileOptionsUpdatedTestData1() {
usePopupWindow: false,
popupCurrentIndicatorMode: 'triangle',
popupActionBarVisibility: 'auto',
popupActionBarLocation: 'top'
popupActionBarLocation: 'top',
frequencyDisplayMode: 'split-tags-grouped'
},
audio: {
enabled: true,
@ -559,7 +560,7 @@ function createOptionsUpdatedTestData1() {
}
],
profileCurrent: 0,
version: 8,
version: 9,
global: {
database: {
prefixWildcardsSupported: false