couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From robertkowal...@apache.org
Subject fauxton commit: updated refs/heads/master to 20bb445
Date Fri, 16 Jan 2015 12:36:45 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master bbf335c19 -> 20bb445dc


New Style for notifications

 - use global notifications whenever we submit something

 - always use global notifcations for things we submit:
   every time we submit a form using a submit button, we want
   to use the global notifications. for validations during
   typing we'll have to use red borders around the fields
   that contain errors.

 - remove superfluous fade option, we always want to have an
   effect (slidein)

 - show different icons depending on the type of the
   notification

Based on the work of Jenn Schiffer <jenn@pancaketheorem.com>
(@jennschiffer), Sue Lockwood <deathbear@apache.org>
(@deathbearbrown) and Sean Barclay <fudd1011@hotmail.com>
(@seanbarclay)


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/20bb445d
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/20bb445d
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/20bb445d

Branch: refs/heads/master
Commit: 20bb445dc82bdc268f018f32256fb337eebb92a5
Parents: bbf335c
Author: Robert Kowalski <robertkowalski@apache.org>
Authored: Thu Oct 23 18:37:11 2014 +0200
Committer: Robert Kowalski <robertkowalski@apache.org>
Committed: Fri Jan 16 13:29:05 2015 +0100

----------------------------------------------------------------------
 app/addons/config/views.js                      |  3 +-
 .../templates/query_options_main_fields.html    |  2 -
 app/addons/documents/templates/view_editor.html |  2 -
 app/addons/documents/views-index.js             | 21 +++------
 app/addons/documents/views-queryoptions.js      |  4 +-
 app/addons/fauxton/base.js                      | 47 +++++++++++++++-----
 app/addons/fauxton/templates/notification.html  |  7 +--
 app/addons/verifyinstall/templates/main.html    |  1 -
 .../tests/nightwatch/testVerification.js        |  4 +-
 app/addons/verifyinstall/views.js               |  6 +--
 assets/less/fauxton.less                        | 33 ++++++++++++++
 assets/less/mixins.less                         |  4 +-
 assets/less/variables.less                      | 10 +++++
 .../custom-commands/closeNotification.js        |  7 +--
 14 files changed, 100 insertions(+), 51 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/app/addons/config/views.js
----------------------------------------------------------------------
diff --git a/app/addons/config/views.js b/app/addons/config/views.js
index 6c02a78..034205a 100644
--- a/app/addons/config/views.js
+++ b/app/addons/config/views.js
@@ -239,8 +239,7 @@ function(app, FauxtonAPI, Config, Components) {
       FauxtonAPI.addNotification({
         msg: msg,
         type: 'error',
-        clear: true,
-        selector: '.js-form-error-config'
+        clear: true
       });
     }
   });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/app/addons/documents/templates/query_options_main_fields.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/query_options_main_fields.html b/app/addons/documents/templates/query_options_main_fields.html
index c2da0e9..89c87cd 100644
--- a/app/addons/documents/templates/query_options_main_fields.html
+++ b/app/addons/documents/templates/query_options_main_fields.html
@@ -19,8 +19,6 @@ the License.
   </a>
 </span>
 
-<div class="errors-container"></div>
-
 <div class="controls-group qo-main-fields-row">
   <div class="row-fluid fieldsets">
     <div class="checkbox inline">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/app/addons/documents/templates/view_editor.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/view_editor.html b/app/addons/documents/templates/view_editor.html
index 8c8a4ee..731d2cc 100644
--- a/app/addons/documents/templates/view_editor.html
+++ b/app/addons/documents/templates/view_editor.html
@@ -19,12 +19,10 @@ the License.
     </li>
   </ul>
 </div>
-  <div class="all-docs-list errors-container"></div>
   <div class="tab-content">
 	 <div id="query-options-wrapper"></div>
     <div class="tab-pane active" id="index">
       <div id="define-view" class="ddoc-alert well">
-        <div class="errors-container"></div>
         <form class="form-horizontal view-query-save">
 
           <div class="control-group design-doc-group">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/app/addons/documents/views-index.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-index.js b/app/addons/documents/views-index.js
index 7a3d51e..0d319e1 100644
--- a/app/addons/documents/views-index.js
+++ b/app/addons/documents/views-index.js
@@ -155,7 +155,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, QueryOption
 
         notification = FauxtonAPI.addNotification({
           msg: "Saving document.",
-          selector: "#define-view .errors-container",
           clear: true
         });
 
@@ -169,7 +168,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, QueryOption
           FauxtonAPI.addNotification({
             msg: "View has been saved.",
             type: "success",
-            selector: "#define-view .errors-container",
             clear: true
           });
 
@@ -209,7 +207,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, QueryOption
         notification = FauxtonAPI.addNotification({
           msg: errormessage,
           type: "error",
-          selector: "#define-view .errors-container",
           clear: true
         });
       }
@@ -225,21 +222,15 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
QueryOption
 
        if (_.any(errorParams)) {
          _.map(errorParams, function(param) {
-
-           // TODO: Where to add this error?
-           // bootstrap wants the error on a control-group div, but we're not using that
-           //$('form.view-query-update input[name='+param+'], form.view-query-update select[name='+param+']').addClass('error');
-           return FauxtonAPI.addNotification({
-             msg: "JSON Parse Error on field: " + param.name,
-             type: "error",
-             selector: ".query-options .errors-container",
-             clear: true
-           });
+            return FauxtonAPI.addNotification({
+              msg: 'JSON Parse Error on field: ' + param.name,
+              type: 'error',
+              clear: true
+            });
          });
          FauxtonAPI.addNotification({
            msg: "Make sure that strings are properly quoted and any other values are valid
JSON structures",
            type: "warning",
-           selector: ".query-options .errors-container",
            clear: true
          });
 
@@ -271,8 +262,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, QueryOption
       FauxtonAPI.addNotification({
         msg: "<strong>Warning!</strong> Preview executes the Map/Reduce functions
in your browser, and may behave differently from CouchDB.",
         type: "warning",
-        selector: ".query-options .errors-container",
-        fade: true,
         escape: false // beware of possible XSS when the message changes
       });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/app/addons/documents/views-queryoptions.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-queryoptions.js b/app/addons/documents/views-queryoptions.js
index 98a638f..ae4e467 100644
--- a/app/addons/documents/views-queryoptions.js
+++ b/app/addons/documents/views-queryoptions.js
@@ -400,8 +400,7 @@ define([
           FauxtonAPI.addNotification({
             type: "error",
             msg: errorMsg,
-            clear:  false,
-            selector: ".query-options .errors-container"
+            clear:  false
           });
           return false;
         }
@@ -471,7 +470,6 @@ define([
           FauxtonAPI.addNotification({
             msg: "Please only enter numbers only for the Skip field.",
             type: "error",
-            selector: ".query-options .errors-container",
             clear:  true
           });
           allValid = false;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/app/addons/fauxton/base.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/base.js b/app/addons/fauxton/base.js
index 0852b76..44ad8ea 100644
--- a/app/addons/fauxton/base.js
+++ b/app/addons/fauxton/base.js
@@ -245,7 +245,11 @@ function(app, FauxtonAPI, Components, ZeroClipboard) {
   });
 
   Fauxton.Notification = FauxtonAPI.View.extend({
-    fadeTimer: 5000,
+    animationTimer: 5000,
+
+    events: {
+      'click .js-dismiss': 'removeWithAnimation'
+    },
 
     initialize: function(options) {
       this.htmlToRender = options.msg;
@@ -256,26 +260,46 @@ function(app, FauxtonAPI, Components, ZeroClipboard) {
       this.type = options.type || "info";
       this.selector = options.selector;
       this.fade = options.fade === undefined ? true : options.fade;
-      this.clear = options.clear;
       this.data = options.data || "";
       this.template = options.template || "addons/fauxton/templates/notification";
     },
 
-    serialize: function() {
+    serialize: function () {
+      var icon;
+
+      switch (this.type) {
+        case 'error':
+          icon = 'fonticon-attention-circled';
+          break;
+        case 'info':
+          icon = 'fonticon-info-circled';
+          break;
+        case 'success':
+          icon = 'fonticon-ok-circled';
+          break;
+        default:
+          icon = 'fonticon-info-circled';
+          break;
+      }
+
       return {
+        icon: icon,
         data: this.data,
         htmlToRender: this.htmlToRender,
         type: this.type
       };
     },
 
-    delayedFade: function() {
-      var that = this;
-      if (this.fade) {
-        setTimeout(function() {
-          that.$el.fadeOut();
-        }, this.fadeTimer);
-      }
+    removeWithAnimation: function () {
+      this.$el.velocity('reverse', FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED, function
() {
+        this.$el.remove();
+      }.bind(this));
+    },
+
+    delayedRemoval: function () {
+      setTimeout(function () {
+        this.removeWithAnimation();
+      }.bind(this), this.animationTimer);
     },
 
     renderNotification: function(selector) {
@@ -284,7 +308,8 @@ function(app, FauxtonAPI, Components, ZeroClipboard) {
         $(selector).html('');
       }
       this.render().$el.appendTo(selector);
-      this.delayedFade();
+      this.$el.velocity('transition.slideDownIn', FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED);
+      this.delayedRemoval();
       return this;
     }
   });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/app/addons/fauxton/templates/notification.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/notification.html b/app/addons/fauxton/templates/notification.html
index de0337c..16ac43b 100644
--- a/app/addons/fauxton/templates/notification.html
+++ b/app/addons/fauxton/templates/notification.html
@@ -1,4 +1,4 @@
-<!--
+<%/*
 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
@@ -10,9 +10,10 @@ 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.
--->
+*/%>
 
 <div class="alert alert-<%- type %>">
-  <button type="button" class="close" data-dismiss="alert">×</button>
+  <a data-bypass href="#" class="js-dismiss"><i class="pull-right fonticon-cancel"></i></a>
+  <i class="notification-icon <%- icon %>"></i>
   <%= htmlToRender %><!-- every caller has to escape on it's own -->
 </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/app/addons/verifyinstall/templates/main.html
----------------------------------------------------------------------
diff --git a/app/addons/verifyinstall/templates/main.html b/app/addons/verifyinstall/templates/main.html
index 1491488..52eb14e 100644
--- a/app/addons/verifyinstall/templates/main.html
+++ b/app/addons/verifyinstall/templates/main.html
@@ -12,7 +12,6 @@ License for the specific language governing permissions and limitations
under
 the License.
 */%>
 <button id="start" class="btn btn-large btn-success">Verify Installation</button>
-<div id="error"></div>
 
 <table id="test-score" class="table table-striped table-bordered">
   <thead>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/app/addons/verifyinstall/tests/nightwatch/testVerification.js
----------------------------------------------------------------------
diff --git a/app/addons/verifyinstall/tests/nightwatch/testVerification.js b/app/addons/verifyinstall/tests/nightwatch/testVerification.js
index 1c02f5b..0aa246f 100644
--- a/app/addons/verifyinstall/tests/nightwatch/testVerification.js
+++ b/app/addons/verifyinstall/tests/nightwatch/testVerification.js
@@ -22,8 +22,8 @@ module.exports = {
       .click('#start')
       .waitForElementVisible('.alert-success', waitTime, false)
       .getText('html', function (result) {
-        var testPassed = result.value.indexOf('Success! Your CouchDB installation is working.
Time to Relax.');
-        this.verify.ok(testPassed > 0, 'Checking the verification set passed.');
+        var testPassed = result.value.indexOf('Success! Your CouchDB installation is working.
Time to Relax.') !== -1;
+        this.verify.ok(testPassed, 'Checking the verification set passed.');
       })
       .end();
   }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/app/addons/verifyinstall/views.js
----------------------------------------------------------------------
diff --git a/app/addons/verifyinstall/views.js b/app/addons/verifyinstall/views.js
index 9982708..1ecacbd 100644
--- a/app/addons/verifyinstall/views.js
+++ b/app/addons/verifyinstall/views.js
@@ -36,16 +36,14 @@ function(app, FauxtonAPI, VerifyInstall) {
       this.$('#' + id).html('&#x2717;');
       FauxtonAPI.addNotification({
         msg: 'Error: ' + msg,
-        type: 'error',
-        selector: '#error'
+        type: 'error'
       });
     },
 
     complete: function () {
       FauxtonAPI.addNotification({
         msg: 'Success! Your CouchDB installation is working. Time to Relax.',
-        type: 'success',
-        selector: '#error'
+        type: 'success'
       });
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 6b27976..3f39df4 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -162,6 +162,39 @@ table.databases {
   font-size: 16px;
 }
 
+// customize the twitter bootstrap alert
+.alert {
+  padding-left: 20px;
+  padding-top: 20px;
+  min-height: @collapsedNavWidth;
+  margin-bottom: auto;
+  text-shadow: none;
+  .border-radius(0);
+  border-bottom: 1px solid #3a2c2b; 
+  box-shadow: 0px 4px 0 0 rgba(0, 0, 0, 0.4);
+  a, a:hover {
+    color: #cecece;
+    text-decoration: underline;
+  }
+  a.js-dismiss {
+    color: rgba(255, 255, 255, 1);
+  }
+  a.js-dismiss :hover {
+    color: rgba(255, 255, 255, 0.4);
+  }
+}
+
+.notification-icon {
+  padding-right: 8px;
+}
+
+.tray .alert {
+  padding: 15px 14px 8px 14px;
+  .bottom-shadow-border(0px);
+  border-bottom: none;
+  margin-bottom: 10px;
+}
+
 #dashboard-upper-content{
   .tab-content {
     padding-top: 70px;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/assets/less/mixins.less
----------------------------------------------------------------------
diff --git a/assets/less/mixins.less b/assets/less/mixins.less
index e41a252..c49bca5 100644
--- a/assets/less/mixins.less
+++ b/assets/less/mixins.less
@@ -20,9 +20,9 @@
         transition-timing-function: cubic-bezier(@a, @b, @c, @d); /* custom */
 }
 
-.bottom-shadow-border() {
+.bottom-shadow-border(@height: 6px) {
   border-bottom: 1px solid #999;
-  .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
+  .box-shadow(0px @height 0 0 rgba(0, 0, 0, 0.1));
 }
 
 .left-shadow-border() {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/assets/less/variables.less
----------------------------------------------------------------------
diff --git a/assets/less/variables.less b/assets/less/variables.less
index a75c513..db533b8 100644
--- a/assets/less/variables.less
+++ b/assets/less/variables.less
@@ -106,3 +106,13 @@
 
 /* breakpoints */
 @collapsedNavWidth: 64px;
+
+/* notifications */
+@errorText: #ff0c35;
+@errorBackground: #222;
+
+@successText: #CBDFBD;
+@successBackground: #448c11;
+
+@infoText: #fff;
+@infoBackground: #329898;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/20bb445d/test/nightwatch_tests/custom-commands/closeNotification.js
----------------------------------------------------------------------
diff --git a/test/nightwatch_tests/custom-commands/closeNotification.js b/test/nightwatch_tests/custom-commands/closeNotification.js
index 77f8c58..7025897 100644
--- a/test/nightwatch_tests/custom-commands/closeNotification.js
+++ b/test/nightwatch_tests/custom-commands/closeNotification.js
@@ -1,10 +1,11 @@
 exports.command = function () {
   var waitTime = 8000,
-      client = this;
+      client = this,
+      dismissSelector = '#global-notifications .js-dismiss';
 
   client
-    .waitForElementPresent('#global-notifications button.close', waitTime, false)
-    .click('#global-notifications button.close');
+    .waitForElementPresent(dismissSelector, waitTime, false)
+    .click(dismissSelector);
 
   return this;
 };


Mime
View raw message