[layout] responsive adjustments

- button are smaller on small screens - various layout debug - panel description hidden in a tooltip on small screen relates #127
gephi · Feb 13, 2024 · 4d5ed1f · 4d5ed1f
1 parent f1912b3
commit 4d5ed1f
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 74 deletions.
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
@@ -15,7 +15,7 @@ const ColorPicker: FC<
 
   return (
     <Tooltip ref={tooltipRef} attachment="top middle" targetAttachment="bottom middle" targetClassName={className}>
-      <button type="button" className="btn disc border" style={{ background: color || "#ffffff" }}>
+      <button type="button" className="btn disc border border-secondary" style={{ background: color || "#ffffff" }}>
         <span style={{ color: "transparent" }}>X</span>
       </button>
       <div className="custom-color-picker">

diff --git a/src/components/GraphAppearance/index.tsx b/src/components/GraphAppearance/index.tsx
@@ -1,63 +1,15 @@
-import { FC, useMemo, useState } from "react";
+import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useAppearance, useAppearanceActions } from "../../core/context/dataContexts";
 import { ItemType } from "../../core/types";
 import ColorPicker from "../ColorPicker";
-import { ToggleBar } from "../Toggle";
-import { EdgeIcon, GraphIcon, NodeIcon } from "../common-icons";
 import { ColorItem } from "./color/ColorItem";
 import { LabelSizeItem } from "./label/LabelSizeItem";
 import { StringAttrItem } from "./label/StringAttrItem";
 import { SizeItem } from "./size/SizeItem";
 
-export const GraphAppearance: FC = () => {
-  const { t } = useTranslation();
-  const [selected, setSelected] = useState("nodes");
-
-  const tabs = useMemo(() => {
-    return [
-      {
-        value: "nodes",
-        label: (
-          <>
-            <NodeIcon className="me-1" /> {t("graph.model.nodes")}
-          </>
-        ),
-      },
-      {
-        value: "edges",
-        label: (
-          <>
-            <EdgeIcon className="me-1" /> {t("graph.model.edges")}
-          </>
-        ),
-      },
-      {
-        value: "graph",
-        label: (
-          <>
-            <GraphIcon className="me-1" /> {t("graph.model.graph")}
-          </>
-        ),
-      },
-    ];
-  }, [t]);
-
-  return (
-    <>
-      <ToggleBar className="mt-1" value={selected} onChange={(e) => setSelected(e)} options={tabs} />
-      <hr className="m-0" />
-      <div className="panel-block">
-        {selected === "nodes" && <GraphItemAppearance itemType="nodes" />}
-        {selected === "edges" && <GraphItemAppearance itemType="edges" />}
-        {selected === "graph" && <GraphGraphAppearance />}
-      </div>
-    </>
-  );
-};
-
-const GraphItemAppearance: FC<{ itemType: ItemType }> = ({ itemType }) => {
+export const GraphItemAppearance: FC<{ itemType: ItemType }> = ({ itemType }) => {
   const { t } = useTranslation();
   const { showEdges } = useAppearance();
   const { setShowEdges } = useAppearanceActions();
@@ -97,7 +49,7 @@ const GraphItemAppearance: FC<{ itemType: ItemType }> = ({ itemType }) => {
   );
 };
 
-const GraphGraphAppearance: FC<unknown> = () => {
+export const GraphGraphAppearance: FC<unknown> = () => {
   const { t } = useTranslation();
   const { backgroundColor } = useAppearance();
   const { setBackgroundColorAppearance } = useAppearanceActions();
@@ -108,7 +60,12 @@ const GraphGraphAppearance: FC<unknown> = () => {
 
       <div className="d-flex align-items-center">
         <label className="me-3">{t("appearance.graph.background.color")}</label>
-        <ColorPicker color={backgroundColor} clearable onChange={(v) => setBackgroundColorAppearance(v)} />
+        <ColorPicker
+          className="w-100 h-100"
+          color={backgroundColor}
+          clearable
+          onChange={(v) => setBackgroundColorAppearance(v)}
+        />
       </div>
     </div>
   );

diff --git a/src/components/InformationTooltip.tsx b/src/components/InformationTooltip.tsx
@@ -0,0 +1,20 @@
+import { FC, PropsWithChildren } from "react";
+import { IoInformationCircleOutline } from "react-icons/io5";
+
+import Tooltip from "./Tooltip";
+
+export const InformationTooltip: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <Tooltip
+      closeOnClickContent
+      attachment="top middle"
+      targetAttachment="bottom middle"
+      targetClassName="d-block d-md-none align-self-start"
+    >
+      <IoInformationCircleOutline className="align-top cursor-pointer" />
+      <div className=" dropdown-menu show over-modal position-relative p-2" style={{ width: "75vw" }}>
+        {children}
+      </div>
+    </Tooltip>
+  );
+};
diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
@@ -63,7 +63,7 @@ export function ToggleBar<T>(props: {
         <Fragment key={`${option.value}`}>
           <li className="nav-item">
             <button
-              className={cx("nav-link link-dark", className, option.value === value && "active")}
+              className={cx("nav-link link-dark p-2", className, option.value === value && "active")}
               onClick={() => onChange(option.value)}
               disabled={disabled}
             >

diff --git a/src/styles/_base.scss b/src/styles/_base.scss
@@ -102,3 +102,15 @@
     border-right-width: 0.3em;
   }
 }
+
+.btn {
+  --bs-btn-padding-y: 0.25rem;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-font-size: 1rem;
+
+  @include media-breakpoint-down(md) {
+    --bs-btn-padding-y: 0.15rem;
+    --bs-btn-padding-x: 0.35rem;
+    --bs-btn-font-size: 0.85rem;
+  }
+}
diff --git a/src/views/graphPage/AppearancePanel.tsx b/src/views/graphPage/AppearancePanel.tsx
@@ -1,20 +1,59 @@
-import { FC } from "react";
+import { FC, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { GraphAppearance } from "../../components/GraphAppearance";
-import { AppearanceIcon } from "../../components/common-icons";
+import { GraphGraphAppearance, GraphItemAppearance } from "../../components/GraphAppearance";
+import { ToggleBar } from "../../components/Toggle";
+import { AppearanceIcon, EdgeIcon, GraphIcon, NodeIcon } from "../../components/common-icons";
 
 export const AppearancePanel: FC = () => {
   const { t } = useTranslation();
+  const [selected, setSelected] = useState("nodes");
+  const tabs = useMemo(() => {
+    return [
+      {
+        value: "nodes",
+        label: (
+          <>
+            <NodeIcon className="me-1" /> {t("graph.model.nodes")}
+          </>
+        ),
+      },
+      {
+        value: "edges",
+        label: (
+          <>
+            <EdgeIcon className="me-1" /> {t("graph.model.edges")}
+          </>
+        ),
+      },
+      {
+        value: "graph",
+        label: (
+          <>
+            <GraphIcon className="me-1" /> {t("graph.model.graph")}
+          </>
+        ),
+      },
+    ];
+  }, [t]);
   return (
     <>
-      <div className="panel-block">
+      <div className="panel-block pb-0">
         <h2 className="fs-4">
-          <AppearanceIcon className="me-1" /> {t("appearance.title")}
+          <AppearanceIcon className="me-1" /> {t("appearance.title")}{" "}
         </h2>
+        <ToggleBar
+          className="mt-1 justify-content-center"
+          value={selected}
+          onChange={(e) => setSelected(e)}
+          options={tabs}
+        />
       </div>
+      <hr className="m-0" />
 
-      <GraphAppearance />
+      {selected === "nodes" && <GraphItemAppearance itemType="nodes" />}
+      {selected === "edges" && <GraphItemAppearance itemType="edges" />}
+      {selected === "graph" && <GraphGraphAppearance />}
     </>
   );
 };
diff --git a/src/views/graphPage/FiltersPanel.tsx b/src/views/graphPage/FiltersPanel.tsx
@@ -2,17 +2,21 @@ import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import GraphFilters from "../../components/GraphFilters";
+import { InformationTooltip } from "../../components/InformationTooltip";
 import { FiltersIcon } from "../../components/common-icons";
 
 export const FiltersPanel: FC = () => {
   const { t } = useTranslation();
   return (
     <>
       <div className="panel-block">
-        <h2 className="fs-4">
+        <h2 className="fs-4 d-flex align-items-center gap-1">
           <FiltersIcon className="me-1" /> {t("filters.title")}
+          <InformationTooltip>
+            <p className="text-muted small m-0">{t("filters.description")}</p>
+          </InformationTooltip>
         </h2>
-        <p className="text-muted small m-0">{t("filters.description")}</p>
+        <p className="text-muted small m-0 d-none d-md-block">{t("filters.description")}</p>
       </div>
 
       <hr className="m-0" />

diff --git a/src/views/graphPage/LayoutsPanel.tsx b/src/views/graphPage/LayoutsPanel.tsx
@@ -1,11 +1,12 @@
 import cx from "classnames";
 import { isNil } from "lodash";
-import React, { FC, useCallback, useEffect, useMemo, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import Highlight from "react-highlight";
 import { useTranslation } from "react-i18next";
 import { FaPlay, FaStop } from "react-icons/fa";
 import Select from "react-select";
 
+import { InformationTooltip } from "../../components/InformationTooltip";
 import { LoaderFill } from "../../components/Loader";
 import MessageTooltip from "../../components/MessageTooltip";
 import { CodeEditorIcon, LayoutsIcon } from "../../components/common-icons";
@@ -255,7 +256,7 @@ export const LayoutForm: FC<{
 
       <hr className="m-0" />
 
-      <div className="z-over-loader panel-block d-flex flex-row flex-wrap align-items-center justify-content-end">
+      <div className="z-over-loader panel-block d-flex flex-row gap-1 flex-wrap align-items-center justify-content-end">
         {success && (
           <MessageTooltip
             openOnMount={2000}
@@ -271,7 +272,7 @@ export const LayoutForm: FC<{
           <button
             key={id}
             type="reset"
-            className="btn text-nowrap mt-1 btn-secondary ms-2"
+            className="btn text-nowrap mt-1 btn-secondary"
             title={description ? (t(`layouts.${layout.id}.buttons.${id}.description`) as string) : undefined}
             onClick={() => {
               const graph = getFilteredDataGraph(dataset, sigmaGraph);
@@ -284,13 +285,13 @@ export const LayoutForm: FC<{
         ))}
         <button
           type="reset"
-          className="btn text-nowrap mt-1 btn-secondary ms-2"
+          className="btn text-nowrap mt-1 btn-secondary"
           onClick={() => setParameters()}
           disabled={isRunning}
         >
           {t("common.reset")}
         </button>
-        <button type="submit" className="btn text-nowrap mt-1 btn-primary ms-2">
+        <button type="submit" className="btn text-nowrap mt-1 btn-primary">
           {layout.type === "sync" && <>{t("common.apply")}</>}
           {layout.type === "worker" && (
             <>
@@ -332,10 +333,13 @@ export const LayoutsPanel: FC = () => {
   return (
     <>
       <div className="panel-block">
-        <h2 className="fs-4">
+        <h2 className="fs-4 d-flex align-items-center gap-1">
           <LayoutsIcon className="me-1" /> {t("layouts.title")}
+          <InformationTooltip>
+            <p className="text-muted small">{t("layouts.description")}</p>
+          </InformationTooltip>
         </h2>
-        <p className="text-muted small">{t("layouts.description")}</p>
+        <p className="text-muted small d-none d-md-block">{t("layouts.description")}</p>
 
         <Select<LayoutOption, false>
           {...DEFAULT_SELECT_PROPS}

diff --git a/src/views/graphPage/StatisticsPanel.tsx b/src/views/graphPage/StatisticsPanel.tsx
@@ -5,6 +5,7 @@ import Highlight from "react-highlight";
 import { useTranslation } from "react-i18next";
 import Select, { GroupBase } from "react-select";
 
+import { InformationTooltip } from "../../components/InformationTooltip";
 import MessageTooltip from "../../components/MessageTooltip";
 import { CodeEditorIcon, StatisticsIcon } from "../../components/common-icons";
 import { DEFAULT_SELECT_PROPS } from "../../components/consts";
@@ -369,10 +370,13 @@ export const StatisticsPanel: FC = () => {
   return (
     <>
       <div className="panel-block">
-        <h2 className="fs-4">
-          <StatisticsIcon className="me-1" /> {t("statistics.title")}
+        <h2 className="fs-4 d-flex align-items-center gap-1">
+          <StatisticsIcon className="me-1" /> {t("statistics.title")}{" "}
+          <InformationTooltip>
+            <p className="text-muted small m-0">{t("statistics.description")}</p>
+          </InformationTooltip>
         </h2>
-        <p className="text-muted small">{t("statistics.description")}</p>
+        <p className="text-muted small d-none d-md-block">{t("statistics.description")}</p>
 
         <Select<MetricOption, false>
           {...DEFAULT_SELECT_PROPS}

diff --git a/src/views/graphPage/modals/WelcomeModal.tsx b/src/views/graphPage/modals/WelcomeModal.tsx
@@ -65,7 +65,7 @@ export const WelcomeModal: FC<ModalProps<unknown>> = ({ cancel, submit }) => {
       className="modal-lg"
     >
       <div className="row mb-3 position-relative">
-        <div className="col-6">
+        <div className="col-12 col-sm-6">
           <h3 className="fs-6">{t("welcome.open_recent")}</h3>
           {!!recentRemoteFiles.length && (
             <ul className="list-unstyled">
@@ -91,7 +91,7 @@ export const WelcomeModal: FC<ModalProps<unknown>> = ({ cancel, submit }) => {
           )}
           {!recentRemoteFiles.length && <p className="text-muted">{t("welcome.no_recent")}</p>}
         </div>
-        <div className="col-6">
+        <div className="col-12 col-sm-6">
           <h3 className="fs-6">{t("welcome.open_graph")}</h3>
           <ul className="list-unstyled">
             {user && user.provider && (