diff options
Diffstat (limited to 'ext/mixed')
| -rw-r--r-- | ext/mixed/css/display.css | 165 | ||||
| -rw-r--r-- | ext/mixed/js/display.js | 43 |
2 files changed, 172 insertions, 36 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index f6317d54..5a8c0212 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -38,6 +38,13 @@ --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 */ --background-color: #ffffff; --glossary-image-background-color: #eeeeee; @@ -66,6 +73,18 @@ --tag-part-of-speech-background-color: #565656; --tag-search-background-color: #8a8a91; --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] { /* Colors */ @@ -96,6 +115,18 @@ --tag-part-of-speech-background-color: #565656; --tag-search-background-color: #69696e; --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 */ -.navigation-header { - top: 0; - left: 0; +/* Sidebar layout */ +.content-outer { width: 100%; - height: 2.1em; - 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; + height: 100%; + display: flex; + flex-flow: row nowrap; + overflow: hidden; + align-items: stretch; + justify-content: center; +} +.content-sidebar { + flex: 0 0 auto; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + background-color: var(--sidebar-background-color); + z-index: 1; + position: relative; + display: block; } -.navigation-header-actions { +.content-sidebar[hidden] { + 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%; } -.navigation-header:not([data-has-previous=true]) .navigation-header-actions .action-button.action-previous::before, -.navigation-header:not([data-has-next=true]) .navigation-header-actions .action-button.action-next::before { - opacity: 0.25; - -webkit-filter: grayscale(100%); - filter: grayscale(100%); +.content-sidebar-top { + flex: 1 1 auto; + display: flex; + flex-flow: column nowrap; } -.action-button.action-next::before { - transform: scaleX(-1); +.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 { - position: fixed; +button.sidebar-button:disabled { + cursor: default; +} +button.sidebar-button:hover:not(:disabled) { + background-color: var(--sidebar-button-background-color-hover); +} +button.sidebar-button:active:not(:disabled) { + background-color: var(--sidebar-button-background-color-active); } -:root[data-yomichan-page=float] .navigation-header:not([hidden])~.navigation-header-spacer { - height: 2.1em; +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); } diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index f79ba303..2ee5b608 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -90,6 +90,10 @@ class Display extends EventDispatcher { this._contentScrollBodyElement = document.querySelector('#content-body'); this._contentScrollFocusElement = document.querySelector('#content-scroll-focus'); 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([ ['close', () => { this.onEscape(); }], @@ -406,6 +410,10 @@ class Display extends EventDispatcher { return query; } + close() { + // NOP + } + // Message handlers _onMessage({action, params}, sender, callback) { @@ -543,6 +551,11 @@ class Display extends EventDispatcher { this.setContent(details); } + _onCloseButtonClick(e) { + e.preventDefault(); + this.close(); + } + _onSourceTermView(e) { e.preventDefault(); this._sourceTermView(); @@ -769,16 +782,16 @@ class Display extends EventDispatcher { this._interactive = 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, 'wheel', this._onWheel.bind(this), {passive: false}); - if (actionPrevious !== null) { - this._persistentEventListeners.addEventListener(actionPrevious, 'click', this._onSourceTermView.bind(this)); + if (this._closeButton !== null) { + this._persistentEventListeners.addEventListener(this._closeButton, 'click', this._onCloseButtonClick.bind(this)); + } + if (this._navigationPreviousButton !== null) { + this._persistentEventListeners.addEventListener(this._navigationPreviousButton, 'click', this._onSourceTermView.bind(this)); } - if (actionNext !== null) { - this._persistentEventListeners.addEventListener(actionNext, 'click', this._onNextTermView.bind(this)); + if (this._navigationNextButton !== null) { + this._persistentEventListeners.addEventListener(this._navigationNextButton, 'click', this._onNextTermView.bind(this)); } } else { this._persistentEventListeners.removeAllEventListeners(); @@ -943,7 +956,7 @@ class Display extends EventDispatcher { errorExtensionUnloaded.hidden = false; } - this._updateNavigation(null, null); + this._updateNavigation(false, false); this._setNoContentVisible(false); this._setTitleText(''); } @@ -984,10 +997,16 @@ class Display extends EventDispatcher { } _updateNavigation(previous, next) { - if (this._navigationHeader === null) { return; } - this._navigationHeader.hidden = !(previous || next); - this._navigationHeader.dataset.hasPrevious = `${!!previous}`; - this._navigationHeader.dataset.hasNext = `${!!next}`; + if (this._contentSidebar !== null) { + this._contentSidebar.dataset.hasNavigationPrevious = `${previous}`; + this._contentSidebar.dataset.hasNavigationNext = `${next}`; + } + if (this._navigationPreviousButton !== null) { + this._navigationPreviousButton.disabled = !previous; + } + if (this._navigationNextButton !== null) { + this._navigationNextButton.disabled = !next; + } } async _updateAdderButtons(token, isTerms, definitions) { |