[3312] Put some widgets on one line

Bug: eclipse-sirius#3312 Signed-off-by: Arthur Daussy <arthur.daussy@obeo.fr>
adaussy · Apr 4, 2024 · 5f78255 · 5f78255
1 parent 6e166e6
commit 5f78255
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 22 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -76,6 +76,8 @@ image:doc/screenshots/inside_outside_labels.png[Isinde outside label example, 70
 - https://github.com/eclipse-sirius/sirius-web/issues/3279[#3279] [gantt] The expressions `TaskDescription#startTimeExpression` and `TaskDescription#endTimeExpression` can now both accept `String` values as a result if those values can be parsed by `java.timeInstant#parse`.
 They still support returning an `java.time.Instant` object directly.
 - https://github.com/eclipse-sirius/sirius-web/issues/3309[#3309] [diagram] Hide header border-bottom when the node is collapsed
+- https://github.com/eclipse-sirius/sirius-web/issues/3312[#3312] Make the details view more compact
+
 
 
 == v2024.3.0

diff --git a/...ges/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx b/...ges/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx
@@ -58,6 +58,11 @@ const useStyle = makeStyles<Theme, ButtonStyleProps>((theme) => ({
   icon: {
     marginRight: ({ iconOnly }) => (iconOnly ? theme.spacing(0) : theme.spacing(2)),
   },
+  propertySection: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2),
+  },
 }));
 
 export const pushButtonMutation = gql`
@@ -194,7 +199,7 @@ export const ButtonPropertySection: PropertySectionComponent<GQLButton> = ({
   };
 
   return (
-    <div>
+    <div className={classes.propertySection}>
       <PropertySectionLabel
         editingContextId={editingContextId}
         formId={formId}

diff --git a/...orms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx b/...orms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx
@@ -27,9 +27,13 @@ const useStyle = makeStyles<Theme, LabelStyleProps>((theme) => ({
     fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
     verticalAlign: 'baseline',
-    'align-items': 'center',
+    alignItems: 'center',
     display: 'flex',
-    margingLeft: theme.spacing(2),
+  },
+  propertySection: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2),
   },
 }));
 
@@ -49,7 +53,7 @@ export const LabelWidgetPropertySection: PropertySectionComponent<GQLLabelWidget
   };
   const classes = useStyle(props);
   return (
-    <div>
+    <div className={classes.propertySection}>
       <PropertySectionLabel
         editingContextId={editingContextId}
         formId={formId}

diff --git a/...ages/forms/frontend/sirius-components-forms/src/propertysections/PropertySectionLabel.tsx b/...ages/forms/frontend/sirius-components-forms/src/propertysections/PropertySectionLabel.tsx
@@ -22,7 +22,6 @@ const usePropertySectionLabelStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    marginRight: theme.spacing(2),
   },
   subscribers: {
     marginLeft: 'auto',
@@ -46,21 +45,26 @@ const usePropertySectionLabelStyles = makeStyles((theme) => ({
 
 export const PropertySectionLabel = ({ editingContextId, formId, widget, subscribers }: PropertySectionLabelProps) => {
   const classes = usePropertySectionLabelStyles();
-  return (
-    <div className={classes.propertySectionLabel}>
-      <Typography className={classes.typography} variant="subtitle2">
-        {widget.label}
-      </Typography>
-      {widget.hasHelpText ? (
-        <HelpTooltip editingContextId={editingContextId} formId={formId} widgetId={widget.id} />
-      ) : null}
-      <div className={classes.subscribers}>
-        {subscribers.map((subscriber) => (
-          <Tooltip title={subscriber.username} arrow key={subscriber.username}>
-            <Avatar classes={{ root: classes.avatar }}>{subscriber.username.substring(0, 1).toUpperCase()}</Avatar>
-          </Tooltip>
-        ))}
+
+  if (!widget.label && subscribers.length == 0 && !widget.hasHelpText) {
+    return null;
+  } else {
+    return (
+      <div className={classes.propertySectionLabel}>
+        <Typography className={classes.typography} variant="subtitle2">
+          {widget.label}
+        </Typography>
+        {widget.hasHelpText ? (
+          <HelpTooltip editingContextId={editingContextId} formId={formId} widgetId={widget.id} />
+        ) : null}
+        <div className={classes.subscribers}>
+          {subscribers.map((subscriber) => (
+            <Tooltip title={subscriber.username} arrow key={subscriber.username}>
+              <Avatar classes={{ root: classes.avatar }}>{subscriber.username.substring(0, 1).toUpperCase()}</Avatar>
+            </Tooltip>
+          ))}
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 };
diff --git a/...orms/frontend/sirius-components-forms/src/propertysections/SplitButtonPropertySection.tsx b/...orms/frontend/sirius-components-forms/src/propertysections/SplitButtonPropertySection.tsx
@@ -78,6 +78,14 @@ const useStyle = makeStyles<Theme, ButtonStyleProps>((theme) => ({
   },
 }));
 
+const useContainerStyle = makeStyles<Theme>((theme) => ({
+  style: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2),
+  },
+}));
+
 export const updateWidgetFocusMutation = gql`
   mutation updateWidgetFocus($input: UpdateWidgetFocusInput!) {
     updateWidgetFocus(input: $input) {
@@ -161,6 +169,8 @@ export const SplitButtonPropertySection = ({
     return useStyle(props);
   });
 
+  const containerClasses = useContainerStyle();
+
   const [pushButton, { loading, data, error }] = useMutation<GQLPushButtonMutationData, GQLPushButtonMutationVariables>(
     pushButtonMutation
   );
@@ -245,7 +255,7 @@ export const SplitButtonPropertySection = ({
   };
 
   return (
-    <div>
+    <div className={containerClasses.style}>
       <PropertySectionLabel
         editingContextId={editingContextId}
         formId={formId}