From e5d6b670f33a223799b298ca3bd1d4720bfd32f3 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 3 May 2017 09:20:00 -0300
Subject: [PATCH] Styling hotkeys form

---
 .../ohif-design/styles/common/global.styl     |  3 ++
 .../ohif-hotkeys/client/components/form.html  | 32 +++++++++++++++++--
 .../ohif-hotkeys/client/components/form.js    | 20 +++++++++---
 3 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/Packages/ohif-design/styles/common/global.styl b/Packages/ohif-design/styles/common/global.styl
index 8b4817b27..abdc97ae8 100644
--- a/Packages/ohif-design/styles/common/global.styl
+++ b/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
diff --git a/Packages/ohif-hotkeys/client/components/form.html b/Packages/ohif-hotkeys/client/components/form.html
index 22d80b3e1..439f73c94 100644
--- a/Packages/ohif-hotkeys/client/components/form.html
+++ b/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>
diff --git a/Packages/ohif-hotkeys/client/components/form.js b/Packages/ohif-hotkeys/client/components/form.js
index b1796bce0..0aa8c4856 100644
--- a/Packages/ohif-hotkeys/client/components/form.js
+++ b/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
+        };
     }
 });