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

change checkbox default style (#7298)

Browse Source 
* change checkbox style

* change checkbox color to blue

* use default checkbox
This commit is contained in:
Michael An 2025-01-06 14:18:09 +08:00 committed by GitHub
parent 89924320cb
commit 4b4bfb83da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 62 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/common/fixed-width-table.js
View File

@ -26,9 +26,19 @@ const FixedWidthTable = ({ className, headers, theadOptions = {}, children }) =>
<thead { ...theadOptions }>
<tr>
{headers.map((header, index) => {
const { width, isFixed, children: thChildren, className } = header;
const validWidth = isFixed ? width : (containerWidth - fixedWidth) * width;
return (<th key={index} style={{ width: validWidth }} className={className}>{thChildren}</th>);
const { width, isFixed, className, onClick = () => {}, title = '', ariaLabel = '' } = header;
return (
<th
key={index}
style={{ width: isFixed ? width : (containerWidth - fixedWidth) * width }}
className={className}
onClick={onClick}
title={title}
aria-label={ariaLabel}
>
{header.children}
</th>
);
})}
</tr>
</thead>

10
frontend/src/components/dirent-list-view/dirent-list-item.js
View File

@ -829,15 +829,19 @@ class DirentListItem extends React.Component {
onMouseDown={this.onItemMouseDown}
onContextMenu={this.onItemContextMenu}
>
<td className={`pl10 pr-2 ${this.state.isDragTipShow ? 'tr-drag-effect' : ''}`}>
<td
className={classnames('pl10 pr-2 cursor-pointer', { 'tr-drag-effect': this.state.isDragTipShow })}
onClick={this.onItemSelected}
role="button"
aria-label={isSelected ? gettext('Unselect this item') : gettext('Select this item')}
>
<input
type="checkbox"
className="vam"
className="vam cursor-pointer"
onClick={this.onItemSelected}
style={{ position: 'relative', top: -1 }}
onChange={() => {}}
checked={isSelected}
aria-label={isSelected ? gettext('Unselect this item') : gettext('Select this item')}
/>
</td>
<td className="pl-2 pr-2">

69
frontend/src/components/dirent-list-view/dirent-list-view.js
View File

@ -697,36 +697,52 @@ class DirentListView extends React.Component {
];
}
// sort
const sortByName = sortBy == 'name';
const sortByTime = sortBy == 'time';
const sortBySize = sortBy == 'size';
const sortIcon = sortOrder == 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;
const sortIcon = <span className={`sf3-font sf3-font-down ${sortOrder == 'asc' ? 'rotate-180 d-inline-block' : ''}`}></span>;
return [
{ isFixed: true, width: 31, className: 'pl10 pr-2', children: (
<input
type="checkbox"
className="vam"
onChange={this.props.onAllItemSelected}
checked={this.props.isAllItemSelected}
title={this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items')}
aria-label={this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items')}
disabled={direntList.length === 0}
/>
) }, {
{ isFixed: true,
width: 31,
className: 'pl10 pr-2 cursor-pointer',
title: this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items'),
ariaLabel: this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items'),
children: (
<input
type="checkbox"
className="vam cursor-pointer"
checked={this.props.isAllItemSelected}
disabled={direntList.length === 0}
/>
),
onClick: (e) => {
e.stopPropagation();
this.props.onAllItemSelected();
}
},
{
isFixed: true, width: 32, className: 'pl-2 pr-2', // star
}, {
},
{
isFixed: true, width: 40, className: 'pl-2 pr-2', // icon
}, {
isFixed: false, width: 0.5, children: (<a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a>),
}, {
},
{
isFixed: false,
width: 0.5,
children: (<a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortBy == 'name' && sortIcon}</a>),
},
{
isFixed: false, width: 0.06, // tag
}, {
},
{
isFixed: false, width: 0.18, // operation
}, {
isFixed: false, width: 0.11, children: (<a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a>)
}, {
isFixed: false, width: 0.15, children: (<a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a>)
},
{
isFixed: false,
width: 0.11,
children: (<a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBy == 'size' && sortIcon}</a>)
},
{
isFixed: false,
width: 0.15,
children: (<a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortBy == 'time' && sortIcon}</a>)
}
];
};
@ -736,7 +752,6 @@ class DirentListView extends React.Component {
const isDesktop = Utils.isDesktop();
const repoEncrypted = this.props.currentRepoInfo.encrypted;
const headers = this.getHeaders(isDesktop);
return (
<div
@ -752,7 +767,7 @@ class DirentListView extends React.Component {
{direntList.length > 0 && (
<FixedWidthTable
className={classnames('table-hover', { 'table-thead-hidden': !isDesktop })}
headers={headers}
headers={this.getHeaders(isDesktop)}
theadOptions={isDesktop ? { onMouseDown: this.onThreadMouseDown, onContextMenu: this.onThreadContextMenu } : {}}
>
{direntList.map((dirent, index) => {