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

17152 Menu UI improvements #635

Merged

Conversation

severinbeauvais
Copy link
Collaborator

@severinbeauvais severinbeauvais commented Jul 28, 2023

Issue #: /bcgov/entity#17152

Description of changes:
- app version = 5.0.12
- now return item object so we don't have to find it
- added class to disabled items
- now include but disable items not in active group
- hide disabled list items via CSS

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the namerequest license (Apache 2.0).

@severinbeauvais severinbeauvais changed the title - app version = 5.0.12 17152 Menu UI improvements Jul 28, 2023
@severinbeauvais severinbeauvais self-assigned this Jul 28, 2023
@severinbeauvais severinbeauvais marked this pull request as draft July 28, 2023 23:25
- now return item object so we don't have to find it
- added class to disabled items
- now include but disable items not in active group
- hide disabled list items via CSS
@@ -17,8 +17,15 @@
item-value="[group,value]"
:menu-props="{ bottom: true, offsetY: true, maxHeight: 423 }"
@change="setClearErrors(null); onRequestActionChange($event)"
return-object
Copy link
Collaborator Author

@severinbeauvais severinbeauvais Aug 2, 2023

Choose a reason for hiding this comment

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

This returns the entire item object (in $event) instead of just its value.

<!-- <template #selection="{ item }">
<div class="font-weight-bold text-truncate">{{ item.text }}</div>
<div class="text-subtitle-1">{{ item.subtext }}</div>
</template> -->
Copy link
Collaborator Author

@severinbeauvais severinbeauvais Aug 2, 2023

Choose a reason for hiding this comment

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

I played with this a little on Janis' and Ethan's request, and we decided to not pursue this yet, but I left the code here for the next dev.

Sample:
Clipboard - August 1, 2023 3_08 PM

^^ plus some CSS to tighten up line heights/margins

@JazzarKarim
Copy link
Collaborator

/gcbrun

@@ -32,9 +39,12 @@
</div>
</v-list-item-content>

<!-- render but conditionally hide disabled list items, so that the v-select
continues to display the current selection even when a different group is active -->
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

If the item is not in the list then the v-select sometimes shows a blank selection (ticket 17044).

<v-list-item-content
v-else
class="group-item pl-8 pr-4 py-4"
:class="{ 'hide-me': item.disabled }"
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Can't just use d-none because it's actually the parent element I need to hide.

@pwei1018
Copy link
Collaborator

pwei1018 commented Aug 2, 2023

Temporary Url for review: https://namerequest-dev--pr-635-hnknd6zs.web.app

Copy link
Collaborator

@JazzarKarim JazzarKarim left a comment

Choose a reason for hiding this comment

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

Looks great Sev! 👍

Copy link
Collaborator

@leodube-aot leodube-aot left a comment

Choose a reason for hiding this comment

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

LGTM

@severinbeauvais severinbeauvais merged commit ef3d33c into bcgov:feature-way-of-navigating Aug 2, 2023
5 checks passed
JazzarKarim pushed a commit to JazzarKarim/namerequest that referenced this pull request Aug 24, 2023
- now return item object so we don't have to find it
- added class to disabled items
- now include but disable items not in active group
- hide disabled list items via CSS
JazzarKarim pushed a commit to JazzarKarim/namerequest that referenced this pull request Aug 24, 2023
- now return item object so we don't have to find it
- added class to disabled items
- now include but disable items not in active group
- hide disabled list items via CSS
JazzarKarim pushed a commit to JazzarKarim/namerequest that referenced this pull request Sep 8, 2023
- now return item object so we don't have to find it
- added class to disabled items
- now include but disable items not in active group
- hide disabled list items via CSS
JazzarKarim pushed a commit that referenced this pull request Sep 11, 2023
- now return item object so we don't have to find it
- added class to disabled items
- now include but disable items not in active group
- hide disabled list items via CSS
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.

4 participants