Merge pull request #681 from tf/drop-down-button-improvements

Improve DropDownButton

app/assets/javascripts/pageflow/editor/templates/drop_down_button.jst.ejs

@@ -1,6 +1,4 @@
 <button></button>
 
 <div class="drop_down_button_menu">
-  <ul class="drop_down_button_items" role="menu">
-  </ul>
 </div>

app/assets/javascripts/pageflow/editor/templates/drop_down_button_item.jst.ejs

@@ -1 +1,2 @@
+<div class="label"></div>
 <a href="#"></a>

app/assets/javascripts/pageflow/editor/templates/inputs/file_input.jst.ejs

@@ -4,6 +4,6 @@
 </label>
 <div class="file_thumbnail"></div>
 <div class="file_name"></div>
-<a href="" class="edit_positioning" title="<%= I18n.t('pageflow.ui.templates.inputs.file_input.adjust_positioning') %>"></a>
+
 <a href="" class="unset" title="<%= I18n.t('pageflow.ui.templates.inputs.file_input.reset') %>"></a>
 <a href="" class="choose" title="<%= I18n.t('pageflow.ui.templates.inputs.file_input.edit') %>"></a>

app/assets/javascripts/pageflow/editor/views/drop_down_button_item_list_view.js

@@ -0,0 +1,9 @@
+/** @api private */
+pageflow.DropDownButtonItemListView = function(options) {
+  return new pageflow.CollectionView({
+    tagName: 'ul',
+    className: 'drop_down_button_items',
+    collection: options.items,
+    itemViewConstructor: pageflow.DropDownButtonItemView
+  });
+};

app/assets/javascripts/pageflow/editor/views/drop_down_button_item_view.js

@@ -5,7 +5,8 @@ pageflow.DropDownButtonItemView = Backbone.Marionette.ItemView.extend({
   className: 'drop_down_button_item',
 
   ui: {
-    link: '> a'
+    link: '> a',
+    label: '> .label'
   },
 
   events: {
@@ -24,10 +25,22 @@ pageflow.DropDownButtonItemView = Backbone.Marionette.ItemView.extend({
 
   onRender: function() {
     this.update();
+
+    if (this.model.get('items')) {
+      this.appendSubview(new pageflow.DropDownButtonItemListView({
+        items: this.model.get('items')
+      }));
+    }
   },
 
   update: function() {
     this.ui.link.text(this.model.get('label'));
+    this.ui.label.text(this.model.get('label'));
+
+    this.$el.toggleClass('is_selectable', !!this.model.selected);
     this.$el.toggleClass('is_disabled', !!this.model.get('disabled'));
+    this.$el.toggleClass('is_checked', !!this.model.get('checked'));
+
+    this.$el.data('name', this.model.get('name'));
   }
 });

app/assets/javascripts/pageflow/editor/views/drop_down_button_view.js

@@ -1,11 +1,25 @@
 /**
  * A button that displays a drop down menu on hover.
  *
- * - `label` {String}
- * - `items` {Backbone.Collection} The `label` attribute is used
- *   as text for the item. Items can be disabled by setting the
- *   `disabled` property to `true`. On click a `selected` method is
- *   called on the item model.
+ * @param {String} options.label
+ *   Button text.
+ *
+ * @param {Backbone.Collection} options.items
+ *   Collection of menu items. See below for supported attributes.
+ *
+ * ## Item Models
+ *
+ * The following model attributes can be used to control the
+ * appearance of a menu item:
+ *
+ * - `name` - A name for the menu item which is not displayed.
+ * - `label` - Used as menu item label.
+ * - `disabled` - Make the menu item inactive.
+ * - `checked` - Display a check mark in front of the item
+ * - `items` - A Backbone collection of nested menu items.
+ *
+ * If the menu item model provdised a `selected` method, it is called
+ * when the menu item is clicked.
  *
  * @class
  * @memberof module:pageflow/editor
@@ -16,8 +30,7 @@ pageflow.DropDownButtonView = Backbone.Marionette.ItemView.extend({
 
   ui: {
     button: '> button',
-    menu: '.drop_down_button_menu',
-    items: '.drop_down_button_items'
+    menu: '.drop_down_button_menu'
   },
 
   events: {
@@ -27,28 +40,29 @@ pageflow.DropDownButtonView = Backbone.Marionette.ItemView.extend({
     },
 
     'mouseleave': function() {
-      this.hideMenu();
+      this.scheduleHideMenu();
     }
   },
 
   onRender: function() {
     var view = this;
 
+    this.ui.button.toggleClass('has_icon_and_text', !!this.options.label);
+    this.ui.button.toggleClass('has_icon_only', !this.options.label);
+
     this.ui.button.text(this.options.label);
 
-    this.subview(new pageflow.CollectionView({
-      el: this.ui.items,
-      collection: this.options.items,
-      itemViewConstructor: pageflow.DropDownButtonItemView
-    }));
+    this.ui.menu.append(this.subview(new pageflow.DropDownButtonItemListView({
+      items: this.options.items
+    })).el);
 
     this.ui.menu.on({
       'mouseenter': function() {
         view.showMenu();
       },
 
       'mouseleave': function() {
-        view.hideMenu();
+        view.scheduleHideMenu();
       }
     });
 
@@ -69,15 +83,29 @@ pageflow.DropDownButtonView = Backbone.Marionette.ItemView.extend({
   },
 
   showMenu: function() {
+    this.ensureOnlyOneDropDownButtonShowsMenu();
+
     clearTimeout(this.hideMenuTimeout);
     this.ui.menu.addClass('is_visible');
   },
 
+  ensureOnlyOneDropDownButtonShowsMenu: function() {
+    if (pageflow.DropDownButtonView.currentlyShowingMenu) {
+      pageflow.DropDownButtonView.currentlyShowingMenu.hideMenu();
+    }
+
+    pageflow.DropDownButtonView.currentlyShowingMenu = this;
+  },
+
   hideMenu: function() {
-    this.hideMenuTimeout = setTimeout(_.bind(function() {
-      if (!this.isClosed) {
-        this.ui.menu.removeClass('is_visible');
-      }
-    }, this), 500);
+    clearTimeout(this.hideMenuTimeout);
+
+    if (!this.isClosed) {
+      this.ui.menu.removeClass('is_visible');
+    }
+  },
+
+  scheduleHideMenu: function() {
+    this.hideMenuTimeout = setTimeout(_.bind(this.hideMenu, this), 300);
   }
 });

app/assets/stylesheets/pageflow/editor/drop_down_button.scss

@@ -1,23 +1,19 @@
+$drop-down-button-menu-background-color: #eee !default;
+$drop-down-button-menu-active-item-background-color: #ddd !default;
+$drop-down-button-menu-disabled-item-text-color: #ddd !default;
+$drop-down-button-menu-border-color: #aaa !default;
+
 .drop_down_button {
   display: inline-block;
   position: relative;
 
-  > button {
+  > button.has_icon_and_text {
     @include icon-button;
   }
-}
-
-.drop_down_button_menu.is_visible {
-  @include transition(visibility 0ms, opacity 100ms);
-  visibility: visible;
-  pointer-events: all;
-  opacity: 1;
-}
 
-.drop_down_button_list {
-  position: relative;
-  background-color: #eee;
-  border: 1px solid #ccc;
+  > button.has_icon_only {
+    @include icon-only-button;
+  }
 }
 
 .drop_down_button_menu {
@@ -29,26 +25,66 @@
   position: absolute;
   z-index: 1;
   padding: 1px;
-  border: solid 1px #aaa;
-  background-color: #eee;
+  border: solid 1px $drop-down-button-menu-border-color;
+  background-color: $drop-down-button-menu-background-color;
+
+  &.is_visible {
+    @include transition(visibility 0ms, opacity 100ms);
+    visibility: visible;
+    pointer-events: all;
+    opacity: 1;
+  }
 }
 
 .drop_down_button_item {
-  a {
-    display: block;
+  a,
+  .label {
     padding: 7px 15px;
+  }
+
+  a {
+    display: none;
     cursor: pointer;
 
     &:hover {
-      background-color: #ddd;
+      background-color: $drop-down-button-menu-active-item-background-color;
+    }
+  }
+
+  .label {
+    cursor: default;
+  }
+
+  &.is_selectable {
+    a {
+      display: block;
+    }
+
+    .label {
+      display: none;
     }
   }
 
   &.is_disabled a {
-    color: #ddd;
+    color: $drop-down-button-menu-disabled-item-text-color;
 
     &:hover {
       background-color: inherit;
     }
   }
-}
+
+  &.is_checked a {
+    @include background-icon-left($left: 15px, $font-size: 15px);
+    @include fa-check-icon;
+  }
+
+  .drop_down_button_item a {
+    padding-left: 39px;
+  }
+
+  ul {
+    border-bottom: solid 1px $drop-down-button-menu-border-color;
+    padding-bottom: 1px;
+    margin-bottom: 1px;
+  }
+}

app/assets/stylesheets/pageflow/editor/inputs/file_input.scss

@@ -41,9 +41,11 @@
     right: 35px;
   }
 
-  a.edit_positioning {
-    @include icon-only-button();
-    @include doc-landscape-icon;
+  .drop_down_button {
+    button {
+      @include fa-ellipsis-v-icon;
+      width: 31px;
+    }
 
     position: absolute;
     top: 53px;
@@ -53,4 +55,11 @@
   .inline_help {
     white-space: normal;
   }
-}
+
+  &.is_unset {
+    .unset,
+    .drop_down_button {
+      display: none;
+    }
+  }
+}