Feature Proposal: PatternSkin with Pulldown Menu Bar

Motivation

TWiki uses a sidebar for navigation. This takes away screen real estate. I menubar like QuickMenuSkin offers a navigation that is quick and intuitive. This is a proposal to change the PatternSkin to remove the sidebar and the add a menu bar on top.

Description and Documentation

Sample (simulated) menu structure for Main web on twiki.org, with all pulldown menus shown in open state for illustration purposes:

Webs Blog Codev Main Plugins Sandbox Support TWiki

Main web Users Groups Index Search Changes Notifications RSS Feed Statistics Preferences

Account TWikiGuest Logout Personal links: Personal link 1 Personal link 2 Personal link 3 edit

Screenshots

*Option 1: *

Option 2:

I prefer option 2.

Top menu bar is 22 pixel tall, light gray icon bar is 50 pixel tall, for total of 72 pixel. Old PatternSkin is 65 pixel tall. However, if you count the breadcrumb and edit buttons, title in old PatternSkin starts at 148 pixel, with this new skin it starts at 129 pixel, e.g. a gain of 19 pixel.

Impact

Implementation

-- Contributors: PeterThoeny - 2010-03-20

Discussion

Idea: Combine menu bar and breadcrumb. Example for this topic, shown without pulldown:

Home

Codev web

ChangeProposal

FeatureRequest

PatternSkinWithPulldownMenuBar

May be not such a good idea, it takes away too much screen real estate.

-- PeterThoeny - 2010-03-21

Another idea: Show menu bar at the very top of the window, like the OS-X menu on top.

-- PeterThoeny - 2010-03-21

OK, may be we can combine menu bar and breadcrumb if done on top like on OS-X and with abbreviated parent webs (W > W > W) and parent topics (P > P > P) that have tooltip info with full name of web or topic. Simulated example of this topic with "Home" pulldown shown in expanded state, assuming there would be a parent web called "Community":

Home W    Codev web P P Topic

Account

Blog web

Codev web

Main web

Plugins web

Sandbox web

Support web

TWiki web

This has several advantages:

• Saves screen real estate
• Possible to remove current breadcrumb
• Good for TWiki branding (small TWiki logo on upper left)
• Extensible: An application or plugin might want to add its own pulldown menu
  • Example: Instant message plugin that shows a pulldown with list of who is online (like on FB)

• right arrow as menu separator, 10x16:
  

• dropdown triangle, 14x16:
  

• Transparent background for colored web box in menu:
  

-- PeterThoeny - 2010-03-21

I added two screenshot mockups at the top.

-- PeterThoeny - 2010-03-21

Hi Peter - this is good idea. I support this proposal. Option two is better..reduction in header-bar/action buttons idea is good idea.

-- SopanShewale - 2010-03-23

I am changing state to under construction and accepted by 7 day feedback period.

-- PeterThoeny - 2010-03-30

I am implementing this is a skin named TopMenuSkin that overloads the PatternSkin. That way, the skin can be activated with a SKIN = topmenu,pattern setting. This reduces the amount of documentation changes needed for this release. At a later point we can merge the TopMenuSkin into the PatternSkin.

-- PeterThoeny - 2010-04-04

Thats Good idea Peter

-- SopanShewale - 2010-04-05

Version 1.1 is released, ready for TWiki 5.0

-- PeterThoeny - 2010-04-23