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 12 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
| 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.
- 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
|
# Conflicts: # src_assets/common/assets/web/apps.html
|
| </div> | ||
| <div class="form-text"><a | ||
| :href="`${documentationBaseUrl}/md_docs_2app__examples.html`" | ||
| href="https://docs.lizardbyte.dev/projects/sunshine/latest/md_docs_2app__examples.html" |
There was a problem hiding this comment.
This seems to be conflicted. Can you fix conflicts and rebase?
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