1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-07 01:41:39 +00:00

[shared dir view] current path & operation buttons: fixup & improvement

This commit is contained in:
llj
2022-01-10 18:23:11 +08:00
committed by lian
parent f5df7f1799
commit 5d2a64bb2b
2 changed files with 9 additions and 8 deletions

View File

@@ -133,14 +133,14 @@ class SharedDirView extends React.Component {
if (index != zipped.length - 1) { if (index != zipped.length - 1) {
return ( return (
<React.Fragment key={index}> <React.Fragment key={index}>
<a href={`?p=${encodeURIComponent(item.path)}&mode=${mode}`}>{item.name}</a> <a href={`?p=${encodeURIComponent(item.path)}&mode=${mode}`} className="mx-1 ellipsis" title={item.name}>{item.name}</a>
<span> / </span> <span> / </span>
</React.Fragment> </React.Fragment>
); );
} }
}) })
} }
{zipped[zipped.length - 1].name} <span className="ml-1 ellipsis" title={zipped[zipped.length - 1].name}>{zipped[zipped.length - 1].name}</span>
</React.Fragment> </React.Fragment>
); );
} }
@@ -348,8 +348,8 @@ class SharedDirView extends React.Component {
<h2 className="h3">{dirName}</h2> <h2 className="h3">{dirName}</h2>
<p>{gettext('Shared by: ')}{sharedBy}</p> <p>{gettext('Shared by: ')}{sharedBy}</p>
<div className="d-flex justify-content-between align-items-center op-bar"> <div className="d-flex justify-content-between align-items-center op-bar">
<p className="m-0">{gettext('Current path: ')}{this.renderPath()}</p> <p className="m-0 mr-4 ellipsis d-flex align-items-center"><span className="flex-none">{gettext('Current path: ')}</span>{this.renderPath()}</p>
<div> <div className="flex-none">
{isDesktop && {isDesktop &&
<div className="view-mode btn-group"> <div className="view-mode btn-group">
<a href={`?p=${encodeURIComponent(relativePath)}&mode=list`} className={`${modeBaseClass} sf2-icon-list-view ${mode == 'list' ? 'current-mode' : ''}`} title={gettext('List')} aria-label={gettext('List')}></a> <a href={`?p=${encodeURIComponent(relativePath)}&mode=list`} className={`${modeBaseClass} sf2-icon-list-view ${mode == 'list' ? 'current-mode' : ''}`} title={gettext('List')} aria-label={gettext('List')}></a>
@@ -364,19 +364,19 @@ class SharedDirView extends React.Component {
{showDownloadIcon && {showDownloadIcon &&
<Fragment> <Fragment>
{this.state.items.some(item => item.isSelected) ? {this.state.items.some(item => item.isSelected) ?
<div> <Fragment>
<Button color="success" onClick={this.zipDownloadSelectedItems} className="ml-2 shared-dir-op-btn">{gettext('ZIP Selected Items')}</Button> <Button color="success" onClick={this.zipDownloadSelectedItems} className="ml-2 shared-dir-op-btn">{gettext('ZIP Selected Items')}</Button>
{(canDownload && loginUser && (loginUser !== sharedBy)) && {(canDownload && loginUser && (loginUser !== sharedBy)) &&
<Button color="success" onClick={this.saveSelectedItems} className="ml-2 shared-dir-op-btn">{gettext('Save Selected Items')}</Button> <Button color="success" onClick={this.saveSelectedItems} className="ml-2 shared-dir-op-btn">{gettext('Save Selected Items')}</Button>
} }
</div> </Fragment>
: :
<div> <Fragment>
<Button color="success" onClick={this.zipDownloadFolder.bind(this, relativePath)} className="ml-2 shared-dir-op-btn">{gettext('ZIP')}</Button> <Button color="success" onClick={this.zipDownloadFolder.bind(this, relativePath)} className="ml-2 shared-dir-op-btn">{gettext('ZIP')}</Button>
{(canDownload && loginUser && (loginUser !== sharedBy)) && {(canDownload && loginUser && (loginUser !== sharedBy)) &&
<Button color="success" onClick={this.saveAllItems} className="ml-2 shared-dir-op-btn">{gettext('Save')}</Button> <Button color="success" onClick={this.saveAllItems} className="ml-2 shared-dir-op-btn">{gettext('Save')}</Button>
} }
</div> </Fragment>
} }
</Fragment> </Fragment>
} }

View File

@@ -117,6 +117,7 @@ a:hover { color:#eb8205; }
.vam { vertical-align:middle; } .vam { vertical-align:middle; }
.flex-auto { flex:auto; } .flex-auto { flex:auto; }
.flex-1 { flex:1; } .flex-1 { flex:1; }
.flex-none { flex: none; }
.hide { display:none; } .hide { display:none; }
.error { color:red; } .error { color:red; }
.no-deco, .no-deco,