commit ba19ffdfd442c7ebe66f482b90f6bc65a0e9b8be
author Laurence Maultsby <laurence.maultsby@riftio.com> Tue Mar 07 13:59:18 2017 -0500
committer Laurence Maultsby <laurence.maultsby@riftio.com> Tue Mar 07 13:59:18 2017 -0500
tree a2cf2c5b9c17194b431721b6a71e8adb3946abcd
parent 625a4c2118c4d095daf2a264643798eddf4d0491

User Management: Create and delete. Initial pass.

Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>

skyquake/framework/widgets/panel/panel.jsx

diff --git a/skyquake/framework/widgets/panel/panel.jsx b/skyquake/framework/widgets/panel/panel.jsx
index 4ef7c89..b26b1b1 100644
--- a/skyquake/framework/widgets/panel/panel.jsx
+++ b/skyquake/framework/widgets/panel/panel.jsx
@@ -18,6 +18,7 @@
 import React, {Component} from 'react';
 import 'style/core.css';
 import './panel.scss';
+import circleXImage from '../../../node_modules/open-iconic/svg/circle-x.svg';
 export class Panel extends Component {
     constructor(props) {
         super(props)
@@ -28,8 +29,15 @@
         let classRoot = className ? ' ' + className : ' ';
         let hasCorners = this.props['no-corners'];
         let titleTag = title ? <header className="skyquakePanel-title">{title}</header> : '';
+        let closeButton = (
+            <a onClick={self.props.hasCloseButton}
+              className={"close-btn"}>
+              <img src={circleXImage} title="Close card" />
+              </a>
+        );
         return (
             <section className={'skyquakePanel' + classRoot} style={props.style}>
+                {  self.props.hasCloseButton ? closeButton : null}
                 { !hasCorners ? <i className="corner-accent top left"></i> : null }
                 { !hasCorners ? <i className="corner-accent top right"></i> : null }
                 {titleTag}

skyquake/framework/widgets/panel/panel.scss

diff --git a/skyquake/framework/widgets/panel/panel.scss b/skyquake/framework/widgets/panel/panel.scss
index 2a31b1c..75dc8ac 100644
--- a/skyquake/framework/widgets/panel/panel.scss
+++ b/skyquake/framework/widgets/panel/panel.scss
@@ -53,9 +53,22 @@
             width:100%;
             height:100%;
         }
+    .close-btn {
+        cursor:pointer;
+        position: absolute;
+        right: -0.5rem;
+        top: -0.5rem;
+        img {
+            width: 1rem;
+        }
+    }
 }
 
 .skyquakePanelWrapper.column {
+    -ms-flex-direction:column;
+            flex-direction:column;
+        display:-ms-flexbox;
+        display:flex;
     .skyquakePanel-wrapper {
         height:auto;
     }