Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added item counts #23

Closed
wants to merge 3 commits into from
Closed

Added item counts #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cbb96aa
Added item count to the tool bar panel
RogerNoble Feb 18, 2014
30eec1f
Added item counts to Graph View buckets and updated breadcrumb width …
RogerNoble Feb 18, 2014
d3ee836
Forgot to un-comment the Timeline view (didn't want it showing during…
RogerNoble Feb 18, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions src/pivotviewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -217,6 +218,8 @@
}
}

//display tile count
UpdateItemCount();
};

InitUI = function () {
Expand All @@ -227,6 +230,7 @@
if (brandImage.length > 0)
toolbarPanel += "<img class='pv-toolbarpanel-brandimage' src='" + brandImage + "'></img>";
toolbarPanel += "<span class='pv-toolbarpanel-name'>" + PivotCollection.CollectionName + "</span>";
toolbarPanel += "<span class='pv-toolbarpanel-itemcount'></span>";
toolbarPanel += "<div class='pv-toolbarpanel-facetbreadcrumb'></div>";
toolbarPanel += "<div class='pv-toolbarpanel-zoomcontrols'><div class='pv-toolbarpanel-zoomslider'></div>";
toolbarPanel += "<div class='pv-toolbarpanel-timelineselector'></div></div>";
Expand Down Expand Up @@ -1240,6 +1244,9 @@
}
_filterItems = sortedFilter;

//Update item count
UpdateItemCount();

// Update the bookmark
UpdateBookmark ();

Expand Down Expand Up @@ -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();
Expand Down
8 changes: 5 additions & 3 deletions src/views/graphview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,10 +262,12 @@ PivotViewer.Views.GraphView = PivotViewer.Views.TileBasedView.subClass({
var styleClass = i % 2 == 0 ? "graphview-bucket-dark" : "graphview-bucket-light";
uiElements[i] = "<div class='pv-viewarea-graphview-overlay-bucket " + styleClass + "' id='pv-viewarea-graphview-overlay-bucket-" + i + "' style='width: " + (Math.floor(this.columnWidth) - 4) + "px; height:" + (this.height - 2) + "px; left:" + ((i * this.columnWidth) - 2) + "px;'>";
if (this.buckets[i].startRange == this.buckets[i].endRange)
uiElements[i] += "<div class='pv-viewarea-graphview-overlay-buckettitle' style='top: " + (this.canvasHeightUIAdjusted + 4) + "px;'>" + this.buckets[i].startRange + "</div></div>";
uiElements[i] += "<div class='pv-viewarea-graphview-overlay-buckettitle' style='top: " + (this.canvasHeightUIAdjusted + 4) + "px;'>" + this.buckets[i].startRange + "</div>";
else
uiElements[i] += "<div class='pv-viewarea-graphview-overlay-buckettitle' style='top: " + (this.canvasHeightUIAdjusted + 4) + "px;'>" + this.buckets[i].startRange + "<br/>to<br/>" + this.buckets[i].endRange + "</div></div>";

uiElements[i] += "<div class='pv-viewarea-graphview-overlay-buckettitle' style='top: " + (this.canvasHeightUIAdjusted + 4) + "px;'>" + this.buckets[i].startRange + "<br/>to<br/>" + this.buckets[i].endRange + "</div>";
//Add bucket count
uiElements[i] += "<span class='pv-viewarea-graphview-overlay-count' style='top: " + (this.canvasHeightUIAdjusted - 39) + "px;'>" + this.buckets[i].Ids.length + '</span>';
uiElements[i] += "</div>";
if (this.bigCount < this.buckets[i].Ids.length) {
this.bigCount = this.buckets[i].Ids.length;
}
Expand Down
2 changes: 2 additions & 0 deletions style/pivotviewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down Expand Up @@ -113,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; }
Expand Down