Initial commit

lib/assets/javascripts/dashboard/components/user-info/dropdown-view.js

@@ -0,0 +1,19 @@
+var DropdownAdminView = require('dashboard/components/dropdown/dropdown-admin-view');
+
+/**
+ * The content of the dropdown menu opened by the link at the end of the breadcrumbs menu, e.g.
+ *   username / Maps v
+ *            ______/\____
+ *           |            |
+ *           |    this    |
+ *           |____________|
+ */
+module.exports = DropdownAdminView.extend({
+  className: 'Dropdown',
+
+  hide: function () {
+    this.$el.css({
+      opacity: 0
+    });
+  }
+});

lib/assets/javascripts/dashboard/components/user-info/user-info-view.js

@@ -0,0 +1,48 @@
+const $ = require('jquery');
+const CoreView = require('backbone/core-view');
+const BreadcrumbDropdown = require('./dropdown-view.js');
+
+/**
+ * View to render the user info section.
+ * Expected to be created from existing DOM element.
+ */
+module.exports = CoreView.extend({
+
+  events: {
+    'click .js-breadcrumb-dropdown-target': '_createBreadcrumbDropdown'
+  },
+
+  _previousDropDown: null,
+
+  _createBreadcrumbDropdown: function (ev) {
+    ev.preventDefault();
+
+    if (this._previousDropDown) {
+      this._previousDropDown.open();
+      return;
+    }
+
+    var dropdown = new BreadcrumbDropdown({
+      target: $(ev.target),
+      el: $('.js-breadcrumb-dropdown-content'),
+      horizontal_offset: 3, // to match the dropdown indicator/arrow
+      horizontal_position: 'right',
+      tick: 'right'
+    });
+
+    this._previousDropDown = dropdown;
+    this.addView(dropdown);
+    dropdown.on('onDropdownHidden', function () {
+      dropdown.clean();
+    }, this);
+
+    dropdown.render();
+    dropdown.open();
+  },
+
+  _closeAnyOtherOpenDialogs: function () {
+    if (this._previousDropDown) {
+      this._previousDropDown.hide();
+    }
+  }
+});