scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-12 09:20:45 +08:00
Code Issues Projects Releases Packages Wiki Activity

styled notifications dorpdown

Browse source
This commit is contained in:
zmagod 2017-08-09 14:49:29 +02:00
parent 007f50a158
commit 7630f6af3d
4 changed files with 60 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/javascript/packs/shared/constants/colors.js
View file

@ -1,3 +1,5 @@
export const MAIN_COLOR_BLUE = '#37a0d9'; export const MAIN_COLOR_BLUE = "#37a0d9";
export const WHITE_COLOR = '#fff'; export const WHITE_COLOR = "#fff";
export const BORDER_GRAY_COLOR = '#d2d2d2'; export const BORDER_GRAY_COLOR = "#d2d2d2";
export const WILD_SAND_COLOR = "#f5f5f5";
export const MYSTIC_COLOR = "#eaeff2";

6
app/javascript/packs/shared/navigation/components/CustomNavItem.jsx
View file

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
export default props => export default ({ className, children }) =>
<li role="presentation"> <li className={className} role="presentation">
{props.children} {children}
</li>; </li>;

16
app/javascript/packs/shared/navigation/components/NotificationItem.jsx
View file

@ -2,14 +2,21 @@ import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Col, Row } from "react-bootstrap"; import { Col, Row } from "react-bootstrap";
import { FormattedTime } from "react-intl"; import { FormattedTime } from "react-intl";
import styled from "styled-components";
import CustomNavItem from "./CustomNavItem"; import CustomNavItem from "./CustomNavItem";
const StyledListItem = styled(CustomNavItem)`
border-bottom: 1px solid #d2d2d2;
padding-bottom: 10px;
padding-top: 10px;
`;
const NotificationItem = ({ notification }) => { const NotificationItem = ({ notification }) => {
const { title, message, created_at, type_of } = notification; const { title, message, created_at, type_of } = notification;
return ( return (
<CustomNavItem> <StyledListItem>
<Row> <Row>
<Col xs={2}> <Col xs={2}>
<div className="text-center"> <div className="text-center">
@ -20,7 +27,7 @@ const NotificationItem = ({ notification }) => {
</Col> </Col>
<Col xs={10}> <Col xs={10}>
<span dangerouslySetInnerHTML={{ __html: title }} /> <strong dangerouslySetInnerHTML={{ __html: title }} />
<br /> <br />
<FormattedTime <FormattedTime
value={created_at} value={created_at}
@ -29,11 +36,10 @@ const NotificationItem = ({ notification }) => {
year="numeric" year="numeric"
hour="numeric" hour="numeric"
minute="numeric" minute="numeric"
/> />&nbsp;|&nbsp;<span dangerouslySetInnerHTML={{ __html: message }} />
| <span dangerouslySetInnerHTML={{ __html: message }} />
</Col> </Col>
</Row> </Row>
</CustomNavItem> </StyledListItem>
); );
}; };

47
app/javascript/packs/shared/navigation/components/NotificationsDropdown.jsx
View file

@ -2,13 +2,48 @@ import React, { Component } from "react";
import { NavDropdown } from "react-bootstrap"; import { NavDropdown } from "react-bootstrap";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import axios from "axios"; import axios from "axios";
import styled from "styled-components";
import { RECENT_NOTIFICATIONS_PATH } from "../../../app/routes"; import { RECENT_NOTIFICATIONS_PATH } from "../../../app/routes";
import {
MAIN_COLOR_BLUE,
WILD_SAND_COLOR,
MYSTIC_COLOR
} from "../../constants/colors";
import NotificationItem from "./NotificationItem"; import NotificationItem from "./NotificationItem";
import Spinner from "../../Spinner"; import Spinner from "../../Spinner";
import CustomNavItem from "./CustomNavItem"; import CustomNavItem from "./CustomNavItem";
const StyledListHeader = styled(CustomNavItem)`
background-color: ${MAIN_COLOR_BLUE};
color: ${WILD_SAND_COLOR};
font-weight: bold;
padding: 8px;
& a, a:hover, a:active {
color: ${WILD_SAND_COLOR};
}
`;
const StyledListFooter = styled(CustomNavItem)`
background-color: ${MYSTIC_COLOR};
padding: 8px;
text-align: center;
`;
const StyledNavDropdown = styled(NavDropdown)`
& > .dropdown-menu {
max-height: 500px;
overflow-x: hidden;
overflow-y: scroll;
padding-bottom: 0;
padding-top: 0;
width: 450px;
word-wrap: break-word;
}
`;
class NotificationsDropdown extends Component { class NotificationsDropdown extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -45,13 +80,13 @@ class NotificationsDropdown extends Component {
render() { render() {
return ( return (
<NavDropdown <StyledNavDropdown
noCaret noCaret
id="notifications-dropdown" id="notifications-dropdown"
title={<i className="fa fa-bell" />} title={<i className="fa fa-bell" />}
onClick={this.getRecentNotifications} onClick={this.getRecentNotifications}
> >
<CustomNavItem> <StyledListHeader>
<span> <span>
<FormattedMessage id="notifications.dropdown_title" /> <FormattedMessage id="notifications.dropdown_title" />
</span> </span>
@ -60,14 +95,14 @@ class NotificationsDropdown extends Component {
<FormattedMessage id="notifications.dropdown_settings_link" /> <FormattedMessage id="notifications.dropdown_settings_link" />
</a> </a>
</span> </span>
</CustomNavItem> </StyledListHeader>
{this.renderNotifications()} {this.renderNotifications()}
<CustomNavItem> <StyledListFooter>
<a href="/users/notifications"> <a href="/users/notifications">
<FormattedMessage id="notifications.dropdown_show_all" /> <FormattedMessage id="notifications.dropdown_show_all" />
</a> </a>
</CustomNavItem> </StyledListFooter>
</NavDropdown> </StyledNavDropdown>
); );
} }
} }