From cbb96aab1b659159db83c35181b92455150e8a61 Mon Sep 17 00:00:00 2001 From: Roger Noble Date: Tue, 18 Feb 2014 21:39:37 +1030 Subject: [PATCH 1/3] Added item count to the tool bar panel --- src/pivotviewer.js | 15 ++++++++++++++- style/pivotviewer.css | 1 + 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/pivotviewer.js b/src/pivotviewer.js index fcc1ccd..3186a2a 100644 --- a/src/pivotviewer.js +++ b/src/pivotviewer.js @@ -217,6 +217,8 @@ } } + //display tile count + UpdateItemCount(); }; InitUI = function () { @@ -227,6 +229,7 @@ if (brandImage.length > 0) toolbarPanel += ""; toolbarPanel += "" + PivotCollection.CollectionName + ""; + toolbarPanel += ""; toolbarPanel += "
"; toolbarPanel += "
"; toolbarPanel += "
"; @@ -666,7 +669,8 @@ _views.push(new PivotViewer.Views.GraphView()); _views.push(new PivotViewer.Views.TableView()); _views.push(new PivotViewer.Views.MapView()); - _views.push(new PivotViewer.Views.TimeView()); + _views.push(new PivotViewer.Views.MapView()); + //_views.push(new PivotViewer.Views.TimeView()); //init the views interfaces for (var i = 0; i < _views.length; i++) { @@ -1240,6 +1244,9 @@ } _filterItems = sortedFilter; + //Update item count + UpdateItemCount(); + // Update the bookmark UpdateBookmark (); @@ -1517,6 +1524,12 @@ bc.append(bcItems); }; + UpdateItemCount = function(){ + var $itemCount = $('.pv-toolbarpanel-itemcount'); + $itemCount.empty(); + $itemCount.append(_filterItems.length); + }; + DeselectInfoPanel = function () { //de-select details $('.pv-infopanel').fadeOut(); diff --git a/style/pivotviewer.css b/style/pivotviewer.css index ea24965..2f5d36e 100644 --- a/style/pivotviewer.css +++ b/style/pivotviewer.css @@ -4,6 +4,7 @@ a { font-weight:normal; } .pv-loading span { position: absolute; top:66px; left:23px; } .pv-toolbarpanel { height: 22px; width: 100%; border-bottom: 1px solid #D3D4D4; padding: 3px 0px 3px 0px; background: #FDFDFD; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDFDFD', endColorstr='#F4F4F4'); background: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#F4F4F4)); background: -moz-linear-gradient(top, #FDFDFD, #F4F4F4); white-space:nowrap} .pv-toolbarpanel-brandimage { height: 22px; float:left; } +.pv-toolbarpanel-itemcount { background-color: #597686; border-radius: 5px; color: #FFFFFF; float: left; margin-left: 5px; padding: 4px; } .pv-toolbarpanel-facetbreadcrumb { margin-top:5px; margin-left:5px; float:left; white-space: nowrap; overflow: hidden; text-overflow:ellipsis} .pv-toolbarpanel-facetbreadcrumb-facet { margin-left: 5px; color:#787676; } .pv-toolbarpanel-facetbreadcrumb-values { margin-left:3px; color: #05314A; } From 30eec1f1ca7806a1f30653172b821da063d22d31 Mon Sep 17 00:00:00 2001 From: Roger Noble Date: Tue, 18 Feb 2014 22:16:08 +1030 Subject: [PATCH 2/3] Added item counts to Graph View buckets and updated breadcrumb width to accommodate item count. --- src/pivotviewer.js | 1 + src/views/graphview.js | 8 +++++--- style/pivotviewer.css | 1 + 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pivotviewer.js b/src/pivotviewer.js index 3186a2a..e76aa36 100644 --- a/src/pivotviewer.js +++ b/src/pivotviewer.js @@ -187,6 +187,7 @@ //Hardcoding the value for the width of the viewcontrols images (145=29*5) as the webkit browsers //do not know the size of the images at this point. var controlsWidth = $('.pv-toolbarpanel').innerWidth() - ($('.pv-toolbarpanel-brandimage').outerWidth(true) + 25 + $('.pv-toolbarpanel-name').outerWidth(true) + $('.pv-toolbarpanel-zoomcontrols').outerWidth(true) + 145 + $('.pv-toolbarpanel-sortcontrols').outerWidth(true)); + controlsWidth -= 30; //width of the item count $('.pv-toolbarpanel-facetbreadcrumb').css('width', controlsWidth + 'px'); diff --git a/src/views/graphview.js b/src/views/graphview.js index ddd2dd3..41bf0bb 100644 --- a/src/views/graphview.js +++ b/src/views/graphview.js @@ -262,10 +262,12 @@ PivotViewer.Views.GraphView = PivotViewer.Views.TileBasedView.subClass({ var styleClass = i % 2 == 0 ? "graphview-bucket-dark" : "graphview-bucket-light"; uiElements[i] = "
"; if (this.buckets[i].startRange == this.buckets[i].endRange) - uiElements[i] += "
" + this.buckets[i].startRange + "
"; + uiElements[i] += "
" + this.buckets[i].startRange + "
"; else - uiElements[i] += "
" + this.buckets[i].startRange + "
to
" + this.buckets[i].endRange + "
"; - + uiElements[i] += "
" + this.buckets[i].startRange + "
to
" + this.buckets[i].endRange + "
"; + //Add bucket count + uiElements[i] += "" + this.buckets[i].Ids.length + ''; + uiElements[i] += ""; if (this.bigCount < this.buckets[i].Ids.length) { this.bigCount = this.buckets[i].Ids.length; } diff --git a/style/pivotviewer.css b/style/pivotviewer.css index 2f5d36e..cfce764 100644 --- a/style/pivotviewer.css +++ b/style/pivotviewer.css @@ -114,6 +114,7 @@ a { font-weight:normal; } .pv-viewarea-graphview-overlay { position: absolute; top: 0px; width: 100%; height: 100%; z-index: 1; } .pv-viewarea-graphview-overlay-bucket { height: 100%; position:absolute; top:0px;} .pv-viewarea-graphview-overlay-buckettitle { height: 50px; background-color:#F5F5F5; position: relative; text-align:center; border: 1px solid #D3D4D4; cursor: default; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;z-index: 25;} +.pv-viewarea-graphview-overlay-count { position: relative; background-color: #597686; border-radius: 5px; color: #FFFFFF; margin-left: 5px; padding: 4px; z-index: 30; } .graphview-bucket-dark { background-color: #E6E8ED; } .graphview-bucket-light { background-color: #EBEDF1; } .graphview-bucket-hover { background-color: #DCECF4; } From d3ee8369491e9920cc637b60a6fb2b15c4b1dba0 Mon Sep 17 00:00:00 2001 From: Roger Noble Date: Tue, 18 Feb 2014 22:36:18 +1030 Subject: [PATCH 3/3] Forgot to un-comment the Timeline view (didn't want it showing during development) --- src/pivotviewer.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pivotviewer.js b/src/pivotviewer.js index e76aa36..bf47256 100644 --- a/src/pivotviewer.js +++ b/src/pivotviewer.js @@ -670,8 +670,7 @@ _views.push(new PivotViewer.Views.GraphView()); _views.push(new PivotViewer.Views.TableView()); _views.push(new PivotViewer.Views.MapView()); - _views.push(new PivotViewer.Views.MapView()); - //_views.push(new PivotViewer.Views.TimeView()); + _views.push(new PivotViewer.Views.TimeView()); //init the views interfaces for (var i = 0; i < _views.length; i++) {