ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 01:25:17 +01:00
Code Issues Releases Wiki Activity

edition detail updated with forms

Browse Source
This commit is contained in:
ddejongh 2015-06-22 23:32:41 +02:00
parent 02f8193743
commit 89884ced1f
12 changed files with 224 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
js/components/ascribe_collapsible/collapsible_paragraph.js
View File

@ -18,6 +18,12 @@ const CollapsibleParagraph = React.createClass({
iconName: React.PropTypes.string iconName: React.PropTypes.string
}, },
getDefaultProps() {
return {
show: true
};
},
mixins: [CollapsibleMixin], mixins: [CollapsibleMixin],
getCollapsibleDOMNode(){ getCollapsibleDOMNode(){
@ -35,19 +41,23 @@ const CollapsibleParagraph = React.createClass({
render() { render() {
let styles = this.getCollapsibleClassSet(); let styles = this.getCollapsibleClassSet();
let text = this.isExpanded() ? '-' : '+'; let text = this.isExpanded() ? '[hide]' : '[show]';
return ( if(this.props.show) {
<div className="ascribe-detail-header"> return (
<div className="ascribe-edition-collapsible-wrapper"> <div className="ascribe-detail-header">
<div onClick={this.handleToggle}> <div className="ascribe-edition-collapsible-wrapper">
<span>{text} {this.props.title} </span> <div onClick={this.handleToggle}>
</div> <span>{this.props.title}</span><span className="pull-right">{text}</span>
<div ref='panel' className={classNames(styles) + ' ascribe-edition-collapible-content'}> </div>
{this.props.children} <div ref='panel' className={classNames(styles) + ' ascribe-edition-collapible-content'}>
{this.props.children}
</div>
</div> </div>
</div> </div>
</div> );
); } else {
return null;
}
} }
}); });

3
js/components/ascribe_forms/form.js
View File

@ -47,6 +47,9 @@ let Form = React.createClass({
}, },
getFormData(){ getFormData(){
if ('getFormData' in this.props){
return this.props.getFormData();
}
let data = {}; let data = {};
for (let ref in this.refs){ for (let ref in this.refs){
data[this.refs[ref].props.name] = this.refs[ref].state.value; data[this.refs[ref].props.name] = this.refs[ref].state.value;

61
js/components/ascribe_forms/form_piece_extradata.js
View File

@ -5,47 +5,58 @@ import React from 'react';
import requests from '../../utils/requests'; import requests from '../../utils/requests';
import apiUrls from '../../constants/api_urls'; import apiUrls from '../../constants/api_urls';
import FormMixin from '../../mixins/form_mixin';
import Form from './form';
import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable'; import InputTextAreaToggable from './input_textarea_toggable';
let PieceExtraDataForm = React.createClass({ let PieceExtraDataForm = React.createClass({
mixins: [FormMixin], propTypes: {
edition: React.PropTypes.object,
url() { handleSuccess: React.PropTypes.func,
return requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.editions[0].bitcoin_id}); name: React.PropTypes.string,
title: React.PropTypes.string,
editable: React.PropTypes.bool
}, },
getFormData(){
getFormData() {
let extradata = {}; let extradata = {};
extradata[this.props.name] = this.refs[this.props.name].state.value; extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value;
return { return {
bitcoin_id: this.getBitcoinIds().join(), bitcoin_id: this.props.edition.bitcoin_id,
extradata: extradata extradata: extradata
}; };
}, },
render() {
renderForm() { let defaultValue = this.props.edition.extra_data[this.props.name] || '';
let defaultValue = this.props.editions[0].extra_data[this.props.name] || '';
if (defaultValue.length === 0 && !this.props.editable){ if (defaultValue.length === 0 && !this.props.editable){
return null; return null;
} }
let url = requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.edition.bitcoin_id});
return ( return (
<form role="form" key={this.props.name}> <Form
<h5>{this.props.title}</h5> ref='form'
<InputTextAreaToggable url={url}
ref={this.props.name} handleSuccess={this.props.handleSuccess}
className="form-control" getFormData={this.getFormData}>
defaultValue={defaultValue} <Property
rows={3} name={this.props.name}
editable={this.props.editable} label={this.props.title}
required="" editable={this.props.editable}>
onSubmit={this.submit} <InputTextAreaToggable
/> rows={3}
</form> editable={this.props.editable}
defaultValue={defaultValue}
placeholder={'Fill in ' + this.props.title}
required/>
</Property>
<Property hidden={true} name='bitcoin_id'>
<input defaultValue={this.props.edition.bitcoin_id}/>
</Property>
<hr />
</Form>
); );
} }
}); });
export default PieceExtraDataForm; export default PieceExtraDataForm;

46
js/components/ascribe_forms/input_textarea_toggable.js
View File

@ -2,56 +2,29 @@
import React from 'react'; import React from 'react';
import AlertMixin from '../../mixins/alert_mixin';
import TextareaAutosize from 'react-textarea-autosize'; import TextareaAutosize from 'react-textarea-autosize';
import Button from 'react-bootstrap/lib/Button';
let InputTextAreaToggable = React.createClass({ let InputTextAreaToggable = React.createClass({
propTypes: { propTypes: {
editable: React.PropTypes.bool.isRequired, editable: React.PropTypes.bool.isRequired,
submitted: React.PropTypes.bool,
rows: React.PropTypes.number.isRequired, rows: React.PropTypes.number.isRequired,
onSubmit: React.PropTypes.func.isRequired,
required: React.PropTypes.string, required: React.PropTypes.string,
defaultValue: React.PropTypes.string defaultValue: React.PropTypes.string
}, },
mixins: [AlertMixin],
getInitialState() { getInitialState() {
return { return {
value: this.props.defaultValue, value: this.props.defaultValue
edited: false,
alerts: null // needed in AlertMixin
}; };
}, },
handleChange(event) { handleChange(event) {
this.setState({ this.setState({value: event.target.value});
value: event.target.value, this.props.onChange(event);
edited: true
});
},
reset(){
this.setState(this.getInitialState());
},
submit(){
this.props.onSubmit();
this.setState({edited: false});
}, },
render() { render() {
let className = 'form-control ascribe-textarea'; let className = 'form-control ascribe-textarea';
let buttons = null;
let textarea = null; let textarea = null;
if (this.props.editable && this.state.edited){
buttons = (
<div className="pull-right">
<Button className="ascribe-btn" onClick={this.submit}>Save</Button>
<Button className="ascribe-btn" onClick={this.reset}>Cancel</Button>
</div>
);
}
if (this.props.editable){ if (this.props.editable){
className = className + ' ascribe-textarea-editable'; className = className + ' ascribe-textarea-editable';
textarea = ( textarea = (
@ -61,21 +34,16 @@ let InputTextAreaToggable = React.createClass({
rows={this.props.rows} rows={this.props.rows}
required={this.props.required} required={this.props.required}
onChange={this.handleChange} onChange={this.handleChange}
placeholder='Write something...' /> onBlur={this.props.onBlur}
placeholder={this.props.placeholder} />
); );
} }
else{ else{
textarea = <pre className="ascribe-pre">{this.state.value}</pre>; textarea = <pre className="ascribe-pre">{this.state.value}</pre>;
} }
let alerts = (this.props.submitted) ? null : this.state.alerts; return textarea;
return (
<div className="form-group">
{alerts}
{textarea}
{buttons}
</div>
);
} }
}); });
export default InputTextAreaToggable; export default InputTextAreaToggable;

18
js/components/ascribe_forms/property.js
View File

@ -8,7 +8,9 @@ import Tooltip from 'react-bootstrap/lib/Tooltip';
let Property = React.createClass({ let Property = React.createClass({
propTypes: { propTypes: {
hidden: React.PropTypes.bool,
editable: React.PropTypes.bool, editable: React.PropTypes.bool,
tooltip: React.PropTypes.element,
label: React.PropTypes.string, label: React.PropTypes.string,
value: React.PropTypes.oneOfType([ value: React.PropTypes.oneOfType([
React.PropTypes.string, React.PropTypes.string,
@ -19,7 +21,8 @@ let Property = React.createClass({
getDefaultProps() { getDefaultProps() {
return { return {
editable: true editable: true,
hidden: false
}; };
}, },
@ -38,8 +41,16 @@ let Property = React.createClass({
}); });
}, },
reset(){ reset(){
// maybe do reset by reload instead of frontend state?
this.setState({value: this.state.initialValue}); this.setState({value: this.state.initialValue});
this.refs.input.getDOMNode().value = this.state.initialValue; if (this.refs.input.state){
// This is probably not the right way but easy fix
this.refs.input.state.value = this.state.initialValue;
}
else{
this.refs.input.getDOMNode().value = this.state.initialValue;
}
}, },
handleChange(event) { handleChange(event) {
@ -74,6 +85,9 @@ let Property = React.createClass({
this.setState({errors: null}); this.setState({errors: null});
}, },
getClassName() { getClassName() {
if(this.props.hidden){
return 'is-hidden';
}
if(!this.props.editable){ if(!this.props.editable){
return 'is-fixed'; return 'is-fixed';
} }

240
js/components/edition.js
View File

@ -2,19 +2,21 @@
import React from 'react'; import React from 'react';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Button from 'react-bootstrap/lib/Button';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import UserActions from '../actions/user_actions'; import UserActions from '../actions/user_actions';
import UserStore from '../stores/user_store'; import UserStore from '../stores/user_store';
import MediaPlayer from './ascribe_media/media_player'; import MediaPlayer from './ascribe_media/media_player';
import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin'; import CollapsibleParagraph from './ascribe_collapsible/collapsible_paragraph';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Button from 'react-bootstrap/lib/Button';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import PersonalNoteForm from './ascribe_forms/form_note_personal'; import Form from './ascribe_forms/form';
import EditionNoteForm from './ascribe_forms/form_note_edition'; import Property from './ascribe_forms/property';
import InputTextAreaToggable from './ascribe_forms/input_textarea_toggable';
import PieceExtraDataForm from './ascribe_forms/form_piece_extradata'; import PieceExtraDataForm from './ascribe_forms/form_piece_extradata';
import RequestActionForm from './ascribe_forms/form_request_action'; import RequestActionForm from './ascribe_forms/form_request_action';
@ -25,7 +27,8 @@ import AclButtonList from './ascribe_buttons/acl_button_list';
import GlobalNotificationModel from '../models/global_notification_model'; import GlobalNotificationModel from '../models/global_notification_model';
import GlobalNotificationActions from '../actions/global_notification_actions'; import GlobalNotificationActions from '../actions/global_notification_actions';
import classNames from 'classnames'; import requests from '../utils/requests';
import apiUrls from '../constants/api_urls';
/** /**
* This is the component that implements display-specific functionality * This is the component that implements display-specific functionality
@ -92,64 +95,72 @@ let Edition = React.createClass({
<EditionSummary <EditionSummary
edition={this.props.edition} /> edition={this.props.edition} />
<CollapsibleEditionDetails <CollapsibleParagraph
title="Personal Note (private)" title="Notes"
show={this.state.currentUser.username && true || false}> show={(this.state.currentUser.username && true || false) ||
(this.props.edition.acl.indexOf('edit') > -1 || this.props.edition.public_note)}>
<EditionPersonalNote <EditionPersonalNote
currentUser={this.state.currentUser} currentUser={this.state.currentUser}
handleSuccess={this.props.loadEdition} handleSuccess={this.props.loadEdition}
edition={this.props.edition}/> edition={this.props.edition}/>
</CollapsibleEditionDetails>
<CollapsibleEditionDetails
title="Edition Note (public)"
show={this.props.edition.acl.indexOf('edit') > -1 || this.props.edition.public_note}>
<EditionPublicEditionNote <EditionPublicEditionNote
handleSuccess={this.props.loadEdition} handleSuccess={this.props.loadEdition}
edition={this.props.edition}/> edition={this.props.edition}/>
</CollapsibleEditionDetails> </CollapsibleParagraph>
<CollapsibleEditionDetails <CollapsibleParagraph
title="Further Details (all editions)" title="Further Details (all editions)"
show={this.props.edition.acl.indexOf('edit') > -1 || Object.keys(this.props.edition.extra_data).length > 0}> show={this.props.edition.acl.indexOf('edit') > -1 || Object.keys(this.props.edition.extra_data).length > 0}>
<EditionFurtherDetails <EditionFurtherDetails
handleSuccess={this.props.loadEdition} handleSuccess={this.props.loadEdition}
edition={this.props.edition}/> edition={this.props.edition}/>
</CollapsibleEditionDetails> </CollapsibleParagraph>
<CollapsibleEditionDetails <CollapsibleParagraph
title="Provenance/Ownership History" title="Provenance/Ownership History"
show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}> show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}>
<EditionDetailHistoryIterator <EditionDetailHistoryIterator
history={this.props.edition.ownership_history} /> history={this.props.edition.ownership_history} />
</CollapsibleEditionDetails> </CollapsibleParagraph>
<CollapsibleEditionDetails <CollapsibleParagraph
title="Consignment History" title="Consignment History"
show={this.props.edition.consign_history && this.props.edition.consign_history.length > 0}> show={this.props.edition.consign_history && this.props.edition.consign_history.length > 0}>
<EditionDetailHistoryIterator <EditionDetailHistoryIterator
history={this.props.edition.consign_history} /> history={this.props.edition.consign_history} />
</CollapsibleEditionDetails> </CollapsibleParagraph>
<CollapsibleEditionDetails <CollapsibleParagraph
title="Loan History" title="Loan History"
show={this.props.edition.loan_history && this.props.edition.loan_history.length > 0}> show={this.props.edition.loan_history && this.props.edition.loan_history.length > 0}>
<EditionDetailHistoryIterator <EditionDetailHistoryIterator
history={this.props.edition.loan_history} /> history={this.props.edition.loan_history} />
</CollapsibleEditionDetails> </CollapsibleParagraph>
<CollapsibleEditionDetails <CollapsibleParagraph
title="SPOOL Details"> title="SPOOL Details">
<EditionDetailProperty <Form >
label="Artwork ID" <Property
value={bitcoinIdValue} /> name='artwork_id'
<EditionDetailProperty label="Artwork ID"
label="Hash of Artwork, title, etc" editable={false}>
value={hashOfArtwork} /> <pre className="ascribe-pre">{bitcoinIdValue}</pre>
<EditionDetailProperty </Property>
label="Owned by SPOOL address" <Property
value={ownerAddress} /> name='hash_of_artwork'
</CollapsibleEditionDetails> label="Hash of Artwork, title, etc"
editable={false}>
<pre className="ascribe-pre">{hashOfArtwork}</pre>
</Property>
<Property
name='owner_address'
label="Owned by SPOOL address"
editable={false}>
<pre className="ascribe-pre">{ownerAddress}</pre>
</Property>
<hr />
</Form>
</CollapsibleParagraph>
</Col> </Col>
</Row> </Row>
); );
@ -229,85 +240,6 @@ let EditionSummary = React.createClass({
} }
}); });
let CollapsibleEditionDetails = React.createClass({
propTypes: {
title: React.PropTypes.string,
children: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
]),
show: React.PropTypes.bool,
iconName: React.PropTypes.string
},
getDefaultProps() {
return {
show: true
};
},
render() {
if(this.props.show) {
return (
<div className="ascribe-detail-header">
<CollapsibleParagraph
title={this.props.title}
iconName={this.props.iconName}>
{this.props.children}
</CollapsibleParagraph>
</div>
);
} else {
return null;
}
}
});
const CollapsibleParagraph = React.createClass({
propTypes: {
title: React.PropTypes.string,
children: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
]),
iconName: React.PropTypes.string
},
mixins: [CollapsibleMixin],
getCollapsibleDOMNode(){
return React.findDOMNode(this.refs.panel);
},
getCollapsibleDimensionValue(){
return React.findDOMNode(this.refs.panel).scrollHeight;
},
onHandleToggle(e){
e.preventDefault();
this.setState({expanded: !this.state.expanded});
},
render() {
let styles = this.getCollapsibleClassSet();
let text = this.isExpanded() ? '-' : '+';
let icon = this.props.iconName ? (<Glyphicon style={{fontSize: '.75em'}} glyph={this.props.iconName} />) : null;
return (
<div className="ascribe-edition-collapsible-wrapper">
<div onClick={this.onHandleToggle}>
<span>{text} {icon} {this.props.title} </span>
</div>
<div ref='panel' className={classNames(styles) + ' ascribe-edition-collapible-content'}>
{this.props.children}
</div>
</div>
);
}
});
let EditionDetailProperty = React.createClass({ let EditionDetailProperty = React.createClass({
propTypes: { propTypes: {
@ -372,6 +304,7 @@ let EditionDetailHistoryIterator = React.createClass({
let EditionPersonalNote = React.createClass({ let EditionPersonalNote = React.createClass({
propTypes: { propTypes: {
edition: React.PropTypes.object, edition: React.PropTypes.object,
currentUser: React.PropTypes.object,
handleSuccess: React.PropTypes.func handleSuccess: React.PropTypes.func
}, },
showNotification(){ showNotification(){
@ -379,21 +312,35 @@ let EditionPersonalNote = React.createClass({
let notification = new GlobalNotificationModel('Private note saved', 'success'); let notification = new GlobalNotificationModel('Private note saved', 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
render() { render() {
return ( if (this.props.currentUser.username && true || false) {
<Row> return (
<Col md={12} className="ascribe-edition-personal-note"> <Form
<PersonalNoteForm url={apiUrls.note_notes}
editable={true} handleSuccess={this.showNotification}>
handleSuccess={this.showNotification} <Property
editions={[this.props.edition]} /> name='note'
</Col> label='Personal note (private)'
</Row> editable={true}>
); <InputTextAreaToggable
rows={3}
editable={true}
defaultValue={this.props.edition.note_from_user}
placeholder='Enter a personal note...'
required/>
</Property>
<Property hidden={true} name='bitcoin_id'>
<input defaultValue={this.props.edition.bitcoin_id}/>
</Property>
<hr />
</Form>
);
}
return null;
} }
}); });
let EditionPublicEditionNote = React.createClass({ let EditionPublicEditionNote = React.createClass({
propTypes: { propTypes: {
edition: React.PropTypes.object, edition: React.PropTypes.object,
@ -405,16 +352,31 @@ let EditionPublicEditionNote = React.createClass({
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
render() { render() {
return ( let isEditable = this.props.edition.acl.indexOf('edit') > -1;
<Row> if (this.props.edition.acl.indexOf('edit') > -1 || this.props.edition.public_note){
<Col md={12} className="ascribe-edition-personal-note"> return (
<EditionNoteForm <Form
editable={this.props.edition.acl.indexOf('edit') > -1} url={apiUrls.note_edition}
handleSuccess={this.showNotification} handleSuccess={this.showNotification}>
editions={[this.props.edition]} /> <Property
</Col> name='note'
</Row> label='Edition note (public)'
); editable={isEditable}>
<InputTextAreaToggable
rows={3}
editable={isEditable}
defaultValue={this.props.edition.public_note}
placeholder='Enter a public note for this edition...'
required/>
</Property>
<Property hidden={true} name='bitcoin_id'>
<input defaultValue={this.props.edition.bitcoin_id}/>
</Property>
<hr />
</Form>
);
}
return null;
} }
}); });
@ -440,19 +402,19 @@ let EditionFurtherDetails = React.createClass({
title='Artist Contact Info' title='Artist Contact Info'
handleSuccess={this.showNotification} handleSuccess={this.showNotification}
editable={editable} editable={editable}
editions={[this.props.edition]} /> edition={this.props.edition} />
<PieceExtraDataForm <PieceExtraDataForm
name='display_instructions' name='display_instructions'
title='Display Instructions' title='Display Instructions'
handleSuccess={this.showNotification} handleSuccess={this.showNotification}
editable={editable} editable={editable}
editions={[this.props.edition]} /> edition={this.props.edition} />
<PieceExtraDataForm <PieceExtraDataForm
name='technology_details' name='technology_details'
title='Technology Details' title='Technology Details'
handleSuccess={this.showNotification} handleSuccess={this.showNotification}
editable={editable} editable={editable}
editions={[this.props.edition]} /> edition={this.props.edition} />
</Col> </Col>
</Row> </Row>
); );

2
js/components/header.js
View File

@ -39,6 +39,7 @@ let Header = React.createClass({
handleLogout(){ handleLogout(){
UserActions.logoutCurrentUser(); UserActions.logoutCurrentUser();
Alt.flush(); Alt.flush();
this.transitionTo('login');
}, },
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
@ -71,7 +72,6 @@ let Header = React.createClass({
<Navbar brand={brand} toggleNavKey={0}> <Navbar brand={brand} toggleNavKey={0}>
<CollapsibleNav eventKey={0}> <CollapsibleNav eventKey={0}>
<Nav navbar />
<Nav navbar right> <Nav navbar right>
{account} {account}
{signup} {signup}

3
js/components/settings_container.js
View File

@ -97,7 +97,6 @@ let AccountSettings = React.createClass({
show={true} show={true}
defaultExpanded={true}> defaultExpanded={true}>
{content} {content}
</CollapsibleParagraph> </CollapsibleParagraph>
); );
} }
@ -215,7 +214,7 @@ let APISettings = React.createClass({
</div> </div>
<div className="col-xs-6 col-xs-height"> <div className="col-xs-6 col-xs-height">
<button <button
className="btn btn-default btn-sm" className="pull-right btn btn-default btn-sm"
onClick={this.handleTokenRefresh} onClick={this.handleTokenRefresh}
data-id={app.name}> data-id={app.name}>
REFRESH REFRESH

4
js/routes.js
View File

@ -30,8 +30,8 @@ let routes = (
<Route name="register_piece" path="register_piece" handler={RegisterPiece} /> <Route name="register_piece" path="register_piece" handler={RegisterPiece} />
<Route name="settings" path="settings" handler={SettingsContainer} /> <Route name="settings" path="settings" handler={SettingsContainer} />
<Redirect from={baseUrl} to="pieces" /> <Redirect from={baseUrl} to="login" />
<Redirect from={baseUrl + '/'} to="pieces" /> <Redirect from={baseUrl + '/'} to="login" />
</Route> </Route>
); );

24
sass/ascribe_edition.scss
View File

@ -1,6 +1,3 @@
.ascribe-edition-details hr {
border-top: 1px solid #616161;
}
.ascribe-edition-personal-note > textarea { .ascribe-edition-personal-note > textarea {
margin-bottom: 1em; margin-bottom: 1em;
@ -12,16 +9,23 @@
} }
.ascribe-edition-collapsible-wrapper > div:first-child { .ascribe-edition-collapsible-wrapper > div:first-child {
width:100%; width: 100%;
cursor:pointer; cursor: pointer;
} background-color: #EEE;
padding: 10px;
border: 1px solid #CCC;
}
.ascribe-edition-collapsible-wrapper > div > span { .ascribe-edition-collapsible-wrapper > div > span {
font-size:1.3em; font-size:1.3em;
margin-right: .5em; margin-right: .5em;
}
.ascribe-edition-collapsible-wrapper > div > span:nth-child(2) {
font-size: 0.9em;
} }
.ascribe-edition-collapible-content { .ascribe-edition-collapible-content {
width:100%; width:100%;
margin-top: 1em; margin-top: 1em;
} }

26
sass/ascribe_settings.scss
View File

@ -1,3 +1,4 @@
.ascribe-settings-wrapper { .ascribe-settings-wrapper {
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -10,11 +11,18 @@
&div:last-of-type { &div:last-of-type {
border-bottom: 1px solid rgba(0,0,0,.2); border-bottom: 1px solid rgba(0,0,0,.2);
} }
&:hover{
border-left: 3px solid rgba(2, 182, 163, 0.4);
}
}
.is-hidden{
display: none;
} }
.is-focused { .is-focused {
background-color: rgba(2, 182, 163, 0.05); background-color: rgba(2, 182, 163, 0.05);
border-left: 3px solid rgba(2, 182, 163, 1); border-left: 3px solid rgba(2, 182, 163, 1)!important;
} }
.is-error { .is-error {
@ -26,7 +34,7 @@
font-size: 0.9em; font-size: 0.9em;
margin-right: 1em; margin-right: 1em;
} }
input { input, textarea {
color: #666; color: #666;
} }
} }
@ -39,13 +47,15 @@
span { span {
cursor: default; cursor: default;
} }
input, div, pre { input, div, pre, textarea {
cursor: default; cursor: default;
color: #666; color: #666;
} }
} }
} }
.ascribe-settings-property { .ascribe-settings-property {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@ -57,7 +67,7 @@
cursor:pointer; cursor:pointer;
input, div, span, pre { input, div, span, pre, textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
span { span {
@ -78,7 +88,7 @@
} }
} }
input, pre { input, pre, textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 1.1em; font-size: 1.1em;
@ -91,6 +101,7 @@
&:focus { &:focus {
border:0; border:0;
outline:0; outline:0;
box-shadow: none;
} }
&::selection { &::selection {
@ -100,4 +111,9 @@
} }
textarea{
color: #666;
margin-top: 1em;
padding: 0;
}
} }

3
sass/ascribe_textarea.scss
View File

@ -10,11 +10,10 @@
.ascribe-pre{ .ascribe-pre{
word-break: break-word; word-break: break-word;
/* white-space: pre-wrap; */ white-space: pre-wrap;
white-space: -moz-pre-wrap; white-space: -moz-pre-wrap;
white-space: -pre-wrap; white-space: -pre-wrap;
white-space: -o-pre-wrap; white-space: -o-pre-wrap;
/* word-wrap: break-word; */
font-family: inherit; font-family: inherit;
text-align: justify; text-align: justify;
background-color: white; background-color: white;