mirror of
https://github.com/ascribe/onion.git
synced 2024-12-31 09:07:48 +01:00
Dimi and Tim styling action
This commit is contained in:
Tim Daubenschütz
parent
fabff2922c
commit
3a8efb3dd6
@ -14,6 +14,8 @@ import WalletSettingsStore from '../stores/wallet_settings_store';
|
||||
import GlobalNotificationModel from '../models/global_notification_model';
|
||||
import GlobalNotificationActions from '../actions/global_notification_actions';
|
||||
|
||||
import Input from 'react-bootstrap/lib/Input';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
let SettingsContainer = React.createClass({
|
||||
@ -123,6 +125,8 @@ const CollapsibleParagraph = React.createClass({
|
||||
});
|
||||
|
||||
let SettingsProperty = React.createClass({
|
||||
|
||||
|
||||
propTypes: {
|
||||
label: React.PropTypes.string,
|
||||
value: React.PropTypes.oneOfType([
|
||||
@ -142,28 +146,51 @@ let SettingsProperty = React.createClass({
|
||||
};
|
||||
},
|
||||
|
||||
//render() {
|
||||
// return (
|
||||
// <div className="row ascribe-detail-property">
|
||||
// <div className="row-same-height">
|
||||
// <div className={this.props.labelClassName + ' col-xs-height col-bottom'}>
|
||||
// <pre>{ this.props.label + this.props.separator}</pre>
|
||||
// </div>
|
||||
// <div className={this.props.valueClassName + ' col-xs-height col-bottom'}>
|
||||
// <pre>{ this.props.value }</pre>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
//}
|
||||
getInitialState() {
|
||||
return {
|
||||
value: '',
|
||||
isFocused: false
|
||||
};
|
||||
},
|
||||
|
||||
componentWillReceiveProps() {
|
||||
this.setState({
|
||||
value: this.props.value
|
||||
});
|
||||
},
|
||||
|
||||
handleChange(event) {
|
||||
this.setState({value: event.target.value});
|
||||
},
|
||||
|
||||
handleFocus() {
|
||||
console.log(this.state);
|
||||
this.refs.input.getDOMNode().focus();
|
||||
this.setState({
|
||||
isFocused: !this.state.isFocused
|
||||
});
|
||||
},
|
||||
|
||||
getClassName() {
|
||||
if(this.state.isFocused) {
|
||||
return 'is-focused';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="row ascribe-detail-property">
|
||||
<div className="row-same-height">
|
||||
<label>
|
||||
<span>{ this.props.label + this.props.separator}</span>
|
||||
<input type="text" disabled>{ this.props.value }</input>
|
||||
</label>
|
||||
<div
|
||||
className={'ascribe-settings-wrapper ' + this.getClassName()}
|
||||
onClick={this.handleFocus}>
|
||||
<div className="ascribe-settings-property">
|
||||
<span>{ this.props.label}</span>
|
||||
<input
|
||||
ref="input"
|
||||
type="text"
|
||||
value={this.state.value}
|
||||
onChange={this.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -180,8 +207,8 @@ let AccountSettings = React.createClass({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SettingsProperty label="Username" value={this.props.currentUser.username}/>
|
||||
<SettingsProperty label="Email" value={this.props.currentUser.email}/>
|
||||
<SettingsProperty key={1} label="Username" value={this.props.currentUser.username}/>
|
||||
<SettingsProperty key={2} label="Email" value={this.props.currentUser.email}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
1
node_modules/react-s3-fineuploader
generated
vendored
Submodule
1
node_modules/react-s3-fineuploader
generated
vendored
Submodule
@ -0,0 +1 @@
|
||||
Subproject commit 2161e28e1bf5f69719c8b376ecb24fd3334806ba
|
||||
@ -2,7 +2,7 @@ $ascribe-accordion-list-item-height: 8em;
|
||||
$ascribe-accordion-list-font: 'Source Sans Pro';
|
||||
|
||||
.ascribe-accordion-list-item {
|
||||
background-color: rgba(0,0,0,0.004);
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
height: $ascribe-accordion-list-item-height;
|
||||
|
||||
@ -11,11 +11,11 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
|
||||
|
||||
overflow:hidden;
|
||||
|
||||
border-left: 0.1em solid #E0E0E0;
|
||||
border-right: 0.1em solid #E0E0E0;
|
||||
border-top: 0.1em solid #E0E0E0;
|
||||
border-radius: 5px;
|
||||
border-bottom: 0.2em solid #E0E0E0;
|
||||
border-left: 0.1em solid rgba(0,0,0,.2);
|
||||
border-right: 0.1em solid rgba(0,0,0,.2);
|
||||
border-top: 0.1em solid rgba(0,0,0,.2);
|
||||
border-radius: 1px;
|
||||
border-bottom: 0.1em solid rgba(0,0,0,.2);
|
||||
.wrapper {
|
||||
width:100%;
|
||||
height:100%;
|
||||
@ -50,15 +50,16 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
|
||||
}
|
||||
|
||||
.ascribe-accordion-list-item-table {
|
||||
font-size: .9em;
|
||||
text-align: center;
|
||||
margin-bottom: 3em;
|
||||
background-color: rgba(0,0,0,0.004);
|
||||
background-color: white;
|
||||
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: 0.15em solid #E0E0E0;
|
||||
border-left: 0.1em solid #E0E0E0;
|
||||
border-right: 0.1em solid #E0E0E0;
|
||||
border-bottom-left-radius: 1px;
|
||||
border-bottom-right-radius: 1px;
|
||||
border-bottom: 0.1em solid rgba(0,0,0,.15);
|
||||
border-left: 0.1em solid rgba(0,0,0,.2);
|
||||
border-right: 0.1em solid rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
span.ascribe-accordion-list-table-toggle {
|
||||
|
||||
60
sass/ascribe_settings.scss
Normal file
60
sass/ascribe_settings.scss
Normal file
@ -0,0 +1,60 @@
|
||||
.ascribe-settings-wrapper {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-bottom: 1em;
|
||||
|
||||
background-color: white;
|
||||
|
||||
border-left: 3px solid rgba(0,0,0,0);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid rgba(0,0,0,.2);
|
||||
}
|
||||
}
|
||||
|
||||
.is-focused {
|
||||
background-color: rgba(2, 182, 163, 0.1);
|
||||
border-left: 3px solid rgba(2, 182, 163, 1);
|
||||
}
|
||||
|
||||
.ascribe-settings-property {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-top: 1px solid rgba(0,0,0,.2);
|
||||
|
||||
padding-top: 1em;
|
||||
padding-left: 1.5em;
|
||||
|
||||
cursor:pointer;
|
||||
|
||||
span {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
color: rgba(0,0,0,.7);
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 1.1em;
|
||||
width:100%;
|
||||
margin-top: .7em;
|
||||
border: 0;
|
||||
background-color: rgba(0,0,0,0);
|
||||
color: #38BAAD;
|
||||
|
||||
&:focus {
|
||||
border:0;
|
||||
outline:0;
|
||||
}
|
||||
|
||||
&::selection {
|
||||
color: white;
|
||||
background-color: rgba(0,0,0,1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -18,6 +18,12 @@ $BASE_URL: '<%= BASE_URL %>';
|
||||
@import 'ascribe_media_player';
|
||||
@import 'ascribe-global-notification';
|
||||
@import 'offset_right';
|
||||
@import 'ascribe_settings';
|
||||
|
||||
body {
|
||||
background-color: #FDFDFD;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
|
||||
@ -365,7 +365,7 @@ $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2
|
||||
$navbar-collapse-max-height: 340px !default;
|
||||
|
||||
$navbar-default-color: #777 !default;
|
||||
$navbar-default-bg: white !default;
|
||||
$navbar-default-bg: #FDFDFD !default;
|
||||
$navbar-default-border: #616161;
|
||||
|
||||
// Navbar links
|
||||
|
||||
Loading…
Reference in New Issue
Block a user