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.

Sign up for GitHub

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

Jump to bottom

Add some UI customization #2

Merged
merged 24 commits into from
Feb 8, 2024
Merged

Add some UI customization #2

merged 24 commits into from
Feb 8, 2024

Conversation

DominicWindisch
Copy link
Contributor

@DominicWindisch DominicWindisch commented Jan 30, 2024 •
edited

I've added some basic options to change primary/secondary color and the button labels (at least the ones exposed to non-admins).

I guess the UI-Settings should be refactored at one point (UI vs Theme?) but I didn't want to overhaul too much at once.. 😬

Related to photobooth-app/photobooth-app#165.

@DominicWindisch DominicWindisch mentioned this pull request Jan 30, 2024
Closed
@mgineer85
Copy link
Collaborator

Hi, thx for the pull request :)

I will check it later.

The UI is just grown and has no architecture behind it yet 😔 So there is room for improvement for sure.
I thought to add language translation at one point - that would be a way to customize texts also. But I am not yet there.
For now this solution seems convenient.

Which linter/formatter do you use? It seems its reformatted and I do not have a good one yet configured in the frontend.

@DominicWindisch
Copy link
Contributor Author

Hi,

yeah I've seen the translation issue - a bit too late though 😅 Certainly the way to move forward.

I've just setup everything from scratch on a windows machine (python, npm, vs code, quasar, ...). I've got quite some experience in a (conceptually similar) vanilla js/html/css/PHP project but I haven't done anything yet using vue. So I just ran with the defaults as it's described in the readme (yarn lint, yarn format). For some reason, config page was reformatted quite a bit already in vs code 🙈

@DominicWindisch
Copy link
Contributor Author

DominicWindisch commented Feb 3, 2024 •
edited

Hello again ✌️

I've added translations to the Frontend using i18n (as suggested in photobooth-app/photobooth-app#86).

Two issues remain as of now:

  • The selected language is not persistent, i.e. it defaults back to English when reloading the page. Is there some kind of persistent storage allready in place for the frontend? Else I'd likely just store it using something along the lines of localStorage.setItem('locale'). Edit: Using vanilla web storage for now since we're storing a string anyways, so the quasar wrapper wont provide any advantage from my point of view.
  • I was not yet able to translate the messages in some of the notifactions (e.g. here). Likely something obvious for someone more experieneced in Vue.

@DominicWindisch
save locale in localStorage
13b7ae3 
could also use quasar web storage wrapper, but it won't make a difference for strings anyways but we'd need to include LocalStorage plugin from quasar.
@DominicWindisch
add ui component ColorPicker
208dad9
@DominicWindisch
fix ColorPicker UI
a0f14da
@DominicWindisch
CountdownTimer UI tuning
1e7a0d5 
- countdown with zero decimal places
- larger countdown

also: some css changes to my liking
@DominicWindisch
add option to style gallery button, show processing indicator during …
5fb3956 
…capture
@DominicWindisch
always allow user to delete own captured image
14e4313
@DominicWindisch
Copy link
Contributor Author

I'm "done" with the UI adaptations for now (meaning my wife is happy with the result). Let me just quickly summarize them so you can at least try to make sense of this PR (files not mentioned here are just reformated for some reason):

  • README.md: Just documented my struggles with getting the local server to run on Windows.
  • package.json: Added vue-i18n for translations.
  • quasar.config.js: Added vue-i18n for translations.
  • src/boot/blitzar.js: Add "ColorPicker" component for theming.
  • src/boot/i18n.js: Initializes translations from browser storage.
  • src/components/ColorPicker: ColorPicker component with input validation on color strings and a popup, well, color picker.
  • src/components/ConnectionOverlay: add translations
  • src/components/CountdownTimer:
    • made larger,
    • countdown shows only integer value (the decimal place was cutoff and it jumped between, e.g. "2.1", "2", "1.9", etc).
    • Uses primary/secondary color now.
    • Icon before capture was replaced by a div (so one can use "Smile!" for example)
  • src/components/GalleryImageDetail
    • users are now always allowed to delete in singleItemView mode (i.e. to delete their own captured image)
    • before deleting, a confirmation popup is displayed
    • added translations
  • src/components/LanguageSwitcher: drop down menu to select locale (somewhat oddly placed for mobile UI, couldn't think of a better place, tho)
  • src/i18n/de-DE/index.js: German translation of app strings
  • src/i18n/en-US/index.js: English (default) translation of app strings
  • src/i18n/index.js: list of translated languages
  • src/layouts/AdminLayout: added translations and language switcher
  • src/layouts/GalleryLayout: added translations
  • src/pages/AdminFilesPage: added translations
  • src/pages/AdminPage: added translations
  • src/pages/ConfigPage: added translations
  • src/pages/ErrorNotFound: added translations
  • src/pages/IndexPage:
    • added translations
    • add specific gallery buttons styling (so I can move it around more fittingly to my overlay image on the frontpage)
    • display "processing" animation also in "capture" state instead of a blank page while the camera does its thing
  • src/pages/ItemApprovalPage: added translations
  • src/stores/ui-settings-store: apply theme colors on initStore

@DominicWindisch DominicWindisch mentioned this pull request Feb 7, 2024
Closed
@DominicWindisch
Copy link
Contributor Author

Nitpicker here: the galleryimagedetail component is not used (although included) in itemapprovalpage - so there's no way to delete mid-process. :)

@mgineer85
Revert "revert show delete button in singleItemView mode because this…
cb65ddc 
… mode is also used during job processing. it would mess with the job if singe images are deleted during the job."

This reverts commit 2cbe7f5.
@mgineer85
Copy link
Collaborator

Nitpicker here: the galleryimagedetail component is not used (although included) in itemapprovalpage - so there's no way to delete mid-process. :)

holy, you're right. reverted my commit :)

@mgineer85 mgineer85 merged commit baefe91 into photobooth-app:main Feb 8, 2024
@mgineer85
Copy link
Collaborator

merged! thank you very much for all these additions :)

@mgineer85
Copy link
Collaborator

Released a new v2 alpha2 with all latest improvements: https://github.com/photobooth-app/photobooth-app/releases/tag/v2.0a2

Thx! 🎉

@DominicWindisch DominicWindisch deleted the add-ui-customization branch February 12, 2024 14:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@DominicWindisch @mgineer85 @risa-docs