add TabelementWrapper

PR: #714
PR-URL: https://github.com/apache/couchdb-fauxton/pull/714
Reviewed-By: garren smith <garren.sm...@gmail.com>


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

Branch: refs/heads/master
Commit: 7cead9eb19cadc5dd630110c52397999c5f60bbf
Parents: 2d31245
Author: Robert Kowalski <robertkowal...@apache.org>
Authored: Tue May 24 14:13:04 2016 +0200
Committer: Robert Kowalski <robertkowal...@apache.org>
Committed: Tue May 24 19:45:28 2016 +0200

----------------------------------------------------------------------
 app/addons/activetasks/assets/less/activetasks.less | 13 +------------
 app/addons/activetasks/components.react.jsx         |  8 +++++---
 app/addons/components/assets/less/tab-element.less  | 12 ++++++++++++
 app/addons/components/react-components.react.jsx    | 12 +++++++++++-
 4 files changed, 29 insertions(+), 16 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/7cead9eb/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 a7620a2..85d3e9e 100644
--- a/app/addons/activetasks/assets/less/activetasks.less
+++ b/app/addons/activetasks/assets/less/activetasks.less
@@ -89,18 +89,7 @@
     }
   }
 
-  #active-tasks-filter-tabs {
-    height: 60px;
-    background-color: #CBCBCB;
-    padding-left: 20px;
-    overflow: hidden;
-    width: 100%;
-    min-width: 770px;
-
-    input {
-      display: none;
-    }
-
+  .component-tab-element-wrapper {
     #active-tasks-search-box {
       display: inline;
       font-size: 14px;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/7cead9eb/app/addons/activetasks/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/activetasks/components.react.jsx 
b/app/addons/activetasks/components.react.jsx
index d352175..67cef26 100644
--- a/app/addons/activetasks/components.react.jsx
+++ b/app/addons/activetasks/components.react.jsx
@@ -25,6 +25,7 @@ define([
 ], (app, FauxtonAPI, React, ReactDOM, Stores, Resources, Actions,
   Components, ComponentsReact, ReactCSSTransitionGroup) => {
 
+  const TabElementWrapper = Components.TabElementWrapper;
   const TabElement = Components.TabElement;
 
   var activeTasksStore = Stores.activeTasksStore;
@@ -150,9 +151,9 @@ define([
     },
 
     render: function () {
-      var filterTabs = this.createFilterTabs();
+      const filterTabs = this.createFilterTabs();
       return (
-        <ul className="nav nav-tabs" id="active-tasks-filter-tabs">
+        <TabElementWrapper>
           {filterTabs}
           <li>
             <input
@@ -164,7 +165,8 @@ define([
               value={this.props.searchTerm}
               onChange={this.searchTermChange} />
           </li>
-        </ul>);
+        </TabElementWrapper>
+      );
     }
   });
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/7cead9eb/app/addons/components/assets/less/tab-element.less
----------------------------------------------------------------------
diff --git a/app/addons/components/assets/less/tab-element.less 
b/app/addons/components/assets/less/tab-element.less
index c6413e5..6258cff 100644
--- a/app/addons/components/assets/less/tab-element.less
+++ b/app/addons/components/assets/less/tab-element.less
@@ -12,12 +12,24 @@
 
 @import "../../../../../assets/less/mixins.less";
 
+.component-tab-element-wrapper {
+  height: 60px;
+  background-color: #CBCBCB;
+  padding-left: 20px;
+  overflow: hidden;
+  width: 100%;
+  min-width: 770px;
+}
 
 .component-tab-element {
   background-color: #eee;
   margin-top: 10px;
   line-height: 40px;
 
+  input {
+    display: none;
+  }
+
   label {
     margin-right: 0;
     line-height: 25px;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/7cead9eb/app/addons/components/react-components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/react-components.react.jsx 
b/app/addons/components/react-components.react.jsx
index e9cc587..7e05476 100644
--- a/app/addons/components/react-components.react.jsx
+++ b/app/addons/components/react-components.react.jsx
@@ -1590,6 +1590,15 @@ define([
     iconClass: React.PropTypes.string,
   };
 
+  const TabElementWrapper = ({children}) => {
+    return (
+      <ul className="nav nav-tabs component-tab-element-wrapper">
+        {children}
+      </ul>
+    );
+  };
+
+
   return {
     BadgeList: BadgeList,
     Badge: Badge,
@@ -1617,7 +1626,8 @@ define([
       ReactDOM.unmountComponentAtNode(el);
     },
     DeleteDatabaseModal: DeleteDatabaseModal,
-    TabElement: TabElement
+    TabElement: TabElement,
+    TabElementWrapper: TabElementWrapper
   };
 
 });

Reply via email to