Merge pull request #1036 from ONLYOFFICE/bugfix/new-files-info

Bugfix/new files info

packages/client/src/components/panels/NewFilesPanel/index.js

@@ -80,12 +80,18 @@ class NewFilesPanel extends React.Component {
   onNewFileClick = (e) => {
     const { id, extension: fileExst } = e.target.dataset;
 
-    const { /* updateFolderBadge, */ markAsRead } = this.props;
+    const {
+      /* updateFolderBadge, */ markAsRead,
+      newFiles,
+      refreshFiles,
+    } = this.props;
     const readingFiles = this.state.readingFiles;
 
     const fileIds = fileExst ? [id] : [];
     const folderIds = fileExst ? [] : [id];
 
+    const item = newFiles.find((file) => file.id.toString() === id);
+
     if (readingFiles.includes(id)) return this.onFileClick(item);
     markAsRead(folderIds, fileIds, item)
       .then(() => {
@@ -95,6 +101,7 @@ class NewFilesPanel extends React.Component {
         this.setState({ readingFiles });
         this.onFileClick(item);
       })
+      .then(() => refreshFiles())
       .catch((err) => toastr.error(err));
   };
 
@@ -198,6 +205,7 @@ class NewFilesPanel extends React.Component {
                 <StyledSharingBody stype="mediumBlack" style={SharingBodyStyle}>
                   {newFiles.map((file) => {
                     const element = this.getItemIcon(file);
+
                     return (
                       <Row key={file.id} element={element}>
                         <Link
@@ -205,7 +213,7 @@ class NewFilesPanel extends React.Component {
                           containerWidth="100%"
                           type="page"
                           fontWeight={600}
-                          color="#333"
+                          color={theme.filesPanels.color}
                           isTextOverflow
                           truncate
                           title={file.title}
@@ -214,19 +222,7 @@ class NewFilesPanel extends React.Component {
                           data-id={file.id}
                           data-extension={file.fileExst}
                         >
-                          <Link
-                            containerWidth="100%"
-                            type="page"
-                            fontWeight="bold"
-                            color={theme.filesPanels.color}
-                            isTextOverflow
-                            truncate
-                            title={file.title}
-                            fontSize="14px"
-                            className="files-new-link"
-                          >
-                            {file.title}
-                          </Link>
+                          {file.title}
                         </Link>
                       </Row>
                     );
@@ -243,7 +239,7 @@ class NewFilesPanel extends React.Component {
             )}
             <StyledFooter>
               <Button
-                className="new_files_panel-button"
+                className="new_files_panel-button new_file_panel-first-button"
                 label={t("MarkAsRead")}
                 size="normal"
                 primary
@@ -251,7 +247,7 @@ class NewFilesPanel extends React.Component {
                 isLoading={this.state.inProgress}
               />
               <Button
-                className="sharing_panel-button"
+                className="new_files_panel-button"
                 label={t("Common:CloseButton")}
                 size="normal"
                 onClick={this.onClose}

packages/client/src/components/panels/StyledPanels.js

@@ -461,9 +461,13 @@ const StyledFooter = styled.div`
   .sharing_panel-button {
     margin-left: auto;
   }
-  .new_files_panel-button {
+
+  .new_file_panel-first-button {
     margin-right: 8px;
   }
+  .new_files_panel-button {
+    width: 100%;
+  }
 
   @media ${desktop} {
     padding: 16px;

packages/components/catalog-item/styled-catalog-item.js

@@ -389,18 +389,15 @@ const StyledCatalogItemContainer = styled.div`
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  .catalog-item__badge,
   .catalog-item__icon {
     display: none;
   }
 
-  .catalog-item__badge:target,
   .catalog-item__icon:target {
     display: flex;
   }
 
   :hover {
-    .catalog-item__badge,
     .catalog-item__icon {
       display: flex;
     }