From 32d22ab7c03ec1a209276dfcfa5a6e5cd300dfd0 Mon Sep 17 00:00:00 2001 From: Michael An <2331806369@qq.com> Date: Fri, 30 May 2025 10:10:44 +0800 Subject: [PATCH] Optimize dropdown menu style (#7866) * 01 remove custom dropdown menu style * 02 remove custom dropdown menu item style --- .../embedded-file-details/index.css | 2 ++ frontend/src/components/paginator.js | 4 ++-- .../search/search-filters/index.css | 6 ----- frontend/src/components/view-modes.js | 4 ++-- frontend/src/css/item-dropdown-menu.css | 5 ----- frontend/src/css/pagination.css | 6 ++--- frontend/src/css/user-notifications.css | 9 -------- frontend/src/css/view-modes.css | 18 --------------- .../{name/index.js => column-name.js} | 8 +++---- .../{type/index.js => column-type.js} | 14 +++++------- .../popover/column-popover/index.js | 8 +++---- .../popover/column-popover/type/index.css | 3 --- .../filter-popover/advanced-filters/index.css | 2 +- .../src/pages/excalidraw-editor/index.css | 9 -------- .../src/pages/excalidraw-viewer/index.css | 8 ------- frontend/src/pages/excalidraw-viewer/index.js | 2 -- frontend/src/pages/wiki2/css/wiki-nav.css | 22 +++++-------------- media/css/seahub_react.css | 5 +---- 18 files changed, 30 insertions(+), 105 deletions(-) rename frontend/src/metadata/components/popover/column-popover/{name/index.js => column-name.js} (87%) rename frontend/src/metadata/components/popover/column-popover/{type/index.js => column-type.js} (89%) delete mode 100644 frontend/src/metadata/components/popover/column-popover/type/index.css delete mode 100644 frontend/src/pages/excalidraw-viewer/index.css diff --git a/frontend/src/components/dirent-detail/embedded-file-details/index.css b/frontend/src/components/dirent-detail/embedded-file-details/index.css index 03db4aba91..3c21efa2b5 100644 --- a/frontend/src/components/dirent-detail/embedded-file-details/index.css +++ b/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; } diff --git a/frontend/src/components/paginator.js b/frontend/src/components/paginator.js index 486b511146..8406cd4454 100644 --- a/frontend/src/components/paginator.js +++ b/frontend/src/components/paginator.js @@ -69,7 +69,7 @@ class Paginator extends Component { renderDropdownItem = (curPerPage, perPage) => { return ( - {this.resetPerPage(perPage);}} key={perPage}> + {this.resetPerPage(perPage);}} key={perPage} className='paginator-dropdown-item'> {curPerPage === perPage && } @@ -111,7 +111,7 @@ class Paginator extends Component { {this.getPerPageText(curPerPage)} - + {PER_PAGES.map(perPage => { return this.renderDropdownItem(curPerPage, perPage); })} diff --git a/frontend/src/components/search/search-filters/index.css b/frontend/src/components/search/search-filters/index.css index 804d3c842e..f9941bfa68 100644 --- a/frontend/src/components/search/search-filters/index.css +++ b/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 { diff --git a/frontend/src/components/view-modes.js b/frontend/src/components/view-modes.js index d70be13c1b..4c7010e501 100644 --- a/frontend/src/components/view-modes.js +++ b/frontend/src/components/view-modes.js @@ -78,11 +78,11 @@ class ViewModes extends React.Component { {currentViewMode === item.value && } - + {item.text} - {item.shortcut} + {item.shortcut} ); diff --git a/frontend/src/css/item-dropdown-menu.css b/frontend/src/css/item-dropdown-menu.css index 3c4509cb3b..3649bcded1 100644 --- a/frontend/src/css/item-dropdown-menu.css +++ b/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; } diff --git a/frontend/src/css/pagination.css b/frontend/src/css/pagination.css index b3943b2277..ba23c5c862 100644 --- a/frontend/src/css/pagination.css +++ b/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; diff --git a/frontend/src/css/user-notifications.css b/frontend/src/css/user-notifications.css index 3fc84b8090..d61aa6b908 100644 --- a/frontend/src/css/user-notifications.css +++ b/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; diff --git a/frontend/src/css/view-modes.css b/frontend/src/css/view-modes.css index 493d99d7f0..83a7336283 100644 --- a/frontend/src/css/view-modes.css +++ b/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; } diff --git a/frontend/src/metadata/components/popover/column-popover/name/index.js b/frontend/src/metadata/components/popover/column-popover/column-name.js similarity index 87% rename from frontend/src/metadata/components/popover/column-popover/name/index.js rename to frontend/src/metadata/components/popover/column-popover/column-name.js index 69a14a2a0b..11e8141375 100644 --- a/frontend/src/metadata/components/popover/column-popover/name/index.js +++ b/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; diff --git a/frontend/src/metadata/components/popover/column-popover/type/index.js b/frontend/src/metadata/components/popover/column-popover/column-type.js similarity index 89% rename from frontend/src/metadata/components/popover/column-popover/type/index.js rename to frontend/src/metadata/components/popover/column-popover/column-type.js index bf3c64785b..a64232b344 100644 --- a/frontend/src/metadata/components/popover/column-popover/type/index.js +++ b/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; diff --git a/frontend/src/metadata/components/popover/column-popover/index.js b/frontend/src/metadata/components/popover/column-popover/index.js index 2b13319672..0da1784727 100644 --- a/frontend/src/metadata/components/popover/column-popover/index.js +++ b/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 }) => { >
- - + +
diff --git a/frontend/src/metadata/components/popover/column-popover/type/index.css b/frontend/src/metadata/components/popover/column-popover/type/index.css deleted file mode 100644 index 9621706014..0000000000 --- a/frontend/src/metadata/components/popover/column-popover/type/index.css +++ /dev/null @@ -1,3 +0,0 @@ -.sf-metadata-column-type .dropdown-menu { - filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)); -} diff --git a/frontend/src/metadata/components/popover/filter-popover/advanced-filters/index.css b/frontend/src/metadata/components/popover/filter-popover/advanced-filters/index.css index 37e9081ee4..6ab3dd0e08 100644 --- a/frontend/src/metadata/components/popover/filter-popover/advanced-filters/index.css +++ b/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; } diff --git a/frontend/src/pages/excalidraw-editor/index.css b/frontend/src/pages/excalidraw-editor/index.css index 24847317e0..74238520a2 100644 --- a/frontend/src/pages/excalidraw-editor/index.css +++ b/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 diff --git a/frontend/src/pages/excalidraw-viewer/index.css b/frontend/src/pages/excalidraw-viewer/index.css deleted file mode 100644 index c91bf42f0a..0000000000 --- a/frontend/src/pages/excalidraw-viewer/index.css +++ /dev/null @@ -1,8 +0,0 @@ -.dropdown-menu { - display: block !important; -} - -.excalidraw .dropdown-menu { - --bs-dropdown-padding-x: auto; - border: unset; -} diff --git a/frontend/src/pages/excalidraw-viewer/index.js b/frontend/src/pages/excalidraw-viewer/index.js index 3aafbc7ed3..4c6c996a55 100644 --- a/frontend/src/pages/excalidraw-viewer/index.js +++ b/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); diff --git a/frontend/src/pages/wiki2/css/wiki-nav.css b/frontend/src/pages/wiki2/css/wiki-nav.css index d428654a47..076dd4e14a 100644 --- a/frontend/src/pages/wiki2/css/wiki-nav.css +++ b/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 { diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css index 944ef26606..c3eebe2679 100644 --- a/media/css/seahub_react.css +++ b/media/css/seahub_react.css @@ -1326,10 +1326,7 @@ a.table-sort-op:hover { font-size: 14px; } -.dropdown-item .sf3-font { - color: #666; -} - +.dropdown-item .sf3-font, .dropdown-item .sf2-icon-tick { color: #666; }