add node preview component

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

@@ -0,0 +1,35 @@
+(function () {
+    'use strict';
+
+    function NodePreviewDirective() {
+
+        function link(scope, el, attr, ctrl) {
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/umb-node-preview.html',
+            scope: {
+                icon: "=?",
+                name: "=",
+                description: "=?",
+                sortable: "=?",
+                allowEdit: "=?",
+                allowOpen: "=?",
+                allowRemove: "=?",
+                onEdit: "&?",
+                onOpen: "&?",
+                onRemove: "&?"
+            },
+            link: link
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbNodePreview', NodePreviewDirective);
+
+})();

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

@@ -122,6 +122,7 @@
 
 @import "components/notifications/umb-notifications.less";
 @import "components/umb-file-dropzone.less";
+@import "components/umb-node-preview.less";
 
 // Utilities
 @import "utilities/_flexbox.less";

src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less

@@ -0,0 +1,71 @@
+.umb-node-preview {
+    padding: 5px 15px;
+    margin-bottom: 5px;
+    border: 2px solid #f8f8f8;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    background: @white;
+}
+
+.umb-node-preview--sortable {
+    cursor: move;
+}
+
+.umb-node-preview--sortable:hover {
+    border-color: #d9d9d9;
+}
+
+.umb-node-preview__icon {
+    display: flex;
+    width: 25px;
+    height: 25px;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    margin-right: 10px;
+    flex: 0 0 auto;
+}
+
+.umb-node-preview__content {
+    flex: 1 1 auto;
+}
+
+.umb-node-preview__name {
+    font-size: 13px;
+    font-weight: bold;
+    color: @black;
+}
+
+.umb-node-preview__description {
+    font-size: 12px;
+}
+
+.umb-node-preview__actions {
+    flex: 0 0 auto;
+}
+
+.umb-node-preview__action {
+    margin-left: 5px;
+    margin-right: 5px;
+    font-size: 16px;
+}
+
+.umb-node-preview__action:hover {
+    color: @blue;
+    text-decoration: none;
+}
+
+.umb-node-preview-add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed #d9d9d9;
+    color: @blue;
+    font-weight: bold;
+    padding: 5px 15px;
+}
+
+.umb-node-preview-add:hover {
+    color: @blue;
+}

src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html

@@ -0,0 +1,13 @@
+<div class="umb-node-preview" ng-class="{'umb-node-preview--sortable': sortable }">
+    <i ng-if="icon" class="umb-node-preview__icon {{ icon }}"></i>
+    <div class="umb-node-preview__content">
+        <div class="umb-node-preview__name">{{ name }}</div>
+        <div ng-if="description" class="umb-node-preview__description">{{ description }}</div>
+    </div>
+    <div class="umb-node-preview__actions">
+        <a class="umb-node-preview__action" title="Edit" href="" ng-if="allowEdit"  ng-click="onEdit()"><i class="icon-edit"></i></a>
+        <a class="umb-node-preview__action" title="Open" href="" ng-if="allowOpen" ng-click="onOpen()"><i class="icon-out"></i></a>
+        <a class="umb-node-preview__action" title="Remove" href="" ng-if="allowRemove" ng-click="onRemove()"><i class="icon-trash"></i></a>
+    <div>
+
+</div>