-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Add feature: auto hide controls island #1534
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from 6 commits
5d39a93
bcdbad7
2f5562b
98981fd
91c6ad2
a2b65bc
a41440a
b944bd8
0597d3f
c29304c
577b945
a0e185e
72492c1
4c4ea5c
33ea17a
6018619
a76fb38
9d35be2
7773b30
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| <script setup lang="ts"> | ||
| import { defineInvoke } from '@moeru/eventa' | ||
| import { useElectronEventaContext, useElectronEventaInvoke, useElectronMouseInElement } from '@proj-airi/electron-vueuse' | ||
| import { useSettings, useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings' | ||
| import { useSettings, useSettingsAudioDevice, useSettingsControlsIsland } from '@proj-airi/stage-ui/stores/settings' | ||
| import { useTheme } from '@proj-airi/ui' | ||
| import { refDebounced, useIntervalFn } from '@vueuse/core' | ||
| import { useIntervalFn } from '@vueuse/core' | ||
| import { storeToRefs } from 'pinia' | ||
| import { computed, reactive, ref, watch } from 'vue' | ||
| import { useI18n } from 'vue-i18n' | ||
|
|
@@ -29,9 +29,11 @@ const { t } = useI18n() | |
|
|
||
| const settingsAudioDeviceStore = useSettingsAudioDevice() | ||
| const settingsStore = useSettings() | ||
| const settingsControlsIslandStore = useSettingsControlsIsland() | ||
| const context = useElectronEventaContext() | ||
| const { enabled } = storeToRefs(settingsAudioDeviceStore) | ||
| const { alwaysOnTop, controlsIslandIconSize } = storeToRefs(settingsStore) | ||
| const { alwaysOnTop } = storeToRefs(settingsStore) | ||
| const { autoHideControlsIsland, autoHideDelay, autoShowDelay, autoHideOpacity } = storeToRefs(settingsControlsIslandStore) | ||
| const openSettings = useElectronEventaInvoke(electronOpenSettings) | ||
| const openChat = useElectronEventaInvoke(electronOpenChat) | ||
| const isLinux = useElectronEventaInvoke(electron.app.isLinux) | ||
|
|
@@ -46,7 +48,10 @@ const blockingOverlays = reactive(new Set<string>()) | |
| const isBlocked = computed(() => blockingOverlays.size > 0) | ||
|
|
||
| function setOverlay(key: string, active: boolean) { | ||
| active ? blockingOverlays.add(key) : blockingOverlays.delete(key) | ||
| if (active) | ||
| blockingOverlays.add(key) | ||
| else | ||
| blockingOverlays.delete(key) | ||
| } | ||
|
|
||
| // Expose for parent (e.g. to disable click-through when a dialog is open) | ||
|
|
@@ -56,9 +61,64 @@ defineExpose({ | |
| }) | ||
|
|
||
| const { isOutside } = useElectronMouseInElement(islandRef) | ||
| const isOutsideAfter2seconds = refDebounced(isOutside, 1500) | ||
|
|
||
| watch(isOutsideAfter2seconds, (outside) => { | ||
| // Auto-hide logic with configurable delays | ||
| const autoHideDelayMs = computed(() => autoHideDelay.value * 1000) | ||
| const autoShowDelayMs = computed(() => autoShowDelay.value * 1000) | ||
|
|
||
| // Track time since mouse left/entered | ||
| const timeSinceOutside = ref(0) | ||
| const timeSinceInside = ref(0) | ||
|
|
||
| let lastUpdateTime = Date.now() | ||
|
|
||
| // Update time tracking | ||
| useIntervalFn(() => { | ||
| const now = Date.now() | ||
| const delta = now - lastUpdateTime | ||
| lastUpdateTime = now | ||
|
|
||
| if (isOutside.value) { | ||
| timeSinceOutside.value += delta | ||
| timeSinceInside.value = 0 | ||
| } | ||
| else { | ||
| timeSinceInside.value += delta | ||
| timeSinceOutside.value = 0 | ||
| } | ||
| }, 100) | ||
|
|
||
| // Calculate opacity when hidden (0-100 range converted to 0-1) | ||
| const hiddenOpacity = computed(() => autoHideOpacity.value / 100) | ||
|
|
||
| // Auto-hide: hide controls island when mouse leaves after delay | ||
| // Auto-show: show controls island when mouse enters after delay | ||
| const isHidden = computed(() => { | ||
| if (!autoHideControlsIsland.value) | ||
| return false | ||
|
|
||
| // Don't hide if there's a blocking overlay or expanded panel should stay | ||
| if (isBlocked.value || expanded.value) | ||
| return false | ||
|
|
||
| // When mouse is inside, always show immediately (unless show delay is set) | ||
| if (!isOutside.value) { | ||
| if (autoShowDelay.value > 0) { | ||
| // Wait for mouse to be inside for the configured delay before showing | ||
| return timeSinceInside.value < autoShowDelayMs.value | ||
| } | ||
| return false | ||
| } | ||
|
|
||
| // When mouse is outside, hide after delay | ||
| return timeSinceOutside.value >= autoHideDelayMs.value | ||
| }) | ||
|
|
||
| watch(isOutside, (outside) => { | ||
| lastUpdateTime = Date.now() | ||
| timeSinceOutside.value = 0 | ||
| timeSinceInside.value = 0 | ||
|
|
||
| if (outside && expanded.value && !isBlocked.value) { | ||
| expanded.value = false | ||
| } | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 此处的 |
||
|
|
@@ -74,7 +134,7 @@ useIntervalFn(() => { | |
| if (expanded.value && isOutside.value && !isBlocked.value) { | ||
| expanded.value = false | ||
| } | ||
| }, 1500) | ||
| }, () => autoHideDelayMs.value || 5000) | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
|
||
| // Apply alwaysOnTop on mount and when it changes | ||
| watch(alwaysOnTop, (val) => { | ||
|
|
@@ -85,31 +145,13 @@ function toggleAlwaysOnTop() { | |
| alwaysOnTop.value = !alwaysOnTop.value | ||
| } | ||
|
|
||
| // Grouped classes for icon / border / padding and combined style class | ||
| const adjustStyleClasses = computed(() => { | ||
| let isLarge: boolean | ||
|
|
||
| // Determine size based on setting | ||
| switch (controlsIslandIconSize.value) { | ||
| case 'large': | ||
| isLarge = true | ||
| break | ||
| case 'small': | ||
| isLarge = false | ||
| break | ||
| case 'auto': | ||
| default: | ||
| // Fixed to large for better visibility in the new layout, | ||
| // can be changed to windowHeight based check if absolutely needed. | ||
| isLarge = true | ||
| break | ||
| } | ||
|
|
||
| const icon = isLarge ? 'size-5' : 'size-3' | ||
| const border = isLarge ? 'border-2' : 'border-0' | ||
| const padding = isLarge ? 'p-2' : 'p-0.5' | ||
| return { icon, border, padding, button: `${border} ${padding}` } | ||
| }) | ||
| // Static style classes for icon / border / padding | ||
| const adjustStyleClasses = { | ||
| icon: 'size-5', | ||
| border: 'border-2', | ||
| padding: 'p-2', | ||
| button: 'border-2 p-2', | ||
| } | ||
|
|
||
| /** | ||
| * This is a know issue (or expected behavior maybe) to Electron. | ||
|
|
@@ -125,7 +167,14 @@ function refreshWindow() { | |
| </script> | ||
|
|
||
| <template> | ||
| <div ref="islandRef" fixed bottom-2 right-2> | ||
| <div | ||
| ref="islandRef" | ||
| fixed bottom-2 right-2 | ||
| :style="autoHideControlsIsland ? { opacity: isHidden ? hiddenOpacity : 1 } : {}" | ||
| :class="[ | ||
| autoHideControlsIsland ? 'transition-opacity duration-300' : '', | ||
| ]" | ||
| > | ||
| <div flex flex-col items-end gap-1> | ||
| <!-- iOS Style Drawer Panel --> | ||
| <Transition | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,23 @@ | ||
| <script setup lang="ts"> | ||
| import { all } from '@proj-airi/i18n' | ||
| import { isStageTamagotchi } from '@proj-airi/stage-shared' | ||
| import { useAnalytics } from '@proj-airi/stage-ui/composables/use-analytics' | ||
| import { isPosthogAvailableInBuild } from '@proj-airi/stage-ui/stores/analytics' | ||
| import { useSettings } from '@proj-airi/stage-ui/stores/settings' | ||
| import { FieldCheckbox, FieldCombobox, useTheme } from '@proj-airi/ui' | ||
| import { useSettings, useSettingsControlsIsland } from '@proj-airi/stage-ui/stores/settings' | ||
| import { FieldCheckbox, FieldCombobox, FieldRange, useTheme } from '@proj-airi/ui' | ||
| import { computed } from 'vue' | ||
| import { useI18n } from 'vue-i18n' | ||
|
|
||
| const props = withDefaults(defineProps<{ | ||
| needsControlsIslandIconSizeSetting?: boolean | ||
| needsAutoHideControlsIslandSetting?: boolean | ||
| }>(), { | ||
| needsControlsIslandIconSizeSetting: import.meta.env.RUNTIME_ENVIRONMENT === 'electron', | ||
| needsAutoHideControlsIslandSetting: isStageTamagotchi(), | ||
| }) | ||
|
|
||
| const settings = useSettings() | ||
| const settingsControlsIsland = useSettingsControlsIsland() | ||
|
|
||
| const showControlsIsland = computed(() => props.needsControlsIslandIconSizeSetting) | ||
| const showAutoHideControlsIsland = computed(() => props.needsAutoHideControlsIslandSetting) | ||
| const showAnalyticsSettings = computed(() => isPosthogAvailableInBuild()) | ||
| const analyticsToggleValue = computed({ | ||
| get: () => showAnalyticsSettings.value ? settings.analyticsEnabled : false, | ||
|
|
@@ -59,24 +61,62 @@ const languages = computed(() => { | |
| :options="languages" | ||
| /> | ||
|
|
||
| <FieldCombobox | ||
| v-if="showControlsIsland" | ||
| v-model="settings.controlsIslandIconSize" | ||
| <FieldCheckbox | ||
| v-if="showAutoHideControlsIsland" | ||
| v-model="settingsControlsIsland.autoHideControlsIsland" | ||
| v-motion | ||
| :initial="{ opacity: 0, y: 10 }" | ||
| :enter="{ opacity: 1, y: 0 }" | ||
| :duration="250 + (4 * 10)" | ||
| :delay="4 * 50" | ||
| :class="['transition-all', 'ease-in-out', 'duration-250']" | ||
| :label="t('settings.controls-island.icon-size.title')" | ||
| :description="t('settings.controls-island.icon-size.description')" | ||
| :options="[ | ||
| { value: 'auto', label: t('settings.controls-island.icon-size.auto') }, | ||
| { value: 'large', label: t('settings.controls-island.icon-size.large') }, | ||
| { value: 'small', label: t('settings.controls-island.icon-size.small') }, | ||
| ]" | ||
| :duration="250 + (5 * 10)" | ||
| :delay="5 * 50" | ||
| label="Auto-hide controls island" | ||
| description="Hide controls island after mouse leaves, show after mouse enters" | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 这里的 References
|
||
| /> | ||
|
|
||
| <template v-if="showAutoHideControlsIsland && settingsControlsIsland.autoHideControlsIsland"> | ||
| <FieldRange | ||
| v-model.number="settingsControlsIsland.autoHideDelay" | ||
| v-motion | ||
| :initial="{ opacity: 0, y: 10 }" | ||
| :enter="{ opacity: 1, y: 0 }" | ||
| :duration="250 + (6 * 10)" | ||
| :delay="6 * 50" | ||
| :min="0" | ||
| :max="5" | ||
| :step="0.1" | ||
| :format-value="v => `${v}s`" | ||
| label="Hide delay" | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| /> | ||
|
|
||
| <FieldRange | ||
| v-model.number="settingsControlsIsland.autoShowDelay" | ||
| v-motion | ||
| :initial="{ opacity: 0, y: 10 }" | ||
| :enter="{ opacity: 1, y: 0 }" | ||
| :duration="250 + (7 * 10)" | ||
| :delay="7 * 50" | ||
| :min="0" | ||
| :max="5" | ||
| :step="0.1" | ||
| :format-value="v => `${v}s`" | ||
| label="Show delay" | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| /> | ||
|
|
||
| <FieldRange | ||
| v-model.number="settingsControlsIsland.autoHideOpacity" | ||
| v-motion | ||
| :initial="{ opacity: 0, y: 10 }" | ||
| :enter="{ opacity: 1, y: 0 }" | ||
| :duration="250 + (8 * 10)" | ||
| :delay="8 * 50" | ||
| :min="0" | ||
| :max="100" | ||
| :step="1" | ||
| :format-value="v => `${v}%`" | ||
| label="Hidden opacity" | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| /> | ||
| </template> | ||
|
|
||
| <FieldCheckbox | ||
| v-model="analyticsToggleValue" | ||
| v-motion | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { createTestingPinia } from '@pinia/testing' | ||
| import { setActivePinia } from 'pinia' | ||
| import { beforeEach, describe, expect, it, vi } from 'vitest' | ||
|
|
||
| import { useSettingsControlsIsland } from './controls-island' | ||
|
|
||
| describe('store settings-controls-island', () => { | ||
| beforeEach(() => { | ||
| const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false }) | ||
| setActivePinia(pinia) | ||
| }) | ||
|
|
||
| it('should have correct default values', () => { | ||
| const store = useSettingsControlsIsland() | ||
|
|
||
| expect(store.allowVisibleOnAllWorkspaces).toBe(true) | ||
| expect(store.alwaysOnTop).toBe(true) | ||
| expect(store.autoHideControlsIsland).toBe(false) | ||
| expect(store.autoHideDelay).toBe(0.5) | ||
| expect(store.autoShowDelay).toBe(0.5) | ||
| expect(store.autoHideOpacity).toBe(30) | ||
| }) | ||
|
|
||
| it('should allow updating values', () => { | ||
| const store = useSettingsControlsIsland() | ||
|
|
||
| store.allowVisibleOnAllWorkspaces = false | ||
| store.alwaysOnTop = false | ||
| store.autoHideControlsIsland = true | ||
| store.autoHideDelay = 2 | ||
| store.autoShowDelay = 1.5 | ||
| store.autoHideOpacity = 50 | ||
|
|
||
| expect(store.allowVisibleOnAllWorkspaces).toBe(false) | ||
| expect(store.alwaysOnTop).toBe(false) | ||
| expect(store.autoHideControlsIsland).toBe(true) | ||
| expect(store.autoHideDelay).toBe(2) | ||
| expect(store.autoShowDelay).toBe(1.5) | ||
| expect(store.autoHideOpacity).toBe(50) | ||
| }) | ||
|
|
||
| it('should reset to default values via resetState action', () => { | ||
| const store = useSettingsControlsIsland() | ||
|
|
||
| // Modify values | ||
| store.allowVisibleOnAllWorkspaces = false | ||
| store.alwaysOnTop = false | ||
| store.autoHideControlsIsland = true | ||
| store.autoHideDelay = 3 | ||
| store.autoShowDelay = 2 | ||
| store.autoHideOpacity = 80 | ||
|
|
||
| // Verify values were modified | ||
| expect(store.allowVisibleOnAllWorkspaces).toBe(false) | ||
|
|
||
| // Reset via action | ||
| store.resetState() | ||
|
|
||
| // Check defaults are restored | ||
| expect(store.allowVisibleOnAllWorkspaces).toBe(true) | ||
| expect(store.alwaysOnTop).toBe(true) | ||
| expect(store.autoHideControlsIsland).toBe(false) | ||
| expect(store.autoHideDelay).toBe(0.5) | ||
| expect(store.autoShowDelay).toBe(0.5) | ||
| expect(store.autoHideOpacity).toBe(30) | ||
| }) | ||
| }) |
| Original file line number | Diff line number | Diff line change | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -82,7 +82,6 @@ export const useSettings = defineStore('settings', () => { | |||||||||||||||||
| // UI settings | ||||||||||||||||||
| allowVisibleOnAllWorkspaces: controlsIslandRefs.allowVisibleOnAllWorkspaces, | ||||||||||||||||||
| alwaysOnTop: controlsIslandRefs.alwaysOnTop, | ||||||||||||||||||
|
Comment on lines
83
to
84
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 虽然
Suggested change
References
|
||||||||||||||||||
| controlsIslandIconSize: controlsIslandRefs.controlsIslandIconSize, | ||||||||||||||||||
|
|
||||||||||||||||||
| // Methods | ||||||||||||||||||
| setThemeColorsHue: theme.setThemeColorsHue, | ||||||||||||||||||
|
|
||||||||||||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
建议保留
refDebounced的导入。它在处理基于延迟的状态变化(如自动折叠菜单)时,比手动计时或轮询更简洁且精确。