Page 1 of 6

ALERT - Major UI Changes - Work in Progress

Posted: Sat Aug 15, 2020 9:45 pm
by 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.

Re: New Events view WIP

Posted: Mon Aug 17, 2020 1:12 pm
by 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
Screenshot from 2020-08-17 18-34-22.png (143.57 KiB) Viewed 6056 times

Re: New Events view WIP

Posted: Mon Aug 17, 2020 9:26 pm
by 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.

Re: New Events view WIP

Posted: Mon Aug 17, 2020 10:33 pm
by 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.

Re: New Events view WIP

Posted: Tue Aug 18, 2020 1:42 am
by 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

Re: New Events view WIP

Posted: Tue Aug 18, 2020 2:46 pm
by 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.

Re: New Events view WIP

Posted: Wed Aug 19, 2020 3:15 am
by 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.

Re: New Events view WIP

Posted: Thu Aug 20, 2020 12:56 am
by 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
table.jpg (6.42 KiB) Viewed 5882 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

Re: New Events view WIP

Posted: Thu Aug 20, 2020 3:47 pm
by 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.

Re: New Events view WIP

Posted: Thu Aug 20, 2020 8:43 pm
by 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
events-zm.jpg (113.15 KiB) Viewed 5842 times
console-zm.jpg
console-zm.jpg (47.57 KiB) Viewed 5842 times
audit-events-report-zm.jpg
audit-events-report-zm.jpg (56.07 KiB) Viewed 5842 times
Jimmy

Re: New Events view WIP

Posted: Thu Aug 20, 2020 9:26 pm
by 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

Re: New Events view WIP

Posted: Sun Aug 23, 2020 9:02 pm
by Johnny1337
Looks very nice. Would be great if the video could be in centre of the screen when hoovering events. :)

Re: New Events view WIP

Posted: Sun Aug 23, 2020 9:27 pm
by 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.

Re: New Events view WIP

Posted: Mon Aug 24, 2020 10:02 am
by Johnny1337
Aha ok, then I understand. Great work!

Re: New Events view WIP

Posted: Mon Aug 24, 2020 6:36 pm
by 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