From a0eba5a9d82f565e8f087853898da11b80c1e65d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 23 Oct 2018 15:02:56 +0200 Subject: [PATCH 01/21] wip testing ideas --- .../content/umbtabbedcontent.directive.js | 8 ++++++++ .../property/umbpropertyeditor.directive.js | 2 +- .../content/umb-tabbed-content.html | 19 ++++++++++++++++++- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js index 015255c577..e00b333a2f 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js @@ -13,6 +13,14 @@ //expose the property/methods for other directives to use this.content = $scope.content; + $scope.activeVariant = _.find(this.content.variants, variant => { + return variant.active; + }); + + $scope.unlockInvariantValue = function(property) { + property.unlockInvariantValue = !property.unlockInvariantValue; + }; + $scope.$watch("tabbedContentForm.$dirty", function (newValue, oldValue) { if (newValue === true) { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyeditor.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyeditor.directive.js index 0aa2dc02c3..32cbbb31ec 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyeditor.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyeditor.directive.js @@ -12,7 +12,7 @@ function umbPropEditor(umbPropEditorHelper) { scope: { model: "=", isPreValue: "@", - preview: "@" + preview: "<" }, require: "^^form", diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html index b125457ab0..68d5d3d41c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html @@ -9,7 +9,24 @@
- + +
+ +
+
Unlock to change on all languages
+
Changes to {{property.label}} will be copied to all languages
+
+ +
+ Changes to {{property.label}} will be copied to all languages +
+
+ + + +
From 60b575825d8a464a636e75155945457b5000cd1a Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 23 Oct 2018 14:22:17 +0100 Subject: [PATCH 02/21] Adds new WIP attribute only based directive disable-tabindex - which sets all child input elements to use a tabindex of -1 --- .../util/disabletabindex.directive.js | 28 +++++++++++++++++++ .../views/components/umb-groups-builder.html | 13 +++++---- 2 files changed, 35 insertions(+), 6 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js new file mode 100644 index 0000000000..7f9a0fd2b3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js @@ -0,0 +1,28 @@ +angular.module("umbraco.directives") + .directive('disableTabindex', function ($window, $timeout, windowResizeListener) { + + return { + restrict: 'A', //Can only be used as an attribute + link: function (scope, element, attrs) { + + //When the current element DOM subtree is modified + element.on('DOMSubtreeModified', function(e){ + //Check if any child items in e.target contain an input + var jqLiteEl = angular.element(e.target); + var childInputs = jqLiteEl.find('input'); + + console.log('jQLite childInputs', childInputs); + + //For each item in childInputs - override or set HTML attribute tabindex="-1" + angular.forEach(childInputs, function(element){ + console.log('item in loop', element); + + //TODO: Note we updating way too many times from the DOMSubtreeModified event - is this expensive? + angular.element(element).attr('tabindex', '-1'); + }); + + }); + + } + }; +}); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html index 2a5bc4a572..8732da91e7 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html @@ -157,7 +157,7 @@
{{propertyTypeForm.groupName.errorMsg}}
- +
@@ -229,11 +229,12 @@
- - + + From 515f183b28f3e935250f879ca131290ee909d276 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 23 Oct 2018 16:00:53 +0200 Subject: [PATCH 03/21] make default language bold in selectors --- src/Umbraco.Web.UI.Client/src/less/components/editor.less | 1 - .../src/views/components/application/umb-navigation.html | 2 +- .../src/views/components/editor/umb-editor-content-header.html | 2 +- src/Umbraco.Web.UI.Client/src/views/languages/overview.html | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less index f045b0adca..d699193c24 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less @@ -201,7 +201,6 @@ a.umb-variant-switcher__toggle { .umb-variant-switcher__name { display: block; - font-weight: bold; } .umb-variant-switcher__state { diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html index 570ea3990b..ddb0396f34 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html @@ -11,7 +11,7 @@  
- {{language.name}} + {{language.name}}
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html index 149fccd00a..999176f608 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html @@ -41,7 +41,7 @@ - {{variant.language.name}} + {{variant.language.name}}
Open in split view
diff --git a/src/Umbraco.Web.UI.Client/src/views/languages/overview.html b/src/Umbraco.Web.UI.Client/src/views/languages/overview.html index dfec56fbc0..c55ce83417 100644 --- a/src/Umbraco.Web.UI.Client/src/views/languages/overview.html +++ b/src/Umbraco.Web.UI.Client/src/views/languages/overview.html @@ -41,7 +41,7 @@ - {{ language.name }} + {{ language.name }} {{ language.culture }} From a8ac9cf8f28f99f0ebf76e5676b5e1697876e06e Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 23 Oct 2018 15:13:35 +0100 Subject: [PATCH 04/21] MDN JS Docs suggested to use MutationObsorver as oppsoed to deprecated DOMSubtreeModified event --- .../util/disabletabindex.directive.js | 54 ++++++++++++++----- 1 file changed, 42 insertions(+), 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js index 7f9a0fd2b3..64edcf5955 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js @@ -5,22 +5,52 @@ angular.module("umbraco.directives") restrict: 'A', //Can only be used as an attribute link: function (scope, element, attrs) { - //When the current element DOM subtree is modified - element.on('DOMSubtreeModified', function(e){ - //Check if any child items in e.target contain an input - var jqLiteEl = angular.element(e.target); - var childInputs = jqLiteEl.find('input'); + //Use DOM Mutation Observer + //Select the node that will be observed for mutations (native DOM element not jQLite version) + var targetNode = element[0]; - console.log('jQLite childInputs', childInputs); + // Options for the observer (which mutations to observe) + var config = { attributes: false, childList: true, subtree: false }; - //For each item in childInputs - override or set HTML attribute tabindex="-1" - angular.forEach(childInputs, function(element){ - console.log('item in loop', element); + // Callback function to execute when mutations are observed + var callback = function(mutationsList, observer) { + for(var mutation of mutationsList) { - //TODO: Note we updating way too many times from the DOMSubtreeModified event - is this expensive? - angular.element(element).attr('tabindex', '-1'); - }); + console.log('mutation', mutation); + //DOM items have been added or removed + if (mutation.type == 'childList') { + + //Check if any child items in mutation.target contain an input + var jqLiteEl = angular.element(mutation.target); + var childInputs = jqLiteEl.find('input'); + + //For each item in childInputs - override or set HTML attribute tabindex="-1" + angular.forEach(childInputs, function(element){ + console.log('item in loop', element); + + //TODO: Note we updating way too many times from the DOMSubtreeModified event - is this expensive? + angular.element(element).attr('tabindex', '-1'); + }); + } + } + }; + + // Create an observer instance linked to the callback function + var observer = new MutationObserver(callback); + + // Start observing the target node for configured mutations + //GO GO GO + observer.observe(targetNode, config); + + + //TODO: Unsure if we need to do this - to ensure the browser not trying to notify us still + //When we browse away from the page + element.on('$destroy', function(e){ + console.log('element with disable-tabindex attribute is destoryed'); + + //Remove/stop the observer + observer.disconnect(); }); } From b20acebe6a4e48f5d7c96b2c833d28442d47aa2e Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 23 Oct 2018 15:23:36 +0100 Subject: [PATCH 05/21] Cleanup unused DI stuff in this directive --- .../src/common/directives/util/disabletabindex.directive.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js index 64edcf5955..624404c641 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js @@ -1,5 +1,5 @@ angular.module("umbraco.directives") - .directive('disableTabindex', function ($window, $timeout, windowResizeListener) { + .directive('disableTabindex', function () { return { restrict: 'A', //Can only be used as an attribute From 79e3a35869fcc8bb591b9dd4b148e5a8c1d9e98d Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 23 Oct 2018 16:03:49 +0100 Subject: [PATCH 06/21] WIP - Ensures the default language variant is always first then the rest of the variants are organised by A-Z --- .../Mapping/ContentItemDisplayVariationResolver.cs | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/Umbraco.Web/Models/Mapping/ContentItemDisplayVariationResolver.cs b/src/Umbraco.Web/Models/Mapping/ContentItemDisplayVariationResolver.cs index a627eab184..562797e3e3 100644 --- a/src/Umbraco.Web/Models/Mapping/ContentItemDisplayVariationResolver.cs +++ b/src/Umbraco.Web/Models/Mapping/ContentItemDisplayVariationResolver.cs @@ -52,6 +52,18 @@ namespace Umbraco.Web.Models.Mapping variant.Name = source.GetCultureName(x.IsoCode); } + //Put the default language first in the list & then sort rest by a-z + var defaultLang = variants.SingleOrDefault(x => x.Language.IsDefault); + + //Remove the default lang from the list for now + variants.Remove(defaultLang); + + //Sort the remaining languages a-z + variants.OrderBy(x => x.Language.Name); + + //Insert the default lang as the first item + variants.Insert(0, defaultLang); + return variants; } return result; From b95a994f94339a22701867565f8855d9fae1f262 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 24 Oct 2018 09:12:09 +0200 Subject: [PATCH 07/21] set opacity and disabled cursor when property is locked --- src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../src/less/utilities/theme/_opacity.less | 19 +++++++++++++++++++ .../content/umb-tabbed-content.html | 10 ++++++---- 3 files changed, 26 insertions(+), 4 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/less/utilities/theme/_opacity.less diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index ac8279e3ab..f5a05c20ee 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -168,6 +168,7 @@ // Utilities @import "utilities/layout/_display.less"; +@import "utilities/theme/_opacity.less"; @import "utilities/typography/_text-decoration.less"; @import "utilities/typography/_white-space.less"; @import "utilities/_flexbox.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/theme/_opacity.less b/src/Umbraco.Web.UI.Client/src/less/utilities/theme/_opacity.less new file mode 100644 index 0000000000..4550827cdc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/utilities/theme/_opacity.less @@ -0,0 +1,19 @@ +/* + + Opacity + +*/ + +.o-100 { opacity: 1; } +.o-90 { opacity: 0.9; } +.o-80 { opacity: 0.8; } +.o-70 { opacity: 0.7; } +.o-60 { opacity: 0.6; } +.o-50 { opacity: 0.5; } +.o-40 { opacity: 0.4; } +.o-30 { opacity: 0.3; } +.o-20 { opacity: 0.2; } +.o-10 { opacity: 0.1; } +.o-05 { opacity: 0.05; } +.o-025 { opacity: 0.025; } +.o-0 { opacity: 0; } \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html index 68d5d3d41c..9ab8c509fd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html @@ -22,10 +22,12 @@ - - +
+ + +
From c94775608aaaec61955e614c07af77e4c277d71e Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 24 Oct 2018 09:18:26 +0100 Subject: [PATCH 08/21] When returning a collection of languages - such as through the GetAllLanguages API Controller call the model mapping ensures that rather than order by name we, also put the default lang first then order a-z --- .../Models/Mapping/LanguageMapperProfile.cs | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web/Models/Mapping/LanguageMapperProfile.cs b/src/Umbraco.Web/Models/Mapping/LanguageMapperProfile.cs index b305ee2824..6dd6135329 100644 --- a/src/Umbraco.Web/Models/Mapping/LanguageMapperProfile.cs +++ b/src/Umbraco.Web/Models/Mapping/LanguageMapperProfile.cs @@ -28,7 +28,21 @@ namespace Umbraco.Web.Models.Mapping { public IEnumerable Convert(IEnumerable source, IEnumerable destination, ResolutionContext context) { - return source.Select(x => context.Mapper.Map(x, null, context)).OrderBy(x => x.Name); + var langs = source.Select(x => context.Mapper.Map(x, null, context)).ToList(); + + //Put the default language first in the list & then sort rest by a-z + var defaultLang = langs.SingleOrDefault(x => x.IsDefault); + + //Remove the default lang from the list for now + langs.Remove(defaultLang); + + //Sort the remaining languages a-z + langs.OrderBy(x => x.Name); + + //Insert the default lang as the first item + langs.Insert(0, defaultLang); + + return langs; } } } From 30c312c4b09f19c23a34f73dd7467d3ab2b8f87c Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 24 Oct 2018 10:20:10 +0100 Subject: [PATCH 09/21] CSS & DOM element for overlay to prevent double click through to undelying input element --- .../src/less/components/umb-property-editor.less | 15 +++++++++++++++ .../components/property/umb-property-editor.html | 1 + 2 files changed, 16 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less index cbea6987e7..5c681d78a8 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less @@ -1,3 +1,18 @@ .umb-property-editor.-not-clickable { pointer-events: none; } + +.umb-property-editor { + position:relative; +} + +.umb-property-editor .overlay { + background: rgba(255,0,0,0.5); + display: block; + position: absolute; + top:0; + left:0; + height:100%; + width:100%; + cursor: not-allowed; +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html index 13a5491184..22d5764da4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html @@ -1,3 +1,4 @@
+
From ba0d96ce2a2e8d6e235b931a66fe450e7d68e99b Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 24 Oct 2018 10:36:45 +0100 Subject: [PATCH 10/21] WIP for CSS overlay click through prevention stuff with Z-indexes --- .../src/less/components/umb-property-editor.less | 13 ++++++++++--- .../components/property/umb-property-editor.html | 4 ++-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less index 5c681d78a8..c1268b3410 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less @@ -1,13 +1,18 @@ .umb-property-editor.-not-clickable { - pointer-events: none; + // pointer-events: none; } .umb-property-editor { position:relative; } -.umb-property-editor .overlay { - background: rgba(255,0,0,0.5); +.umb-property-editor__view{ + z-index:1; + position:relative; +} + +.umb-property-editor__overlay { + background: rgba(255,0,255,0.5); display: block; position: absolute; top:0; @@ -15,4 +20,6 @@ height:100%; width:100%; cursor: not-allowed; + user-select: none; + z-index:2; } \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html index 22d5764da4..4b43d9634c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html @@ -1,4 +1,4 @@
-
-
+
+
From 62716fb417217ad86c1c21086c95976d165b5a52 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 24 Oct 2018 11:03:41 +0100 Subject: [PATCH 11/21] WIP disable tab index directive --- .../util/disabletabindex.directive.js | 85 ++++++++++++------- .../less/components/umb-property-editor.less | 1 - .../content/umb-tabbed-content.html | 10 +-- .../property/umb-property-editor.html | 6 +- .../views/components/umb-groups-builder.html | 3 +- 5 files changed, 64 insertions(+), 41 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js index 624404c641..8a32f3b089 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js @@ -3,55 +3,78 @@ angular.module("umbraco.directives") return { restrict: 'A', //Can only be used as an attribute + scope: { disableTabindex: "<"}, link: function (scope, element, attrs) { - //Use DOM Mutation Observer - //Select the node that will be observed for mutations (native DOM element not jQLite version) - var targetNode = element[0]; + function enableTest(){ + //Add in observer code - // Options for the observer (which mutations to observe) - var config = { attributes: false, childList: true, subtree: false }; + //Use DOM Mutation Observer + //Select the node that will be observed for mutations (native DOM element not jQLite version) + var targetNode = element[0]; - // Callback function to execute when mutations are observed - var callback = function(mutationsList, observer) { - for(var mutation of mutationsList) { + // Options for the observer (which mutations to observe) + var config = { attributes: false, childList: true, subtree: false }; - console.log('mutation', mutation); + // Callback function to execute when mutations are observed + var callback = function(mutationsList, observer) { + for(var mutation of mutationsList) { - //DOM items have been added or removed - if (mutation.type == 'childList') { + console.log('mutation', mutation); - //Check if any child items in mutation.target contain an input - var jqLiteEl = angular.element(mutation.target); - var childInputs = jqLiteEl.find('input'); + //DOM items have been added or removed + if (mutation.type == 'childList') { - //For each item in childInputs - override or set HTML attribute tabindex="-1" - angular.forEach(childInputs, function(element){ - console.log('item in loop', element); + //Check if any child items in mutation.target contain an input + var jqLiteEl = angular.element(mutation.target); + var childInputs = jqLiteEl.find('input'); - //TODO: Note we updating way too many times from the DOMSubtreeModified event - is this expensive? - angular.element(element).attr('tabindex', '-1'); - }); + //For each item in childInputs - override or set HTML attribute tabindex="-1" + angular.forEach(childInputs, function(element){ + console.log('item in loop', element); + + //TODO: Get existing element & it's tabindex (if any set) + + + //TODO: Note we updating way too many times from the DOMSubtreeModified event - is this expensive? + angular.element(element).attr('tabindex', '-1'); + }); + } } - } + }; + + // Create an observer instance linked to the callback function + var observer = new MutationObserver(callback); + + // Start observing the target node for configured mutations + //GO GO GO + observer.observe(targetNode, config); }; - // Create an observer instance linked to the callback function - var observer = new MutationObserver(callback); - // Start observing the target node for configured mutations - //GO GO GO - observer.observe(targetNode, config); + scope.$watch('disableTabindex',(newVal, oldVal) =>{ + console.log('new val', newVal); + + if(newVal === true){ + enableTest(); + }else{ + + } + }); + + + + //TODO: Unsure if we need to do this - to ensure the browser not trying to notify us still //When we browse away from the page - element.on('$destroy', function(e){ - console.log('element with disable-tabindex attribute is destoryed'); + // element.on('$destroy', function(e){ + // console.log('element with disable-tabindex attribute is destoryed'); - //Remove/stop the observer - observer.disconnect(); - }); + // //Remove/stop the observer + // observer.disconnect(); + // }); } }; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less index c1268b3410..b019892a9f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less @@ -12,7 +12,6 @@ } .umb-property-editor__overlay { - background: rgba(255,0,255,0.5); display: block; position: absolute; top:0; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html index 9ab8c509fd..7663aa8997 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html @@ -9,9 +9,9 @@
- -
- + +
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html index 4b43d9634c..8674e4f6d3 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html @@ -1,4 +1,6 @@
-
-
+
+
+
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html index 8732da91e7..c976899cb8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html @@ -232,8 +232,7 @@ + preview="true"> From a5b7e8b0ae1240d3d01a2b6453a216e80c6f45c4 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 24 Oct 2018 11:57:02 +0100 Subject: [PATCH 12/21] WIP put the tabindex back to what it was before --- .../util/disabletabindex.directive.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js index 8a32f3b089..71d9ff0e5d 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js @@ -6,6 +6,8 @@ angular.module("umbraco.directives") scope: { disableTabindex: "<"}, link: function (scope, element, attrs) { + var tabIndexesToRollback = []; + function enableTest(){ //Add in observer code @@ -34,7 +36,17 @@ angular.module("umbraco.directives") console.log('item in loop', element); //TODO: Get existing element & it's tabindex (if any set) + //Check if the element has an existing tab index + //If so store in a collection (that when this directive is disabled/toggled) + //The tabindex is returned back to normal + var currentTabIndex = angular.element(element).attr('tabindex'); + console.log('currentTabIndex', currentTabIndex); + if(currentTabIndex){ + //A value has been set - need to track it + var itemToRevert = { dom: element, tabindex: currentTabIndex }; + tabIndexesToRollback.push(itemToRevert); + } //TODO: Note we updating way too many times from the DOMSubtreeModified event - is this expensive? angular.element(element).attr('tabindex', '-1'); @@ -58,6 +70,15 @@ angular.module("umbraco.directives") if(newVal === true){ enableTest(); }else{ + console.log('what do I need to revert', tabIndexesToRollback); + + //Stop observation? + //TODO: Will it refire the observer?! + + angular.forEach(tabIndexesToRollback, function(rollbackItem){ + console.log('item in rollback', rollbackItem); + angular.element(rollbackItem.dom).attr('tabindex', rollbackItem.tabindex); + }); } }); From 5b84702c2f10c764a3e87d8fb1c0539d11dc8b18 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 24 Oct 2018 13:37:33 +0100 Subject: [PATCH 13/21] Cleanup of disable tab directive & adds in tabbable 3rd party lib (wrapped as an AngularJS service) --- .../util/disabletabindex.directive.js | 105 ++------- .../src/common/services/tabbable.service.js | 223 ++++++++++++++++++ .../property/umb-property-editor.html | 8 +- 3 files changed, 248 insertions(+), 88 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/services/tabbable.service.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js index 71d9ff0e5d..35b49d0ddf 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js @@ -1,101 +1,40 @@ angular.module("umbraco.directives") - .directive('disableTabindex', function () { + .directive('disableTabindex', function (tabbableService) { return { restrict: 'A', //Can only be used as an attribute - scope: { disableTabindex: "<"}, link: function (scope, element, attrs) { - var tabIndexesToRollback = []; + //Select the node that will be observed for mutations (native DOM element not jQLite version) + var targetNode = element[0]; - function enableTest(){ - //Add in observer code + //Watch for DOM changes - so when the property editor subview loads in + //We can be notified its updated the child elements inside the DIV we are watching + var observer = new MutationObserver(domChange); - //Use DOM Mutation Observer - //Select the node that will be observed for mutations (native DOM element not jQLite version) - var targetNode = element[0]; + // Options for the observer (which mutations to observe) + var config = { attributes: true, childList: true, subtree: false }; - // Options for the observer (which mutations to observe) - var config = { attributes: false, childList: true, subtree: false }; + function domChange(mutationsList, observer){ + for(var mutation of mutationsList) { - // Callback function to execute when mutations are observed - var callback = function(mutationsList, observer) { - for(var mutation of mutationsList) { + //DOM items have been added or removed + if (mutation.type == 'childList') { - console.log('mutation', mutation); + //Check if any child items in mutation.target contain an input + var childInputs = tabbableService.tabbable(mutation.target); - //DOM items have been added or removed - if (mutation.type == 'childList') { - - //Check if any child items in mutation.target contain an input - var jqLiteEl = angular.element(mutation.target); - var childInputs = jqLiteEl.find('input'); - - //For each item in childInputs - override or set HTML attribute tabindex="-1" - angular.forEach(childInputs, function(element){ - console.log('item in loop', element); - - //TODO: Get existing element & it's tabindex (if any set) - //Check if the element has an existing tab index - //If so store in a collection (that when this directive is disabled/toggled) - //The tabindex is returned back to normal - var currentTabIndex = angular.element(element).attr('tabindex'); - console.log('currentTabIndex', currentTabIndex); - - if(currentTabIndex){ - //A value has been set - need to track it - var itemToRevert = { dom: element, tabindex: currentTabIndex }; - tabIndexesToRollback.push(itemToRevert); - } - - //TODO: Note we updating way too many times from the DOMSubtreeModified event - is this expensive? - angular.element(element).attr('tabindex', '-1'); - }); - } + //For each item in childInputs - override or set HTML attribute tabindex="-1" + angular.forEach(childInputs, function(element){ + angular.element(element).attr('tabindex', '-1'); + }); } - }; - - // Create an observer instance linked to the callback function - var observer = new MutationObserver(callback); - - // Start observing the target node for configured mutations - //GO GO GO - observer.observe(targetNode, config); - }; - - - scope.$watch('disableTabindex',(newVal, oldVal) =>{ - console.log('new val', newVal); - - if(newVal === true){ - enableTest(); - }else{ - console.log('what do I need to revert', tabIndexesToRollback); - - //Stop observation? - //TODO: Will it refire the observer?! - - angular.forEach(tabIndexesToRollback, function(rollbackItem){ - console.log('item in rollback', rollbackItem); - angular.element(rollbackItem.dom).attr('tabindex', rollbackItem.tabindex); - }); - } - }); + } - - - - - - //TODO: Unsure if we need to do this - to ensure the browser not trying to notify us still - //When we browse away from the page - // element.on('$destroy', function(e){ - // console.log('element with disable-tabindex attribute is destoryed'); - - // //Remove/stop the observer - // observer.disconnect(); - // }); + // Start observing the target node for configured mutations + //GO GO GO + observer.observe(targetNode, config); } }; diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tabbable.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tabbable.service.js new file mode 100644 index 0000000000..4d8d5f68f3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/services/tabbable.service.js @@ -0,0 +1,223 @@ +//tabbable JS Lib (Wrapped in angular service) +//https://github.com/davidtheclark/tabbable + +(function() { + 'use strict'; + + function tabbableService() { + + var candidateSelectors = [ + 'input', + 'select', + 'textarea', + 'a[href]', + 'button', + '[tabindex]', + 'audio[controls]', + 'video[controls]', + '[contenteditable]:not([contenteditable="false"])' + ]; + var candidateSelector = candidateSelectors.join(','); + + var matches = typeof Element === 'undefined' + ? function () {} + : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; + + function tabbable(el, options) { + options = options || {}; + + var elementDocument = el.ownerDocument || el; + var regularTabbables = []; + var orderedTabbables = []; + + var untouchabilityChecker = new UntouchabilityChecker(elementDocument); + var candidates = el.querySelectorAll(candidateSelector); + + if (options.includeContainer) { + if (matches.call(el, candidateSelector)) { + candidates = Array.prototype.slice.apply(candidates); + candidates.unshift(el); + } + } + + var i, candidate, candidateTabindex; + for (i = 0; i < candidates.length; i++) { + candidate = candidates[i]; + + if (!isNodeMatchingSelectorTabbable(candidate, untouchabilityChecker)) continue; + + candidateTabindex = getTabindex(candidate); + if (candidateTabindex === 0) { + regularTabbables.push(candidate); + } else { + orderedTabbables.push({ + documentOrder: i, + tabIndex: candidateTabindex, + node: candidate + }); + } + } + + var tabbableNodes = orderedTabbables + .sort(sortOrderedTabbables) + .map(function(a) { return a.node }) + .concat(regularTabbables); + + return tabbableNodes; + } + + tabbable.isTabbable = isTabbable; + tabbable.isFocusable = isFocusable; + + function isNodeMatchingSelectorTabbable(node, untouchabilityChecker) { + if ( + !isNodeMatchingSelectorFocusable(node, untouchabilityChecker) + || isNonTabbableRadio(node) + || getTabindex(node) < 0 + ) { + return false; + } + return true; + } + + function isTabbable(node, untouchabilityChecker) { + if (!node) throw new Error('No node provided'); + if (matches.call(node, candidateSelector) === false) return false; + return isNodeMatchingSelectorTabbable(node, untouchabilityChecker); + } + + function isNodeMatchingSelectorFocusable(node, untouchabilityChecker) { + untouchabilityChecker = untouchabilityChecker || new UntouchabilityChecker(node.ownerDocument || node); + if ( + node.disabled + || isHiddenInput(node) + || untouchabilityChecker.isUntouchable(node) + ) { + return false; + } + return true; + } + + var focusableCandidateSelector = candidateSelectors.concat('iframe').join(','); + function isFocusable(node, untouchabilityChecker) { + if (!node) throw new Error('No node provided'); + if (matches.call(node, focusableCandidateSelector) === false) return false; + return isNodeMatchingSelectorFocusable(node, untouchabilityChecker); + } + + function getTabindex(node) { + var tabindexAttr = parseInt(node.getAttribute('tabindex'), 10); + if (!isNaN(tabindexAttr)) return tabindexAttr; + // Browsers do not return `tabIndex` correctly for contentEditable nodes; + // so if they don't have a tabindex attribute specifically set, assume it's 0. + if (isContentEditable(node)) return 0; + return node.tabIndex; + } + + function sortOrderedTabbables(a, b) { + return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex; + } + + // Array.prototype.find not available in IE. + function find(list, predicate) { + for (var i = 0, length = list.length; i < length; i++) { + if (predicate(list[i])) return list[i]; + } + } + + function isContentEditable(node) { + return node.contentEditable === 'true'; + } + + function isInput(node) { + return node.tagName === 'INPUT'; + } + + function isHiddenInput(node) { + return isInput(node) && node.type === 'hidden'; + } + + function isRadio(node) { + return isInput(node) && node.type === 'radio'; + } + + function isNonTabbableRadio(node) { + return isRadio(node) && !isTabbableRadio(node); + } + + function getCheckedRadio(nodes) { + for (var i = 0; i < nodes.length; i++) { + if (nodes[i].checked) { + return nodes[i]; + } + } + } + + function isTabbableRadio(node) { + if (!node.name) return true; + // This won't account for the edge case where you have radio groups with the same + // in separate forms on the same page. + var radioSet = node.ownerDocument.querySelectorAll('input[type="radio"][name="' + node.name + '"]'); + var checked = getCheckedRadio(radioSet); + return !checked || checked === node; + } + + // An element is "untouchable" if *it or one of its ancestors* has + // `visibility: hidden` or `display: none`. + function UntouchabilityChecker(elementDocument) { + this.doc = elementDocument; + // Node cache must be refreshed on every check, in case + // the content of the element has changed. The cache contains tuples + // mapping nodes to their boolean result. + this.cache = []; + } + + // getComputedStyle accurately reflects `visibility: hidden` of ancestors + // but not `display: none`, so we need to recursively check parents. + UntouchabilityChecker.prototype.hasDisplayNone = function hasDisplayNone(node, nodeComputedStyle) { + if (node === this.doc.documentElement) return false; + + // Search for a cached result. + var cached = find(this.cache, function(item) { + return item === node; + }); + if (cached) return cached[1]; + + nodeComputedStyle = nodeComputedStyle || this.doc.defaultView.getComputedStyle(node); + + var result = false; + + if (nodeComputedStyle.display === 'none') { + result = true; + } else if (node.parentNode) { + result = this.hasDisplayNone(node.parentNode); + } + + this.cache.push([node, result]); + + return result; + } + + UntouchabilityChecker.prototype.isUntouchable = function isUntouchable(node) { + if (node === this.doc.documentElement) return false; + var computedStyle = this.doc.defaultView.getComputedStyle(node); + if (this.hasDisplayNone(node, computedStyle)) return true; + return computedStyle.visibility === 'hidden'; + } + + //module.exports = tabbable; + + //////////// + + var service = { + tabbable: tabbable, + isTabbable: isTabbable, + isFocusable: isFocusable + }; + + return service; + } + + angular.module('umbraco.services').factory('tabbableService', tabbableService); + + })(); diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html index 8674e4f6d3..cb82a83168 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html @@ -1,6 +1,4 @@ -
-
-
-
-
+
+
+
From e2557697bcee66cc4075a071a5c573eae4d1d659 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 24 Oct 2018 14:08:15 +0100 Subject: [PATCH 14/21] Emit a single event if the language has been created or been saved - send through a new property in args to determine if it was new or not Then event listener updates the tree languages dropdown only when a new language has been added or deleted OR when an existing language has been saved/updated to be set as the new default language (as this now at top of list) --- .../src/controllers/navigation.controller.js | 21 ++++++++++++++----- .../src/views/languages/edit.controller.js | 12 +++++------ 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js index 2912755ce7..5d8f46c6db 100644 --- a/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js +++ b/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js @@ -194,7 +194,7 @@ function NavigationController($scope, $rootScope, $location, $log, $q, $routePar $rootScope.emptySection = false; } } - + })); //Listen for section state changes @@ -222,10 +222,21 @@ function NavigationController($scope, $rootScope, $location, $log, $q, $routePar }); })); - evts.push(eventsService.on("editors.languages.languageCreated", function (e, args) { - loadLanguages().then(function (languages) { - $scope.languages = languages; - }); + //Emitted when a language is created or an existing one saved/edited + evts.push(eventsService.on("editors.languages.languageSaved", function (e, args) { + console.log('lang event listen args', args); + if(args.isNew){ + //A new language has been created - reload languages for tree + loadLanguages().then(function (languages) { + $scope.languages = languages; + }); + } + else if(args.language.isDefault){ + //A language was saved and was set to be the new default (refresh the tree, so its at the top) + loadLanguages().then(function (languages) { + $scope.languages = languages; + }); + } })); //This reacts to clicks passed to the body element which emits a global call to close all dialogs diff --git a/src/Umbraco.Web.UI.Client/src/views/languages/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/languages/edit.controller.js index 961470b03a..a11aa8bff8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/languages/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/languages/edit.controller.js @@ -113,11 +113,9 @@ notificationsService.success(value); }); - // emit event when language is created - if($routeParams.create) { - var args = { language: lang }; - eventsService.emit("editors.languages.languageCreated", args); - } + // emit event when language is created or updated/saved + var args = { language: lang, isNew: $routeParams.create ? true : false }; + eventsService.emit("editors.languages.languageSaved", args); back(); @@ -129,7 +127,7 @@ }); } - + } function back() { @@ -145,7 +143,7 @@ } function toggleDefault() { - + // it shouldn't be possible to uncheck the default language if(vm.initIsDefault) { return; From 9a1a13ba81f601919f87e4a24dc63d6183ee77c8 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 24 Oct 2018 14:55:01 +0100 Subject: [PATCH 15/21] Fix the ordering logic - it helps if you actually assign the ordered items back to the list *facepalm* --- .../Models/Mapping/ContentItemDisplayVariationResolver.cs | 2 +- src/Umbraco.Web/Models/Mapping/LanguageMapperProfile.cs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web/Models/Mapping/ContentItemDisplayVariationResolver.cs b/src/Umbraco.Web/Models/Mapping/ContentItemDisplayVariationResolver.cs index 562797e3e3..7db491ad2e 100644 --- a/src/Umbraco.Web/Models/Mapping/ContentItemDisplayVariationResolver.cs +++ b/src/Umbraco.Web/Models/Mapping/ContentItemDisplayVariationResolver.cs @@ -59,7 +59,7 @@ namespace Umbraco.Web.Models.Mapping variants.Remove(defaultLang); //Sort the remaining languages a-z - variants.OrderBy(x => x.Language.Name); + variants = variants.OrderBy(x => x.Name).ToList(); //Insert the default lang as the first item variants.Insert(0, defaultLang); diff --git a/src/Umbraco.Web/Models/Mapping/LanguageMapperProfile.cs b/src/Umbraco.Web/Models/Mapping/LanguageMapperProfile.cs index 6dd6135329..f820d5ae54 100644 --- a/src/Umbraco.Web/Models/Mapping/LanguageMapperProfile.cs +++ b/src/Umbraco.Web/Models/Mapping/LanguageMapperProfile.cs @@ -37,7 +37,7 @@ namespace Umbraco.Web.Models.Mapping langs.Remove(defaultLang); //Sort the remaining languages a-z - langs.OrderBy(x => x.Name); + langs = langs.OrderBy(x => x.Name).ToList(); //Insert the default lang as the first item langs.Insert(0, defaultLang); From 4420f101d2a8654c6201f58d0144a2e6abbe3db0 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 24 Oct 2018 20:41:58 +0200 Subject: [PATCH 16/21] add toggle to disable tabindex directive --- .../util/disabletabindex.directive.js | 49 ++++++++++--------- .../property/umb-property-editor.html | 8 +-- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js index 35b49d0ddf..800efb8c28 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js @@ -2,39 +2,44 @@ angular.module("umbraco.directives") .directive('disableTabindex', function (tabbableService) { return { - restrict: 'A', //Can only be used as an attribute + restrict: 'A', //Can only be used as an attribute, + scope: { + "disableTabindex": "<" + }, link: function (scope, element, attrs) { - //Select the node that will be observed for mutations (native DOM element not jQLite version) - var targetNode = element[0]; + if(scope.disableTabindex) { + //Select the node that will be observed for mutations (native DOM element not jQLite version) + var targetNode = element[0]; - //Watch for DOM changes - so when the property editor subview loads in - //We can be notified its updated the child elements inside the DIV we are watching - var observer = new MutationObserver(domChange); + //Watch for DOM changes - so when the property editor subview loads in + //We can be notified its updated the child elements inside the DIV we are watching + var observer = new MutationObserver(domChange); - // Options for the observer (which mutations to observe) - var config = { attributes: true, childList: true, subtree: false }; + // Options for the observer (which mutations to observe) + var config = { attributes: true, childList: true, subtree: false }; - function domChange(mutationsList, observer){ - for(var mutation of mutationsList) { + function domChange(mutationsList, observer){ + for(var mutation of mutationsList) { - //DOM items have been added or removed - if (mutation.type == 'childList') { + //DOM items have been added or removed + if (mutation.type == 'childList') { - //Check if any child items in mutation.target contain an input - var childInputs = tabbableService.tabbable(mutation.target); + //Check if any child items in mutation.target contain an input + var childInputs = tabbableService.tabbable(mutation.target); - //For each item in childInputs - override or set HTML attribute tabindex="-1" - angular.forEach(childInputs, function(element){ - angular.element(element).attr('tabindex', '-1'); - }); + //For each item in childInputs - override or set HTML attribute tabindex="-1" + angular.forEach(childInputs, function(element){ + angular.element(element).attr('tabindex', '-1'); + }); + } } } - } - // Start observing the target node for configured mutations - //GO GO GO - observer.observe(targetNode, config); + // Start observing the target node for configured mutations + //GO GO GO + observer.observe(targetNode, config); + } } }; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html index cb82a83168..8674e4f6d3 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html @@ -1,4 +1,6 @@ -
-
-
+
+
+
+
+
From 2137c1026b1bcfa674cb14ef3940980af144068e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 24 Oct 2018 20:44:07 +0200 Subject: [PATCH 17/21] css cleanup --- .../less/components/umb-property-editor.less | 21 +++++++------------ .../property/umb-property-editor.html | 2 +- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less index b019892a9f..a3e094d9be 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less @@ -1,24 +1,19 @@ -.umb-property-editor.-not-clickable { - // pointer-events: none; -} - .umb-property-editor { - position:relative; + position: relative; } .umb-property-editor__view{ - z-index:1; - position:relative; + z-index: 1; + position: relative; } .umb-property-editor__overlay { display: block; position: absolute; - top:0; - left:0; - height:100%; - width:100%; - cursor: not-allowed; + top: 0; + left: 0; + height: 100%; + width: 100%; user-select: none; - z-index:2; + z-index: 2; } \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html index 8674e4f6d3..820721df9e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html @@ -1,4 +1,4 @@ -
+
From b63b25414c4f52bed57b8929c06fdbdd06a02375 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 25 Oct 2018 09:38:46 +0200 Subject: [PATCH 18/21] show inherted from label --- .../content/umbtabbedcontent.directive.js | 4 ++++ .../property/umbproperty.directive.js | 4 +++- .../content/umb-tabbed-content.html | 19 ++++++------------- .../components/property/umb-property.html | 4 ++++ 4 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js index 5176f65801..f83f441d66 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js @@ -17,6 +17,10 @@ return variant.active; }); + $scope.defaultVariant = _.find(this.content.variants, variant => { + return variant.language.isDefault; + }); + $scope.unlockInvariantValue = function(property) { property.unlockInvariantValue = !property.unlockInvariantValue; }; diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js index 69457a6f10..302378b8c0 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js @@ -7,7 +7,9 @@ angular.module("umbraco.directives") .directive('umbProperty', function (umbPropEditorHelper, userService) { return { scope: { - property: "=" + property: "=", + showInherit: "<", + inheritsFrom: "<" }, transclude: true, restrict: 'E', diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html index 7663aa8997..cdacea7cf1 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html @@ -8,19 +8,12 @@
- - - +