From d4074fffdb06ad1971b815780e75740282dcd74a Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Mon, 29 Jun 2020 21:46:26 +0100
Subject: [PATCH] added a scrollbar to the command line

---
 public/css/style.scss    |  3 ++
 public/js/commandline.js | 63 +++++++++++++++++++++-------------------
 2 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index b2fd0ed32..516732135 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -322,6 +322,9 @@ a:hover {
       line-height: 0.75rem;
     }
     .suggestions {
+      display: block;
+      overflow-y: scroll;
+      max-height: calc(100vh - 10rem - 3rem);
       display: grid;
       .entry {
         padding: 0.5rem 1rem;
diff --git a/public/js/commandline.js b/public/js/commandline.js
index bc99b3865..de5e193c9 100644
--- a/public/js/commandline.js
+++ b/public/js/commandline.js
@@ -13,6 +13,33 @@ let commands = {
                 restartTest();
             }
         },
+        {
+            id: "changeMode",
+            display: "Change mode...",
+            subgroup: true,
+            exec: () => {
+                currentCommands.push(commandsMode);
+                showCommandLine();
+            }
+        },
+        {
+            id: "changeTimeConfig",
+            display: "Change time config...",
+            subgroup: true,
+            exec: () => {
+                currentCommands.push(commandsTimeConfig);
+                showCommandLine();
+            }
+        },
+        {
+            id: "changeWordCount",
+            display: "Change word count...",
+            subgroup: true,
+            exec: () => {
+                currentCommands.push(commandsWordCount);
+                showCommandLine();
+            }
+        },
         {
             visible: false,
             id: "changeTags",
@@ -98,7 +125,7 @@ let commands = {
         },
         {
             id: "toggleColorfulMode",
-            display: "Toggle extra test color",
+            display: "Toggle colorful mode",
             exec: () => {
                 toggleColorfulMode();
             }
@@ -114,7 +141,7 @@ let commands = {
         },
         {
             id: "changeCaretStyle",
-            display: "Change caret...",
+            display: "Change caret style...",
             subgroup: true,
             exec: () => {
                 currentCommands.push(commandsCaretStyle);
@@ -123,7 +150,7 @@ let commands = {
         },
         {
             id: "changeTimerStyle",
-            display: "Change timer...",
+            display: "Change timer style...",
             subgroup: true,
             exec: () => {
                 currentCommands.push(commandsTimerStyle);
@@ -166,33 +193,6 @@ let commands = {
                 showCommandLine();
             }
         },
-        {
-            id: "changeMode",
-            display: "Change mode...",
-            subgroup: true,
-            exec: () => {
-                currentCommands.push(commandsMode);
-                showCommandLine();
-            }
-        },
-        {
-            id: "changeTimeConfig",
-            display: "Change time config...",
-            subgroup: true,
-            exec: () => {
-                currentCommands.push(commandsTimeConfig);
-                showCommandLine();
-            }
-        },
-        {
-            id: "changeWordCount",
-            display: "Change word count...",
-            subgroup: true,
-            exec: () => {
-                currentCommands.push(commandsWordCount);
-                showCommandLine();
-            }
-        },
         {
             id: "joinDiscord",
             display: "Join the Discord server",
@@ -700,6 +700,9 @@ $(document).keydown((e) => {
                     hoverId = $(entries[activenum]).attr('command');
                 }
             }
+            let scroll = Math.abs($('.suggestions').offset().top - $('.entry.activeKeyboard').offset().top - $('.suggestions').scrollTop()) - ($('.suggestions').outerHeight() / 2) + ($($('.entry')[0]).outerHeight());
+            $('.suggestions').scrollTop(scroll);
+            console.log(`scrolling to ${scroll}`);
             try {
                 let list = currentCommands[currentCommands.length-1];
                 $.each(list.list, (index, obj) => {