Refactor and add tests

finos · texodus · May 6, 2021 · May 3, 2021 · May 2, 2021 · May 6, 2021
commit 09eac49d97677378ba151c665afa0d80babdde60
diff --git a/.gitignore b/.gitignore
@@ -181,3 +181,4 @@ docs/static/css/material.dark.css
 docs/i18n/en.json
 docs/static/js
 
+rust/perspective-vieux/target.vscode
diff --git a/packages/perspective-viewer/src/themes/material-dense.dark.less b/packages/perspective-viewer/src/themes/material-dense.dark.less
@@ -25,9 +25,11 @@
 
 perspective-column-style {
     background-color: @grey700;
-    color: @grey60;
+    color: #FFFFFF;
     border: 1px solid @grey500;
     --input--border-color: @grey500;
+    --active-color: #2770a9;
+    --inactive-color: @grey500;
 }
 
 perspective-viewer, .perspective-viewer-material-dense-dark{

diff --git a/packages/perspective-viewer/src/themes/material-dense.less b/packages/perspective-viewer/src/themes/material-dense.less
@@ -28,6 +28,7 @@ perspective-column-style {
    color: #161616;
    border: 1px solid #E0E4E9;
    --input--border-color: #E0E4E9;
+   --active-color: @blue500;
 }
 
 perspective-viewer, .perspective-viewer-material-dense {

diff --git a/packages/perspective-viewer/src/themes/material.dark.less b/packages/perspective-viewer/src/themes/material.dark.less
@@ -13,9 +13,11 @@
 
 perspective-column-style {
     background-color: @grey700;
-    color: @grey60;
+    color: #FFFFFF;
     border: 1px solid @grey500;
     --input--border-color: @grey500;
+    --active-color: #2770a9;
+    --inactive-color: @grey500;
 }
 
 perspective-viewer, .perspective-viewer-material-dark {

diff --git a/packages/perspective-viewer/src/themes/material.less b/packages/perspective-viewer/src/themes/material.less
@@ -20,6 +20,7 @@ perspective-column-style {
     color: #161616;
     border: 1px solid #E0E4E9;
     --input--border-color: #E0E4E9;
+    --active-color: @blue500;
 }
 
 .perspective-viewer-material-base() {

diff --git a/packages/perspective-workspace/src/theme/material.dark.less b/packages/perspective-workspace/src/theme/material.dark.less
@@ -27,9 +27,11 @@ perspective-viewer.workspace-master-widget {
 
 perspective-column-style {
     background-color: @grey700;
-    color: @grey60;
+    color: #FFFFFF;
     border: 1px solid @grey500;
     --input--border-color: @grey500;
+    --active-color: #2770a9;
+    --inactive-color: @grey500;
 }
 
 .p-Menu {

diff --git a/packages/perspective-workspace/src/theme/material.less b/packages/perspective-workspace/src/theme/material.less
@@ -27,6 +27,7 @@ perspective-column-style {
     color: #161616;
     border: 1px solid #E0E4E9;
     --input--border-color: #E0E4E9;
+    --active-color: @blue500;
 }
 
 .perspective-workspace-material-base() {

diff --git a/rust/perspective-vieux/Cargo.lock b/rust/perspective-vieux/Cargo.lock
diff --git a/rust/perspective-vieux/Cargo.toml b/rust/perspective-vieux/Cargo.toml
@@ -9,7 +9,7 @@ license = "Apache-2.0"
 
 [lib]
 crate-type = ["cdylib", "rlib"]
-path = "src/rust/vieux.rs"
+path = "src/rust/lib.rs"
 
 [features]
 default = ["wee_alloc", "console_error_panic_hook"]
@@ -21,7 +21,7 @@ num-format = "0.4.0"
 serde = { version = "1.0", features = ["derive"] }
 wasm-bindgen = { version = "0.2.63" , features = ["serde-serialize"] }
 wasm-bindgen-futures = "0.4.20"
-yew = { git = "https://github.com/yewstack/yew", rev = "b074b4b" } # "0.17.4"
+yew = { git = "https://github.com/yewstack/yew", rev = "c51ab7f" } # "0.17.4"
 
 # The `console_error_panic_hook` crate provides better debugging of panics by
 # logging them with `console.error`. This is great for development, but requires

diff --git a/rust/perspective-vieux/src/less/column-style.less b/rust/perspective-vieux/src/less/column-style.less
@@ -7,7 +7,9 @@
  *
  */
 
- :host {
+ @import "./radio-list.less";
+
+:host {
     position: absolute;
     z-index: 10000;
     padding: 6px;
@@ -24,26 +26,75 @@
         background: none;
         color: inherit;
         border: 0px solid transparent;
+        outline: none;
+    }
+
+    input.parameter[type=number] {
         border-bottom-width: 1px;
         border-color: var(--input--border-color);
-        outline: none;
     }
 
-    input[type=radio], input[type=checkbox], & > div > div > span:first-child {
+    .indent {
+        margin-left: 24px;
+    }
+
+    input[type=checkbox], & > div > div > span:first-child {
         width: 24px;
         margin: 0;
     }
 
-    & > div > div {
-        display: flex;
-        align-items: center;
-        height: 24px;
+    input[type=checkbox] {
+        appearance: none;
+        font-family: "Material Icons";
+        font-size: 16px;
+        text-align: center;
+
+        &:checked:after {
+            content: "\E834";
+        }
+
+        &:not([disabled]):checked:after {
+            color: var(--active-color, red);
+        }
+
+        &:after {
+            content: "\E835";
+            color: var(--inactive-color, #999);
+        }
     }
 
+
+
+    input[type=radio] {
+        appearance: none;
+        font-family: "Material Icons";
+        font-size: 16px;
+        font-feature-settings: "liga";
+        text-align: center;
+
+        &:checked:after {
+            content: "radio_button_checked";
+            color: var(--active-color, red);
+        }
+
+        &:after {
+            content: "radio_button_unchecked";
+            color: var(--inactive-color, #999);
+        }
+    }
+
+
+
     div.section {
         margin-bottom: 8px;
     }
 
+    div.row {
+        display: flex;
+        align-items: center;
+        height: 24px;
+    }
+
     input[type=color] {
         width: 24px;
     }
@@ -56,8 +107,4 @@
     input.parameter[disabled] {
         opacity: 0.5;
     }
-
-    .indent1 {
-        margin-left: 24px;
-    }
 }
diff --git a/rust/perspective-vieux/src/less/radio-list.less b/rust/perspective-vieux/src/less/radio-list.less
@@ -0,0 +1,29 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms
+ * of the Apache License 2.0.  The full license can be found in the LICENSE
+ * file.
+ *
+ */
+
+ :host {
+
+    .radio-list-item {
+        display: flex;
+        align-items: center;
+        height: 24px;
+
+        // Fix radio buttons 
+        input[type=radio] {
+            width: 24px;
+            margin: 0;
+        }
+
+        input[type=radio][disabled] ~ * {
+            opacity: 0.5;
+        }
+    }
+
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -181,3 +181,4 @@ docs/static/css/material.dark.css
		docs/i18n/en.json
		docs/static/js

		rust/perspective-vieux/target.vscode