Implement ambiguous relation menu for adding rels

lib/views/stylesheet.less

 /* Processed with LESS from lib/views/stylesheet.less */
 
 @font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
 body {
     margin-top: 87px;
     background-color: #302b28;
     font-family: @font-family;
 }
 
@@ skipping 124 matching lines @@
 
 .crosshatch-background {
     background: url(/juju-ui/assets/images/pattern_tile.png) repeat;
 }
 
 #canvas {
     position: relative;
 }
 
 
-#service-menu {
+#service-menu, #ambiguous-relation-menu {

[thiago, 2012/10/19 18:09:29]

You could remove the id and use both classes in your menu. Like...

<div class="service-menu ambiguous-relation-menu">
  <div class="triangle">&nbsp;</div>
    <ul/>
  </div>
</div>

So you can remove this new css declaration and do something like...

var menu = container.one('.ambiguous-relation-menu')

...in environment.js

[matthew.scott, 2012/10/19 19:16:58]

Done.  Both #service-menu and #ambiguous-relation-menu are unique and must be
referred to that way because of the way they're controlled in the view. 
However, I have added a 'environment-menu' class to each, and then used that as
the selector here.

     @border_radius: 20px;
     @background_color: #282421;
 
     display: none;
     background-color: @background_color;
     color: #fdf6e3;
 
     border-radius: @border_radius;
     -moz-border-radius: @border_radius;
     -webkit-border-radius: @border_radius;
 
     box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);
     -moz-box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);
 
     top: 0;
     left: 0;
     position: absolute;
 
     &.active {
         display: block;
     }
 
-    #service-menu-triangle {
+    .triangle {
         position: absolute;
         top: 62px;
         left: -12px;
         width: 12px;
         line-height: 21px;
         background-image: url(/juju-ui/assets/images/icons/icon_shadow_triangle.png);
         background-repeat: no-repeat;
     }
 
     ul {
@@ skipping 833 matching lines @@
     text-align: left;
     background-color: white;
     border: solid 1px black;
     padding: 0.2em 0.5em 0.3em;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
     min-width: 20px;
     max-width: 400px;
 }