diff --git a/frontend/src/app.js b/frontend/src/app.js index bbcb54be34..842c07a554 100644 --- a/frontend/src/app.js +++ b/frontend/src/app.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import { Router, navigate } from '@reach/router'; import { siteRoot, canAddRepo } from './utils/constants'; import { Utils } from './utils/utils'; +import SystemNotification from './components/system-notification'; import SidePanel from './components/side-panel'; import MainPanel from './components/main-panel'; import DraftsView from './pages/drafts/drafts-view'; @@ -178,47 +179,50 @@ class App extends Component { ; return ( -
- - - - {home} - - - + +
+ + + + {home} + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - -
+ + + + +
+ ); } } diff --git a/frontend/src/components/system-notification.js b/frontend/src/components/system-notification.js new file mode 100644 index 0000000000..d66f134771 --- /dev/null +++ b/frontend/src/components/system-notification.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { curNoteMsg, curNoteID, siteRoot, gettext } from '../utils/constants'; + +import '../css/system-notification.css'; + +class SystemNotification extends React.Component { + + constructor(props) { + super(props); + this.state = { + isClosed: false + }; + } + + close = () => { + this.setState({isClosed: true}); + + if (navigator.cookieEnabled) { + let date = new Date(), + cookies = document.cookie.split('; '), + infoIDExist = false, + newInfoID = curNoteID + '_'; + date.setTime(date.getTime() + 14*24*60*60*1000); + newInfoID += '; expires=' + date.toGMTString() + '; path=' + siteRoot; + for (var i = 0, len = cookies.length; i < len; i++) { + if (cookies[i].split('=')[0] == 'info_id') { + infoIDExist = true; + document.cookie = 'info_id=' + cookies[i].split('=')[1] + newInfoID; + break; + } + } + if (!infoIDExist) { + document.cookie = 'info_id=' + newInfoID; + } + } + } + + render() { + if (!curNoteMsg || this.state.isClosed) { + return null; + } + + return ( +
+

{curNoteMsg}

+ +
+ ); + } +} + +export default SystemNotification; diff --git a/frontend/src/css/system-notification.css b/frontend/src/css/system-notification.css new file mode 100644 index 0000000000..a44353dd2d --- /dev/null +++ b/frontend/src/css/system-notification.css @@ -0,0 +1,22 @@ +#info-bar { + color: #1f0600; + padding: 4px 25px 4px 10px; + background: #fddaa4; + position: relative; +} +#info-bar .close { + position: absolute; + right: 5px; + top: 5px; + font-size: 16px; + line-height: 1; + color: #888; + cursor: pointer; +} +#info-bar-info { + margin: 0; +} +#info-bar-info a { + color: #a68558; + text-decoration: underline; +} diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js index f1704451fe..b30472a019 100644 --- a/frontend/src/utils/constants.js +++ b/frontend/src/utils/constants.js @@ -44,6 +44,9 @@ export const isSystemStaff = window.app.pageOptions.isSystemStaff; export const thumbnailSizeForOriginal = window.app.pageOptions.thumbnailSizeForOriginal; export const repoPasswordMinLength = window.app.pageOptions.repoPasswordMinLength; +export const curNoteMsg = window.app.pageOptions.curNoteMsg; +export const curNoteID = window.app.pageOptions.curNoteID; + // wiki export const slug = window.wiki ? window.wiki.config.slug : ''; export const repoID = window.wiki ? window.wiki.config.repoId : ''; diff --git a/seahub/templates/base_for_react.html b/seahub/templates/base_for_react.html index 9e31fe53c3..0f77538405 100644 --- a/seahub/templates/base_for_react.html +++ b/seahub/templates/base_for_react.html @@ -79,6 +79,11 @@ isSystemStaff: {% if request.user.is_staff %} true {% else %} false {% endif %}, thumbnailSizeForOriginal: {{ thumbnail_size_for_original }}, repoPasswordMinLength: {{repo_password_min_length}}, + + {% if request.user.is_authenticated and request.cur_note %} + curNoteMsg: '{{ request.cur_note.message|urlize }}', + curNoteID: '{{ request.cur_note.id }}', + {% endif %} } };