Skip to content
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

Add improvement to tabbed page block configuration #1416

Merged
merged 1 commit into from
Oct 24, 2023

Conversation

kelanik8
Copy link
Contributor

The following changes are implemented

TODO: Summary

Changes in the user interface:

TODO: Add screenshots, recordings or remove this section

Checklist when submitting a final (!draft) PR

  • Commits are tidied up, squashed if needed and follow guidelines in CONTRIBUTING.md
  • Code builds
  • All existing tests pass
  • All new critical code is covered by tests
  • PR is linked to the relevant issue(s)
  • Rebased with the target branch

@kelanik8 kelanik8 requested a review from Fajfa August 31, 2023 23:28
@kelanik8 kelanik8 self-assigned this Aug 31, 2023
@kelanik8 kelanik8 linked an issue Aug 31, 2023 that may be closed by this pull request
@@ -152,6 +152,7 @@
:bounding-rect="boundingRect"
editable
class="p-2"
@edit-tab-item-block="(index) => editBlock(index)"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@edit-block="editBlock"

@@ -146,3 +192,14 @@ export default {
},
}
</script>

<style scoped>
.tab-menu-item-tool {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try to use only bootstrap except for text color when pills and active

/>
</b-button>

<b-button
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use input confirm like toolbox does

<b-button
:variant="block.options.style.appearance === 'pills' ? 'secondary' : 'primary'"
size="sm"
@click="onTabMenuEditItemClick(tab)"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we call This editTabbedBlock?


<c-input-confirm
class="ml-1"
@confirmed="onTabMenuDeleteItemClick(index)"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar for this, deleteTab

<b-button
size="sm"
variant="outline-light"
class="edit-block-btn"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to keep it simple, you can do text-primary border-0 edit-block-btn
And just overwrite the color in the custom class

.tabs-base-block-container .nav-pills {
  &.active .edit-block-btn {
    color: $white !important;
  }
}

@katrinDY
Copy link
Contributor

katrinDY commented Oct 6, 2023

  • after clicking on the edit button for a RL, the triangle icon signaling that a change was made isn't shown but the unsaved changes message is triggered if I try to leave the page without saving my changes
    3
  • after clicking on the delete button for a RL, the triangle icon signaling isn't shown annd if I try to leave the page, the unsaved changes message isnot triggered
    4

const { blockID } = this.blocks[blockIndex]

if (!blockID) return

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why you have to loop through them, you have the index and the tabIndex, so that's all you need to splice it

>
<div
v-if="unsavedBlocks.has(tab.block.blockID !== '0' ? tab.block.blockID : tab.block.meta.tempID)"
:title="$t('tooltip.unsavedChanges')"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Translation is missing here

@@ -653,6 +656,20 @@ export default {

this.blocks.splice(this.editor.index, 1, block)
this.unsavedBlocks.add(fetchID(block))

// Add the block that is a parent block is a tab to unsaved blocks registry0
this.blocks.forEach((block) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You dont need to do this, you can just add the parent block when you delete a tab.

@kelanik8 kelanik8 changed the base branch from 2023.3.x to 2023.9.x October 19, 2023 10:30
@kelanik8 kelanik8 force-pushed the 2023.3.x-feature-improve-tab-pg-configuration branch from 572af9c to 1e232a6 Compare October 19, 2023 10:32
@katrinDY
Copy link
Contributor

Issue:

  • when viewing a page in the pubic view or clicking on edit btn next to RL title in tabs pb
Screenshot 2023-10-20 at 17 26 46

@kelanik8 kelanik8 force-pushed the 2023.3.x-feature-improve-tab-pg-configuration branch from 11cb415 to 31bc22d Compare October 24, 2023 12:22
@kelanik8 kelanik8 merged commit 31bc22d into 2023.9.x Oct 24, 2023
1 check passed
@kelanik8 kelanik8 deleted the 2023.3.x-feature-improve-tab-pg-configuration branch October 24, 2023 12:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve tabbed page block configuration access
3 participants