Skip to content

Commit

Permalink
Rework of search position & item count
Browse files Browse the repository at this point in the history 
Feature request in issue #2.

Hand picked JS & CSS from core Umbraco code to provide component specific look & feel to dashboard.

CSS is prefixed with .npd--dashboard to avoid clashing with older of Umbraco.
  • Loading branch information
Jamie Pollock committed Jul 13, 2016
1 parent ef6b4f0 commit e50a0eb
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 37 deletions.
41 changes: 41 additions & 0 deletions ...Our.Umbraco.NuGetPackageDashboard.Web/App_Plugins/NuGetPackageDashboard/css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,45 @@
left: 5px;
color: #555;
cursor: pointer;
}

.npd--dashboard table thead {
font-weight: 600;
text-transform: uppercase;
background-color: #f8f8f8;
}

.npd--dashboard .umb-editor-sub-header {
padding: 15px 0;
margin-bottom: 30px;
background: #ffffff;
display: flex;
justify-content: space-between;
margin-top: -30px;
position: relative;
top: 0;
}

.npd--dashboard .umb-editor-sub-header__content-left {
margin-right: auto;
}

.npd--dashboard .umb-editor-sub-header__content-right {
margin-left: auto;
}

.npd--dashboard .umb-editor-sub-header__content-left,
.npd--dashboard .umb-editor-sub-header__content-right {
display: flex;
align-items: stretch;
}

.npd--dashboard .umb-editor-sub-header__content-left .umb-editor-sub-header__section:first-child {
border-left: none;
padding-left: 0;
}

.npd--dashboard .umb-editor-sub-header__content-right .umb-editor-sub-header__section:last-child {
border-right: none;
padding-right: 0;
}
22 changes: 17 additions & 5 deletions ...aco.NuGetPackageDashboard.Web/App_Plugins/NuGetPackageDashboard/js/dashboardController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,25 @@
}
);
};

$scope.enterSearch = function ($event) {
$($event.target).next().focus();
var makeSearch = function () {
doSearch($scope.totalItems, $scope.filter);
};
var searchListView = _.debounce(function () {
$scope.$apply(function () {
makeSearch();
});
}, 500);

$scope.search = function () {
doSearch($scope.totalItems, $scope.filter);
$scope.forceSearch = function (ev) {
//13: enter
switch (ev.keyCode) {
case 13:
makeSearch();
break;
}
};
$scope.enterSearch = function () {
searchListView();
};

$scope.refreshData();
Expand Down
73 changes: 41 additions & 32 deletions ....Umbraco.NuGetPackageDashboard.Web/App_Plugins/NuGetPackageDashboard/views/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,40 +8,49 @@
<h4>{{dashboardException.Title}}</h4>
<p>{{dashboardException.Message}}</p>
</div>
<table class="table table-striped" ng-hide="dashboardException">
<thead>
<tr>
<th>ID</th>
<th>Version</th>
<th>Target Framework</th>
<td>
<form class="pull-right" novalidate="">
<i class="icon-search" ng-click="enterSearch($event)"></i>
<input type="text" ng-model="filter" on-keyup="search()" prevent-enter-submit="" no-dirty-check="">
<div class="row-fluid" ng-hide="dashboardException">

<div class="umb-editor-sub-header">
<div class="umb-editor-sub-header__content-left">
<div class="umb-editor-sub-header__section">
<strong>Showing {{items.length}} of {{totalItems.length}} packages</strong>
</div>
</div>
<div class="umb-editor-sub-header__content-right">
<div class="umb-editor-sub-header__section">
<form class="form-search -no-margin-bottom pull-right" novalidate="">
<div class="inner-addon left-addon">
<i class="icon icon-search" ng-click="enterSearch($event)"></i>
<input class="form-control search-input ng-pristine ng-valid" type="text" localize="placeholder" placeholder="Type to search..." ng-model="filter" ng-change="enterSearch()" ng-keydown="forceSearch($event)" prevent-enter-submit="" no-dirty-check="">
</div>
</form>
</td>
</tr>
</thead>
<tbody ng-show="items.length > 0">
<tr ng-repeat="item in items">
<td>{{item.Id}}</td>
<td>{{item.Version}}</td>
<td>{{item.TargetFramework}}</td>
<td><!-- --></td>
</tr>
</tbody>
<tbody ng-hide="items.length > 0">
<tr>
<td colspan="4">No packages found.</td>
</tr>
</tbody>
<tfoot ng-show="items.length > 0">
<tr>
<td colspan="4">Showing {{items.length}} of {{totalItems.length}} packages.</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>

<table class="table table-striped" ng-hide="dashboardException">
<thead>
<tr>
<th>ID</th>
<th>Version</th>
<th>Target Framework</th>
</tr>
</thead>
<tbody ng-show="items.length > 0">
<tr ng-repeat="item in items">
<td>{{item.Id}}</td>
<td>{{item.Version}}</td>
<td>{{item.TargetFramework}}</td>
</tr>
</tbody>
<tbody ng-hide="items.length > 0">
<tr>
<td colspan="3">No packages found.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Expand Down

0 comments on commit e50a0eb

Please sign in to comment.