diff --git a/client/lib/common/asset/less/yourturn/notification-bar.less b/client/lib/common/asset/less/yourturn/notification-bar.less index 6b280e32..e31e0878 100644 --- a/client/lib/common/asset/less/yourturn/notification-bar.less +++ b/client/lib/common/asset/less/yourturn/notification-bar.less @@ -3,13 +3,13 @@ .notificationBar { position: fixed; width: 100%; - z-index: 10; + z-index: 100; ul { margin: 0; padding: 0; list-style-type: none; box-shadow: 0px 0px 5px @gray; - + li { border-bottom: 1px solid @gray-light; cursor: pointer; @@ -24,10 +24,21 @@ margin-right: @padding-small; } } + + &.type-info { + background-color: @blue; + color: @white; + &:before { + font-family: 'FontAwesome'; + content: '\f05a'; + display: inline-block; + margin-right: @padding-small; + } + } &.type-default { background-color: @white; color: @black; } } - } -} \ No newline at end of file + } +} diff --git a/client/lib/common/src/data/notification/notification-actions.js b/client/lib/common/src/data/notification/notification-actions.js index 333e42f6..469b7235 100644 --- a/client/lib/common/src/data/notification/notification-actions.js +++ b/client/lib/common/src/data/notification/notification-actions.js @@ -18,7 +18,7 @@ function removeNotificationsOlderThan(ms) { class NotificationActions extends Actions { addNotification(message, type) { - return addNotification(message, type); + return addNotification(message, type || 'default'); } removeNotification(id) { diff --git a/client/lib/violation/src/router.react.jsx b/client/lib/violation/src/router.react.jsx index 9be22366..a14c704b 100644 --- a/client/lib/violation/src/router.react.jsx +++ b/client/lib/violation/src/router.react.jsx @@ -6,11 +6,14 @@ import ViolationList from './violation-list/violation-list.jsx'; import ViolationDetail from './violation-detail/violation-detail.jsx'; import {requireAccounts} from 'common/src/util'; import moment from 'moment'; +import Icon from 'react-fa'; +import lzw from 'lz-string'; import _ from 'lodash'; const FULLSTOP_ACTIONS = FLUX.getActions('fullstop'), FULLSTOP_STORE = FLUX.getStore('fullstop'), USER_STORE = FLUX.getStore('user'), + NOTIFICATION_ACTIONS = FLUX.getActions('notification'), TEAM_ACTIONS = FLUX.getActions('team'), TEAM_STORE = FLUX.getStore('team'); @@ -43,6 +46,7 @@ class ViolationListHandler extends React.Component { flux={FLUX} connectToStores={['fullstop', 'team']}> Redirecting...; + } +} +ViolationShortUrlHandler.displayName = 'ViolationShortUrlHandler'; +ViolationShortUrlHandler.propTypes = { + params: React.PropTypes.object.isRequired +}; +ViolationShortUrlHandler.contextTypes = { + router: React.PropTypes.func.isRequired +}; + const ROUTES = + ; diff --git a/client/lib/violation/src/violation-list/violation-list.jsx b/client/lib/violation/src/violation-list/violation-list.jsx index 6e94fd9b..5a035c92 100644 --- a/client/lib/violation/src/violation-list/violation-list.jsx +++ b/client/lib/violation/src/violation-list/violation-list.jsx @@ -3,8 +3,10 @@ import Icon from 'react-fa'; import Infinite from 'react-infinite-scroll'; import Tabs from 'react-tabs'; import moment from 'moment'; +import lzw from 'lz-string'; import {merge} from 'common/src/util'; import Datepicker from 'common/src/datepicker.jsx'; +import Clipboard from 'react-copy-to-clipboard'; import AccountSelector from 'violation/src/account-selector.jsx'; import ViolationAnalysis from 'violation/src/violation-analysis/violation-analysis.jsx'; import Violation from 'violation/src/violation-detail/violation-detail.jsx'; @@ -60,7 +62,8 @@ class ViolationList extends React.Component { } this.state = { selectedAccounts, - dispatching: false + dispatching: false, + shortUrl: '' }; } @@ -131,6 +134,10 @@ class ViolationList extends React.Component { } } + _handleCopy() { + this.props.notificationActions.addNotification('Copied URL to clipboard', 'info'); + } + selectTab(current) { this.updateSearch({ activeTab: current @@ -145,6 +152,7 @@ class ViolationList extends React.Component { showingSince = searchParams.from.toDate(), violations = this.stores.fullstop.getViolations(activeAccountIds).map(v => v.id), pagingInfo = this.stores.fullstop.getPagingInfo(), + shareURL = '/violation/v/' + lzw.compressToEncodedURIComponent(JSON.stringify(this.context.router.getCurrentQuery())), violationCards = violations.map(v => Violations + +
+ Copy sharing URL +
+
- +
diff --git a/package.json b/package.json index db07693f..5f5a0dfe 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "oauth2-client-js": "0.0.14", "promise.prototype.finally": "1.0.1", "react": "0.13.3", + "react-copy-to-clipboard": "3.0.4", "react-d3-components": "0.5.2", "react-day-picker": "1.0.1", "react-fa": "3.3.1",