Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make table rows selectable from name column as well as entire checkbox column

pull/10616/head
Alex P 2017-10-30 23:05:39 -07:00
parent 45e9216011
commit 39cc358c66
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ui/src/admin/components/chronograf/AllUsersTable.js
View File

@ -57,13 +57,16 @@ class ChronografAllUsersTable extends Component {
const isSelected = selectedUsers.find(u => isSameUser(user, u))
return (
<tr key={i} className={isSelected ? 'selected' : null}>
<td>
<div
className="user-checkbox"
onClick={onToggleUserSelected(user)}
/>
<td
onClick={onToggleUserSelected(user)}
className="chronograf-admin-table--check-col chronograf-admin-table--selectable"
>
<div className="user-checkbox" />
</td>
<td>
<td
onClick={onToggleUserSelected(user)}
className="chronograf-admin-table--selectable"
>
<strong>
{user.name}
</strong>
@ -104,7 +107,7 @@ class ChronografAllUsersTable extends Component {
<table className="table table-highlight chronograf-admin-table">
<thead>
<tr>
<th>
<th className="chronograf-admin-table--check-col">
<div
className={
areAllSelected ? 'user-checkbox selected' : 'user-checkbox'
@ -115,7 +118,9 @@ class ChronografAllUsersTable extends Component {
<th>Username</th>
<th>SuperAdmin</th>
<th>
{organizationName ? 'Role' : 'Organization & Role'}
{organizationName === DEFAULT_ORG
? 'Organization & Role'
: 'Role'}
</th>
<th>Provider</th>
<th className="text-right">Scheme</th>

9
ui/src/style/pages/admin.scss
View File

@ -245,3 +245,12 @@ table.table.chronograf-admin-table tbody tr.selected td {
font-weight: 500;
color: $g13-mist;
}
table.table.chronograf-admin-table thead tr th.chronograf-admin-table--check-col,
table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--check-col {
width: 28px;
padding-right: 0;
}
table.table.chronograf-admin-table thead tr th.chronograf-admin-table--selectable,
table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--selectable {
&:hover {cursor: pointer;}
}