Detachable menu

ssire edited this page Jul 24, 2012 · 3 revisions

Detachable Menu visualization variant to render complex type inclusion

Objective : to render a component (xt:component) as a detachable menu which would be triggered by clicking on a simple handle that would be displayed at the component inclusion point (xt:use). The handle would serve as a toggle to hide / show the menu.

Currently this can only be simulated using CSS :hover pseudo-selectors to show the component / menu when the mouse is over the handle. We can generalize it to show the component / menu only when clicking. In a variant we may eventually also implement a shared component / menu to minimize DOM footprint (the component / menu DOM view would be rendered only once).

Proposed syntax

Exemple :

<xt:component name="t_style">
  <div>
    <p>Alignment : <xt:attribute types="select" name="Alignment" values="left right center justify" param="filter=style;style_property=text-align;style_root_class=x-Cell" default="left" option="unset"/></p>
    <p>Border : <xt:attribute types="text" name="Border" param="filter=style;style_property=border;style_root_class=x-Cell" option="unset"></xt:attribute></p>
    <p>Padding : <xt:attribute types="text" name="Padding" param="filter=style;style_property=padding;style_root_class=x-Cell;style_target_class=v-cell-body" option="unset"></xt:attribute></p>
    <p>Margin bottom : <xt:attribute types="select" name="MarginBottom" values="0.5em 1em 1.5em 2em 2.5em 3em 4em 5em 6em 7em 8em 9em 10em" default="1em" param="filter=style;style_property=margin-bottom;style_root_class=x-Cell" option="unset"/></p>    
  </div>
</xt:component>

<xt:use types="t_style" param="detachable=true"/>

Issues

  • the example above uses a 'style' filter that applies the new value to the DOM for immediate feedback, in case the component / menu is a shared DOM tree, we must find a way for the filter to locate the menu handle to resolve it's target according to it (maybe with a new getComponentHandle() that would return the handle if the component is inserted as a detachable menu, and null otherwise ?).

  • where and how to setup a detachable menu handler

For the second question, the easiest solution is to define a standard handle to be used for every detachable menus, it could eventually use an icon with a parameter:

 <xt:use types="t_style" param="detachable=true;detachable_icon=/static/images/style.png"/>

As an alternative we could imagine that the xt:use of a detachable menu renders it's content as HTML and subscribes to it, e.g.:

 <xt:use types="t_style" param="detachable=true"><span class="style-menu">Style</span></xt:use>

As another alternative we could modify AXEL to manage a focus chain at the component level and define a mechanism to trigger detachable menus of a given type using an external command. That would allow to design some menu bars applying to the whole document, e.g. :

 <xt:use types="t_style" param="detachable=true;detachable_type=style"/>

would allow to define a corresponding button :

 <button data-deachable="style"/>Style</button>

then with little javascript code the button would be activated when a component with a detachable menu of type style would have the focus, and clicking on the button would show the menu

Benefits

  • user moves the menu on screen and position is remembered (e.g. side menu)
  • well suited for styling menus (e.g. margins, text alignment, floating, etc.)
  • shared menu (inspector UI design pattern) : the component would share a single DOM tree that would show the data for the latest clicked menu handle
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.