Allowing multiple levels on dropdowns

Packages/ohif-core/client/components/bootstrap/dropdown/dropdown.styl

@@ -4,7 +4,7 @@
   cursor: default
   outline: none
 
-  ul.dropdown-menu
+  &>ul.dropdown-menu
     display: block
     z-index: 1000
     transform(scale(0))
@@ -35,3 +35,37 @@
 
   &.open ul.dropdown-menu
     transform(scale(1))
+
+
+.dropdown-submenu
+  position: relative
+
+  &>.dropdown-menu
+    top: 0
+    left: 100%
+    margin-top: -6px
+    margin-left: -1px
+    -webkit-border-radius: 0 6px 6px 6px
+    -moz-border-radius: 0 6px 6px 6px
+    border-radius: 0 6px 6px 6px
+
+  &:hover
+
+    &>.dropdown-menu
+      display: block
+
+    &>a:after
+      border-left-color:#FFFFFF
+
+  &>a:after
+    display: block
+    float: right
+    content: " "
+    width: 0
+    height: 0
+    border-color: transparent
+    border-style: solid
+    border-width: 5px 0 5px 5px
+    border-left-color: #CCCCCC
+    margin-top: 5px
+    margin-right: -10px

Packages/ohif-core/client/components/bootstrap/dropdown/form.html

@@ -1,6 +1,11 @@
 <template name="dropdownForm">
     {{#form (extend this mixins='dropdown' class='dropdown' hideValidationBox=true)}}
-        <ul class="dropdown-menu {{this.options.menuClasses}}">
+        {{>dropdownFormMenu items=this.items classes=this.options.menuClasses}}
+    {{/form}}
+</template>
+
+<template name="dropdownFormMenu">
+    <ul class="dropdown-menu {{this.classes}}">
         {{#if UI.contentBlock}}
             {{>UI.contentBlock}}
         {{else}}
@@ -8,7 +13,7 @@
                 {{#if item.separatorBefore}}
                     <li role="separator" class="divider"></li>
                 {{/if}}
-                    <li class="{{#if item.disabled}}disabled{{/if}}">
+                <li class="{{#if item.disabled}}disabled{{/if}} {{#if item.items}}dropdown-submenu{{/if}}">
                     {{#link item}}
                         {{#if item.icon}}
                             <i class="{{item.icon}} {{item.iconClasses}}"></i>
@@ -22,6 +27,9 @@
                             <span>{{item.text}}</span>
                         {{/if}}
                     {{/link}}
+                    {{#if item.items}}
+                        {{>dropdownFormMenu items=item.items}}
+                    {{/if}}
                 </li>
                 {{#if item.separatorAfter}}
                     <li role="separator" class="divider"></li>
@@ -29,5 +37,4 @@
             {{/each}}
         {{/if}}
     </ul>
-    {{/form}}
 </template>