mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 17:08:53 +00:00
convert rocker button to standard buttons (#1906)
This commit is contained in:
Caleb Coy
Kyle Knight
parent
b220aa23e6
commit
60bd9157b6
5 changed files with 34 additions and 216 deletions
|
|
@ -1,64 +0,0 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import { noop } from 'lodash';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import Icon from 'components/icons/Icon';
|
||||
|
||||
class Rocker extends Component {
|
||||
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
options: PropTypes.shape({
|
||||
rightText: PropTypes.string,
|
||||
rightIcon: PropTypes.string,
|
||||
leftText: PropTypes.string,
|
||||
leftIcon: PropTypes.string,
|
||||
}),
|
||||
value: PropTypes.string,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
onChange: noop,
|
||||
};
|
||||
|
||||
handleChange = (evt) => {
|
||||
const { onChange, options: { rightText, leftText }, value } = this.props;
|
||||
evt.preventDefault();
|
||||
|
||||
const newOption = value === leftText ? rightText : leftText;
|
||||
|
||||
onChange(newOption);
|
||||
};
|
||||
|
||||
render () {
|
||||
const { handleChange } = this;
|
||||
const { className, options, value } = this.props;
|
||||
const { rightText, rightIcon, leftText, leftIcon } = options;
|
||||
const baseClass = 'kolide-rocker';
|
||||
|
||||
const rockerClasses = classnames(baseClass, className);
|
||||
const buttonClasses = classnames(`${baseClass}__button`, 'button', 'button--unstyled', {
|
||||
[`${baseClass}__button--checked`]: value === leftText,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={rockerClasses}>
|
||||
<button className={buttonClasses} onClick={handleChange}>
|
||||
<span className={`${baseClass}__switch ${baseClass}__switch--left`}>
|
||||
<span className={`${baseClass}__text`}>
|
||||
<Icon name={leftIcon} /> {leftText}
|
||||
</span>
|
||||
</span>
|
||||
<span className={`${baseClass}__switch ${baseClass}__switch--right`}>
|
||||
<span className={`${baseClass}__text`}>
|
||||
<Icon name={rightIcon} /> {rightText}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Rocker;
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
.kolide-rocker {
|
||||
box-shadow: 0 0 9px 0 rgba(72, 81, 109, 0.1);
|
||||
|
||||
&__button {
|
||||
transform: translateY(-19px);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 180px;
|
||||
height: 36px;
|
||||
border-radius: 2px;
|
||||
background-color: #9fa5ab;
|
||||
display: block;
|
||||
padding: 0 2px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
&--checked > .kolide-rocker__switch--left {
|
||||
span {
|
||||
@include transform(skewX(0) rotateZ(0));
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include transform(skewX(0) rotateZ(0) translate(0, 0));
|
||||
left: 0;
|
||||
width: 90px;
|
||||
height: 35px;
|
||||
bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&--checked > .kolide-rocker__switch--right {
|
||||
span {
|
||||
@include transform(skewX(-6deg) rotateZ(-6deg));
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include transform(skewX(-6deg) rotateZ(-6deg) translate(-1px, -3px));
|
||||
right: -1px;
|
||||
width: 90px;
|
||||
height: 35px;
|
||||
bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__switch {
|
||||
@include user-select(none);
|
||||
@include position(absolute, auto auto auto auto);
|
||||
font-family: 'Oxygen', $helvetica;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
width: 90px;
|
||||
height: 35px;
|
||||
|
||||
&::after {
|
||||
@include transition(transform 50ms ease-in-out, bottom 50ms ease-in-out);
|
||||
bottom: 3px;
|
||||
border-radius: 2px;
|
||||
content: attr(data-content);
|
||||
width: 90px;
|
||||
height: 33px;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
@include transition(transform 50ms ease-in-out, top 50ms ease-in-out);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
font-size: 15px;
|
||||
color: #3f64ed;
|
||||
letter-spacing: 0.6px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
.kolidecon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&--left {
|
||||
@include linear-gradient(-180deg, #eaedfb 81%, #aab3bd 100%);
|
||||
left: 2px;
|
||||
|
||||
span {
|
||||
@include transform(skewX(6deg) rotateZ(6deg));
|
||||
color: #b8c2e3;
|
||||
transform-origin: left top;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include transform(skewX(6deg) rotateZ(6deg) translate(-1px, -3px));
|
||||
background-color: #fff;
|
||||
border: solid 1px #d4d8df;
|
||||
border-radius: 2px 1px 1px 2px;
|
||||
left: 1px;
|
||||
bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&--right {
|
||||
@include linear-gradient(-180deg, #eaedfb 81%, #aab3bd 100%);
|
||||
right: 2px;
|
||||
|
||||
span {
|
||||
transform-origin: right top;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: #ffffff;
|
||||
border: solid 1px #d4d8df;
|
||||
border-radius: 1px 2px 2px 1px;
|
||||
right: 0;
|
||||
bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export default from './Rocker';
|
||||
|
|
@ -4,6 +4,7 @@ import { connect } from 'react-redux';
|
|||
import FileSaver from 'file-saver';
|
||||
import { push } from 'react-router-redux';
|
||||
import { isEqual, orderBy, slice, sortBy } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import Kolide from 'kolide';
|
||||
import AddHostModal from 'components/hosts/AddHostModal';
|
||||
|
|
@ -16,7 +17,6 @@ import LabelForm from 'components/forms/LabelForm';
|
|||
import Modal from 'components/modals/Modal';
|
||||
import PlatformIcon from 'components/icons/PlatformIcon';
|
||||
import QuerySidePanel from 'components/side_panels/QuerySidePanel';
|
||||
import Rocker from 'components/buttons/Rocker';
|
||||
import labelInterface from 'interfaces/label';
|
||||
import hostInterface from 'interfaces/host';
|
||||
import osqueryTableInterface from 'interfaces/osquery_table';
|
||||
|
|
@ -248,10 +248,12 @@ export class ManageHostsPage extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
onToggleDisplay = (val) => {
|
||||
onToggleDisplay = (event) => {
|
||||
event.preventDefault();
|
||||
const { dispatch } = this.props;
|
||||
const value = event.currentTarget.dataset.value;
|
||||
|
||||
dispatch(setDisplay(val));
|
||||
dispatch(setDisplay(value));
|
||||
|
||||
return false;
|
||||
}
|
||||
|
|
@ -501,12 +503,6 @@ export class ManageHostsPage extends Component {
|
|||
|
||||
const { count, description, display_text: displayText, statusLabelKey, type } = selectedLabel;
|
||||
const { onToggleDisplay } = this;
|
||||
const buttonOptions = {
|
||||
rightIcon: 'grid-select',
|
||||
rightText: 'Grid',
|
||||
leftIcon: 'list-select',
|
||||
leftText: 'List',
|
||||
};
|
||||
|
||||
const hostCount = type === 'status' ? statusLabels[`${statusLabelKey}`] : count;
|
||||
const hostsTotalDisplay = hostCount === 1 ? '1 Host Total' : `${hostCount} Hosts Total`;
|
||||
|
|
@ -526,11 +522,22 @@ export class ManageHostsPage extends Component {
|
|||
</div>
|
||||
<div className={`${baseClass}__topper`}>
|
||||
<p className={`${baseClass}__host-count`}>{hostsTotalDisplay}</p>
|
||||
<Rocker
|
||||
onChange={onToggleDisplay}
|
||||
options={buttonOptions}
|
||||
value={display}
|
||||
/>
|
||||
<a
|
||||
onClick={onToggleDisplay}
|
||||
className={classNames(`${baseClass}__toggle-view`, {
|
||||
[`${baseClass}__toggle-view--active`]: display === 'List',
|
||||
})}
|
||||
data-value="List"
|
||||
>{<svg viewBox="0 0 24 24" className="kolidecon"><path d="M9 4h11a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm0 7h11a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zm0 7h11a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zm-4.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0-7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0-7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" fillRule="evenodd" /></svg>}
|
||||
</a>
|
||||
<a
|
||||
onClick={onToggleDisplay}
|
||||
className={classNames(`${baseClass}__toggle-view`, {
|
||||
[`${baseClass}__toggle-view--active`]: display === 'Grid',
|
||||
})}
|
||||
data-value="Grid"
|
||||
>{<svg viewBox="0 0 24 24" className="kolidecon"><path d="M5 15v4h4v-4H5zm-1-2h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zm11 2v4h4v-4h-4zm-1-2h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zm1-8v4h4V5h-4zm-1-2h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM5 5v4h4V5H5zM4 3h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" fillRule="nonzero" /></svg>}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -100,4 +100,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&__toggle-view {
|
||||
.kolidecon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 12px;
|
||||
fill: $accent-dark;
|
||||
}
|
||||
&--active{
|
||||
.kolidecon {
|
||||
fill: $link;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue