Return-Path: X-Original-To: archive-asf-public-internal@cust-asf2.ponee.io Delivered-To: archive-asf-public-internal@cust-asf2.ponee.io Received: from cust-asf.ponee.io (cust-asf.ponee.io [163.172.22.183]) by cust-asf2.ponee.io (Postfix) with ESMTP id 7CE98200C30 for ; Tue, 7 Mar 2017 07:43:21 +0100 (CET) Received: by cust-asf.ponee.io (Postfix) id 7B7DD160B74; Tue, 7 Mar 2017 06:43:21 +0000 (UTC) Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by cust-asf.ponee.io (Postfix) with SMTP id 7D48C160B68 for ; Tue, 7 Mar 2017 07:43:20 +0100 (CET) Received: (qmail 14924 invoked by uid 500); 7 Mar 2017 06:43:19 -0000 Mailing-List: contact commits-help@couchdb.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@couchdb.apache.org Delivered-To: mailing list commits@couchdb.apache.org Received: (qmail 14915 invoked by uid 99); 7 Mar 2017 06:43:19 -0000 Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23) by apache.org (qpsmtpd/0.29) with ESMTP; Tue, 07 Mar 2017 06:43:19 +0000 Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33) id 3FE66DFBD9; Tue, 7 Mar 2017 06:43:19 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit From: garren@apache.org To: commits@couchdb.apache.org Message-Id: <793d3a7cd66e4d72b0a6f157e8d8aaa0@git.apache.org> X-Mailer: ASF-Git Admin Mailer Subject: fauxton commit: updated refs/heads/master to baad3b8 Date: Tue, 7 Mar 2017 06:43:19 +0000 (UTC) archived-at: Tue, 07 Mar 2017 06:43:21 -0000 Repository: couchdb-fauxton Updated Branches: refs/heads/master b940979f7 -> baad3b897 Add the option to dynamically set/remove a notification banner across the top of fauxton. Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/baad3b89 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/baad3b89 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/baad3b89 Branch: refs/heads/master Commit: baad3b8979d3c3ca4ffa4daf5afdef8900a6192b Parents: b940979 Author: Ryan Millay Authored: Fri Mar 3 13:53:42 2017 -0500 Committer: Garren Smith Committed: Tue Mar 7 08:42:11 2017 +0200 ---------------------------------------------------------------------- app/addons/fauxton/appwrapper.js | 3 +- app/addons/fauxton/assets/less/components.less | 13 +++++ .../__tests__/permanentNotification.test.js | 50 +++++++++++++++++++ app/addons/fauxton/notifications/actiontypes.js | 4 +- .../notifications/notifications.react.jsx | 43 +++++++++++++++++ app/addons/fauxton/notifications/stores.js | 51 +++++++++++++++----- assets/less/templates.less | 2 +- 7 files changed, 150 insertions(+), 16 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/baad3b89/app/addons/fauxton/appwrapper.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/appwrapper.js b/app/addons/fauxton/appwrapper.js index 124c5e9..f377bbc 100644 --- a/app/addons/fauxton/appwrapper.js +++ b/app/addons/fauxton/appwrapper.js @@ -11,7 +11,7 @@ // the License. import React from 'react'; -import {NotificationController} from "./notifications/notifications.react"; +import {NotificationController, PermanentNotification} from "./notifications/notifications.react"; import {NavBar} from './navigation/components.react'; import NavbarActions from './navigation/actions'; @@ -52,6 +52,7 @@ class ContentWrapper extends React.Component { const App = ({router}) => { return (
+
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/baad3b89/app/addons/fauxton/assets/less/components.less ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/assets/less/components.less b/app/addons/fauxton/assets/less/components.less index c124c9b..4ac2f25 100644 --- a/app/addons/fauxton/assets/less/components.less +++ b/app/addons/fauxton/assets/less/components.less @@ -44,3 +44,16 @@ button.clipboard-copy-element { background: transparent; border: 0; } + +#perma-warning { + background-color: white; +} + +.perma-warning__content { + margin: 4px; + padding: 10px; + color: #B11925; + outline-style: solid; + outline-color: #B11925; + outline-width: 4px; +} http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/baad3b89/app/addons/fauxton/notifications/__tests__/permanentNotification.test.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/notifications/__tests__/permanentNotification.test.js b/app/addons/fauxton/notifications/__tests__/permanentNotification.test.js new file mode 100644 index 0000000..fb13425 --- /dev/null +++ b/app/addons/fauxton/notifications/__tests__/permanentNotification.test.js @@ -0,0 +1,50 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. +import { PermanentNotification } from "../notifications.react"; +import Stores from "../stores"; +import FauxtonAPI from "../../../../core/api"; +import ActionTypes from "../actiontypes"; +import { mount } from "enzyme"; +import React from "react"; +import ReactDOM from "react-dom"; + +const store = Stores.notificationStore; + +describe('PermanentNotification', () => { + beforeEach(() => { + store.reset(); + }); + + it('doesn\'t render content by default', () => { + const wrapper = mount(); + expect(wrapper.find('.perma-warning__content').length).toBe(0); + }); + + it('shows/hides content when the display flag is switched', () => { + const wrapper = mount(); + + FauxtonAPI.dispatch({ + type: ActionTypes.SHOW_PERMANENT_NOTIFICATION, + options: { + msg: "Hello World!" + } + }); + + expect(wrapper.find('.perma-warning__content').html()).toMatch(/Hello World!/); + + FauxtonAPI.dispatch({ + type: ActionTypes.HIDE_PERMANENT_NOTIFICATION + }); + + expect(wrapper.find('.perma-warning__content').length).toBe(0); + }); +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/baad3b89/app/addons/fauxton/notifications/actiontypes.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/notifications/actiontypes.js b/app/addons/fauxton/notifications/actiontypes.js index 5c1a468..cd6d275 100644 --- a/app/addons/fauxton/notifications/actiontypes.js +++ b/app/addons/fauxton/notifications/actiontypes.js @@ -19,5 +19,7 @@ export default { SELECT_NOTIFICATION_FILTER: 'SELECT_NOTIFICATION_FILTER', START_HIDING_NOTIFICATION: 'START_HIDING_NOTIFICATION', HIDE_NOTIFICATION: 'HIDE_NOTIFICATION', - HIDE_ALL_NOTIFICATIONS: 'HIDE_ALL_NOTIFICATIONS' + HIDE_ALL_NOTIFICATIONS: 'HIDE_ALL_NOTIFICATIONS', + SHOW_PERMANENT_NOTIFICATION: 'SHOW_PERMANENT_NOTIFICATION', + HIDE_PERMANENT_NOTIFICATION: 'HIDE_PERMANENT_NOTIFICATION' }; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/baad3b89/app/addons/fauxton/notifications/notifications.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/notifications/notifications.react.jsx b/app/addons/fauxton/notifications/notifications.react.jsx index adb20c2..c73cc39 100644 --- a/app/addons/fauxton/notifications/notifications.react.jsx +++ b/app/addons/fauxton/notifications/notifications.react.jsx @@ -435,6 +435,49 @@ var NotificationPanelRow = React.createClass({ } }); +export class PermanentNotification extends React.Component { + constructor (props) { + super(props); + this.state = this.getStoreState(); + } + + getStoreState () { + return { + display: store.isPermanentNotificationVisible(), + msg: store.getPermanentNotificationMessage() + }; + } + + onChange () { + this.setState(this.getStoreState); + } + + componentDidMount () { + store.on('change', this.onChange, this); + } + + // many messages contain HTML, hence the need for dangerouslySetInnerHTML + getMsg () { + return {__html: this.state.msg}; + } + + getContent () { + if (!this.state.display || !this.state.msg) { + return; + } + return ( +

+ ); + } + + render () { + return ( +
+ {this.getContent()} +
+ ); + } +}; export default { NotificationController, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/baad3b89/app/addons/fauxton/notifications/stores.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/notifications/stores.js b/app/addons/fauxton/notifications/stores.js index 5c634ab..e320f13 100644 --- a/app/addons/fauxton/notifications/stores.js +++ b/app/addons/fauxton/notifications/stores.js @@ -33,21 +33,27 @@ var validNotificationTypes = ['success', 'error', 'info']; */ Stores.NotificationStore = FauxtonAPI.Store.extend({ - initialize: function () { + initialize () { this.reset(); }, - reset: function () { + reset () { this._notifications = []; this._notificationCenterVisible = false; this._selectedNotificationFilter = 'all'; + this._permanentNotificationVisible = false; + this._permanentNotificationMessage = ''; }, - isNotificationCenterVisible: function () { + isNotificationCenterVisible () { return this._notificationCenterVisible; }, - addNotification: function (info) { + isPermanentNotificationVisible () { + return this._permanentNotificationVisible; + }, + + addNotification (info) { if (_.isEmpty(info.type) || !_.includes(validNotificationTypes, info.type)) { console.warn('Invalid message type: ', info); return; @@ -72,25 +78,33 @@ Stores.NotificationStore = FauxtonAPI.Store.extend({ this._notifications.unshift(info); }, - getNotifications: function () { + getNotifications () { return this._notifications; }, - clearNotification: function (notificationId) { + getPermanentNotificationMessage () { + return this._permanentNotificationMessage; + }, + + setPermanentNotificationMessage (content) { + this._permanentNotificationMessage = content; + }, + + clearNotification (notificationId) { this._notifications = _.without(this._notifications, _.findWhere(this._notifications, { notificationId: notificationId })); }, - clearNotifications: function () { + clearNotifications () { this._notifications = []; }, - hideNotification: function (notificationId) { + hideNotification (notificationId) { var notification = _.findWhere(this._notifications, { notificationId: notificationId }); notification.visible = false; notification.isHiding = false; }, - hideAllNotifications: function () { + hideAllNotifications () { this._notifications.forEach(function (notification) { if (notification.visible) { notification.isHiding = true; @@ -98,16 +112,16 @@ Stores.NotificationStore = FauxtonAPI.Store.extend({ }); }, - startHidingNotification: function (notificationId) { + startHidingNotification (notificationId) { var notification = _.findWhere(this._notifications, { notificationId: notificationId }); notification.isHiding = true; }, - getNotificationFilter: function () { + getNotificationFilter () { return this._selectedNotificationFilter; }, - setNotificationFilter: function (filter) { + setNotificationFilter (filter) { if ((_.isEmpty(filter) || !_.includes(validNotificationTypes, filter)) && filter !== 'all') { console.warn('Invalid notification filter: ', filter); return; @@ -115,7 +129,7 @@ Stores.NotificationStore = FauxtonAPI.Store.extend({ this._selectedNotificationFilter = filter; }, - dispatch: function (action) { + dispatch (action) { switch (action.type) { case ActionTypes.ADD_NOTIFICATION: this.addNotification(action.options.info); @@ -161,6 +175,17 @@ Stores.NotificationStore = FauxtonAPI.Store.extend({ this.triggerChange(); break; + case ActionTypes.SHOW_PERMANENT_NOTIFICATION: + this._permanentNotificationVisible = true; + this.setPermanentNotificationMessage(action.options.msg); + this.triggerChange(); + break; + + case ActionTypes.HIDE_PERMANENT_NOTIFICATION: + this._permanentNotificationVisible = false; + this.triggerChange(); + break; + default: return; // do nothing http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/baad3b89/assets/less/templates.less ---------------------------------------------------------------------- diff --git a/assets/less/templates.less b/assets/less/templates.less index a56434d..190343a 100644 --- a/assets/less/templates.less +++ b/assets/less/templates.less @@ -84,7 +84,7 @@ } .burger { padding: 22px 0 22px 18px; - position: fixed; + position: absolute; z-index: 100; top: 0; background-color: @primaryNav;