Created attachment 33202 [details] Proposed design I'm not very happy with Tomcat Manager GUI, so I tried to make something different, using Tomcat website layout. The result is in the attachment. Just unpack to empty folder and open manager.html. That is a static HTML page. In order to remove clutter, instead of English words, I used icons for Manager commands (start, stop...). I used Famfamfam Silk icons [1]. Silk icons are distributed under CC-BY 2.5/3.0 License, which is recently categorized as "category B" license [2], so it is safe to include them in Tomcat, to my understanding. I like how Silk audio icons (play, stop, repeat, etc.) fit Manager commands (start, stop, reload, etc.). One good reason for using audio icons is that they come out-of-the box in both active (blue) and inactive (greyed) versions. I also used scissors icon for session expiration. Is this a bit of a stretch? I also changed the order of deployment options: first the client war deployment, and then directory or server war deployment. Most of the people I know deploy wars from client, but if others think that directory / server war deployment is used more often, I can switch back their places. What do you think? -Ognjen [1] http://www.famfamfam.com/lab/icons/silk/ [2] http://www.apache.org/legal/resolved.html
Nice. No, I take that back. Very nice. I have a couple of minor comments/suggestions: 1. Restore the shading of alternate lines in the list of applications to help the eye track across. 2. Use tooltips to provide i18n descriptions of the actions 3. Merge the deploy action with the previous column (maybe with a small gap)
(In reply to Mark Thomas from comment #1) > Nice. No, I take that back. Very nice. Thanks. :) > 1. Restore the shading of alternate lines in the list of applications to > help the eye track across. Sure, it would be easy to restore them, but... I find "zebra stripes" a bit of a retro. Most products I use from large companies (meaning they are probably hiring professional designers) don't use zebra stripes (YMMV). E.g: 1. Mozilla Thunderbird 2. Microsoft Windows Explorer 3. Google GMail (*) 4. Adobe Acrobat Reader (*) 5. Atlassian JIRA (*) Instead they highlight the hovered row. Proposed Manager GUI design also highlights the hovered row. Also, those marked with asterisk are using gray lines to visually separate rows. Could you try to uncomment line 249 in tomcat.css and see if separating rows with lines is viable replacement for "zebra stripes"? > 2. Use tooltips to provide i18n descriptions of the actions I will. > 3. Merge the deploy action with the previous column (maybe with a small gap) Ok. I think gap is really necessary, to avoid accidental undeployment, since there is no confirmation dialog. But, yes, it doesn't need to be in a separate column; smaller gap will suffice.
This can easily degenerate into a holy war, but I do have a few comments: (In reply to Ognjen Blagojevic from comment #2) > I find "zebra stripes" a bit of a retro. Most products I use from large > companies (meaning they are probably hiring professional designers) don't > use zebra stripes (YMMV). E.g: > > 1. Mozilla Thunderbird tb still uses zebra stripes, though they are minimal (unless you have a theme that removes them). > 2. Microsoft Windows Explorer > 3. Google GMail (*) > 4. Adobe Acrobat Reader (*) > 5. Atlassian JIRA (*) I wouldn't use JIRA as an example of a good UI ;)
Ah. I missed the row higlighting on hover. I'm going to blame viewing angle / lack of sleep ;) I tried uncommenting line 249 and I do think it looks better. But that is just my opinon. This is your improvement so go with what you think looks best. I'm sure it is going to be better than what we have at the moment. The highlight on hover is sufficient for the user to be sure they are working with the app they think they are.
I guess it looks better now. In the "code" there are a lot of style left in the HTML, I suppose this will move away right ?
(In reply to Remy Maucherat from comment #5) > In the "code" there are a lot of style left in the HTML, I suppose this will > move away right ? Right.
Ognjen, I think it looks great. Does the zip file have the updates that Mark suggested? Are we going to implement this and is there a plan?
It turned out more difficult then I expected. Let me have another look, and I will call for help if I get stuck again.
Should new theme replace the old one, or should it be just one additional skin for the manager GUI, so user may decide whether to use the old GUI or the new one? I started going in the direction of skinning, and that would require: 1. To have, for now, two themes, e.g. "retro" (existing one) and "website" (the one I'm working on, using website layout) 2. To add init param in manager web.xml with the name "skin", or something like that, so user may specify which skin to use. 3. To move constants with HTML and CSS fragments from classes o.a.c.manager.Constants and o.a.c.manager.host.Constants, into new "retro skin" class. 4. To create another "website skin" class with new set of HTML and CSS fragments 5. To add code for selection of appropriate skin class depending on the web.xml parameter. WDYT?
(In reply to Ognjen Blagojevic from comment #9) > Should new theme replace the old one, or should it be just one additional > skin for the manager GUI, so user may decide whether to use the old GUI or > the new one? Replace - maintaining both is too much work.