You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by mi...@apache.org on 2015/07/23 20:37:10 UTC
fauxton commit: updated refs/heads/master to f4096ce
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 <mi...@gmail.com>
Authored: Wed Jul 1 12:29:09 2015 -0400
Committer: michellephung@gmail.com <mi...@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;
+}