From 409bec31ef9a98281b690c0104c67ecf5a2a923f Mon Sep 17 00:00:00 2001 From: Michael An <2331806369@qq.com> Date: Wed, 21 May 2025 13:55:34 +0800 Subject: [PATCH] uniform dialog style in repo (#7840) --- .../dialog/department-detail-dialog.js | 4 +-- .../lib-sub-folder-permission-dialog.js | 4 +-- .../dialog/list-taggedfiles-dialog.js | 4 +-- .../dialog/repo-api-token-dialog.js | 7 ++--- .../dialog/repo-share-admin-dialog.js | 4 +-- .../src/components/dialog/share-dialog.js | 4 +-- .../components/dialog/share-wiki-dialog.js | 4 +-- .../sysadmin-dialog/sysadmin-share-dialog.js | 4 +-- .../src/components/dialog/transfer-dialog.js | 4 +-- frontend/src/css/share-link-dialog.css | 3 ++ frontend/src/css/transfer-dialog.css | 29 +++++++++---------- frontend/src/utils/constants.js | 2 ++ 12 files changed, 36 insertions(+), 37 deletions(-) diff --git a/frontend/src/components/dialog/department-detail-dialog.js b/frontend/src/components/dialog/department-detail-dialog.js index 3ae5a53371..d457b032b7 100644 --- a/frontend/src/components/dialog/department-detail-dialog.js +++ b/frontend/src/components/dialog/department-detail-dialog.js @@ -1,7 +1,7 @@ import React, { Fragment, } from 'react'; import PropTypes from 'prop-types'; import { Modal, ModalBody, Input } from 'reactstrap'; -import { gettext, isOrgContext, username } from '../../utils/constants'; +import { gettext, isOrgContext, username, LARGE_DIALOG_STYLE } from '../../utils/constants'; import { seafileAPI } from '../../utils/seafile-api.js'; import { Utils } from '../../utils/utils'; import toaster from '../toast'; @@ -258,7 +258,7 @@ class DepartmentDetailDialog extends React.Component { ); const details = ( - + {this.renderHeader()}
diff --git a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js index d9200b583d..78681bedf3 100644 --- a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js +++ b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Modal, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; -import { gettext } from '../../utils/constants'; +import { gettext, LARGE_DIALOG_STYLE } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import LibSubFolderSetUserPermissionDialog from './lib-sub-folder-set-user-permission-dialog'; import LibSubFolderSetGroupPermissionDialog from './lib-sub-folder-set-group-permission-dialog'; @@ -92,7 +92,7 @@ class LibSubFolderPermissionDialog extends React.Component { title = title.replace('{placeholder}', '' + Utils.HTMLescape(repoName || folderName) + ''); return (
- + diff --git a/frontend/src/components/dialog/list-taggedfiles-dialog.js b/frontend/src/components/dialog/list-taggedfiles-dialog.js index edfbcc8e61..d81b732008 100644 --- a/frontend/src/components/dialog/list-taggedfiles-dialog.js +++ b/frontend/src/components/dialog/list-taggedfiles-dialog.js @@ -2,7 +2,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap'; import dayjs from 'dayjs'; -import { gettext, siteRoot } from '../../utils/constants'; +import { gettext, siteRoot, LARGE_DIALOG_STYLE } from '../../utils/constants'; import { seafileAPI } from '../../utils/seafile-api'; import { Utils } from '../../utils/utils'; import toaster from '../toast'; @@ -76,7 +76,7 @@ class ListTaggedFilesDialog extends React.Component { render() { let taggedFileList = this.state.taggedFileList; return ( - + {gettext('Tagged Files')} diff --git a/frontend/src/components/dialog/repo-api-token-dialog.js b/frontend/src/components/dialog/repo-api-token-dialog.js index fb4a595d09..211fb863d4 100644 --- a/frontend/src/components/dialog/repo-api-token-dialog.js +++ b/frontend/src/components/dialog/repo-api-token-dialog.js @@ -1,6 +1,6 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; -import { gettext } from '../../utils/constants'; +import { gettext, LARGE_DIALOG_STYLE } from '../../utils/constants'; import { Modal, ModalBody, Button, Input } from 'reactstrap'; import RepoAPITokenPermissionEditor from '../select-editor/repo-api-token-permission-editor'; import { seafileAPI } from '../../utils/seafile-api'; @@ -282,10 +282,7 @@ class RepoAPITokenDialog extends React.Component { const itemName = '' + Utils.HTMLescape(this.props.repo.repo_name) + ''; const title = gettext('{placeholder} API Token').replace('{placeholder}', itemName); return ( - + diff --git a/frontend/src/components/dialog/repo-share-admin-dialog.js b/frontend/src/components/dialog/repo-share-admin-dialog.js index efefa51d33..54272e5879 100644 --- a/frontend/src/components/dialog/repo-share-admin-dialog.js +++ b/frontend/src/components/dialog/repo-share-admin-dialog.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Modal, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; -import { gettext, canGenerateShareLink, canGenerateUploadLink } from '../../utils/constants'; +import { gettext, canGenerateShareLink, canGenerateUploadLink, LARGE_DIALOG_STYLE } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import RepoShareAdminShareLinks from './repo-share-admin/share-links'; import RepoShareAdminUploadLinks from './repo-share-admin/upload-links'; @@ -56,7 +56,7 @@ class RepoShareAdminDialog extends React.Component { title = title.replace('{placeholder}', '' + Utils.HTMLescape(repoName) + ''); return (
- + diff --git a/frontend/src/components/dialog/share-dialog.js b/frontend/src/components/dialog/share-dialog.js index e787143cf8..eb50471a9b 100644 --- a/frontend/src/components/dialog/share-dialog.js +++ b/frontend/src/components/dialog/share-dialog.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Modal, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; -import { gettext, username, canGenerateShareLink, canGenerateUploadLink, canInvitePeople, additionalShareDialogNote, enableOCM, isPro, canShareRepo } from '../../utils/constants'; +import { gettext, username, canGenerateShareLink, canGenerateUploadLink, canInvitePeople, additionalShareDialogNote, enableOCM, isPro, canShareRepo, LARGE_DIALOG_STYLE } from '../../utils/constants'; import ShareLinkPanel from '../share-link-panel'; import GenerateUploadLink from './generate-upload-link'; import ShareToUser from './share-to-user'; @@ -324,7 +324,7 @@ class ShareDialog extends React.Component { const { itemType, itemName } = this.props; return (
- +
{gettext('Share')} {itemName} diff --git a/frontend/src/components/dialog/share-wiki-dialog.js b/frontend/src/components/dialog/share-wiki-dialog.js index 67a17ae6db..305508acdf 100644 --- a/frontend/src/components/dialog/share-wiki-dialog.js +++ b/frontend/src/components/dialog/share-wiki-dialog.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Modal, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; -import { gettext, username, additionalShareDialogNote, canShareRepo } from '../../utils/constants'; +import { gettext, username, additionalShareDialogNote, canShareRepo, LARGE_DIALOG_STYLE } from '../../utils/constants'; import ShareToUser from './share-to-user'; import ShareToGroup from './share-to-group'; import { seafileAPI } from '../../utils/seafile-api'; @@ -156,7 +156,7 @@ class ShareWikiDialog extends React.Component { const { itemType, itemName } = this.props; return (
- +
{gettext('Share')} {itemName}
{this.renderExternalShareMessage()} diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js index bea683a3b3..bb242159ec 100644 --- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js +++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Modal, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; -import { gettext } from '../../../utils/constants'; +import { gettext, LARGE_DIALOG_STYLE } from '../../../utils/constants'; import SysAdminShareToUser from './sysadmin-share-to-user'; import SysAdminShareToGroup from './sysadmin-share-to-group'; import SeahubModalHeader from '@/components/common/seahub-modal-header'; @@ -81,7 +81,7 @@ class SysAdminShareDialog extends React.Component { render() { return (
- + {gettext('Share')} {this.props.itemName} {this.renderDirContent()} diff --git a/frontend/src/components/dialog/transfer-dialog.js b/frontend/src/components/dialog/transfer-dialog.js index e40041b536..60a536f207 100644 --- a/frontend/src/components/dialog/transfer-dialog.js +++ b/frontend/src/components/dialog/transfer-dialog.js @@ -6,7 +6,7 @@ import SeahubModalHeader from '@/components/common/seahub-modal-header'; import { seafileAPI } from '../../utils/seafile-api'; import { systemAdminAPI } from '../../utils/system-admin-api'; import { orgAdminAPI } from '../../utils/org-admin-api'; -import { gettext, isPro, orgID } from '../../utils/constants'; +import { gettext, isPro, orgID, LARGE_DIALOG_STYLE } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import toaster from '../toast'; import UserSelect from '../user-select'; @@ -247,7 +247,7 @@ class TransferDialog extends React.Component { let title = gettext('Transfer Library {library_name}'); title = title.replace('{library_name}', '' + Utils.HTMLescape(itemName) + ''); return ( - + diff --git a/frontend/src/css/share-link-dialog.css b/frontend/src/css/share-link-dialog.css index e079b0ea6f..1c3a80eee3 100644 --- a/frontend/src/css/share-link-dialog.css +++ b/frontend/src/css/share-link-dialog.css @@ -23,13 +23,16 @@ .share-dialog .share-dialog-content { flex-direction: row; } + .share-dialog-content .share-dialog-side { border: 0; border-right: 1px solid #eee; } + .share-dialog-side .nav { flex-direction: column; } + .share-dialog-side .nav-pills .nav-item .nav-link { width: 100%; padding: 0.3125rem 0.5rem; diff --git a/frontend/src/css/transfer-dialog.css b/frontend/src/css/transfer-dialog.css index 4226c48747..45250b1e73 100644 --- a/frontend/src/css/transfer-dialog.css +++ b/frontend/src/css/transfer-dialog.css @@ -5,14 +5,8 @@ flex-direction: column; } -@media (min-width: 768px) { - .transfer-dialog .transfer-dialog-content { - flex-direction: row; - } -} - .transfer-dialog-content .transfer-dialog-side { - flex-basis: 29%; + flex-basis: 22%; padding: 1rem; border-bottom: 1px solid #eee; } @@ -22,8 +16,11 @@ } @media (min-width: 768px) { + .transfer-dialog .transfer-dialog-content { + flex-direction: row; + } + .transfer-dialog-content .transfer-dialog-side { - padding: 12px 8px; border: 0; border-right: 1px solid #eee; } @@ -74,20 +71,20 @@ } .transfer-dialog-side .nav-item .nav-link.active { + background-color: #f0f0f0; + color: inherit; position: relative; - background-color: #f5f5f5; - color: #212529; - border-bottom: 0.125rem solid transparent; } .transfer-dialog-side .nav-item .nav-link.active::before { content: ''; - position: absolute; display: block; - width: 3px; - height: 28px; - left: -4px; - top: 3px; + width: 4px; background-color: #ff9800; border-radius: 2px; + position: absolute; + top: 4px; + bottom: 4px; + left: -8px; + z-index: 0; } diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js index 2269303112..b2248bc8e8 100644 --- a/frontend/src/utils/constants.js +++ b/frontend/src/utils/constants.js @@ -226,3 +226,5 @@ export const MimetypesKind = { svg: 'image/svg+xml', webp: 'image/webp' }; + +export const LARGE_DIALOG_STYLE = { maxWidth: '980px' };