Apply styling

finos · texodus · Oct 20, 2023 · Sep 29, 2023 · Oct 10, 2023 · Oct 11, 2023
commit d5b0f6b131d7996b35ae75864a2a551b05f9be17
diff --git a/packages/perspective-viewer-d3fc/src/js/series/seriesSymbols.js b/packages/perspective-viewer-d3fc/src/js/series/seriesSymbols.js
@@ -12,6 +12,18 @@
 
 import * as d3 from "d3";
 
+const sqrt3 = Math.sqrt(3);
+
+const nabla = {
+    draw: function (context, size) {
+        const y = Math.sqrt(size / (sqrt3 * 3));
+        context.moveTo(0, y * 2);
+        context.lineTo(-sqrt3 * y, -y);
+        context.lineTo(sqrt3 * y, -y);
+        context.closePath();
+    },
+};
+
 export const symbols = [
     d3.symbolCircle,
     d3.symbolCross,
@@ -29,6 +41,7 @@ export const symbolsObj = {
     star: d3.symbolStar,
     triangle: d3.symbolTriangle,
     wye: d3.symbolWye,
+    nabla,
 };
 
 export function fromDomain(domain) {

diff --git a/rust/perspective-viewer/src/less/aggregate-selector.less b/rust/perspective-viewer/src/less/aggregate-selector.less
@@ -35,6 +35,7 @@
             font-size: 10px;
             border-bottom-width: 0px;
             margin-top: 0px;
+            height: 19px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;

diff --git a/rust/perspective-viewer/src/less/column-selector.less b/rust/perspective-viewer/src/less/column-selector.less
@@ -404,6 +404,7 @@
 
     #active-columns,
     #column_settings_sidebar {
+        width: 100%;
         .is_column_active:before {
             @include icon;
         }

diff --git a/rust/perspective-viewer/src/less/column-style.less b/rust/perspective-viewer/src/less/column-style.less
@@ -31,10 +31,24 @@
             background-color: #8b868045;
         }
 
+        .dropdown-width-container {
+            height: 24px;
+            border: 1px solid transparent;
+            border-radius: 2px;
+            padding: 0 8px;
+            border-radius: 2px;
+            border: 1px solid transparent;
+            &:hover {
+                border-color: var(--inactive--color, #666);
+            }
+        }
+
         select {
-            height: auto;
-            padding-bottom: 2px;
-            border-bottom: 1px solid var(--input--border-color, #ccc);
+            font-size: 10px;
+            height: 24px;
+            // padding-bottom: 2px;
+            // border-bottom: 1px solid var(--input--border-color, #ccc);
+            padding: 0 8px;
         }
 
         label {
@@ -75,39 +89,6 @@
             margin-left: 24px;
         }
 
-        input[type="checkbox"],
-        & > div > div > span:first-child {
-            width: 24px;
-            margin: 0;
-        }
-
-        input[type="checkbox"] {
-            float: left;
-            appearance: none;
-
-            &:checked:before {
-                -webkit-mask-image: var(--column-checkbox-on--mask-image);
-                mask-image: var(--column-checkbox-on--mask-image);
-            }
-
-            &[disabled]:before {
-                opacity: 0.2s;
-            }
-
-            &:before {
-                @include icon;
-                height: 13px;
-                width: 13px;
-                -webkit-mask-image: var(--column-checkbox-off--mask-image);
-                mask-image: var(--column-checkbox-off--mask-image);
-            }
-
-            &:hover:before {
-                -webkit-mask-image: var(--column-checkbox-hover--mask-image);
-                mask-image: var(--column-checkbox-hover--mask-image);
-            }
-        }
-
         input[type="radio"] {
             appearance: none;
 
@@ -205,10 +186,6 @@
             opacity: 0.5;
         }
 
-        input[type="checkbox"]:not(:disabled) {
-            cursor: pointer;
-        }
-
         button#datetime_format {
             appearance: none;
             background: none;

diff --git a/rust/perspective-viewer/src/less/column-symbol-attributes.less b/rust/perspective-viewer/src/less/column-symbol-attributes.less
@@ -12,6 +12,7 @@
 
 :host {
     #attributes-symbols {
+        position: relative;
         svg {
             width: 15px;
             height: auto;
@@ -21,35 +22,52 @@
         }
 
         .toggle-mode.is_column_active {
+            margin: 0;
             padding: 0;
         }
 
         .row-selector {
             flex: 1;
-            min-width: 50%;
+            min-width: 0px;
             .column-selector-column-border {
-                min-height: 28px;
+                min-height: 24px;
             }
+
             input.column-empty-input {
-                padding: 0;
+                padding: 0 4px;
                 margin: 0;
                 width: 100%;
             }
+
             .row-selector-errored input {
                 border-color: var(--error--color);
             }
         }
-        .symbol-selector {
-            flex: 1;
-            .selected {
-                width: 100%;
-                .symbol-option {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    width: 100%;
-                }
-            }
+
+        .pairs-list-item .dropdown-width-container {
+            flex: 0 1 75px;
+        }
+
+        &:before {
+            font-size: 9px;
+            left: 0px;
+            padding: var(--column_type--padding, 0px 0px 0px 0px);
+            position: absolute;
+            margin-top: -15px;
+            content: attr(data-label);
+        }
+
+        &.pairs-list[data-label] {
+            margin-top: 24px;
+        }
+
+        .column_name {
+            padding: 0;
+            margin: 0 8px;
+        }
+
+        .symbol-selector-wrapper {
+            width: 75px;
         }
     }
 }
diff --git a/rust/perspective-viewer/src/less/containers/pairs-list.less b/rust/perspective-viewer/src/less/containers/pairs-list.less
@@ -33,8 +33,14 @@
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
-        gap: 16px;
+        gap: 4px;
         width: 100%;
-        margin-bottom: 12px;
+        margin-bottom: 4px;
+
+        &:last-child .is_column_active {
+            opacity: 0.3;
+            cursor: default;
+            pointer-events: none;
+        }
     }
 }
diff --git a/rust/perspective-viewer/src/less/containers/tabs.less b/rust/perspective-viewer/src/less/containers/tabs.less
@@ -65,8 +65,8 @@
             font-size: 12px;
         }
         .tab-section {
-            padding: 1em;
-            border-bottom: 1px solid var(--inactive--border-color);
+            padding: 8px;
+            // border-bottom: 1px solid var(--inactive--border-color);
         }
         .text {
             font-size: 14px;

diff --git a/rust/perspective-viewer/src/less/dom/checkbox.less b/rust/perspective-viewer/src/less/dom/checkbox.less
@@ -20,7 +20,7 @@
 }
 
 :host {
-    input[type="checkbox"] {
+    input[type="checkbox"].alternate {
         appearance: none;
         height: 14px;
         width: 14px;
@@ -56,4 +56,45 @@
             mask-image: var(--active-column-selector--content, none);
         }
     }
+
+    input[type="checkbox"] {
+        float: left;
+        appearance: none;
+        height: 14px;
+        width: 14px;
+        padding: 0px;
+        cursor: pointer;
+        outline: none;
+        margin: 0 5px;
+
+        &:checked:before {
+            -webkit-mask-image: var(--column-checkbox-on--mask-image);
+            mask-image: var(--column-checkbox-on--mask-image);
+        }
+
+        &[disabled]:before {
+            opacity: 0.2s;
+        }
+
+        &:before {
+            @include icon;
+            height: 13px;
+            width: 13px;
+            -webkit-mask-image: var(--column-checkbox-off--mask-image);
+            mask-image: var(--column-checkbox-off--mask-image);
+        }
+
+        &:hover {
+            background-color: transparent;
+        }
+
+        &:hover:before {
+            -webkit-mask-image: var(--column-checkbox-hover--mask-image);
+            mask-image: var(--column-checkbox-hover--mask-image);
+        }
+    }
+
+    input[type="checkbox"]:not(:disabled) {
+        cursor: pointer;
+    }
 }
diff --git a/rust/perspective-viewer/src/less/dom/select.less b/rust/perspective-viewer/src/less/dom/select.less
@@ -25,12 +25,14 @@
 
         select {
             position: absolute;
-            width: 100%;
+            left: 0px;
+            right: 4px;
+            top: 0px;
+            bottom: 0px;
             cursor: pointer;
         }
     }
 
-
     select {
         border-radius: 0;
         border-width: 0px;
@@ -41,14 +43,12 @@
         appearance: none;
         color: inherit;
         padding: 0px 12px 0px 0px;
-        font-size: 12px;
+        font-size: 10px;
         font-family: inherit;
         background-color: var(--select--background-color, transparent);
         background-image: url("../../svg/dropdown-selector.svg");
         background-position: right 2px center;
         background-repeat: no-repeat;
-        // background: var(--select--background,
-        //         url(../../svg/dropdown-selector.svg) no-repeat right 2px center);
 
         option {
             background: var(--select--background-color, transparent);

diff --git a/rust/perspective-viewer/src/less/viewer.less b/rust/perspective-viewer/src/less/viewer.less
@@ -182,10 +182,6 @@
         z-index: 2;
     }
 
-    select {
-        height: 19px;
-    }
-
     #plugin_selector {
         margin-top: 3px;
         border-bottom-width: 1px;

diff --git a/rust/perspective-viewer/src/rust/components/column_selector/aggregate_selector.rs b/rust/perspective-viewer/src/rust/components/column_selector/aggregate_selector.rs
@@ -94,7 +94,7 @@ impl Component for AggregateSelector {
             <LocalStyle href={ css!("aggregate-selector") } />
             <div class="aggregate-selector-wrapper">
                 <Select<Aggregate>
-                    class={ "aggregate-selector" }
+                    wrapper_class={ "aggregate-selector" }
                     values={ values }
                     label="weighted mean"
                     selected={ selected_agg }

diff --git a/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs
@@ -452,6 +452,7 @@ impl Component for FilterColumn {
                 html! {
                     <input
                         type="checkbox"
+                        class="alternate"
                         ref={ noderef.clone() }
                         checked={ self.input == "true" }
                         oninput={ input }/>

diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/attributes_tab.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/attributes_tab.rs
@@ -39,8 +39,8 @@ pub fn AttributesTab(p: &AttributesTabProps) -> Html {
         <div id="attributes-tab">
             if let Some(ty) = p.maybe_ty {
                 <div id="attributes-type" class="tab-section">
-                    <div class="item_title">{"Type"}</div>
-                    <div id="attributes-type-name" class="text">{ty}</div>
+                    <div class="item_title">{ "Type" }</div>
+                    <div id="attributes-type-name" class="text">{ ty }</div>
                 </div>
             }
             <div class="tab-section">

diff --git a/...ve-viewer/src/rust/components/column_settings_sidebar/attributes_tab/expression_editor.rs b/...ve-viewer/src/rust/components/column_settings_sidebar/attributes_tab/expression_editor.rs
@@ -38,6 +38,7 @@ pub fn expression_editor_attr(p: &ExprEditorAttrProps) -> Html {
         match &p.selected_column {
             ColumnLocator::Expr(Some(alias)) => update_expr(alias, &v, p),
             ColumnLocator::Expr(None) => save_expr(v, p),
+
             // TODO: We should be able to create a new expression from the currently selected
             // column if it is not already an expression column.
             _ => panic!("Tried to save a non-expression column as expression!"),