scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-21 07:26:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #837 from ZmagoD/zd_SCI_1703

Browse source 
adds page titles [fixes SCI-1703]
This commit is contained in:
Zmago Devetak 2017-10-19 15:50:16 +02:00 committed by GitHub
parent a42b663fbf 5e5d7ea2dd
commit a677ef06c7
10 changed files with 262 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/javascript/src/components/PageTitle/index.jsx Normal file
View file

@ -0,0 +1,27 @@
// @flow
import React from "react";
import type { Node } from "react";
import type { MessageDescriptor } from "flow-typed";
import DocumentTitle from "react-document-title";
import { formatMessage, defineMessages, injectIntl } from "react-intl";
type Props = {
intl: any,
localeID: string,
values?: any,
children: Node
};
const PageTitle = (props: Props): Node => {
const message = defineMessages({
placeholder: { id: props.localeID }
});
const title = props.intl.formatMessage(message.placeholder, props.values);
return <DocumentTitle title={title}>{props.children}</DocumentTitle>;
};
PageTitle.defaultProps = {
values: {}
};
export default injectIntl(PageTitle);

8
app/javascript/src/config/locales/messages.js
View file

@ -8,6 +8,14 @@ export default {
loading: "Loading ...",
upload: "Upload"
},
page_title: {
root: "SciNote",
settings_preference_page: "SciNote | Settings | Preferences",
settings_profile_page: "SciNote | Settings | Profile",
team_page: "SciNote | Settings | Teams | {name}",
all_teams_page: "SciNote | Settings | Teams",
new_team_page: "SciNote | Settings | Teams | New"
},
error_messages: {
text_too_short: "is too short (minimum is {min_length} characters)",
text_too_long: "is too long (maximum is {max_length} characters)",

5
app/javascript/src/scenes/SettingsPage/index.jsx
View file

@ -15,6 +15,7 @@ import {
import { SETTINGS_PATH, SETTINGS_TEAMS } from "../../config/api_endpoints";
import PageTitle from "../../components/PageTitle";
import NotFound from "../../components/404/NotFound";
import SettingsProfile from "./scenes/profile";
import SettingsPreferences from "./scenes/preferences";
@ -39,7 +40,7 @@ export default class SettingsPage extends Component {
render() {
return (
<div>
<PageTitle localeID="page_title.root">
<div className="container">
<Nav bsStyle="tabs" activeKey="1" onSelect={this.handleSelect}>
<LinkContainer
@ -85,7 +86,7 @@ export default class SettingsPage extends Component {
<Route component={NotFound} />
</Switch>
</div>
</div>
</PageTitle>
);
}
}

83
app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
View file

@ -2,6 +2,7 @@ import React, { Component } from "react";
import { FormattedMessage } from "react-intl";
import { getUserPreferencesInfo } from "../../../../services/api/users_api";
import PageTitle from "../../../../components/PageTitle";
import SettingsAccountWrapper from "../../components/SettingsAccountWrapper";
import InputTimezone from "./components/InputTimezone";
import NotificationsGroup from "./components/NotificationsGroup";
@ -45,48 +46,46 @@ class SettingsPreferences extends Component {
render() {
return (
<SettingsAccountWrapper>
<div className="col-xs-12 col-sm-9">
<InputTimezone
value={this.state.timeZone}
loadPreferences={this.getPreferencesInfo}
/>
<h3>
<FormattedMessage id="settings_page.notifications" />
</h3>
<NotificationsGroup
type={ASSIGNMENT_NOTIFICATION}
title="settings_page.assignement"
subtitle="settings_page.assignement_msg"
iconClasses="fa fa-newspaper-o"
inAppNotification={this.state.assignments_notification}
emailNotification={
this.state.assignments_email_notification
}
iconBackground={MAIN_COLOR_BLUE}
reloadInfo={this.getPreferencesInfo}
/>
<NotificationsGroup
type={RECENT_NOTIFICATION}
title="settings_page.recent_changes"
subtitle="settings_page.recent_changes_msg"
inAppNotification={this.state.recent_notification}
emailNotification={this.state.recent_email_notification}
reloadInfo={this.getPreferencesInfo}
/>
<NotificationsGroup
type={SYSTEM_NOTIFICATION}
title="settings_page.system_message"
subtitle="settings_page.system_message_msg"
emailNotification={
this.state.system_message_email_notification
}
iconClasses="glyphicon glyphicon-tower"
iconBackground={ICON_GREEN_COLOR}
reloadInfo={this.getPreferencesInfo}
/>
</div>
</SettingsAccountWrapper>
<PageTitle localeID="page_title.settings_preference_page">
<SettingsAccountWrapper>
<div className="col-xs-12 col-sm-9">
<InputTimezone
value={this.state.timeZone}
loadPreferences={this.getPreferencesInfo}
/>
<h3>
<FormattedMessage id="settings_page.notifications" />
</h3>
<NotificationsGroup
type={ASSIGNMENT_NOTIFICATION}
title="settings_page.assignement"
subtitle="settings_page.assignement_msg"
iconClasses="fa fa-newspaper-o"
inAppNotification={this.state.assignments_notification}
emailNotification={this.state.assignments_email_notification}
iconBackground={MAIN_COLOR_BLUE}
reloadInfo={this.getPreferencesInfo}
/>
<NotificationsGroup
type={RECENT_NOTIFICATION}
title="settings_page.recent_changes"
subtitle="settings_page.recent_changes_msg"
inAppNotification={this.state.recent_notification}
emailNotification={this.state.recent_email_notification}
reloadInfo={this.getPreferencesInfo}
/>
<NotificationsGroup
type={SYSTEM_NOTIFICATION}
title="settings_page.system_message"
subtitle="settings_page.system_message_msg"
emailNotification={this.state.system_message_email_notification}
iconClasses="glyphicon glyphicon-tower"
iconBackground={ICON_GREEN_COLOR}
reloadInfo={this.getPreferencesInfo}
/>
</div>
</SettingsAccountWrapper>
</PageTitle>
);
}
}

24
app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx
View file

@ -1,16 +1,22 @@
import React from "react";
import DocumentTitle from "react-document-title";
import PageTitle from "../../../../components/PageTitle";
import SettingsAccountWrapper from "../../components/SettingsAccountWrapper";
import MyProfile from "./components/MyProfile";
import MyStatistics from "./components/MyStatistics";
const SettingsProfile = () =>
<SettingsAccountWrapper>
<div className="col-xs-12 col-sm-4">
<MyProfile />
</div>
<div className="col-xs-12 col-sm-5">
<MyStatistics />
</div>
</SettingsAccountWrapper>;
const SettingsProfile = () => (
<PageTitle localeID="page_title.settings_profile_page">
<SettingsAccountWrapper>
<div className="col-xs-12 col-sm-4">
<MyProfile />
</div>
<div className="col-xs-12 col-sm-5">
<MyStatistics />
</div>
</SettingsAccountWrapper>
</PageTitle>
);
export default SettingsProfile;

166
app/javascript/src/scenes/SettingsPage/scenes/team/index.jsx
View file

@ -12,6 +12,7 @@ import { SETTINGS_TEAMS_ROUTE } from "../../../../config/routes";
import { TEAM_DETAILS_PATH } from "../../../../config/api_endpoints";
import { BORDER_LIGHT_COLOR } from "../../../../config/constants/colors";
import PageTitle from "../../../../components/PageTitle";
import TeamsMembers from "./components/TeamsMembers";
import UpdateTeamDescriptionModal from "./components/UpdateTeamDescriptionModal";
import UpdateTeamNameModal from "./components/UpdateTeamNameModal";
@ -21,7 +22,7 @@ export type TeamMemeber = {
team_user_id: number,
teamName: string,
team_id: number
}
};
const Wrapper = styled.div`
background: white;
@ -153,86 +154,91 @@ class SettingsTeam extends Component {
render() {
return (
<Wrapper>
<Breadcrumb>
<LinkContainer to={SETTINGS_TEAMS_ROUTE}>
<Breadcrumb.Item>
<FormattedMessage id="settings_page.all_teams" />
<PageTitle
localeID="page_title.team_page"
values={{ name: this.state.team.name }}
>
<Wrapper>
<Breadcrumb>
<LinkContainer to={SETTINGS_TEAMS_ROUTE}>
<Breadcrumb.Item>
<FormattedMessage id="settings_page.all_teams" />
</Breadcrumb.Item>
</LinkContainer>
<Breadcrumb.Item active={true}>
{this.state.team.name}
</Breadcrumb.Item>
</LinkContainer>
<Breadcrumb.Item active={true}>
{this.state.team.name}
</Breadcrumb.Item>
</Breadcrumb>
<TabTitle>
<StyledH3 onClick={this.showNameModal}>
{this.state.team.name}
</StyledH3>
</TabTitle>
<Row>
<Col xs={6} sm={3}>
<BadgeWrapper>
<Glyphicon glyph="calendar" />
</BadgeWrapper>
<StyledWell>
<FormattedHTMLMessage
id="settings_page.single_team.created_on"
values={{
created_at: moment(this.state.team.created_at).format(
"DD.MM.YYYY"
)
}}
/>
</StyledWell>
</Col>
<Col xs={10} sm={5}>
<BadgeWrapper>
<Glyphicon glyph="user" />
</BadgeWrapper>
<StyledWell>
<FormattedHTMLMessage
id="settings_page.single_team.created_by"
values={{ created_by: this.state.team.created_by }}
/>
</StyledWell>
</Col>
<Col xs={8} sm={4}>
<BadgeWrapper>
<Glyphicon glyph="hdd" />
</BadgeWrapper>
<StyledWell>
<FormattedHTMLMessage
id="settings_page.single_team.space_usage"
values={{
space_usage: formatBytes(this.state.team.space_taken)
}}
/>
</StyledWell>
</Col>
</Row>
<Row>
<Col sm={12} onClick={this.showDescriptionModal}>
<BadgeWrapper>
<Glyphicon glyph="info-sign" />
</BadgeWrapper>
<StyledDescriptionWell>
<span>{this.renderDescription()}</span>
</StyledDescriptionWell>
</Col>
</Row>
<TeamsMembers
members={this.state.users}
updateUsersCallback={this.updateUsersCallback}
team={this.state.team}
/>
<UpdateTeamDescriptionModal
showModal={this.state.showDescriptionModal}
hideModal={this.hideDescriptionModalCallback}
team={this.state.team}
updateTeamCallback={this.updateTeamCallback}
/>
{this.renderEditNameModel()}
</Wrapper>
</Breadcrumb>
<TabTitle>
<StyledH3 onClick={this.showNameModal}>
{this.state.team.name}
</StyledH3>
</TabTitle>
<Row>
<Col xs={6} sm={3}>
<BadgeWrapper>
<Glyphicon glyph="calendar" />
</BadgeWrapper>
<StyledWell>
<FormattedHTMLMessage
id="settings_page.single_team.created_on"
values={{
created_at: moment(this.state.team.created_at).format(
"DD.MM.YYYY"
)
}}
/>
</StyledWell>
</Col>
<Col xs={10} sm={5}>
<BadgeWrapper>
<Glyphicon glyph="user" />
</BadgeWrapper>
<StyledWell>
<FormattedHTMLMessage
id="settings_page.single_team.created_by"
values={{ created_by: this.state.team.created_by }}
/>
</StyledWell>
</Col>
<Col xs={8} sm={4}>
<BadgeWrapper>
<Glyphicon glyph="hdd" />
</BadgeWrapper>
<StyledWell>
<FormattedHTMLMessage
id="settings_page.single_team.space_usage"
values={{
space_usage: formatBytes(this.state.team.space_taken)
}}
/>
</StyledWell>
</Col>
</Row>
<Row>
<Col sm={12} onClick={this.showDescriptionModal}>
<BadgeWrapper>
<Glyphicon glyph="info-sign" />
</BadgeWrapper>
<StyledDescriptionWell>
<span>{this.renderDescription()}</span>
</StyledDescriptionWell>
</Col>
</Row>
<TeamsMembers
members={this.state.users}
updateUsersCallback={this.updateUsersCallback}
team={this.state.team}
/>
<UpdateTeamDescriptionModal
showModal={this.state.showDescriptionModal}
hideModal={this.hideDescriptionModalCallback}
team={this.state.team}
updateTeamCallback={this.updateTeamCallback}
/>
{this.renderEditNameModel()}
</Wrapper>
</PageTitle>
);
}
}

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

@ -7,6 +7,7 @@ import { FormattedMessage } from "react-intl";
import { BORDER_LIGHT_COLOR } from "../../../../config/constants/colors";
import PageTitle from "../../../../components/PageTitle";
import TeamsPageDetails from "./components/TeamsPageDetails";
import TeamsDataTable from "./components/TeamsDataTable";
@ -19,16 +20,19 @@ const Wrapper = styled.div`
padding: 16px 15px 50px 15px;
`;
const SettingsTeams = ({ teams }) =>
<Wrapper>
<Breadcrumb>
<Breadcrumb.Item active>
<FormattedMessage id="settings_page.all_teams" />
</Breadcrumb.Item>
</Breadcrumb>
<TeamsPageDetails teams={teams} />
<TeamsDataTable teams={teams} />
</Wrapper>;
const SettingsTeams = ({ teams }) => (
<PageTitle localeID="page_title.all_teams_page">
<Wrapper>
<Breadcrumb>
<Breadcrumb.Item active>
<FormattedMessage id="settings_page.all_teams" />
</Breadcrumb.Item>
</Breadcrumb>
<TeamsPageDetails teams={teams} />
<TeamsDataTable teams={teams} />
</Wrapper>
</PageTitle>
);
SettingsTeams.propTypes = {
teams: PropTypes.arrayOf(
@ -44,7 +48,7 @@ SettingsTeams.propTypes = {
};
SettingsTeams.defaultProps = {
teams: [{id: 0, name: "", current_team: "", role: "", members: 0}]
teams: [{ id: 0, name: "", current_team: "", role: "", members: 0 }]
};
const mapStateToProps = ({ all_teams }) => ({

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

@ -30,6 +30,7 @@ import { getTeamsList } from "../../../../../components/actions/TeamsActions";
import { BORDER_LIGHT_COLOR } from "../../../../../config/constants/colors";
import PageTitle from "../../../../../components/PageTitle";
import NameFormControl from "./components/NameFormControl";
const Wrapper = styled.div`
@ -225,48 +226,50 @@ class SettingsNewTeam extends Component {
!_.isEmpty(this.state.formErrors.description);
return (
<Wrapper>
<Breadcrumb>
<LinkContainer to={SETTINGS_TEAMS_ROUTE}>
<Breadcrumb.Item>
<FormattedMessage id="settings_page.all_teams" />
</Breadcrumb.Item>
</LinkContainer>
<Breadcrumb.Item active={true}>
<FormattedMessage id="settings_page.new_team.title" />
</Breadcrumb.Item>
</Breadcrumb>
<form onSubmit={this.onSubmit} style={{ maxWidth: "500px" }}>
<MyFormGroupDiv>
{this.renderTeamNameFormGroup()}
<small>
<FormattedMessage id="settings_page.new_team.name_sublabel" />
</small>
</MyFormGroupDiv>
<MyFormGroupDiv>
{this.renderTeamDescriptionFormGroup()}
<small>
<FormattedMessage id="settings_page.new_team.description_sublabel" />
</small>
</MyFormGroupDiv>
<ButtonToolbar>
<Button
type="submit"
className="btn-primary"
disabled={btnDisabled}
>
<FormattedMessage id="settings_page.new_team.create" />
</Button>
<PageTitle localeID="page_title.new_team_page">
<Wrapper>
<Breadcrumb>
<LinkContainer to={SETTINGS_TEAMS_ROUTE}>
<Button>
<FormattedMessage id="general.cancel" />
</Button>
<Breadcrumb.Item>
<FormattedMessage id="settings_page.all_teams" />
</Breadcrumb.Item>
</LinkContainer>
</ButtonToolbar>
</form>
</Wrapper>
<Breadcrumb.Item active={true}>
<FormattedMessage id="settings_page.new_team.title" />
</Breadcrumb.Item>
</Breadcrumb>
<form onSubmit={this.onSubmit} style={{ maxWidth: "500px" }}>
<MyFormGroupDiv>
{this.renderTeamNameFormGroup()}
<small>
<FormattedMessage id="settings_page.new_team.name_sublabel" />
</small>
</MyFormGroupDiv>
<MyFormGroupDiv>
{this.renderTeamDescriptionFormGroup()}
<small>
<FormattedMessage id="settings_page.new_team.description_sublabel" />
</small>
</MyFormGroupDiv>
<ButtonToolbar>
<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>
</PageTitle>
);
}
}

1
package.json
View file

@ -72,6 +72,7 @@
"react-bootstrap-table": "^4.0.0",
"react-bootstrap-timezone-picker": "^1.0.11",
"react-data-grid": "^2.0.2",
"react-document-title": "^2.0.3",
"react-dom": "15.6.1",
"react-intl": "^2.3.0",
"react-intl-redux": "^0.6.0",

24
yarn.lock
View file

@ -2289,6 +2289,10 @@ exenv@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.0.tgz#3835f127abf075bfe082d0aed4484057c78e3c89"
exenv@^1.2.1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
expand-brackets@^0.1.4:
version "0.1.5"
resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@ -4864,7 +4868,7 @@ prop-types@15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8:
fbjs "^0.8.9"
loose-envify "^1.3.1"
prop-types@^15.5.10:
prop-types@^15.5.10, prop-types@^15.5.6:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
@ -5018,6 +5022,13 @@ react-data-grid@^2.0.2:
version "2.0.60"
resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-2.0.60.tgz#4a1549d4dad032677439f25dbcf1036ab966032f"
react-document-title@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/react-document-title/-/react-document-title-2.0.3.tgz#bbf922a0d71412fc948245e4283b2412df70f2b9"
dependencies:
prop-types "^15.5.6"
react-side-effect "^1.0.2"
react-dom-factories@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.1.tgz#c50692ac5ff1adb39d86dfe6dbe3485dacf58455"
@ -5130,6 +5141,13 @@ react-s-alert@^1.3.0:
dependencies:
babel-runtime "^6.23.0"
react-side-effect@^1.0.2:
version "1.1.3"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.3.tgz#512c25abe0dec172834c4001ec5c51e04d41bc5c"
dependencies:
exenv "^1.2.1"
shallowequal "^1.0.1"
react-tagsinput@^3.17.0:
version "3.18.0"
resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.18.0.tgz#40e036fc0f4c3d6b4689858189ab02926717a818"
@ -5607,6 +5625,10 @@ shallow-clone@^0.1.2:
lazy-cache "^0.2.3"
mixin-object "^2.0.1"
shallowequal@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.0.2.tgz#1561dbdefb8c01408100319085764da3fcf83f8f"
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"