haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-04 16:31:13 +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 = () => {
const { isStarred } = this.state;
let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
const { repo, currentViewMode } = this.props;
return currentViewMode == 'list' ? (
@@ -679,14 +680,16 @@ class SharedRepoListItem extends React.Component {
<Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
<Fragment>
<Link to={libPath} className="library-name text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
{isStarred &&
<i
role="button"
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
title={gettext('Unstar')}
aria-label={gettext('Unstar')}
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>
}
{repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} className="op-icon library-grid-item-icon" />}
</Fragment>
}

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

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

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

@@ -268,6 +268,7 @@ class Item extends Component {
return null;
}
const { isStarred } = this.state;
const { data, currentViewMode = 'list' } = this.props;
const useBigLibaryIcon = currentViewMode == 'grid';
data.icon_url = Utils.getLibIconUrl(data, useBigLibaryIcon);
@@ -338,13 +339,15 @@ class Item extends Component {
<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" />
<Link to={shareRepoUrl} className="text-truncate library-name" title={data.repo_name}>{data.repo_name}</Link>
{isStarred &&
<i
role="button"
title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
title={gettext('Unstar')}
aria-label={gettext('Unstar')}
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>
}
{data.monitored && <RepoMonitoredIcon repoID={data.repo_id} className="op-icon library-grid-item-icon" />}
</div>