[feature] Settings panel UI.

A standard popup panel with checkboxes and links to GitHub and Zulip.

The settings currently don't do anything.

ui-css/coq-base.css

@@ -335,8 +335,8 @@ body.jscoq-main .CodeMirror-linenumber {
 
 #toolbar .exits.right {
   position: absolute;
-  top: 4px;
-  right: 4px;
+  top: 0px;
+  right: 0px;
   transition: opacity 620ms ease-in;
 }
 
@@ -345,16 +345,59 @@ body.jscoq-main .CodeMirror-linenumber {
   transition: opacity 120ms linear;
 }
 
+#toolbar svg.app-menu-button {
+  height: 36px;
+  fill: #ccc;
+}
+#toolbar svg.app-menu-button:hover {
+  fill: #777;
+  background-color: #f2f6f2;
+}
+#toolbar svg.app-menu-button.active {
+  background-color: #676b67;
+  fill: #f2f6f2;
+}
+#toolbar svg.app-menu-button.active:hover {
+  background-color: #757a75;
+  fill: #f2f6f2;
+}
+
+div.settings-panel {
+  position: absolute;
+  right: 0;
+  top: 35px;
+  z-index: 99;
+  background: white;
+  border: 1px solid black;
+  min-width: 200px;
+  padding: .75em .75em .2em .75em;
+}
+
+div.settings-panel div.setting {
+  line-height: 1.75em;
+}
+
+div.settings-panel input.switch {
+  float: right;
+  height: 1.75em;
+  margin: 0;
+}
+
+div.settings-panel div.links {
+  margin-top: .2em;
+  text-align: right;
+}
+
 .link-to-github {
   word-spacing: -2px; /* aren't we picky */
 }
 
-.link-to-github::after {
+.link-to-github::after,
+.link-to-zulip::after {
   content: "";
   display: inline-block;
   height: 25px;
   width: 25px;
-  background: url(../ui-images/github.png);
   background-size: 25px 25px;
   background-repeat: no-repeat;
   vertical-align: middle;
@@ -363,6 +406,17 @@ body.jscoq-main .CodeMirror-linenumber {
   box-sizing: content-box;
 }
 
+.link-to-github::after {
+  background-image: url(../ui-images/github.png);
+}
+
+.link-to-zulip::after {
+  background-image: url(../ui-images/zulip-logo.png);
+  background-size: 20px 22px;
+  background-position: 3px 2px;
+  width: 23px;
+}
+
 #buttons {
   display: inline-block;
   text-align: left;

ui-js/coq-layout-classic.js

@@ -47,7 +47,11 @@ class CoqLayoutClassic {
         <button name="reset"       alt="Reset worker"               title="Reset worker"></button>
       </span>
       <div class="exits right">
-        <a href="https://github.com/jscoq/jscoq" class="link-to-github"></a>
+        <svg class="app-menu-button" viewBox="0 0 80 80">
+            <circle cx="40" cy="24" r="5"></circle>
+            <circle cx="40" cy="40" r="5"></circle>
+            <circle cx="40" cy="56" r="5"></circle>
+        </svg>    
       </div> <!-- /.exits -->
     </div> <!-- /#toolbar -->
     <div class="flex-container">
@@ -107,6 +111,8 @@ class CoqLayoutClassic {
         this.query    = this.panel.querySelector('#query-panel');
         this.packages = this.panel.querySelector('#packages-panel');
         this.buttons  = this.panel.querySelector('#buttons');
+        this.menubtn  = this.panel.querySelector('.app-menu-button');
+        this.settings = new SettingsPanel();
 
         var flex_container = this.panel.getElementsByClassName('flex-container')[0];
         flex_container.addEventListener('click', evt => { this.panelClickHandler(evt); });
@@ -120,10 +126,13 @@ class CoqLayoutClassic {
         this.onAction = evt => {};
         this.buttons.addEventListener('click', evt => this.onAction(evt));
 
+        this.menubtn.addEventListener('click', () =>
+            this.menubtn.classList.toggle('active', this.settings.toggle()));
+
         // Configure log
         this.log_levels = ['Error', 'Warning', 'Notice', 'Info', 'Debug']
         $(this.panel).find('select[name=msg_filter]')
-            .change(ev => this.filterLog(parseInt(ev.target.value)));
+            .on('change', ev => this.filterLog(parseInt(ev.target.value)));
         this.filterLog(3); // Info
 
         this._preloadImages();

ui-js/jscoq-loader.js

@@ -81,6 +81,7 @@ var loadJsCoq, JsCoq;
                      base_path + 'ui-js/addon/company-coq',
                      base_path + 'ui-js/cm-provider',
                      base_path + 'ui-js/format-pprint',
+                     base_path + 'ui-js/settings',
                      base_path + 'ui-js/coq-packages',
                      base_path + 'ui-js/coq-layout-classic',
                      base_path + 'ui-js/coq-manager'];

ui-js/settings.js

+
+class SettingsPanel {
+    html() {
+        return `
+        <div class="settings-panel">
+            <div>
+                <label for="settings--theme">
+                    <div class="setting">
+                        Light switch</label>
+                        <input id="settings--theme" type="checkbox" class="switch">
+                    </div>
+                </label>
+                <label for="settings--company">
+                    <div class="setting">
+                        Enable company-coq
+                        <input id="settings--company" type="checkbox" class="switch">
+                    </div>
+                </label>
+            </div>
+            <div class="links">
+                <a href="https://coq.zulipchat.com/#narrow/stream/256336-jsCoq" title="Zulip" class="link-to-zulip"></a>
+                <a href="https://github.com/jscoq/jscoq" title="GitHub" class="link-to-github"></a>
+            </div>
+        </div>
+        `;
+    }
+
+    constructor() {
+        this.el = $(this.html());
+    }
+
+    show() {
+        $(document.body).append(this.el);
+    }
+
+    hide() {
+        this.el.remove();
+    }
+
+    toggle() {
+        if (this.isShown()) this.hide();
+        else this.show();
+        return this.isShown();
+    }
+
+    isShown() {
+        return this.el.parent().length > 0;
+    }
+}
\ No newline at end of file