feat: redesign download options

eea · Oct 6, 2023 · 96f2f3a · 96f2f3a
1 parent a204dc3
commit 96f2f3a
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 49 deletions.
diff --git a/src/Utils/Download/Download.jsx b/src/Utils/Download/Download.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Popup } from 'semantic-ui-react';
+import { Popup } from 'semantic-ui-react';
 import cx from 'classnames';
 import { Icon } from '@plone/volto/components';
 import downloadSVG from '@eeacms/volto-tableau/icons/download.svg';
@@ -29,42 +29,73 @@ const Download = ({ viz }) => {
       }}
       ref={popupRef}
     >
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.showExportImageDialog();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        Image
-      </Button>
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.showExportPDFDialog();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        PDF
-      </Button>
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.showExportCrossTabDialog();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        CSV
-      </Button>
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.exportCrossTabToExcel();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        Excel
-      </Button>
+      <ul className="no-bullets">
+        <li>
+          Data formats
+          <div className="visualization-wrapper">
+            <div className="visualization-info">
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.showExportCrossTabDialog();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>CSV</span>
+                </button>
+              </div>
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.exportCrossTabToExcel();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>Excel</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          Image formats
+          <div className="visualization-wrapper">
+            <div className="visualization-info">
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.showExportImageDialog();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>PNG</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          Other formats
+          <div className="visualization-wrapper">
+            <div className="visualization-info">
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.showExportPDFDialog();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>PDF</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
     </Popup>
   );
 };

diff --git a/src/less/tableau.less b/src/less/tableau.less
@@ -180,8 +180,7 @@
 }
 
 #tableau-note-popup,
-#tableau-sources-popup,
-#tableau-download-popup {
+#tableau-sources-popup {
   .ui.popup {
     background-color: #f9f9f9;
     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
@@ -208,21 +207,51 @@
 }
 
 #tableau-download-popup {
-  .ui.popup {
-    min-width: 600px;
+  ul.no-bullets {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
   }
 
-  @media screen and (max-width: @largestMobileScreen) {
-    .ui.popup {
-      min-width: 300px;
+  .visualization-wrapper {
+    position: relative;
+
+    .visualization-info {
+      display: flex;
+      align-items: center;
+
+      > * {
+        padding: 0 0.5rem;
+        border-collapse: collapse;
+      }
+
+      > *:first-child {
+        padding-left: 0;
+      }
+
+      > *:last-child {
+        padding-right: 0;
+        margin-right: 0;
+
+        &.tableau-download-container {
+          margin-left: auto;
+        }
+      }
+
+      > *:not(:last-child) {
+        border-right: 2px solid @textColor;
+      }
     }
   }
-}
 
-#tableau-download-popup {
-  .ui.popup {
-    min-width: 460px;
-    text-align: center;
+  .tableau-download-button.tableau-format-download {
+    padding: 0;
+    color: #679ad6;
+    font-weight: normal;
+
+    &:hover {
+      color: #164b7f;
+    }
   }
 }