From 3a2a1205e3bcb164880bfdfc8be6407c654aabfb Mon Sep 17 00:00:00 2001 From: zmagod Date: Tue, 22 Aug 2017 13:20:06 +0200 Subject: [PATCH] style global activities --- app/javascript/packs/app/action_types.js | 1 + app/javascript/packs/app/constants/colors.js | 4 ++ .../packs/shared/actions/ActivitiesActions.js | 15 ++++-- .../components/ActivityDateElement.jsx | 31 +++++++++-- .../navigation/components/ActivityElement.jsx | 54 ++++++++++++++----- .../components/GlobalActivitiesModal.jsx | 49 ++++++++++++++--- .../shared/navigation/{index.js => index.jsx} | 40 +++++++++----- .../shared/reducers/ActivitiesReducers.js | 36 +++++++------ app/javascript/packs/styles/main.scss | 4 ++ package.json | 2 + yarn.lock | 8 +++ 11 files changed, 190 insertions(+), 54 deletions(-) rename app/javascript/packs/shared/navigation/{index.js => index.jsx} (80%) diff --git a/app/javascript/packs/app/action_types.js b/app/javascript/packs/app/action_types.js index 084ee095b..90015d874 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/constants/colors.js b/app/javascript/packs/app/constants/colors.js index 9b4ad3aa3..c1ff883c0 100644 --- a/app/javascript/packs/app/constants/colors.js +++ b/app/javascript/packs/app/constants/colors.js @@ -3,3 +3,7 @@ export const WHITE_COLOR = "#fff"; export const BORDER_GRAY_COLOR = "#d2d2d2"; 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"; diff --git a/app/javascript/packs/shared/actions/ActivitiesActions.js b/app/javascript/packs/shared/actions/ActivitiesActions.js index b10aebc1e..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 "../../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/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 012c680dc..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) { @@ -52,13 +88,14 @@ class GlobalActivitiesModal extends Component { addMoreButton() { if (this.props.more) { return ( -
  • - +
    • ); } + return ""; } render() { @@ -69,12 +106,12 @@ class GlobalActivitiesModal extends Component { - -
      + +
        {this.displayActivities()} {this.addMoreButton()}
      - +