diff --git a/src/assets/interface-icons/section-expand-collapse.svg b/src/assets/interface-icons/section-expand-collapse.svg new file mode 100644 index 00000000..c9cf291e --- /dev/null +++ b/src/assets/interface-icons/section-expand-collapse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 9c38e9ab..a064eb67 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -195,6 +195,7 @@ "section": { "open-section": "Open Section", "edit-section": "Edit", + "expand-collapse": "Expand / Collapse", "move-section": "Move To", "remove-section": "Remove" } diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue index db649eba..1d34a5b6 100644 --- a/src/components/LinkItems/Section.vue +++ b/src/components/LinkItems/Section.vue @@ -94,6 +94,7 @@ v-click-outside="closeContextMenu" @openEditSection="openEditSection" @navigateToSection="navigateToSection" + @expandCollapseSection="expandCollapseSection" @removeSection="removeSection" /> @@ -250,6 +251,12 @@ export default { router.push({ path: `/home/${sectionIdentifier}` }); this.closeContextMenu(); }, + /* Toggle sections collapse state */ + expandCollapseSection() { + const secElem = this.$refs[this.sectionRef]; + if (secElem) secElem.toggle(); + this.closeContextMenu(); + }, /* Open the Section Edit Menu */ openEditSection() { this.editMenuOpen = true; diff --git a/src/components/LinkItems/SectionContextMenu.vue b/src/components/LinkItems/SectionContextMenu.vue index 7f7d16e7..c6bcbcf5 100644 --- a/src/components/LinkItems/SectionContextMenu.vue +++ b/src/components/LinkItems/SectionContextMenu.vue @@ -12,6 +12,10 @@ {{ $t('context-menus.section.edit-section') }} +
  • + + {{ $t('context-menus.section.expand-collapse') }} +
  • {{ $t('context-menus.section.remove-section') }} @@ -26,6 +30,7 @@ import EditIcon from '@/assets/interface-icons/config-edit-json.svg'; import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg'; import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg'; +import ExpandCollapseIcon from '@/assets/interface-icons/section-expand-collapse.svg'; export default { name: 'ContextMenu', @@ -33,6 +38,7 @@ export default { EditIcon, BinIcon, SameTabOpenIcon, + ExpandCollapseIcon, }, props: { posX: Number, // The X coordinate for positioning @@ -56,6 +62,9 @@ export default { openEditSectionMenu() { this.$emit('openEditSection'); }, + expandCollapseSection() { + this.$emit('expandCollapseSection'); + }, removeSection() { this.$emit('removeSection'); },