haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-24 12:58:34 +00:00
Code Issues Releases Wiki Activity

uniform dialog style in repo (#7840)

Browse Source
This commit is contained in:
Michael An
2025-05-21 13:55:34 +08:00
committed by GitHub
parent ccf8b24769
commit 409bec31ef
12 changed files with 36 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/dialog/department-detail-dialog.js
View File

@@ -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 = (
<Modal isOpen={true} toggle={this.toggle} className="department-dialog" style={{ maxWidth: '900px' }}>
<Modal isOpen={true} toggle={this.toggle} className="department-dialog" style={LARGE_DIALOG_STYLE}>
{this.renderHeader()}
<ModalBody className="department-dialog-content">
<div className="department-dialog-left-panel">

4
frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
View File

@@ -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}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName || folderName) + '</span>');
return (
<div>
<Modal isOpen={true} style={{ maxWidth: '980px' }} className="share-dialog" toggle={this.props.toggleDialog}>
<Modal isOpen={true} style={LARGE_DIALOG_STYLE} className="share-dialog" toggle={this.props.toggleDialog}>
<SeahubModalHeader toggle={this.props.toggleDialog}>
<span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
</SeahubModalHeader>

4
frontend/src/components/dialog/list-taggedfiles-dialog.js
View File

@@ -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 (
<Modal isOpen={true} style={{ maxWidth: '678px' }}>
<Modal isOpen={true} style={LARGE_DIALOG_STYLE}>
<SeahubModalHeader toggle={this.props.onClose}>{gettext('Tagged Files')}</SeahubModalHeader>
<ModalBody className="dialog-list-container">
<table>

7
frontend/src/components/dialog/repo-api-token-dialog.js
View File

@@ -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 = '<span class="op-target text-truncate mr-1">' + Utils.HTMLescape(this.props.repo.repo_name) + '</span>';
const title = gettext('{placeholder} API Token').replace('{placeholder}', itemName);
return (
<Modal
isOpen={true} style={{ maxWidth: '800px' }}
toggle={this.props.onRepoAPITokenToggle}
>
<Modal isOpen={true} style={LARGE_DIALOG_STYLE} toggle={this.props.onRepoAPITokenToggle}>
<SeahubModalHeader toggle={this.props.onRepoAPITokenToggle}>
<span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
</SeahubModalHeader>

4
frontend/src/components/dialog/repo-share-admin-dialog.js
View File

@@ -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}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
return (
<div>
<Modal isOpen={true} className="repo-share-admin-container share-dialog" toggle={this.props.toggleDialog}>
<Modal isOpen={true} className="repo-share-admin-container share-dialog" style={LARGE_DIALOG_STYLE } toggle={this.props.toggleDialog}>
<SeahubModalHeader toggle={this.props.toggleDialog}>
<span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
</SeahubModalHeader>

4
frontend/src/components/dialog/share-dialog.js
View File

@@ -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 (
<div>
<Modal isOpen={true} style={{ maxWidth: '760px' }} className="share-dialog" toggle={this.props.toggleDialog}>
<Modal isOpen={true} style={LARGE_DIALOG_STYLE} className="share-dialog" toggle={this.props.toggleDialog}>
<SeahubModalHeader toggle={this.props.toggleDialog} tag="div">
<h5 className="text-truncate m-0">
{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span>

4
frontend/src/components/dialog/share-wiki-dialog.js
View File

@@ -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 (
<div>
<Modal isOpen={true} style={{ maxWidth: '760px' }} className="share-dialog" toggle={this.props.toggleDialog}>
<Modal isOpen={true} style={LARGE_DIALOG_STYLE} className="share-dialog" toggle={this.props.toggleDialog}>
<SeahubModalHeader toggle={this.props.toggleDialog} tag="div">
<h5 className="text-truncate">{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span></h5>
{this.renderExternalShareMessage()}

4
frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js
View File

@@ -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 (
<div>
<Modal isOpen={true} style={{ maxWidth: '800px' }} className="share-dialog" toggle={this.props.toggleDialog}>
<Modal isOpen={true} style={LARGE_DIALOG_STYLE} className="share-dialog" toggle={this.props.toggleDialog}>
<SeahubModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="op-target" title={this.props.itemName}>{this.props.itemName}</span></SeahubModalHeader>
<ModalBody className="share-dialog-content">
{this.renderDirContent()}

4
frontend/src/components/dialog/transfer-dialog.js
View File

@@ -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}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(itemName) + '</span>');
return (
<Modal isOpen={true} style={{ maxWidth: '720px' }} toggle={this.props.toggleDialog} className="transfer-dialog">
<Modal isOpen={true} style={LARGE_DIALOG_STYLE} toggle={this.props.toggleDialog} className="transfer-dialog">
<SeahubModalHeader toggle={this.props.toggleDialog}>
<span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
</SeahubModalHeader>

3
frontend/src/css/share-link-dialog.css
View File

@@ -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;

29
frontend/src/css/transfer-dialog.css
View File

@@ -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;
}

2
frontend/src/utils/constants.js
View File

@@ -226,3 +226,5 @@ export const MimetypesKind = {
svg: 'image/svg+xml',
webp: 'image/webp'
};
export const LARGE_DIALOG_STYLE = { maxWidth: '980px' };