Bootstrap 4.5 New UI Punchlist

[knight-of-ni]

This issue has been created to track issues related to Frontend UI changes.

When reporting problems, we need more than just a statement that "feature X is not working as intended". We need screenshots, console log, and zm log messages which can objectively describe the problem.

These changes have a global scope

• [x] Upgrade to Bootstrap 4.5
• [x] Add new collapsed navigation bar
• [x] upgrade to Jquery 3.5.1, use JQuery-migrate to smooth the transition during development
• [x] eliminate mootools
• [x] replace all javascript alert("you have no permissions") messages with ENoPerm modal added in c4c4551
• [x] Eliminate popup links. Instead, make all links navigate to a new view with ZM navbar at the top IN PROGRESS
• [x] Subset of the previous. Replace all optionhelp "?" popup links with optionhelp modal
• [x] Button styling overrides are not applying
• [x] Color states of the widgets on the navigation bar are not applying (logs, /dev/shm, storage areas, etc)
• [x] The dark skin has not been tested - PLEASE TEST
• [x] verify font sizes
• [x] Review the need for WEB_EVENTS_PER_PAGE and/or server side pagination UPDATE: Deploy server side pagination for events, frames, and possible watch views
• [x] The buildSelect php function has an option that embeds inline javascript, which is no longer adviseable. Remove this option from the function and rewrite any calls to this function that try to use it in that way.
• [x] Add locale support to bootstrap-table extension
• [x] Set the table-responsive class on all bootstrap tables
• [x] Set a delay timer on the thumbnail zoom animation so accidental touches don't trigger it

Events view

• [x] Table changes are not being remembered - cookie extension not working UPDATE: Cookie size it too big. See https://github.com/wenzhixin/bootstrap-table/issues/5259 UPDATE: Fixed in commit 9bc1b6a
• [x] Thumbnail animation appears to time out after leaving the view sit unattended Fixed in commit bf63500
• [x] Thumbnail magnify effect extends too far to the right
• [x] Table responsiveness does not want to turn off - creates a horizontal scroll bar on the bottom of the table (ugly) maybe fixed in afc3d2c548e718b988a8f28c2b60300b0ff50d96
• [x] Archive buttons not working properly fixed in commit f27f6e6
• [x] Implement export report to csv, txt, excel, sql, etc via export extension Added in commit 9357017a398c273f46e8ab5b41290c0ddbf9e2ae NEEDS TESTING
• [x] To prevent race condition, add a success callback to the Delete ajax call, which then reloads the page
• [x] Deploy server side pagination

Frames View

• [x] Apply zoom animation to the thumbnails. Added in commit 8f70ae1
• [x] Deploy server side pagination

New Console view Punchlist items:

• [x] Deploy animated thumbnails Added in commit 73a01855f8cf6874ca24938990ffaaf41c9750ad
• [x] Evaluate the ability to enable/disable console thumbnails
• [x] Evaluate placement of the thumbnail: under monitor name, in its own column, etc.

Monitor view

• [x] Un-popup the view
• [x] Convert horizontal tabs to vertical pills
• [x] Fix back button triggers form resubmission alerts
• [x] Fix the other form resubmission alerts
• [x] Convert links in top-right corner to buttons
• [x] Fix the probe & preset views the new buttons point to

Server popup

• [x] Unpopup the view
• [x] convert to modal

Storage popup

• [x] Unpopup the view
• [x] convert to modal

Log view

• [x] Unpopup the views
• [x] add navbar to the header
• [x] rework the buttons, apply more consistent theme, need to discuss
• [x] evaluate using bootstrap-table for the events list

Watch view

• [x] upgrade event list to bootstrap-table
• [x] Unpopup the views
• [x] add navbar to the header
• [x] rework the buttons, apply more consistent theme, need to discuss
• [x] Deploy server side pagination
• [x] Add thumbnails to the event list in this view

Event view

• [x] Unpopup the buttons
• [x] add navbar to the header
• [x] rework the buttons, apply more consistent theme, need to discuss
• [x] Handle the case where the event playback window is too wide to show the event stats on the left

If you notice something that looks different than it did before, please post it to this issue.

[jonasrubensson]

I guess I get below errors because of this?

https://imgur.com/a/Qa29rEk

[knight-of-ni]

You need the latest build of master to fix that

[jonasrubensson]

Thank you!

[knight-of-ni]

Navbar Widget colorization has been fixed in commit 6486f59 Please test!

[bkjaya2020]

In Zoneminder 1.35.5~20200725145046-focal , the filters can't be saved. In earlier versions , when there is an error , the log button color was changed into yellow or red . But that color change does not occur in the version 1.35.5~20200725145046-focal

[knight-of-ni]

In Zoneminder 1.35.5~20200725145046-focal , the filters can't be saved.

Working fine here. You didn't include any error message or screenshot. What lead you to believe this is related to the recent bootstrap upgrade?

[bkjaya2020]

In Zoneminder 1.35.5~20200725145046-focal , the filters can't be saved.

Working fine here. You didn't include any error message or screenshot. What lead you to believe this is related to the recent bootstrap upgrade?

In the filter , the following conditional statements are not saved. https://www.dropbox.com/s/08jx8vnp96bgc50/Screenshot%20from%202020-07-27%2000-16-22.png?dl=0 The error log is attached. https://www.dropbox.com/s/rsahvschpb0mygp/conditionalstatement.png?dl=0

[knight-of-ni]

I don't have permission to view those links.

[bkjaya2020]

I don't have permission to view those links.

Sorry for the mistake https://www.dropbox.com/s/jhq1vdy8osx9b5p/conditionalstatement?dl=0

https://www.dropbox.com/s/jhq1vdy8osx9b5p/conditionalstatement?dl=0

[knight-of-ni]

Those download links redirect back to github, strangely. After reading your post in the forums, I was able understand and duplicate the problem. The problem was caused by yesterday's changes to Object.php. I've let Isaac know.

Since this issue is not related to the Bootstrap upgrade, please keep further discussion here: https://forums.zoneminder.com/viewtopic.php?f=42&p=116674#p116674

[bkjaya2020]

Thank you Sir

[UtechtDustin]

Table changes are not being remembered - cookie extension not working UPDATE: Cookie size it too big. See wenzhixin/bootstrap-table#5259

Will be fixed in the next bootstrap-table version (see https://github.com/wenzhixin/bootstrap-table/pull/5260 and https://github.com/wenzhixin/bootstrap-table/issues/5259)

[knight-of-ni]

Fix dark skin black table text

[knight-of-ni]

Sample screenshot showing frames with > 25 frames

@mnoorenberghe If this is not the case on your machine, then verify the value for Options -> Web -> WEB_EVENTS_PER_PAGE

As stated in the forum, we are still in a transition period between old and new events/frames tables. For now just bump up the value of WEB_EVENTS_PER_PAGE.

[knight-of-ni]

@mnoorenberghe

Server side pagination for the Events view has just been pushed to master. This fixes the issue with the total number of records limited to WEB_EVENTS_PER_PAGE, for that view. PLEASE TEST.

Server side pagination for the Frames view is the roadmap as well, but we need to test the pagination in the Events view further before proceeding.

[knight-of-ni]

tasks are complete. closing...