haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-14 22:33:17 +00:00
Code Issues Releases Wiki Activity

change file page icons style (#6493)

Browse Source 
* change file page icons style

* change save icon style

* change Open parent folder menu
This commit is contained in:
Michael An
2024-08-06 14:16:23 +08:00
committed by GitHub
parent 113389230d
commit fd12baeea1
3 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/file-view/file-toolbar.js
View File

@@ -1,6 +1,6 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { ButtonGroup, ButtonDropdown, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; import { ButtonGroup, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import IconButton from '../icon-button'; import IconButton from '../icon-button';
import { gettext, siteRoot } from '../../utils/constants'; import { gettext, siteRoot } from '../../utils/constants';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
@@ -114,7 +114,7 @@ class FileToolbar extends React.Component {
return ( return (
<Fragment> <Fragment>
<ButtonGroup className="d-none d-md-block flex-shrink-0 ml-4"> <div className="d-none d-md-flex justify-content-between align-items-center flex-shrink-0 ml-4">
{fileType == 'PDF' && ( {fileType == 'PDF' && (
<IconButton <IconButton
id="seafile-pdf-print" id="seafile-pdf-print"
@@ -122,13 +122,6 @@ class FileToolbar extends React.Component {
text={gettext('Print')} text={gettext('Print')}
/> />
)} )}
<IconButton
id="open-parent-folder"
icon="open-folder"
text={gettext('Open parent folder')}
tag="a"
href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`}
/>
{showLockUnlockBtn && ( {showLockUnlockBtn && (
<IconButton <IconButton
id="lock-unlock-file" id="lock-unlock-file"
@@ -148,9 +141,9 @@ class FileToolbar extends React.Component {
{(canEditFile && fileType != 'SDoc' && !err) && {(canEditFile && fileType != 'SDoc' && !err) &&
(this.props.isSaving ? (this.props.isSaving ?
<button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary'}> <div type='button' aria-label={gettext('Saving...')} className={'file-toolbar-btn'}>
<Icon symbol="spinner" /> <Icon symbol="spinner" />
</button> </div>
: :
(this.props.needSave ? (this.props.needSave ?
<IconButton <IconButton
@@ -160,9 +153,9 @@ class FileToolbar extends React.Component {
onClick={this.props.onSave} onClick={this.props.onSave}
/> />
: :
<button type='button' className='btn btn-icon btn-secondary' disabled> <div type='button' className='file-toolbar-btn disabled'>
<Icon symbol="save" /> <Icon symbol="save" />
</button> </div>
))} ))}
{canDownloadFile && ( {canDownloadFile && (
<IconButton <IconButton
@@ -188,11 +181,12 @@ class FileToolbar extends React.Component {
href={`seafile://openfile?repo_id=${encodeURIComponent(repoID)}&path=${encodeURIComponent(filePath)}`} href={`seafile://openfile?repo_id=${encodeURIComponent(repoID)}&path=${encodeURIComponent(filePath)}`}
/> />
)} )}
<ButtonDropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}> <Dropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
<DropdownToggle <DropdownToggle
className="file-toolbar-more-operations btn-icon" className="file-toolbar-btn"
aria-label={gettext('More operations')} aria-label={gettext('More operations')}
title={gettext('More operations')} title={gettext('More operations')}
tag="div"
> >
<Icon symbol="more-vertical" /> <Icon symbol="more-vertical" />
</DropdownToggle> </DropdownToggle>
@@ -202,9 +196,12 @@ class FileToolbar extends React.Component {
{gettext('History')} {gettext('History')}
</a> </a>
)} )}
<a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="dropdown-item">
{gettext('Open parent folder')}
</a>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </Dropdown>
</ButtonGroup> </div>
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none flex-shrink-0 ml-4"> <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none flex-shrink-0 ml-4">
<ButtonGroup > <ButtonGroup >

19
frontend/src/components/icon-button.js
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Button, Tooltip } from 'reactstrap'; import { Tooltip } from 'reactstrap';
import Icon from './icon'; import Icon from './icon';
const propTypes = { const propTypes = {
@@ -28,9 +28,8 @@ class IconButton extends React.Component {
}; };
render() { render() {
const className = 'btn-icon';
const btnContent = ( const btnContent = (
<React.Fragment> <>
<Icon symbol={this.props.icon} /> <Icon symbol={this.props.icon} />
<Tooltip <Tooltip
toggle={this.toggle} toggle={this.toggle}
@@ -40,30 +39,30 @@ class IconButton extends React.Component {
isOpen={this.state.tooltipOpen}> isOpen={this.state.tooltipOpen}>
{this.props.text} {this.props.text}
</Tooltip> </Tooltip>
</React.Fragment> </>
); );
if (this.props.tag && this.props.tag == 'a') { if (this.props.tag && this.props.tag == 'a') {
return ( return (
<Button <div
id={this.props.id} id={this.props.id}
className={className} className='file-toolbar-btn'
tag="a" tag="a"
href={this.props.href} href={this.props.href}
aria-label={this.props.text} aria-label={this.props.text}
> >
{btnContent} {btnContent}
</Button> </div>
); );
} else { } else {
return ( return (
<Button <div
id={this.props.id} id={this.props.id}
className={className} className='file-toolbar-btn'
onClick={this.props.onClick} onClick={this.props.onClick}
aria-label={this.props.text} aria-label={this.props.text}
> >
{btnContent} {btnContent}
</Button> </div>
); );
} }
} }

26
frontend/src/css/file-view.css
View File

@@ -13,11 +13,31 @@ body {
flex-shrink: 0; flex-shrink: 0;
} }
.file-view-header .btn { .file-view-header .file-toolbar-btn {
color: #666; width: 28px;
height: 28px;
margin-right: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
} }
.file-view-header .btn#save-file { .file-view-header .file-toolbar-btn:hover {
background-color: #EFEFEF;
border-radius: 3px;
}
.file-view-header .file-toolbar-btn.disabled {
opacity: 0.65;
cursor: default;
}
.file-view-header .file-toolbar-btn.disabled:hover {
background-color: #fff;
}
.file-view-header .file-toolbar-btn#save-file {
color: #eb8205; color: #eb8205;
} }