action-panel WIP

js/components/ascribe_forms/form_signup.js

@@ -75,7 +75,7 @@ let SignupForm = React.createClass({
         let tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
             getLangText('This password is securing your digital property like a bank account') + '.\n ' +
             getLangText('Store it in a safe place') + '!';
-
+        let email = this.getQuery().email ? this.getQuery().email : null;
         return (
             <Form
                 className="ascribe-form-bordered"
@@ -102,6 +102,7 @@ let SignupForm = React.createClass({
                         type="email"
                         placeholder={getLangText('(e.g. andy@warhol.co.uk)')}
                         autoComplete="on"
+                        defaultValue={email}
                         required/>
                 </Property>
                 <Property

js/components/ascribe_panel/action_panel.js

@@ -0,0 +1,71 @@
+'use strict';
+
+import React from 'react';
+
+
+let ActionPanel = React.createClass({
+    propTypes: {
+        title: React.PropTypes.string,
+        content: React.PropTypes.string,
+        buttons: React.PropTypes.element,
+        onClick: React.PropTypes.func,
+        ignoreFocus: React.PropTypes.bool
+    },
+
+    getInitialState() {
+        return {
+            isFocused: false
+        };
+    },
+
+    handleFocus() {
+        // if ignoreFocus (bool) is defined, then just ignore focusing on
+        // the property and input
+        if(this.props.ignoreFocus) {
+            return;
+        }
+
+        // if onClick is defined from the outside,
+        // just call it
+        if(this.props.onClick) {
+            this.props.onClick();
+        }
+
+        this.refs.input.getDOMNode().focus();
+        this.setState({
+            isFocused: true
+        });
+    },
+
+    getClassName() {
+        if(this.state.isFocused) {
+            return 'is-focused';
+        } else {
+            return '';
+        }
+    },
+
+    render() {
+
+        return (
+            <div
+                className={'ascribe-panel-wrapper ' + this.getClassName()}
+                onClick={this.handleFocus}
+                onFocus={this.handleFocus}>
+                <div className='ascribe-panel-title'>
+                    {this.props.title}
+                </div>
+                <div className='ascribe-panel-content-wrapper'>
+                    <span className="ascribe-panel-content pull-left">
+                        {this.props.content}
+                    </span>
+                    <span className='ascribe-panel-buttons pull-right'>
+                        {this.props.buttons}
+                    </span>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default ActionPanel;

js/components/whitelabel/prize/components/settings_container.js

@@ -16,6 +16,8 @@ import Form from '../../../ascribe_forms/form';
 import Property from '../../../ascribe_forms/property';
 import FormPropertyHeader from '../../../ascribe_forms/form_property_header';
 
+import ActionPanel from '../../../ascribe_panel/action_panel';
+
 import Table from '../../../ascribe_table/table';
 import TableItem from '../../../ascribe_table/table_item';
 import TableItemText from '../../../ascribe_table/table_item_text';
@@ -49,13 +51,13 @@ let Settings = React.createClass({
     },
 
     render() {
-        let prize_settings = null;
+        let prizeSettings = null;
         if (this.state.currentUser.is_admin){
-            prize_settings = <PrizeSettings />;
+            prizeSettings = <PrizeSettings />;
         }
         return (
             <SettingsContainer>
-                {prize_settings}
+                {prizeSettings}
             </SettingsContainer>
         );
     }
@@ -139,6 +141,7 @@ let PrizeJurySettings = React.createClass({
         PrizeJuryActions.fetchJury();
         let notification = new GlobalNotificationModel(response.notification, 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
+        this.refs.form.refs.email.refs.input.getDOMNode().value = null;
     },
 
     render() {
@@ -150,30 +153,21 @@ let PrizeJurySettings = React.createClass({
         if (this.state.members.length > -1) {
             content = this.state.members.map(function(member, i) {
                 return (
-                    <Property
+                    <ActionPanel
                         name={member.email}
-                        label={member.email}
-                        key={i}>
-                        <div className="row-same-height">
-                            <div className="no-padding col-xs-6 col-sm-10 col-xs-height col-middle">
-                            {member.status}
-                            </div>
-                            <div className="col-xs-6 col-sm-2 col-xs-height">
-                                <button
+                        key={i}
+                        title={member.email}
+                        content={member.status}
+                        buttons={<button
                                     className="pull-right btn btn-default btn-sm"
                                     data-id={member.name}>
                                     {getLangText('RESEND INVITATION')}
-                                </button>
-                            </div>
-                        </div>
-                    </Property>);
+                                </button>}
+                       />);
             }, this);
             content = (
                 <div>
-                    <Form>
                     {content}
-                        <hr />
-                    </Form>
                 </div>);
         }
         return (
@@ -181,6 +175,7 @@ let PrizeJurySettings = React.createClass({
                 <Form
                     url={apiUrls.jury}
                     handleSuccess={this.handleCreateSuccess}
+                    ref='form'
                     buttonSubmitText='INVITE'>
                     <FormPropertyHeader>
                         <h4 style={{margin: '30px 0px 10px 10px'}}>Jury Members</h4>

sass/ascribe_panel.scss

@@ -0,0 +1,13 @@
+.ascribe-panel-wrapper {
+    border: 1px solid #F5F5F5;
+}
+
+.ascribe-panel-title {
+    padding: 1em 0 1em 1.5em;
+}
+
+.ascribe-panel-content {
+    padding: .75em 0 .75em 1em;
+    font-size: 1em;
+    color: #616161;
+}

sass/main.scss

@@ -27,6 +27,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_settings';
 @import 'ascribe_slides_container';
 @import 'ascribe_form';
+@import 'ascribe_panel';
 
 @import 'whitelabel/index';