Merge pull request #411 from kjac/fieldset-preview-image

Add fieldset image previews
kgiszewski · Jun 13, 2017 · bb0df72 · bb0df72
2 parents b4b27cd + 3cba567
commit bb0df72
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 29 deletions.
diff --git a/app/Umbraco/Umbraco.Archetype/Models/ArchetypePreValueFieldset.cs b/app/Umbraco/Umbraco.Archetype/Models/ArchetypePreValueFieldset.cs
@@ -26,6 +26,9 @@ public class ArchetypePreValueFieldset
         [JsonProperty("label")]
         public string Label { get; set; }
 
+        [JsonProperty("previewImage")]
+        public string PreviewImage { get; set; }
+
         [JsonProperty("properties")]
         public IEnumerable<ArchetypePreValueProperty> Properties { get; set; }
 

diff --git a/app/controllers/controller.js b/app/controllers/controller.js
@@ -264,7 +264,8 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
                 alias: fieldset.alias,
                 label: fieldset.label,
                 icon: (fieldset.icon || "icon-document-dashed-line"), // default icon if none is chosen
-                group: fieldset.group ? fieldset.group.name : null
+                group: fieldset.group ? fieldset.group.name : null,
+                previewImage: fieldset.previewImage
             });
         });
         // sanity check
@@ -304,13 +305,22 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
 
     $scope.closeFieldsetPicker = function () {
         $scope.overlayMenu.show = false;
+        $scope.overlayMenu.fieldsetPreview = null;
     };
 
     $scope.pickFieldset = function (fieldsetAlias, $index) {
         $scope.closeFieldsetPicker();
         $scope.addRow(fieldsetAlias, $index);
     };    
-
+
+    $scope.openFieldsetPreview = function (fieldset) {
+        $scope.overlayMenu.fieldsetPreview = fieldset;
+    }
+
+    $scope.closeFieldsetPreview = function () {
+        $scope.overlayMenu.fieldsetPreview = null;
+    }
+
     $scope.addRow = function (fieldsetAlias, $index) {
         if ($scope.canAdd()) {
             if ($scope.model.config.fieldsets) {

diff --git a/app/langs/da-dk.js b/app/langs/da-dk.js
@@ -55,5 +55,8 @@
   "enableMemberGroups": "Aktivér medlems-grupper",
   "enableMemerGroupsDescription": "Tillad at fieldsets kun vises for specifikke medlems-grupper",
   "allowedMemberGroups": "Tilladte medlems-grupper",
-  "allowedMemberGroupsHelpText": "Vælg de medlems-grupper, der skal kunne se dette element. Hvis der ikke er valgt nogen, kan alle se elementet."
+  "allowedMemberGroupsHelpText": "Vælg de medlems-grupper, der skal kunne se dette element. Hvis der ikke er valgt nogen, kan alle se elementet.",
+  "previewFieldsetOpen": "(se eksempel)",
+  "previewFieldsetHeader": "Eksempel: ",
+  "previewFieldsetClose": "(luk eksempel)"
 }
diff --git a/app/langs/da.js b/app/langs/da.js
@@ -55,5 +55,8 @@
   "enableMemberGroups": "Aktivér medlems-grupper",
   "enableMemerGroupsDescription": "Tillad at fieldsets kun vises for specifikke medlems-grupper",
   "allowedMemberGroups": "Tilladte medlems-grupper",
-  "allowedMemberGroupsHelpText": "Vælg de medlems-grupper, der skal kunne se dette element. Hvis der ikke er valgt nogen, kan alle se elementet."
+  "allowedMemberGroupsHelpText": "Vælg de medlems-grupper, der skal kunne se dette element. Hvis der ikke er valgt nogen, kan alle se elementet.",
+  "previewFieldsetOpen": "(se eksempel)",
+  "previewFieldsetHeader": "Eksempel: ",
+  "previewFieldsetClose": "(luk eksempel)"
 }
diff --git a/app/less/archetype.less b/app/less/archetype.less
@@ -290,6 +290,12 @@
             overflow: visible;
             vertical-align: top;  
             height: 90px;        
+            .fieldsetPreviewOpen {
+                font-style: italic;
+                a:hover {
+                    text-decoration: underline;
+                }
+            }
         }
         ul.groups {
             display: block;
@@ -310,6 +316,24 @@
                 }
             }
         }
+
+        .fieldsetPreview {
+            .fieldsetPreviewClose {
+                font-style: italic;
+                font-size: 12px;
+                text-align: center;
+            }
+            .fieldsetPreviewImage {
+                padding: 6px 0px;
+                img {
+                    height: auto;
+                    max-width: 100%;
+                    vertical-align: middle;
+                    border: 0;
+                    cursor: zoom-in;
+                }
+            }
+        }
     }
 
     .settingsWrapper {
@@ -392,10 +416,10 @@
         small {
             margin-left: 5px;
         }
-        
+
         a {
             float: right;
-            
+
             img {
                 width: 35px;
             }
@@ -441,7 +465,8 @@
     .archetypeFieldsetOption {
         margin-bottom: 15px;
         margin-right: 15px;
-        input[type=text]{
+
+        input[type=text] {
             max-width: 100%;
             width: 100%;
         }
@@ -459,7 +484,7 @@
             margin-bottom: 5px;
         }
 
-        label{
+        label {
             width: 400px;
         }
     }
@@ -499,7 +524,7 @@
         label {
             width: 100%;
         }
-        
+
         input[type=text] {
             width: 100%;
         }
@@ -534,10 +559,10 @@
                     }
                 }
             }
-        }        
+        }
     }
 
-    .archetypeMaxFieldsets{
+    .archetypeMaxFieldsets {
         border: 1px solid #ddd;
         width: 40px;
         text-align: right;
@@ -550,7 +575,7 @@
 
     .archetypePropertyCollapser {
         margin-top: 10px;
-        
+
         div {
             margin-bottom: 10px;
             margin-right: 15px;
@@ -564,6 +589,10 @@
     .fieldsetIcon {
         margin-right: 10px;
     }
+
+    small {
+        color: #817f85;
+    }
 }
 
 .ui-sortable-placeholder {

diff --git a/app/views/archetype.config.html b/app/views/archetype.config.html
@@ -16,10 +16,12 @@ <h2 class="archetype-headline"><img src="../App_Plugins/Archetype/assets/logo_50
                     <div class="archetypeFieldsetOption">
                         <label for="archetypeFieldLabel_{{$index}}"><archetype-localize key="label">Label</archetype-localize></label>
                         <input type="text" id="archetypeFieldLabel_{{$index}}" ng-model="fieldset.label" on-keyup="autoPopulateAlias(fieldset)" />
+                        <small>The label shown to the editors when adding a new fieldset.</small>
                     </div>
                     <div class="archetypeFieldsetOption">
                         <label for="archetypeFieldAlias_{{$index}}"><archetype-localize key="alias">Alias</archetype-localize></label>
                         <input type="text" id="archetypeFieldAlias_{{$index}}" ng-model="fieldset.alias" on-keyup="markAliasDirty(fieldset)" required/>
+                        <small>The alias used to identify the fieldset when rendering.</small>
                     </div>
                     <div class="archetypeFieldsetOption" ng-show="archetypeConfigRenderModel.fieldsetGroups.length">
                         <label for="archetypeFieldsetGroup_{{$index}}"><archetype-localize key="fieldsetGroup">Group</archetype-localize></label>
@@ -28,6 +30,12 @@ <h2 class="archetype-headline"><img src="../App_Plugins/Archetype/assets/logo_50
                     <div class="archetypeFieldsetOption">
                         <label for="archetypeFieldLabelTemplate_{{$index}}"><archetype-localize key="labelTemplate">Label Template</archetype-localize></label>
                         <input type="text" id="archetypeFieldLabelTemplate_{{$index}}" ng-model="fieldset.labelTemplate" />
+                        <small>Generates labels per fieldset. Can contain property aliases, e.g. "Article: &#123;&#123;title&#125;&#125;".</small>
+                    </div>
+                    <div class="archetypeFieldsetOption">
+                        <label for="archetypeFieldPreview_{{$index}}">Preview image</label>
+                        <input type="text" id="archetypeFieldPreview_{{$index}}" ng-model="fieldset.previewImage" on-keyup="markAliasDirty(fieldset)" />
+                        <small>A relative path to a preview image, e.g. "/assets/fieldset.png".</small>
                     </div>
                     <div class="archetypeFieldsetOption" ng-show="archetypeConfigRenderModel.enableMultipleFieldsets">
                         <label for="archetypeFieldIcon_{{$index}}"><archetype-localize key="icon">Icon</archetype-localize></label>

diff --git a/app/views/archetype.default.html b/app/views/archetype.default.html
@@ -108,24 +108,45 @@
     <!-- Fieldset picker. -->
     <div class="usky-grid fieldsetPicker" ng-class="{withGroups: overlayMenu.fieldsetGroups.length > 1}" ng-if="overlayMenu.show">
         <div class="cell-tools-menu" ng-style="overlayMenu.style" delayed-mouseleave="closeFieldsetPicker()" archetype-click-outside="closeFieldsetPicker()">
-            <h5>
-                <archetype-localize key="addFieldset">Add an item</archetype-localize>
-            </h5>
-            <ul class="groups" ng-show="overlayMenu.fieldsetGroups.length > 1">
-                <li ng-repeat="fieldsetGroup in overlayMenu.fieldsetGroups" ng-class="{active: fieldsetGroup == overlayMenu.activeFieldsetGroup}">
-                    <a ng-click="overlayMenu.activeFieldsetGroup = fieldsetGroup">
-                        {{fieldsetGroup.name}}
-                    </a>
-                </li>
-            </ul>
-            <ul class="elements">
-                <li ng-repeat="fieldset in overlayMenu.activeFieldsetGroup.fieldsets">
-                    <a ng-click="pickFieldset(fieldset.alias, overlayMenu.index)" href>
-                        <i class="icon {{fieldset.icon}}"></i>
-                        {{fieldset.label}}
+            <div ng-show="!overlayMenu.fieldsetPreview">
+                <h5>
+                    <archetype-localize key="addFieldset">Add an item</archetype-localize>
+                </h5>
+                <ul class="groups" ng-show="overlayMenu.fieldsetGroups.length > 1">
+                    <li ng-repeat="fieldsetGroup in overlayMenu.fieldsetGroups" ng-class="{active: fieldsetGroup == overlayMenu.activeFieldsetGroup}">
+                        <a ng-click="overlayMenu.activeFieldsetGroup = fieldsetGroup">
+                            {{fieldsetGroup.name}}
+                        </a>
+                    </li>
+                </ul>
+                <ul class="elements">
+                    <li ng-repeat="fieldset in overlayMenu.activeFieldsetGroup.fieldsets">
+                        <a ng-click="pickFieldset(fieldset.alias, overlayMenu.index)" href>
+                            <i class="icon {{fieldset.icon}}"></i>
+                            {{fieldset.label}}
+                        </a>
+                        <div class="fieldsetPreviewOpen" ng-if="fieldset.previewImage">
+                            <a href ng-click="openFieldsetPreview(fieldset)"><archetype-localize key="previewFieldsetOpen">(see preview)</archetype-localize></a>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div ng-show="overlayMenu.fieldsetPreview" class="fieldsetPreview">
+                <h5>
+                    <archetype-localize key="previewFieldsetHeader">Preview: </archetype-localize>{{overlayMenu.fieldsetPreview.label}}
+                </h5>
+                <div class="fieldsetPreviewClose">
+                    <a href ng-click="closeFieldsetPreview()"><archetype-localize key="previewFieldsetClose">(close preview)</archetype-localize></a>
+                </div>
+                <div class="fieldsetPreviewImage">
+                    <a href="{{overlayMenu.fieldsetPreview.previewImage}}" target="_blank">
+                        <img src="{{overlayMenu.fieldsetPreview.previewImage}}" />
                     </a>
-                </li>
-            </ul>
+                </div>
+                <div class="fieldsetPreviewClose">
+                    <a href ng-click="closeFieldsetPreview()"><archetype-localize key="previewFieldsetClose">(close preview)</archetype-localize></a>
+                </div>
+            </div>
         </div>
     </div>
 </div>