empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Adding in new Rocker Switch (#498)

Browse Source
This commit is contained in:
Kyle Knight 2016-11-18 09:41:52 -06:00 committed by GitHub
parent b0e923ccc3
commit d6c653b8ea
8 changed files with 323 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/fonts/kolidecons/kolidecons.woff
View File

Binary file not shown.

51
frontend/components/buttons/Rocker/Rocker.jsx Normal file
View 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
View 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
View File

@ -0,0 +1 @@
export default from './Rocker';

8
frontend/pages/HomePage/HomePage.jsx
View File

@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import { Link } from 'react-router'; import { Link } from 'react-router';
import Avatar from '../../components/Avatar'; import Avatar from '../../components/Avatar';
import Rocker from '../../components/buttons/Rocker';
import paths from '../../router/paths'; import paths from '../../router/paths';
import userInterface from '../../interfaces/user'; import userInterface from '../../interfaces/user';
@ -15,12 +16,19 @@ export class HomePage extends Component {
const { user } = this.props; const { user } = this.props;
const { LOGOUT } = paths; const { LOGOUT } = paths;
const baseClass = 'home-page'; const baseClass = 'home-page';
const rockerOpts = {
aText: 'List',
aIcon: 'list-select',
bText: 'Grid',
bIcon: 'grid-select',
};
return ( return (
<div className={baseClass}> <div className={baseClass}>
{user && <Avatar size="small" className={`${baseClass}__avatar`} user={user} />} {user && <Avatar size="small" className={`${baseClass}__avatar`} user={user} />}
<span>You are successfully logged in! </span> <span>You are successfully logged in! </span>
{user && <Link to={LOGOUT}>Logout</Link>} {user && <Link to={LOGOUT}>Logout</Link>}
<Rocker name="view-type" value="grid" options={rockerOpts} />
</div> </div>
); );
} }

3
frontend/styles/global/_global.scss
View File

@ -1,6 +1,9 @@
html { html {
position: relative; position: relative;
min-height: 100%; 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 { body {

242
frontend/styles/global/_icons.scss
View File

@ -1,228 +1,236 @@
[class^="kolidecon-"], [class^='kolidecon-'],
[class*=" kolidecon-"], [class*=' kolidecon-'],
.kolidecon { .kolidecon {
display: inline-block; display: inline-block;
font: normal normal normal 14px/1 'kolidecons'; font: normal normal normal 14px/1 'kolidecons';
font-size: inherit; font-size: inherit;
text-rendering: auto; text-rendering: auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.kolidecon-lg { .kolidecon-lg {
font-size: 1.33333333em; font-size: 1.33333333em;
line-height: 0.75em; line-height: 0.75em;
vertical-align: -15%; vertical-align: -15%;
} }
.kolidecon-2x { .kolidecon-2x {
font-size: 2em; font-size: 2em;
} }
.kolidecon-3x { .kolidecon-3x {
font-size: 3em; font-size: 3em;
} }
.kolidecon-4x { .kolidecon-4x {
font-size: 4em; font-size: 4em;
} }
.kolidecon-5x { .kolidecon-5x {
font-size: 5em; font-size: 5em;
} }
.kolidecon-fw { .kolidecon-fw {
width: 1.28571429em; width: 1.28571429em;
text-align: center; text-align: center;
} }
.kolidecon-kolide-logo-flat:before { .kolidecon-kolide-logo-flat:before {
content: '\f000'; content: '\f000';
} }
.kolidecon-chevrondown:before { .kolidecon-chevrondown:before {
content: '\f004'; content: '\f004';
} }
.kolidecon-chevronleft:before { .kolidecon-chevronleft:before {
content: '\f006'; content: '\f006';
} }
.kolidecon-chevronright:before { .kolidecon-chevronright:before {
content: '\f008'; content: '\f008';
} }
.kolidecon-chevronup:before { .kolidecon-chevronup:before {
content: '\f00a'; content: '\f00a';
} }
.kolidecon-cpu:before { .kolidecon-cpu:before {
content: '\f00c'; content: '\f00c';
} }
.kolidecon-downcarat:before { .kolidecon-downcarat:before {
content: '\f00d'; content: '\f00d';
} }
.kolidecon-filter:before { .kolidecon-filter:before {
content: '\f00f'; content: '\f00f';
} }
.kolidecon-mac:before { .kolidecon-mac:before {
content: '\f012'; content: '\f012';
} }
.kolidecon-memory:before { .kolidecon-memory:before {
content: '\f013'; content: '\f013';
} }
.kolidecon-penciledit:before { .kolidecon-penciledit:before {
content: '\f015'; content: '\f015';
} }
.kolidecon-storage:before { .kolidecon-storage:before {
content: '\f019'; content: '\f019';
} }
.kolidecon-upcarat:before { .kolidecon-upcarat:before {
content: '\f01b'; content: '\f01b';
} }
.kolidecon-uptime:before { .kolidecon-uptime:before {
content: '\f01c'; content: '\f01c';
} }
.kolidecon-world:before { .kolidecon-world:before {
content: '\f01d'; content: '\f01d';
} }
.kolidecon-osquery:before { .kolidecon-osquery:before {
content: '\f021'; content: '\f021';
} }
.kolidecon-join:before { .kolidecon-join:before {
content: '\f022'; content: '\f022';
} }
.kolidecon-add-button:before { .kolidecon-add-button:before {
content: '\f029'; content: '\f029';
} }
.kolidecon-username:before { .kolidecon-username:before {
content: '\f02a'; content: '\f02a';
} }
.kolidecon-password:before { .kolidecon-password:before {
content: '\f02b'; content: '\f02b';
} }
.kolidecon-email:before { .kolidecon-email:before {
content: '\f02c'; content: '\f02c';
} }
.kolidecon-query:before { .kolidecon-query:before {
content: '\f02d'; content: '\f02d';
} }
.kolidecon-hosts:before { .kolidecon-hosts:before {
content: '\f02e'; content: '\f02e';
} }
.kolidecon-packs:before { .kolidecon-packs:before {
content: '\f02f'; content: '\f02f';
} }
.kolidecon-help:before { .kolidecon-help:before {
content: '\f030'; content: '\f030';
} }
.kolidecon-admin:before { .kolidecon-admin:before {
content: '\f031'; content: '\f031';
} }
.kolidecon-config:before { .kolidecon-config:before {
content: '\f032'; content: '\f032';
} }
.kolidecon-label:before { .kolidecon-mia:before {
content: '\f033'; content: '\f034';
} }
.kolidecon-mia:before { .kolidecon-success-check:before {
content: '\f034'; content: '\f035';
} }
.kolidecon-success-check:before { .kolidecon-offline:before {
content: '\f035'; content: '\f036';
} }
.kolidecon-offline:before { .kolidecon-windows:before {
content: '\f036'; content: '\f037';
} }
.kolidecon-windows:before { .kolidecon-centos:before {
content: '\f037'; content: '\f038';
} }
.kolidecon-centos:before { .kolidecon-ubuntu:before {
content: '\f038'; content: '\f039';
} }
.kolidecon-ubuntu:before { .kolidecon-apple:before {
content: '\f039'; content: '\f03a';
} }
.kolidecon-apple:before { .kolidecon-search:before {
content: '\f03a'; content: '\f03b';
} }
.kolidecon-search:before { .kolidecon-all-hosts:before {
content: '\f03b'; content: '\f03c';
} }
.kolidecon-all-hosts:before { .kolidecon-single-host:before {
content: '\f03c'; content: '\f03d';
} }
.kolidecon-single-host:before { .kolidecon-alerts:before {
content: '\f03d'; content: '\f03e';
} }
.kolidecon-alerts:before { .kolidecon-logout:before {
content: '\f03e'; content: '\f03f';
} }
.kolidecon-logout:before { .kolidecon-user-settings:before {
content: '\f03f'; content: '\f040';
} }
.kolidecon-user-settings:before { .kolidecon-clipboard:before {
content: '\f040'; content: '\f043';
} }
.kolidecon-clipboard:before { .kolidecon-list-select:before {
content: '\f043'; content: '\f044';
}
.kolidecon-grid-select:before {
content: '\f045';
}
.kolidecon-label:before {
content: '\f033';
} }
.sr-only { .sr-only {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 1px; height: 1px;
padding: 0; padding: 0;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
border: 0 border: 0
} }
.sr-only-focusable:active, .sr-only-focusable:active,
.sr-only-focusable:focus { .sr-only-focusable:focus {
position: static; position: static;
width: auto; width: auto;
height: auto; height: auto;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
clip: auto clip: auto
} }

3
frontend/templates/react.tmpl
View File

@ -8,5 +8,8 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script async defer src="/assets/bundle.js" onload="this.parentElement.removeChild(this)"></script> <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> </body>
</html> </html>