mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 17:33:14 +01:00
sharemodal view
This commit is contained in:
ddejongh
parent
3a103c1d99
commit
8624eb26c7
@ -1,10 +1,10 @@
|
||||
@font-face {
|
||||
font-family: 'ascribe';
|
||||
src:url('fonts/ascribe.eot?-6bb2dq');
|
||||
src:url('fonts/ascribe.eot?#iefix-6bb2dq') format('embedded-opentype'),
|
||||
url('fonts/ascribe.woff?-6bb2dq') format('woff'),
|
||||
url('fonts/ascribe.ttf?-6bb2dq') format('truetype'),
|
||||
url('fonts/ascribe.svg?-6bb2dq#ascribe') format('svg');
|
||||
src:url('ascribe.eot?-6bb2dq');
|
||||
src:url('ascribe.eot?#iefix-6bb2dq') format('embedded-opentype'),
|
||||
url('ascribe.woff?-6bb2dq') format('woff'),
|
||||
url('ascribe.ttf?-6bb2dq') format('truetype'),
|
||||
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
|
||||
}
|
||||
80
css/main.css
80
css/main.css
@ -52,28 +52,94 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.btn-ascribe, .btn-ascribe:hover, .btn-ascribe:active, .btn-ascribe:focus {
|
||||
background-color: rgba(2, 182, 163, 0.5);
|
||||
border-color: rgba(2, 182, 163, 0.5);
|
||||
/*.btn-ascribe, .btn-ascribe:hover, .btn-ascribe:active, .btn-ascribe:focus {*/
|
||||
/*background-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 {
|
||||
|
||||
@ -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="css/main.css"></link>
|
||||
<link rel="stylesheet" href="css/ascribe-fonts/ascribe-fonts.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 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>
|
||||
|
||||
51
js/components/ascribe_modal/modal_share.js
Normal file
51
js/components/ascribe_modal/modal_share.js
Normal file
@ -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;
|
||||
@ -1,26 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
import ImageViewer from './ascribe_media/image_viewer';
|
||||
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
||||
import OverlayMixin from 'react-bootstrap/lib/OverlayMixin';
|
||||
import Modal from 'react-bootstrap/lib/Modal';
|
||||
import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
|
||||
import ShareModalButton from './ascribe_modal/modal_share';
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
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;
|
||||
|
||||
|
||||
@ -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 (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user