ALERT - Major UI Changes - Work in Progress

[knight-of-ni]

I just pushed a new events view to our master branch. It's still a work in progress, and needs a ton of testing. These changes will show in our nightly builds in a day or two.

NOTE: We have noticed that a browser cache reset has been needed in some cases to pick up the latest changes, so before you report something isn't working, please reset your browser cache.

Some of the new new features:
- better pagination
- search bar
- column show/hide
- thumbnail magnifies on hover
- full screen button

The table toolkit we are using is modular and has extensions. You can see them here:
https://examples.bootstrap-table.com/#e ... drbar.html

If there is an extension that would benefit the events view, then please request it.

Please go here to report all new UI related issues:
https://github.com/ZoneMinder/zoneminder/issues/2991

Please read the first post. It contains a list of punchlist items. If the item of concern is not listed in that first post, then please post to the bottom of the thread.

Please do not create a new issue for every button or other minor UI related problem.

[bkjaya1952]

New features are looking great !

Thank you for adding modern features.

I have tested all the buttons . All are working properly

Screenshot from 2020-08-17 18-34-22.png (143.57 KiB) Viewed 54441 times

[knight-of-ni]

Awesome thanks. See how it says "loading please wait" across the screen? That's a bug I just fixed this morning.

Oh, and hover over the thumbnails... it should magnify and stream the video.

[iconnor]

I find that thumbnail width at 80 works pretty well. On my system the thumbnail column is 95px. 80px for the thumbnail is a round divisor of most common widths.

[DVB Hardware]

I like it, mouse over thumbnail video preview works here
Dark theme needs some font color adjustment ..see pic
What would be nice is a list of the css tags that control the font sizes to tweak them a little larger. I have not tried it yet



Jimmy

[knight-of-ni]

Font sizing is part of the style sheet for the dark skin, which is here:
https://github.com/ZoneMinder/zoneminde ... k/skin.css

The contents of this file override the default css which is here:
https://github.com/ZoneMinder/zoneminde ... e/skin.css

The css files are organized by class. You'll need to open your browser debug console and hover over the element in the console to see what class each html element belongs to.

Due to the many css layers, it takes a little practice and some trial & error to get the results you want.

[iconnor]

Given the # of people who like dark theme and also the modern prevalence of dark mode...

we should probably spend a little more time testing/improving the dark skin. Has been on the todo list for a while but since I don't use it, it isn't on my consciousness.

Maybe this is something that someone could take on. The layout should just inherit from base, just need to add colour overrides for various things.

[DVB Hardware]

I agree the dark theme just needs very little tweaking and it is done.
A tiny more detail in the title of what each controls would be great.

Example: In my above image( start time, end time etc) is black font. I spent 2 days trying to find it, the only thing I can guess it is a default and not assigned in the css. Using dev tools debug console in chrome and firefox shows td but nothing listed. And I see the same black font on other pages so it may change all others.
I know only very little css and I mean very little

Still on it !
UPDATE: I found it ( .table color #212529 ) still looking where to change it.
image attached

table.jpg (6.42 KiB) Viewed 54267 times

Aparently I needed to add the below to the dark skin.css to override the default

.table {
width: 100%;
margin-bottom: 1rem;
color: pink;
}

Challenging but satisfying..on to the next one

Jimmy

[knight-of-ni]

Thanks for doing the work.

The style change affects all tables, rather than a specific table(s). Can you verify that this change does not negatively affect other tables, such as the main console and/or the Options view?

I'll merge your changes once I hear back from you. Thanks!

PS: It's the first change or two that takes the longest. Once you past that hump, further changes go quicker.

[DVB Hardware]

This only effects the following, I'll give you a image to see exactly jpg name depicts page/location I went through all the tables I could find
I'll use weird colors to stand out in image, change the color to what you feel acceptable

.table {
width: 100%;
margin-bottom: 1rem;
color: pink;
}

events-zm.jpg (113.15 KiB) Viewed 54227 times

console-zm.jpg (47.57 KiB) Viewed 54227 times

audit-events-report-zm.jpg (56.07 KiB) Viewed 54227 times

Jimmy

[DVB Hardware]

This effects the same 3 images above
events-zm
console-zm
audit-events-report-zm

In original when event is highlighted with your mouse text. Start Time, End Time, Duration etc. font changes black

/* Highlight event table line */
.table-hover>tbody>tr:hover {
background-color: orange;
}

Jimmy

[Johnny1337]

Looks very nice. Would be great if the video could be in centre of the screen when hoovering events.

[knight-of-ni]

Good idea, but the video cannot appear in a place such that the mouse is no longer over it. The center of the video cannot be too far away from the thumbnail. If it is, you get a ping pong effect of cycling zoom unzoom.

Could possibly do that with a click, but at the moment I like the effect occurring on hover.

[Johnny1337]

Aha ok, then I understand. Great work!

[DVB Hardware]

I like the thumbnail / video on the console page directly below the monitor name.
On the event page it is far right, looks like you are splitting up the table real estate being in the middle of the table.
Do you think a better position for the thumbnail between monitor & cause keeping eye focus in one area rather than looking left and right.
Just a thought.

Jimmy