refactor(web-ts-results): improve adaptability

Author: nakrovati

webdriver-ts-results/src/App.css

@@ -29,12 +29,34 @@ select {
   background-color: #fafafa;
   border-top: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
+  padding: 20px 0;
+  flex-direction: column;
+  display: flex;
+  gap: 10px;
+}
+.select-bar__dropdowns {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+@media screen and (width>=640px) {
+  .select-bar {
+    flex-direction: unset;
+    align-items: center;
+  }
 }
+@media screen and (width>=768px) {
+  .select-bar {
+    align-items: center;
+  }
+}
+
 select {
   border: 1px solid var(--border-color);
   border-radius: 4px;
   height: 29px;
-  background: #fff;
+  background: white;
 }
 
 input + label {
@@ -157,13 +179,6 @@ dd {
   border: 1px solid #888;
 }
 
-.header-row {
-  margin: 20px 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
 .error {
   background-color: #f99;
 }

webdriver-ts-results/src/components/selection/CopyPasteSelection.css

@@ -0,0 +1,5 @@
+.copy-paste-panel {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}

webdriver-ts-results/src/components/selection/CopyPasteSelection.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { useRootStore } from "../../reducer";
 import PasteIcon from "../../assets/icons/PasteIcon";
 import CopyIcon from "../../assets/icons/CopyIcon";
+import "./CopyPasteSelection.css";
 
 const CopyPasteSelection = () => {
   console.log("CopyPasteSelection");
@@ -80,22 +81,24 @@ const CopyPasteSelection = () => {
 
   return (
     <>
-      <p>Copy/paste current selection</p>
-      <div>
-        <button
-          className="button__icon"
-          onClick={copy}
-          aria-label="Copy selected frameworks and benchmarks"
-        >
-          <CopyIcon></CopyIcon>
-        </button>
-        <button
-          className="button__icon"
-          onClick={handlePasteFromClipboard}
-          aria-label="Paste selected items (or use ctrl/cmd + v for firefox)"
-        >
-          <PasteIcon></PasteIcon>
-        </button>
+      <div className="copy-paste-panel">
+        <p>Copy/paste current selection</p>
+        <div>
+          <button
+            className="button__icon"
+            onClick={copy}
+            aria-label="Copy selected frameworks and benchmarks"
+          >
+            <CopyIcon></CopyIcon>
+          </button>
+          <button
+            className="button__icon"
+            onClick={handlePasteFromClipboard}
+            aria-label="Paste selected items (or use ctrl/cmd + v for firefox)"
+          >
+            <PasteIcon></PasteIcon>
+          </button>
+        </div>
       </div>
     </>
   );

webdriver-ts-results/src/components/selection/ModeSelectionPanel/DisplayModeSelector.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { DisplayMode } from "../../../Common";
+
+interface Props {
+  displayMode: DisplayMode;
+  onChange: (value: DisplayMode) => void;
+}
+
+const DisplayModeSelector = ({ displayMode, onChange }: Props) => {
+  return (
+    <>
+      <div className="mode-selector">
+        <label htmlFor="displayMode">Display mode:</label>
+        <select
+          id="displayMode"
+          className="mode-selector__select"
+          value={displayMode}
+          aria-label="Select display mode"
+          onChange={(evt) => onChange(Number(evt.target.value) as DisplayMode)}
+        >
+          <option value={DisplayMode.DisplayMean}>mean results</option>
+          <option value={DisplayMode.DisplayMedian}>median results</option>
+          <option value={DisplayMode.BoxPlot}>box plot</option>
+        </select>
+      </div>
+    </>
+  );
+};
+
+export default DisplayModeSelector;

webdriver-ts-results/src/components/selection/ModeSelectionPanel/DurationModeSelector.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { CpuDurationMode } from "../../../Common";
+
+interface Props {
+  cpuDurationMode: CpuDurationMode;
+  onChange: (value: CpuDurationMode) => void;
+}
+
+const DurationModeSelector = ({ cpuDurationMode, onChange }: Props) => {
+  return (
+    <>
+      <div className="mode-selector">
+        <label htmlFor="durationMode">
+          (Experimental) Duration measurement mode:
+        </label>
+        <select
+          id="durationMode"
+          className="mode-selector__select"
+          value={cpuDurationMode}
+          aria-label="Select CPU duration mode"
+          onChange={(evt) => onChange(evt.target.value as CpuDurationMode)}
+        >
+          <option value={CpuDurationMode.Total}>total duration</option>
+          <option value={CpuDurationMode.Script}>only JS duration</option>
+        </select>
+      </div>
+    </>
+  );
+};
+
+export default DurationModeSelector;

webdriver-ts-results/src/components/selection/ModeSelectionPanel/ModeSelectionPanel.css

@@ -0,0 +1,30 @@
+.mode-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.mode-selector__select {
+  width: fit-content;
+}
+
+@media screen and (width>=425px) {
+  .mode-selector {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media screen and (width>=640px) {
+  .mode-selector {
+    align-items: unset;
+  }
+}
+@media screen and (640px <= width <= 768px) {
+  .mode-selector {
+    flex-direction: column;
+  }
+}
+@media screen and (width>= 768px) {
+  .mode-selector {
+    align-items: center;
+  }
+}

webdriver-ts-results/src/components/selection/ModeSelector/index.tsx renamed to webdriver-ts-results/src/components/selection/ModeSelectionPanel/index.tsx

@@ -2,12 +2,13 @@ import React from "react";
 import { useRootStore } from "../../../reducer";
 import DisplayModeSelector from "./DisplayModeSelector";
 import DurationModeSelector from "./DurationModeSelector";
+import "./ModeSelectionPanel.css";
 
 interface Props {
   showDurationSelection: boolean;
 }
 
-const ModeSelector = ({ showDurationSelection }: Props) => {
+const ModeSelecionPanel = ({ showDurationSelection }: Props) => {
   console.log("ModeSelector");
 
   const displayMode = useRootStore((state) => state.displayMode);
@@ -19,19 +20,21 @@ const ModeSelector = ({ showDurationSelection }: Props) => {
 
   return (
     <>
-      <DisplayModeSelector
-        displayMode={displayMode}
-        onChange={(value) => selectDisplayMode(value)}
-      />
-
-      {showDurationSelection && (
-        <DurationModeSelector
-          cpuDurationMode={cpuDurationMode}
-          onChange={(value) => selectCpuDurationMode(value)}
+      <div className="mode-selection-panel">
+        <DisplayModeSelector
+          displayMode={displayMode}
+          onChange={(value) => selectDisplayMode(value)}
         />
-      )}
+
+        {showDurationSelection ? (
+          <DurationModeSelector
+            cpuDurationMode={cpuDurationMode}
+            onChange={(value) => selectCpuDurationMode(value)}
+          />
+        ) : null}
+      </div>
     </>
   );
 };
 
-export default ModeSelector;
+export default ModeSelecionPanel;

webdriver-ts-results/src/components/selection/ModeSelector/DisplayModeSelector.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import BenchmarkSelector from "./BenchmarkSelector";
 import FrameworkSelector from "./FrameworkSelector";
-import ModeSelector from "./ModeSelector";
+import ModeSelecionPanel from "./ModeSelectionPanel";
 import CopyPasteSelection from "./CopyPasteSelection";
 
 interface Props {
@@ -13,12 +13,12 @@ export const SelectionBar = ({ showDurationSelection }: Props) => {
 
   return (
     <div className="select-bar">
-      <div className="header-row">
+      <div className="select-bar__dropdowns">
         <FrameworkSelector />
         <BenchmarkSelector />
-        <ModeSelector showDurationSelection={showDurationSelection} />
-        <CopyPasteSelection />
       </div>
+      <ModeSelecionPanel showDurationSelection={showDurationSelection} />
+      <CopyPasteSelection />
     </div>
   );
 };