Styled action table, fixed callback function not returning proper action index

js/lib/libghettoui/settings/ActionItem.js

@@ -11,24 +11,34 @@ class ActionItem extends BaseElement {
     this.element.innerHTML = `
       <td class="cmd monospace">${cmd}</td>
       <td class="label">${action.label ? action.label : ""}</td>
-      <td class="shortcut">${action.parsedShortcut ? action.parsedShortcut : ""}</td>
+      <td class="shortcut center-text">${action.parsedShortcut ? action.parsedShortcut : ""}</td>
-      <td class="checkbox">
+      <td class="center-text">
-        <input type="checkbox" disabled ${
+        <div class="checkbox-container">
-          action.shortcut && action.shortcut.length && (action.shortcut[0].onMouseMove || action.shortcut[0].onClick || action.shortcut[0].onScroll)  ?
+          <span class="checkbox ${
-          "checked" : ""
+            action.shortcut && action.shortcut.length && (action.shortcut[0].onMouseMove || action.shortcut[0].onClick || action.shortcut[0].onScroll)  ?
-        }>
+            "checkbox-checked" : ""
+          }"></span>
+        </div>
       </td>
-      <td class="checkbox">
+      <td class="center-text">
-        <input type="checkbox" disabled ${action.popup_global ? "checked" : ""}>
+        <div class="checkbox-container">
+          <span class="checkbox ${action.popup_global ? "checkbox-checked" : ""}"></span>
+        </div>
       </td>
-      <td class="checkbox">
+      <td class="center-text">
-        <input type="checkbox" disabled ${action.popup_site ? "checked" : ""}>
+        <div class="checkbox-container">
+          <span class="checkbox ${action.popup_site ? "checkbox-checked" : ""}"></span>
+          </div>
+        </td>
+      <td class="center-text">
+        <div class="checkbox-container">
+          <span class="checkbox ${action.popup ? "checkbox-checked" : ""}"></span>
+        </div>
       </td>
-      <td class="checkbox">
+      <td class="center-text">
-        <input type="checkbox" disabled ${action.popup_ ? "checked" : ""}>
+        <div class="checkbox-container">
-      </td>
+          <span class="checkbox ${action.ui ? "checkbox-checked" : ""}"></span>
-      <td class="checkbox">
+        </div>
-        <input type="checkbox" disabled ${action.ui ? "checked" : ""}>
       </td>
       <td>${action.ui_path ? action.ui_path : ""}</td>
     `;

res/settings/css/settings.css

@@ -6,7 +6,7 @@ body {
   background-size: 75px;
   background-color: #000000;
   color: #ddd;
-  font-family: 'overpass', serif;
+  font-family: 'Overpass', sans-serif;
   font-size: 1.2em;
   width: 100%;
   border: 0px;
@@ -163,6 +163,14 @@ input[type=text]{
   height: 1.7em;
 }
 
+.monospace {
+  font-family: 'Overpass Mono', monospace
+}
+
+.center-text {
+  text-align: center;
+}
+
 /** site options css **/
 .site_name {
   padding-left: 1em;
@@ -199,4 +207,66 @@ input[type=text]{
 }
 .inline_button:hover {
   color: #fff;
-}
+}
+
+.checkbox-center {
+  text-align: center;
+}
+
+
+.checkbox-container {
+  display: inline-block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 12px;
+  /* cursor: pointer; */
+  font-size: 22px;
+  /* -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; */
+}
+
+.checkbox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 25px;
+  width: 25px;
+}
+
+.checkbox-checked {
+  position: absolute;
+  left: 9px;
+  top: 5px;
+  width: 5px;
+  height: 10px;
+  border: solid rgb(245, 145, 63);
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+}
+
+/* ACTION TABLE STYLES */
+
+.action-item-category-label {
+  color: rgb(245, 145, 63);
+  font-size: 2em;
+  font-weight: 200;
+  margin-bottom: 0px;
+  padding-bottom: 0px;
+  padding-top: 1em;
+}
+
+.action-item-table-header {
+  color: rgb(245, 145, 63);
+}
+
+.action-item-table-header-small {
+  color: rgb(245, 145, 63);
+  font-size: 0.85em !important;
+  font-weight: 300 !important;
+}
+
+.action-list-item:hover {
+  background-color: rgba(254, 146, 63, 0.15);
+}

res/settings/js/customization.js

@@ -60,11 +60,11 @@ function loadSectionHeader(title) {
 }
 
 function loadActionSection(actions, container) {
-  for(action of actions) {
+  for(const action of actions) {
     if (action.shortcut && action.shortcut[0].key) {
       action.parsedShortcut = KeyboardShortcutParser.parseShortcut(action.shortcut[0])
     }
-    var actionIndex = settings.active.actions.indexOf(action);
+    const actionIndex = settings.active.actions.indexOf(action);
     var newAction = new ActionItem(
       undefined,
       action,