haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-20 02:48:51 +00:00
Code Issues Releases Wiki Activity

[long name] fixup for UIs with long library/folder/file names (#5971)

Browse Source 
* [long name] fixup for UIs with long library/folder/file names

* fixed code indentation
This commit is contained in:
llj
2024-03-07 15:37:09 +08:00
committed by GitHub
parent 9281a14634
commit 046aa47022
24 changed files with 112 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/dialog/change-repo-password-dialog.js
View File

@@ -95,12 +95,13 @@ class ChangeRepoPasswordDialog extends React.Component {
render() {
const { repoName, toggleDialog } = this.props;
let title = gettext('Change Password of Library {placeholder}');
title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
return (
<Modal isOpen={true} style={{height: 'auto'}} toggle={toggleDialog}>
<ModalHeader toggle={toggleDialog}>
<span>
{Utils.generateDialogTitle(gettext('Change Password of Library {placeholder}'), repoName)}
</span>
<span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
</ModalHeader>
<ModalBody>
<form id="repo-change-passwd-form" action="" method="post">

2
frontend/src/components/dialog/commit-details.js
View File

@@ -91,7 +91,7 @@ class Content extends React.Component {
<ul>
{
data[item.type].map((item, index) => {
return <li key={index} dangerouslySetInnerHTML={{__html: item}} className="commit-detail-item"></li>;
return <li key={index} dangerouslySetInnerHTML={{__html: item}} className="commit-detail-item text-truncate"></li>;
})
}
</ul>

7
frontend/src/components/dialog/copy-dirent-dialog.js
View File

@@ -140,14 +140,17 @@ class CopyDirent extends React.Component {
render() {
let title = gettext('Copy {placeholder} to');
if (!this.props.isMutipleOperation) {
title = title.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
} else {
title = gettext('Copy selected item(s) to:');
}
let mode = 'current_repo_and_other_repos';
const { isMutipleOperation } = this.props;
return (
<Modal isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
<ModalHeader toggle={this.toggle}>
{isMutipleOperation ? title : <div dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></div>}
</ModalHeader>
<ModalBody>
<FileChooser
repoID={this.props.repoID}

7
frontend/src/components/dialog/lib-history-setting-dialog.js
View File

@@ -108,12 +108,13 @@ class LibHistorySetting extends React.Component {
};
render() {
const itemName = this.props.itemName;
const { itemName: repoName } = this.props;
let title = gettext('{placeholder} History Setting');
title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
return (
<Modal isOpen={true} toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.props.toggleDialog}>
<span className="op-target" title={itemName}>{itemName}</span>{' '}
{gettext('History Setting')}
<span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
</ModalHeader>
<ModalBody>
<Form>

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

@@ -66,11 +66,13 @@ class LibSubFolderPermissionDialog extends React.Component {
render() {
const { repoName, folderName } = this.props;
let title = repoName ? gettext('{placeholder} Folder Permission') : gettext('Set permission of {placeholder}');
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}>
<ModalHeader toggle={this.props.toggleDialog}>
<span>{repoName ? Utils.generateDialogTitle(gettext('{placeholder} Folder Permission'), repoName) : Utils.generateDialogTitle(gettext('Set {placeholder}\'s permission'), folderName)}</span>
<span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
</ModalHeader>
<ModalBody className="dialog-list-container share-dialog-content" role="tablist">
{this.renderContent()}

2
frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
View File

@@ -90,7 +90,7 @@ const propTypes = {
repoID: PropTypes.string.isRequired,
isDepartmentRepo: PropTypes.bool,
folderPath: PropTypes.string.isRequired,
repoName: PropTypes.string.isRequired,
repoName: PropTypes.string,
};

8
frontend/src/components/dialog/move-dirent-dialog.js
View File

@@ -154,12 +154,12 @@ class MoveDirent extends React.Component {
render() {
let title = gettext('Move {placeholder} to');
if (!this.props.isMutipleOperation) {
title = title.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
} else {
title = gettext('Move selected item(s) to:');
}
let mode = 'current_repo_and_other_repos';
const { dirent, selectedDirentList } = this.props;
const { dirent, selectedDirentList, isMutipleOperation } = this.props;
const movedDirent = dirent ? dirent : selectedDirentList[0];
const { permission } = movedDirent;
const { isCustomPermission } = Utils.getUserPermission(permission);
@@ -168,7 +168,9 @@ class MoveDirent extends React.Component {
}
return (
<Modal isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
<ModalHeader toggle={this.toggle}>
{isMutipleOperation ? title : <div dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></div>}
</ModalHeader>
<ModalBody>
<FileChooser
repoID={this.props.repoID}

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

@@ -281,7 +281,7 @@ class RepoAPITokenDialog extends React.Component {
render() {
let repo = this.repo;
const itemName = '<span class="op-target">' + Utils.HTMLescape(repo.repo_name) + '</span>';
const itemName = '<span class="op-target text-truncate mr-1">' + Utils.HTMLescape(repo.repo_name) + '</span>';
const title = gettext('{placeholder} API Token').replace('{placeholder}', itemName);
return (
<Modal
@@ -289,7 +289,7 @@ class RepoAPITokenDialog extends React.Component {
toggle={this.props.onRepoAPITokenToggle}
>
<ModalHeader toggle={this.props.onRepoAPITokenToggle}>
<p dangerouslySetInnerHTML={{__html: title}} className="m-0"></p>
<span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
</ModalHeader>
<ModalBody>
<div className="o-auto">

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

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import { gettext, canGenerateShareLink, canGenerateUploadLink } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import RepoShareAdminShareLinks from './repo-share-admin/share-links';
import RepoShareAdminUploadLinks from './repo-share-admin/upload-links';
import RepoShareAdminUserShares from './repo-share-admin/user-shares';
@@ -48,12 +49,13 @@ class RepoShareAdminDialog extends React.Component {
render() {
const { activeTab } = this.state;
const { repo_name: repoName } = this.props.repo;
let title = gettext('{placeholder} Share Admin');
title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
return (
<div>
<Modal isOpen={true} style={{maxWidth: '760px'}} className="share-dialog" toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.props.toggleDialog}>
<span className="op-target" title={repoName}>{repoName}</span> {gettext('Share Admin')}
<span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
</ModalHeader>
<ModalBody className="dialog-list-container share-dialog-content" role="tablist">
<Fragment>

7
frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
View File

@@ -106,12 +106,13 @@ class SysAdminLibHistorySettingDialog extends React.Component {
};
render() {
const itemName = this.props.itemName;
const { itemName: repoName } = this.props;
let title = gettext('{placeholder} History Setting');
title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
return (
<Modal isOpen={true} toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.props.toggleDialog}>
<span className="op-target" title={itemName}>{itemName}</span>{' '}
{gettext('History Setting')}
<span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
</ModalHeader>
<ModalBody>
<Form>

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

@@ -60,15 +60,19 @@ class TransferDialog extends React.Component {
};
render() {
const itemName = this.props.itemName;
let canTransferToDept = true;
if (this.props.canTransferToDept != undefined) {
canTransferToDept = this.props.canTransferToDept;
}
const { itemName: repoName } = this.props;
let title = gettext('Transfer Library {library_name}');
title = title.replace('{library_name}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
return (
<Modal isOpen={true} toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.props.toggleDialog}>
<span>{gettext('Transfer Library {library_name}').replace('{library_name}', itemName)}</span>
<span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
</ModalHeader>
<ModalBody>
{this.state.transferToUser ?