-
-
Notifications
You must be signed in to change notification settings - Fork 213
feat(app): customize layout modal, iOS-style topbar, per-story storyOptions (closes #620, #558) #833
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
Open
50rayn
wants to merge
10
commits into
histoire-dev:main
Choose a base branch
from
50rayn:feat/layout-customization
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
feat(app): customize layout modal, iOS-style topbar, per-story storyOptions (closes #620, #558) #833
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
3de58d9
feat(app): add layout customization modal (#620)
50rayn d108393
feat(app): promote AppHeader above split pane
50rayn c678bc7
fix(app): histoire-base-list-ite typo
50rayn 644a891
feat(app): toggle pane visibility and placement
50rayn 7397c7d
feat(shared): per-story storyOptions override (fix #558)
50rayn d82f378
feat(app): keyboard shortcut for layout modal
50rayn 0e80567
feat(app): introduce iOS-style glossy top bar
50rayn a4b762f
refactor(app): simplify topbar and layout store
50rayn 0c67612
test(app): update existing specs for new toolbar title location
50rayn 5094084
fix(app): address PR feedback
50rayn File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /// <reference types="cypress" /> | ||
|
|
||
| describe('Layout customization', () => { | ||
| beforeEach(() => { | ||
| cy.clearLocalStorage() | ||
| cy.visit('/') | ||
| }) | ||
|
|
||
| it('opens the modal via the header button', () => { | ||
| cy.get('[data-test-id="layout-btn"]').click() | ||
| cy.get('[data-test-id="layout-modal"]').should('be.visible') | ||
| cy.contains('[data-test-id="layout-modal"]', 'Customize Layout') | ||
| }) | ||
|
|
||
| it('toggles Story List visibility', () => { | ||
| cy.get('.histoire-base-split-pane').should('exist') | ||
| cy.get('[data-test-id="layout-btn"]').click() | ||
| cy.get('[data-test-id="layout-toggle-story-list"]').click() | ||
| cy.get('[data-test-id="layout-modal-close"]').click() | ||
| cy.get('.histoire-base-split-pane').should('not.exist') | ||
| }) | ||
|
|
||
| it('toggles Story Options visibility on a story', () => { | ||
| cy.get('[data-test-id="story-list-item"]').contains('Controls').click() | ||
| cy.get('[data-test-id="story-side-panel"]').should('exist') | ||
| cy.get('[data-test-id="layout-btn"]').click() | ||
| cy.get('[data-test-id="layout-toggle-story-options"]').click() | ||
| cy.get('[data-test-id="layout-modal-close"]').click() | ||
| cy.get('[data-test-id="story-side-panel"]').should('not.exist') | ||
| }) | ||
|
|
||
| it('switches Story Options placement to Bottom', () => { | ||
| cy.get('[data-test-id="story-list-item"]').contains('Controls').click() | ||
| cy.get('[data-test-id="story-side-panel"]').should('exist') | ||
| cy.get('[data-test-id="layout-btn"]').click() | ||
| cy.get('[data-test-id="layout-placement-bottom"]').click() | ||
| cy.get('[data-test-id="layout-modal-close"]').click() | ||
| cy.get('.histoire-base-split-pane.portrait').should('exist') | ||
| }) | ||
|
|
||
| it('persists settings across reload', () => { | ||
| cy.get('[data-test-id="layout-btn"]').click() | ||
| cy.get('[data-test-id="layout-toggle-story-list"]').click() | ||
| cy.get('[data-test-id="layout-modal-close"]').click() | ||
| cy.reload() | ||
| cy.get('.histoire-base-split-pane').should('not.exist') | ||
| }) | ||
|
|
||
| it('hides the Layout button on mobile', () => { | ||
| cy.viewport(375, 667) | ||
| cy.get('[data-test-id="layout-btn"]').should('not.exist') | ||
| }) | ||
|
|
||
| it('opens and toggles via keyboard shortcut', () => { | ||
| cy.get('body').type('{meta}{shift}l') | ||
| cy.get('[data-test-id="layout-modal"]').should('be.visible') | ||
| cy.get('body').type('{meta}{shift}l') | ||
| cy.get('[data-test-id="layout-modal"]').should('not.be.visible') | ||
| }) | ||
|
|
||
| it('respects per-story meta.storyOptions override', () => { | ||
| cy.get('[data-test-id="story-list-item"]').contains('StoryOptions Override').click() | ||
| cy.get('[data-test-id="story-side-panel"]').should('not.exist') | ||
| cy.get('[data-test-id="story-list-item"]').contains('Controls').click() | ||
| cy.get('[data-test-id="story-side-panel"]').should('exist') | ||
| }) | ||
|
|
||
| it('closes the modal via backdrop and Esc', () => { | ||
| cy.get('[data-test-id="layout-btn"]').click() | ||
| cy.get('[data-test-id="layout-modal"]').should('be.visible') | ||
| cy.get('body').click(10, 10) | ||
| cy.get('[data-test-id="layout-modal"]').should('not.be.visible') | ||
| cy.get('[data-test-id="layout-btn"]').click() | ||
| cy.get('body').type('{esc}') | ||
| cy.get('[data-test-id="layout-modal"]').should('not.be.visible') | ||
| }) | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
examples/vue3/src/components/StoryOptionsOverride.story.vue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <script lang="ts" setup> | ||
| const meta = { storyOptions: false } | ||
| </script> | ||
|
|
||
| <template> | ||
| <Story | ||
| title="StoryOptions Override" | ||
| icon="carbon:no-image" | ||
| :meta="meta" | ||
| > | ||
| <Variant> | ||
| <p>This story sets <code>meta.storyOptions: false</code>, which forces the right pane hidden regardless of the global Layout setting.</p> | ||
| </Variant> | ||
| </Story> | ||
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
packages/histoire-app/src/app/components/app/AppActions.vue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <script setup lang="ts"> | ||
| import { Icon } from '@iconify/vue' | ||
| import { computed } from 'vue' | ||
| import { histoireConfig } from '../../util/config' | ||
| import { isDark, toggleDark } from '../../util/dark' | ||
| import { isMobile } from '../../util/responsive' | ||
| import { makeTooltip } from '../../util/tooltip' | ||
| import TopBarChip from './TopBarChip.vue' | ||
| import TopBarChipItem from './TopBarChipItem.vue' | ||
|
|
||
| defineEmits({ | ||
| search: () => true, | ||
| layout: () => true, | ||
| }) | ||
|
|
||
| const themeIcon = computed(() => { | ||
| return isDark.value ? 'carbon:moon' : 'carbon:sun' | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <TopBarChip> | ||
| <TopBarChipItem | ||
| v-if="!isMobile" | ||
| v-tooltip="makeTooltip('Layout', ({ isMac }) => isMac ? 'meta+shift+l' : 'ctrl+shift+l')" | ||
| aria-label="Open layout customization" | ||
| data-test-id="layout-btn" | ||
| @click="$emit('layout')" | ||
| > | ||
| <Icon | ||
| icon="carbon:panel-expansion" | ||
| class="htw-w-4 htw-h-4" | ||
| /> | ||
| </TopBarChipItem> | ||
|
|
||
| <TopBarChipItem | ||
| v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')" | ||
| data-test-id="search-btn" | ||
| @click="$emit('search')" | ||
| > | ||
| <Icon | ||
| icon="carbon:search" | ||
| class="htw-w-4 htw-h-4" | ||
| /> | ||
| </TopBarChipItem> | ||
|
|
||
| <TopBarChipItem | ||
| v-if="!histoireConfig.theme.hideColorSchemeSwitch" | ||
| v-tooltip="makeTooltip('Toggle dark mode', ({ isMac }) => isMac ? 'meta+shift+d' : 'ctrl+shift+d')" | ||
| @click="toggleDark()" | ||
| > | ||
| <Icon | ||
| :icon="themeIcon" | ||
| class="htw-w-4 htw-h-4" | ||
| /> | ||
| </TopBarChipItem> | ||
| </TopBarChip> | ||
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
The dark mode keyboard shortcut (
ctrl+shift+d/meta+shift+d) is currently registered inAppHeader.vue. However, with the new layout customization,AppHeaderis not rendered when the story list is hidden on desktop (see thev-elseblock at line 172). This causes the shortcut to stop working when the story list is toggled off.Please move the dark mode shortcut registration to
App.vuealongside the search and layout shortcuts to ensure it remains active globally. You will also need to importtoggleDarkfrom./util/dark.