Fix styling

react-web/src/components/App.js

@@ -7,45 +7,56 @@ import NavBar from './NavBar';
 import { SessionDetailsForm } from './SessionDetailsForm';
 import { Session } from './Session';
 
+const USERNAME_STORAGE_KEY = 'userName';
+
 class App extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       sessionId: null,
-      userName: null
+      userName: this.getStoredUserName()
     };
   }
 
   onSessionDetailsCreated = sessionDetails => {
+    this.storeUserName(sessionDetails.userName);
     this.setState(sessionDetails);
   };
 
+  getStoredUserName = () => {
+    return window.sessionStorage.getItem(USERNAME_STORAGE_KEY);
+  }
+
+  storeUserName = userName => {
+    window.sessionStorage.setItem(USERNAME_STORAGE_KEY, userName);
+  }
+
   render = () => {
     const {sessionId, userName} = this.state;
 
     return (
       <div className="App">
         <NavBar />
-        <Switch>
-          <Route exact path="/" render={() => {
-              if (!sessionId) {
+          <Switch>
+            <Route exact path="/" render={() => {
+                if (!sessionId) {
+                  return <SessionDetailsForm onSessionDetailsCreated={this.onSessionDetailsCreated} />
+                } else if (sessionId) {
+                  return <Redirect exact to={`/session/${sessionId}`} />
+                }
+              }
+            }/>
+            <Route exact path="/session/:id" render={routeData => {
+              if (!userName) {
                 return <SessionDetailsForm onSessionDetailsCreated={this.onSessionDetailsCreated} />
-              } else if (sessionId) {
-                return <Redirect exact to={`/session/${sessionId}`} />
+              } else {
+                return <Session sessionId={routeData.match.params.id} userName={this.state.userName}/>}
               }
-            }
-          }/>
-          <Route exact path="/session/:id" render={routeData => {
-            if (!userName) {
-              return <SessionDetailsForm onSessionDetailsCreated={this.onSessionDetailsCreated} />
-            } else {
-              return <Session sessionId={routeData.match.params.id} userName={this.state.userName}/>}
-            }
-          }/>
-          {/* Default redirect */}
-          <Redirect to="/" />
-        </Switch>
+            }/>
+            {/* Default redirect */}
+            <Redirect to="/" />
+          </Switch>
       </div>
     );
   }

react-web/src/components/App.scss

@@ -1,8 +1,10 @@
 @import "../style/variables";
 @import "patternfly";
 
-@import "_createSession";
-@import "_session";
-@import "_pointselector";
 @import "_storypointer";
-@import "_inlineEdit";
+@import "_storyinput";
+
+.row {
+  padding-top: $padding-large-vertical;
+  padding-bottom: $padding-large-vertical;
+}

react-web/src/components/InlineEdit.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ControlLabel, FormControl } from 'patternfly-react';
+import { Grid, Row, Col, Button, FormControl } from 'patternfly-react';
 
 export class InlineEdit extends React.Component {
   constructor(props) {
@@ -17,46 +17,53 @@ export class InlineEdit extends React.Component {
     }
   }
 
+  componentDidUpdate = () => {
+    if (this.state.editing) {
+      this.textInput.focus();
+    }
+  }
+
   cancelEdit = () => {
+    this.textInput.value = this.currentValue;
     this.setState({editing: false});
   }
 
   setEditable = () => {
     this.setState({editing: true});
   }
 
+  setRef = ref => {
+    this.textInput = ref;
+  }
+
   save = () => {
-    const value = this.inputForm.value;
+    const value = this.textInput.value;
     this.currentValue = value;
     this.setState({editing: false});
     this.props.save && this.props.save(value);
   }
 
   clearInput = () => {
-    this.inputForm.value = '';
+    this.textInput.value = '';
   }
 
   render() {
     return( 
-      <div className="inline-edit-container form-group">
-        <ControlLabel className="control-label col-md-2">{this.props.label}</ControlLabel>
-        <div className={"col-md-10 form-control-pf-editable " + (this.state.editing ? "form-control-pf-edit" : "")}>
-          <Button className="form-control-pf-value" onClick={this.setEditable}>
-            <span>{this.currentValue || this.props.placeholder}</span>
-            <i className="glyphicon glyphicon-pencil"></i>
+      <div className={"inline-edit-container form-control-pf-editable " + (this.state.editing ? "form-control-pf-edit" : "")}>
+        <Button className="form-control-pf-value col-md-12" onClick={this.setEditable} bsSize="large">
+          <span className={"pull-left " + (this.currentValue ? "current-value" : "placeholder")}>{this.currentValue || this.props.placeholder}</span>
+          <i className="glyphicon glyphicon-pencil"></i>
+        </Button>
+        <div className="form-control-pf-textbox">
+          <FormControl 
+            type="text"
+            inputRef={this.setRef}/>
+          <Button className="form-control-pf-empty" onClick={this.clearInput}>
+            <span className="fa fa-times-circle fa-lg"></span>
           </Button>
-          <div className="form-control-pf-textbox">
-            <FormControl 
-              type="text" 
-              placeholder={this.props.placeholder}
-              inputRef={el => this.inputForm = el}/>
-            <Button className="form-control-pf-empty" onClick={this.clearInput}>
-              <span className="fa fa-times-circle fa-lg"></span>
-            </Button>
-          </div>
-          <Button className="form-control-pf-save" bsStyle="primary" onClick={this.save}><i className="glyphicon glyphicon-ok"></i></Button>
-          <Button className="form-control-pf-cancel" onClick={this.cancelEdit}><i className="glyphicon glyphicon-remove"></i></Button>
         </div>
+        <Button className="form-control-pf-save" bsStyle="primary" onClick={this.save}><i className="glyphicon glyphicon-ok"></i></Button>
+        <Button className="form-control-pf-cancel" onClick={this.cancelEdit}><i className="glyphicon glyphicon-remove"></i></Button>
       </div>
     );
   }

react-web/src/components/Session.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Nav, NavItem, TabContent, TabPane, Tabs } from 'patternfly-react';
+import { Grid, Row, Col } from 'patternfly-react';
 
 import { StoryPointer } from './StoryPointer';
 import { InlineEdit } from './InlineEdit';
@@ -20,35 +20,22 @@ export class Session extends React.Component {
 
   render() {
     return( 
-      <div className="session-container">
-        <header className="text-center">
-          <h2> Welcome {this.props.userName} </h2>
-          Copy the link in your browser and send it to other pointers
-        </header>
-        <div className="col-md-12">
-          <Tabs id="basic-tabs-pf" defaultActiveKey={1}>
-            <div>
-              <Nav bsClass="nav nav-tabs nav-tabs-pf nav-justified">
-                <NavItem eventKey={1}> Pointing </NavItem>
-                <NavItem eventKey={2}> JIRA </NavItem>
-                <NavItem eventKey={3}> Issues </NavItem>
-              </Nav>
-              <TabContent>
-                <TabPane eventKey={1}>
-                  <InlineEdit label="Story:" value={this.state.storyName} placeholder="Enter your story here" save={this.updateStory}/>
-                  <StoryPointer sessionId={this.props.sessionId} userName={this.props.userName}></StoryPointer>
-                </TabPane>
-                <TabPane eventKey={2}>
-                {/* JIRA Content */}
-                </TabPane>
-                <TabPane eventKey={3}>
-                {/* Issues Content */}
-                </TabPane>
-              </TabContent>
-            </div>
-          </Tabs>
-        </div>
-      </div>
+      <Grid>
+        <Row>
+          <header className="text-center" style={{marginBottom: "25px"}}>
+            <h2> Welcome {this.props.userName} </h2>
+            Copy the link in your browser and send it to other pointers
+          </header>
+        </Row>
+        <Row>
+          <Col sm={12} md={10} mdOffset={1} style={{marginBottom: "50px"}}>
+            <InlineEdit value={this.state.storyName} placeholder="Enter your story here" save={this.updateStory}/>
+          </Col>
+          <Col sm={12} md={8} mdOffset={2}>
+            <StoryPointer sessionId={this.props.sessionId} userName={this.props.userName}></StoryPointer>
+          </Col>
+        </Row>
+      </Grid>
     );
   }
 }

react-web/src/components/SessionDetailsForm.js

@@ -1,24 +1,20 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
+import { Grid } from 'patternfly-react'
 
 import { UsernameForm } from './UsernameForm';
 
-const USERNAME_STORAGE_KEY = 'userName';
-
 class SessionDetailsForm extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.state = {
-      sessionId: this.props.match.params.id,
-      [USERNAME_STORAGE_KEY]: this.getStoredUserName()
-    };
+    this.sessionId = this.props.match.params.id;
   }
 
   getSessionId = () => {
-    if (this.state.sessionId) {
-      return Promise.resolve(this.state.sessionId);
+    if (this.sessionId) {
+      return Promise.resolve(this.sessionId);
     } else {
       return fetch(`${process.env.REACT_APP_API_HOST}/session`)
         .then(res => res.json())
@@ -31,30 +27,22 @@ class SessionDetailsForm extends React.Component {
   onFormComplete = userName => {
     this.getSessionId()
       .then(id => {
-        this.storeUserName(userName);
         this.props.onSessionDetailsCreated && this.props.onSessionDetailsCreated({sessionId: id, userName: userName});
       });
   }
 
-  storeUserName = userName => {
-    window.sessionStorage.setItem(USERNAME_STORAGE_KEY, userName);
-  }
-
-  getStoredUserName = () => {
-    return window.sessionStorage.getItem(USERNAME_STORAGE_KEY);
-  }
-
   render = () => {
-    const {sessionId} = this.state;
+    const {sessionId} = this;
     const btnContext = sessionId ? 'Join Session' : 'Start Session';
     const greeting = sessionId ? 'Join Session' : 'Start a New Storypoint Session';
+
     return( 
-      <div className="homepage">
+      <Grid>
         <header className="text-center">
           <h1>{greeting}</h1>
         </header>
-          <UsernameForm onFormComplete={this.onFormComplete} btnContext={btnContext} />
-      </div>
+        <UsernameForm onFormComplete={this.onFormComplete} btnContext={btnContext} />
+      </Grid>
     );
   }
 }

react-web/src/components/StoryPointer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'patternfly-react';
+import { Button, Col, Grid, Row } from 'patternfly-react';
 
 import { PointSelector } from './PointSelector';
 import { PointerTable } from './PointerTable';
@@ -134,10 +134,10 @@ export class StoryPointer extends React.Component {
   }
 
   render() {
-    return( 
-      <div className="storypointer">
+    return(
+      <div className="storypointer-container">
         <PointSelector onPointSelected={this.pointSelected}></PointSelector>
-        <div className="table-container">
+        <div className="table-container pull-right">
           <PointerTable pointers={this.state.pointers}></PointerTable>
           <div className="pull-right">
             <Button onClick={this.showPoints} bsStyle="primary">Show</Button>

react-web/src/components/_storyinput.scss

@@ -0,0 +1,46 @@
+$story-input-height: 40px !default;
+$story-input-radius: 5px !default;
+$story-input-line-height: 1.66667 !default;
+
+// Name space this to storyinput
+.inline-edit-container.form-control-pf-editable {
+    .form-control-pf-value {
+        flex: 1;
+        box-shadow: none;
+        white-space: normal;
+        border-color: $input-border;
+        border-radius: $story-input-radius;
+        min-height: $story-input-height;
+        line-height: $story-input-line-height;
+        margin: 0px;
+        padding-right: 30px;
+
+        span.placeholder {
+            font-style: italic;
+            color: $placeholder-color;
+        }
+
+        .glyphicon-pencil {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: 0;
+            float: right;
+            padding-right: 10px;
+        }
+    }
+
+    .form-control-pf-textbox {
+        input {
+            min-height: $story-input-height;
+            border-radius: $story-input-radius;
+            font-size: 14px;
+            font-weight: 600;
+            line-height: $story-input-line-height;
+        }
+    }
+
+    .form-control-pf-empty {
+        box-shadow: none;
+    }
+}