Skip to content

Commit

Permalink
Navigation history dropdowns (FreeTubeApp#5227)
Browse files Browse the repository at this point in the history 
* Supplant mousedown handler for ft-icon-button

* Implement navigation history dropdowns

* Update top nav to handle icon button styling

* Implement long-press handling & adjust arrow logic

* Prevent context menu from appearing in dev

* Implement base nav history range determination logic

* Solidify route.meta.title labelling & specify future steps

* Improve readability & fix top-nav-with-main-color icon button styling

* Update nav icon titles to reflect new behavior, & make their title text show even when disabled

* Add checkmark icon to active history entry

* Update checkmark styling to have uniform flex-start alignment

* Fix top bar with main color navigation arrow icon bug

* Update to use the NavigationHistory API

* Implement workaround for updating the current page title in the dropdown list

* Have document title update properly

* Fix webpack build issue

* Fix document.title not populating on the first page after loading the app.

* Fix linting

* Update app title for hashtag route

* Update search page titles to include query

* Remove hardcoded disabled coloring

* Fix 'FreeTube' title appearing for community posts & on first search navigation
  • Loading branch information
@kommunarr
kommunarr authored Dec 4, 2024
1 parent b91f431 commit 0eb8271
Show file tree
Hide file tree
Showing 18 changed files with 316 additions and 84 deletions.
4 changes: 4 additions & 0 deletions src/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ const IpcChannels = {
OPEN_EXTERNAL_LINK: 'open-external-link',
GET_SYSTEM_LOCALE: 'get-system-locale',
GET_PICTURES_PATH: 'get-pictures-path',
GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX: 'get-navigation-history-entry-at-index',
GET_NAV_HISTORY_ACTIVE_INDEX: 'get-navigation-history-active-index',
GET_NAV_HISTORY_LENGTH: 'get-navigation-history-length',
GO_TO_NAV_HISTORY_OFFSET: 'go-to-navigation-history-index',
SHOW_OPEN_DIALOG: 'show-open-dialog',
SHOW_SAVE_DIALOG: 'show-save-dialog',
STOP_POWER_SAVE_BLOCKER: 'stop-power-save-blocker',
Expand Down
20 changes: 20 additions & 0 deletions src/main/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -892,6 +892,26 @@ function runApp() {
session.defaultSession.closeAllConnections()
})

// #region navigation history

ipcMain.on(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, ({ sender }, offset) => {
sender.navigationHistory.goToOffset(offset)
})

ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, async ({ sender }, index) => {
return sender.navigationHistory.getEntryAtIndex(index)?.title
})

ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX, async ({ sender }) => {
return sender.navigationHistory.getActiveIndex()
})

ipcMain.handle(IpcChannels.GET_NAV_HISTORY_LENGTH, async ({ sender }) => {
return sender.navigationHistory.length()
})

// #endregion navigation history

ipcMain.handle(IpcChannels.OPEN_EXTERNAL_LINK, (_, url) => {
if (typeof url === 'string') {
let parsedURL
Expand Down
17 changes: 15 additions & 2 deletions src/renderer/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export default defineComponent({
externalPlayer: function () {
return this.$store.getters.getExternalPlayer
},

defaultInvidiousInstance: function () {
return this.$store.getters.getDefaultInvidiousInstance
},
Expand Down Expand Up @@ -144,6 +145,10 @@ export default defineComponent({
return this.$store.getters.getExternalLinkHandling
},

appTitle: function () {
return this.$store.getters.getAppTitle
},

openDeepLinksInNewWindow: function () {
return this.$store.getters.getOpenDeepLinksInNewWindow
}
Expand All @@ -158,10 +163,11 @@ export default defineComponent({
secColor: 'checkThemeSettings',

locale: 'setLocale',

appTitle: 'setDocumentTitle'
},
created () {
this.checkThemeSettings()
this.setWindowTitle()
this.setLocale()
},
mounted: function () {
Expand Down Expand Up @@ -207,10 +213,16 @@ export default defineComponent({
if (this.$router.currentRoute.path === '/') {
this.$router.replace({ path: this.landingPage })
}

this.setWindowTitle()
})
})
},
methods: {
setDocumentTitle: function(value) {
document.title = value
this.$nextTick(() => this.$refs.topNav?.setActiveNavigationHistoryEntryTitle(value))
},
checkThemeSettings: function () {
const theme = {
baseTheme: this.baseTheme || 'dark',
Expand Down Expand Up @@ -539,7 +551,7 @@ export default defineComponent({

setWindowTitle: function() {
if (this.windowTitle !== null) {
document.title = this.windowTitle
this.setAppTitle(this.windowTitle)
}
},

Expand All @@ -562,6 +574,7 @@ export default defineComponent({
'getExternalPlayerCmdArgumentsData',
'fetchInvidiousInstances',
'fetchInvidiousInstancesFromFile',
'setAppTitle',
'setRandomCurrentInvidiousInstance',
'setupListenersToSyncWindows',
'updateBaseTheme',
Expand Down
62 changes: 47 additions & 15 deletions src/renderer/components/ft-icon-button/ft-icon-button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { defineComponent, nextTick } from 'vue'
import FtPrompt from '../ft-prompt/ft-prompt.vue'
import { sanitizeForHtmlId } from '../../helpers/accessibility'

const LONG_CLICK_BOUNDARY_MS = 500

export default defineComponent({
name: 'FtIconButton',
components: {
Expand Down Expand Up @@ -55,21 +57,27 @@ export default defineComponent({
dropdownOptions: {
// Array of objects with these properties
// - type: ('labelValue'|'divider', default to 'labelValue' for less typing)
// - label: String (if type == 'labelValue')
// - value: String (if type == 'labelValue')
// - label: String (if type === 'labelValue')
// - value: String (if type === 'labelValue')
// - (OPTIONAL) active: Number (if type === 'labelValue')
type: Array,
default: () => { return [] }
},
dropdownModalOnMobile: {
type: Boolean,
default: false
},
openOnRightOrLongClick: {
type: Boolean,
default: false
}
},
emits: ['click', 'disabled-click'],
data: function () {
return {
dropdownShown: false,
mouseDownOnIcon: false,
blockLeftClick: false,
longPressTimer: null,
useModal: false
}
},
Expand All @@ -91,14 +99,24 @@ export default defineComponent({
this.dropdownShown = false
},

handleIconClick: function () {
handleIconClick: function (e, isRightOrLongClick = false) {
if (this.disabled) {
this.$emit('disabled-click')
return
}
if (this.forceDropdown || (this.dropdownOptions.length > 0)) {
this.dropdownShown = !this.dropdownShown

if (this.blockLeftClick) {
return
}

if (this.longPressTimer != null) {
clearTimeout(this.longPressTimer)
this.longPressTimer = null
}

if ((!this.openOnRightOrLongClick || (this.openOnRightOrLongClick && isRightOrLongClick)) &&
(this.forceDropdown || this.dropdownOptions.length > 0)) {
this.dropdownShown = !this.dropdownShown
if (this.dropdownShown && !this.useModal) {
// wait until the dropdown is visible
// then focus it so we can hide it automatically when it loses focus
Expand All @@ -111,24 +129,38 @@ export default defineComponent({
}
},

handleIconMouseDown: function () {
if (this.disabled) { return }
if (this.dropdownShown) {
this.mouseDownOnIcon = true
handleIconPointerDown: function (event) {
if (!this.openOnRightOrLongClick) { return }
if (event.button === 2) { // right button click
this.handleIconClick(null, true)
} else if (event.button === 0) { // left button click
this.longPressTimer = setTimeout(() => {
this.handleIconClick(null, true)

// prevent a long press that ends on the icon button from firing the handleIconClick handler
window.addEventListener('pointerup', this.preventButtonClickAfterLongPress, { once: true })
window.addEventListener('pointercancel', () => {
window.removeEventListener('pointerup', this.preventButtonClickAfterLongPress)
}, { once: true })
}, LONG_CLICK_BOUNDARY_MS)
}
},

// prevent the handleIconClick handler from firing for an instant
preventButtonClickAfterLongPress: function () {
this.blockLeftClick = true
setTimeout(() => { this.blockLeftClick = false }, 0)
},

handleDropdownFocusOut: function () {
if (this.mouseDownOnIcon) {
this.mouseDownOnIcon = false
} else if (!this.$refs.dropdown.matches(':focus-within')) {
if (this.dropdownShown && !this.$refs.ftIconButton.matches(':focus-within')) {
this.dropdownShown = false
}
},

handleDropdownEscape: function () {
this.$refs.iconButton.focus()
// handleDropdownFocusOut will hide the dropdown for us
this.dropdownShown = false
this.$refs.ftIconButton.firstElementChild.focus()
},

handleDropdownClick: function ({ url, index }) {
Expand Down
47 changes: 36 additions & 11 deletions src/renderer/components/ft-icon-button/ft-icon-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
flex-flow: row wrap;
justify-content: space-evenly;
position: relative;
line-height: normal;
user-select: none;
}

Expand All @@ -24,12 +25,13 @@

&:not(.disabled) {
&:hover,
&:focus-visible {
&:focus-visible,
&.pressed {
background-color: var(--side-nav-hover-color);
color: var(--side-nav-hover-text-color);
}

&:active {
&.active {
background-color: var(--side-nav-active-color);
color: var(--side-nav-active-text-color);
}
Expand All @@ -38,12 +40,13 @@

&.base-no-default:not(.disabled) {
&:hover,
&:focus-visible {
&:focus-visible,
&.pressed {
background-color: var(--side-nav-hover-color);
color: var(--side-nav-hover-text-color);
}

&:active {
&.active {
background-color: var(--side-nav-active-color);
color: var(--side-nav-active-text-color);
}
Expand All @@ -55,11 +58,12 @@

&:not(.disabled) {
&:hover,
&:focus-visible {
&:focus-visible,
&.pressed {
background-color: var(--primary-color-hover);
}

&:active {
&.active {
background-color: var(--primary-color-active);
}
}
Expand All @@ -72,11 +76,12 @@

&:not(.disabled) {
&:hover,
&:focus-visible {
&:focus-visible,
&.pressed {
background-color: var(--accent-color-hover);
}

&:active {
&.active {
background-color: var(--accent-color-active);
}
}
Expand All @@ -88,11 +93,12 @@

&:not(.disabled) {
&:hover,
&:focus-visible {
&:focus-visible,
&.pressed {
background-color: var(--destructive-hover-color);
}

&:active {
&.active {
background-color: var(--destructive-active-color);
}
}
Expand Down Expand Up @@ -150,6 +156,17 @@
padding: 0;
}

:has(.active) {
.checkmarkColumn {
min-inline-size: 12px;
}

.listItem {
display: flex;
gap: 6px;
}
}

.listItem {
cursor: pointer;
margin: 0;
Expand All @@ -159,12 +176,20 @@
white-space: nowrap;

&:hover,
&:focus-visible {
&:focus-visible,
&.pressed,
&.active {
background-color: var(--side-nav-hover-color);
color: var(--side-nav-hover-text-color);
transition: background 0.2s ease-in;
}

&.active {
font-weight: 600;
display: flex;
gap: 6px;
}

&:active {
background-color: var(--side-nav-active-color);
color: var(--side-nav-active-text-color);
Expand Down
Loading

0 comments on commit 0eb8271

Please sign in to comment.