Skip to content

Commit

Permalink
fix(menubar): add separator between radio groups
Browse files Browse the repository at this point in the history
- Separates different parts visually
- Required for a11y to group radio button in the menu

Signed-off-by: Grigorii K. Shartsev <[email protected]>
  • Loading branch information
ShGKme committed Jan 31, 2024
1 parent c891538 commit 9be897e
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 10 deletions.
20 changes: 12 additions & 8 deletions src/components/Menu/ActionList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,19 +35,22 @@
<template #icon>
<component :is="icon" :key="iconKey" />
</template>
<NcActionButton v-for="child in children"
:key="`child-${child.key}`"
:active="currentChild?.key === child.key"
is-item
:action-entry="child"
v-on="$listeners"
@trigged="onTrigger" />
<template v-for="child in children">
<NcActionSeparator v-if="child.isSeparator" :key="`child-${child.key}`" />
<NcActionButton v-else
:key="`child-${child.key}`"
:active="currentChild?.key === child.key"
is-item
:action-entry="child"
v-on="$listeners"
@trigged="onTrigger" />
</template>
<slot v-bind="{ visible }" name="lastAction" />
</NcActions>
</template>
<script>
import { NcActions } from '@nextcloud/vue'
import { NcActions, NcActionSeparator } from '@nextcloud/vue'
import { BaseActionEntry } from './BaseActionEntry.js'
import NcActionButton from './NcActionButton.vue'
import { getIsActive } from './utils.js'
Expand All @@ -60,6 +63,7 @@ export default {
components: {
NcActions,
NcActionButton,
NcActionSeparator,
},
extends: BaseActionEntry,
mixins: [useStore, useOutlineStateMixin, useMenuIDMixin],
Expand Down
12 changes: 10 additions & 2 deletions src/components/Menu/MenuBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
-
- @author Vinicius Reis <[email protected]>
- @author Julius Härtl <[email protected]>
- @author Grigorii K. Shartsev <[email protected]>
-
- @license AGPL-3.0-or-later
-
Expand Down Expand Up @@ -161,12 +162,19 @@ export default {
return list
},
hiddenEntries() {
const entries = this.entries.filter(({ priority }) => {
const remainingEntries = this.entries.filter(({ priority }) => {
// reverse logic from visibleEntries
return priority !== undefined && priority > this.iconsLimit
}).reduce((acc, entry) => {
})
const entries = remainingEntries.reduce((acc, entry, index) => {
// If entry has children, merge them into list. Otherwise keep entry itself.
const children = entry.children ?? [entry]
// If this block has menu entries, it should be separated for better visibility and a11y (menu item radio grouping)
if (children.length > 1) {
const separatorBefore = acc.length ? [{ key: `separator-before-${entry.id}`, isSeparator: true }] : []
const separatorAfter = index !== remainingEntries.length - 1 ? [{ key: `separator-after-${entry.id}`, isSeparator: true }] : []
return [...acc, ...separatorBefore, ...children, ...separatorAfter]
}
return [...acc, ...children]
}, [])
Expand Down
8 changes: 8 additions & 0 deletions src/components/Menu/entries.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* @copyright Copyright (c) 2019 Julius Härtl <[email protected]>
*
* @author Julius Härtl <[email protected]>
* @author Grigorii K. Shartsev <[email protected]>
*
* @license GNU AGPL version 3 or any later version
*
Expand Down Expand Up @@ -194,6 +195,13 @@ export default [
return command.toggleHeading({ level: 6 })
},
},
{
key: 'headings-separator',
isSeparator: true,
visible: ({ $outlineState }) => {
return $outlineState.enable
},
},
{
key: 'outline',
icon: FormatListBulleted,
Expand Down

0 comments on commit 9be897e

Please sign in to comment.