diff --git a/src/css/style.less b/src/css/style.less index 4719e7bd..c52302a7 100644 --- a/src/css/style.less +++ b/src/css/style.less @@ -709,12 +709,31 @@ input[type='radio'].nice-radio { .app-category-card .panel-body { padding: 2em; height: 10em; + color: #333 !important; +} + +.subtag-selector { + text-align: center; +} + +.app-category-card { + text-decoration: none !important; +} + +.app-category-card:hover { + border-color: #777; } .app-category-title { line-height: 1em; + white-space: normal; } +.app-category-card-desc { + white-space: normal; +} + + /** Groups View **/ #view-groups { .panel-heading a { diff --git a/src/js/yunohost/controllers/apps.js b/src/js/yunohost/controllers/apps.js index 246aa04d..aa8d2c3d 100644 --- a/src/js/yunohost/controllers/apps.js +++ b/src/js/yunohost/controllers/apps.js @@ -107,15 +107,34 @@ } } - // Display app catalog + + // Display catalog home page where users chooses to browse a specific category app.get('#/apps/catalog', function (c) { c.api('GET', '/appscatalog?full&with_categories', {}, function (data) { - var apps = [] + c.view('app/app_catalog_home', {categories: data["categories"]}, function() { + // Configure layout / rendering for app-category-cards + $('#category-selector').isotope({ + itemSelector: '.app-category-card', + layoutMode: 'fitRows', + transitionDuration: 200 + }); + }); + }); + }); + + // Display app catalog for a specific category + app.get('#/apps/catalog/:category', function (c) { + var category_id = c.params['category']; + c.api('GET', '/appscatalog?full&with_categories', {}, function (data) { + var apps = []; $.each(data['apps'], function(name, app) { // Ignore not working apps if (app.state === 'notworking') { return; } + // Ignore apps not in this category + if ((category_id !== "all") && (app.category !== category_id)) { return; } + app.id = app.manifest.id; app.level = parseInt(app.level); @@ -152,6 +171,15 @@ apps.push(app); }); + var category = undefined; + $.each(data['categories'], function(i, this_category) { + if (this_category.id === category_id) { category = this_category; } + }); + + if (category_id === "all") { + category = {title: y18n.t("all_apps"), icon: "search"}; + } + // Sort app list c.arraySortById(apps); @@ -167,75 +195,21 @@ // Default filter is 'decent quality apps' cardGrid.isotope({ filter: '.decentQuality' }); - var categoryGrid = jQuery('#category-selector').isotope({ - itemSelector: '.app-category-card', - layoutMode: 'fitRows', - transitionDuration: 200 - }); - - $("#category-selector").show(); - $("#current-category-filter").hide(); - $("#current-category-separator").hide(); - $("#back-to-category-selection").hide(); - $(".subtag-selector").hide(); - - $("#category-selector button").on("click", function() { - var category = $(this).data("category"); - var title = $("h2", this).html(); - - // Feed info and display the selecter category next to the search bar - $("#current-category-filter").html(title); - $("#current-category-filter").data("category", category); - $("#current-category-filter").show(); - $("#back-to-category-selection").show(); - $("#current-category-separator").show(); - - // Hide the category selector - $("#category-selector").hide(); - - // Display the subtags selector - $(".subtag-selector").hide(); - $(".subtag-selector[data-app-category='"+category+"']").show(); - cardGrid.isotope({ filter: filterApps }); - }); - - $("#back-to-category-selection").on("click", function() { - - // Hide / reset selected cateory next to the search bar - $("#current-category-filter").hide(); - $("#current-category-filter").data("category", ""); - $("#back-to-category-selection").hide(); - $("#current-category-separator").hide(); - - // Display the category selector - $("#category-selector").show(); - - // Hide subtag selector - $(".subtag-selector").hide(); - cardGrid.isotope({ filter: filterApps }); - }); - $(".subtag-selector button").on("click", function() { var selector = $(this).parent(); - var category = selector.data("app-category"); $("button", selector).removeClass("active"); $(this).addClass("active"); cardGrid.isotope({ filter: filterApps }); }); - filterApps = function () { // Check text search var input = jQuery("#filter-app-cards").val().toLowerCase(); if (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) <= -1) return false; - // Check category - var category = $("#current-category-filter").data("category"); - if ((category !== '') && (jQuery(this).data("category") !== category)) return false; - // Check subtags - var subtag = $(".subtag-selector[data-app-category='"+category+"'] button.active").data("subtag"); + var subtag = $(".subtag-selector button.active").data("subtag"); var this_subtags = jQuery(this).data("subtags"); if ((subtag !== undefined) && (subtag !== "all")) { if ((subtag === "others") && (this_subtags !== "")) return false; @@ -264,7 +238,7 @@ }; // render - c.view('app/app_catalog', {apps: apps, categories: data["categories"]}, setupFilterEvents); + c.view('app/app_catalog_category', {apps: apps, category: category}, setupFilterEvents); }); }); diff --git a/src/locales/en.json b/src/locales/en.json index 76319c71..adec9878 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -53,6 +53,7 @@ "begin": "Begin", "both": "Both", "cancel": "Cancel", + "catalog": "Catalog", "check": "Check", "close": "Close", "configuration": "Configuration", diff --git a/src/views/app/app_catalog.ms b/src/views/app/app_catalog_category.ms similarity index 74% rename from src/views/app/app_catalog.ms rename to src/views/app/app_catalog_category.ms index 209dc177..4dc7647c 100644 --- a/src/views/app/app_catalog.ms +++ b/src/views/app/app_catalog_category.ms @@ -1,15 +1,16 @@
{{t 'home'}} {{t 'applications'}} - {{t 'install'}} + {{t 'catalog'}} + {{category.title}}
-
- -   +
+ {{category.title}} +  
@@ -27,37 +28,23 @@
-
- {{#categories}} - - {{/categories}} -
- -{{#categories}} -
- {{#if subtags}} +
+ {{#if category.subtags}} {{/if}} - {{#subtags}} + {{#category.subtags}} - {{/subtags}} - {{#if subtags}} + {{/category.subtags}} + {{#if category.subtags}} {{/if}}
-{{/categories}} -
{{#apps}} -
+

{{manifest.name}} @@ -73,19 +60,19 @@

{{#if (eq maintainedColor 'danger') }} - {{t maintained}} + {{t maintained}} {{/if}}
- Code + Code - Readme + Readme {{#installable}} - {{t 'install'}}{{^isSafe}} {{/isSafe}} + {{t 'install'}}{{^isSafe}} {{/isSafe}} {{/installable}} {{^installable}} @@ -102,7 +89,7 @@

- + {{t 'confirm_install_custom_app'}}

@@ -111,7 +98,7 @@

- {{t 'custom_app_url_only_github'}} + {{t 'custom_app_url_only_github'}}

diff --git a/src/views/app/app_catalog_home.ms b/src/views/app/app_catalog_home.ms new file mode 100644 index 00000000..bb96b3c4 --- /dev/null +++ b/src/views/app/app_catalog_home.ms @@ -0,0 +1,23 @@ +
+ {{t 'home'}} + {{t 'applications'}} + {{t 'catalog'}} +
+ +
+ + diff --git a/src/views/app/app_install.ms b/src/views/app/app_install.ms index 0031cc4d..b5ec27dd 100644 --- a/src/views/app/app_install.ms +++ b/src/views/app/app_install.ms @@ -1,8 +1,8 @@
{{t 'home'}} {{t 'applications'}} - {{t 'install'}} - {{manifest.name}} + {{t 'catalog'}} + {{t 'install_name' manifest.name}}