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: [email protected] <[email protected]> Authored: Wed Jul 1 12:29:09 2015 -0400 Committer: [email protected] <[email protected]> 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; +}
