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> </Alert>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button bsStyle="primary" onClick={this.leaveTeam}>
<FormattedMessage id="settings_page.leave_team_modal.leave_team" />
</Button>
<Button onClick={this.onCloseModal}> <Button onClick={this.onCloseModal}>
<FormattedMessage id="general.close" /> <FormattedMessage id="general.close" />
</Button> </Button>
<Button bsStyle="success" onClick={this.leaveTeam}>
<FormattedMessage id="settings_page.leave_team_modal.leave_team" />
</Button>
</Modal.Footer> </Modal.Footer>
</Modal> </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 PropTypes from "prop-types";
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table"; import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import styled from "styled-components"; import styled from "styled-components";
import { FormattedMessage } from "react-intl";
import { import {
WHITE_COLOR, WHITE_COLOR,
COLOR_GRAY, COLOR_GRAY,
@ -56,6 +57,21 @@ const StyledBootstrapTable = styled(BootstrapTable)`
`; `;
class DataTable extends Component { 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) { static cleanColumnAttributes(col) {
// Remove additional attributes from the columns // Remove additional attributes from the columns
const { const {

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

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

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

@ -1,12 +1,14 @@
import React, { Component } from "react"; import React, { Component } from "react";
import PropTypes, { number, func, string, bool } from "prop-types"; import PropTypes, { number, func, string, bool } from "prop-types";
import { import {
Row,
Panel, Panel,
Button, Button,
Glyphicon, Glyphicon,
DropdownButton, DropdownButton,
MenuItem MenuItem
} from "react-bootstrap"; } from "react-bootstrap";
import styled from "styled-components";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import axios from "../../../../../config/axios"; import axios from "../../../../../config/axios";
@ -15,6 +17,11 @@ import RemoveUserModal from "./RemoveUserModal";
import DataTable from "../../../../../components/data_table"; import DataTable from "../../../../../components/data_table";
import { UPDATE_USER_TEAM_ROLE_PATH } from "../../../../../config/api_endpoints"; import { UPDATE_USER_TEAM_ROLE_PATH } from "../../../../../config/api_endpoints";
const StyledButton = styled(Button)`
margin-bottom: 10px;
margin-right: 15px;
`;
const initalUserToRemove = { const initalUserToRemove = {
userName: "", userName: "",
team_user_id: 0, team_user_id: 0,
@ -132,6 +139,14 @@ class TeamsMembers extends Component {
} }
render() { 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 = [ const columns = [
{ {
id: 1, id: 1,
@ -139,7 +154,8 @@ class TeamsMembers extends Component {
isKey: false, isKey: false,
textId: "name", textId: "name",
position: 0, position: 0,
dataSort: true dataSort: true,
width: "25%"
}, },
{ {
id: 2, id: 2,
@ -147,7 +163,8 @@ class TeamsMembers extends Component {
isKey: true, isKey: true,
textId: "email", textId: "email",
position: 1, position: 1,
dataSort: true dataSort: true,
width: "30%"
}, },
{ {
id: 3, id: 3,
@ -162,14 +179,16 @@ class TeamsMembers extends Component {
name: "Joined on", name: "Joined on",
isKey: false, isKey: false,
textId: "created_at", textId: "created_at",
position: 3 position: 3,
dataSort: true
}, },
{ {
id: 5, id: 5,
name: "Status", name: "Status",
isKey: false, isKey: false,
textId: "status", textId: "status",
position: 3 position: 3,
dataSort: true
}, },
{ {
id: 6, id: 6,
@ -178,7 +197,8 @@ class TeamsMembers extends Component {
textId: "actions", textId: "actions",
columnClassName: "react-bootstrap-table-dropdown-fix", columnClassName: "react-bootstrap-table-dropdown-fix",
dataFormat: this.memberAction, 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" /> <FormattedMessage id="settings_page.single_team.members_panel_title" />
} }
> >
<Button bsStyle="primary" onClick={this.showInviteUsersModalCallback}> <Row>
<Glyphicon glyph="plus" /> <StyledButton
<FormattedMessage id="settings_page.single_team.add_members" /> bsStyle="primary"
</Button> 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 <RemoveUserModal
showModal={this.state.showModal} showModal={this.state.showModal}
hideModal={this.hideModal} 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 { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors"; import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
const StyledHelpBlock = styled(HelpBlock)` const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;
color: ${COLOR_APPLE_BLOSSOM}
`;
class UpdateTeamDescriptionModal extends Component { class UpdateTeamDescriptionModal extends Component {
constructor(props) { constructor(props) {
@ -95,22 +93,20 @@ class UpdateTeamDescriptionModal extends Component {
onChange={this.handleDescription} onChange={this.handleDescription}
/> />
<FormControl.Feedback /> <FormControl.Feedback />
<StyledHelpBlock> <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
{this.state.errorMessage}
</StyledHelpBlock>
</FormGroup> </FormGroup>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button onClick={this.onCloseModal}>
<FormattedMessage id="general.close" />
</Button>
<Button <Button
bsStyle="success" bsStyle="primary"
onClick={this.updateDescription} onClick={this.updateDescription}
disabled={!_.isEmpty(this.state.errorMessage)} disabled={!_.isEmpty(this.state.errorMessage)}
> >
<FormattedMessage id="general.update" /> <FormattedMessage id="general.update" />
</Button> </Button>
<Button onClick={this.onCloseModal}>
<FormattedMessage id="general.close" />
</Button>
</Modal.Footer> </Modal.Footer>
</Modal> </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 { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors"; import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
const StyledHelpBlock = styled(HelpBlock)` const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;
color: ${COLOR_APPLE_BLOSSOM}
`;
class UpdateTeamNameModal extends Component { class UpdateTeamNameModal extends Component {
constructor(props) { constructor(props) {
@ -95,22 +93,20 @@ class UpdateTeamNameModal extends Component {
value={this.state.name} value={this.state.name}
/> />
<FormControl.Feedback /> <FormControl.Feedback />
<StyledHelpBlock> <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
{this.state.errorMessage}
</StyledHelpBlock>
</FormGroup> </FormGroup>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button onClick={this.onCloseModal}>
<FormattedMessage id="general.close" />
</Button>
<Button <Button
bsStyle="success" bsStyle="primary"
onClick={this.updateName} onClick={this.updateName}
disabled={!_.isEmpty(this.state.errorMessage)} disabled={!_.isEmpty(this.state.errorMessage)}
> >
<FormattedMessage id="general.update" /> <FormattedMessage id="general.update" />
</Button> </Button>
<Button onClick={this.onCloseModal}>
<FormattedMessage id="general.close" />
</Button>
</Modal.Footer> </Modal.Footer>
</Modal> </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"; import { SETTINGS_TEAMS_ROUTE } from "../../../../../config/routes";
class TeamsDataTable extends Component { 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) { constructor(props) {
super(props); super(props);
@ -62,7 +47,7 @@ class TeamsDataTable extends Component {
sizePerPageList: [10, 25, 50, 100], sizePerPageList: [10, 25, 50, 100],
prePage: "Prev", // Previous page button text prePage: "Prev", // Previous page button text
nextPage: "Next", // Next page button textu nextPage: "Next", // Next page button textu
paginationShowsTotal: TeamsDataTable.renderShowsTotal, paginationShowsTotal: DataTable.renderShowsTotal,
alwaysShowAllBtns: true alwaysShowAllBtns: true
}; };
const columns = [ const columns = [
@ -108,7 +93,7 @@ class TeamsDataTable extends Component {
<DataTable <DataTable
data={this.props.teams} data={this.props.teams}
columns={columns} columns={columns}
pagination={true} pagination
options={options} 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 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 { Redirect } from "react-router";
import { LinkContainer } from "react-router-bootstrap"; import { LinkContainer } from "react-router-bootstrap";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -31,9 +39,7 @@ const Wrapper = styled.div`
padding: 16px 15px 50px 15px; padding: 16px 15px 50px 15px;
`; `;
const MyFormGroupDiv = styled.div` const MyFormGroupDiv = styled.div`margin-bottom: 15px;`;
margin-bottom: 15px;
`;
class SettingsNewTeam extends Component { class SettingsNewTeam extends Component {
constructor(props) { constructor(props) {
@ -41,7 +47,7 @@ class SettingsNewTeam extends Component {
this.state = { this.state = {
team: { team: {
name: "", name: "",
description: "", description: ""
}, },
formErrors: { formErrors: {
name: "", name: "",
@ -54,7 +60,9 @@ class SettingsNewTeam extends Component {
this.validateField = this.validateField.bind(this); this.validateField = this.validateField.bind(this);
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
this.renderTeamNameFormGroup = this.renderTeamNameFormGroup.bind(this); this.renderTeamNameFormGroup = this.renderTeamNameFormGroup.bind(this);
this.renderTeamDescriptionFormGroup = this.renderTeamDescriptionFormGroup.bind(this); this.renderTeamDescriptionFormGroup = this.renderTeamDescriptionFormGroup.bind(
this
);
} }
onSubmit(e) { onSubmit(e) {
@ -69,24 +77,23 @@ class SettingsNewTeam extends Component {
.then(sr => { .then(sr => {
// Redirect to the new team page // Redirect to the new team page
this.newState = { ...this.state }; this.newState = { ...this.state };
this.newState = update( this.newState = update(this.newState, {
this.newState, redirectTo: {
{ redirectTo: { $set: SETTINGS_TEAM_ROUTE.replace(":id", sr.data.details.id)
$set: SETTINGS_TEAM_ROUTE.replace(':id', sr.data.details.id)
}
} }
); });
this.setState(this.newState); this.setState(this.newState);
}) })
.catch(er => { .catch(er => {
// Display errors // Display errors
this.newState = { ...this.state }; this.newState = { ...this.state };
['name', 'description'].forEach((el) => { ["name", "description"].forEach(el => {
if (er.response.data.details[el]) { if (er.response.data.details[el]) {
this.newState = update( this.newState = update(this.newState, {
this.newState, formErrors: {
{ formErrors: { name: { $set: <span>{er.response.data.details[el]}</span> } } } name: { $set: <span>{er.response.data.details[el]}</span> }
); }
});
} }
}); });
this.setState(this.newState); this.setState(this.newState);
@ -99,26 +106,39 @@ class SettingsNewTeam extends Component {
errorMessage = ""; errorMessage = "";
if (value.length < NAME_MIN_LENGTH) { 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) { } 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 = update(this.newState, {
this.newState, formErrors: { name: { $set: errorMessage } }
{ formErrors: { name: { $set: errorMessage } } } });
);
} else if (key === "description") { } else if (key === "description") {
errorMessage = ""; errorMessage = "";
if (value.length > TEXT_MAX_LENGTH) { 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 = update(this.newState, {
this.newState, formErrors: { description: { $set: errorMessage } }
{ formErrors: { description: { $set: errorMessage } } } });
);
} }
} }
@ -129,10 +149,7 @@ class SettingsNewTeam extends Component {
this.newState = { ...this.state }; this.newState = { ...this.state };
// Update value in the state // Update value in the state
this.newState = update( this.newState = update(this.newState, { team: { [key]: { $set: value } } });
this.newState,
{ team: { [key]: { $set: value } } }
);
// Validate the input // Validate the input
this.validateField(key, value); this.validateField(key, value);
@ -142,7 +159,9 @@ class SettingsNewTeam extends Component {
} }
renderTeamNameFormGroup() { 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; const validationState = this.state.formErrors.name ? "error" : null;
return ( return (
<FormGroup <FormGroup
@ -165,7 +184,9 @@ class SettingsNewTeam extends Component {
} }
renderTeamDescriptionFormGroup() { 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; const validationState = this.state.formErrors.description ? "error" : null;
return ( return (
<FormGroup <FormGroup
@ -194,8 +215,9 @@ class SettingsNewTeam extends Component {
return <Redirect to={this.state.redirectTo} />; return <Redirect to={this.state.redirectTo} />;
} }
const btnDisabled = !_.isEmpty(this.state.formErrors.name) || const btnDisabled =
!_.isEmpty(this.state.formErrors.description); !_.isEmpty(this.state.formErrors.name) ||
!_.isEmpty(this.state.formErrors.description);
return ( return (
<Wrapper> <Wrapper>
@ -211,7 +233,6 @@ class SettingsNewTeam extends Component {
</Breadcrumb> </Breadcrumb>
<form onSubmit={this.onSubmit} style={{ maxWidth: "500px" }}> <form onSubmit={this.onSubmit} style={{ maxWidth: "500px" }}>
<MyFormGroupDiv> <MyFormGroupDiv>
{this.renderTeamNameFormGroup()} {this.renderTeamNameFormGroup()}
<small> <small>
@ -225,20 +246,24 @@ class SettingsNewTeam extends Component {
<FormattedMessage id="settings_page.new_team.description_sublabel" /> <FormattedMessage id="settings_page.new_team.description_sublabel" />
</small> </small>
</MyFormGroupDiv> </MyFormGroupDiv>
<ButtonToolbar>
<LinkContainer to={SETTINGS_TEAMS_ROUTE}> <Button
<Button> type="submit"
<FormattedMessage id="general.cancel" /> className="btn-primary"
disabled={btnDisabled}
>
<FormattedMessage id="settings_page.new_team.create" />
</Button> </Button>
</LinkContainer> <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
<Button type="submit" className="btn-primary" disabled={btnDisabled}> <Button>
<FormattedMessage id="settings_page.new_team.create" /> <FormattedMessage id="general.cancel" />
</Button> </Button>
</LinkContainer>
</ButtonToolbar>
</form> </form>
</Wrapper> </Wrapper>
); );
} }
} }
export default SettingsNewTeam; export default SettingsNewTeam;

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

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