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,33 +1,40 @@
 <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}}
-            {{#if UI.contentBlock}}
-                {{>UI.contentBlock}}
-            {{else}}
-                {{#each item in this.items}}
-                    {{#if item.separatorBefore}}
-                        <li role="separator" class="divider"></li>
-                    {{/if}}
-                    <li class="{{#if item.disabled}}disabled{{/if}}">
-                        {{#link item}}
-                            {{#if item.icon}}
-                                <i class="{{item.icon}} {{item.iconClasses}}"></i>
-                            {{/if}}
-                            {{#if item.iconSvgUse}}
-                                <svg class="{{item.iconClasses}}">
-                                    <use xlink:href={{absoluteUrl item.iconSvgUse}}></use>
-                                </svg>
-                            {{/if}}
-                            {{#if item.text}}
-                                <span>{{item.text}}</span>
-                            {{/if}}
-                        {{/link}}
-                    </li>
-                    {{#if item.separatorAfter}}
-                        <li role="separator" class="divider"></li>
-                    {{/if}}
-                {{/each}}
-            {{/if}}
-        </ul>
     {{/form}}
 </template>
+
+<template name="dropdownFormMenu">
+    <ul class="dropdown-menu {{this.classes}}">
+        {{#if UI.contentBlock}}
+            {{>UI.contentBlock}}
+        {{else}}
+            {{#each item in this.items}}
+                {{#if item.separatorBefore}}
+                    <li role="separator" class="divider"></li>
+                {{/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>
+                        {{/if}}
+                        {{#if item.iconSvgUse}}
+                            <svg class="{{item.iconClasses}}">
+                                <use xlink:href={{absoluteUrl item.iconSvgUse}}></use>
+                            </svg>
+                        {{/if}}
+                        {{#if item.text}}
+                            <span>{{item.text}}</span>
+                        {{/if}}
+                    {{/link}}
+                    {{#if item.items}}
+                        {{>dropdownFormMenu items=item.items}}
+                    {{/if}}
+                </li>
+                {{#if item.separatorAfter}}
+                    <li role="separator" class="divider"></li>
+                {{/if}}
+            {{/each}}
+        {{/if}}
+    </ul>
+</template>