Styling hotkeys form

Packages/ohif-design/styles/common/global.styl

@@ -62,6 +62,9 @@ label.form-group
 .height-auto
   height: auto !important
 
+.full-width
+  width: 100%
+
 .caret-down
   display: inline-block
   width: 0

Packages/ohif-hotkeys/client/components/form.html

@@ -1,9 +1,16 @@
 <template name="hotkeysForm">
     {{#form (extend this api=instance.api)}}
         <div class="form-content">
-            {{#each hotkeyInputInformation in getHotkeyInputInformationList}}
-                {{>inputText (extend hotkeyInputInformation class='hotkey')}}
-            {{/each}}
+            {{#let lists=getHotkeyInputInformationLists}}
+                <div class="row">
+                    <div class="col-lg-6">
+                        {{>hotkeysFormTable inputs=lists.left}}
+                    </div>
+                    <div class="col-lg-6">
+                        {{>hotkeysFormTable inputs=lists.right}}
+                    </div>
+                </div>
+            {{/let}}
         </div>
         <div class="form-buttons clearfix">
             {{#button class='btn btn-danger pull-left m-r-1' action='resetDefaults'}}Reset to Defaults{{/button}}
@@ -11,3 +18,22 @@
         </div>
     {{/form}}
 </template>
+
+<template name="hotkeysFormTable">
+    <table class="full-width">
+        <thead>
+            <tr>
+                <th class="text-right p-r-1">Function</th>
+                <th>Shortcut</th>
+            </tr>
+        </thead>
+        <tbody>
+            {{#each input in this.inputs}}
+                <tr>
+                    <td class="text-right p-r-1">{{input.label}}</td>
+                    <td width="200">{{>inputText (extend class='hotkey text-center' key=input.key value=input.value)}}</td>
+                </tr>
+            {{/each}}
+        </tbody>
+    </table>
+</template>

Packages/ohif-hotkeys/client/components/form.js

@@ -106,25 +106,35 @@ Template.hotkeysForm.events({
 });
 
 Template.hotkeysForm.helpers({
-    getHotkeyInputInformationList() {
+    getHotkeyInputInformationLists() {
         OHIF.hotkeys.changeObserver.depend();
+
         const instance = Template.instance();
         const { contextName } = instance.data;
-        const hotkeysInputInformation = [];
+
         const hotkeysContext = OHIF.hotkeys.getContext(contextName);
         const commandsContext = OHIF.commands.getContext(contextName);
-        if (!hotkeysContext || !commandsContext) return hotkeysInputInformation;
+        if (!hotkeysContext || !commandsContext) return {};
+
         const hotkeyDefinitions = hotkeysContext.definitions;
         const commands = Object.keys(OHIF.hotkeys.defaults[contextName] || {});
+        const list = [];
         commands.forEach(commandName => {
             const commandDefinitions = commandsContext[commandName];
             if (!commandDefinitions) return;
-            hotkeysInputInformation.push({
+            list.push({
                 key: commandName,
                 label: commandDefinitions.name,
                 value: hotkeyDefinitions[commandName] || ''
             });
         });
-        return hotkeysInputInformation;
+
+        const left = list.splice(0, Math.ceil(list.length / 2));
+        const right = list;
+
+        return {
+          left,
+          right
+        };
     }
 });