Refs #6193, make angularjs ngDialogs have same style as jquery-ui dialogs.

4 files changed, 75 insertions, 4 deletions

diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index e9b4781259..21974ccf87 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -67,6 +67,7 @@ class CoreHome extends \Piwik\Plugin
         $stylesheets[] = "plugins/CoreHome/stylesheets/zen-mode.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/menudropdown/menudropdown.less";
+        $stylesheets[] = "plugins/CoreHome/angularjs/dialogtoggler/ngdialog.less";
     }
 
     public function getJsFiles(&$jsFiles)
diff --git a/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-controller.js b/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-controller.js
index 5a99d7baa8..cc68a450cc 100644
--- a/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-controller.js
+++ b/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-controller.js
@@ -29,11 +29,11 @@ angular.module('piwikApp').controller('DialogTogglerController', function ($scop
         if (typeof(contentsInfo) == 'object') { // is info to pass directly to ngDialog
             ngDialogInfo = contentsInfo;
         } else if (contentsInfo.substr(0, 1) == '#') { // is ID of an element
-            ngDialogInfo = {template: contentsInfo.substr(1), className: 'ngdialog-theme-default'};
+            ngDialogInfo = {template: contentsInfo.substr(1)};
         } else if (contentsInfo.substr(-4) == '.html') { // is a link to an .html file
-            ngDialogInfo = {template: contentsInfo, className: 'ngdialog-theme-default'};
+            ngDialogInfo = {template: contentsInfo};
         } else { // is a raw HTML string
-            ngDialogInfo = {template: contentsInfo, plain: true, className: 'ngdialog-theme-default'};
+            ngDialogInfo = {template: contentsInfo, plain: true};
         }
 
         return ngDialog.open(ngDialogInfo);
diff --git a/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-urllistener-service.js b/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-urllistener-service.js
index 5da8820f42..c1f07e2b82 100644
--- a/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-urllistener-service.js
+++ b/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-urllistener-service.js
@@ -58,7 +58,7 @@ angular.module('piwikApp').factory('piwikDialogtogglerUrllistener', function ($r
             var dialog = ngDialog.open({
                 template: getHtmlFromDialogQueryParam(dialogParamValue),
                 plain: true,
-                className: 'ngdialog-theme-default'
+                className: ''//'ngdialog-theme-default'
             });
 
             dialog.closePromise.then(function () {
diff --git a/plugins/CoreHome/angularjs/dialogtoggler/ngdialog.less b/plugins/CoreHome/angularjs/dialogtoggler/ngdialog.less
new file mode 100644
index 0000000000..fb0f666f80
--- /dev/null
+++ b/plugins/CoreHome/angularjs/dialogtoggler/ngdialog.less
@@ -0,0 +1,70 @@
+.ngdialog {
+  position:absolute;
+}
+
+.ngdialog-overlay {
+  opacity: 0.6;
+  background: none #000;
+  position: fixed;
+  z-index: 1000;
+}
+
+.ngdialog-content {
+  z-index: 1001;
+  width: 950px;
+  border-radius: 4px;
+  margin: 0 auto;
+  max-width: 100%;
+  background-color: #fff;
+  padding: 1em 18px;
+  position: relative;
+  top: 100px;
+
+  h2:first-of-type {
+    line-height:24px;
+    padding:0 0 1em;
+  }
+}
+
+// remove some ngdialog animations (the remaining one is required for closing the dialog)
+.ngdialog-overlay, .ngdialog.ngdialog-closing .ngdialog-overlay,.ngdialog-content {
+  -webkit-animation: none;
+  animation: none;
+}
+
+.ngdialog-close {
+  // close button should be styled the same as other buttons
+  .submit;
+
+  position: absolute;
+  right: 9px;
+  top: 18px;
+  width: 21px;
+  margin: 0 0 0 0;
+  height: 20px;
+
+  &:before {
+    font-family:inherit;
+    content:'';
+
+    display:inline-block;
+
+    // center in div
+    position:absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -8px;
+    margin-left: -8px;
+
+    // from jquery-ui css
+    background-image: url(libs/jquery/themes/base/images/ui-icons_888888_256x240.png);
+    background-position: -96px -128px;
+    width: 16px;
+    height: 16px;
+    opacity:0.5;
+  }
+
+  &:hover:before {
+    background-image: url(libs/jquery/themes/base/images/ui-icons_454545_256x240.png);
+  }
+}
\ No newline at end of file