haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-06 09:21:54 +00:00
Code Issues Releases Wiki Activity

Fix about dialog close button style (#7380)

Browse Source 
* 01 fix about dialog style

* 02 fix guide for new dialog
This commit is contained in:
Michael An
2025-01-17 16:00:32 +08:00
committed by GitHub
parent cf4856d597
commit 7d4a9f4575
3 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/dialog/about-dialog.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Modal, ModalBody } from 'reactstrap'; import { Modal, ModalBody } from 'reactstrap';
import { gettext, lang, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, seafileVersion, additionalAboutDialogLinks, aboutDialogCustomHtml } from '../../utils/constants'; import { gettext, lang, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, seafileVersion, additionalAboutDialogLinks, aboutDialogCustomHtml } from '../../utils/constants';
import '../../css/seahub-modal-header.css';
const propTypes = { const propTypes = {
onCloseAboutDialog: PropTypes.func.isRequired, onCloseAboutDialog: PropTypes.func.isRequired,
@@ -27,7 +28,11 @@ class AboutDialog extends React.Component {
return ( return (
<Modal isOpen={true} toggle={toggleDialog}> <Modal isOpen={true} toggle={toggleDialog}>
<ModalBody> <ModalBody>
<button type="button" className="close" onClick={toggleDialog}><span aria-hidden="true">×</span></button> <button type="button" className="close seahub-modal-btn p-0" aria-label={gettext('Close')} onClick={toggleDialog}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
</span>
</button>
<div className="about-content" dangerouslySetInnerHTML={{ __html: aboutDialogCustomHtml }}></div> <div className="about-content" dangerouslySetInnerHTML={{ __html: aboutDialogCustomHtml }}></div>
</ModalBody> </ModalBody>
</Modal> </Modal>
@@ -36,7 +41,11 @@ class AboutDialog extends React.Component {
return ( return (
<Modal isOpen={true} toggle={toggleDialog}> <Modal isOpen={true} toggle={toggleDialog}>
<ModalBody> <ModalBody>
<button type="button" className="close" onClick={toggleDialog}><span aria-hidden="true">×</span></button> <button type="button" className="close seahub-modal-btn p-0" aria-label={gettext('Close')} onClick={toggleDialog}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
</span>
</button>
<div className="about-content"> <div className="about-content">
<p><img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" /></p> <p><img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" /></p>
<p>{gettext('Server Version: ')}{seafileVersion}<br />© {(new Date()).getFullYear()} {gettext('Seafile')}</p> <p>{gettext('Server Version: ')}{seafileVersion}<br />© {(new Date()).getFullYear()} {gettext('Seafile')}</p>

7
frontend/src/components/dialog/guide-for-new-dialog.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Modal, ModalBody } from 'reactstrap'; import { Modal, ModalBody } from 'reactstrap';
import { gettext, mediaUrl, siteName, canAddRepo } from '../../utils/constants'; import { gettext, mediaUrl, siteName, canAddRepo } from '../../utils/constants';
import '../../css/seahub-modal-header.css';
const propTypes = { const propTypes = {
toggleDialog: PropTypes.func.isRequired toggleDialog: PropTypes.func.isRequired
@@ -17,7 +18,11 @@ class GuideForNewDialog extends React.Component {
return ( return (
<Modal isOpen={true} toggle={this.toggle}> <Modal isOpen={true} toggle={this.toggle}>
<ModalBody> <ModalBody>
<button type="button" className="close text-gray" onClick={this.toggle}><span aria-hidden="true">×</span></button> <button type="button" className="close seahub-modal-btn p-0" aria-label={gettext('Close')} onClick={this.toggle}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
</span>
</button>
<div className="p-2 text-center"> <div className="p-2 text-center">
<img src={`${mediaUrl}img/welcome.png`} width="408" alt="" /> <img src={`${mediaUrl}img/welcome.png`} width="408" alt="" />
<h3 id="dialogTitle" className="mt-6 mb-4">{gettext('Welcome to {site_name_placeholder}').replace('{site_name_placeholder}', siteName)}</h3> <h3 id="dialogTitle" className="mt-6 mb-4">{gettext('Welcome to {site_name_placeholder}').replace('{site_name_placeholder}', siteName)}</h3>

10
frontend/src/css/seahub-modal-header.css
View File

@@ -1,23 +1,23 @@
.modal-header .seahub-modal-btn.close { .modal .seahub-modal-btn.close {
padding: 14px 16px; padding: 14px 16px;
opacity: 1; opacity: 1;
} }
.modal-header .seahub-modal-btn.close:not(:disabled):not(.disabled):hover { .modal .seahub-modal-btn.close:not(:disabled):not(.disabled):hover {
opacity: 1; opacity: 1;
} }
.modal-header .seahub-modal-btn .seahub-modal-btn-inner { .modal .seahub-modal-btn .seahub-modal-btn-inner {
display: inline-block; display: inline-block;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 3px; border-radius: 3px;
} }
.modal-header .seahub-modal-btn .seahub-modal-btn-inner:hover { .modal .seahub-modal-btn .seahub-modal-btn-inner:hover {
background-color: #efefef; background-color: #efefef;
} }
.modal-header .seahub-modal-btn .seahub-modal-btn-inner .sf3-font { .modal .seahub-modal-btn .seahub-modal-btn-inner .sf3-font {
color: #666; color: #666;
} }