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

Merge pull request #816 from mlorb/ml-sci-1636

Browse source 
Fixes style errors on one team page [SCI-1636]
This commit is contained in:
mlorb 2017-10-10 16:23:50 +02:00 committed by GitHub
commit 7ca29b50a2
9 changed files with 179 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/src/components/ModalsContainer/modals/LeaveTeamModal.jsx
View file

@ -77,12 +77,12 @@ class LeaveTeamModal extends Component {
</Alert>
</Modal.Body>
<Modal.Footer>
<Button bsStyle="primary" onClick={this.leaveTeam}>
<FormattedMessage id="settings_page.leave_team_modal.leave_team" />
</Button>
<Button onClick={this.onCloseModal}>
<FormattedMessage id="general.close" />
</Button>
<Button bsStyle="success" onClick={this.leaveTeam}>
<FormattedMessage id="settings_page.leave_team_modal.leave_team" />
</Button>
</Modal.Footer>
</Modal>
);

16
app/javascript/src/components/data_table/index.jsx
View file

@ -2,6 +2,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import styled from "styled-components";
import { FormattedMessage } from "react-intl";
import {
WHITE_COLOR,
COLOR_GRAY,
@ -56,6 +57,21 @@ const StyledBootstrapTable = styled(BootstrapTable)`
`;
class DataTable extends Component {
static renderShowsTotal(start, to, total) {
return (
<span>
<FormattedMessage
id="settings_page.shows_total_entries"
values={{
start,
to,
total
}}
/>
</span>
);
}
static cleanColumnAttributes(col) {
// Remove additional attributes from the columns
const {

6
app/javascript/src/scenes/SettingsPage/scenes/team/components/RemoveUserModal.jsx
View file

@ -72,12 +72,12 @@ class RemoveUserModal extends Component {
</Alert>
</Modal.Body>
<Modal.Footer>
<Button bsStyle="primary" onClick={this.removeUser}>
<FormattedMessage id="settings_page.remove_user_modal.remove_user" />
</Button>
<Button onClick={this.onCloseModal}>
<FormattedMessage id="general.close" />
</Button>
<Button bsStyle="success" onClick={this.removeUser}>
<FormattedMessage id="settings_page.remove_user_modal.remove_user" />
</Button>
</Modal.Footer>
</Modal>
);

51
app/javascript/src/scenes/SettingsPage/scenes/team/components/TeamsMembers.jsx
View file

@ -1,12 +1,14 @@
import React, { Component } from "react";
import PropTypes, { number, func, string, bool } from "prop-types";
import {
Row,
Panel,
Button,
Glyphicon,
DropdownButton,
MenuItem
} from "react-bootstrap";
import styled from "styled-components";
import { FormattedMessage } from "react-intl";
import axios from "../../../../../config/axios";
@ -15,6 +17,11 @@ import RemoveUserModal from "./RemoveUserModal";
import DataTable from "../../../../../components/data_table";
import { UPDATE_USER_TEAM_ROLE_PATH } from "../../../../../config/api_endpoints";
const StyledButton = styled(Button)`
margin-bottom: 10px;
margin-right: 15px;
`;
const initalUserToRemove = {
userName: "",
team_user_id: 0,
@ -132,6 +139,14 @@ class TeamsMembers extends Component {
}
render() {
const options = {
sizePerPageList: [10, 25, 50, 100],
prePage: "Prev", // Previous page button text
nextPage: "Next", // Next page button textu
paginationShowsTotal: DataTable.renderShowsTotal,
alwaysShowAllBtns: true
};
const columns = [
{
id: 1,
@ -139,7 +154,8 @@ class TeamsMembers extends Component {
isKey: false,
textId: "name",
position: 0,
dataSort: true
dataSort: true,
width: "25%"
},
{
id: 2,
@ -147,7 +163,8 @@ class TeamsMembers extends Component {
isKey: true,
textId: "email",
position: 1,
dataSort: true
dataSort: true,
width: "30%"
},
{
id: 3,
@ -162,14 +179,16 @@ class TeamsMembers extends Component {
name: "Joined on",
isKey: false,
textId: "created_at",
position: 3
position: 3,
dataSort: true
},
{
id: 5,
name: "Status",
isKey: false,
textId: "status",
position: 3
position: 3,
dataSort: true
},
{
id: 6,
@ -178,7 +197,8 @@ class TeamsMembers extends Component {
textId: "actions",
columnClassName: "react-bootstrap-table-dropdown-fix",
dataFormat: this.memberAction,
position: 3
position: 3,
width: "80px"
}
];
@ -188,12 +208,23 @@ class TeamsMembers extends Component {
<FormattedMessage id="settings_page.single_team.members_panel_title" />
}
>
<Button bsStyle="primary" onClick={this.showInviteUsersModalCallback}>
<Glyphicon glyph="plus" />
<FormattedMessage id="settings_page.single_team.add_members" />
</Button>
<Row>
<StyledButton
bsStyle="primary"
className="pull-right"
onClick={this.showInviteUsersModalCallback}
>
<Glyphicon glyph="plus" />
<FormattedMessage id="settings_page.single_team.add_members" />
</StyledButton>
</Row>
<DataTable data={this.props.members} columns={columns} />
<DataTable
data={this.props.members}
columns={columns}
pagination
options={options}
/>
<RemoveUserModal
showModal={this.state.showModal}
hideModal={this.hideModal}

16
app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamDescriptionModal.jsx
View file

@ -17,9 +17,7 @@ import { TEXT_MAX_LENGTH } from "../../../../../config/constants/numeric";
import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
const StyledHelpBlock = styled(HelpBlock)`
color: ${COLOR_APPLE_BLOSSOM}
`;
const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;
class UpdateTeamDescriptionModal extends Component {
constructor(props) {
@ -95,22 +93,20 @@ class UpdateTeamDescriptionModal extends Component {
onChange={this.handleDescription}
/>
<FormControl.Feedback />
<StyledHelpBlock>
{this.state.errorMessage}
</StyledHelpBlock>
<StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
</FormGroup>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.onCloseModal}>
<FormattedMessage id="general.close" />
</Button>
<Button
bsStyle="success"
bsStyle="primary"
onClick={this.updateDescription}
disabled={!_.isEmpty(this.state.errorMessage)}
>
<FormattedMessage id="general.update" />
</Button>
<Button onClick={this.onCloseModal}>
<FormattedMessage id="general.close" />
</Button>
</Modal.Footer>
</Modal>
);

16
app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamNameModal.jsx
View file

@ -17,9 +17,7 @@ import { NAME_MAX_LENGTH } from "../../../../../config/constants/numeric";
import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
const StyledHelpBlock = styled(HelpBlock)`
color: ${COLOR_APPLE_BLOSSOM}
`;
const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;
class UpdateTeamNameModal extends Component {
constructor(props) {
@ -95,22 +93,20 @@ class UpdateTeamNameModal extends Component {
value={this.state.name}
/>
<FormControl.Feedback />
<StyledHelpBlock>
{this.state.errorMessage}
</StyledHelpBlock>
<StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
</FormGroup>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.onCloseModal}>
<FormattedMessage id="general.close" />
</Button>
<Button
bsStyle="success"
bsStyle="primary"
onClick={this.updateName}
disabled={!_.isEmpty(this.state.errorMessage)}
>
<FormattedMessage id="general.update" />
</Button>
<Button onClick={this.onCloseModal}>
<FormattedMessage id="general.close" />
</Button>
</Modal.Footer>
</Modal>
);

19
app/javascript/src/scenes/SettingsPage/scenes/teams/components/TeamsDataTable.jsx
View file

@ -9,21 +9,6 @@ import DataTable from "../../../../../components/data_table";
import { SETTINGS_TEAMS_ROUTE } from "../../../../../config/routes";
class TeamsDataTable extends Component {
static renderShowsTotal(start, to, total) {
return (
<span>
<FormattedMessage
id="settings_page.shows_total_entries"
values={{
start,
to,
total
}}
/>
</span>
);
}
constructor(props) {
super(props);
@ -62,7 +47,7 @@ class TeamsDataTable extends Component {
sizePerPageList: [10, 25, 50, 100],
prePage: "Prev", // Previous page button text
nextPage: "Next", // Next page button textu
paginationShowsTotal: TeamsDataTable.renderShowsTotal,
paginationShowsTotal: DataTable.renderShowsTotal,
alwaysShowAllBtns: true
};
const columns = [
@ -108,7 +93,7 @@ class TeamsDataTable extends Component {
<DataTable
data={this.props.teams}
columns={columns}
pagination={true}
pagination
options={options}
/>
);

119
app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
View file

@ -1,5 +1,13 @@
import React, { Component } from "react";
import { Breadcrumb, FormGroup, FormControl, ControlLabel, HelpBlock, Button } from "react-bootstrap";
import {
Breadcrumb,
FormGroup,
FormControl,
ControlLabel,
HelpBlock,
Button,
ButtonToolbar
} from "react-bootstrap";
import { Redirect } from "react-router";
import { LinkContainer } from "react-router-bootstrap";
import { FormattedMessage } from "react-intl";
@ -31,9 +39,7 @@ const Wrapper = styled.div`
padding: 16px 15px 50px 15px;
`;
const MyFormGroupDiv = styled.div`
margin-bottom: 15px;
`;
const MyFormGroupDiv = styled.div`margin-bottom: 15px;`;
class SettingsNewTeam extends Component {
constructor(props) {
@ -41,7 +47,7 @@ class SettingsNewTeam extends Component {
this.state = {
team: {
name: "",
description: "",
description: ""
},
formErrors: {
name: "",
@ -54,7 +60,9 @@ class SettingsNewTeam extends Component {
this.validateField = this.validateField.bind(this);
this.handleChange = this.handleChange.bind(this);
this.renderTeamNameFormGroup = this.renderTeamNameFormGroup.bind(this);
this.renderTeamDescriptionFormGroup = this.renderTeamDescriptionFormGroup.bind(this);
this.renderTeamDescriptionFormGroup = this.renderTeamDescriptionFormGroup.bind(
this
);
}
onSubmit(e) {
@ -69,24 +77,23 @@ class SettingsNewTeam extends Component {
.then(sr => {
// Redirect to the new team page
this.newState = { ...this.state };
this.newState = update(
this.newState,
{ redirectTo: {
$set: SETTINGS_TEAM_ROUTE.replace(':id', sr.data.details.id)
}
this.newState = update(this.newState, {
redirectTo: {
$set: SETTINGS_TEAM_ROUTE.replace(":id", sr.data.details.id)
}
);
});
this.setState(this.newState);
})
.catch(er => {
// Display errors
this.newState = { ...this.state };
['name', 'description'].forEach((el) => {
["name", "description"].forEach(el => {
if (er.response.data.details[el]) {
this.newState = update(
this.newState,
{ formErrors: { name: { $set: <span>{er.response.data.details[el]}</span> } } }
);
this.newState = update(this.newState, {
formErrors: {
name: { $set: <span>{er.response.data.details[el]}</span> }
}
});
}
});
this.setState(this.newState);
@ -99,26 +106,39 @@ class SettingsNewTeam extends Component {
errorMessage = "";
if (value.length < NAME_MIN_LENGTH) {
errorMessage = <FormattedMessage id="error_messages.text_too_short" values={{ min_length: NAME_MIN_LENGTH }} />;
errorMessage = (
<FormattedMessage
id="error_messages.text_too_short"
values={{ min_length: NAME_MIN_LENGTH }}
/>
);
} else if (value.length > NAME_MAX_LENGTH) {
errorMessage = <FormattedMessage id="error_messages.text_too_long" values={{ max_length: NAME_MAX_LENGTH }} />;
errorMessage = (
<FormattedMessage
id="error_messages.text_too_long"
values={{ max_length: NAME_MAX_LENGTH }}
/>
);
}
this.newState = update(
this.newState,
{ formErrors: { name: { $set: errorMessage } } }
);
this.newState = update(this.newState, {
formErrors: { name: { $set: errorMessage } }
});
} else if (key === "description") {
errorMessage = "";
if (value.length > TEXT_MAX_LENGTH) {
errorMessage = <FormattedMessage id="error_messages.text_too_long" values={{ max_length: TEXT_MAX_LENGTH }} />;
errorMessage = (
<FormattedMessage
id="error_messages.text_too_long"
values={{ max_length: TEXT_MAX_LENGTH }}
/>
);
}
this.newState = update(
this.newState,
{ formErrors: { description: { $set: errorMessage } } }
);
this.newState = update(this.newState, {
formErrors: { description: { $set: errorMessage } }
});
}
}
@ -129,10 +149,7 @@ class SettingsNewTeam extends Component {
this.newState = { ...this.state };
// Update value in the state
this.newState = update(
this.newState,
{ team: { [key]: { $set: value } } }
);
this.newState = update(this.newState, { team: { [key]: { $set: value } } });
// Validate the input
this.validateField(key, value);
@ -142,7 +159,9 @@ class SettingsNewTeam extends Component {
}
renderTeamNameFormGroup() {
const formGroupClass = this.state.formErrors.name ? "form-group has-error" : "form-group";
const formGroupClass = this.state.formErrors.name
? "form-group has-error"
: "form-group";
const validationState = this.state.formErrors.name ? "error" : null;
return (
<FormGroup
@ -165,7 +184,9 @@ class SettingsNewTeam extends Component {
}
renderTeamDescriptionFormGroup() {
const formGroupClass = this.state.formErrors.description ? "form-group has-error" : "form-group";
const formGroupClass = this.state.formErrors.description
? "form-group has-error"
: "form-group";
const validationState = this.state.formErrors.description ? "error" : null;
return (
<FormGroup
@ -194,8 +215,9 @@ class SettingsNewTeam extends Component {
return <Redirect to={this.state.redirectTo} />;
}
const btnDisabled = !_.isEmpty(this.state.formErrors.name) ||
!_.isEmpty(this.state.formErrors.description);
const btnDisabled =
!_.isEmpty(this.state.formErrors.name) ||
!_.isEmpty(this.state.formErrors.description);
return (
<Wrapper>
@ -211,7 +233,6 @@ class SettingsNewTeam extends Component {
</Breadcrumb>
<form onSubmit={this.onSubmit} style={{ maxWidth: "500px" }}>
<MyFormGroupDiv>
{this.renderTeamNameFormGroup()}
<small>
@ -225,20 +246,24 @@ class SettingsNewTeam extends Component {
<FormattedMessage id="settings_page.new_team.description_sublabel" />
</small>
</MyFormGroupDiv>
<LinkContainer to={SETTINGS_TEAMS_ROUTE}>
<Button>
<FormattedMessage id="general.cancel" />
<ButtonToolbar>
<Button
type="submit"
className="btn-primary"
disabled={btnDisabled}
>
<FormattedMessage id="settings_page.new_team.create" />
</Button>
</LinkContainer>
<Button type="submit" className="btn-primary" disabled={btnDisabled}>
<FormattedMessage id="settings_page.new_team.create" />
</Button>
<LinkContainer to={SETTINGS_TEAMS_ROUTE}>
<Button>
<FormattedMessage id="general.cancel" />
</Button>
</LinkContainer>
</ButtonToolbar>
</form>
</Wrapper>
);
}
}
export default SettingsNewTeam;
export default SettingsNewTeam;

36
app/javascript/src/styles/main.scss
View file

@ -18,19 +18,43 @@ body {
.btn-primary {
background-color: $color-theme-secondary;
border-color: $primary-hover-color;
margin-right: 7px;
border-color: darken($color-theme-secondary, 5%);
&.active,
&.focus,
&.active.focus {
background-color: darken($color-theme-secondary, 20%);
border-color: darken($color-theme-secondary, 25%);
&:hover {
background-color: darken($color-theme-secondary, 25%);
border-color: darken($color-theme-secondary, 30%);
}
}
&:active,
&:focus,
&:active:focus,
&:active:hover,
&:focus:hover,
&:active:focus:hover {
background-color: darken($color-theme-secondary, 20%);
border-color: darken($color-theme-secondary, 25%);
}
&:hover {
background-color: $primary-hover-color;
background-color: darken($color-theme-secondary, 5%);
border-color: darken($color-theme-secondary, 10%);
}
}
// // fixes issue with dropdown in datatable
.react-bootstrap-table-dropdown-fix {
overflow: inherit !important;
& .open > .dropdown-menu {
position: relative !important;
}
}
.react-bs-container-body {
overflow: inherit !important;
}
// tags input