mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 08:55:24 +00:00
Adding in new Rocker Switch (#498)
This commit is contained in:
Kyle Knight
GitHub
parent
b0e923ccc3
commit
d6c653b8ea
Binary file not shown.
51
frontend/components/buttons/Rocker/Rocker.jsx
Normal file
51
frontend/components/buttons/Rocker/Rocker.jsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { noop } from 'lodash';
|
||||
import classnames from 'classnames';
|
||||
|
||||
class Rocker extends Component {
|
||||
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
handleChange: PropTypes.func,
|
||||
name: PropTypes.string,
|
||||
options: PropTypes.shape({
|
||||
aText: PropTypes.string,
|
||||
aIcon: PropTypes.string,
|
||||
bText: PropTypes.string,
|
||||
bIcon: PropTypes.string,
|
||||
}),
|
||||
value: PropTypes.string,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
handleChange: noop,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { className, handleChange, name, options, value } = this.props;
|
||||
const { aText, aIcon, bText, bIcon } = options;
|
||||
const baseClass = 'kolide-rocker';
|
||||
|
||||
const rockerClasses = classnames(baseClass, className);
|
||||
|
||||
return (
|
||||
<div className={rockerClasses}>
|
||||
<label className={`${baseClass}__label`} htmlFor={name}>
|
||||
<input className={`${baseClass}__checkbox`} type="checkbox" value={value} name={name} id={name} onChange={handleChange} />
|
||||
<span className={`${baseClass}__switch ${baseClass}__switch--opt-b`}>
|
||||
<span className={`${baseClass}__text`}>
|
||||
<i className={`kolidecon kolidecon-${bIcon}`} /> {bText}
|
||||
</span>
|
||||
</span>
|
||||
<span className={`${baseClass}__switch ${baseClass}__switch--opt-a`}>
|
||||
<span className={`${baseClass}__text`}>
|
||||
<i className={`kolidecon kolidecon-${aIcon}`} /> {aText}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Rocker;
|
||||
132
frontend/components/buttons/Rocker/_styles.scss
Normal file
132
frontend/components/buttons/Rocker/_styles.scss
Normal file
@ -0,0 +1,132 @@
|
||||
.kolide-rocker {
|
||||
&__label {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 180px;
|
||||
height: 36px;
|
||||
border-radius: 2px;
|
||||
background-color: #9fa5ab;
|
||||
display: block;
|
||||
padding: 0 2px;
|
||||
box-shadow: inset 0 -3px 3px #aab3bd;
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
display: none;
|
||||
|
||||
&:checked ~ .kolide-rocker__switch--opt-b {
|
||||
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--opt-a {
|
||||
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: #fff;
|
||||
letter-spacing: 0.6px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
.kolidecon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&--opt-b {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
&--opt-a {
|
||||
@include linear-gradient(-180deg, #9651ca 81%, #6e3c93 100%);
|
||||
right: 2px;
|
||||
|
||||
span {
|
||||
transform-origin: right top;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: #ae6ddf;
|
||||
border: solid 1px #9651ca;
|
||||
border-radius: 1px 2px 2px 1px;
|
||||
right: 0;
|
||||
bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
frontend/components/buttons/Rocker/index.js
Normal file
1
frontend/components/buttons/Rocker/index.js
Normal file
@ -0,0 +1 @@
|
||||
export default from './Rocker';
|
||||
@ -3,6 +3,7 @@ import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router';
|
||||
|
||||
import Avatar from '../../components/Avatar';
|
||||
import Rocker from '../../components/buttons/Rocker';
|
||||
import paths from '../../router/paths';
|
||||
import userInterface from '../../interfaces/user';
|
||||
|
||||
@ -15,12 +16,19 @@ export class HomePage extends Component {
|
||||
const { user } = this.props;
|
||||
const { LOGOUT } = paths;
|
||||
const baseClass = 'home-page';
|
||||
const rockerOpts = {
|
||||
aText: 'List',
|
||||
aIcon: 'list-select',
|
||||
bText: 'Grid',
|
||||
bIcon: 'grid-select',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={baseClass}>
|
||||
{user && <Avatar size="small" className={`${baseClass}__avatar`} user={user} />}
|
||||
<span>You are successfully logged in! </span>
|
||||
{user && <Link to={LOGOUT}>Logout</Link>}
|
||||
<Rocker name="view-type" value="grid" options={rockerOpts} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
// Because iOS hates us we must fight to the death!
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
// End Apple War
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
@ -1,228 +1,236 @@
|
||||
[class^="kolidecon-"],
|
||||
[class*=" kolidecon-"],
|
||||
[class^='kolidecon-'],
|
||||
[class*=' kolidecon-'],
|
||||
.kolidecon {
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 'kolidecons';
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 'kolidecons';
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.kolidecon-lg {
|
||||
font-size: 1.33333333em;
|
||||
line-height: 0.75em;
|
||||
vertical-align: -15%;
|
||||
.kolidecon-lg {
|
||||
font-size: 1.33333333em;
|
||||
line-height: 0.75em;
|
||||
vertical-align: -15%;
|
||||
}
|
||||
|
||||
.kolidecon-2x {
|
||||
font-size: 2em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.kolidecon-3x {
|
||||
font-size: 3em;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.kolidecon-4x {
|
||||
font-size: 4em;
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.kolidecon-5x {
|
||||
font-size: 5em;
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
.kolidecon-fw {
|
||||
width: 1.28571429em;
|
||||
text-align: center;
|
||||
.kolidecon-fw {
|
||||
width: 1.28571429em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.kolidecon-kolide-logo-flat:before {
|
||||
content: '\f000';
|
||||
.kolidecon-kolide-logo-flat:before {
|
||||
content: '\f000';
|
||||
}
|
||||
|
||||
.kolidecon-chevrondown:before {
|
||||
content: '\f004';
|
||||
.kolidecon-chevrondown:before {
|
||||
content: '\f004';
|
||||
}
|
||||
|
||||
.kolidecon-chevronleft:before {
|
||||
content: '\f006';
|
||||
.kolidecon-chevronleft:before {
|
||||
content: '\f006';
|
||||
}
|
||||
|
||||
.kolidecon-chevronright:before {
|
||||
content: '\f008';
|
||||
.kolidecon-chevronright:before {
|
||||
content: '\f008';
|
||||
}
|
||||
|
||||
.kolidecon-chevronup:before {
|
||||
content: '\f00a';
|
||||
.kolidecon-chevronup:before {
|
||||
content: '\f00a';
|
||||
}
|
||||
|
||||
.kolidecon-cpu:before {
|
||||
content: '\f00c';
|
||||
.kolidecon-cpu:before {
|
||||
content: '\f00c';
|
||||
}
|
||||
|
||||
.kolidecon-downcarat:before {
|
||||
content: '\f00d';
|
||||
.kolidecon-downcarat:before {
|
||||
content: '\f00d';
|
||||
}
|
||||
|
||||
.kolidecon-filter:before {
|
||||
content: '\f00f';
|
||||
.kolidecon-filter:before {
|
||||
content: '\f00f';
|
||||
}
|
||||
|
||||
.kolidecon-mac:before {
|
||||
content: '\f012';
|
||||
.kolidecon-mac:before {
|
||||
content: '\f012';
|
||||
}
|
||||
|
||||
.kolidecon-memory:before {
|
||||
content: '\f013';
|
||||
.kolidecon-memory:before {
|
||||
content: '\f013';
|
||||
}
|
||||
|
||||
.kolidecon-penciledit:before {
|
||||
content: '\f015';
|
||||
.kolidecon-penciledit:before {
|
||||
content: '\f015';
|
||||
}
|
||||
|
||||
.kolidecon-storage:before {
|
||||
content: '\f019';
|
||||
.kolidecon-storage:before {
|
||||
content: '\f019';
|
||||
}
|
||||
|
||||
.kolidecon-upcarat:before {
|
||||
content: '\f01b';
|
||||
.kolidecon-upcarat:before {
|
||||
content: '\f01b';
|
||||
}
|
||||
|
||||
.kolidecon-uptime:before {
|
||||
content: '\f01c';
|
||||
.kolidecon-uptime:before {
|
||||
content: '\f01c';
|
||||
}
|
||||
|
||||
.kolidecon-world:before {
|
||||
content: '\f01d';
|
||||
.kolidecon-world:before {
|
||||
content: '\f01d';
|
||||
}
|
||||
|
||||
.kolidecon-osquery:before {
|
||||
content: '\f021';
|
||||
.kolidecon-osquery:before {
|
||||
content: '\f021';
|
||||
}
|
||||
|
||||
.kolidecon-join:before {
|
||||
content: '\f022';
|
||||
.kolidecon-join:before {
|
||||
content: '\f022';
|
||||
}
|
||||
|
||||
.kolidecon-add-button:before {
|
||||
content: '\f029';
|
||||
.kolidecon-add-button:before {
|
||||
content: '\f029';
|
||||
}
|
||||
|
||||
.kolidecon-username:before {
|
||||
content: '\f02a';
|
||||
.kolidecon-username:before {
|
||||
content: '\f02a';
|
||||
}
|
||||
|
||||
.kolidecon-password:before {
|
||||
content: '\f02b';
|
||||
.kolidecon-password:before {
|
||||
content: '\f02b';
|
||||
}
|
||||
|
||||
.kolidecon-email:before {
|
||||
content: '\f02c';
|
||||
.kolidecon-email:before {
|
||||
content: '\f02c';
|
||||
}
|
||||
|
||||
.kolidecon-query:before {
|
||||
content: '\f02d';
|
||||
.kolidecon-query:before {
|
||||
content: '\f02d';
|
||||
}
|
||||
|
||||
.kolidecon-hosts:before {
|
||||
content: '\f02e';
|
||||
.kolidecon-hosts:before {
|
||||
content: '\f02e';
|
||||
}
|
||||
|
||||
.kolidecon-packs:before {
|
||||
content: '\f02f';
|
||||
.kolidecon-packs:before {
|
||||
content: '\f02f';
|
||||
}
|
||||
|
||||
.kolidecon-help:before {
|
||||
content: '\f030';
|
||||
.kolidecon-help:before {
|
||||
content: '\f030';
|
||||
}
|
||||
|
||||
.kolidecon-admin:before {
|
||||
content: '\f031';
|
||||
.kolidecon-admin:before {
|
||||
content: '\f031';
|
||||
}
|
||||
|
||||
.kolidecon-config:before {
|
||||
content: '\f032';
|
||||
.kolidecon-config:before {
|
||||
content: '\f032';
|
||||
}
|
||||
|
||||
.kolidecon-label:before {
|
||||
content: '\f033';
|
||||
.kolidecon-mia:before {
|
||||
content: '\f034';
|
||||
}
|
||||
|
||||
.kolidecon-mia:before {
|
||||
content: '\f034';
|
||||
.kolidecon-success-check:before {
|
||||
content: '\f035';
|
||||
}
|
||||
|
||||
.kolidecon-success-check:before {
|
||||
content: '\f035';
|
||||
.kolidecon-offline:before {
|
||||
content: '\f036';
|
||||
}
|
||||
|
||||
.kolidecon-offline:before {
|
||||
content: '\f036';
|
||||
.kolidecon-windows:before {
|
||||
content: '\f037';
|
||||
}
|
||||
|
||||
.kolidecon-windows:before {
|
||||
content: '\f037';
|
||||
.kolidecon-centos:before {
|
||||
content: '\f038';
|
||||
}
|
||||
|
||||
.kolidecon-centos:before {
|
||||
content: '\f038';
|
||||
.kolidecon-ubuntu:before {
|
||||
content: '\f039';
|
||||
}
|
||||
|
||||
.kolidecon-ubuntu:before {
|
||||
content: '\f039';
|
||||
.kolidecon-apple:before {
|
||||
content: '\f03a';
|
||||
}
|
||||
|
||||
.kolidecon-apple:before {
|
||||
content: '\f03a';
|
||||
.kolidecon-search:before {
|
||||
content: '\f03b';
|
||||
}
|
||||
|
||||
.kolidecon-search:before {
|
||||
content: '\f03b';
|
||||
.kolidecon-all-hosts:before {
|
||||
content: '\f03c';
|
||||
}
|
||||
|
||||
.kolidecon-all-hosts:before {
|
||||
content: '\f03c';
|
||||
.kolidecon-single-host:before {
|
||||
content: '\f03d';
|
||||
}
|
||||
|
||||
.kolidecon-single-host:before {
|
||||
content: '\f03d';
|
||||
.kolidecon-alerts:before {
|
||||
content: '\f03e';
|
||||
}
|
||||
|
||||
.kolidecon-alerts:before {
|
||||
content: '\f03e';
|
||||
.kolidecon-logout:before {
|
||||
content: '\f03f';
|
||||
}
|
||||
|
||||
.kolidecon-logout:before {
|
||||
content: '\f03f';
|
||||
.kolidecon-user-settings:before {
|
||||
content: '\f040';
|
||||
}
|
||||
|
||||
.kolidecon-user-settings:before {
|
||||
content: '\f040';
|
||||
.kolidecon-clipboard:before {
|
||||
content: '\f043';
|
||||
}
|
||||
|
||||
.kolidecon-clipboard:before {
|
||||
content: '\f043';
|
||||
.kolidecon-list-select:before {
|
||||
content: '\f044';
|
||||
}
|
||||
|
||||
.kolidecon-grid-select:before {
|
||||
content: '\f045';
|
||||
}
|
||||
|
||||
.kolidecon-label:before {
|
||||
content: '\f033';
|
||||
}
|
||||
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0
|
||||
}
|
||||
|
||||
.sr-only-focusable:active,
|
||||
.sr-only-focusable:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto
|
||||
}
|
||||
|
||||
|
||||
@ -8,5 +8,8 @@
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script async defer src="/assets/bundle.js" onload="this.parentElement.removeChild(this)"></script>
|
||||
<!-- Because iOS hates interactive stuff, we have to kill it with fire -->
|
||||
<script>document.addEventListener("touchstart", function() {},false);</script>
|
||||
<!-- End Apple Hate -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user