You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2017/03/07 06:43:19 UTC
fauxton commit: updated refs/heads/master to baad3b8
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 <ry...@gmail.com>
Authored: Fri Mar 3 13:53:42 2017 -0500
Committer: Garren Smith <ga...@gmail.com>
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 (
<div>
+ <PermanentNotification />
<div id="notifications">
<NotificationController />
</div>
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(<PermanentNotification />);
+ expect(wrapper.find('.perma-warning__content').length).toBe(0);
+ });
+
+ it('shows/hides content when the display flag is switched', () => {
+ const wrapper = mount(<PermanentNotification />);
+
+ 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 (
+ <p className="perma-warning__content" dangerouslySetInnerHTML={this.getMsg()}></p>
+ );
+ }
+
+ render () {
+ return (
+ <div id="perma-warning">
+ {this.getContent()}
+ </div>
+ );
+ }
+};
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;