Added a toolbar (accessible via right clicking the config menu) with …

…download, copy and reset buttons
finos · Nov 8, 2018 · ef8ab80 · ef8ab80
1 parent c505cc1
commit ef8ab80
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 11 deletions.
diff --git a/packages/perspective-viewer/src/html/view.html b/packages/perspective-viewer/src/html/view.html
@@ -10,6 +10,11 @@
 <template id="perspective-viewer">
 
     <div id="app">
+        <div id="menubar">
+            <div id="copy_button" class="noselect button"></div>
+            <div id="download_button" class="noselect button"></div>
+            <div id="reset_button" class="noselect button"></div>
+        </div>
         <div id='side_panel' class="column fixed noselect">
             <div id="vis_selector_container">
                 <select id="vis_selector">
@@ -73,7 +78,7 @@
             </div>
         </div>
 
-        <div id="config_button" class="noselect"></div>
+        <div id="config_button" class="noselect button"></div>
 
         <div id='drop_target'>
             <div id='drop_target_inner'>

diff --git a/packages/perspective-viewer/src/js/view/ViewPrivate.js b/packages/perspective-viewer/src/js/view/ViewPrivate.js
@@ -440,6 +440,18 @@ export class ViewPrivate extends HTMLElement {
         }
     }
 
+    // UI action
+    _show_context_menu(event) {
+        this.shadowRoot.querySelector("#app").classList.toggle("show_menu");
+        event.stopPropagation();
+        event.preventDefault();
+        return false;
+    }
+
+    _hide_context_menu() {
+        this.shadowRoot.querySelector("#app").classList.remove("show_menu");
+    }
+
     // UI action
     _toggle_config() {
         if (this._show_config) {
@@ -453,6 +465,7 @@ export class ViewPrivate extends HTMLElement {
         }
         this._show_config = !this._show_config;
         this._plugin.resize.call(this, true);
+        this._hide_context_menu();
         this.dispatchEvent(new CustomEvent("perspective-toggle-settings", {detail: this._show_config}));
     }
 
@@ -698,6 +711,9 @@ export class ViewPrivate extends HTMLElement {
         this._inner_drop_target = this.shadowRoot.querySelector("#drop_target_inner");
         this._drop_target = this.shadowRoot.querySelector("#drop_target");
         this._config_button = this.shadowRoot.querySelector("#config_button");
+        this._reset_button = this.shadowRoot.querySelector("#reset_button");
+        this._download_button = this.shadowRoot.querySelector("#download_button");
+        this._copy_button = this.shadowRoot.querySelector("#copy_button");
         this._side_panel = this.shadowRoot.querySelector("#side_panel");
         this._top_panel = this.shadowRoot.querySelector("#top_panel");
         this._sort = this.shadowRoot.querySelector("#sort");
@@ -739,6 +755,10 @@ export class ViewPrivate extends HTMLElement {
         this._computed_column.addEventListener("perspective-computed-column-update", this._set_computed_column_input.bind(this));
         //this._side_panel.addEventListener('perspective-computed-column-edit', this._open_computed_column.bind(this));
         this._config_button.addEventListener("click", this._toggle_config.bind(this));
+        this._config_button.addEventListener("contextmenu", this._show_context_menu.bind(this));
+        this._reset_button.addEventListener("click", this.reset.bind(this));
+        this._copy_button.addEventListener("click", event => this.copy(event.shiftKey));
+        this._download_button.addEventListener("click", event => this.download(event.shiftKey));
         this._transpose_button.addEventListener("click", this._transpose.bind(this));
         this._drop_target.addEventListener("dragover", allow_drop.bind(this));
 

diff --git a/packages/perspective-viewer/src/less/default.less b/packages/perspective-viewer/src/less/default.less
@@ -353,11 +353,14 @@
         font-weight: 300;
     }
 
-    #config_button {
+    #config_button,
+    #reset_button,
+    #download_button,
+    #copy_button {
         font-weight: normal;
-        font-family: var(--config_button--font-family, Arial);
-        color: var(--config_button--color, inherit);
-        font-size: var(--config_button--font-size, 16px);
+        font-family: var(--button--font-family, Arial);
+        color: var(--button--color, inherit);
+        font-size: var(--button--font-size, 16px);
         color: #999;
         transition: opacity 0.3s;
         overflow: hidden;
@@ -368,6 +371,31 @@
         content: var(--config_button--before, "\1f527");
     }
 
+    #reset_button:before {
+        font-feature-settings: "liga";
+        content: var(--reset_button--before, "Reset");
+    }
+
+    #download_button:before {
+        font-feature-settings: "liga";
+        content: var(--download_button--before, "Save");
+    }
+
+    #copy_button:before {
+        font-feature-settings: "liga";
+        content: var(--copy_button--before, "Copy");
+    }
+
+    #menubar {
+        display: none;
+        flex-direction: column;
+        padding-top: 55px;
+    }
+
+    #app.show_menu #menubar {
+        display: flex;
+    }
+
     ul {
         .bordered();
         font-size: 12px;

diff --git a/packages/perspective-viewer/src/less/material.less b/packages/perspective-viewer/src/less/material.less
@@ -26,7 +26,11 @@ perspective-viewer {
     --active-columns--justify-content: space-evenly;
 
     --config_button--before: "more_vert";
-    --config_button--font-family: "Material Icons";
+    --button--font-family: "Material Icons";
+
+    --copy_button--before: "file_copy";
+    --download_button--before: "save_alt";
+    --reset_button--before: "refresh";
 
     --row_pivots--before: "Group By";
     --column_pivots--before: "Split By";
@@ -54,8 +58,8 @@ perspective-viewer {
 
     --hypergrid--padding: 24px;
     --side_panel--padding: 24px 24px 24px 17px;
-    --config_button--padding: 24px 0px 0px 15px;
-    --config_button--font-size: 16px;
+    --button--padding: 24px 17px 0px 17px;
+    --button--font-size: 16px;
 
     --top_panel--padding: 0px 0px 24px 0px;
 }
diff --git a/packages/perspective-viewer/src/less/view.less b/packages/perspective-viewer/src/less/view.less
@@ -15,11 +15,14 @@
 }
 
 #config_button {
-    padding: var(--config_button--padding, 12px 0px 0px 8px);
     background: none;
     opacity: 1 !important;
 }
 
+.button {
+    padding: var(--button--padding, 12px 14px 24px 8px);
+}
+
 [settings="true"] #config_button {
     opacity: 1 !important;
 }
@@ -248,13 +251,15 @@
         position: absolute;
         top: 0;
         left: 0;
-        font-weight: normal;
-        font-size: 16px;
         opacity: 0;
         display: flex;
         align-items: center;
         justify-content: center;
+    }
+    .button {
         cursor: pointer;
+        font-size: 16px;
+        font-weight: normal;
     }
     ul {
         padding: 0px;