feat(web-ui): Updated Add / Edit app form to use modals + new Delete App UI flow#5166
Open
Noklef wants to merge 9 commits into
Open
feat(web-ui): Updated Add / Edit app form to use modals + new Delete App UI flow#5166Noklef wants to merge 9 commits into
Add / Edit app form to use modals + new Delete App UI flow#5166Noklef wants to merge 9 commits into
Conversation
- Wrapped new app button to stick to the left side of the toolbar
…omodate for shrinking window
- Moved the `Add New` button to the top action bar now (doesn't make sense to keep it at the bottom - Moved the `Cover Finder Modal` from being nested in the edit form - Added `OpenEditModal`, `CloseEditModal` functions to control opening / closing of the modal - Created `ShowStacked()` to allow for modals to be stacked on one-another - Currently, only 1 modal will be stacked max, so it's safe to just keep it as a single stack - Moved some of the modals around so they're not nested within one another and can be created indipendently
- Remove duplicate set of index to `-1` - Fixed key in for loop not just being the literal string 'i' - Fixed indenting on the modal
…ser `confirm()` dialogue - Created Delete confirmation modal - Renamed `showDeleteForm` to `showDeleteModal`
- Implemented `loadApps()` to wrap the api calling the load apps endpoint - Use this endpoint when editing / addding / deleting an app (instead of hard refresh) - Added `encodeURIComponent(app['image-path'])"` onto the end of the covers API fetch to invalidate the cache (and fix a bug with covers sticking around...)
…n name that's being entered - Cretaed `editModalTitle` function to track the typing of `editForm`'s name property - Removed trailing spaces as well
…leted application's name - Switched the translation delete message to the `Component` version, so we can style the `name` - Added a bottom border to the header, and the background colour
|
| } | ||
|
|
||
| .modal-header { | ||
| border-bottom: 2px solid var(--color-primary) !important; |
Member
There was a problem hiding this comment.
I like the default border better.
Comment on lines
+1721
to
+1722
| width: 15rem; | ||
| max-width: 100%; |
Member
There was a problem hiding this comment.
I think this is an unrelated change, which is fine, but can you show a screenshot of how it changes?
| <img | ||
| v-if="app['image-path']" | ||
| :src="'/api/covers/' + index" | ||
| :src="'/api/covers/' + index + '?v=' + encodeURIComponent(app['image-path'])" |
Member
There was a problem hiding this comment.
if this is trying to cache bust, it won't do that 100% because you can reuse the same path even if the image changes
| {{ $t('apps.cmd_desc') }}<br> | ||
| <b>{{ $t('_common.note') }}</b> {{ $t('apps.cmd_note') }} | ||
| <!-- Edit / Add Application modal --> | ||
| <div class="modal fade" ref="editModal" tabindex="-1" aria-labelledby="appEditModalLabel" |
Member
There was a problem hiding this comment.
I believe this modal should be full size.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Add Newapps button to the new apps toolbar (left side of the screen)Add/Editapps form from the bottom of the screen to a new full-screen modalAdd/EditmodalDelete appmodal now instead of browser confirm popupdelete_titleanddelete_confirmto theen.jsontranslation fileAdd/Edit/DeleteUI flows to not hard force refresh (now just re-populates via calling theappsendpoint)Screenshots
Issues Fixed or Closed
Roadmap Issues
Type of Change
Checklist
AI Usage