From cd93e174941f9ef98c2d985344cb2006fdb71bc7 Mon Sep 17 00:00:00 2001 From: Tobias Klika Date: Thu, 21 Sep 2017 13:15:58 +0200 Subject: [PATCH 01/10] improve fieldset list layout and spacing --- app/less/archetype.less | 34 +++++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/app/less/archetype.less b/app/less/archetype.less index 190b47f..f6303e1 100644 --- a/app/less/archetype.less +++ b/app/less/archetype.less @@ -35,7 +35,7 @@ .fieldsetIcon { float: left; - padding: 0 4px 0 0; + padding: 0 10px 0 0; color: #333; vertical-align: text-bottom; } @@ -54,7 +54,6 @@ fieldset { border-bottom: 1px dashed #dddddd; padding: 0; - margin-bottom: 5px; clear: both; display: inline-block; width: 100%; @@ -93,10 +92,9 @@ .archetypeFieldsetLabel { position: relative; width: 100%; - min-height: 42px; .label-sub { - padding: 8px 0 8px 0; + padding: 18px 0; display: inline-block; min-height: 20px; /* this makes the header clickable when there's no icon and no text */ &.module-label { @@ -106,9 +104,9 @@ cursor: pointer; label { - span { - text-decoration: underline; - } + // span { + // text-decoration: underline; + // } &:hover { cursor: pointer; } @@ -129,7 +127,7 @@ } span { - font-weight: bold; + // font-weight: bold; &.menu-label { font-weight: normal; } } @@ -165,12 +163,22 @@ float: none; position: absolute; right: 15px; - top: 0; + top: 50%; + margin-top: -15px; + padding: 0; .icon { - color: #ddd; - padding: 2px; + display: inline-block; + height: 28px; + width: 28px; + line-height: 28px; + border-radius: 14px; + border: 1px solid #b6b6b6; + color: #5f5f5f; + background: white; font-size: 16px; + text-align: center; + margin-left: 4px; &:hover { color: #333; } @@ -216,6 +224,7 @@ padding: 12px 0 0 20px; background-color: #fff; border-radius: 0 0 0 5px; + line-height: 20px; form { margin-left:20px; @@ -275,6 +284,9 @@ list-style: none; margin-left: 0; } + li { + line-height: 0; + } .show-validation.ng-invalid .control-group.error .control-label { span { From 18935b4a696231b1007c65e05ecc2d0ca5755446 Mon Sep 17 00:00:00 2001 From: Tobias Klika Date: Thu, 21 Sep 2017 13:41:47 +0200 Subject: [PATCH 02/10] update control icons and do only show them on fieldset hover --- app/less/archetype.less | 35 +++++++++++++++++++++----------- app/views/archetype.default.html | 8 ++++---- 2 files changed, 27 insertions(+), 16 deletions(-) diff --git a/app/less/archetype.less b/app/less/archetype.less index f6303e1..b337078 100644 --- a/app/less/archetype.less +++ b/app/less/archetype.less @@ -36,7 +36,6 @@ .fieldsetIcon { float: left; padding: 0 10px 0 0; - color: #333; vertical-align: text-bottom; } @@ -152,10 +151,11 @@ overflow: hidden; text-overflow: ellipsis; } - &.dimmed { - i, span { - color: #d9d9d9 !important; - } + } + + &.dimmed { + label { + color: #d9d9d9 !important; } } @@ -166,6 +166,10 @@ top: 50%; margin-top: -15px; padding: 0; + opacity: 0; + transition: opacity .15s ease-in-out; + -moz-transition: opacity .15s ease-in-out; + -webkit-transition: opacity .15s ease-in-out; .icon { display: inline-block; @@ -179,28 +183,35 @@ font-size: 16px; text-align: center; margin-left: 4px; + &:hover { - color: #333; + background: #35c786; + border-color: #35c786; + color: white; } - &.icon-delete:hover { - color: #b94a48; + &.icon-trash:hover { + background: #fe5b57; + border-color: #fe5b57; } &.icon-disabled { cursor: default; &:hover { color: #ddd; + background: white; + border-color: #b6b6b6; } } &.icon-active { - color: #333; + color: #bbb; &:hover { - color: #333; + color: white; } } } } - - &:hover { + + &:hover .archetypeEditorControls { + opacity: 1; } } diff --git a/app/views/archetype.default.html b/app/views/archetype.default.html index 087b09d..3478bfa 100644 --- a/app/views/archetype.default.html +++ b/app/views/archetype.default.html @@ -22,10 +22,10 @@ + +
+ + + +
+
From 81881a57344c4ac42ae011e86d1d149d0790a329 Mon Sep 17 00:00:00 2001 From: Tobias Klika Date: Thu, 28 Sep 2017 14:05:09 +0200 Subject: [PATCH 05/10] allow 100% width for fieldset labels and add background for controls on the right --- app/less/archetype.less | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/app/less/archetype.less b/app/less/archetype.less index f805f94..92f7094 100644 --- a/app/less/archetype.less +++ b/app/less/archetype.less @@ -52,6 +52,7 @@ fieldset { border-bottom: 1px dashed #dddddd; + background: white; padding: 0; clear: both; display: inline-block; @@ -142,10 +143,8 @@ label { margin-bottom: 0; margin-left: 18px; - white-space: nowrap; padding: 0; - width: ~"calc(100% - 144px)"; - position: absolute; + display: block; span { display: block; overflow: hidden; @@ -162,14 +161,31 @@ .archetypeEditorControls { float: none; position: absolute; - right: 15px; - top: 50%; - margin-top: -15px; + right: 0; + top: 0; + height: 100%; padding: 0; + display: flex; + align-items: center; opacity: 0; transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -webkit-transition: opacity .15s ease-in-out; + background: white; + + &:before + { + content: ' '; + position: absolute; + display: block; + left: -40px; + width: 40px; + top: 0; + bottom: 0; + background: -webkit-linear-gradient(90deg, rgba(255,255,255,0), white); + background: -moz-linear-gradient(90deg, rgba(255,255,255,0), white); + background: linear-gradient(90deg, rgba(255,255,255,0), white); + } .icon { display: inline-block; @@ -177,28 +193,26 @@ width: 28px; line-height: 28px; border-radius: 14px; - border: 1px solid #b6b6b6; + border: 1px solid #d6d6d6; color: #5f5f5f; background: white; font-size: 16px; text-align: center; - margin-left: 4px; + margin-left: 8px; &:hover { - background: #35c786; - border-color: #35c786; - color: white; + background: #f3f3f5; } &.icon-trash:hover { background: #fe5b57; border-color: #fe5b57; + color: white; } &.icon-disabled { cursor: default; &:hover { color: #ddd; background: white; - border-color: #b6b6b6; } } &.icon-active { From da1057c681c84a3b19ec0c9571195d3ebe2a42bf Mon Sep 17 00:00:00 2001 From: Tobias Klika Date: Thu, 28 Sep 2017 14:14:16 +0200 Subject: [PATCH 06/10] fix style for nested archetype fieldsets --- app/less/archetype.less | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/app/less/archetype.less b/app/less/archetype.less index 92f7094..415382b 100644 --- a/app/less/archetype.less +++ b/app/less/archetype.less @@ -52,7 +52,6 @@ fieldset { border-bottom: 1px dashed #dddddd; - background: white; padding: 0; clear: both; display: inline-block; @@ -92,6 +91,7 @@ .archetypeFieldsetLabel { position: relative; width: 100%; + background: white; .label-sub { padding: 18px 0; @@ -173,8 +173,7 @@ -webkit-transition: opacity .15s ease-in-out; background: white; - &:before - { + &:before { content: ' '; position: absolute; display: block; @@ -251,6 +250,20 @@ border-top: 1px dashed #e0e0e0; line-height: 20px; + .archetypeFieldsetLabel { + background: #fafafa; + } + + .archetypeEditorControls { + background: #fafafa; + + &:before { + background: -webkit-linear-gradient(90deg, rgba(250,250,250,0), #fafafa); + background: -moz-linear-gradient(90deg, rgba(250,250,250,0), #fafafa); + background: linear-gradient(90deg, rgba(250,250,250,0), #fafafa); + } + } + form { margin-left:20px; From 46bbf24edf219224b6515e7de6e307d11bc7d130 Mon Sep 17 00:00:00 2001 From: Tobias Klika Date: Fri, 29 Sep 2017 10:34:34 +0200 Subject: [PATCH 07/10] limit fieldset label to 2 lines --- app/less/archetype.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/less/archetype.less b/app/less/archetype.less index 415382b..48a8e52 100644 --- a/app/less/archetype.less +++ b/app/less/archetype.less @@ -149,6 +149,10 @@ display: block; overflow: hidden; text-overflow: ellipsis; + max-height: 40px; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + display: -webkit-box; } } From 93659e5a22f261ad79a3428fa9de9cd9577bd5d2 Mon Sep 17 00:00:00 2001 From: Tobias Klika Date: Mon, 2 Oct 2017 15:40:04 +0200 Subject: [PATCH 08/10] increase char limit for RTE label generator from 50 to 160 --- app/services/archetypeLabelService.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/services/archetypeLabelService.js b/app/services/archetypeLabelService.js index 30a404c..e27c9d0 100644 --- a/app/services/archetypeLabelService.js +++ b/app/services/archetypeLabelService.js @@ -443,7 +443,7 @@ angular.module('umbraco.services').factory('archetypeLabelService', function (ar function coreTinyMce(value, scope, args) { if(!args.contentLength) { - args = {contentLength: 50} + args = {contentLength: 160} } var suffix = ""; From 7d155ee17611abb69d59afc42a8b0964ce6ff042 Mon Sep 17 00:00:00 2001 From: Tobias Klika Date: Mon, 2 Oct 2017 15:49:37 +0200 Subject: [PATCH 09/10] force visibility of editor controls if a fieldset collapser is open --- app/less/archetype.less | 4 ++++ app/views/archetype.default.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/less/archetype.less b/app/less/archetype.less index 48a8e52..62bb8e3 100644 --- a/app/less/archetype.less +++ b/app/less/archetype.less @@ -232,6 +232,10 @@ } } + &.is-open > .archetypeFieldsetLabel .archetypeEditorControls { + opacity: 1; + } + .archetypePropertyError { margin-bottom: 5px; padding-top: 3px; diff --git a/app/views/archetype.default.html b/app/views/archetype.default.html index 9939c6d..591e5a8 100644 --- a/app/views/archetype.default.html +++ b/app/views/archetype.default.html @@ -20,7 +20,7 @@
  • -
    +
    From c229cc99531ce8a915e5725358055f6a6f05812d Mon Sep 17 00:00:00 2001 From: Tobias Klika Date: Tue, 3 Oct 2017 14:32:34 +0200 Subject: [PATCH 10/10] correct layout for cross dragging between archetype instances --- app/controllers/controller.js | 3 ++- app/less/archetype.less | 34 +++++++++++++++++++++----------- app/services/archetypeService.js | 8 ++++++++ app/views/archetype.default.html | 14 ++++++------- 4 files changed, 40 insertions(+), 19 deletions(-) diff --git a/app/controllers/controller.js b/app/controllers/controller.js index 2b2c48c..b211585 100644 --- a/app/controllers/controller.js +++ b/app/controllers/controller.js @@ -114,6 +114,7 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc }, start: function(ev, ui) { + archetypeService.getEditors().addClass('archetypeDragging'); archetypeService.storeEditors(ui.item.parent()); $scope.$apply(function() { draggedParent = ui.item.parent(); @@ -175,7 +176,6 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc }, stop: function (ev, ui) { - // Done sorting. draggedParent.scope().doingSort = false; @@ -190,6 +190,7 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc } archetypeService.restoreEditors(parent); + archetypeService.getEditors().removeClass('archetypeDragging'); } }; diff --git a/app/less/archetype.less b/app/less/archetype.less index 62bb8e3..b3aea62 100644 --- a/app/less/archetype.less +++ b/app/less/archetype.less @@ -321,14 +321,15 @@ cursor: pointer; &:hover { - background: #35c786; - border-color: #35c786; + background: #00aea2; + border-color: #00aea2; color: white; } } .archetypeEmptyContent { text-align: center; + margin-bottom: 20px; span { display: inline-block; @@ -341,6 +342,26 @@ } } + .archetypeCrossDraggable + .archetypeEmptyContent { + margin-top: -42px; + } + + &.archetypeDragging .archetypeCrossDraggable + .archetypeEmptyContent { + display: none; + } + + // Necessary to ensure empty lists can be dropped onto when sorting nested fieldsets. + .archetypeSortable.archetypeEmpty.archetypeCrossDraggable { + min-height: 40px; + border: 1px dashed transparent; + } + + &.archetypeDragging .archetypeSortable.archetypeEmpty.archetypeCrossDraggable { + min-height: 56px; + border-color: #dddddd; + } + + .archetypeCollapser .archetypeEmptyContent span { background: #f2f2f2; } @@ -458,15 +479,6 @@ } } } - - // Necessary to ensure empty lists can be dropped onto when sorting nested fieldsets. - .archetypeSortable.archetypeEmpty { - &.archetypeCrossDraggable { - min-height: 42px; - border: 1px dashed #dddddd; - margin-top: 5px; - } - } } .archetypeEditor, .archetypeConfig { diff --git a/app/services/archetypeService.js b/app/services/archetypeService.js index 6d74999..40af6e4 100644 --- a/app/services/archetypeService.js +++ b/app/services/archetypeService.js @@ -2,6 +2,7 @@ angular.module('umbraco.services').factory('archetypeService', function () { // Variables. var draggedRteArchetype; + var archetypeEditors; var rteClass = ".archetypeEditor .umb-rte textarea"; var editorSettings = {}; var disabledSortables = []; @@ -215,6 +216,13 @@ angular.module('umbraco.services').factory('archetypeService', function () { sortable.enable(); }); disabledSortables = []; + }, + // Get all active archetype editors on the current page + getEditors: function() { + if (archetypeEditors == null) { + archetypeEditors = $('.archetypeEditor'); + } + return archetypeEditors; } } }); \ No newline at end of file diff --git a/app/views/archetype.default.html b/app/views/archetype.default.html index 591e5a8..f1c0154 100644 --- a/app/views/archetype.default.html +++ b/app/views/archetype.default.html @@ -2,13 +2,6 @@
    - -
    - - Add an item - -
    -
    Required
    @@ -108,6 +101,13 @@
+ +
+ + Add an item + +
+