From fd2d9bb787d6dc853b698e9f662568a1e54cf4de Mon Sep 17 00:00:00 2001
From: Remy Sharp <remy@remysharp.com>
Date: Tue, 26 Jun 2012 23:44:57 +0100
Subject: [PATCH] Tweak to layout of popup menus - hopefully cleaner.

---
 public/css/style.css           | 58 +++++++++++++++++++++++++++++++---
 public/js/chrome/login.js      | 10 +++---
 public/js/chrome/navigation.js | 16 +++++++---
 3 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 3086da08..49e8c3c1 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1145,7 +1145,9 @@ input {
   background: #f3b8b6;
   background: rgba(255, 0, 0, 0.2);
   border: 1px solid red;
-  margin: 10px 0;
+  margin: 0;
+  white-space: normal;
+  line-height: 18px;
 }
 
 /*#loginFeedback:empty {
@@ -1509,10 +1511,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 }
 
 .icon { font-family: sans-serif; }
-/*.button-dropdown:after,*/
-/*.fake-dropdown:after { content: "▾"; padding-left: 5px; padding-right: 3px; }*/
-/*.button-dropdown:empty:after,*/
-/*.fake-dropdown:empty:after { padding-left: 0; }*/
+.button-dropdown-arrow:after,
+.fake-dropdown:after { content: "▾"; padding-left: 5px; padding-right: 3px; }
+.button-dropdown-arrow:empty:after,
+.fake-dropdown:empty:after { padding-left: 0; }
 
 
 .editbox {
@@ -2080,4 +2082,50 @@ pre .highlight:last-of-type {
   transition-property: opacity, margin-right;
   transition-timing-function: ease-out, ease-out; 
   transition-duration: 100ms, 100ms;
+}
+
+.dropdown {
+  margin-top: 8px;
+}
+
+.dropdown > div:after, .dropdown > div:before {
+  bottom: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  left: 17%;
+}
+
+.dropdown > div:after {
+  border-bottom-color: #fff;
+  border-width: 10px;
+  margin-left: -10px;
+  top: -16px;
+}
+
+.dd-right.dropdown > div:after {
+  left: 83%;
+}
+
+.dropdown > div:before {
+  border-bottom-color: #ccc;
+  border-width: 11px;
+  margin-left: -11px;
+  top: -18px;
+}
+
+.dd-right.dropdown > div:before {
+  left: 83%;
+}
+
+.avatar {
+  margin-right: 7px;
+  vertical-align: top;
+  display: inline-block;
+  border-radius: 1px;
+  margin-top: -2px;
 }
\ No newline at end of file
diff --git a/public/js/chrome/login.js b/public/js/chrome/login.js
index 3c481e9b..3e37bddc 100644
--- a/public/js/chrome/login.js
+++ b/public/js/chrome/login.js
@@ -24,13 +24,13 @@ var $loginForm = $('form.login').submit(function (event) {
       var data = $.parseJSON(jqXHR.responseText) || {};
       // cookie is required to share with the server so we can do a redirect on new bin
       if (data.ok) {
-        $loginFeedback.text('Successfully tied this browser to "' + name + '".');
-        setTimeout(function () {
-          window.location = window.location.pathname + window.location.search;
-        }, 500);
+        // $loginFeedback.text('Successfully tied this browser to "' + name + '".');
+        // setTimeout(function () {
+        window.location = window.location.pathname + window.location.search;
+        // }, 500);
       } else {
         analytics.login(false);
-        $loginFeedback.text('"' + name + '" has already been taken. Please either double check the password, or choose another username.');
+        $loginFeedback.text(data.message || ('"' + name + '" has already been taken. Please either double check the password, or choose another username.'));
       }
     }
   });
diff --git a/public/js/chrome/navigation.js b/public/js/chrome/navigation.js
index 32db6815..833fa332 100644
--- a/public/js/chrome/navigation.js
+++ b/public/js/chrome/navigation.js
@@ -72,22 +72,25 @@ var dropdownOpen = false,
     menuDown = false;
 
 function opendropdown(el) {
+  var menu;
   if (!dropdownOpen) {
-    $(el).closest('.menu').addClass('open');
-    dropdownOpen = true;
+    menu = $(el).closest('.menu').addClass('open').trigger('open');
+    menu.find('input:first').focus();
+    dropdownOpen = el;
   }
 }
 
 function closedropdown() {
   menuDown = false;
   if (dropdownOpen) {
-    dropdownButtons.closest('.menu').removeClass('open');
+    dropdownButtons.closest('.menu').removeClass('open').trigger('close');
     dropdownOpen = false;
     onhover = false;
   }
 }
 
 $('.button-open').mousedown(function (e) {
+  if (dropdownOpen && dropdownOpen !== this) closedropdown();
   if (!dropdownOpen) {
     menuDown = true;
     opendropdown(this);
@@ -98,7 +101,7 @@ $('.button-open').mousedown(function (e) {
 
 var dropdownButtons = $('.button-dropdown, .button-open').mousedown(function (e) {
   $dropdownLinks.removeClass('hover');
-
+  if (dropdownOpen && dropdownOpen !== this) closedropdown();
   if (!dropdownOpen) {
     menuDown = true;
     opendropdown(this);
@@ -204,6 +207,11 @@ $('#createnew').click(function () {
   }, 0);
 });
 
+$('form.login').closest('.menu').bind('close', function () {
+  $(this).find('.loginFeedback').empty().hide();
+});
+
+
 jsbin.settings.includejs = jsbin.settings.includejs || false;
 $('#enablejs').change(function () {
   jsbin.settings.includejs = this.checked;