feat(web-ui): Updated Add / Edit app form to use modals + new Delete App UI flow#5166
feat(web-ui): Updated Add / Edit app form to use modals + new Delete App UI flow#5166Noklef wants to merge 10 commits into
Add / Edit app form to use modals + new Delete App UI flow#5166Conversation
- 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; |
There was a problem hiding this comment.
I like the default border better.
| width: 15rem; | ||
| max-width: 100%; |
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?
There was a problem hiding this comment.
Originally it was just to shrink the app search bar, since I'm guessing that users won't be typing out entire game names as it filters as you type:
I might even bump it down to 14rem, that way it doesn't get pushed below the add new button at smaller breakpoints:
There was a problem hiding this comment.
Maybe combine the magnifying glass and x into one box on the right side? If the field is empty show the magnifying glass. If the field has contents, show the X?
There was a problem hiding this comment.
Makes sense, the magnifying glass isn't doing a lot of heavy lifting, I'll combine them
| <img | ||
| v-if="app['image-path']" | ||
| :src="'/api/covers/' + index" | ||
| :src="'/api/covers/' + index + '?v=' + encodeURIComponent(app['image-path'])" |
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
There was a problem hiding this comment.
Yeah, this was trying to do exactly that.
Went with this route because I'm not really a C++ dev (and didn't just wanna vibe code something up in the back-end to fix this).
I'll revert this and just keep the hard refresh on delete / edit.
| {{ $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" |
There was a problem hiding this comment.
I believe this modal should be full size.
There was a problem hiding this comment.
Currently it's just following the bootstrap defaults for the modal (largest modal size on bootstrap rn).
By full size, do you mean the width of the app cover container? or the full-window overlay for it.
This is how it currently looks in a maximized window:
There was a problem hiding this comment.
I think you can use the modal-fullscreen class.
There was a problem hiding this comment.
I originally had a look at doing that, but it looks a bit goofy if it takes up the entire screen when you open the modal:
I personally can't really justify it being full width, since none of the forum fields warrant it IMO.
Realistically, it does already have a modal-fullscreen-md-down class on it (so it will fullscreen when below 768px), although i can bump it up to lg so it'll be in fullscreen at 992px instead. For example:
(Also looks like the navbar needs fixing on thinner windows 😅 )
There was a problem hiding this comment.
That's fine. Let's at least ensure clicking outside the modal doesn't close it, as that would be annoying for users who accidentally click off the modal.
- Removed modal header border - Bumped down the toolbar group to 14rem - Removed cache busting in favor of hard refresh - Merged magnifying glass / clear text `X` icon for search on the right side
2 participants
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