Settings, tab ruler, asm tab stops, keyboard shortcuts, Shift-Alt-f reformatting #229

css/ui.css

@@ -880,6 +880,38 @@ div.scripting-cell button:hover {
 div.scripting-cell button.scripting-enabled {
   background-color: #339999;
 }
+#settingsForm h5:not(:first-child) {
+  margin-top: 24px;
+}
 .dialog-help {
   color: #6666ff;
-}
+}
+#settingsForm label {
+  font-weight: normal;
+}
+#settingsForm label.main {
+  font-weight: bold;
+  margin-right: 4px;
+}
+#settingsForm .tab-stops .tab-stop {
+  margin-left: 0.5em;
+}
+#settingsForm .tab-stops input[type="text"] {
+  width: 2em;
+}
+#settingsForm .disabled {
+  opacity: 0.5;
+}
+.help th {
+  padding-top: 8px;
+}
+.help td {
+  vertical-align: top;
+  padding: 0 6px;
+}
+.help td:first-child {
+  text-align: right;
+  padding-right: 12px;
+  padding-bottom: 2px;
+  min-width: 160px;
+}

index.html

@@ -117,6 +117,8 @@
         <a tabindex="-1" href="javascript:void(0)">Help</a>
         <ul class="dropdown-menu" id="help_menu">
           <li><a class="dropdown-item" target="_8bws_help" href="https://8bitworkshop.com/docs/docs/ide.html">IDE Help</a></li>
+          <li><a class="dropdown-item" href="javascript:void(0)" id="item_keyboard_shortcuts">Keyboard Shortcuts</a></li>
+          <li><a class="dropdown-item" href="javascript:void(0)" id="item_asset_editor_help">Asset Editor Reference</a></li>
         </ul>
       </li>
       <li class="dropdown dropdown-submenu">
@@ -562,7 +564,9 @@ <h3 class="modal-title">Push Project Changes to GitHub</h3>
 <script>
 // submenus open on click + hover
 $( ".dropdown-submenu" ).click(function(event) {
-    event.stopPropagation();
+    if (!$(event.target).hasClass('dropdown-item')) {
+      event.stopPropagation();
+    }
     $(this).parent().siblings().removeClass('open');
     $(this).parent().toggleClass('open');
 });