alex/yomichan
1
Fork 0
Code Releases Activity

Popup navigation style updates (#1035)

Browse Source 
* Add close function to Display

* Add new sidebar with navigation and close buttons

* Set up new navigation functionality

* Remove old navigation
This commit is contained in:
toasted-nutbread 2020-11-15 14:12:48 -05:00 committed by GitHub
parent 37af524015
commit 2e3169f68c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 190 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ext/fg/float.html
View File

@ -15,17 +15,13 @@
</head> </head>
<body> <body>
<div class="content-outer">
<div class="content" id="content"><div class="content-body" id="content-body"> <div class="content" id="content"><div class="content-body" id="content-body">
<span tabindex="-1" id="content-scroll-focus"></span> <span tabindex="-1" id="content-scroll-focus"></span>
<div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div> <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
<div id="navigation-header" class="navigation-header" hidden><div class="navigation-header-actions">
<button class="action-button action-previous" data-icon="source-term" title="Source term (Alt + B)"></button>
<button class="action-button action-next" data-icon="source-term" title="Next term (Alt + F)"></button>
</div></div><div class="navigation-header-spacer"></div>
<div class="scan-disable" id="query-parser-container" hidden> <div class="scan-disable" id="query-parser-container" hidden>
<div class="search-option" id="query-parser-mode-container" hidden> <div class="search-option" id="query-parser-mode-container" hidden>
<select id="query-parser-mode-select"></select> <select id="query-parser-mode-select"></select>
@ -52,6 +48,17 @@
</div> </div>
</div></div> </div></div>
<div class="content-sidebar" id="content-sidebar" hidden><div class="content-sidebar-inner">
<div class="content-sidebar-top">
<button class="sidebar-button danger" id="close-button" title="Close popup"><span class="sidebar-button-icon" data-icon="cross"></span></button>
<button class="sidebar-button" disabled id="navigate-previous-button" title="Previous definition (Alt + B)"><span class="sidebar-button-icon" data-icon="left-chevron"></span></button>
<button class="sidebar-button" disabled id="navigate-next-button" title="Next definition (Alt + F)"><span class="sidebar-button-icon" data-icon="right-chevron"></span></button>
</div>
<div class="content-sidebar-bottom">
<!--<button class="sidebar-button" id="profile-button"><span class="sidebar-button-icon" data-icon="profile"></span></button>-->
</div>
</div></div>
</div>
<!-- Scripts --> <!-- Scripts -->
<script src="/mixed/js/core.js"></script> <script src="/mixed/js/core.js"></script>

6
ext/fg/js/float.js
View File

@ -63,7 +63,7 @@ class DisplayFloat extends Display {
} }
onEscape() { onEscape() {
this._invokeOwner('closePopup'); this.close();
} }
async getDocumentTitle() { async getDocumentTitle() {
@ -83,6 +83,10 @@ class DisplayFloat extends Display {
return data.data; return data.data;
} }
close() {
this._invokeOwner('closePopup');
}
// Message handling // Message handling
_onWindowMessage(e) { _onWindowMessage(e) {

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

@ -38,6 +38,13 @@
--entry-padding: 0.72em; --entry-padding: 0.72em;
--sidebar-width-no-units: 40;
--sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units)));
--sidebar-button-height-no-units: 30;
--sidebar-button-height: calc(1em * (var(--sidebar-button-height-no-units) / var(--font-size-no-units)));
--sidebar-button-icon-size-no-units: 16;
--sidebar-button-icon-size: calc(1em * (var(--sidebar-button-icon-size-no-units) / var(--font-size-no-units)));
/* Colors */ /* Colors */
--background-color: #ffffff; --background-color: #ffffff;
--glossary-image-background-color: #eeeeee; --glossary-image-background-color: #eeeeee;
@ -66,6 +73,18 @@
--tag-part-of-speech-background-color: #565656; --tag-part-of-speech-background-color: #565656;
--tag-search-background-color: #8a8a91; --tag-search-background-color: #8a8a91;
--tag-pitch-accent-dictionary-background-color: #6640be; --tag-pitch-accent-dictionary-background-color: #6640be;
--sidebar-background-color: #f8f9fa;
--sidebar-button-background-color: transparent;
--sidebar-button-background-color-hover: #cccccc;
--sidebar-button-background-color-active: #aaaaaa;
--sidebar-button-danger-background-color: transparent;
--sidebar-button-danger-background-color-hover: #dd2222;
--sidebar-button-danger-background-color-active: #bb2222;
--sidebar-button-icon-color: #333333;
--sidebar-button-disabled-icon-color: #888888;
--sidebar-button-danger-icon-color: #ffffff;
} }
:root[data-yomichan-theme=dark] { :root[data-yomichan-theme=dark] {
/* Colors */ /* Colors */
@ -96,6 +115,18 @@
--tag-part-of-speech-background-color: #565656; --tag-part-of-speech-background-color: #565656;
--tag-search-background-color: #69696e; --tag-search-background-color: #69696e;
--tag-pitch-accent-dictionary-background-color: #6640be; --tag-pitch-accent-dictionary-background-color: #6640be;
--sidebar-background-color: #282828;
--sidebar-button-background-color: transparent;
--sidebar-button-background-color-hover: #3a3a3a;
--sidebar-button-background-color-active: #5a5a5a;
--sidebar-button-danger-background-color: transparent;
--sidebar-button-danger-background-color-hover: #dd2222;
--sidebar-button-danger-background-color-active: #bb2222;
--sidebar-button-icon-color: #cccccc;
--sidebar-button-disabled-icon-color: #777777;
--sidebar-button-danger-icon-color: #ffffff;
} }
@ -172,39 +203,125 @@ a {
} }
/* Navigation */ /* Sidebar layout */
.navigation-header { .content-outer {
top: 0;
left: 0;
width: 100%; width: 100%;
height: 2.1em; height: 100%;
box-sizing: border-box;
padding: 0.25em 0.5em;
border-bottom: var(--thin-border-size) solid var(--light-border-color);
background-color: var(--background-color);
z-index: 10;
}
.navigation-header-actions {
display: flex; display: flex;
flex-flow: row nowrap;
overflow: hidden;
align-items: stretch;
justify-content: center;
} }
.navigation-header:not([data-has-previous=true]) .navigation-header-actions .action-button.action-previous::before, .content-sidebar {
.navigation-header:not([data-has-next=true]) .navigation-header-actions .action-button.action-next::before { flex: 0 0 auto;
opacity: 0.25; height: 100%;
-webkit-filter: grayscale(100%); overflow-x: hidden;
filter: grayscale(100%); overflow-y: auto;
background-color: var(--sidebar-background-color);
z-index: 1;
position: relative;
display: block;
} }
.action-button.action-next::before { .content-sidebar[hidden] {
transform: scaleX(-1); display: none;
}
.content-sidebar[hidden][data-has-navigation-previous=true],
.content-sidebar[hidden][data-has-navigation-next=true] {
display: block;
}
.content-sidebar-inner {
display: flex;
flex-flow: column nowrap;
width: var(--sidebar-width);
height: 100%;
}
.content-sidebar-top {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
}
.content-sidebar-bottom {
position: sticky;
bottom: 0;
background-color: var(--sidebar-background-color);
display: flex;
flex-flow: column nowrap;
} }
:root[data-yomichan-page=search] .navigation-header {
position: sticky; /* Sidebar buttons */
button.sidebar-button {
width: 100%;
height: var(--sidebar-button-height);
background-color: var(--sidebar-button-background-color);
margin: 0;
padding: 0;
border: 0;
cursor: pointer;
display: block;
transition: background-color 0.125s ease-in-out;
outline: none;
font-size: inherit;
} }
:root[data-yomichan-page=float] .navigation-header { button.sidebar-button:disabled {
position: fixed; cursor: default;
} }
:root[data-yomichan-page=float] .navigation-header:not([hidden])~.navigation-header-spacer { button.sidebar-button:hover:not(:disabled) {
height: 2.1em; background-color: var(--sidebar-button-background-color-hover);
}
button.sidebar-button:active:not(:disabled) {
background-color: var(--sidebar-button-background-color-active);
}
button.sidebar-button.danger {
background-color: var(--sidebar-button-danger-background-color);
}
button.sidebar-button.danger:hover:not(:disabled) {
background-color: var(--sidebar-button-danger-background-color-hover);
}
button.sidebar-button.danger:active:not(:disabled) {
background-color: var(--sidebar-button-danger-background-color-active);
}
.sidebar-button-icon {
display: block;
width: 100%;
height: 100%;
mask-repeat: no-repeat;
mask-position: center center;
mask-mode: alpha;
mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
-webkit-mask-mode: alpha;
-webkit-mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
background-color: var(--sidebar-button-icon-color);
transition: background-color 0.125s ease-in-out;
}
button.sidebar-button:disabled .sidebar-button-icon {
background-color: var(--sidebar-button-disabled-icon-color);
}
button.sidebar-button.danger:hover .sidebar-button-icon {
background-color: var(--sidebar-button-danger-icon-color);
}
.sidebar-button-icon[data-icon=cross] {
mask-image: url(/mixed/img/cross.svg);
-webkit-mask-image: url(/mixed/img/cross.svg);
}
.sidebar-button-icon[data-icon=left-chevron] {
mask-image: url(/mixed/img/left-chevron.svg);
-webkit-mask-image: url(/mixed/img/left-chevron.svg);
}
.sidebar-button-icon[data-icon=right-chevron] {
mask-image: url(/mixed/img/right-chevron.svg);
-webkit-mask-image: url(/mixed/img/right-chevron.svg);
}
.sidebar-button-icon[data-icon=kebab-menu] {
mask-image: url(/mixed/img/kebab-menu.svg);
-webkit-mask-image: url(/mixed/img/kebab-menu.svg);
}
.sidebar-button-icon[data-icon=profile] {
mask-image: url(/mixed/img/profile.svg);
-webkit-mask-image: url(/mixed/img/profile.svg);
} }

43
ext/mixed/js/display.js
View File

@ -90,6 +90,10 @@ class Display extends EventDispatcher {
this._contentScrollBodyElement = document.querySelector('#content-body'); this._contentScrollBodyElement = document.querySelector('#content-body');
this._contentScrollFocusElement = document.querySelector('#content-scroll-focus'); this._contentScrollFocusElement = document.querySelector('#content-scroll-focus');
this._windowScroll = new WindowScroll(this._contentScrollElement); this._windowScroll = new WindowScroll(this._contentScrollElement);
this._contentSidebar = document.querySelector('#content-sidebar');
this._closeButton = document.querySelector('#close-button');
this._navigationPreviousButton = document.querySelector('#navigate-previous-button');
this._navigationNextButton = document.querySelector('#navigate-next-button');
this.registerActions([ this.registerActions([
['close', () => { this.onEscape(); }], ['close', () => { this.onEscape(); }],
@ -406,6 +410,10 @@ class Display extends EventDispatcher {
return query; return query;
} }
close() {
// NOP
}
// Message handlers // Message handlers
_onMessage({action, params}, sender, callback) { _onMessage({action, params}, sender, callback) {
@ -543,6 +551,11 @@ class Display extends EventDispatcher {
this.setContent(details); this.setContent(details);
} }
_onCloseButtonClick(e) {
e.preventDefault();
this.close();
}
_onSourceTermView(e) { _onSourceTermView(e) {
e.preventDefault(); e.preventDefault();
this._sourceTermView(); this._sourceTermView();
@ -769,16 +782,16 @@ class Display extends EventDispatcher {
this._interactive = interactive; this._interactive = interactive;
if (interactive) { if (interactive) {
const actionPrevious = document.querySelector('.action-previous');
const actionNext = document.querySelector('.action-next');
this._persistentEventListeners.addEventListener(document, 'keydown', this.onKeyDown.bind(this), false); this._persistentEventListeners.addEventListener(document, 'keydown', this.onKeyDown.bind(this), false);
this._persistentEventListeners.addEventListener(document, 'wheel', this._onWheel.bind(this), {passive: false}); this._persistentEventListeners.addEventListener(document, 'wheel', this._onWheel.bind(this), {passive: false});
if (actionPrevious !== null) { if (this._closeButton !== null) {
this._persistentEventListeners.addEventListener(actionPrevious, 'click', this._onSourceTermView.bind(this)); this._persistentEventListeners.addEventListener(this._closeButton, 'click', this._onCloseButtonClick.bind(this));
} }
if (actionNext !== null) { if (this._navigationPreviousButton !== null) {
this._persistentEventListeners.addEventListener(actionNext, 'click', this._onNextTermView.bind(this)); this._persistentEventListeners.addEventListener(this._navigationPreviousButton, 'click', this._onSourceTermView.bind(this));
}
if (this._navigationNextButton !== null) {
this._persistentEventListeners.addEventListener(this._navigationNextButton, 'click', this._onNextTermView.bind(this));
} }
} else { } else {
this._persistentEventListeners.removeAllEventListeners(); this._persistentEventListeners.removeAllEventListeners();
@ -943,7 +956,7 @@ class Display extends EventDispatcher {
errorExtensionUnloaded.hidden = false; errorExtensionUnloaded.hidden = false;
} }
this._updateNavigation(null, null); this._updateNavigation(false, false);
this._setNoContentVisible(false); this._setNoContentVisible(false);
this._setTitleText(''); this._setTitleText('');
} }
@ -984,10 +997,16 @@ class Display extends EventDispatcher {
} }
_updateNavigation(previous, next) { _updateNavigation(previous, next) {
if (this._navigationHeader === null) { return; } if (this._contentSidebar !== null) {
this._navigationHeader.hidden = !(previous || next); this._contentSidebar.dataset.hasNavigationPrevious = `${previous}`;
this._navigationHeader.dataset.hasPrevious = `${!!previous}`; this._contentSidebar.dataset.hasNavigationNext = `${next}`;
this._navigationHeader.dataset.hasNext = `${!!next}`; }
if (this._navigationPreviousButton !== null) {
this._navigationPreviousButton.disabled = !previous;
}
if (this._navigationNextButton !== null) {
this._navigationNextButton.disabled = !next;
}
} }
async _updateAdderButtons(token, isTerms, definitions) { async _updateAdderButtons(token, isTerms, definitions) {