yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v8: Package repo categories selection updates (#6459)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2019-09-29 11:49:29 +02:00
committed by Sebastiaan Janssen
parent 8a06f2f062
commit ea0dc9d68f
2 changed files with 45 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/Umbraco.Web.UI.Client/src/views/packages/views/repo.controller.js
View File

@@ -34,7 +34,9 @@
var labels = {};
var currSort = "Latest";
var defaultSort = "Latest";
var currSort = defaultSort;
//used to cancel any request in progress if another one needs to take it's place
var canceler = null;
@@ -92,24 +94,30 @@
}
function selectCategory(selectedCategory, categories) {
var reset = false;
for (var i = 0; i < categories.length; i++) {
var category = categories[i];
if (category.name === selectedCategory.name && category.active === true) {
if (category.name === selectedCategory.name) {
//it's already selected, let's unselect to show all again
reset = true;
if (category.active === true) {
category.active = false;
}
else {
category.active = true;
}
}
else {
category.active = false;
}
category.active = false;
}
vm.loading = true;
vm.searchQuery = "";
var searchCategory = selectedCategory.name;
if (reset === true) {
searchCategory = "";
}
currSort = "Latest";
var reset = selectedCategory.active === false;
var searchCategory = reset ? "" : selectedCategory.name;
currSort = defaultSort;
$q.all([
ourPackageRepositoryResource.getPopular(8, searchCategory)
@@ -122,10 +130,9 @@
vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
vm.pagination.pageNumber = 1;
})
])
])
.then(function () {
vm.loading = false;
selectedCategory.active = reset === false;
});
}

47
src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html
View File

@@ -11,21 +11,21 @@
</div>
</div>
<div class="umb-packages-section" ng-if="vm.searchQuery == ''">
<div class="umb-packages-categories">
<a href=""
class="umb-packages-category"
ng-click="vm.selectCategory(category, vm.categories)"
ng-repeat="category in vm.categories"
ng-class="{'-active': category.active, '-first': $first, '-last': $last}">
<div>{{category.name}}</div>
</a>
</div>
</div>
<div ng-show="vm.loading === false">
<div class="umb-packages-section" ng-if="vm.searchQuery == ''">
<div class="umb-packages-categories">
<a href=""
class="umb-packages-category"
ng-click="vm.selectCategory(category, vm.categories)"
ng-repeat="category in vm.categories"
ng-class="{'-active': category.active, '-first': $first, '-last': $last}">
<div>{{ category.name }}</div>
</a>
</div>
</div>
<div class="umb-packages-section" ng-if="vm.searchQuery == ''">
<div class="umb-packages-section" ng-if="vm.searchQuery == '' && vm.popular.length > 0">
<h4><strong><localize key="packager_packagesPopular">Popular</localize></strong></h4>
<div class="umb-packages">
@@ -37,15 +37,15 @@
</div>
<div class="umb-package-info">
<div class="umb-package-name">{{ package.name }}</div>
<div class="umb-package-description">{{ package.excerpt | limitTo: 40 }}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>
<div class="umb-package-name">{{package.name}}</div>
<div class="umb-package-description">{{package.excerpt | limitTo: 40}}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>
<div class="umb-package-numbers">
<small class="umb-package-downloads">
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
<i class="icon-download-alt"></i> <strong>{{package.downloads}}</strong>
</small>
<small class="umb-package-likes">
<i class="icon-hearts"></i> <strong>{{ package.likes }}</strong>
<i class="icon-hearts"></i> <strong>{{package.likes}}</strong>
</small>
</div>
@@ -67,7 +67,7 @@
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
<div class="umb-package-icon">
<img ng-src="{{ package.icon }}" alt="" />
<img ng-src="{{package.icon}}" alt="" />
</div>
<div class="umb-package-info">
@@ -102,13 +102,18 @@
</div>
<!-- Empty state -->
<umb-empty-state
ng-if="vm.packages.length === 0 && vm.loading === false && vm.searchQuery !== ''"
position="center">
<umb-empty-state ng-if="vm.packages.length === 0 && vm.loading === false && vm.searchQuery !== ''"
position="center">
<h4><strong><localize key="packager_packageNoResults">We couldn't find anything for</localize> '{{ vm.searchQuery }}'</strong></h4>
<p class="faded"><localize key="packager_packageNoResultsDescription">Please try searching for another package or browse through the categories</localize>.</p>
</umb-empty-state>
<umb-empty-state ng-if="vm.popular.length === 0 && vm.loading === false && vm.searchQuery === ''"
position="center">
<h4><strong><localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize></strong></h4>
<p class="faded"><localize key="packager_packageNoResultsDescription">Please try searching for another package or browse through the categories</localize>.</p>
</umb-empty-state>
</div>
</div>