diff --git a/app/controllers/client_api/teams_controller.rb b/app/controllers/client_api/teams_controller.rb index 1aaff0425..029282d73 100644 --- a/app/controllers/client_api/teams_controller.rb +++ b/app/controllers/client_api/teams_controller.rb @@ -2,9 +2,6 @@ module ClientApi class TeamsController < ApplicationController MissingTeamError = Class.new(StandardError) - # TODO remove this when the user authentication will be implemented - skip_before_action :verify_authenticity_token - def index success_response end diff --git a/app/javascript/packs/app/action_types.js b/app/javascript/packs/app/action_types.js index 059d8c6a6..51e990aea 100644 --- a/app/javascript/packs/app/action_types.js +++ b/app/javascript/packs/app/action_types.js @@ -4,6 +4,7 @@ export const GET_LIST_OF_TEAMS = "GET_LIST_OF_TEAMS"; // activities export const GLOBAL_ACTIVITIES_DATA = "GLOBAL_ACTIVITIES_DATA"; +export const DESTROY_GLOBAL_ACTIVITIES_DATA = "DESTROY_GLOBAL_ACTIVITIES_DATA"; // users export const SET_CURRENT_USER = "SET_CURRENT_USER"; diff --git a/app/javascript/packs/app/axios.js b/app/javascript/packs/app/axios.js new file mode 100644 index 000000000..7cf8426c7 --- /dev/null +++ b/app/javascript/packs/app/axios.js @@ -0,0 +1,7 @@ +import axios from "axios"; + +export default axios.create({ + headers: { + "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content + } +}); diff --git a/app/javascript/packs/app/constants/colors.js b/app/javascript/packs/app/constants/colors.js index 4150eaa14..55972ab92 100644 --- a/app/javascript/packs/app/constants/colors.js +++ b/app/javascript/packs/app/constants/colors.js @@ -6,6 +6,10 @@ export const DARK_GRAY_COLOR = "#7a7a7a"; export const BORDER_LIGHT_COLOR = "#e3e3e3"; export const WILD_SAND_COLOR = "#f5f5f5"; export const MYSTIC_COLOR = "#eaeff2"; +export const COLOR_CONCRETE = "#f2f2f2"; +export const COLOR_MINE_SHAFT = "#333" +export const COLOR_BLACK = "#000"; +export const COLOR_GRAY_LIGHT_YADCF = "#ccc"; export const ICON_GREEN_COLOR = "#8fd13f"; export const NOTIFICATION_YES = "#5a8921"; export const NOTIFICATION_YES_BORDER = "#4d751c"; diff --git a/app/javascript/packs/locales/messages.js b/app/javascript/packs/locales/messages.js index a47793a62..cd8afa045 100644 --- a/app/javascript/packs/locales/messages.js +++ b/app/javascript/packs/locales/messages.js @@ -8,7 +8,14 @@ export default { loading: "Loading ..." }, navbar: { - page_title: "sciNote" + page_title: "sciNote", + home_label: "Home", + protocols_label: "Protocols", + repositories_label: "Repositories", + activities_label: "Activities", + search_label: "Search", + notifications_label: "Notifications", + info_label: "Info" }, settings_page: { account: "Account", diff --git a/app/javascript/packs/shared/actions/ActivitiesActions.js b/app/javascript/packs/shared/actions/ActivitiesActions.js index 94ce39f28..919569b27 100644 --- a/app/javascript/packs/shared/actions/ActivitiesActions.js +++ b/app/javascript/packs/shared/actions/ActivitiesActions.js @@ -1,6 +1,9 @@ -import axios from "axios"; +import axios from "../../app/axios"; import { ACTIVITIES_PATH } from "../../app/routes"; -import { GLOBAL_ACTIVITIES_DATA } from "../../app/action_types"; +import { + GLOBAL_ACTIVITIES_DATA, + DESTROY_GLOBAL_ACTIVITIES_DATA +} from "../../app/action_types"; function addActivitiesData(data) { return { @@ -9,9 +12,15 @@ function addActivitiesData(data) { }; } -export function getActivities(last_id = 0) { +export function destroyActivities() { + return { + type: DESTROY_GLOBAL_ACTIVITIES_DATA + }; +} + +export function getActivities(lastId = 0) { return dispatch => { - let path = `${ACTIVITIES_PATH}?from=${last_id}`; + const path = `${ACTIVITIES_PATH}?from=${lastId}`; axios .get(path, { withCredentials: true }) .then(response => { diff --git a/app/javascript/packs/shared/actions/TeamsActions.js b/app/javascript/packs/shared/actions/TeamsActions.js index a1410c1fa..a13590fed 100644 --- a/app/javascript/packs/shared/actions/TeamsActions.js +++ b/app/javascript/packs/shared/actions/TeamsActions.js @@ -1,4 +1,4 @@ -import axios from "axios"; +import axios from "../../app/axios"; import _ from "lodash"; import { TEAMS_PATH, CHANGE_TEAM_PATH } from "../../app/routes"; import { GET_LIST_OF_TEAMS, SET_CURRENT_TEAM } from "../../app/action_types"; diff --git a/app/javascript/packs/shared/actions/UsersActions.js b/app/javascript/packs/shared/actions/UsersActions.js index 8da83d97a..129fff778 100644 --- a/app/javascript/packs/shared/actions/UsersActions.js +++ b/app/javascript/packs/shared/actions/UsersActions.js @@ -1,4 +1,4 @@ -import axios from "axios"; +import axios from "../../app/axios"; import { CURRENT_USER_PATH } from "../../app/routes"; import { SET_CURRENT_USER, diff --git a/app/javascript/packs/shared/navigation/components/ActivityDateElement.jsx b/app/javascript/packs/shared/navigation/components/ActivityDateElement.jsx index cb7697903..d67e00a83 100644 --- a/app/javascript/packs/shared/navigation/components/ActivityDateElement.jsx +++ b/app/javascript/packs/shared/navigation/components/ActivityDateElement.jsx @@ -1,11 +1,34 @@ import React from "react"; import PropTypes from "prop-types"; -import { FormattedDate } from "react-intl"; +import Moment from "react-moment"; +import styled from "styled-components"; + +import { WHITE_COLOR } from "../../../app/constants/colors" + +const StyledLi = styled.li` + margin-bottom: 1em; +` + +const StyledSpan = styled.span` + display: inline; + padding: 5px 30px; + font-size: 1em; + font-weight: bold; + line-height: 1; + color: ${WHITE_COLOR}; + white-space: nowrap; + vertical-align: baseline; + border-radius: .25em; +`; const ActivityDateElement = ({ date }) => -
  • - -
    • ; + + + + {date} + + + ; ActivityDateElement.propTypes = { date: PropTypes.instanceOf(Date).isRequired diff --git a/app/javascript/packs/shared/navigation/components/ActivityElement.jsx b/app/javascript/packs/shared/navigation/components/ActivityElement.jsx index e0c4fa92a..421849037 100644 --- a/app/javascript/packs/shared/navigation/components/ActivityElement.jsx +++ b/app/javascript/packs/shared/navigation/components/ActivityElement.jsx @@ -1,24 +1,54 @@ import React from "react"; import PropTypes from "prop-types"; -import { FormattedTime } from "react-intl"; +import Moment from "react-moment"; +import styled from "styled-components"; + +import { + WHITE_COLOR, + COLOR_CONCRETE, + BORDER_GRAY_COLOR +} from "../../../app/constants/colors"; + +const StyledLi = styled.li` + border-radius: .25em; + margin-bottom: 1em; + background-color: ${WHITE_COLOR}; + border: 1px solid ${COLOR_CONCRETE}; +`; +const TimeSpan = styled.span` + min-width: 150px; + display: table-cell; + vertical-align: middle; + border-top-left-radius: .25em; + border-bottom-left-radius: .25em; + border: 3px solid ${BORDER_GRAY_COLOR}; + background-color: ${BORDER_GRAY_COLOR}; + padding-left: 10px; + padding-right: 10px; + vertical-align: top; +`; + +const TextSpan = styled.span` + display: table-cell; + padding: 3px 10px; + text-align: justify; +` const ActivityElement = ({ activity }) => -
  • - - - - -
    • ; + + + + {activity.created_at} + + + + ; ActivityElement.propTypes = { activity: PropTypes.shape({ message: PropTypes.string.isRequired, created_at: PropTypes.string.isRequired - }) + }).isRequired }; export default ActivityElement; diff --git a/app/javascript/packs/shared/navigation/components/GlobalActivitiesModal.jsx b/app/javascript/packs/shared/navigation/components/GlobalActivitiesModal.jsx index 97d680d80..e1f82df70 100644 --- a/app/javascript/packs/shared/navigation/components/GlobalActivitiesModal.jsx +++ b/app/javascript/packs/shared/navigation/components/GlobalActivitiesModal.jsx @@ -4,10 +4,46 @@ import PropTypes from "prop-types"; import { FormattedMessage } from "react-intl"; import { Modal, Button } from "react-bootstrap"; import _ from "lodash"; +import styled from "styled-components"; import { getActivities } from "../../actions/ActivitiesActions"; import ActivityElement from "./ActivityElement"; import ActivityDateElement from "./ActivityDateElement"; +import { + WHITE_COLOR, + COLOR_CONCRETE, + COLOR_MINE_SHAFT, + COLOR_GRAY_LIGHT_YADCF +} from "../../../app/constants/colors"; + +const StyledBottom = styled(Button)` + display: inline-block; + margin-bottom: 0; + font-weight: normal; + text-align: center; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border: 1px solid transparent; + white-space: nowrap; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + border-radius: 4px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: ${COLOR_MINE_SHAFT}; + background-color: ${WHITE_COLOR}; + border-color: ${COLOR_GRAY_LIGHT_YADCF}; +`; + +const StyledModalBody = styled(Modal.Body)` + background-color: ${COLOR_CONCRETE}; + color: ${COLOR_MINE_SHAFT};; +`; class GlobalActivitiesModal extends Component { constructor(props) { @@ -25,9 +61,9 @@ class GlobalActivitiesModal extends Component { ); } return this.props.activities.map((activity, i, arr) => { - let newDate = new Date(activity.created_at); + const newDate = new Date(activity.created_at); if (i > 0) { - let prevDate = new Date(arr[i - 1].created_at); + const prevDate = new Date(arr[i - 1].created_at); if (prevDate < newDate) { return [ , @@ -45,20 +81,21 @@ class GlobalActivitiesModal extends Component { } addMoreActivities() { - let last_id = _.last(this.props.activities).id; - this.props.fetchActivities(last_id); + const lastId = _.last(this.props.activities).id; + this.props.fetchActivities(lastId); } addMoreButton() { if (this.props.more) { return ( -
  • - +
    • ); } + return ""; } render() { @@ -69,12 +106,12 @@ class GlobalActivitiesModal extends Component { - -
      + +
        {this.displayActivities()} {this.addMoreButton()}
      - +