Use overlayService for user overlay (#8047)

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

@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function AppHeaderDirective(eventsService, appState, userService, focusService, backdropService) {
+    function AppHeaderDirective(eventsService, appState, userService, focusService, backdropService, overlayService) {
 
         function link(scope, el, attr, ctrl) {
 
@@ -71,21 +71,17 @@
             };
 
             scope.avatarClick = function () {
-                if (!scope.userDialog) {
-                    backdropService.open();
-                    scope.userDialog = {
-                        view: "user",
-                        show: true,
-                        close: function (oldModel) {
-                            scope.userDialog.show = false;
-                            scope.userDialog = null;
-                            backdropService.close();
-                        }
-                    };
-                } else {
-                    scope.userDialog.show = false;
-                    scope.userDialog = null;
-                }
+
+                const dialog = {
+                    view: "user",
+                    position: "right",
+                    name: "overlay-user",
+                    close: function () {
+                        overlayService.close();
+                    }
+                };
+
+                overlayService.open(dialog);
             };
 
         }

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

@@ -221,6 +221,10 @@ Opens an overlay to show a custom YSOD. </br>
 
                 $timeout(function () {
 
+                    if (!scope.name) {
+                        scope.name = 'overlay';
+                    }
+
                     if (scope.position === "target" && scope.model.event) {
                         setTargetPosition();
 
@@ -530,6 +534,7 @@ Opens an overlay to show a custom YSOD. </br>
                 view: "=",
                 position: "@",
                 size: "=?",
+                name: "=?",
                 parentScope: "=?"
             },
             link: link

src/Umbraco.Web.UI.Client/src/common/services/overlay.service.js

@@ -15,7 +15,7 @@
         function open(newOverlay) {
 
             // prevent two open overlays at the same time
-            if(currentOverlay) {
+            if (currentOverlay) {
                 close();
             }
 
@@ -23,22 +23,22 @@
             var overlay = newOverlay;
 
             // set the default overlay position to center
-            if(!overlay.position) {
+            if (!overlay.position) {
                 overlay.position = "center";
             }
 
             // set the default overlay size to small
-            if(!overlay.size) {
+            if (!overlay.size) {
                 overlay.size = "small";
             }
 
             // use a default empty view if nothing is set
-            if(!overlay.view) {
+            if (!overlay.view) {
                 overlay.view = "views/common/overlays/default/default.html";
             }
 
             // option to disable backdrop clicks
-            if(overlay.disableBackdropClick) {
+            if (overlay.disableBackdropClick) {
                 backdropOptions.disableEventsOnClick = true;
             }
 
@@ -85,7 +85,6 @@
             }
 
             open(overlay);
-
         }
 
         function confirmDelete(overlay) {

src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html

@@ -45,12 +45,4 @@
 
     </div>
 
-    <umb-overlay
-        data-element="overlay-user"
-        ng-if="userDialog.show"
-        model="userDialog"
-        view="userDialog.view"
-        position="right">
-    </umb-overlay>
-
 </div>

src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html

@@ -1,4 +1,4 @@
-<div data-element="overlay" class="umb-overlay umb-overlay-{{position}} umb-overlay--{{size}}" on-outside-click="outSideClick()" role="dialog" aria-labelledby="umb-overlay-title" aria-describedby="umb-overlay-description">
+<div data-element="{{name}}" class="umb-overlay umb-overlay-{{position}} umb-overlay--{{size}}" on-outside-click="outSideClick()" role="dialog" aria-labelledby="umb-overlay-title" aria-describedby="umb-overlay-description">
     <ng-form class="umb-overlay__form" name="overlayForm" novalidate val-form-manager>
         <div data-element="overlay-header" class="umb-overlay-header" ng-show="!model.hideHeader">
             <h1 class="umb-overlay__title" id="umb-overlay-title">{{model.title}}</h1>

src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml

@@ -99,7 +99,9 @@
     <umb-overlay ng-if="overlay.show"
                  model="overlay"
                  position="{{overlay.position}}"
+                 size="overlay.size"
                  view="overlay.view"
+                 name="overlay.name"
                  parent-scope="overlay.parentScope">
     </umb-overlay>