Add ysodOverlay to listview and localized dialog buttons

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

@@ -7,7 +7,7 @@
 (function() {
    'use strict';
 
-   function OverlayDirective($timeout, formHelper, overlayHelper) {
+   function OverlayDirective($timeout, formHelper, overlayHelper, localizationService) {
 
       function link(scope, el, attr, ctrl) {
 
@@ -21,6 +21,8 @@
 
             setView();
 
+            setButtonText();
+
             registerOverlay();
 
             modelCopy = makeModelCopy(scope.model);
@@ -50,6 +52,15 @@
 
          }
 
+         function setButtonText() {
+             if (!scope.model.closeButtonLabelKey && !scope.model.closeButtonLabel) {
+                 scope.model.closeButtonLabel = localizationService.localize("general_close").then(function (value) {return value;});
+             }
+             if (!scope.model.submitButtonLabelKey && !scope.model.submitButtonLabel) {
+                 scope.model.submitButtonLabel = localizationService.localize("general_submit").then(function (value) {return value;});
+             }
+         }
+
          function registerOverlay() {
 
             overlayNumber = overlayHelper.registerOverlay();
@@ -234,6 +245,7 @@
                scope.model = modelCopy;
                scope.model.close(scope.model);
             } else {
+                scope.model.show = false;
                scope.model = null;
             }
 

src/Umbraco.Web.UI.Client/src/views/common/overlays/ysod/ysod.controller.js

@@ -0,0 +1,13 @@
+angular.module("umbraco")
+    .controller("Umbraco.Overlays.YsodController", function ($scope, legacyResource, treeService, navigationService) {
+
+        if (!$scope.model.title) {
+            $scope.model.title = "Received an error from the server";
+        }
+
+        if ($scope.model.data && $scope.model.data.StackTrace) {
+            //trim whitespace
+            $scope.model.data.StackTrace = $scope.model.data.StackTrace.trim();
+        }
+
+    });

src/Umbraco.Web.UI.Client/src/views/common/overlays/ysod/ysod.html

@@ -0,0 +1,15 @@
+<div ng-controller="Umbraco.Overlays.YsodController">
+
+    <h4 class="heading red">{{model.errorMsg}}</h4>
+    <p>{{model.data.ExceptionMessage || model.data.Message}}</p>
+
+    <div class="umb-control-group">
+        <h5>Exception Details: </h5>
+        {{model.data.ExceptionType}}: {{model.data.ExceptionMessage}}
+    </div>
+
+    <div class="umb-control-group">
+        <h5>Stacktrace: </h5>
+        <pre style="white-space: pre-wrap; overflow-x: auto;">{{model.data.StackTrace}}</pre>
+    </div>
+</div>

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

@@ -21,10 +21,10 @@
 
     </div>
 
-    <div class="umb-overlay-drawer" ng-if="model.close || model.submit">
+    <div class="umb-overlay-drawer">
       <div class="umb-overlay-drawer-content">
-        <umb-button ng-if="model.close" type="button" label="Cancel" action="closeOverLay()" button-style="link"></umb-button>
-        <umb-button ng-if="model.submit" type="submit" label="Submit" button-style="success"></umb-button>
+        <umb-button type="button" label-key="{{model.closeButtonLabelKey}}" label="{{model.closeButtonLabel}}" action="closeOverLay()" button-style="link"></umb-button>
+        <umb-button ng-if="model.submit" type="submit" label-key="{{model.submitButtonLabelKey}}" label="{{model.submitButtonLabel}}" button-style="success"></umb-button>
       </div>
     </div>
   </form>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js

@@ -107,7 +107,14 @@ function listViewController($rootScope, $scope, $routeParams, $injector, $cookie
 
         //check if response is ysod
         if(err.status && err.status >= 500) {
-            dialogService.ysodDialog(err);
+
+            // Open ysod overlay
+            $scope.ysodOverlay = {
+                view : "ysod",
+                errorMsg : err.errorMsg,
+                data : err.data,
+                show : true
+            };
         }
 
         $timeout(function() {

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html

@@ -169,4 +169,11 @@
       view="copyDialog.view">
     </umb-overlay>
 
+    <umb-overlay
+        ng-if="ysodOverlay.show"
+        model="ysodOverlay"
+        position="right"
+        view="ysodOverlay.view">
+    </umb-overlay>
+
 </div>