big button / no text toolbar overhaul

[GoogleCodeExporter]

From Dan . . .

Hi Charlton,

During our last phone call (Oct. 24) we showed you a simple mockup of a revised 
GUI for MORIS.  After a lot of thought and Photoshop play, we’ve arrived at a 
final version that we feel is cleaner, more intuitive, and works with smaller 
screens.  Like the version we shared with you via web conference, most of the 
changes are actually fairly minimal from a structural standpoint.  Here’s a 
summary of what we’d like to see:

• Add a 24 pt header that can be configured by the administrator to change 
agency icon and text.  The mockup is geared toward MORIS but MassGIS will want 
OLIVER, state police will want SPOLIVER, etc.  This toolbar allows the tool be 
easily rebranded for other users.

• The Tools toolbar is larger with commensurately larger icons (24 pt).  Text 
has been removed.  The order of a icons on the right has changed and Permalink 
has been moved up from the bottom tool.

• The Measure/Permalink/Settings toolbar on the bottom is also increased in 
size (24 pt) to match the upper toolbars.  Again, text has been removed with 
the exception of “Basemaps” and the icons increased in size.  

We’ve attached two pngs of the mockup show both a larger and smaller screen 
size. The final icons are in the attached folder; the name of each icon should 
be used for mouseover text.

What additional information can we provide to you?  Thanks in advance and 
please let us know if you’re running into big trouble as these changes are 
implemented.

Original issue reported on code.google.com by cpl...@gmail.com on 21 Nov 2011 at 4:27

Attachments:

• icons_20111102.zip
• moris_mockup_20111102.png
• moris_mockup_20111102_large.png

[GoogleCodeExporter]

I have to admit that I only feel comfortable tweaking the bugs and inputs that 
I created in order to match your screenshots.  Tweaking the buttons and inputs 
that from peoplegis’s end make me a bit nervous, and I may only promise to 
address ‘my’ buttons as part of this issue and save the others for another 
request.

Original comment by cpl...@gmail.com on 21 Nov 2011 at 4:27

[GoogleCodeExporter]

You may want to send me big buttons for the submenus, e.g. the measurement 
tools.

In your control .php's, Aleda, stick these lines (modified to your liking) 
below the featurePrefix block:

      var bannerHTML   = 'I am the title configured in moris.php.  Bow before me.';
      var bannerHeight = 35;

You can stick any HTML inside that bannerHTML you like.  It's just a div.

And if you need to adjust styles, look at the last entry in ogcsearch.css (the 
#banner block).  That's for you.

v. 0.84
revision 220

Original comment by cpl...@gmail.com on 21 Nov 2011 at 5:10

• Changed state: Fixed

[GoogleCodeExporter]

Also, the banner needed to stretch across the entire top -- not just the map 
panel.

Original comment by cpl...@gmail.com on 21 Nov 2011 at 5:11

[GoogleCodeExporter]

Since I moved the permalink and the search block to different places, I'm not 
sure how that effects your peoplegis nav.  You might want to check into that.

Original comment by cpl...@gmail.com on 21 Nov 2011 at 5:15

[GoogleCodeExporter]

We had put together a bullet list of the changes to the GUI that we'd be 
interested in, so I'm posting that list here. I think most of the ones that are 
part of the mockup have been addressed.

• Make the icons 24x24
• Drop the text next to all the tools but basemap
• Add a header toolbar. In the mockup, the height of the header bar is equal 
to the toolbar height, but this may look better if its height is shorter than 
the toolbar height. We would like the header to be configurable so different 
viewers could use different titles. It'd be ideal if this could be configured 
as a text placeholder where we could set the font and font size with HTML tags.
• Move zoom to a scale between zoom out and pan
• Move permalink from the bottom toolbar to the top
• Rearrange export, print, and permalink to be in the following order: 1) 
permalink, 2) print, 3) export
• Add a divider between export and help
• Make dividers slightly wider and darker. More space could also be added 
between groups of tools.

Below are some additional changes that aren't included in the mockup:

• Allow the height of the Available data layers, Active data layers, and 
Active data legends windows to be resized so that just the title bars can 
remain visible
• Remove pan arrows above zoom bar from map
• Change the white box around the scale bar, scale ratio, and lat/long to a 
white halo (similar to the Northeast Ocean Data Viewer)
• Spread out the scale bar, scale ratio, and lat/long. This corner of the map 
is a little busy, so it'd be nice to slightly spread out these items.
• Include the full number with commas for the scale ratio (e.g., 1:17,000 
instead of 1:17K) 
• Remove the spaces around the colon in the scale ratio
• Keep the lat/long spacing and number of decimal places consistent. As I 
move the cursor around, the width of the lat/long box changes size. With 
degrees, minutes, and seconds, this happens because the number of decimal 
places changes, so the coordinates should be padded with zeros.  With decimal 
degrees and State Plane meters, it appears as though the width of the numbers 
changes, so it'd be ideal if the number spacing were consistent so the box does 
not resize as I move the cursor around.
• Label MA State Plane meters coordinates with "m" and include commas in the 
numbers (e.g., 234,591.82 m 900,833.12 m)

Original comment by emily.hu...@state.ma.us on 21 Nov 2011 at 7:51

[GoogleCodeExporter]

Let me hold off on addressing those.  I want to be sure I'm not going past the 
scope of the UI changes we agreed we'd do on the last call.  I want to be fair 
and accommodating, but my impression was that the changes we agreed to do only 
revolved around button resizing to accommodate smaller screens.  If that's 
correct, then maybe the recent bullets above could be moved to a new issue?  If 
that's incorrect, please set me straight.

Original comment by cpl...@gmail.com on 21 Nov 2011 at 9:23

[GoogleCodeExporter]

The new UI is looking great! A few comments:

1. Can't tell that zoom to a scale is grayed out in non-custom basemaps.

2. The divider is missing between export and help.

3. The spacing should be the same on either side of the search for a location 
box. The left side of the box is too close to the divider.

4. We'll leave the 16x16 icons in the sub-menus.

I'll put the additional changes that aren't part of the mockup in a new bug. 
After the conference call, we put together the above bullet list of all the UI 
changes we'd be interested in. I think we may have mentioned just the top (and 
maybe the second?) bullet point during the call:

• Allow the height of the Available data layers, Active data layers, and 
Active data legends windows to be resized so that just the title bars can 
remain visible

Original comment by emily.hu...@state.ma.us on 22 Nov 2011 at 4:55

[GoogleCodeExporter]

#1.  This is the default ExtJs styling.  I'm not sure I won't to override that. 
 It may cause issues elsewhere.

#2.  I added it.

#3.  Added 2 blank cells.

Re. the height of the panels, it can only shrink so far as to show the title 
and the toolbar.  If you need something more like an accordion layout (where 
only the title appears), that is a separate beast.  
http://dev.sencha.com/deploy/ext-3.3.1/examples/layout/accordion.html

v. 0.89
Committed revision 235.

Original comment by cpl...@gmail.com on 23 Nov 2011 at 2:37

[GoogleCodeExporter]

1. Can't tell that zoom to a scale is grayed out in non-custom basemaps.
>>> I think it might be confusing if we don't somehow indicate that the tool 
isn't available in non-custom basemaps. Would it be possible to have a 
different icon for the tool in all the non-custom basemaps? If so, we could 
create a grayed-out version of the icon.

2. The divider is missing between export and help.
>>> Fixed.

3. The spacing should be the same on either side of the search for a location 
box. The left side of the box is too close to the divider.
>>> Looks good.

• Allow the height of the Available data layers, Active data layers, and 
Active data legends windows to be resized so that just the title bars can 
remain visible
>>> Looks good, but the active data legend title can't be moved all the way to 
the bottom of the window to the right.

>>> What are our options for the height of the banner across the top? We may 
prefer a shorter banner.

>>> As I mentioned in Issue 6, our outreach people are reviewing the text in 
MORIS for user-friendliness, so we hope to pass along the tool tip text edits 
to you by the end of next week.

Original comment by emily.hu...@state.ma.us on 23 Nov 2011 at 4:21

[GoogleCodeExporter]

Active data legend title can be moved to bottom now.

I'm not sure if I can swap out a custom disabled button or not.  I think all 
that happens is that some sort of transparency is applied to the icon.  I think 
the issue is that the active icons already have so much gray overtone that 
graying them out doesn't have much contrast.  Would changing the icons you gave 
me to something less gray-focused be an option?

v. 0.90
Committed revision 238.

Original comment by cpl...@gmail.com on 23 Nov 2011 at 4:30

[GoogleCodeExporter]

I do see it becoming more gray when I switch to a non-custom basemap.  It's 
subtle.

Original comment by Aleda.Fr...@state.ma.us on 23 Nov 2011 at 4:34

[GoogleCodeExporter]

I control the height of the banner, just let me know.  Currently it's set at 35.

Original comment by Aleda.Fr...@state.ma.us on 23 Nov 2011 at 4:35

[GoogleCodeExporter]

Verified. Looks great!

Original comment by emily.hu...@state.ma.us on 22 Dec 2011 at 8:43

• Changed state: Verified