sharemodal view

css/ascribe-fonts/style.css

@@ -1,10 +1,10 @@
 @font-face {
 	font-family: 'ascribe';
-	src:url('fonts/ascribe.eot?-6bb2dq');
+	src:url('ascribe.eot?-6bb2dq');
-	src:url('fonts/ascribe.eot?#iefix-6bb2dq') format('embedded-opentype'),
+	src:url('ascribe.eot?#iefix-6bb2dq') format('embedded-opentype'),
-		url('fonts/ascribe.woff?-6bb2dq') format('woff'),
+		url('ascribe.woff?-6bb2dq') format('woff'),
-		url('fonts/ascribe.ttf?-6bb2dq') format('truetype'),
+		url('ascribe.ttf?-6bb2dq') format('truetype'),
-		url('fonts/ascribe.svg?-6bb2dq#ascribe') format('svg');
+		url('ascribe.svg?-6bb2dq#ascribe') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -187,3 +187,7 @@
 	content: "\eae9";
 }
 
+.btn-glyph-ascribe{
+    font-size: 18px;
+    padding: 4px 12px 0 10px
+}

css/main.css

@@ -52,28 +52,94 @@
     vertical-align: middle;
 }
 
-.btn-ascribe, .btn-ascribe:hover, .btn-ascribe:active, .btn-ascribe:focus {
+/*.btn-ascribe, .btn-ascribe:hover, .btn-ascribe:active, .btn-ascribe:focus {*/
-    background-color: rgba(2, 182, 163, 0.5);
+/*background-color: rgba(2, 182, 163, 0.5);*/
-    border-color: rgba(2, 182, 163, 0.5);
+/*border-color: rgba(2, 182, 163, 0.5);*/
+/*}*/
+
+.btn-ascribe, .btn-ascribe-inv {
+    border: 1px solid #444;
+    line-height: 2em;
+    margin-right: 1px;
+    margin-left: 0 !important;
+    font-family: sans-serif !important;
+    border-radius: 0 !important;
+
 }
 
-.ascribe-detail-header{
+.btn-ascribe, .btn-ascribe-inv:active, .btn-ascribe-inv:hover {
+    color: #222 !important;
+    background-color: #FFF;
+}
+
+.btn-ascribe:active, .btn-ascribe:hover, .btn-ascribe-inv {
+    color: #FFF !important;
+    background-color: #444;
+}
+
+.btn-ascribe-inv:disabled, .btn-ascribe-inv:focus {
+    color: #444 !important;
+    background-color: #BBB !important;
+    border: 1px solid #444 !important;
+}
+
+.btn-ascribe-sm {
+    font-size: 12px;
+    line-height: 1.3em;
+}
+
+.btn-ascribe-green, .btn-ascribe-green-inv {
+    border: 1px solid #48DACB;
+    line-height: 2em;
+    margin-left: 0 !important;
+    font-family: sans-serif !important;
+    border-radius: 0 !important;
+
+}
+
+.btn-ascribe-green, .btn-ascribe-green-inv:active, .btn-ascribe-green-inv:hover {
+    background-color: #FFF;
+    border: 1px solid rgba(2, 182, 163, 0.5);
+    color: rgba(2, 182, 163, 0.5);
+}
+
+.btn-ascribe-green:active, .btn-ascribe-green:hover, .btn-ascribe-green-inv {
+    border: 1px solid rgba(2, 182, 163, 0.5);
+    color: white;
+    background-color: rgba(2, 182, 163, 0.5);
+}
+
+.ascribe-detail-header {
     margin-top: 2em;
 }
 
-.ascribe-detail-header > div{
-    padding-bottom: 0.4em;
-}
 
 .ascribe-detail-title {
     font-size: 2em;
     margin-bottom: -0.2em;
 }
 
+.ascribe-detail-property {
+    padding-bottom: 0.4em;
+}
 .ascribe-detail-property > .row-same-height > .col-xs-2 {
     text-transform: uppercase;
 }
 
+.input-text-ascribe {
+    border-bottom: 1px solid black;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    background: transparent;
+    border-radius: 0 !important;
+    box-shadow: none;
+}
+
+.textarea-ascribe-message {
+    height: 13em !important;
+}
+
 /* columns of same height styles */
 /* http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */
 .row-full-height {

index.html

@@ -5,9 +5,10 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>ascribe</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
-        <link rel="stylesheet" href="css/main.css"></link>
+        <link rel="stylesheet" href="css/main.css">
-        <link rel="stylesheet" href="css/ascribe-fonts/ascribe-fonts.css"></link>
+        <link rel="stylesheet" href="css/ascribe-fonts/ascribe-fonts.css">
+        <link rel="stylesheet" href="css/ascribe-fonts/style.css">
         <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
     </head>
     <body>

js/components/ascribe_modal/modal_share.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import Modal from 'react-bootstrap/lib/Modal';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
+
+let ShareModalButton = React.createClass({
+    render() {
+        return (
+            <OverlayTrigger delay={500} placement="left" overlay={<Tooltip>Share the artwork</Tooltip>}>
+                <ModalTrigger modal={<ShareModal edition={this.props.edition}
+                                                 currentUser={this.props.currentUser}/>}>
+                    <div className="btn btn-ascribe-inv btn-glyph-ascribe">
+                        <span className="glyph-ascribe-share2"></span>
+                    </div>
+                </ModalTrigger>
+            </OverlayTrigger>
+        )
+    }
+});
+
+let ShareModal = React.createClass({
+    render() {
+        var content = "Hi,\n\nI am sharing \"" + this.props.edition.title +
+                    "\" with you.\n\nTruly yours,\n" + this.props.currentUser.username;
+        return (
+            <Modal {...this.props} title="Share artwork">
+                <div className="modal-body">
+                    <form id="share_modal_content" role="form">
+                        <div className="form-group">
+                            <input className="form-control input-text-ascribe" name="share_emails"
+                                placeholder="Comma separated emails" required="required" type="text" />
+                        </div>
+                        <div className="form-group">
+                            <textarea className="form-control input-text-ascribe textarea-ascribe-message"
+                                name="share_message"
+                                defaultValue={content}></textarea>
+                        </div>
+                        <div className="modal-footer">
+                            <button type="submit" className="btn btn-ascribe-inv">SHARE</button>
+                            <button className="btn btn-ascribe-inv" onClick={this.props.onRequestHide}>CLOSE</button>
+                        </div>
+                    </form>
+                </div>
+            </Modal>
+        );
+    }
+});
+
+export default ShareModalButton;

js/components/edition.js

@@ -1,26 +1,21 @@
 import React from 'react';
+
 import ImageViewer from './ascribe_media/image_viewer';
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import ShareModalButton from './ascribe_modal/modal_share';
-import OverlayMixin from 'react-bootstrap/lib/OverlayMixin';
-import Modal from 'react-bootstrap/lib/Modal';
-import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
 
 /**
  * This is the component that implements display-specific functionality
  */
 let Edition = React.createClass({
     render() {
-        var modal = <ShareModal edition={this.props.edition} />;
         return (
             <div>
-                {modal}
                 <div className="col-md-7">
                     <ImageViewer thumbnail={this.props.edition.thumbnail}/>
                 </div>
                 <div className="col-md-5">
                     <EditionHeader edition={this.props.edition}/>
-                    <EditionDetails edition={this.props.edition}/>
+                    <EditionDetails edition={this.props.edition} currentUser={ this.props.currentUser }/>
-
                 </div>
 
             </div>
@@ -43,6 +38,7 @@ let EditionHeader = React.createClass({
 });
 
 let EditionDetails = React.createClass({
+
     render() {
         return (
             <div className="ascribe-detail-header">
@@ -50,9 +46,11 @@ let EditionDetails = React.createClass({
                     value={this.props.edition.edition_number + " of " + this.props.edition.num_editions} />
                 <EditionDetailProperty label="id" value={ this.props.edition.bitcoin_id } />
                 <EditionDetailProperty label="owner" value={ this.props.edition.owner } />
+                <ShareModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <hr/>
             </div>
         );
+
     }
 });
 
@@ -73,69 +71,6 @@ let EditionDetailProperty = React.createClass({
     }
 });
 
-let ShareModal = React.createClass({
-    mixins: [OverlayMixin],
 
-    getInitialState: function() {
+export default Edition;
-        return {
-            isOpen: true
-        };
-    },
-    hide: function(){
-      this.setState({isOpen: false})
-    },
-    renderOverlay: function() {
-        if (!this.state.isOpen) {
-            return <span/>;
-        }
-    },
-    render: function() {
-        return (
-            <Modal title="Share artwork" onRequestHide={this.hide}>
-            </Modal>
-        );
-    }
-});
-//let ShareModal = React.createClass({
-//    mixins: [OverlayMixin],
-//
-//    getInitialState: function() {
-//        return {
-//            isModalOpen: true
-//        };
-//    },
-//    renderOverlay: function() {
-//        if (!this.state.isModalOpen) {
-//            return <span/>;
-//        }
-//    },
-//    hide: function(){
-//        this.setState({isModalOpen: false});
-//    },
-//    render: function() {
-//        var content = "Hi,\n\nI am sharing \"" + this.props.edition.title +
-//                    "\" with you.\n\nTruly yours,\n";
-//        return (
-//            <Modal title="Share artwork" onRequestHide={this.hide}>
-//                <div className="modal-body">
-//                    <form id="share_modal_content" role="form">
-//                        <div className="form-group">
-//                            <input className="form-control input-text-ascribe" name="share_emails"
-//                                placeholder="Comma separated emails" required="required" type="text" />
-//                        </div>
-//                        <div className="form-group">
-//                            <textarea className="form-control input-text-ascribe" name="share_message"
-//                                defaultValue={content}></textarea>
-//                        </div>
-//                        <div className="modal-footer">
-//                            <button type="submit" className="btn btn-ascribe-inv">SHARE</button>
-//                            <button className="btn btn-ascribe" onClick={this.hide}>CLOSE</button>
-//                        </div>
-//                    </form>
-//                </div>
-//            </Modal>
-//        );
-//    }
-//});
 
-export default Edition;

js/components/edition_container.js

@@ -2,6 +2,8 @@ import React from 'react';
 
 import EditionActions from '../actions/edition_actions';
 import EditionStore from '../stores/edition_store';
+import UserActions from '../actions/user_actions';
+import UserStore from '../stores/user_store';
 
 import Edition from './edition';
 
@@ -11,7 +13,8 @@ import Edition from './edition';
 let EditionContainer = React.createClass({
 
     getInitialState() {
-        return EditionStore.getState();
+        return {'user': UserStore.getState(),
+                'edition': EditionStore.getState()}
     },
 
     onChange(state) {
@@ -21,17 +24,20 @@ let EditionContainer = React.createClass({
     componentDidMount() {
         EditionActions.fetchOne(this.props.params.editionId);
         EditionStore.listen(this.onChange);
+        UserActions.fetchCurrentUser();
+        UserStore.listen(this.onChange);
     },
 
     componentDidUnmount() {
         EditionStore.unlisten(this.onChange);
+        UserStore.unlisten(this.onChange);
     },
 
     render() {
 
         if('title' in this.state.edition) {
             return (
-                <Edition edition={this.state.edition}></Edition>
+                <Edition edition={this.state.edition } currentUser={this.state.currentUser}></Edition>
             );
         } else {
             return (