Versions Compared

Old Version 2

changes.mady.by.user B. Collier Jones

Saved on

compared with

New Version 3

changes.mady.by.user B. Collier Jones

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

[Introduction to come soon, just trying to get the mockups posted]

Icons, Colors, and Spacing
This is just a rough mockup I made quickly to get something out for people to comment on.  The colors, icons, and padding were just quick picks.  Agonizing over these things so early on would be a waste of time.  These things will definately change in when it comes time to release something.

Inspiration - these sites served as my inspiration for how the interaction should work.

  • Liferay
  • live.com
  • google.com/ig
  • my.yahoo.com 

I've put questions I need answers to in green. 

...

  • Icons - A per-tab icon.  Do we want this?
  • Tab Menu - Displays the tab menu.  Only works with JavaScript enabled.  A purely CSS based approach is not possible with IE6. Is this correct?  For the active tab, the menu arrow is always shown.  For inactive tabs, the menu arrow is only shown when mousing over the tab.
    • Move Left/Right - simple
    • Move to <Tab Name> - makes the 'tab' a 'page' of the tab specified (see pages
    • Rename - provides a way for the user to change the name of the tab.
    • Delete - deletes the tab
  • Add Tab - Adds a tab named 'New Tab' to the end of the current list of tabs.  If a user cannot add a tab, this doesn't even appear.# Dragging a Tab* -.
  • Dragging a Tab - When a tab begins to be dragged, it is removed from the tab list, made semi-transparent, and a dotted outline is shown over valid drop zones.
    • If the tab is released over an invalid drop zone, it snaps back to its original location.
    • If there are no valid drop zones (all of the other tabs are part of pushed fragments) then none of the tabs will be draggable.
    • When dragging a tab, tabs that have had their movement restricted by the layout manager will present some UI to the effect that they cannot be moved.  Perhaps a (tick) symbol on the mouse cursor.
    • What additional feedback is required?

Pages

I'm calling subtabs Pages so I don't have to call them subtabs.  Anyone have a better name?

  • Icons - They're just like tabs.
  • Page Menu - just like the tab menus
  • Add Page - just like Add Tab
  • First/Default "Page" - The first/default page is simply the parent tab.  It cannot be moved/reordered.  It is there to allow navigation between pages without having to click the actual tab to return to the default view.
  • Dragging a Page - See Dragging a Tab above.

Add Content

Appears disabled if content cannot be added to the current page.  Takes you to the add content screen which still needs to be designed.   When a portlet is selected to be added, it is added to the to the last available position of the current page.  This means as the last portlets of the last column.  New portlets will be highlighted with a fading highlight effect when added.

Change Layout

  • With JavaScript enabled, a menu appears allowing the user to change the number of columns on the current page.  Unavailable options will be greyed out (if one or more columns are not removable via fragment permissions).
  • When moving from fewer to greater columns: new, empty columns are created of equal width
  • When moving from greater to fewer columns: portlets from the columns being removed are added to the last column in the new layout.  There is no "even distribution" of portlets.
  • You cannot remove a column with channels if you have nowhere to put them: If you have three columns (with portlets in each) in your layout and two are unremovable, you can go to four columns, but you cannot go to two columns.
  • The last option in the menu is a link to the Change Layout interface, simliar to the uP 2.5 DLM preferences channel.
  • If JavaScript is disabled, takes the user to a customization UI simliar to the uP 2.5 DLM preferences channel.

Portlets

  • the >> is the collapse/expand button.  The button adopts the convention of indicating the current state of the portlet.  (see My Yahoo or live.com)
    • Up - portlet is collapsed
    • Down - portlet is expanded
  • Icons - A per-channel icon.  Do we want this?

up3-portlet-menu.png* Customization Menu - same as other customization menus

  • Portlet Actions - Help, Settings, Detach, Focus/Maximize (which one?), Delete  - Am I missing any?  Can I remove some?

Site Map

This is sorta mirrored after flickr, but in our case shows your tab hierarchy. What do you think?