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

Make chronograf admin table dropdowns appear like plaintext until hover

pull/10616/head
Alex P 2017-11-06 15:40:09 -08:00
parent a487bbe080
commit e82fdf44b8
4 changed files with 57 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/admin/components/chronograf/OrgTableRow.js
View File

@ -31,7 +31,13 @@ const OrgTableRow = ({
)
return (
<tr className={isSelected ? 'selected' : null}>
<tr
className={
isSelected
? 'chronograf-admin-table--user selected'
: 'chronograf-admin-table--user'
}
>
<td
onClick={onToggleUserSelected(user)}
className="chronograf-admin-table--check-col chronograf-admin-table--selectable"

8
ui/src/admin/components/chronograf/UsersTable.js
View File

@ -79,8 +79,12 @@ class ChronografUsersTable extends Component {
/>
</th>
<th>Username</th>
<th style={{width: colOrg}}>Organization</th>
<th style={{width: colRole}}>Role</th>
<th style={{width: colOrg}} className="align-with-col-text">
Organization
</th>
<th style={{width: colRole}} className="align-with-col-text">
Role
</th>
<Authorized requiredRole={SUPERADMIN_ROLE}>
<th style={{width: colSuperAdmin}} className="text-center">
SuperAdmin

8
ui/src/admin/components/chronograf/UsersTableRow.js
View File

@ -24,7 +24,13 @@ const UsersTableRow = ({
const isSelected = selectedUsers.find(u => isSameUser(user, u))
return (
<tr className={isSelected ? 'selected' : null}>
<tr
className={
isSelected
? 'chronograf-admin-table--user selected'
: 'chronograf-admin-table--user'
}
>
<td
onClick={onToggleUserSelected(user)}
className="chronograf-admin-table--check-col chronograf-admin-table--selectable"

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

@ -204,6 +204,12 @@ table.table.chronograf-admin-table .dropdown {
margin: 0;
}
}
.chronograf-user--org {
padding-left: 7px;
}
table.table.chronograf-admin-table thead tr th.align-with-col-text {
padding-left: 15px;
}
.user-checkbox {
display: inline-block;
vertical-align: middle;
@ -295,6 +301,37 @@ table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--selectabl
.super-admin-toggle .dropdown-toggle {
width: 70px;
}
/* Make dropdowns in admin table appear as plaintext until hover */
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown div.btn.dropdown-toggle {
transition: none;
background-color: $g3-castle;
color: $g13-mist;
> .caret {opacity: 0;}
}
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user.selected td div.dropdown div.btn.dropdown-toggle {
background-color: $g5-pepper;
}
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user:hover td div.dropdown div.btn.dropdown-toggle {
background-color: $c-pool;
color: $g20-white;
> .caret {opacity: 1;}
&:hover {
background-color: $c-laser;
}
}
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown.open div.btn.dropdown-toggle,
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown.open div.btn.dropdown-toggle:hover {
background-color: $c-hydrogen;
color: $g20-white;
> .caret {opacity: 1;}
}
/* Styles for new user row */
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--new-user {
background-color: $g4-onyx;