tune style

lineupjs · Apr 7, 2020 · ae7a445 · ae7a445
1 parent 025842a
commit ae7a445
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 24 deletions.
diff --git a/src/styles/_mappingeditor.scss b/src/styles/_mappingeditor.scss
@@ -19,7 +19,6 @@
 }
 
 div.#{$lu_css_prefix}-dialog-mapper-script {
-  margin-top: 1em;
   display: none;
 
   textarea {
@@ -30,37 +29,50 @@ div.#{$lu_css_prefix}-dialog-mapper-script {
   }
 }
 
+.#{$lu_css_prefix}-dialog-mapper-domain,
+.#{$lu_css_prefix}-dialog-mapper-range {
+  transform: translate(0, 10px);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 14px;
+  border: 3px solid $lu_mapping_box;
+  padding: 0.4em 2px;
+  text-align: center;
+}
+
+.#{$lu_css_prefix}-dialog-mapper-range {
+  transform: translate(0, -10px);
+  justify-content: space-around;
+}
+
 svg.#{$lu_css_prefix}-dialog-mapper-details {
   shape-rendering: geometricprecision;
+  z-index: 1;
   height: 25em * 6 / 10;
+  background: transparent;
 
   rect {
     fill: transparent;
     stroke: none;
   }
 
   line {
-    stroke: $lu_mapping_bg;
+    stroke: $lu_mapping_handle;
     stroke-width: 1;
     stroke-linejoin: round;
     stroke-linecap: round;
 
-    &:not([x1]) {
-
-      // the horizontal lines
-      stroke-width: 1.5;
-    }
-
     &[data-v] {
       stroke-opacity: 0.5;
       stroke-width: 0.5;
-      stroke: $lu_toolbar_color_base2;
+      stroke: $lu_mapping_line;
       pointer-events: none;
     }
   }
 
   circle {
-    fill: $lu_mapping_circle;
+    fill: $lu_mapping_handle;
   }
 }
 
@@ -74,7 +86,8 @@ g.#{$lu_css_prefix}-dialog-mapper-mapping {
 
   &.#{$lu_css_prefix}-frozen circle:first-of-type {
     cursor: not-allowed;
-    fill: $lu_mapping_circle !important;
+    fill: $lu_mapping_handle !important;
+    transform: scale(0.4);
   }
 
   &:hover {

diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
@@ -54,9 +54,10 @@ $lu_missing_dash_color: #c1c1c1 !default;
 
 $lu_axis_color: #c1c1c1 !default;
 
-$lu_mapping_circle: $lu_toolbar_color_base2;
-$lu_mapping_hover: $lu_selected_color;
-$lu_mapping_bg: $lu_toolbar_color_hover;
+$lu_mapping_box: $lu_toolbar_color_base !default;
+$lu_mapping_line: $lu_hover_color !default;
+$lu_mapping_handle: $lu_toolbar_color_hover !default;
+$lu_mapping_hover: $lu_selected_color !default;
 
 $lu_side_panel_bg_color: #f0f0f0 !default;
 $lu_side_panel_toolbar_bg: #6d6c6c !default;

diff --git a/src/ui/dialogs/MappingDialog.ts b/src/ui/dialogs/MappingDialog.ts
@@ -87,17 +87,24 @@ export default class MappingDialog extends ADialog {
         ${others.length > 0 ? `<optgroup label="Copy From">${others.map((d) => `<option value="copy_${d.id}">${d.label}</option>`).join('')}</optgroup>`: ''}
       </select>
       </div>
-        <div><strong>Domain (min - max): </strong><input id="${this.idPrefix}min" required type="number" value="${round(this.rawDomain[0], 3)}" step="any"> - <input id="${this.idPrefix}max" required type="number" value="${round(this.rawDomain[1], 3)}" step="any"></div>
-        <strong style="text-align: center">Input Domain (min - max)</strong>
+        <div class=${cssClass('dialog-mapper-domain')}>
+          <input id="${this.idPrefix}min" required type="number" value="${round(this.rawDomain[0], 3)}" step="any">
+          <span>Input Domain (min - max)</span>
+          <input id="${this.idPrefix}max" required type="number" value="${round(this.rawDomain[1], 3)}" step="any">
+        </div>
         <svg class="${cssClass('dialog-mapper-details')}" viewBox="0 0 106 66">
            <g transform="translate(3,3)">
-              <line x2="100"></line>
-              <rect y="-3" width="100" height="10"></rect>
-              <line y1="60" x2="100" y2="60"></line>
-              <rect y="36" width="100" height="10"></rect>
+              <rect y="-3" width="100" height="10">
+                <title>Click to create a new mapping line</title>
+              </rect>
+              <rect y="53" width="100" height="10">
+                <title>Click to create a new mapping line</title>
+              </rect>
            </g>
         </svg>
-        <strong style="text-align: center; margin-top: 0">Output Normalized Domain (0 - 1)</strong>
+        <div class=${cssClass('dialog-mapper-range')}>
+          <span>Output Normalized Domain (0 - 1)</span>
+        </div>
         <div class="${cssClass('dialog-mapper-script')}">
           <strong>Custom Normalization Script</strong>
           <textarea class="${cssClass('textarea')}"></textarea>

diff --git a/src/ui/dialogs/MappingLineDialog.ts b/src/ui/dialogs/MappingLineDialog.ts
@@ -32,7 +32,7 @@ export default class MappingLineDialog extends ADialog {
     this.before = {
       domain: this.line.domain,
       range: this.line.range
-    }
+    };
   }
 
   build(node: HTMLElement) {
@@ -81,8 +81,8 @@ export class MappingLine {
     g.insertAdjacentHTML('beforeend', `<g class="${cssClass('dialog-mapper-mapping')}" transform="translate(${domain},0)">
       <line x1="0" x2="${range - domain}" y2="60"></line>
       <line x1="0" x2="${range - domain}" y2="60"></line>
-      <circle r="3"></circle>
-      <circle cx="${range - domain}" cy="60" r="3"></circle>
+      <circle r="2.5"></circle>
+      <circle cx="${range - domain}" cy="60" r="2.5"></circle>
       <title>Drag the anchor circle to change the mapping, shift click to edit</title>
     </g>`);
     this.node = <SVGGElement>g.lastElementChild!;