Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Added Dropdown Icon Menu

edited September 2012 in Framework

Did some work this afternoon, after we had talked about this for awhile, decided to see what I could come up with.

Dropdown Icon Menu

Those icons only show after the user hovers over the top bar, and it slides out from in under it. After they are no longer hovering it slides back up, much like the "Tools" menu behaves.

Adding an icon is as simple as this code in any apps config file...


addpage["title"] = "Add Page"
addpage["image"] = "/apps/admin/img/add.png"
addpage["link"] = "/admin/add"

There is also a method for disabled an icon without have to delete it.

addpage["enabled"] = 0

I have been playing with it for a little bit, and so far I am liking this implementation. Check out my fork of elefant for the code.


  • edited September 2012

    If we like this, in the future I would like to enhance its capabilities. I was think we could allow for simple embedded widgets (Jbroadway suggested this awhile back). For example, a slimmed down google analytics.

  • This is going to be really awesome! I can really see how the hover saves screen space but keeps those options so close by.

    I would go about the config a bit differently though. There are really two parts to it, the list of icons available for display (all icons from all apps), and the ones that are currently enabled (icons the current user should see). I think these should be separate because it will be useful to allow each admin user to choose different icons for their profile, reorder them, etc.

    For the user profiles, this can just be fetched from their extended properties like this:

    // get the list of icons, or initialize a default set
    $data = User::$user->userdata;
    if (! isset ($data['app_icons'])) {
        $data['app_icons'] = array (
            // some default icons
            'admin/icon/add' => __ ('Add Page'),
            'blog/icon/add' => __ ('Add Post')
        User::$user->userdata = $data;
        User::save ();
    $icons = $data['app_icons'];

    The above assumes that the icon list is just handle -> label pairs in the right order. I think that's actually all the config we need, because each icon should call out to a handler to generate it instead of requiring an icon, label, and link. For simple links, the handler could be as simple as this:

     * Make an Add Page link.
    echo $tpl->render ('admin/icon', array (
        'label' => __ ('Add Page'),
        'link'  => '/admin/add',
        'icon'  => '/admin/admin/css/admin/add_icon.png'

    The admin/icon view template would have the HTML to render the icon. This extends pretty naturally I think to more dynamic icons, for example:

     * Show a sparkline from Google Analytics.
    $body = '...';
    // Fetch data from Analytics, then output with
    // something like
    echo $tpl->render ('admin/icon', array (
        'label' => __ ('Analytics'),
        'link'  => '/analytics/admin',
        'body'  => $body

    The admin/icon view could then have something like this to generate the icon for you in the simpler case, and allow custom HTML in its place:

    <div class="admin-icon-menu-item">
        <a class="admin-icon-menu-link" href="{{ link }}">
    {% if icon %}
            <img src="{{ icon }}" class="admin-icon-menu-img" alt="{{ label }}" />
            <div class="admin-icon-menu-item-text">{{ label }}</div>
    {% else %}
            <div class="admin-icon-menu-body">{{ body|none }}</div>
            {% if label %}
            <div class="admin-icon-menu-item-text">{{ label }}</div>
            {% end %}
    {% end %}

    Config-wise from here, each app just needs to publish a list of icons for an icon chooser dialog to build a list of:

    admin_icon[admin/icon/add] = Add Page
    admin_icon[analytics/icon] = Analytics

    I think this is going to be a really killer feature. What do you think? This really got me thinking about the possibilities! :)

  • Brilliant! You nailed the dynamic widgets for it, wasn't quite sure how I was going to pull that one off.

    I'll try refactor it to your style in the next day or so. I liked how natural it felt for full screen slidedown, wasn't quite sure how that would turn out.

  • Almost have new implementation done. Hopefully by tomorrow evening. Have a pretty nifty menu builder too!

  • Awesome, can't wait to see it!

Sign In or Register to comment.