From 718f2deb478c957f62d07a772150ff19235f663c Mon Sep 17 00:00:00 2001 From: kjac Date: Fri, 9 Jun 2017 20:19:17 +0200 Subject: [PATCH 1/5] Add preview image to fieldsets See #374 --- .../Models/ArchetypePreValueFieldset.cs | 3 + app/controllers/controller.js | 14 ++++- app/less/archetype.less | 37 ++++++++++--- app/views/archetype.config.html | 8 +++ app/views/archetype.default.html | 55 +++++++++++++------ 5 files changed, 89 insertions(+), 28 deletions(-) diff --git a/app/Umbraco/Umbraco.Archetype/Models/ArchetypePreValueFieldset.cs b/app/Umbraco/Umbraco.Archetype/Models/ArchetypePreValueFieldset.cs index e97206b..84fa1d0 100644 --- 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 Properties { get; set; } diff --git a/app/controllers/controller.js b/app/controllers/controller.js index 6c274f5..6788cf2 100644 --- 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/less/archetype.less b/app/less/archetype.less index 7b597e6..19efd49 100644 --- 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,16 @@ } } } + + .fieldsetPreview { + .fieldsetPreviewClose { + font-size: 12px; + text-align: center; + } + .fieldsetPreviewImage { + padding: 6px 0px; + } + } } .settingsWrapper { @@ -390,10 +406,10 @@ small { margin-left: 5px; } - + a { float: right; - + img { width: 35px; } @@ -439,7 +455,8 @@ .archetypeFieldsetOption { margin-bottom: 15px; margin-right: 15px; - input[type=text]{ + + input[type=text] { max-width: 100%; width: 100%; } @@ -457,7 +474,7 @@ margin-bottom: 5px; } - label{ + label { width: 400px; } } @@ -497,7 +514,7 @@ label { width: 100%; } - + input[type=text] { width: 100%; } @@ -532,10 +549,10 @@ } } } - } + } } - .archetypeMaxFieldsets{ + .archetypeMaxFieldsets { border: 1px solid #ddd; width: 40px; text-align: right; @@ -548,7 +565,7 @@ .archetypePropertyCollapser { margin-top: 10px; - + div { margin-bottom: 10px; margin-right: 15px; @@ -562,6 +579,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 index bc5755e..eaec3fa 100644 --- a/app/views/archetype.config.html +++ b/app/views/archetype.config.html @@ -16,10 +16,12 @@

+ The label shown to the editors when adding a new fieldset.
+ The alias used to identify the fieldset when rendering.
@@ -28,6 +30,12 @@

+ Generates labels per fieldset. Can contain property aliases, e.g. "Article: {{title}}". +

+
+ + + A relative path to a preview image, e.g. "/assets/fieldset.png" (max 360px wide).
diff --git a/app/views/archetype.default.html b/app/views/archetype.default.html index f3b8baf..6267114 100644 --- a/app/views/archetype.default.html +++ b/app/views/archetype.default.html @@ -104,24 +104,43 @@
-
- Add an item -
- - +
+
+ Add an item +
+ + +
+
+
+ Preview: {{overlayMenu.fieldsetPreview.label}} +
+
+ (close preview) +
+
+ +
+
+ (close preview) +
+
From 20fa1efc8e4cf26ef7220c03321977168c4cf1a3 Mon Sep 17 00:00:00 2001 From: kjac Date: Fri, 9 Jun 2017 21:04:44 +0200 Subject: [PATCH 2/5] A bit more styling + localization --- app/langs/da-dk.js | 5 ++++- app/langs/da.js | 5 ++++- app/less/archetype.less | 1 + 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/app/langs/da-dk.js b/app/langs/da-dk.js index 7f147e9..0c5a649 100644 --- 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 index 7f147e9..0c5a649 100644 --- 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 index 19efd49..1fda5ec 100644 --- a/app/less/archetype.less +++ b/app/less/archetype.less @@ -319,6 +319,7 @@ .fieldsetPreview { .fieldsetPreviewClose { + font-style: italic; font-size: 12px; text-align: center; } From f79849cf8a8f07b80364be45b4ec655dc2fc9ee9 Mon Sep 17 00:00:00 2001 From: kjac Date: Sat, 10 Jun 2017 08:49:59 +0200 Subject: [PATCH 3/5] Open preview image in a new window when clicked --- app/less/archetype.less | 7 +++++++ app/views/archetype.default.html | 4 +++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/app/less/archetype.less b/app/less/archetype.less index 1fda5ec..9e2a4cf 100644 --- a/app/less/archetype.less +++ b/app/less/archetype.less @@ -325,6 +325,13 @@ } .fieldsetPreviewImage { padding: 6px 0px; + img { + height: auto; + max-width: 100%; + vertical-align: middle; + border: 0; + cursor: zoom-in; + } } } } diff --git a/app/views/archetype.default.html b/app/views/archetype.default.html index 240f575..6af9523 100644 --- a/app/views/archetype.default.html +++ b/app/views/archetype.default.html @@ -139,7 +139,9 @@
(close preview)
- + + +
(close preview) From c4f88ab5286890561e32b7b8409a2903f4a19729 Mon Sep 17 00:00:00 2001 From: kjac Date: Mon, 12 Jun 2017 22:29:16 +0200 Subject: [PATCH 4/5] Remove max width comment --- app/views/archetype.config.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/archetype.config.html b/app/views/archetype.config.html index eaec3fa..2096998 100644 --- a/app/views/archetype.config.html +++ b/app/views/archetype.config.html @@ -35,7 +35,7 @@

- A relative path to a preview image, e.g. "/assets/fieldset.png" (max 360px wide). + A relative path to a preview image, e.g. "/assets/fieldset.png".

From 3cba5677bfd2e7ffca7ab12c8ce8ea868c963a7b Mon Sep 17 00:00:00 2001 From: Kenn Jacobsen Date: Tue, 13 Jun 2017 08:25:05 +0200 Subject: [PATCH 5/5] Whoops... the preview image shouldn't be mandatory --- app/views/archetype.config.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/archetype.config.html b/app/views/archetype.config.html index 2096998..e44f1c7 100644 --- a/app/views/archetype.config.html +++ b/app/views/archetype.config.html @@ -34,7 +34,7 @@

- + A relative path to a preview image, e.g. "/assets/fieldset.png".