Add metadata kanban collapsed tip (#7628)

* 01 change tip color to # 666

* 02 show tips when Kanban is collapsed

* 03 fix warning

frontend/src/css/file-history-old.css

@@ -46,7 +46,7 @@
 }
 
 .old-history-main p {
-  color: #808080;
+  color: #666;
   font-size: 12px;
   margin-top: 0;
   margin-bottom: 1rem;

frontend/src/css/file-view.css

@@ -113,7 +113,7 @@ body {
 }
 
 .tip {
-  color: #808080;
+  color: #666;
 }
 
 .file-details-container {

frontend/src/css/share-link-dialog.css

@@ -117,7 +117,7 @@
 }
 
 .tip {
-  color: #808080;
+  color: #666;
   margin-bottom: 1rem;
 }
 

frontend/src/metadata/views/kanban/boards/board/header/index.js

@@ -9,6 +9,7 @@ import { CellType } from '../../../../../constants';
 import './index.css';
 
 const Header = ({ readonly, haveFreezed, value, groupByColumn, cardsQuantity, onDelete, onFreezed, onUnFreezed, isCollapsed, onCollapse }) => {
+  // eslint-disable-next-line no-unused-vars
   const [active, setActive] = useState(false);
 
   const headerRef = useRef();
@@ -53,16 +54,14 @@ const Header = ({ readonly, haveFreezed, value, groupByColumn, cardsQuantity, on
         )}
         <span className="cards-quantity">{cardsQuantity}</span>
       </div>
-      {active && (
-        <div className="board-header-operation-btn">
-          {value && !readonly && <OpMenu onDelete={onDelete} onFreezed={onFreezed} onUnFreezed={handelUnFreezed} />}
-          <i
-            className={classNames('sf3-font sf3-font-down kanban-header-op-btn kanban-header-collapse-btn', { 'rotate-90': isCollapsed })}
-            title={isCollapsed ? gettext('Expand') : gettext('Collapse')}
-            onClick={handleCollapse}>
-          </i>
-        </div>
-      )}
+      <div className="board-header-operation-btn">
+        {value && !readonly && <OpMenu onDelete={onDelete} onFreezed={onFreezed} onUnFreezed={handelUnFreezed} />}
+        <i
+          className={classNames('sf3-font sf3-font-down kanban-header-op-btn kanban-header-collapse-btn', { 'rotate-90': isCollapsed })}
+          title={isCollapsed ? gettext('Expand') : gettext('Collapse')}
+          onClick={handleCollapse}>
+        </i>
+      </div>
     </div>
   );
 };

frontend/src/metadata/views/kanban/boards/board/index.js

@@ -7,6 +7,7 @@ import Draggable from '../../dnd/draggable';
 import { useMetadataView } from '../../../../hooks/metadata-view';
 import { getRowById } from '../../../../../components/sf-table/utils/table';
 import { getRecordIdFromRecord } from '../../../../utils/cell';
+import { gettext } from '@/utils/constants';
 
 import './index.css';
 
@@ -73,7 +74,9 @@ const Board = ({
         isCollapsed={isCollapsed}
         onCollapse={onCollapse}
       />
-      {!isCollapsed && (
+      {isCollapsed ?
+        <div className="tip m-2">{gettext('This list is collapsed')}</div>
+        :
         <Container
           className='react-trello-board'
           orientation="vertical"
@@ -124,7 +127,7 @@ const Board = ({
             );
           })}
         </Container>
-      )}
+      }
     </section>
   );
 };

media/css/seahub.css

@@ -735,7 +735,7 @@ table img {
 
 /* highlight */
 .tip {
-  color: #808080;
+  color: #666;
   font-size: 12px;
 }
 

media/css/seahub_react.css

@@ -1342,7 +1342,7 @@ a.table-sort-op:hover {
   margin: 2rem auto;
   padding: 30px 40px;
   font-size: 1rem;
-  color: #808080;
+  color: #666;
   text-align: center;
 }