user mgmt, project mgmt, clean up and styling
Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
diff --git a/skyquake/framework/widgets/form_controls/input.jsx b/skyquake/framework/widgets/form_controls/input.jsx
index 370afcc..4799dc1 100644
--- a/skyquake/framework/widgets/form_controls/input.jsx
+++ b/skyquake/framework/widgets/form_controls/input.jsx
@@ -17,7 +17,7 @@
*/
import './formControls.scss';
import SelectOption from 'widgets/form_controls/selectOption.jsx';
-
+import CircleSVG from '../../../node_modules/open-iconic/svg/media-record.svg'
import React, {Component} from 'react';
export default class Input extends Component {
@@ -71,6 +71,9 @@
} else {
displayedValue = value.toString();
}
+ if( props.readonly && props.type == "checkbox" ) {
+ displayedValue = <img src={CircleSVG} />
+ }
let html = (
<label className={className} style={props.style}>
<span> { label } {isRequired}</span>
diff --git a/skyquake/framework/widgets/header/header.scss b/skyquake/framework/widgets/header/header.scss
index 5e1e717..6a2e56c 100644
--- a/skyquake/framework/widgets/header/header.scss
+++ b/skyquake/framework/widgets/header/header.scss
@@ -1,5 +1,5 @@
/*
- *
+ *
* Copyright 2016 RIFT.IO Inc
*
* Licensed under the Apache License, Version 2.0 (the "License");
@@ -17,14 +17,20 @@
*/
header.header-app-component {
- padding: 20px 0px;
+ padding: 10px 0px;
+ display:-ms-flexbox;
display:flex;
- flex-direction:column;
+ -ms-flex-direction:column;
+ flex-direction:column;
.header-app-main {
+ display:-ms-flexbox;
display:flex;
- flex-direction:row;
- justify-content:space-between;
- align-items:center;
+ -ms-flex-direction:row;
+ flex-direction:row;
+ -ms-flex-pack:justify;
+ justify-content:space-between;
+ -ms-flex-align:center;
+ align-items:center;
}
h1 {
/*background: url('../../style/img/header-logo.png') no-repeat;*/
@@ -39,15 +45,19 @@
font-size: 1.625rem;
font-weight: 400;
position:relative;
- flex: 1 0 auto;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
}
ul {
+ display:-ms-flexbox;
display:flex;
}
li {
+ display:-ms-flexbox;
display:flex;
- flex:1 1 auto;
+ -ms-flex:1 1 auto;
+ flex:1 1 auto;
border-right:1px solid #e5e5e5;
padding: 0 1rem;
&:last-child {
@@ -55,12 +65,13 @@
}
a {
cursor:pointer;
- // padding: 0.125rem;
- // border-bottom:1px solid black;
+ /* padding: 0.125rem;*/
+ /* border-bottom:1px solid black;*/
text-decoration:underline;
}
}
.header-app-nav {
+ display:-ms-flexbox;
display:flex;
margin-left: 0.25rem;
a,span {
@@ -81,8 +92,11 @@
}
}
nav {
+ display:-ms-flexbox;
display:flex;
- flex:0 1 auto;
- align-items:center;
+ -ms-flex:0 1 auto;
+ flex:0 1 auto;
+ -ms-flex-align:center;
+ align-items:center;
}
}
diff --git a/skyquake/framework/widgets/panel/panel.jsx b/skyquake/framework/widgets/panel/panel.jsx
index c078069..03877b0 100644
--- a/skyquake/framework/widgets/panel/panel.jsx
+++ b/skyquake/framework/widgets/panel/panel.jsx
@@ -60,17 +60,22 @@
export class PanelWrapper extends Component {
render() {
let wrapperClass = 'skyquakePanelWrapper';
- let {className, ...props} = this.props;
+ let {className, column, style, ...props} = this.props;
if(className) {
wrapperClass = `${wrapperClass} ${className}`
}
+ if(column) {
+ style.flexDirection = 'column';
+ }
return (
- <div className={wrapperClass} {...props}>
+ <div className={wrapperClass} style={style} {...props}>
{this.props.children}
</div>)
}
}
-
+PanelWrapper.defaultProps = {
+ style: {}
+}
export default Panel;
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss b/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
index a01f154..77e72cf 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
@@ -1,4 +1,4 @@
-//import a reset
+/*import a reset*/
@import '../../style/_colors.scss';
html, body {
height:100%;
@@ -7,8 +7,10 @@
.skyquakeApp {
+ display: -ms-flexbox;
display: flex;
- flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
height: 100%;
background: $gray-lightest;
h1 {
@@ -20,6 +22,7 @@
color: #fff!important
}
.skyquakeNav {
+ display: -ms-flexbox;
display: flex;
color:white;
background:black;
@@ -27,17 +30,22 @@
z-index: 10;
font-size:0.75rem;
.secondaryNav {
- flex: 1 1 auto;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -ms-flexbox;
display: flex;
- justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
}
.app {
position:relative;
h2 {
font-size:0.75rem;
border-right: 1px solid black;
+ display: -ms-flexbox;
display: flex;
- align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
.oi {
padding-right: 0.5rem;
}
@@ -102,18 +110,19 @@
.titleBar {
padding: 1rem 0 0;
h1 {
- // background: url('../../style/img/header-logo.png') no-repeat;
+ /* background: url('../../style/img/header-logo.png') no-repeat;*/
background-size:contain;
height: 51px;
line-height: 51px;
margin-left: 20px;
- // padding-left: 100px;
+ /* padding-left: 100px;*/
left: 0;
font-size: 1.625rem;
font-weight: 400;
text-align:left;
position:relative;
- flex: 1 0 auto;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
}
}
.corner-accent {