PMG-6: add better style classes to inbox component and smart unread s…

…ignal (#2002) * PMG-6 add style class selectors in inbox and entity chooser * PMG-6 review selector class names * PMG-6 improve class names * PMG-6 class names addition : use cx() instead of + '' * PMG-6 - inbox label : set sender + date on same line * PMG-6 - inbox display : date on the right side without label * PMG-6 - inbox : add a smart unread signal
Heigvd · Dec 19, 2024 · 7e0a306 · 7e0a306
1 parent 79a4552
commit 7e0a306
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 44 deletions.
diff --git a/wegas-app/src/main/node/wegas-react/src/Components/EntityChooser.tsx b/wegas-app/src/main/node/wegas-react/src/Components/EntityChooser.tsx
@@ -92,8 +92,8 @@ export const entityChooserLabelContainer = css({
       }, */
 });
 
-export const activeEntityChooserLabel = css(
-  {
+export const activeEntityChooserLabel = cx(
+  css({
     backgroundColor: themeVar.colors.PrimaryColor,
     color: themeVar.colors.LightTextColor,
     boxShadow: `2px 2px 6px 2px rgba(0, 0, 0, 0.2)`,
@@ -106,7 +106,7 @@ export const activeEntityChooserLabel = css(
   /*
         borderLeft: `20px solid ${themeVar.colors.ActiveColor}`,
     */
-);
+  ), 'wegas-entity-chooser--active');
 
 interface LabelGeneratorProps<E extends IAbstractEntity> {
   entity: E;
@@ -266,14 +266,17 @@ export function EntityChooser<E extends IAbstractEntity>({
     return (
       <div
         className={
-          cx(flex, flexRow, entityChooser, {
-            [halfOpacity]: disabled,
-          }) + classNameOrEmpty(className)
-        }
+          cx(flex, flexRow,
+            entityChooser,
+            {
+              [halfOpacity]: disabled,
+            },
+            classNameOrEmpty(className),
+            'wegas-entity-chooser')}
         style={style}
         ref={setRef}
       >
-        <div className={cx(flex, flexColumn, labelList)}>
+        <div className={cx(flex, flexColumn, labelList, 'wegas-entity-chooser__list')}>
           {entities.map(e => (
             <LabelGenerator
               key={e.id}
@@ -286,11 +289,11 @@ export function EntityChooser<E extends IAbstractEntity>({
           {addComponent}
         </div>
         {entity != null ? (
-          <div className={cx(flex, entityContainer, justifyStart)}>
+          <div className={cx(flex, entityContainer, justifyStart, 'wegas-entity-chooser__display')}>
             {children({ entity, disabled, readOnly })}
           </div>
         ) : (
-          <div className={cx(flex, entityContainer, justifyCenter)}>
+          <div className={cx(flex, entityContainer, justifyCenter, 'wegas-entity-chooser__no-selection')}>
             {noSelectionMessage}
           </div>
         )}
@@ -337,7 +340,7 @@ export function DefaultEntityChooserLabel<T extends IAbstractEntity>({
           {
             [activeEntityChooserLabel]: selected,
           },
-        )}
+        'wegas-entity-chooser__choice')}
       >
         {children}
       </div>

diff --git a/wegas-app/src/main/node/wegas-react/src/Components/Outputs/Inbox.tsx b/wegas-app/src/main/node/wegas-react/src/Components/Outputs/Inbox.tsx
@@ -15,6 +15,7 @@ import {
   flexWrap,
   itemCenter,
   toolboxHeaderStyle,
+  unreadSignalStyle,
 } from '../../css/classes';
 import { getInstance } from '../../data/methods/VariableDescriptorMethods';
 import { readMessage } from '../../data/Reducer/VariableInstanceReducer';
@@ -48,26 +49,46 @@ const messageLabel = css({
   overflow: 'hidden',
 });
 
-const readLabelStyle = css({
-  fontWeight: 'normal',
-  backgroundColor: themeVar.colors.HeaderColor,
-  color: themeVar.colors.DarkTextColor,
-  '&:hover': {
-    boxShadow: `2px 2px 6px 2px rgba(0, 0, 0, 0.4)`,
-  },
-});
+const readLabelStyle = cx(
+  css({
+    fontWeight: 'normal',
+    backgroundColor: themeVar.colors.HeaderColor,
+    color: themeVar.colors.DarkTextColor,
+    '&:hover': {
+      boxShadow: `2px 2px 6px 2px rgba(0, 0, 0, 0.4)`,
+    },
+  }),
+  'wegas-inbox--read');
+
+const unreadLabelStyle = cx(
+  css({
+    fontWeight: 'bold',
+  }),
+  unreadSignalStyle,
+  'wegas-inbox--unread');
 
-const unreadLabelStyle = css({
-  fontWeight: 'bold',
+const labelTitleStyle = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
 });
 
-const labelTitleStyle = css({
+const labelSenderStyle = css({
   flexShrink: 1,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
 });
 
+const labelDateStyle = css({
+  flexShrink: 0,
+  whiteSpace: 'nowrap',
+});
+
+const displayDateStyle = css({
+  alignSelf: 'flex-end',
+});
+
 const attachmentDisplay = cx(
   flex,
   flexRow,
@@ -81,17 +102,17 @@ function MessageLabel({ message }: MessageLabelProps) {
   const translatedDate = useTranslate(message.date);
 
   return (
-    <div className={cx(flex, itemCenter, messageLabel)}>
+    <div className={cx(flex, expandWidth, itemCenter, messageLabel)}>
       <div className={cx(flex, flexColumn, expandWidth)}>
+        <div className={cx(labelTitleStyle, 'wegas-inbox__label-subject')}>{translatedLabel}</div>
         <div className={cx(flex, flexRow, flexBetween)}>
-          <div className={cx(labelTitleStyle)}>{translatedLabel}</div>
+          {translatedFrom && (
+            <div className={cx(defaultMarginTop, labelSenderStyle, 'wegas-inbox__label-from')}>{translatedFrom}</div>
+          )}
           {translatedDate && (
-            <div className={css({ flexShrink: 0 })}>&nbsp;{translatedDate}</div>
+            <div className={cx(defaultMarginTop, labelDateStyle, 'wegas-inbox__label-date')}>&nbsp;{translatedDate}</div>
           )}
         </div>
-        {translatedFrom && (
-          <div className={cx(flex, defaultMarginTop)}>{translatedFrom}</div>
-        )}
       </div>
     </div>
   );
@@ -113,7 +134,7 @@ function MessageChooser(props: EntityChooserLabelProps<IMessage>) {
   return (
     <DefaultEntityChooserLabel {...props} customLabelStyle={customLabelStyle}>
       <div
-        className={cx(flex, flexRow, itemCenter)}
+        className={cx(flex, flexRow, itemCenter, 'wegas-inbox__choice')}
         onClick={() => editingStore.dispatch(readMessage(message))}
       >
         {props.mobile && (
@@ -138,9 +159,9 @@ function AttachmentsDisplay({ attachments }: AttachmentsDisplayProps) {
   const files = attachments.map(attachment => translate(attachment.file, lang, availableLang));
 
   return (
-    <div className={attachmentDisplay}>
+    <div className={cx(attachmentDisplay, 'wegas-inbox__attachments-list')}>
       {files.map((file, index) => (
-        <span className={css({ marginLeft: '5px' })} key={index}>
+        <span className={cx(css({ marginLeft: '5px' }), 'wegas-inbox__attachment')} key={index}>
           <a href={fileURL(file)} target="_blank" rel="noreferrer">
             {file.slice(1)}
           </a>
@@ -164,18 +185,18 @@ function MessageDisplay({ entity }: MessageDisplayProps) {
   const attachments = entity.attachments;
 
   return (
-    <div className={defaultEntityDisplay}>
-      <div className={cx(toolboxHeaderStyle)}>
+    <div className={cx(defaultEntityDisplay, 'wegas-inbox__display')}>
+      <div className={cx(flex, flexColumn, toolboxHeaderStyle, 'wegas-inbox__header')}>
         {subject && (
-          <div className={cx(bolder, defaultMarginBottom)}>{subject}</div>
+          <div className={cx(bolder, defaultMarginBottom, 'wegas-inbox__display-subject')}>{subject}</div>
         )}
         {date && (
-          <div>
-            {i18nComponentValues.inbox.date}: {date}
+          <div className={cx(displayDateStyle, 'wegas-inbox__display-date')}>
+            {date}
           </div>
         )}
         {from && (
-          <div>
+          <div className='wegas-inbox__display-from'>
             {i18nComponentValues.inbox.sender}: {from}
           </div>
         )}
@@ -186,7 +207,7 @@ function MessageDisplay({ entity }: MessageDisplayProps) {
           </div>
         )}
       </div>
-      <TranslatableText content={entity.body} />
+      <TranslatableText content={entity.body} className='wegas-inbox__body'/>
     </div>
   );
 }
@@ -222,7 +243,7 @@ export function InboxDisplay({
       readOnly={readOnly}
       noSelectionMessage={i18nComponentValues.inbox.noSelectionMessage}
       mobileDisplay={mobileDisplay}
-      className={className}
+      className={cx(className, 'wegas-inbox')}
       style={style}
     >
       {props => <MessageDisplay {...props} />}

diff --git a/wegas-app/src/main/node/wegas-react/src/css/classes.ts b/wegas-app/src/main/node/wegas-react/src/css/classes.ts
@@ -355,12 +355,18 @@ export const dropZoneStyle = css({
 
 export const unreadSignalStyle = css({
   '::before': {
-    content: '"New"',
-    transform: 'rotate(-90deg)',
+    content: '""',
     position: 'absolute',
-    fontSize: '10pt',
-    fontWeight: 'bold',
-    color: 'orange',
+    top: '50%',
+    left: '0.5rem',
+    width: '0.5rem',
+    height: '0.5rem',
+    transform: 'translateY(-50%)',
+    backgroundColor: themeVar.colors.PrimaryColor,
+    borderRadius: '100%',
+  },
+  '&> div': {
+    marginLeft: '1rem',
   },
 });