couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From michel...@apache.org
Subject fauxton commit: updated refs/heads/master to f4096ce
Date Thu, 23 Jul 2015 18:37:10 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master 5de1fe668 -> f4096ce16


Change 'No Active Tasks' to show empty table

-and some css changes


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

Branch: refs/heads/master
Commit: f4096ce160b4d8f8b94afa8d7490ecbf1aa382cd
Parents: 5de1fe6
Author: michellephung@gmail.com <michellephung@gmail.com>
Authored: Wed Jul 1 12:29:09 2015 -0400
Committer: michellephung@gmail.com <michellephung@gmail.com>
Committed: Thu Jul 23 14:03:16 2015 -0400

----------------------------------------------------------------------
 .../activetasks/assets/less/activetasks.less    | 383 ++++++++++---------
 app/addons/activetasks/components.react.jsx     |  39 +-
 app/addons/activetasks/stores.js                |   4 +-
 .../tests/activetasks.componentsSpec.react.jsx  |  10 +-
 .../activetasks/tests/activetasks.storesSpec.js |   4 +-
 assets/less/mixins.less                         |   9 +
 6 files changed, 236 insertions(+), 213 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f4096ce1/app/addons/activetasks/assets/less/activetasks.less
----------------------------------------------------------------------
diff --git a/app/addons/activetasks/assets/less/activetasks.less b/app/addons/activetasks/assets/less/activetasks.less
index c058427..bcbbd73 100644
--- a/app/addons/activetasks/assets/less/activetasks.less
+++ b/app/addons/activetasks/assets/less/activetasks.less
@@ -13,150 +13,247 @@
 @import "../../../../../assets/less/bootstrap/variables.less";
 @import "../../../../../assets/less/variables.less";
 @import "../../../../../assets/less/bootstrap/mixins.less";
+@import "../../../../../assets/less/mixins.less";
 
-.task-tabs li,
-.active-tasks th {
-  cursor: pointer;
-}
+#active-tasks-page {
+  overflow: auto;
+  
+  .inner {
+    overflow: auto;
+    height: 100%;
+  }
 
-.task-search-database {
-  margin: 20px;
-}
+  .task-tabs li,
+  .active-tasks td.tableheader {
+    cursor: pointer;
+    padding-bottom: 15px;
+    
+    &.type {
+      width: 10%;
+    }
 
-.active-tasks th {
+    &.database {
+      width: 30%;
+    }
 
-  &.type {
-    width: 10%;
-  }
+    &.started-on {
+      width: 13%;
+    }
 
-  &.database {
-    width: 30%;
-  }
+    &.updated-on {
+      width: 13%;
+    }
 
-  &.started_on {
-    width: 13%;
-  }
+    &.pid {
+      width: 10%;
+    }
 
-  &.updated_on {
-    width: 13%;
+    &.progress {
+      width: 23%;
+    }
   }
 
-  &.pid {
-    width: 10%;
+  #active-tasks-table {
+    min-width: 725px;
+    td.header-field {
+      padding: 0px;
+    }
+
+    p.multiline-active-tasks-message {
+      margin: 0;
+      line-height: 1.3;
+      margin-bottom: 3px;
+
+      &.time:nth-child(2) {
+        color: #888;
+      }
+
+      &.to-from-database{
+        &:first-child {
+          border-bottom: 1px solid #ddd;
+        }
+        padding-bottom: 15px;
+      }
+    }   
   }
 
-  &.progress {
-    width: 23%;
+  .task-search-database {
+    margin: 20px;
   }
-}
 
-.nav.polling-interval {
-  li.nav-header {
-    padding: 9px 0px 0px 9px;
+  .active-tasks.dashboard-upper-menu {
+    left: 220px;
+
+    .closeMenu & {
+      left: 64px;
+    }
   }
-  li {
-    padding: 0px 15px 3px 9px;
-    margin-left: 0px;
+
+  #active-tasks-filter-tabs {
+    height: 100px;
+    background-color: #CBCBCB;
+    padding-left: 20px;
+    overflow: hidden;
+    width: 100%;
+    min-width: 770px;
 
     input {
-      width: 100%;
+      display:none;
     }
 
-    label span {
-      font-weight: bold;
+    li {
+      background-color: #eee;
+      margin-top: 65px;
+      margin-left: 3px;
+      
+      &.active-tasks-checked {
+        background-color: #af2d24;
+
+        label {
+          color: #fff;
+        }
+      };
+
+      &:hover {
+        color: #af2d24;
+      };
+
+      label {
+        height: 35px;
+        width: 100%;
+        line-height: 35px;
+        text-align: center;
+        .noselect()
+      } 
+    }
+
+    #active-tasks-search-box {
+      display: inline;
+      font-size: 14px;
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      height: 36px;
+      background-color: #eee;
+      width: 200px;
+      margin: 0px;
+
+      &:focus {
+        background-color: #fff;
+        outline-color: #fff;
+      };
     }
   }
-}
 
-.no-matching-database-on-search {
-  color: #af2d24;
-}
+  .dashboard-lower-menu {
+    padding-top: 90px;
+    padding-left: 20px;
+  }
 
-p.multiline-active-tasks-message {
-  margin: 0;
+  .header-field {
+    background-color: #ccc;
 
-  &.time:nth-child(2) {
-    color: #888;
+    
+    &.radio {
+      display: none;
+    }
+    
+    &.label-text {
+      display: block;
+      font-weight: bold;
+      padding:10px;
+      margin: 0px;
+      height: 50px;
+      .noselect()
+    }
+
+    .table td& {
+      padding: 0px;
+      margin: 0px;
+    }
+
+    .active-tasks-header {
+      background-color: #ccc;
+    }
+
+    .icon-caret-up, .icon-caret-down {
+      color: #af2d24;
+    }
   }
-}
 
-.active-tasks.dashboard-upper-menu {
-  left: 220px;
+  .active-tasks-loading-lines {
+    padding-top: 15px;
+    float: left;
+    margin-left: -40px;
 
-  .closeMenu & {
-    left: 64px;
+    #line1, #line2, #line3, #line4 {
+      background-color: #bbb;
+    }
   }
-}
 
-#active-tasks-filter-tabs {
+  .view-source-sequence-btn { // "View" Button
+    background-color: #999;
+    display: inline;
+    border-radius: 3px; 
+    padding: 2px;
+    margin: 3px;
+    color: #fff !important; 
+    white-space: nowrap;
+  }
 
-  height: 100px;
-  background-color: #CBCBCB;
-  padding-left: 20px;
-  min-width: 550px;
-  overflow: scroll;
+  .view-source-sequence-tray {
+    padding: 16px 20px 28px;
 
+    position: relative;
+    min-width: 360px;
+    top: 15px;
+    float: right;
 
-  input {
-    display:none;
-  }
+    &:before {
+      right: 20px;
+    }
+    input.input-xxlarge {
+      margin-bottom: 0px;
+      width: 250px;
+      .border-radius(5px 0 0 5px);
+    }
 
-  li {
-    background-color: #eee;
-    margin-top: 65px;
-    margin-left: 3px;
-    &.active-tasks-checked {
+    a.btn {
+      color: white;
       background-color: #af2d24;
+      margin-left: 0;
+      line-height: 1.5em;
+      border: 0px;
+      padding: 10px 10px 9px;
+      font-size: 14px;
+      .border-radius(0 5px 5px 0);
 
-      label {
-        color: #fff;
-      }
-    };
-
-    &:hover {
-      border: 1px solid #af2d24;
-      color: #af2d24;
-    };
 
-    label {
-      height: 35px;
-      width: 100%;
-      line-height: 35px;
-      text-align: center;
-    } 
+      &:hover, &.copy-button.zeroclipboard-is-hover {
+        background-color: #cbcbcb;
+        color: white;
+      }
+    }
   }
+}
 
-  #active-tasks-search-box {
-    display: inline;
-    font-size: 14px;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    height: 36px;
-    background-color: #eee;
-    width: 200px;
-    margin: 0px;
-
-    &:focus {
-      background-color: #fff;
-      outline-color: #fff;
-    };
+.nav.polling-interval {
+  li.nav-header {
+    padding: 9px 0px 0px 9px;
   }
-}
+  li {
+    padding: 0px 15px 3px 9px;
+    margin-left: 0px;
 
-.dashboard-lower-menu {
-  padding-top: 90px;
-  padding-left: 20px;
-}
+    input {
+      width: 100%;
+    }
 
-@media (max-width: 940px) {
-  .filter-checkboxes li {
-    display: inline-block;
-    text-align: left;
-    width: 175px;
+    label span {
+      font-weight: bold;
+    }
   }
 }
 
 .polling-interval-widget {
-
   width: 250px;
   margin-right: 20px;
   margin-top: 10px;
@@ -174,91 +271,7 @@ p.multiline-active-tasks-message {
     cursor: default;
   }
   
-  #pollingRange {
+  #polling-range {
     width: 250px;
   }
 }
-
-.header-field {
-  &.radio {
-    display: none;
-  }
-  
-  &.label-text {
-    display: block;
-    font-weight: bold;
-    padding:10px;
-    margin: 0px;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-
-  .table th& {
-    padding: 0px;
-    margin: 0px;
-  }
-
-  .active-tasks-header {
-    background-color: #ccc;
-  }
-
-  .icon-caret-up, .icon-caret-down {
-    color: #af2d24;
-  }
-}
-
-.active-tasks-loading-lines {
-  padding-top: 15px;
-  float: left;
-  margin-left: -40px;
-
-  #line1, #line2, #line3, #line4 {
-    background-color: #bbb;
-  }
-}
-
-.view-source-sequence-btn { // "View" Button
-  background-color: #666;
-  display: inline;
-  border-radius: 3px; 
-  padding: 5px;
-  color: #fff !important; 
-}
-
-.view_source_sequence_tray {
-  padding: 16px 20px 28px;
-
-  position: relative;
-  min-width: 360px;
-  top: 15px;
-  float: right;
-
-  &:before {
-    right: 20px;
-  }
-  input.input-xxlarge {
-    margin-bottom: 0px;
-    width: 250px;
-    .border-radius(5px 0 0 5px);
-  }
-
-  a.btn {
-    color: white;
-    background-color: #af2d24;
-    margin-left: 0;
-    line-height: 1.5em;
-    border: 0px;
-    padding: 10px 10px 9px;
-    font-size: 14px;
-    .border-radius(0 5px 5px 0);
-
-    &:hover, &.copy-button.zeroclipboard-is-hover {
-      background-color: #cbcbcb;
-      color: white;
-    }
-  }
-}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f4096ce1/app/addons/activetasks/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/activetasks/components.react.jsx b/app/addons/activetasks/components.react.jsx
index 5f146ab..607881d 100644
--- a/app/addons/activetasks/components.react.jsx
+++ b/app/addons/activetasks/components.react.jsx
@@ -80,11 +80,8 @@ define([
       var setSearchTerm = this.setNewSearchTerm;
       var onTableHeaderClick = this.tableHeaderOnClick;
 
-      if (_.isUndefined(collection) || collection.length === 0) {
-        return (<div className="active-tasks"><tr><td><p>  No active
tasks. </p></td></tr></div>);
-      }
       return (
-        <div className="scrollable">
+        <div id="active-tasks-page" className="scrollable">
           <div className="inner">
             <ActiveTasksFilterTabs
               searchTerm={searchTerm}
@@ -191,7 +188,7 @@ define([
 
       return (
         <div id="dashboard-lower-content">
-          <table className="table table-bordered table-striped active-tasks">
+          <table id="active-tasks-table" className="table table-bordered table-striped
active-tasks">
             <ActiveTasksTableHeader
               onTableHeaderClick={onTableHeaderClick}
               sortByHeader={sortByHeader}
@@ -212,8 +209,8 @@ define([
         headerNames : [
           ['type', 'Type'],
           ['database', 'Database'],
-          ['started_on', 'Started On'],
-          ['updated_on', 'Updated On'],
+          ['started-on', 'Started On'],
+          ['updated-on', 'Updated On'],
           ['pid', 'PID'],
           ['progress', 'Status']
         ]
@@ -273,13 +270,13 @@ define([
           value={this.props.headerName}
           className="header-field radio"
           onChange={this.onTableHeaderClick}>
-          <th className={th_class} value={this.props.headerName}>
+          <td className={th_class + " tableheader"} value={this.props.headerName}>
             <label
-              className="header-field label-text active-tasks-header"
+              className="header-field label-text active-tasks-header noselect"
               htmlFor={this.props.headerName}>
               {this.props.displayName} {arrow}
             </label>
-          </th>
+          </td>
         </input>
       );
     }
@@ -316,17 +313,27 @@ define([
     },
 
     noActiveTasks: function () {
+      var type = this.props.selectedRadio;
+      if (type === "All Tasks") {
+        type = "";
+      }
+
       return (
         <tr className="no-matching-database-on-search">
-          <td  colSpan="6">No active {this.props.selectedRadio} tasks.</td>
+          <td  colSpan="6">No active {type} tasks.</td>
         </tr>
       );
     },
 
     noActiveTasksMatchFilter: function () {
+      var type = this.props.selectedRadio;
+      if (type === "All Tasks") {
+        type = "";
+      }
+
       return (
         <tr className="no-matching-database-on-search">
-          <td colSpan="6">No active {this.props.selectedRadio} tasks match with filter:
"{this.props.searchTerm}".</td>
+          <td colSpan="6">No active {type} tasks match with filter: "{this.props.searchTerm}"</td>
         </tr>
       );
     },
@@ -366,7 +373,7 @@ define([
 
     render: function () {
       var rowData =  this.getInfo(this.props.item);
-      var objectFieldMsg = this.multilineMessage(rowData.objectField);
+      var objectFieldMsg = this.multilineMessage(rowData.objectField, 'to-from-database');
       var startedOnMsg = this.multilineMessage(rowData.started_on, 'time');
       var updatedOnMsg = this.multilineMessage(rowData.updated_on, 'time');
       var progressMsg = this.multilineMessage(rowData.progress);
@@ -421,7 +428,7 @@ define([
               data-bypass="true">
               View
             </a>
-            <ComponentsReact.Tray ref="view_source_sequence_btn" className="view_source_sequence_tray">
+            <ComponentsReact.Tray ref="view_source_sequence_btn" className="view-source-sequence-tray">
               <span className="add-on">Source Sequence</span>
               {sequences}
             </ComponentsReact.Tray>
@@ -471,13 +478,13 @@ define([
       return (
         <ul className="polling-interval-widget">
           <li className="polling-interval-name">Polling interval
-            <label className="polling-interval-time-label" htmlFor="pollingRange">
+            <label className="polling-interval-time-label" htmlFor="polling-range">
               <span>{pollingInterval}</span> second{s}
             </label>
           </li>
           <li>
             <input
-              id="pollingRange"
+              id="polling-range"
               type="range"
               min="1"
               max="30"

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f4096ce1/app/addons/activetasks/stores.js
----------------------------------------------------------------------
diff --git a/app/addons/activetasks/stores.js b/app/addons/activetasks/stores.js
index baf5607..0d3fc23 100644
--- a/app/addons/activetasks/stores.js
+++ b/app/addons/activetasks/stores.js
@@ -19,10 +19,10 @@ define([
   var ActiveTasksStore = FauxtonAPI.Store.extend({
 
     initAfterFetching: function (collectionTable, backboneCollection) {
-      this._prevSortbyHeader = 'started_on';
+      this._prevSortbyHeader = 'started-on';
       this._headerIsAscending = true;
       this._selectedRadio = 'All Tasks';
-      this._sortByHeader = 'started_on';
+      this._sortByHeader = 'started-on';
       this._searchTerm = '';
       this._collection = collectionTable;
       this._pollingIntervalSeconds = 5;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f4096ce1/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx b/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx
index a147abd..6db8f66 100644
--- a/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx
+++ b/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx
@@ -71,12 +71,6 @@ define([
         restore(window.confirm);
       });
 
-      it('it displays a message instead of an empty table, if there are undefined active
tasks', function () {
-        Actions.setCollection(undefined);
-        var tableText = $(table.getDOMNode())[0].innerText;
-        assert.equal(tableText.trim(), 'No active tasks.');
-      });
-
       describe('Active Tasks Filter tray', function () {
 
         afterEach(function () {
@@ -111,8 +105,8 @@ define([
         var headerNames = [
           'type',
           'database',
-          'started_on',
-          'updated_on',
+          'started-on',
+          'updated-on',
           'pid',
           'progress'
         ];

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f4096ce1/app/addons/activetasks/tests/activetasks.storesSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/activetasks/tests/activetasks.storesSpec.js b/app/addons/activetasks/tests/activetasks.storesSpec.js
index c059280..e71e600 100644
--- a/app/addons/activetasks/tests/activetasks.storesSpec.js
+++ b/app/addons/activetasks/tests/activetasks.storesSpec.js
@@ -110,7 +110,7 @@ define([
       var fakeFilteredTable, storeFilteredtable;
       function sort (a, b, sortBy) {  //sorts array by objects with key 'sortBy', with default
started_on
         if (_.isUndefined(sortBy)) {
-          sortBy = 'started_on';
+          sortBy = 'started-on';
         }
         return b[sortBy] - a[sortBy];
       }
@@ -157,7 +157,7 @@ define([
     describe('Active Task Stores - Table Header Sort - Select Ascending/Descending', function
() {
 
       it('should set header as ascending, on default', function () {
-        activeTasksStore.setSelectedRadio('all_tasks');
+        activeTasksStore.setSelectedRadio('all-tasks');
         activeTasksStore._headerIsAscending = true;
         assert.ok(activeTasksStore.getHeaderIsAscending());
       });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/f4096ce1/assets/less/mixins.less
----------------------------------------------------------------------
diff --git a/assets/less/mixins.less b/assets/less/mixins.less
index c49bca5..69abaf1 100644
--- a/assets/less/mixins.less
+++ b/assets/less/mixins.less
@@ -29,3 +29,12 @@
   border-left: 1px solid #999;
   .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
 }
+
+.noselect() {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}


Mime
View raw message