scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-01-01 21:21:50 +08:00
Code Issues Projects Releases Packages Wiki Activity

some additional styles

Browse source
This commit is contained in:
Toni Dezman 2017-08-18 10:24:51 +02:00
parent dc746cbf6f
commit b29df328d9
5 changed files with 52 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/javascript/packs/app/constants/colors.js
View file

@ -11,3 +11,4 @@ export const PRIMARY_GREEN_COLOR = "#8fd13f";
export const PRIMARY_HOVER_COLOR = "#75b22b";
export const NOTIFICATION_YES = "#5a8921";
export const NOTIFICATION_YES_BORDER = "#4d751c";
export const SIDEBAR_HOVER_GRAY_COLOR = "#D2D2D2";

2
app/javascript/packs/src/settings/components/InputDisabled.jsx
View file

@ -6,7 +6,7 @@ import styled from "styled-components";
const Wrapper = styled.div`margin-top: 19px;`;
const MyFormControl = styled(FormControl)`
width: 150px;
width: 160px;
display: inline;
`;

2
app/javascript/packs/src/settings/components/InputEnabled.jsx
View file

@ -130,10 +130,10 @@ class InputEnabled extends Component {
<StyledInputEnabled>
<form onSubmit={this.handleSubmit}>
<FormGroup>
{this.confirmationField()}
<h4>
Change {this.props.labelValue.toLowerCase()}
</h4>
{this.confirmationField()}
<ControlLabel>
{this.props.labelValue}
</ControlLabel>

34
app/javascript/packs/src/settings/components/NotificationsGroup.jsx
View file

@ -5,6 +5,8 @@ import styled from "styled-components";
import NotificationsSwitchGroup from "./NotificationsSwitchGroup";
import { WHITE_COLOR } from "../../../app/constants/colors";
const Wrapper = styled.div`margin-bottom: 6px;`;
const IconWrapper = styled.div`
margin-top: 12px;
margin-left: 7px;
@ -57,24 +59,22 @@ class NotificationsGroup extends Component {
}
return (
<div>
<div className="row">
<IconWrapper className="col-sm-1">
{imgOrIcon}
</IconWrapper>
<div className="col-sm-10">
<h5>
<strong>
{this.props.title}
</strong>
</h5>
<p>
{this.props.subtitle}
</p>
<NotificationsSwitchGroup type={this.props.type} />
</div>
<Wrapper className="row">
<IconWrapper className="col-sm-1">
{imgOrIcon}
</IconWrapper>
<div className="col-sm-10">
<h5>
<strong>
{this.props.title}
</strong>
</h5>
<p>
{this.props.subtitle}
</p>
<NotificationsSwitchGroup type={this.props.type} />
</div>
</div>
</Wrapper>
);
}
}

54
app/javascript/packs/src/settings/components/SettingsLeftTab.jsx
View file

@ -9,38 +9,48 @@ import {
} from "../../../app/routes";
import {
MAIN_COLOR_BLUE,
SIDEBAR_HOVER_GRAY_COLOR,
LIGHT_BLUE_COLOR
} from "../../../app/constants/colors";
const MyLinkContainer = styled(LinkContainer)`
a {
color: ${LIGHT_BLUE_COLOR};
padding-left: 0;
}
&.active > a:after {
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -19px;
border-top: 19px solid transparent;
border-left: 13px solid ${LIGHT_BLUE_COLOR};
border-bottom: 19px solid transparent;
}
a:hover {
background-color: ${SIDEBAR_HOVER_GRAY_COLOR} !important;
}
&.active {
a {
background-color: ${LIGHT_BLUE_COLOR} !important;
border-radius: 3px 0 0 3px;
border-left: 13px solid ${LIGHT_BLUE_COLOR};
border-radius: 3px 0 0 3px;
}
}
`;
class SettingsAccountLeftTab extends Component {
constructor(props) {
super(props);
this.handleSelect = this.handleSelect.bind(this);
}
handleSelect(selectedKey) {}
render() {
return (
<Nav bsStyle="pills" stacked activeKey={1} onSelect={this.handleSelect}>
<MyLinkContainer to={SETTINGS_ACCOUNT_PROFILE}>
<NavItem eventKey={1}>Profile</NavItem>
</MyLinkContainer>
<MyLinkContainer to={SETTINGS_ACCOUNT_PREFERENCES}>
<NavItem eventKey={2}>Preferences</NavItem>
</MyLinkContainer>
</Nav>
);
}
}
const SettingsAccountLeftTab = () =>
<Nav bsStyle="pills" stacked activeKey={1}>
<MyLinkContainer to={SETTINGS_ACCOUNT_PROFILE}>
<NavItem eventKey={1}>Profile</NavItem>
</MyLinkContainer>
<MyLinkContainer to={SETTINGS_ACCOUNT_PREFERENCES}>
<NavItem eventKey={2}>Preferences</NavItem>
</MyLinkContainer>
</Nav>;
export default SettingsAccountLeftTab;