search

Esri / calcite-web

Authoritative front-end development resources for Calcite design initiative. Includes extendable base components and styles, as well as a modular and efficient framework for ArcGIS properties.
http://esri.github.io/calcite-web/
Apache License 2.0
109 stars 58 forks source link

Need effective display and interaction for platform/device toggle/switcher #78

Closed eleanorh closed 9 years ago

eleanorh commented 9 years ago

We deliver doc for Product A that is available in multiple flavors. The flavors of a product are generally based on platform or device. We generate doc that is specific for each flavor. We currently host that doc in a generic single product 'site' that the user can set/toggle to the flavor of the product they are using.

We'd like the new framework to address our needs for the flavor toggle or switcher while improving on the existing display.

Examples

image

image

image

In some cases, the number of flavors has reached the limits of the horizontal design pattern we implemented for this element.

image

Existing use cases/patterns

When migrating to Tailcoat, we implemented the toggle display to accommodate 3 use cases for the flavor toggle:

Here's an example that displays the toggle for current and disabled states - http://server.arcgis.com/en/web-adaptor/latest/install/iis/installing-multiple-arcgis-web-adaptors-server-.htm

And an example that displays the toggle for current and available states - http://server.arcgis.com/en/web-adaptor/latest/install/iis/installing-the-arcgis-web-adaptor-server-.htm

paulcpederson commented 9 years ago

@eleanorh this is a really interesting and complex problem. Nothing immediately springs to mind, so I may have to sleep on this...

eleanorh commented 9 years ago

:-)

nikolaswise commented 9 years ago

@eleanorh We thought about this, and I think we can use our existing tab-group tab-transparent class to accomplish this effect. Here's a screenshot of what this could look like.

screen shot 2015-01-13 at 10 10 10 am

paulcpederson commented 9 years ago

@eleanorh we did a couple sample layouts, check out this proposed solution live: http://esri.github.io/calcite-web/page-layouts/documentation/

eleanorh commented 9 years ago

I like this but is the pattern just as clean when 5 flavors exist?

A more significant issue is that each flavor of topic may have a diff set of In Topic links. This design has the switch appearing below that list of links. Will it be disconcerting to the user if the area above the switcher changes as well as the content below it? Note: the TOC on the right is also subtly different for each flavor and so would also need to reload.

And also how would this design handle the disabled case noted above. For example, suppose the OS X SDK is available in 3 diff flavors and whatever page you land on we want to subtly expose you to the availability of the other flavors. However, the specific functionality described on this page is only only valid for 2 of the 3 flavors. Do we keep the existing pattern in place and its only after the user clicks the switch that they see a note that says something like "This topic is not relevant when using X flavor of the OS X SDK"?

I should note that currently we are generating diff html files for each flavor rather than diff divs in the same html file. We may be able to do either but certainly keeping them diff is simpler from our perspective.

paulcpederson commented 9 years ago

@eleanorh

nikolaswise commented 9 years ago

Closing this issue. If tabs end up not working, we can examine.