[dir view] for file items: added 'Properties' to its context menu, (#5581)

* [dir view] for file items: added 'Properties' to its context menu,
'more' dropdown menus in <tr> & the top toolbar

- click 'Properties', the 'info' panel will be shown

* [dir view] operation menu for file item: removed 'Comment', moved 'Properties'

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -170,6 +170,9 @@ class DirentGridView extends React.Component {
       case 'Access Log':
         this.onAccessLog(currentObject);
         break;
+      case 'Properties':
+        this.props.showDirentDetail('info');
+        break;
       case 'Open via Client':
         this.onOpenViaClient(currentObject);
         break;

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -283,6 +283,10 @@ class DirentListItem extends React.Component {
       case 'Access Log':
         this.onAccessLog();
         break;
+      case 'Properties':
+        this.props.onDirentClick(this.props.dirent);
+        this.props.showDirentDetail('info');
+        break;
       case 'Open via Client':
         this.onOpenViaClient();
         break;

frontend/src/components/toolbar/multiple-dir-operation-toolbar.js

@@ -220,6 +220,9 @@ class MultipleDirOperationToolbar extends React.Component {
       case 'Access Log':
         this.onAccessLog(dirent);
         break;
+      case 'Properties':
+        this.props.showDirentDetail('info');
+        break;
       case 'Open via Client':
         this.onOpenViaClient(dirent);
         break;

frontend/src/components/toolbar/view-mode-toolbar.js

@@ -34,7 +34,7 @@ class ViewModeToolbar extends React.Component {
         </div>
         {!this.props.isCustomPermission && (
           <div className="detail-btn btn-group">
-            <button className="btn btn-secondary btn-icon ml-1 fas fa-info" id='detail' title={gettext('Detail')} aria-label={gettext('Detail')} onClick={this.switchViewMode}></button>
+            <button className="btn btn-secondary btn-icon ml-1 fas fa-info" id='detail' title={gettext('Properties')} aria-label={gettext('Properties')} onClick={this.switchViewMode}></button>
           </div>
         )}
       </React.Fragment>

frontend/src/utils/text-translation.js

@@ -22,6 +22,7 @@ const TextTranslation = {
   'COMMENT' : {key : 'Comment', value : gettext('Comment')},
   'HISTORY' : {key : 'History', value : gettext('History')},
   'ACCESS_LOG' : {key : 'Access Log', value : gettext('Access Log')},
+  'PROPERTIES' : {key : 'Properties', value : gettext('Properties')},
   'TAGS': {key: 'Tags', value: gettext('Tags')},
   'ONLYOFFICE_CONVERT': {key: 'Convert with ONLYOFFICE', value: gettext('Convert with ONLYOFFICE')}
 };

frontend/src/utils/utils.js

@@ -527,7 +527,7 @@ export const Utils = {
   getFileOperationList: function(isRepoOwner, currentRepoInfo, dirent, isContextmenu) {
     let list = [];
     const { SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, TAGS, UNLOCK, LOCK, MARK_AS_DRAFT, UNMARK_AS_DRAFT,
-      COMMENT, HISTORY, ACCESS_LOG, OPEN_VIA_CLIENT, ONLYOFFICE_CONVERT } = TextTranslation;
+      COMMENT, HISTORY, ACCESS_LOG, PROPERTIES, OPEN_VIA_CLIENT, ONLYOFFICE_CONVERT } = TextTranslation;
     const permission = dirent.permission;
     const { isCustomPermission, customPermission } = Utils.getUserPermission(permission);
 
@@ -601,10 +601,12 @@ export const Utils = {
           list.push(MARK_AS_DRAFT);
         }
       }
+      /*
       if (enableFileComment) {
         list.push(COMMENT);
       }
-      list.push(HISTORY);
+      */
+      list.push(PROPERTIES, HISTORY);
       if (isPro && fileAuditEnabled) {
         list.push(ACCESS_LOG);
       }
@@ -615,9 +617,11 @@ export const Utils = {
       if (!currentRepoInfo.encrypted) {
         list.push(COPY);
       }
+      /*
       if (enableFileComment) {
         list.push(COMMENT);
       }
+      */
       list.push(HISTORY);
     }