feat: Login & UI improvements

CHANGELOG.md

@@ -24,6 +24,7 @@ You can also check the
     layouting step
   - It's now possible to preview a chart in different sizes before publishing
     (in the layout step)
+  - Clicking on a chart title in the user profile now opens the chart
 - Fixes
   - Map is now correctly centered after copying a chart or switching to layout
     mode
@@ -39,6 +40,7 @@ You can also check the
   - Aligned editor and layouting page layouts
   - Removed dimension selection from modal when merging cubes
   - Updated styles of confirmation dialog
+  - Various small style improvements
 - Maintenance
   - Updated cube-hierarchy-query library to 3.0.0
 

app/components/chart-selection-tabs.tsx

@@ -3,7 +3,6 @@ import { TabContext } from "@mui/lab";
 import {
   Button,
   Divider,
-  Popover,
   Stack,
   tabClasses,
   Theme,
@@ -179,18 +178,27 @@ const TabsEditable = (props: TabsEditableProps) => {
       />
 
       {tabsState.popoverType === "add" ? (
-        <Popover
+        <ArrowMenuTopCenter
           id="chart-selection-popover"
           open={tabsState.popoverOpen}
           anchorEl={popoverAnchorEl}
           anchorOrigin={{
-            horizontal: "left",
+            horizontal: "center",
             vertical: "bottom",
           }}
+          transformOrigin={{
+            horizontal: "center",
+            vertical: "top",
+          }}
           onClose={handleClose}
           PaperProps={{
             sx: {
+              width: "calc(320px + 2rem)",
+              mt: 3,
               py: "1rem",
+              "& > .MuiList-root": {
+                py: 0,
+              },
             },
           }}
         >
@@ -218,7 +226,7 @@ const TabsEditable = (props: TabsEditableProps) => {
                 showHelp={false}
                 showComparisonCharts={false}
                 chartKey={tabsState.activeChartKey ?? chartConfig.key}
-                sx={{ width: 320, px: 3, pb: 3 }}
+                sx={{ pb: 3 }}
               />
             </Stack>
             {addNewDatasetFlag ? (
@@ -248,7 +256,7 @@ const TabsEditable = (props: TabsEditableProps) => {
               </Stack>
             ) : null}
           </Stack>
-        </Popover>
+        </ArrowMenuTopCenter>
       ) : null}
 
       {tabsState.popoverType === "edit" ? (
@@ -386,7 +394,15 @@ const useTabsInnerStyles = makeStyles<Theme>((theme) => ({
   },
 }));
 
-const TabsInner = (props: {
+const TabsInner = ({
+  data,
+  addable,
+  editable,
+  draggable,
+  onChartEdit,
+  onChartAdd,
+  onChartSwitch,
+}: {
   data: TabDatum[];
   addable: boolean;
   editable: boolean;
@@ -396,15 +412,6 @@ const TabsInner = (props: {
   onChartSwitch?: (key: string) => void;
 }) => {
   const classes = useTabsInnerStyles();
-  const {
-    data,
-    addable,
-    editable,
-    draggable,
-    onChartEdit,
-    onChartAdd,
-    onChartSwitch,
-  } = props;
   const [_, dispatch] = useConfiguratorState(hasChartConfigs);
   const activeTabIndex = data.findIndex((x) => x.active);
   return (

app/components/menu-action-item.tsx

@@ -59,6 +59,7 @@ export const MenuActionItem = (
     icon,
     label,
     color = "primary",
+    ...rest
   }: {
     icon?: IconName;
     label: string | NonNullable<React.ReactNode>;
@@ -77,17 +78,18 @@ export const MenuActionItem = (
       props.type === "button"
         ? {
             onClick: handleClick,
+            ...rest,
           }
         : {
             href: props.href,
             target: props.target,
             rel: props.rel,
+            ...rest,
           };
     if (props.as === "button") {
       return (
         <Button
           size="xsmall"
-          component={props.type === "link" ? Link : "button"}
           color={color}
           variant="contained"
           {...forwardedProps}

app/locales/de/messages.po

@@ -53,7 +53,7 @@ msgstr "Kategorien"
 
 #: app/login/components/profile-header.tsx
 msgid "browse.dataset.all"
-msgstr "Alle Datensätze durchsuchen"
+msgstr "Datensatz suchen"
 
 #: app/browser/dataset-preview.tsx
 #: app/browser/dataset-preview.tsx
@@ -182,7 +182,7 @@ msgstr "Tabellenansicht"
 
 #: app/components/chart-selection-tabs.tsx
 msgid "chart-selection-tabs.add-chart"
-msgstr ""
+msgstr "Diagramm hinzufügen"
 
 #: app/components/chart-selection-tabs.tsx
 msgid "chart-selection-tabs.add-chart-different-dataset.button"
@@ -592,7 +592,7 @@ msgstr "Nullen"
 
 #: app/configurator/components/field-i18n.ts
 msgid "controls.label"
-msgstr ""
+msgstr "Tab-Titel"
 
 #: app/components/rename-dialog.tsx
 #: app/configurator/components/field-i18n.ts
@@ -620,24 +620,24 @@ msgstr "Freies Layout"
 
 #: app/login/components/profile-tables.tsx
 msgid "controls.layout.chart"
-msgstr ""
+msgstr "Diagramm"
 
 #: app/configurator/components/field-i18n.ts
 #: app/login/components/profile-tables.tsx
 msgid "controls.layout.dashboard"
 msgstr "Dashboard"
 
-#: app/configurator/components/configurator.tsx
+#: app/configurator/components/preview-breakpoint.tsx
 msgid "controls.layout.preview-lg"
-msgstr ""
+msgstr "Vorschau mit verfügbarer Breite"
 
-#: app/configurator/components/configurator.tsx
+#: app/configurator/components/preview-breakpoint.tsx
 msgid "controls.layout.preview-md"
-msgstr ""
+msgstr "Vorschau in mittlerer Breite"
 
-#: app/configurator/components/configurator.tsx
+#: app/configurator/components/preview-breakpoint.tsx
 msgid "controls.layout.preview-sm"
-msgstr ""
+msgstr "Vorschau in kleiner Breite"
 
 #: app/configurator/components/field-i18n.ts
 msgid "controls.layout.singleURLs"
@@ -840,7 +840,7 @@ msgstr "Layout-Optionen"
 msgid "controls.section.shared-filters"
 msgstr "Geteilte Filter"
 
-#: app/configurator/components/layout-configurator.tsx
+#: app/charts/shared/use-combined-temporal-dimension.ts
 msgid "controls.section.shared-filters.date"
 msgstr "Datum"
 
@@ -1097,7 +1097,7 @@ msgstr "Geteilte Dimensionen"
 
 #: app/components/chart-footnotes.tsx
 msgid "dataset.footnotes.dataset"
-msgstr ""
+msgstr "Datensatz"
 
 #: app/components/chart-footnotes.tsx
 msgid "dataset.footnotes.updated"
@@ -1197,15 +1197,15 @@ msgstr "Datensätze"
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.preview.description"
-msgstr "Überprüfen Sie alle verfügbaren Dimensionen, bevor Sie mit der Bearbeitung Ihrer Visualisierung fortfahren."
+msgstr "Überprüfen Sie die verfügbaren Dimensionen."
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.preview.new-dimension"
 msgstr "Neu"
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.preview.title"
-msgstr "Überprüfen Sie die verfügbaren Dimensionen"
+msgstr "Verfügbare Dimensionen"
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.search-options.more-2-options-selected"
@@ -1364,6 +1364,10 @@ msgstr "Kopieren"
 msgid "login.chart.delete"
 msgstr "Löschen"
 
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.delete-draft.confirmation"
+msgstr ""
+
 #: app/login/components/profile-tables.tsx
 msgid "login.chart.delete.confirmation"
 msgstr "Sind Sie sicher, dass Sie diese Grafik löschen wollen?"
@@ -1395,19 +1399,23 @@ msgstr "erstellen Sie einen"
 
 #: app/login/components/profile-tables.tsx
 msgid "login.no-charts"
-msgstr "Noch keine Charts"
+msgstr "Noch keine Diagramme"
 
 #: app/components/confirmation-dialog.tsx
 msgid "login.profile.chart.confirmation.default"
 msgstr "Sind Sie sicher, dass Sie diese Aktion durchführen wollen?"
 
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.chart.delete-draft.warning"
+msgstr ""
+
 #: app/login/components/profile-tables.tsx
 msgid "login.profile.chart.delete.warning"
 msgstr "Denken Sie daran, dass das Entfernen dieser Visualisierung sich auf alle Stellen auswirkt, an denen sie möglicherweise bereits eingebettet ist!"
 
 #: app/login/components/profile-content-tabs.tsx
 msgid "login.profile.home"
-msgstr "Empfang"
+msgstr "Übersicht"
 
 #: app/login/components/profile-content-tabs.tsx
 #: app/login/components/profile-content-tabs.tsx
@@ -1419,11 +1427,11 @@ msgstr "Meine Entwürfe"
 #: app/login/components/profile-content-tabs.tsx
 #: app/login/components/profile-content-tabs.tsx
 msgid "login.profile.my-published-visualizations"
-msgstr "Meine Visualisierungen"
+msgstr "Veröffentlichte Visualisierungen"
 
 #: app/login/components/login-menu.tsx
 msgid "login.profile.my-visualizations"
-msgstr ""
+msgstr "Meine Visualisierungen"
 
 #: app/login/components/profile-tables.tsx
 msgid "login.profile.my-visualizations.chart-actions"
@@ -1451,12 +1459,12 @@ msgstr ""
 
 #: app/login/components/login-menu.tsx
 msgid "login.sign-in"
-msgstr ""
+msgstr "Einloggen"
 
 #: app/login/components/login-menu.tsx
 #: app/login/components/profile-header.tsx
 msgid "login.sign-out"
-msgstr ""
+msgstr "Abmelden"
 
 #: app/components/header.tsx
 #: app/components/header.tsx
@@ -1569,11 +1577,6 @@ msgstr "Woche"
 msgid "time-units.Year"
 msgstr "Jahr"
 
-#: app/components/chart-footnotes.tsx
-#: app/components/chart-footnotes.tsx
-msgid "typography.colon"
-msgstr ": "
-
 #: app/components/confirmation-dialog.tsx
 msgid "yes"
 msgstr "Ja"

app/locales/en/messages.po

@@ -627,15 +627,15 @@ msgstr "Chart"
 msgid "controls.layout.dashboard"
 msgstr "Dashboard"
 
-#: app/configurator/components/configurator.tsx
+#: app/configurator/components/preview-breakpoint.tsx
 msgid "controls.layout.preview-lg"
 msgstr "Preview using available width"
 
-#: app/configurator/components/configurator.tsx
+#: app/configurator/components/preview-breakpoint.tsx
 msgid "controls.layout.preview-md"
 msgstr "Preview using medium width"
 
-#: app/configurator/components/configurator.tsx
+#: app/configurator/components/preview-breakpoint.tsx
 msgid "controls.layout.preview-sm"
 msgstr "Preview using small width"
 
@@ -840,7 +840,7 @@ msgstr "Layout Options"
 msgid "controls.section.shared-filters"
 msgstr "Shared filters"
 
-#: app/configurator/components/layout-configurator.tsx
+#: app/charts/shared/use-combined-temporal-dimension.ts
 msgid "controls.section.shared-filters.date"
 msgstr "Date"
 
@@ -1197,15 +1197,15 @@ msgstr "Datasets"
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.preview.description"
-msgstr "Review data preview of new available dimensions and continue to edit visualization."
+msgstr "Review data preview of available dimensions and continue to edit visualization."
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.preview.new-dimension"
 msgstr "New"
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.preview.title"
-msgstr "Review available dimensions"
+msgstr "Available dimensions"
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.search-options.more-2-options-selected"
@@ -1364,6 +1364,10 @@ msgstr "Copy"
 msgid "login.chart.delete"
 msgstr "Delete"
 
+#: app/login/components/profile-tables.tsx
+msgid "login.chart.delete-draft.confirmation"
+msgstr "Are you sure you want to delete this draft?"
+
 #: app/login/components/profile-tables.tsx
 msgid "login.chart.delete.confirmation"
 msgstr "Are you sure you want to delete this chart?"
@@ -1401,6 +1405,10 @@ msgstr "No charts yet"
 msgid "login.profile.chart.confirmation.default"
 msgstr "Are you sure you want to perform this action?"
 
+#: app/login/components/profile-tables.tsx
+msgid "login.profile.chart.delete-draft.warning"
+msgstr "This action cannot be undone."
+
 #: app/login/components/profile-tables.tsx
 msgid "login.profile.chart.delete.warning"
 msgstr "Keep in mind that removing this visualization will affect all the places where it might be already embedded!"
@@ -1569,11 +1577,6 @@ msgstr "Week"
 msgid "time-units.Year"
 msgstr "Year"
 
-#: app/components/chart-footnotes.tsx
-#: app/components/chart-footnotes.tsx
-msgid "typography.colon"
-msgstr ":"
-
 #: app/components/confirmation-dialog.tsx
 msgid "yes"
 msgstr "Yes"