Improvement/dpr style (#315)

* improve the Date Range Picker aesthetics/UX
grafana · Aug 6, 2021 · 313a320 · 313a320
1 parent bfd19c6
commit 313a320
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 49 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -19,7 +19,12 @@
     "react/jsx-one-expression-per-line": ["warn"],
     "jsx-a11y/mouse-events-have-key-events": ["warn"],
     "jsx-a11y/click-events-have-key-events": ["warn"],
-    "jsx-a11y/no-static-element-interactions": ["warn"]
+    "jsx-a11y/no-static-element-interactions": ["warn"],
+    "jsx-a11y/label-has-associated-control": [ "error", {
+      "required": {
+        "some": [ "nesting", "id"  ]
+      }
+    }]
   },
   "env": {
     "browser": true,

diff --git a/webapp/javascript/components/CheckIcon.jsx b/webapp/javascript/components/CheckIcon.jsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+// https://www.svgrepo.com/vectors/check/
+export default function CheckIcon() {
+  return (
+    <svg
+      version="1.1"
+      id="Capa_1"
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width="12px"
+      height="12px"
+      viewBox="0 0 405.272 405.272"
+    >
+      <g>
+        <path
+          d="M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836
+
+		c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064
+
+		c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/webapp/javascript/components/CustomDatePicker.jsx b/webapp/javascript/components/CustomDatePicker.jsx
@@ -36,11 +36,12 @@ function CustomDatePicker({ setRange, dispatch, setDateRange }) {
   }, [from, until]);
 
   return (
-    <div>
+    <div className="drp-custom">
       <h4>Custom Date Range</h4>
-      <div className="form">
-        <p style={{ marginBottom: "10px", color: "white" }}>From: </p>
+      <div className="from">
+        <label htmlFor="datepicker-from">From: </label>
         <DatePicker
+          id="datepicker-from"
           selected={selectedDate.from}
           onChange={(date) => {
             setSelectedDate({ ...selectedDate, from: date });
@@ -52,8 +53,9 @@ function CustomDatePicker({ setRange, dispatch, setDateRange }) {
         />
       </div>
       <div className="until">
-        <p style={{ marginBottom: "10px", color: "white" }}>Until: </p>
+        <label htmlFor="datepicker-until">Until: </label>
         <DatePicker
+          id="datepicker-until"
           selected={selectedDate.until}
           onChange={(date) => {
             setSelectedDate({ ...selectedDate, until: date });
@@ -69,13 +71,8 @@ function CustomDatePicker({ setRange, dispatch, setDateRange }) {
       {warning && <p style={{ color: "red" }}>Warning: invalid date Range</p>}
 
       <button
-        style={{
-          marginTop: "20px",
-          backgroundColor: "#2ECC40",
-          color: "white",
-        }}
         type="submit"
-        className="btn"
+        className="btn primary"
         onClick={() => updateDateRange()}
       >
         Apply range

diff --git a/webapp/javascript/components/DateRangePicker.jsx b/webapp/javascript/components/DateRangePicker.jsx
@@ -6,6 +6,7 @@ import { faClock } from "@fortawesome/free-solid-svg-icons";
 import OutsideClickHandler from "react-outside-click-handler";
 import CustomDatePicker from "./CustomDatePicker";
 import { setDateRange } from "../redux/actions";
+import CheckIcon from "./CheckIcon";
 
 const defaultPresets = [
   [
@@ -60,24 +61,27 @@ function DateRangePicker() {
           <span>{range}</span>
         </button>
         <div className="drp-dropdown">
-          <h4>Quick Presets</h4>
-          <div className="drp-presets">
-            {defaultPresets.map((arr, i) => (
-              <div key={`preset-${i + 1}`} className="drp-preset-column">
-                {arr.map((x) => (
-                  <button
-                    type="button"
-                    className={`drp-preset ${
-                      x.label === range ? "active" : ""
-                    }`}
-                    key={x.label}
-                    onClick={() => selectPreset(x)}
-                  >
-                    {x.label}
-                  </button>
-                ))}
-              </div>
-            ))}
+          <div className="drp-quick-presets">
+            <h4>Quick Presets</h4>
+            <div className="drp-presets">
+              {defaultPresets.map((arr, i) => (
+                <div key={`preset-${i + 1}`} className="drp-preset-column">
+                  {arr.map((x) => (
+                    <button
+                      type="button"
+                      className={`drp-preset ${
+                        x.label === range ? "active" : ""
+                      }`}
+                      key={x.label}
+                      onClick={() => selectPreset(x)}
+                    >
+                      {x.label}
+                      {x.label === range ? <CheckIcon /> : false}
+                    </button>
+                  ))}
+                </div>
+              ))}
+            </div>
           </div>
           <CustomDatePicker
             setRange={setRange}

diff --git a/webapp/sass/components/button.scss b/webapp/sass/components/button.scss
@@ -0,0 +1,37 @@
+@use "../variables"as *;
+@use "../mixins/outline"as *;
+
+.btn {
+  @include outline;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  cursor: pointer;
+
+  border: 1px solid $btn-border-color;
+  border-radius: 4px;
+  background: $btn-color;
+
+  &:hover {
+    background: $btn-hover-color;
+  }
+}
+
+// inspired by .viz-switch .btn
+.btn.primary {
+  $active-color: #269f34;
+
+  background-color: $active-color;
+  border-left-color: $active-color;
+  border-right-color: $active-color;
+  border-top-color: $active-color;
+  border-bottom-color: $active-color;
+  transition: 0.3s cubic-bezier(.17,.67,.83,.67);
+  font-weight: 600;
+
+  &:hover {
+    background-color: #2ecc40;
+  }
+}
diff --git a/webapp/sass/components/daterangepicker.scss b/webapp/sass/components/daterangepicker.scss
@@ -49,6 +49,12 @@
   .drp-presets {
     display: flex;
     flex-direction: row;
+
+    // cancel the padding from drp-container
+    // so that it spams the whole row
+    margin-left: -20px;
+    margin-right: -20px;
+
     .drp-preset-column {
       flex: 1;
       display: flex;
@@ -57,17 +63,35 @@
     }
   }
 
+  .drp-custom {
+    margin-top: 20px;
+  }
+
   .drp-preset {
     @include outline;
 
+
     border: none;
     text-align: left;
     padding: 2px 0;
+    // compensates for the negative margin in .drp-presets
+    padding-left: 20px;
     color: rgba(255, 255, 255, 0.66);
 
+    // give some room between the text and the icon
+    // https://web.dev/learn/css/logical-properties/#solving-the-icon-issue
+    svg {
+      margin-inline-start: 0.5em;
+    }
+
     &:hover,
     &.active {
       color: rgba(255, 255, 255, 1);
+      background: $btn-hover-color;
+    }
+
+    &:hover{
+      cursor: pointer;
     }
   }
 
@@ -84,6 +108,23 @@
   }
 }
 
+// Custom Date Range block
+.drp-custom {
+  // label should be on its own line
+  label {
+    display: block;
+  }
+
+  .until {
+    margin-top: 10px;
+  }
+
+  // submit button
+  button {
+    margin-top: 20px;
+  }
+}
+
 // range picker custom styles
 .react-datepicker__day--in-range {
   background-color: #216ba5 !important;

diff --git a/webapp/sass/profile.scss b/webapp/sass/profile.scss
@@ -3,6 +3,7 @@
 @use "components/daterangepicker";
 @use "components/labels";
 @use "components/exportdata";
+@use "components/button";
 
 @import "~sanitize.css";
 @import "~sanitize.css/forms.css";
@@ -85,26 +86,6 @@ tt {
   flex: 1;
 }
 
-.btn {
-  @include outline;
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  cursor: pointer;
-
-  // height: 30px;
-  // line-height: 30px;
-  border: 1px solid $btn-border-color;
-  border-radius: 4px;
-  background: $btn-color;
-
-  &:hover {
-    background: $btn-hover-color;
-  }
-}
-
 select {
   @include outline;
   display: inline-block;