From 02f1a8202d12ada3ff28e2c975405f86b0988c0f Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Fri, 24 Mar 2023 17:05:00 -0400 Subject: [PATCH 1/5] consistent spacing in pane-style forms --- resources/js/components/nav/ItemEditor.vue | 51 ++++++++++--------- resources/js/components/nav/TabEditor.vue | 34 +++++++------ .../js/components/structures/PageEditor.vue | 1 + 3 files changed, 48 insertions(+), 38 deletions(-) diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue index d5bf33c222d..83007ec5442 100644 --- a/resources/js/components/nav/ItemEditor.vue +++ b/resources/js/components/nav/ItemEditor.vue @@ -12,34 +12,39 @@ v-html="'×'" /> -
-
- -
-
- - -

{{ __('statamic::validation.required') }}

-
-
+
+
+
+ +
+
+ + +

{{ __('statamic::validation.required') }}

+
+
-
-
- -
-

+
+
+ +
+

+
+ +

{{ __('statamic::validation.required') }}

+
- -

{{ __('statamic::validation.required') }}

+
-
diff --git a/resources/js/components/nav/TabEditor.vue b/resources/js/components/nav/TabEditor.vue index 3e9b8dd4a62..acae70c414f 100644 --- a/resources/js/components/nav/TabEditor.vue +++ b/resources/js/components/nav/TabEditor.vue @@ -12,23 +12,27 @@ v-html="'×'" />
-
-
- -
-
- - -

{{ __('statamic::validation.required') }}

+
+
+
+ +
+
+ + +

{{ __('statamic::validation.required') }}

+
+
+
- -
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue index 3ac414c9d77..11ff1939afd 100644 --- a/resources/js/components/structures/PageEditor.vue +++ b/resources/js/components/structures/PageEditor.vue @@ -28,6 +28,7 @@ :meta="meta" :errors="errors" :localized-fields="localizedFields" + class="px-2" @updated="values = $event" >
From 0b84ef205c38ff9e1e8fccaab585d2ee1b52b209 Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Fri, 24 Mar 2023 17:14:42 -0400 Subject: [PATCH 2/5] undo section/tab find replace within nav components --- resources/js/components/nav/Branch.vue | 30 ++-- resources/js/components/nav/Builder.vue | 168 +++++++++--------- .../nav/{TabEditor.vue => SectionEditor.vue} | 12 +- 3 files changed, 105 insertions(+), 105 deletions(-) rename resources/js/components/nav/{TabEditor.vue => SectionEditor.vue} (86%) diff --git a/resources/js/components/nav/Branch.vue b/resources/js/components/nav/Branch.vue index b51a1dfddd1..53325f52bb6 100644 --- a/resources/js/components/nav/Branch.vue +++ b/resources/js/components/nav/Branch.vue @@ -3,19 +3,19 @@
-
- - +
@@ -64,12 +64,12 @@ />
-
+
  • @@ -183,18 +183,18 @@ @updated="itemUpdated" /> - - this.normalizeNavConfig(tab, false)) + .map(section => this.normalizeNavConfig(section, false)) .values() .value(); this.mainTreeData = _.chain(navConfig) - .mapObject(tab => this.normalizeNavConfig(tab)) + .mapObject(section => this.normalizeNavConfig(section)) .values() .value(); }, - setOriginalTabItems(nav) { - nav.forEach(tab => this.originalTabItems[tab.display_original] = tab.items_original || []); + setOriginalSectionItems(nav) { + nav.forEach(section => this.originalSectionItems[section.display_original] = section.items_original || []); }, discardChanges() { @@ -346,14 +346,14 @@ export default { this.changed = false; }, - normalizeNavConfig(config, isTabNode = true) { + normalizeNavConfig(config, isSectionNode = true) { let item = { text: config.display, config: config, original: config.original, - manipulations: isTabNode ? config : config.manipulations || {}, - isTab: isTabNode, - open: isTabNode, + manipulations: isSectionNode ? config : config.manipulations || {}, + isSection: isSectionNode, + open: isSectionNode, }; let children = config.items || config.children; @@ -367,7 +367,7 @@ export default { config: childItem, original: childItem.original, manipulations: childItem.manipulations || {}, - isTab: false, + isSection: false, }; }); } @@ -386,26 +386,26 @@ export default { }); // Ensure you can only drop nav item nodes into top level tree root - this.$set(this.$refs.topLevelTree.rootData, 'droppable', ! this.isTabNode(node)); + this.$set(this.$refs.topLevelTree.rootData, 'droppable', ! this.isSectionNode(node)); - // Ensure you can only drop tab nodes to main tree root - this.$set(this.$refs.mainTree.rootData, 'droppable', this.isTabNode(node)); + // Ensure you can only drop section nodes to main tree root + this.$set(this.$refs.mainTree.rootData, 'droppable', this.isSectionNode(node)); // Hardcode max depths const topLevelTreeMaxDepth = 2 - nodeDepth; // 2 for nav items, and one level of nav item children - const mainTreeMaxDepth = 3 - nodeDepth; // 3 for tabs, nav items, and one level of nav item children + const mainTreeMaxDepth = 3 - nodeDepth; // 3 for sections, nav items, and one level of nav item children // Ensure max depth for top level tree this.traverseTree(this.topLevelTreeData, (childNode, { depth }) => { if (childNode !== node) { - this.$set(childNode, 'droppable', depth <= topLevelTreeMaxDepth && ! this.isTabNode(node)); + this.$set(childNode, 'droppable', depth <= topLevelTreeMaxDepth && ! this.isSectionNode(node)); } }); // Ensure max depth for main tree this.traverseTree(this.mainTreeData, (childNode, { depth }) => { if (childNode !== node) { - this.$set(childNode, 'droppable', depth <= mainTreeMaxDepth && ! this.isTabNode(node)); + this.$set(childNode, 'droppable', depth <= mainTreeMaxDepth && ! this.isSectionNode(node)); } }); }, @@ -423,17 +423,17 @@ export default { }); }, - isTabNode(node) { - return data_get(node, 'isTab', false); + isSectionNode(node) { + return data_get(node, 'isSection', false); }, - isCustomTabNode(node) { - return this.isTabNode(node) && data_get(node, 'manipulations.action') === '@create'; + isCustomSectionNode(node) { + return this.isSectionNode(node) && data_get(node, 'manipulations.action') === '@create'; }, - getParentTabNode(node) { - if (! this.isTabNode(node) && node !== undefined) { - return this.getParentTabNode(node.parent); + getParentSectionNode(node) { + if (! this.isSectionNode(node) && node !== undefined) { + return this.getParentSectionNode(node.parent); } return node; @@ -444,7 +444,7 @@ export default { return false; } - return ! this.isTabNode(node.parent); + return ! this.isSectionNode(node.parent); }, traverseTree(nodes, callback, parentPath = []) { @@ -472,8 +472,8 @@ export default { this.creatingItem = true; }, - addTab() { - this.creatingTab = true; + addSection() { + this.creatingSection = true; }, itemAdded(createdConfig) { @@ -490,21 +490,21 @@ export default { this.changed = true; }, - tabAdded(tabDisplay) { + sectionAdded(sectionDisplay) { let item = this.normalizeNavConfig({ action: '@create', - display: tabDisplay, + display: sectionDisplay, display_original: false, }); this.mainTreeData.push(item); - this.resetTabEditor(); + this.resetSectionEditor(); this.changed = true; }, editItem(item, topLevel) { - if (this.isTabNode(item) && ! topLevel) { - this.editingTab = item; + if (this.isSectionNode(item) && ! topLevel) { + this.editingSection = item; } else { this.editingItem = item; } @@ -521,10 +521,10 @@ export default { this.changed = true; }, - tabUpdated(tabDisplay, tabItem) { - tabItem.text = tabDisplay; + sectionUpdated(sectionDisplay, sectionItem) { + sectionItem.text = sectionDisplay; - this.resetTabEditor(); + this.resetSectionEditor(); this.changed = true; }, @@ -539,7 +539,7 @@ export default { }, updateItemAction(item) { - if (this.isTabNode(item)) { + if (this.isSectionNode(item)) { return; } @@ -580,8 +580,8 @@ export default { return false; } - return this.itemHasMovedWithinTab(item) - || this.itemHasMovedToAnotherTab(item); + return this.itemHasMovedWithinSection(item) + || this.itemHasMovedToAnotherSection(item); }, itemIsWithinOriginalParentItem(item) { @@ -592,7 +592,7 @@ export default { return this.isChildItemNode(item) && parentsOriginalChildIds.includes(item.config.id); }, - itemHasMovedWithinTab(item) { + itemHasMovedWithinSection(item) { let parentsOriginalChildIds = data_get(item.parent, 'original', { children: [] }) .children .map(child => child.id); @@ -601,25 +601,25 @@ export default { return true; } - let currentTab = data_get(this.getParentTabNode(item), 'config.display_original', 'Top Level'); - let tabsOriginalIds = this.originalTabItems[currentTab]; + let currentSection = data_get(this.getParentSectionNode(item), 'config.display_original', 'Top Level'); + let sectionsOriginalIds = this.originalSectionItems[currentSection]; - if (tabsOriginalIds === undefined) { + if (sectionsOriginalIds === undefined) { return false; } - if (! this.isChildItemNode(item) && ! tabsOriginalIds.includes(item.config.id)) { + if (! this.isChildItemNode(item) && ! sectionsOriginalIds.includes(item.config.id)) { return true; } return false; }, - itemHasMovedToAnotherTab(item) { - let currentTab = data_get(this.getParentTabNode(item), 'config.display_original', 'Top Level'); - let originalTab = data_get(item.original, 'tab') || data_get(item.parent, 'original.tab'); + itemHasMovedToAnotherSection(item) { + let currentSection = data_get(this.getParentSectionNode(item), 'config.display_original', 'Top Level'); + let originalSection = data_get(item.original, 'section') || data_get(item.parent, 'original.section'); - return currentTab !== originalTab; + return currentSection !== originalSection; }, itemHasBeenModified(item) { @@ -639,13 +639,13 @@ export default { expandAll() { this.traverseTree(this.topLevelTreeData, (node) => { - if (! this.isTabNode(node)) { + if (! this.isSectionNode(node)) { this.$set(node, 'open', true); } }); this.traverseTree(this.mainTreeData, (node) => { - if (! this.isTabNode(node)) { + if (! this.isSectionNode(node)) { this.$set(node, 'open', true); } }); @@ -653,13 +653,13 @@ export default { collapseAll() { this.traverseTree(this.topLevelTreeData, (node) => { - if (! this.isTabNode(node)) { + if (! this.isSectionNode(node)) { this.$set(node, 'open', false); } }); this.traverseTree(this.mainTreeData, (node) => { - if (! this.isTabNode(node)) { + if (! this.isSectionNode(node)) { this.$set(node, 'open', false); } }); @@ -671,9 +671,9 @@ export default { this.targetDataArray = false; }, - resetTabEditor() { - this.editingTab = false; - this.creatingTab = false; + resetSectionEditor() { + this.editingSection = false; + this.creatingSection = false; }, pinItem(item) { @@ -710,7 +710,7 @@ export default { isHideable(item) { let action = data_get(item.manipulations, 'action'); - if (this.isTabNode(item) && action === '@create') { + if (this.isSectionNode(item) && action === '@create') { return false; } @@ -718,7 +718,7 @@ export default { }, removeItem(item, bypassConfirmation = false) { - if (this.isCustomTabNode(item) && item.children.length && ! bypassConfirmation) { + if (this.isCustomSectionNode(item) && item.children.length && ! bypassConfirmation) { return this.confirmingRemoval = item; } @@ -779,12 +779,12 @@ export default { 'items': this.prepareItemsForSubmission(this.topLevelTreeData), }); - this.mainTreeData.forEach(tab => { + this.mainTreeData.forEach(section => { tree.push({ - 'display': tab.text, - 'display_original': tab.config.display_original || tab.text, - 'action': tab.manipulations.action || false, - 'items': this.prepareItemsForSubmission(tab.children), + 'display': section.text, + 'display_original': section.config.display_original || section.text, + 'action': section.manipulations.action || false, + 'items': this.prepareItemsForSubmission(section.children), }); }); diff --git a/resources/js/components/nav/TabEditor.vue b/resources/js/components/nav/SectionEditor.vue similarity index 86% rename from resources/js/components/nav/TabEditor.vue rename to resources/js/components/nav/SectionEditor.vue index acae70c414f..f05e18818bd 100644 --- a/resources/js/components/nav/TabEditor.vue +++ b/resources/js/components/nav/SectionEditor.vue @@ -4,7 +4,7 @@
    - {{ creating ? __('Add Tab') : __('Edit Tab') }} + {{ creating ? __('Add Section') : __('Edit Section') }}
    @@ -48,12 +48,12 @@ export default { props: { creating: false, - tabItem: {}, + sectionItem: {}, }, data() { return { - tab: data_get(this.tabItem, 'text') || '', + section: data_get(this.sectionItem, 'text') || '', saveKeyBinding: null, validate: false, } @@ -75,12 +75,12 @@ export default { save() { this.validate = false; - if (! this.tab) { + if (! this.section) { this.validate = true; return; } - this.$emit('updated', this.tab, this.tabItem); + this.$emit('updated', this.section, this.sectionItem); }, }, From 161c7f19174c9e502c33abe232b894cf390baf07 Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Fri, 24 Mar 2023 18:01:12 -0400 Subject: [PATCH 3/5] popover provides an object containing itself, so children (in a portal) can reference it --- resources/js/components/Popover.vue | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue index f83e02faa49..de7cea3df36 100644 --- a/resources/js/components/Popover.vue +++ b/resources/js/components/Popover.vue @@ -9,6 +9,7 @@ :to="portalTargetName" :target-class="`popover-container ${targetClass || ''}`" > +
    @@ -16,6 +17,7 @@
    +
    @@ -24,11 +26,16 @@