search

onOffice-Web-Org / oo-wp-plugin

onOffice for WP-Websites
https://wp-plugin.onoffice.com
GNU General Public License v3.0
9 stars 9 forks source link

Floating Save Button #635

Closed fredericalpers closed 6 months ago

fredericalpers commented 11 months ago

Current state

The button for saving in the backend of the plugin is always at the end of the page, both in the settings and in the lists, etc.

For each time you want to save your changes, you have to scroll to the end of the page again, which is extremely annoying in terms of usability for us but also and more importantly for our customers. From time to time, you forget to save, which means that the changes are lost.

Desired state

As a first countermeasure, we want to implement a floating save button. The save button should remain at the edge of the screen (right) in the field of vision. See screenshot below. If no changes have been made the button should be disabled.

Floating save button

dai-eastgate commented 10 months ago

@fredericalpers I found the solution and needed 3 days to implement and test. Note: Is this "save changes" button only be fixed on the desktop screen or also on mobile devices?

fredericalpers commented 10 months ago

@dai-eastgate please only implement it for desktop for now, thank you :)

dai-eastgate commented 10 months ago

@dai-eastgate please only implement it for desktop for now, thank you :)

I got it. Thanks!

dai-eastgate commented 10 months ago

@fredericalpers

  1. "add new, edit, and delete" actions of "input form" types: -text -date -select -multi-select -from-to, -checkbox -radio button

  2. "add, edit, and delete" language for "custom label", and "default value" in the input text.

  3. Drop and drag fields

  4. "Test key" button in Setting reCAPTCHA

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/106214469/c4dbfe62-6491-4b6b-b837-c9436a70fb04

Please confirm the above 2 cases for me. Thanks!

fredericalpers commented 10 months ago

@dai-eastgate after discussing this with my colleague again, we do not need an disabled status at all. Please only implement the button. Thank you :)

dai-eastgate commented 10 months ago

@fredericalpers

I would like to confirm with you about the UI of the "Save changes" button. Do you want me to implement it like this (as shown in the image you sent) image

yeneastgate commented 10 months ago

@fredericalpers

I would like to confirm with you about the UI of the "Save changes" button. Do you want me to implement it like this (as shown in the image you sent) image

@fredericalpers Please confirm this for me. Thanks!

fredericalpers commented 10 months ago

@dai-eastgate please make the button left aligned, so its aligned with the "publish" headline, thank you :)

yeneastgate commented 10 months ago

@dai-eastgate please only implement it for desktop for now, thank you :)

@fredericalpers I have created a "block-publish" with the same as the "Desired State"(but not implemented the feature "If no changes have been made the button should be disabled.")

Now, I only implement it for desktops with the popular "display resolution".

  1. HD(1366x768) and Full HD(1920x1080) screen https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/104892108/b258234f-d8db-4c33-a05b-649667aff69c

  2. Full HD+(2560x1600) MacBook Computer 13inch, 14inch, 15inch https://files.fm/u/upw9jw9qc5

In addition to the popular "display resolution" above, which other "display resolution" would you like me to support?

fredericalpers commented 10 months ago

@yeneastgate the implemented popular display resolutions are the ones we want to support for now.