Dropbutton with Ctools

published by Arshad on Tue, 06/28/2011 - 09:39

Tags:

Earl Miles aka merlinofchaos, has a knack for introducing new UI elements to Drupal. See View UI , Panels UI, Modal forms ...etc. With the new revamped Views 3 interface comes a new element, the dropbutton.

The dropbutton provides a javascript based dropbutton menu. It shows up as a button with a clickable twisty pointer to the right. When clicked the button will expand, showing the list of links. This allows you to focus on the main tasks, like edit, while less-used action are within a single click. It's a neat thing that you can use on your custom modules too.

Here's how.

The PHP

<?php
$menu = array(
  'links' => array(
    'edit' => array(
      'title' => t('Edit'),
      'href' => 'path/to/edit',
      'query' => array(
        'destination' => 'path/to/destination/'
      ),
    ),
    'delete' => array(
      'title' => t('Delete'),
      'href' => 'path/to/delete',
    ),
  ),
);
print theme('links__ctools_dropbutton', $menu);
?>

The CSS

table td, table th {
  vertical-align:top !important;
}

.ctools-button-processed {
  background-color: #FFFFFF;
  border-color: #CCCCCC;
  font-size: 11px;
  padding-bottom: 0px;
  padding-top: 0px;
  background-image:
    -moz-linear-gradient(
      -90deg,
      #ffffff 0px,
      #f9f9f9 100%);
  background-image:
    -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0.0, rgba(255, 255, 255, 1.0)),
      color-stop(1.0, rgba(249, 249, 249, 1.0))
    );
  background-image:
    -webkit-linear-gradient(
      -90deg,
      #ffffff 0px,
      #f9f9f9 100%);
  background-image:
    linear-gradient(
      -90deg,
      #ffffff 0px,
      #f9f9f9 100%);
  -moz-border-radius: 11px 11px 11px 11px;
  -webkit-border-radius: 11px 11px 11px 11px;
  border-radius: 11px 11px 11px 11px;
  position:absolute !important;
}

.ctools-button-processed:hover {
  background-image:
    -moz-linear-gradient(
      -90deg,
      #ffffff 0px,
      #f1f1f1 100%);
  background-image:
    -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0.0, rgba(255, 255, 255, 1.0)),
      color-stop(1.0, rgba(241, 241, 241, 1.0))
    );
  background-image:
    -webkit-linear-gradient(
      -90deg,
      #ffffff 0px,
      #f1f1f1 100%);
  background-image:
    linear-gradient(
      -90deg,
      #ffffff 0px,
      #f1f1f1 100%);
}

.ctools-dropbutton-processed.open:hover {
  background-image:
    -moz-linear-gradient(
      -90deg,
      #ffffff 0px,
      #f9f9f9 100%);
  background-image:
    -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0.0, rgba(255, 255, 255, 1.0)),
      color-stop(1.0, rgba(249, 249, 249, 1.0))
    );
  background-image:
    -webkit-linear-gradient(
      -90deg,
      #ffffff 0px,
      #f9f9f9 100%);
  background-image:
    linear-gradient(
      -90deg,
      #ffffff 0px,
      #f9f9f9 100%);
}

.ctools-dropbutton-processed.open {
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}

.ctools-dropbutton-processed .ctools-content {
    border-right: 1px solid #E8E8E8;
}

.ctools-button-processed .ctools-content {
    padding-bottom: 0;
    padding-top: 0;
}

.ctools-button-processed li {
    line-height: 1.3333;
}

.ctools-dropbutton-processed li a, .ctools-dropbutton-processed li input {
    padding-right: 9px;
}

.ctools-button li a {
    padding-left: 12px;
    padding-right: 12px;
}

.ctools-dropbutton-processed.open li + li {
    border-top: 1px solid #EFEFEF;
    margin-top: 4px;
    padding-bottom: 0;
    padding-top: 4px;
}

.ctools-twisty:focus {
    outline: medium none;
}

The theme function actually comes from the Chaos tool suite (ctools). So make sure you have the ctools module installed.

Comments

Arjun

Tue, 06/28/2011 - 10:18

That was easy. Thanks for the post

zepner

Tue, 09/06/2011 - 20:32

any way to do this with non-menu items? like gmail's multi-checkbox widget

Add new comment