Merge pull request #553 from Heigvd/sam-quick-wins

### General
- shrink progress bar height
- remove user common name
### Main view
- hide drop down menu when not hovering a card
- card grid width of inside cards
### Team panel
- harmonization
- remove edition of current user data
### My tasks
- header of sections display improvement

Author: SandraMonnier

colab-webapp/src/main/node/app/src/components/cards/CardEditor.tsx

@@ -21,7 +21,7 @@ import Flex from '../common/layout/Flex';
 import { Item, SideCollapsibleCtx } from '../common/layout/SideCollapsibleContext';
 import { TextEditorContext } from '../documents/texteditor/TextEditorContext';
 import { ResourcesMainViewHeader, ResourcesMainViewPanel } from '../resources/ResourcesMainView';
-import CardAssignmentsPanel from '../team/CardAssignments';
+import CardAssignmentsPanel from '../team/CardAssignmentsTable';
 import CardEditorDeliverable from './CardEditorDeliverable';
 import CardEditorHeader from './CardEditorHeader';
 import CardEditorSideMenu from './CardEditorSideMenu';

colab-webapp/src/main/node/app/src/components/cards/CardRootView.tsx

@@ -9,7 +9,7 @@ import { css } from '@emotion/css';
 import { CardContent } from 'colab-rest-client';
 import * as React from 'react';
 import { useAndLoadSubCards } from '../../store/selectors/cardSelector';
-import { space_sm } from '../../styling/style';
+import { space_lg, space_sm, space_xs } from '../../styling/style';
 import InlineLoading from '../common/element/InlineLoading';
 import Flex from '../common/layout/Flex';
 import { PresenceContext } from '../presence/PresenceContext';
@@ -43,7 +43,11 @@ export default function RootView({ rootContent }: { rootContent: CardContent | n
       })}
     >
       <Dndwrapper cards={subCards}>
-        <ProjectBreadcrumbs />
+        <ProjectBreadcrumbs
+          className={css({
+            padding: space_xs + ' ' + space_xs + ' ' + space_xs + ' ' + space_lg,
+          })}
+        />
         {rootContent != null && rootContent.id != null ? (
           <Flex className={css({ overflow: 'hidden' })} justify="center" direction="row" grow={1}>
             <Flex

colab-webapp/src/main/node/app/src/components/cards/CardThumb.tsx

@@ -59,6 +59,15 @@ const cardThumbContentStyle = (depth?: number) => {
   }
 };
 
+// TODO : show only when hovering THE card
+const onHoverStyle = css({
+  '&:hover': {
+    '.visibleOnHover ': {
+      visibility: 'visible',
+    },
+  },
+});
+
 // export interface TinyCardProps {
 //   card: Card;
 //   width?: string;
@@ -174,7 +183,11 @@ export default function CardThumb({
             coveringColor={coveringColor}
             showBorder={depth !== 2}
           >
-            <Flex grow="1" align="stretch" className={css({ overflow: 'hidden' })}>
+            <Flex
+              grow="1"
+              align="stretch"
+              className={cx(onHoverStyle, css({ overflow: 'hidden' }))}
+            >
               {mayOrganize && variant && (
                 <CardCreatorAndOrganize
                   rootContent={variant}
@@ -218,17 +231,14 @@ export default function CardThumb({
                         <Flex
                           // align="stretch"
                           // justify="stretch"
-                          className={cx(
-                            'FlexItem',
-                            css({ flexGrow: 1 }),
-                          )}
+                          className={cx('FlexItem', css({ flexGrow: 1 }))}
                         >
-                          {card.deletionStatus != null &&
+                          {card.deletionStatus != null && (
                             <Flex className={css({ margin: '0 ' + space_sm, flexShrink: 0 })}>
                               {/* It should not be displayed if deleted. But whenever there is a bug, it is obvious */}
                               <DeletionStatusIndicator status={card.deletionStatus} size="sm" />
                             </Flex>
-                          }
+                          )}
                           {depth === 1 ? (
                             <DiscreetInput
                               value={card.title || ''}
@@ -268,8 +278,7 @@ export default function CardThumb({
                                   margin: '2px 2px 6px 2px',
                                 }),
                               )}
-                              containerClassName={
-                                css({ flexGrow: 1 })}
+                              containerClassName={css({ flexGrow: 1 })}
                               autoWidth={false}
                               rows={2}
                             />
@@ -310,7 +319,10 @@ export default function CardThumb({
                         <DropDownMenu
                           icon={'more_vert'}
                           valueComp={{ value: '', label: '' }}
-                          buttonClassName={cx(lightIconButtonStyle)}
+                          buttonClassName={
+                            'visibleOnHover ' +
+                            cx(lightIconButtonStyle, css({ visibility: 'hidden' }))
+                          }
                           className={css({ alignSelf: depth === 0 ? 'flex-start' : 'center' })}
                           entries={[
                             {

colab-webapp/src/main/node/app/src/components/cards/ProgressBar.tsx

@@ -12,7 +12,7 @@ import { debounce } from 'lodash';
 import * as React from 'react';
 import * as API from '../../API/api';
 import { useAppDispatch } from '../../store/hooks';
-import { space_lg } from '../../styling/style';
+import { space_md, space_sm } from '../../styling/style';
 import { cardColors, lightColor, vividColor } from '../../styling/theme';
 
 const xTranslationOnLimits = '5px';
@@ -104,7 +104,7 @@ const progressBarFulfilledStyle = (percentage: number, color: string) =>
 export function ProgressBar({
   card,
   variant,
-  size = space_lg,
+  size = space_sm,
 }: {
   card: Card;
   variant: CardContent | undefined;
@@ -136,7 +136,7 @@ export function ProgressBarEditor({
   card,
   variant,
   readOnly = false,
-  size = space_lg,
+  size = space_md,
 }: ProgressBarEditorProps): JSX.Element {
   const dispatch = useAppDispatch();
 

colab-webapp/src/main/node/app/src/components/cards/SubCardsGrid.tsx

@@ -145,10 +145,19 @@ export default function SubCardsGrid({
   const [showMoreCards, setShowMoreCards] = React.useState<boolean>(false);
 
   const effectiveNbCardByRow: number = React.useMemo(() => {
+    const effectiveMaxRow = max((subCards || []).map(card => card.x)) || 0;
+
+    if (effectiveMaxRow < maxCardsInRow) {
+      if (effectiveMaxRow === 1) {
+        return 2;
+      }
+      return effectiveMaxRow;
+    }
+
     if (!showMoreCards) {
       return maxCardsInRow;
     }
-    const effectiveMaxRow = max((subCards || []).map(card => card.x));
+
     return max([effectiveMaxRow, maxCardsInRow]) || 0;
   }, [showMoreCards, subCards, maxCardsInRow]);
 
@@ -300,7 +309,7 @@ export default function SubCardsGrid({
                           lightIconButtonStyle,
                           br_md,
                           css({
-                            gridColumnStart: maxCardsInRow,
+                            gridColumnStart: effectiveNbCardByRow,
                             gridRowStart: maxCardsInColumn,
                           }),
                         )}

colab-webapp/src/main/node/app/src/components/common/element/Avatar.tsx

@@ -37,8 +37,7 @@ export default function Avatar({ currentUser }: AvatarProps): JSX.Element {
     currentUser.firstname && currentUser.lastname
       ? { first: currentUser.firstname, last: currentUser.lastname }
       : undefined;
-  const uncompleteName =
-    currentUser.commonname || currentUser.lastname || currentUser.firstname || '?';
+  const uncompleteName = currentUser.firstname || currentUser.lastname || '?';
   const letters = fullName
     ? `${fullName.first[0]}${fullName.last[0]}`.toUpperCase()
     : uncompleteName.slice(0, 2);

colab-webapp/src/main/node/app/src/components/common/element/Input.tsx

@@ -287,6 +287,8 @@ function Input({
     updateSize();
   }, [inputRef.current?.value, inputRef.current?.style, updateSize]);
 
+  updateSize();
+
   const updated = currentInternalValue !== initialValue;
 
   return (

colab-webapp/src/main/node/app/src/components/common/layout/DropDownMenu.tsx

@@ -383,58 +383,55 @@ export default function DropDownMenu<T extends string | number | symbol>({
         theRef={dropRef}
         onClick={clickIn}
         align="center"
-        className={css({ cursor: 'pointer' })}
+        direction="column"
+        className={cx(css({ cursor: 'pointer', overflow: 'visible' }), className)}
       >
-        <Flex direction="column" className={cx(css({ overflow: 'visible' }), className)}>
-          <Flex title={title} onClick={toggle} className={cx(buttonClassName) + ' dropDownButton'}>
-            {menuIcon === 'BURGER' && (
-              <span className={open ? openButtonStyle : buttonStyle}></span>
-            )}
-            {icon && <Icon icon={icon} />}
-            {buttonLabel && buttonLabel}
-            {showSelectedLabel && current.label && current.label}
-            {menuIcon === 'CARET' && (
-              <Icon icon={'expand_more'} className={css({ marginLeft: space_sm })} />
-            )}
-          </Flex>
-          {open && (
-            <div
-              className={cx(ddOptionsBodyStyle, dropClassName || '')}
-              ref={n => {
-                justifyDropMenu(n, n?.parentElement?.querySelector('.dropDownButton'), direction);
-              }}
-            >
-              {entries.map(entry => (
-                <div
-                  className={cx(
-                    entryStyle,
-                    {
-                      [disabledStyle]: entry.disabled,
-                    },
-                    {
-                      [subDropDownEntryStyle]: entry.subDropDownButton,
-                    },
-                    entryClassName,
-                  )}
-                  key={String(entry.value)}
-                  onClick={() => {
-                    if (entry.action) {
-                      entry.action();
-                    }
-                    if (onSelect != null) {
-                      onSelect(entry);
-                    }
-                    if (closeOnClick) {
-                      setOpen(false);
-                    }
-                  }}
-                >
-                  {entry.label}
-                </div>
-              ))}
-            </div>
+        <Flex title={title} onClick={toggle} className={cx(buttonClassName) + ' dropDownButton'}>
+          {menuIcon === 'BURGER' && <span className={open ? openButtonStyle : buttonStyle}></span>}
+          {icon && <Icon icon={icon} />}
+          {buttonLabel && buttonLabel}
+          {showSelectedLabel && current.label && current.label}
+          {menuIcon === 'CARET' && (
+            <Icon icon={'expand_more'} className={css({ marginLeft: space_sm })} />
           )}
         </Flex>
+        {open && (
+          <div
+            className={cx(ddOptionsBodyStyle, dropClassName || '')}
+            ref={n => {
+              justifyDropMenu(n, n?.parentElement?.querySelector('.dropDownButton'), direction);
+            }}
+          >
+            {entries.map(entry => (
+              <div
+                className={cx(
+                  entryStyle,
+                  {
+                    [disabledStyle]: entry.disabled,
+                  },
+                  {
+                    [subDropDownEntryStyle]: entry.subDropDownButton,
+                  },
+                  entryClassName,
+                )}
+                key={String(entry.value)}
+                onClick={() => {
+                  if (entry.action) {
+                    entry.action();
+                  }
+                  if (onSelect != null) {
+                    onSelect(entry);
+                  }
+                  if (closeOnClick) {
+                    setOpen(false);
+                  }
+                }}
+              >
+                {entry.label}
+              </div>
+            ))}
+          </div>
+        )}
       </Flex>
     );
   } else {

colab-webapp/src/main/node/app/src/components/common/layout/Modal.tsx

@@ -62,24 +62,24 @@ const fullScreenStyle = cx(
 // note : the size have been set by a not-UI-expert, feel free to change !
 const smallSizeStyle = cx(
   css({
-    height: '13em',
-    width: '22em',
+    width: '20em',
+    height: '12em',
   }),
 );
 
 // note : the size have been set by a not-UI-expert, feel free to change !
 const mediumSizeStyle = cx(
   css({
-    height: '18em',
-    width: '30em',
+    width: '48em',
+    height: '30em',
   }),
 );
 
 // note : the size have been set by a not-UI-expert, feel free to change !
 const largeSizeStyle = cx(
   css({
-    height: '42em',
     width: '58em',
+    height: '42em',
   }),
 );
 

colab-webapp/src/main/node/app/src/components/documents/texteditor/TextEditor.tsx

@@ -29,16 +29,18 @@ import { TextNode } from 'lexical';
 import * as React from 'react';
 import { WebsocketProvider } from 'y-websocket';
 import { Doc } from 'yjs';
-import { getDisplayName } from '../../../helper';
 import useTranslations from '../../../i18n/I18nContext';
 import logger from '../../../logger';
 import { useCurrentUser } from '../../../store/selectors/userSelector';
 import InlineLoading from '../../common/element/InlineLoading';
 import { TipsCtx } from '../../common/element/Tips';
+import { getDisplayName } from '../../team/UserName';
 import { DocumentOwnership } from '../documentCommonType';
 import { ExtendedTextNode } from './nodes/ExtendedTextNode';
 import { FileNode } from './nodes/FileNode';
 import { ImageNode } from './nodes/ImageNode';
+import LexicalAutoLinkPlugin from './plugins/AutoLinkPlugin';
+import DragDropPaste from './plugins/DragDropPastePlugin';
 import EmptinessSensorPlugin from './plugins/EmptinessSensorPlugin';
 import FilesPlugin from './plugins/FilesPlugin';
 import FloatingFileMenuPlugin from './plugins/FloatingToolbarPlugin/FloatingFileMenuPlugin';
@@ -52,8 +54,6 @@ import TableCellResizerPlugin from './plugins/TablePlugin/TableCellResizerPlugin
 import ToolbarPlugin from './plugins/ToolbarPlugin/ToolbarPlugin';
 import TreeViewPlugin from './plugins/TreeViewPlugin';
 import theme from './theme/EditorTheme';
-import LexicalAutoLinkPlugin from "./plugins/AutoLinkPlugin";
-import DragDropPaste from "./plugins/DragDropPastePlugin";
 
 const editorContainerStyle = css({
   width: '100%',
@@ -125,7 +125,7 @@ export default function TextEditor({ readOnly, docOwnership, url }: TextEditorPr
   const tipsCtxt = React.useContext(TipsCtx);
 
   const { currentUser } = useCurrentUser();
-  const displayName = getDisplayName(currentUser);
+  const displayName = getDisplayName(i18n, currentUser);
 
   const [floatingAnchorElem, setFloatingAnchorElem] = React.useState<HTMLDivElement | null>(null);
   const [isConnected, setIsConnected] = React.useState<boolean>(false);
@@ -232,7 +232,7 @@ export default function TextEditor({ readOnly, docOwnership, url }: TextEditorPr
             <TablePlugin />
             <TableCellResizerPlugin />
             <ImagesPlugin />
-            <DragDropPaste docOwnership={docOwnership}/>
+            <DragDropPaste docOwnership={docOwnership} />
             <FilesPlugin />
             {/* <CardLinkPlugin /> */}
             <TabIndentationPlugin />