Optimize dropdown menu style (#7866)

* 01 remove custom dropdown menu style

* 02 remove custom dropdown menu item style

frontend/src/components/dirent-detail/embedded-file-details/index.css

@@ -2,6 +2,8 @@
   color: #666;
 }
 
+/* The sdoc-editor uses a specific style that cannot be modified,
+so this special style can only be overridden in seahub */
 .sdoc-editor-page-wrapper .sf-metadata-ai-dropdown-menu .dropdown-item:hover {
   color: #fff;
 }

frontend/src/components/paginator.js

@@ -69,7 +69,7 @@ class Paginator extends Component {
 
   renderDropdownItem = (curPerPage, perPage) => {
     return (
-      <DropdownItem onClick={() => {this.resetPerPage(perPage);}} key={perPage}>
+      <DropdownItem onClick={() => {this.resetPerPage(perPage);}} key={perPage} className='paginator-dropdown-item'>
         <span className='paginator-dropdown-tick'>
           {curPerPage === perPage && <i className="sf2-icon-tick"></i>}
         </span>
@@ -111,7 +111,7 @@ class Paginator extends Component {
             <span className='pr-3'>{this.getPerPageText(curPerPage)}</span>
             <span className={className('sf3-font sf3-font-down d-inline-block', { 'rotate-180': this.state.isMenuShow })}></span>
           </DropdownToggle>
-          <DropdownMenu>
+          <DropdownMenu className="paginator-dropdown-menu">
             {PER_PAGES.map(perPage => {
               return this.renderDropdownItem(curPerPage, perPage);
             })}

frontend/src/components/search/search-filters/index.css

@@ -49,10 +49,6 @@
   max-width: 120px;
 }
 
-.search-filters-container .dropdown-menu {
-  max-height: 400px;
-}
-
 .search-filter-menu.filter-by-text-menu,
 .search-filter-menu.filter-by-date-menu,
 .search-filter-menu.filter-by-creator-menu {
@@ -95,8 +91,6 @@
 
 .search-filter-menu .dropdown-item {
   position: relative;
-  display: flex;
-  align-items: center;
 }
 
 .search-filter-menu .dropdown-item .dropdown-item-tick {

frontend/src/components/view-modes.js

@@ -78,11 +78,11 @@ class ViewModes extends React.Component {
                   <span className='view-modes-dropdown-tick'>
                     {currentViewMode === item.value && <i className="sf2-icon-tick"></i>}
                   </span>
-                  <span className="view-modes-dropdown-content">
+                  <span className="view-modes-dropdown-content d-flex align-items-center">
                     <span className={`sf3-font-${item.icon} sf3-font mr-2`}></span>
                     <span>{item.text}</span>
                   </span>
-                  <span className="view-modes-dropdown-shortcut ml-4">{item.shortcut}</span>
+                  <span className="view-modes-dropdown-shortcut ml-4 d-flex align-items-center">{item.shortcut}</span>
                 </div>
               </DropdownItem>
             );

frontend/src/css/item-dropdown-menu.css

@@ -8,9 +8,4 @@
   top: 0;
   left: 0;
   text-align: center;
-  color: #666666;
-}
-
-.dropdown-item:hover .dropdown-item-tick {
-  color: #fff;
 }

frontend/src/css/pagination.css

@@ -11,7 +11,7 @@
   box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
 }
 
-.paginator-dropdown .dropdown-menu {
+.paginator-dropdown .paginator-dropdown-menu {
   min-width: auto;
 }
 
@@ -19,13 +19,13 @@
   color: #666;
 }
 
-.paginator-dropdown .dropdown-menu .dropdown-item {
+.paginator-dropdown .paginator-dropdown-menu .paginator-dropdown-item {
   display: flex;
   padding-left: 10px;
   padding-right: 24px;
 }
 
-.paginator-dropdown .dropdown-menu .dropdown-item .paginator-dropdown-tick {
+.paginator-dropdown .paginator-dropdown-menu .paginator-dropdown-item .paginator-dropdown-tick {
   display: inline-block;
   width: 14px;
   margin-right: 4px;

frontend/src/css/user-notifications.css

@@ -24,15 +24,6 @@
   width: 24px
 }
 
-.notification-header-close .dropdown-menu {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-.notification-header-close .dtable-dropdown-menu.large.dropdown-menu .dropdown-item {
-  padding: 0.25rem 1.5rem;
-  min-height: unset;
-}
-
 .notification-list-content .notification-modal-body {
   height: 100%;
   display: flex;

frontend/src/css/view-modes.css

@@ -14,22 +14,4 @@
   position: absolute;
   top: 0;
   left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.view-modes-dropdown-content {
-  display: flex;
-  align-items: center;
-}
-
-.view-modes-dropdown-shortcut {
-  display: flex;
-  align-items: center;
-  color: #666;
-}
-
-.dropdown-item:hover .view-modes-dropdown-shortcut {
-  color: #fff;
 }

frontend/src/metadata/components/popover/column-popover/column-name.js

@@ -2,10 +2,10 @@ import React, { useState, forwardRef, useImperativeHandle, useCallback, useEffec
 import PropTypes from 'prop-types';
 import { FormGroup, FormFeedback, Input } from 'reactstrap';
 import classnames from 'classnames';
-import { gettext } from '../../../../../utils/constants';
+import { gettext } from '../../../../utils/constants';
 
 // eslint-disable-next-line react/display-name
-const Name = forwardRef(({ readOnly, value }, ref) => {
+const ColumnName = forwardRef(({ readOnly, value }, ref) => {
   const [error, setError] = useState('');
   const [name, setName] = useState(value || '');
 
@@ -39,9 +39,9 @@ const Name = forwardRef(({ readOnly, value }, ref) => {
   );
 });
 
-Name.propTypes = {
+ColumnName.propTypes = {
   readOnly: PropTypes.bool,
   value: PropTypes.string,
 };
 
-export default Name;
+export default ColumnName;

frontend/src/metadata/components/popover/column-popover/column-type.js

@@ -3,13 +3,11 @@ import { FormGroup, FormFeedback, Label, Dropdown, DropdownToggle } from 'reacts
 import Icon from '@/components/icon';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { gettext } from '../../../../../utils/constants';
-import CustomDropdownMenu from '../dropdown-menu';
-import ModalPortal from '../../../../../components/modal-portal';
+import { gettext } from '../../../../utils/constants';
+import CustomDropdownMenu from './dropdown-menu';
+import ModalPortal from '../../../../components/modal-portal';
 
-import './index.css';
-
-const Type = forwardRef(({ column, onChange }, ref) => {
+const ColumnType = forwardRef(({ column, onChange }, ref) => {
   const [error, setError] = useState('');
   const [isPredefinedPropertiesOpen, setPredefinedPropertiesOpen] = useState(false);
   const [isCustomPropertiesOpen, setCustomPropertiesOpen] = useState(false);
@@ -74,10 +72,10 @@ const Type = forwardRef(({ column, onChange }, ref) => {
   );
 });
 
-Type.propTypes = {
+ColumnType.propTypes = {
   parentWidth: PropTypes.number,
   column: PropTypes.object,
   onChange: PropTypes.func,
 };
 
-export default Type;
+export default ColumnType;

frontend/src/metadata/components/popover/column-popover/index.js

@@ -9,8 +9,8 @@ import ObjectUtils from '../../../../utils/object';
 import { getDefaultFileStatusOptions } from '../../../utils/column';
 import { ValidateColumnFormFields } from './utils';
 import { COMMON_FORM_FIELD_TYPE } from './constants';
-import Name from './name';
-import Type from './type';
+import ColumnType from './column-type';
+import ColumnName from './column-name';
 import Data from './data';
 
 import './index.css';
@@ -86,8 +86,8 @@ const ColumnPopover = ({ target, column, onSelect, onCancel, onSubmit }) => {
     >
       <div className="sf-metadata-column-popover-inner" ref={popoverInnerRef} style={{ width: popoverInnerWidth }}>
         <div>
-          <Name ref={nameRef} readOnly={column?.unique} value={column?.unique ? column.name : ''} />
-          <Type ref={typeRef} column={column} onChange={onColumnChange} />
+          <ColumnName ref={nameRef} readOnly={column?.unique} value={column?.unique ? column.name : ''} />
+          <ColumnType ref={typeRef} column={column} onChange={onColumnChange} />
           <Data ref={dataRef} column={column} />
         </div>
         <div className={classnames('sf-metadata-column-popover-footer', { 'sf-metadata-number-column-popover-footer': column.type === CellType.NUMBER })}>

frontend/src/metadata/components/popover/column-popover/type/index.css

@@ -1,3 +0,0 @@
-.sf-metadata-column-type .dropdown-menu {
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
-}

frontend/src/metadata/components/popover/filter-popover/advanced-filters/index.css

@@ -300,7 +300,7 @@
   width: 100%;
 }
 
-.dropdown-item .collaborator,
+.sf-metadata-filters-list .dropdown-item .collaborator,
 .sf-metadata-filters-list .seafile-option-group .seafile-option-group-content .collaborator {
   background-color: unset;
 }

frontend/src/pages/excalidraw-editor/index.css

@@ -1,12 +1,3 @@
-.excalidraw .dropdown-menu {
-  display: block !important;
-}
-
-.excalidraw .dropdown-menu {
-  --bs-dropdown-padding-x: auto;
-  border: unset;
-}
-
 .file-view-body #unfold-onlyoffice-file-view-header {
   right: 116px;
   z-index: 6

frontend/src/pages/excalidraw-viewer/index.css

@@ -1,8 +0,0 @@
-.dropdown-menu {
-  display: block !important;
-}
-
-.excalidraw .dropdown-menu {
-  --bs-dropdown-padding-x: auto;
-  border: unset;
-}

frontend/src/pages/excalidraw-viewer/index.js

@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
 import SimpleViewer from './simple-viewer';
 import editorApi from './editor-api';
 
-import './index.css';
-
 const ExcaliViewer = () => {
   const [fileContent, setFileContent] = useState(null);
   const [isFetching, setIsFetching] = useState(true);

frontend/src/pages/wiki2/css/wiki-nav.css

@@ -229,6 +229,11 @@
   margin: 0.2rem 0;
 }
 
+.page-operation-dropdown-menu .dropdown-item .sf3-font {
+  font-size: 14px;
+  margin-right: 10px;
+}
+
 .wiki-nav .wiki-page-item.page-can-drop-bottom::after,
 .wiki-nav .wiki-page-item.page-can-drop-top::after {
   content: '';
@@ -252,23 +257,6 @@
   background-color: rgb(200, 220, 240) !important;
 }
 
-.dtable-dropdown-menu .dropdown-item .sf3-font {
-  font-size: 14px;
-  margin-right: 10px;
-  color: #666;
-}
-
-.dtable-dropdown-menu .dropdown-item:hover .sf3-font {
-  color: #fff;
-}
-
-.dtable-dropdown-menu.large .dropdown-item {
-  min-height: 32px;
-  padding: 3px 12px;
-  display: flex;
-  align-items: center;
-}
-
 .wiki-nav,
 .wiki-nav .wiki-page-item .wiki-add-page-btn .sf3-font.sf3-font-enlarge:hover,
 .wiki-nav .wiki-page-item .seafile-multicolor-icon-more-level:hover {