From 0ee17f32ce8dfc746de9b70d1d7e7bda0656aef4 Mon Sep 17 00:00:00 2001
From: Mayhem <stepien.nicolas@gmail.com>
Date: Tue, 13 Aug 2013 13:53:15 +0200
Subject: [PATCH] Use classes to position menus and sub-menus.

---
 css/style.css         | 24 ++++++++++++++++++++++++
 src/General/UI.coffee | 42 ++++++++++++++++++++----------------------
 2 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/css/style.css b/css/style.css
index c597b6826..e9777b123 100644
--- a/css/style.css
+++ b/css/style.css
@@ -885,6 +885,18 @@ a.hide-announcement {
   position: absolute;
   outline: none;
 }
+#menu.top {
+  top: 100%;
+}
+#menu.bottom {
+  bottom: 100%;
+}
+#menu.left {
+  left: 0;
+}
+#menu.right {
+  right: 0;
+}
 .entry {
   cursor: pointer;
   outline: none;
@@ -921,6 +933,18 @@ a.hide-announcement {
   position: absolute;
   margin: -1px 0;
 }
+.submenu.top {
+  top: 0;
+}
+.submenu.bottom {
+  bottom: 0;
+}
+.submenu.left {
+  left: 100%;
+}
+.submenu.right {
+  right: 100%;
+}
 .entry input {
   margin: 0;
 }
diff --git a/src/General/UI.coffee b/src/General/UI.coffee
index 84bc40a08..7fb0abe2d 100644
--- a/src/General/UI.coffee
+++ b/src/General/UI.coffee
@@ -67,19 +67,18 @@ UI = do ->
       bLeft   = window.scrollX + bRect.left
       cHeight = doc.clientHeight
       cWidth  = doc.clientWidth
-      [top, bottom] = if bRect.top + bRect.height + mRect.height < cHeight
-        ['100%', null]
+      if bRect.top + bRect.height + mRect.height < cHeight
+        $.addClass menu, 'top'
+        $.rmClass  menu, 'bottom'
       else
-        [null, '100%']
-      [left, right] = if bRect.left + mRect.width < cWidth
-        ['0px', null]
+        $.addClass menu, 'bottom'
+        $.rmClass  menu, 'top'
+      if bRect.left + mRect.width < cWidth
+        $.addClass menu, 'left'
+        $.rmClass  menu, 'right'
       else
-        [null, '0px']
-      {style} = menu
-      style.top    = top
-      style.right  = right
-      style.bottom = bottom
-      style.left   = left
+        $.addClass menu, 'right'
+        $.rmClass  menu, 'left'
 
       menu.focus()
 
@@ -155,19 +154,18 @@ UI = do ->
       eRect   = entry.getBoundingClientRect()
       cHeight = doc.clientHeight
       cWidth  = doc.clientWidth
-      [top, bottom] = if eRect.top + sRect.height < cHeight
-        ['0px', 'auto']
+      if eRect.top + sRect.height < cHeight
+        $.addClass submenu, 'top'
+        $.rmClass  submenu, 'bottom'
       else
-        ['auto', '0px']
-      [left, right] = if eRect.right + sRect.width < cWidth
-        ['100%', 'auto']
+        $.addClass submenu, 'bottom'
+        $.rmClass  submenu, 'top'
+      if eRect.right + sRect.width < cWidth
+        $.addClass submenu, 'left'
+        $.rmClass  submenu, 'right'
       else
-        ['auto', '100%']
-      {style} = submenu
-      style.top    = top
-      style.bottom = bottom
-      style.left   = left
-      style.right  = right
+        $.addClass submenu, 'right'
+        $.rmClass  submenu, 'left'
 
     addEntry: (e) ->
       entry = e.detail