Styleing changes

[blitzmann]

I have to say, I'm not a big fan of how some of the UI is styled. For example, the DBs are in the same list as the server (you would think they would be in a separate list, or perhaps a sub list). And the active DB is the same style as the active server. It gets the idea across, especially since there is more important work to be done, but it's poor UI design.

I made a mockup, wondering if you're interested in making it permanent. Old style:

New style:

As you can see, the databases are now differentiated from the server list, and they also 'connect' to the content that manipulates the database. I also pulled the tabs that add data to the right to separate them from the tabs that search/delete

Again, it's a quick mockup that isn't ready to be pulled, more work has to be done and I need to set up a few more redis servers to see how multiple servers work with it. Just wondering if there was any interest on pulling these style changes to the main branch. =)

[sasanrose]

I like the overall look. It seem a lot more easier to navigate.

[eugef]

Hi @blitzmann, new mockup looks really great! Looking forward to see it in action

[blitzmann]

Quick question:

The Info, config, stats, and slow log pages need to be altered to support this type of style. I would like to know if these pages have any information dependent on the current selected database, or if they provide information on the server only.

If they provide information on the server only, I think it might be best to hide the database list as it's irrelevant to the current information. The database will still be selected and can be found in the breadcrumb.

EDIT: I see that Info has a "database size" property that is database specific, so I will leave it along for now. Still curious with the other pages tho.

[eugef]

The Info, config, stats, and slow log pages have server-specific information only. But i don't think that selected DB should be hidden on these pages.

If i have lot of DBs, i don't want to lose selection when navigating through the pages.

[blitzmann]

I believe you're right.

The way I did this was to create a new list for the databases. I used this list to generate a border to the right. However, due to this, this border is always visible since the database are always visible. This required a few tweaks to the other pages as well to make it look more uniformed (it would be weird for this border to not connect to anything on the info page when it connects to the tabs on the main page).

The changes I made to the other pages: Made a head that had a border-left and border-top. The border-left connects to the existing border-right from the database list, while the border-top simply continues the visual style. Here's the changes so far (you've already seen the main page above).

Info page (and config, stats, slowlog)

Old:

New:

Key searching

Old:

New:

Rename, move, expire

Old:

New:

Still playing around and tweaking, but should have a pull request by the weekend.

[sasanrose]

Thanks @blitzmann, it is nice. Also, I agree with @eugef. Although DB name or Id is available in breadcrumb, I believe it's not necessary to remove them from the navigation menu in info or config page. Since, it makes navigation harder. Moreover, I also like to be able to navigate between databases from any page.

[eugef]

I would also like to have normal cursor pointer over the selected DB, otherwise it is not cleat that you can click on it.

[sasanrose]

I agree with @eugef. Otherwise, it shouldn't be click-able at all

[eugef]

I think, it should be clickable as it is the only way to open welcome page for database.

[sasanrose]

I believe that you can click on Home in every page as it contains the selected server and database ids in the url

[eugef]

"Home" will work as well, but is is not so obvious as clicking on DB name in navigation column.

[sasanrose]

I agree. It is better to make it work in either ways

[blitzmann]

I will add cursor to active tab on dblist only (other tabs don't need it). I'll also fix the pages that I forgot about. (see comments in pull request #34)

Also, the general navigation of the application should be re-evaluated to address some issues (the aforementioned "Home" not being intuitive to get back to the welcome screen being an example). I think the navigation for this app has a good base, just needs polishing. There have been many times where the navigation is inconsistent with what we're expecting. That would probably be a much bigger project after a much larger talk about it. I'll try to get a list together about some things that nag at me about the layout/navigation and start a discussion on it.

I encourage further discussion as to any ideas that might help smooth things over

[sasanrose]

@blitzmann I agree with you. First, We need to detect the deficiencies in order to decide how to correct them. Furthermore, I believe you are the perfect person to make the first list.

[eugef]

@blitzmann there is issue with styling of "Edit hash key" page:

[blitzmann]

Will look into it, thanks

[blitzmann]

How did you get to that spot? I tried to look into this tonight but couldn't find the offending page.

[eugef]

Hi @blitzmann, here are steps to follow

• Select any DB, then click on "Hash" tab
• Add new hash - fill in all fields and press "Add & edit"
• In list of hash keys click on edit - you will see "Edit hash key" form that is not styled properly

[blitzmann]

Thanks. Pull request submitted.