From 098eb32ef61fbe3ec6994e5dd1243541c6bd38ed Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 26 May 2016 14:57:38 +0200
Subject: [PATCH] added categories

---
 .../src/less/components/umb-packages.less     | 39 +++++++++++++++++++
 .../src/views/packagesNew/edit.controller.js  | 27 +++++++++++++
 .../src/views/packagesNew/edit.html           |  5 ++-
 3 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
index 6840376703..4d4d443b09 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
@@ -159,3 +159,42 @@
 .umb-era-button.-blue:hover {
 	background-color: @blueDark;
 }
+
+
+
+/* CATEGORIES */
+
+.umb-packages-categories {
+    display: flex;
+    user-select: center;
+    flex-wrap: wrap;
+    margin-bottom: 30px;
+}
+
+.umb-packages-category {
+    display: flex;
+    align-items: center;
+    flex: 1 0 auto;
+    max-width: 25%;
+    background-color: @blue;
+    padding: 10px;
+    font-size: 12px;
+    border-radius: 3px;
+    color: @white;
+    font-weight: bold;
+    box-sizing: border-box;
+    flex: 1 0 auto;
+    margin: 5px;
+    justify-content: center;
+}
+
+.umb-packages-category:hover,
+.umb-packages-category:focus {
+    text-decoration: none;
+    color: @white;
+}
+
+.umb-packages-category-icon {
+    font-size: 20px;
+    margin-right: 5px;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.controller.js
index 9c41d98d3a..4ce5597429 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.controller.js
@@ -8,6 +8,33 @@
         vm.page = {};
         vm.page.name = "Packages";
 
+        vm.categories = [
+            {
+                "icon": "icon-male-and-female",
+                "name": "Collaboration"
+            },
+            {
+                "icon": "icon-molecular-network",
+                "name": "Backoffice extensions"
+            },
+            {
+                "icon": "icon-brackets",
+                "name": "Developer tools"
+            },
+            {
+                "icon": "icon-wand",
+                "name": "Starter kits"
+            },
+            {
+                "icon": "icon-medal",
+                "name": "Umbraco Pro"
+            },
+            {
+                "icon": "icon-wrench",
+                "name": "Website utilities"
+            }
+        ];
+
         vm.packages = [
             {
                 "name": "Test App",
diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.html b/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.html
index e7e46528a8..8f98ba8712 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.html
@@ -21,7 +21,10 @@
                 </div>
 
                 <div class="umb-packages-categories">
-
+                    <a href="" class="umb-packages-category" ng-repeat="category in vm.categories">
+                        <i class="umb-packages-category-icon" ng-class="category.icon"></i>
+                        <div>{{ category.name }}</div>
+                    </a>
                 </div>
 
                 <div class="umb-packages">