add directive to list folders in a flexbox grid

src/Umbraco.Web.UI.Client/src/common/directives/components/umbfoldergrid.directive.js

@@ -0,0 +1,40 @@
+(function() {
+   'use strict';
+
+   function FolderGridDirective() {
+
+      function link(scope, el, attr, ctrl) {
+
+         scope.clickFolder = function(folder) {
+            if(scope.onClick) {
+               scope.onClick(folder);
+            }
+         };
+
+         scope.selectFolder = function(folder, $event) {
+            if(scope.onSelect) {
+               scope.onSelect(folder);
+            }
+            $event.stopPropagation();
+         };
+
+      }
+
+      var directive = {
+         restrict: 'E',
+         replace: true,
+         templateUrl: 'views/components/umb-folder-grid.html',
+         scope: {
+            folders: '=',
+            onSelect: '=',
+            onClick: "="
+         },
+         link: link
+      };
+
+      return directive;
+   }
+
+   angular.module('umbraco.directives').directive('umbFolderGrid', FolderGridDirective);
+
+})();

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -97,6 +97,7 @@
 @import "components/umb-load-indicator.less";
 @import "components/umb-breadcrumbs.less";
 @import "components/umb-media-grid.less";
+@import "components/umb-folder-grid.less";
 @import "components/umb-layout-selector.less";
 @import "components/tooltip/umb-tooltip.less";
 @import "components/tooltip/umb-tooltip-list.less";

src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less

@@ -0,0 +1,80 @@
+.umb-folder-grid {
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+   width: 100%;
+   margin-bottom: 20px;
+}
+
+.umb-folder-grid__folder {
+   background: @grayLighter;
+   margin: 5px;
+   display: flex;
+   align-items: center;
+   padding: 10px 20px;
+   box-sizing: border-box;
+   flex: 1 1 200px;
+   border: 1px solid transparent;
+   transition: border 0.2s;
+   position: relative;
+   justify-content: space-between;
+   cursor: pointer;
+}
+
+.umb-folder-grid__folder:focus,
+.umb-folder-grid__folder:active {
+   text-decoration: none;
+}
+
+.umb-folder-grid__folder:hover {
+   text-decoration: none;
+   border: 1px solid @blue;
+}
+
+.umb-folder-grid__folder-description {
+   display: flex;
+   align-items: center;
+}
+
+.umb-folder-grid__folder-icon {
+   font-size: 20px;
+   color: @gray;
+   margin-right: 20px;
+}
+
+.umb-folder-grid__folder-name {
+   font-size: 13px;
+}
+
+.umb-folder-grid__action {
+   opacity: 0;
+   border: 1px solid #ffffff;
+   width: 25px;
+   height: 25px;
+   background: rgba(0, 0, 0, 0.4);
+   border-radius: 50px;
+   box-sizing: border-box;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   color: #ffffff;
+   margin-left: 7px;
+   cursor: pointer;
+}
+
+.umb-folder-grid__action:hover {
+   background: @blue;
+   transition: background 0.1s;
+}
+
+.umb-folder-grid__action.-selected {
+   opacity: 1;
+   background: @blue;
+}
+
+.umb-folder-grid__folder:hover .umb-folder-grid__action:not(.-selected) {
+   opacity: 1;
+   animation: fadeIn;
+   animation-duration: 0.2s;
+   animation-timing-function: ease-in-out;
+}

src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html

@@ -0,0 +1,18 @@
+<div class="umb-folder-grid">
+
+   <div
+      class="umb-folder-grid__folder"
+      ng-repeat="folder in folders"
+      ng-class="{'-selected': folder.selected}"
+      ng-click="clickFolder(folder)">
+
+      <div class="umb-folder-grid__folder-description">
+         <i class="umb-folder-grid__folder-icon {{ folder.icon }}"></i>
+         <div class="umb-folder-grid__folder-name">{{ folder.name }}</div>
+      </div>
+
+      <i class="icon-check umb-folder-grid__action" ng-click="selectFolder(folder, $event)" ng-class="{'-selected': folder.selected}"></i>
+
+   </div>
+
+</div>