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

01 change grid mode library style (#6238)

Browse Source
This commit is contained in:
Michael An
2024-06-20 15:22:47 +08:00
committed by GitHub
parent c3f89f41ed
commit fd2d6c5c82
4 changed files with 32 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
View File

@@ -631,6 +631,7 @@ class SharedRepoListItem extends React.Component {
}; };
renderPCUI = () => { renderPCUI = () => {
const { isStarred } = this.state;
let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams(); let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
const { repo, currentViewMode } = this.props; const { repo, currentViewMode } = this.props;
return currentViewMode == 'list' ? ( return currentViewMode == 'list' ? (
@@ -679,14 +680,16 @@ class SharedRepoListItem extends React.Component {
<Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> : <Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
<Fragment> <Fragment>
<Link to={libPath} className="library-name text-truncate" title={repo.repo_name}>{repo.repo_name}</Link> <Link to={libPath} className="library-name text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
{isStarred &&
<i <i
role="button" role="button"
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')} title={gettext('Unstar')}
aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')} aria-label={gettext('Unstar')}
onClick={this.onToggleStarRepo} onClick={this.onToggleStarRepo}
className={`op-icon library-grid-item-icon ${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`} className='op-icon library-grid-item-icon sf3-font-star sf3-font'
> >
</i> </i>
}
{repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} className="op-icon library-grid-item-icon" />} {repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} className="op-icon library-grid-item-icon" />}
</Fragment> </Fragment>
} }

8
frontend/src/css/files.css
View File

@@ -44,11 +44,3 @@
.library-grid-item .library-grid-item-icon { .library-grid-item .library-grid-item-icon {
margin-left: 6px; margin-left: 6px;
} }
.library-grid-item .library-grid-item-icon.sf3-font-star-empty {
opacity: 0;
}
.library-grid-item:hover .library-grid-item-icon.sf3-font-star-empty {
opacity: 1;
}

9
frontend/src/pages/my-libs/mylib-repo-list-item.js
View File

@@ -319,6 +319,7 @@ class MylibRepoListItem extends React.Component {
}; };
renderPCUI = () => { renderPCUI = () => {
const { isStarred } = this.state;
const { repo, currentViewMode = 'list' } = this.props; const { repo, currentViewMode = 'list' } = this.props;
let useBigLibaryIcon = currentViewMode == 'grid'; let useBigLibaryIcon = currentViewMode == 'grid';
let iconUrl = Utils.getLibIconUrl(repo, useBigLibaryIcon); let iconUrl = Utils.getLibIconUrl(repo, useBigLibaryIcon);
@@ -392,14 +393,16 @@ class MylibRepoListItem extends React.Component {
{!this.state.isRenaming && repo.repo_name && ( {!this.state.isRenaming && repo.repo_name && (
<Fragment> <Fragment>
<Link to={repoURL} className="library-name text-truncate" title={repo.repo_name}>{repo.repo_name}</Link> <Link to={repoURL} className="library-name text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
{isStarred &&
<i <i
role="button" role="button"
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')} title={gettext('Unstar')}
aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')} aria-label={gettext('Unstar')}
className={`op-icon library-grid-item-icon ${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`} className='op-icon library-grid-item-icon sf3-font-star sf3-font'
onClick={this.onToggleStarRepo} onClick={this.onToggleStarRepo}
> >
</i> </i>
}
{repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} className="op-icon library-grid-item-icon" />} {repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} className="op-icon library-grid-item-icon" />}
</Fragment> </Fragment>
)} )}

9
frontend/src/pages/shared-libs/shared-libs.js
View File

@@ -268,6 +268,7 @@ class Item extends Component {
return null; return null;
} }
const { isStarred } = this.state;
const { data, currentViewMode = 'list' } = this.props; const { data, currentViewMode = 'list' } = this.props;
const useBigLibaryIcon = currentViewMode == 'grid'; const useBigLibaryIcon = currentViewMode == 'grid';
data.icon_url = Utils.getLibIconUrl(data, useBigLibaryIcon); data.icon_url = Utils.getLibIconUrl(data, useBigLibaryIcon);
@@ -338,13 +339,15 @@ class Item extends Component {
<div className="d-flex align-items-center text-truncate"> <div className="d-flex align-items-center text-truncate">
<img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="36" className="mr-2" /> <img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="36" className="mr-2" />
<Link to={shareRepoUrl} className="text-truncate library-name" title={data.repo_name}>{data.repo_name}</Link> <Link to={shareRepoUrl} className="text-truncate library-name" title={data.repo_name}>{data.repo_name}</Link>
{isStarred &&
<i <i
role="button" role="button"
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')} title={gettext('Unstar')}
aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')} aria-label={gettext('Unstar')}
onClick={this.onToggleStarRepo} onClick={this.onToggleStarRepo}
className={`op-icon library-grid-item-icon ${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`} className='op-icon library-grid-item-icon sf3-font-star sf3-font'
></i> ></i>
}
{data.monitored && <RepoMonitoredIcon repoID={data.repo_id} className="op-icon library-grid-item-icon" />} {data.monitored && <RepoMonitoredIcon repoID={data.repo_id} className="op-icon library-grid-item-icon" />}
</div> </div>