From 2eee217b05d34540bcdb042986569c6000e66042 Mon Sep 17 00:00:00 2001
From: Gaetan Delannay <gaetan.delannay@gmail.com>
Date: Thu, 29 May 2014 13:32:19 +0200
Subject: [PATCH] [ref] Better rendering of ref menus.

---
 fields/ref.py   | 12 +++++++-----
 gen/ui/appy.css |  3 ++-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/fields/ref.py b/fields/ref.py
index f94dec6..161ea98 100644
--- a/fields/ref.py
+++ b/fields/ref.py
@@ -311,8 +311,10 @@ class Ref(Field):
 
     # PX that displays referred objects as menus.
     pxViewMenus = Px('''
-     <table if="objects"><tr valign="bottom">
-      <td for="menu in field.getLinkedObjectsByMenu(obj, objects)">
+     <div if="objects"
+          for="menu in field.getLinkedObjectsByMenu(obj, objects)"
+          var2="dtc='display: table-cell'"
+          style=":not loop.menu.last and ('%s;padding-right:7px') % dtc or dtc">
 
        <!-- A single object in the menu: show a clickable icon to get it -->
        <a if="len(menu.objects) == 1" var2="tied=menu.objects[0]"
@@ -331,15 +333,15 @@ class Ref(Field):
         <!-- Display the number of objects in the menu (if more than one) -->
         <x if="len(menu.objects) &gt; 1">:len(menu.objects)</x>
         <!-- The dropdown menu containing annexes -->
-        <div id=":dropdownId" class="dropdown">
+        <div id=":dropdownId" class="dropdown" style="width:150px">
          <div for="tied in menu.objects"
+              class=":not loop.tied.first and 'refMenuItem' or ''"
               var2="tiedUrl=field.getMenuUrl(zobj, tied)">
           <a href=":tiedUrl">:tied.title</a>
          </div>
         </div>
        </div>
-      </td>
-     </tr></table>''')
+     </div>''')
 
     # Simplified widget showing minimal info about tied objects.
     pxViewMinimal = Px('''
diff --git a/gen/ui/appy.css b/gen/ui/appy.css
index 36cda74..6cc6a17 100644
--- a/gen/ui/appy.css
+++ b/gen/ui/appy.css
@@ -98,7 +98,7 @@ td.search { padding-top: 8px }
          border: 1px solid grey; box-shadow: 2px 2px 2px #888888}
 .dropdown { display:none; position: absolute; border: 1px solid #cccccc;
             background-color: white; padding: 3px 4px 0; font-size: 8pt;
-            font-weight: normal; z-index: 2 }
+            font-weight: normal; text-align: left; z-index: 2 }
 .dropdownMenu { cursor: pointer; font-size: 93%; position: relative }
 .dropdown a:hover { text-decoration: underline }
 .list { margin-bottom: 3px }
@@ -126,6 +126,7 @@ td.search { padding-top: 8px }
 .even { background-color: #f9f9f9 }
 .odd { background-color: #f4f4f4 }
 .odd2 { background-color: #f2f2f2 }
+.refMenuItem { border-top: grey 1px dashed; margin: 3px 0; padding-top: 3px }
 .summary { margin-bottom: 5px; background-color: #f9f9f9;
            border: 2px solid #f9f9f9 }
 .by { padding: 5px; color: grey; font-size: 97% }