Merge pull request #7618 from weseek/feat/86710-95016-clean-code

feat: Use attachment svg file

apps/app/public/images/icons/editor/attachment.svg

@@ -0,0 +1,11 @@
+<svg id="group_5327" data-name="group 5327" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="28.093" viewBox="0 0 24 28.093">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="rectangle_1922" data-name="rectangle 1922" width="24" height="28.093" fill="#6c757d" stroke="rgba(0,0,0,0)" stroke-width="1"/>
+    </clipPath>
+  </defs>
+  <g id="group_5319" data-name="group 5319" clip-path="url(#clip-path)">
+    <path id="pass_4850" data-name="pass 4850" d="M20.6,16.976l-.651,1.17a4.292,4.292,0,0,1-.828,1.031V21H13.7v5.619H1.479V1.479H19.123v2a1.932,1.932,0,0,1,.2.094l1.282.714V0H0V28.093H15.18v0h0L20.6,22.48l-.006-.006H20.6ZM15.18,25.957V22.474h3.369Z" fill="#6c757d" stroke="rgba(0,0,0,0)" stroke-width="1"/>
+    <path id="pass_4851" data-name="pass 4851" d="M203.477,65.236a.648.648,0,0,1,.509.96l-5.117,9.2a3.483,3.483,0,0,0,1.537,4.427,3.8,3.8,0,0,0,3.11.3,3.293,3.293,0,0,0,1.744-1.212l4.784-8.6-3.846-2.14L201.727,76.2c0,.007-.36.684.2,1a.825.825,0,0,0,.689.1.9.9,0,0,0,.461-.417l3.591-6.454,1.131.629-3.592,6.454a2.176,2.176,0,0,1-1.158,1.008,2.074,2.074,0,0,1-1.752-.19,1.832,1.832,0,0,1-.973-1.509,2.366,2.366,0,0,1,.271-1.248l4.786-8.6a.647.647,0,0,1,.88-.251l4.978,2.77a.647.647,0,0,1,.251.88l-5.1,9.163a4.531,4.531,0,0,1-2.469,1.811,5.062,5.062,0,0,1-4.146-.4,4.767,4.767,0,0,1-2.039-6.188l5.117-9.2a.648.648,0,0,1,.622-.33" transform="translate(-187.572 -62.019)" fill="#6c757d" stroke="rgba(0,0,0,0)" stroke-width="1"/>
+  </g>
+</svg>

apps/app/src/components/ReactMarkdownComponents/Attachment.tsx

@@ -26,14 +26,18 @@ export const Attachment: React.FC<{
     );
   }
 
+  // TODO: locale support
+  // TODO: User Picture Tooltip
+  // TODO: Ensure that the card style does not collapse when d-inline-blocked
+
   return (
-    <div className="card my-3" style={{ width: 'fit-content' }}>
-      <div className="card-body pr-0">
+    <div className="card my-3">
+      <div className="card-body py-1">
         <div className='row'>
-          <div className='col-2'>
-            <div className='icon-doc' style={{ fontSize: '2.7rem', opacity: '0.5' }}/>
+          <div className='col-1 px-0 d-flex align-items-center justify-content-center'>
+            <img src='/images/icons/editor/attachment.svg'/>
           </div>
-          <div className='col-10'>
+          <div className='col-11 pl-0'>
             <div>
               <a target="_blank" rel="noopener noreferrer" href={attachment.filePathProxied}>{attachment.originalName}</a>
               <span className='ml-2'>
@@ -49,8 +53,7 @@ export const Attachment: React.FC<{
             </div>
             <div>
               <UserPicture user={attachment.creator} size="sm"></UserPicture>
-              {/* TODO: check locale */}
-              <span className='ml-2 text-muted'>{new Date(attachment.createdAt).toLocaleString()}</span>
+              <span className='ml-2 text-muted'>{new Date(attachment.createdAt).toLocaleString('ja-JP')}</span>
               <span className='border-left ml-2 pl-2 text-muted'>{prettyBytes(attachment.fileSize)}</span>
             </div>
           </div>

packages/ui/src/components/Attachment.tsx

@@ -5,7 +5,7 @@ import { UserPicture } from './User/UserPicture';
 type AttachmentProps = {
   attachment: IAttachmentHasId,
   inUse: boolean,
-  onAttachmentDeleteClicked: (attachment: IAttachmentHasId) => void,
+  onAttachmentDeleteClicked?: (attachment: IAttachmentHasId) => void,
   isUserLoggedIn?: boolean,
 };
 
@@ -16,7 +16,9 @@ export const Attachment = (props: AttachmentProps): JSX.Element => {
   } = props;
 
   const _onAttachmentDeleteClicked = () => {
-    onAttachmentDeleteClicked(attachment);
+    if (onAttachmentDeleteClicked != null) {
+      onAttachmentDeleteClicked(attachment);
+    }
   };
 
   const formatIcon = (attachment.fileFormat.match(/image\/.+/i)) ? 'icon-picture' : 'icon-doc';