From fbe388a616415957dece5eb44be4cc4b50faae27 Mon Sep 17 00:00:00 2001
From: perploug <pph@umbraco.dk>
Date: Tue, 1 Oct 2013 10:10:55 +0200
Subject: [PATCH] Cleans up rte embed dialog

---
 src/Umbraco.Web.UI.Client/src/less/hacks.less |  2 +-
 .../common/dialogs/rteembed.controller.js     | 59 ++++++++++---------
 .../src/views/common/dialogs/rteembed.html    | 56 ++++++++----------
 3 files changed, 55 insertions(+), 62 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/hacks.less b/src/Umbraco.Web.UI.Client/src/less/hacks.less
index 1badd7e905..1f83c0f686 100644
--- a/src/Umbraco.Web.UI.Client/src/less/hacks.less
+++ b/src/Umbraco.Web.UI.Client/src/less/hacks.less
@@ -17,7 +17,7 @@
 .umbracoDialog form{height: 100%;}
 
 /*ensures dialogs doesnt have side-by-side labels */
-.umbracoDialog .controls-row{margin-left: 0px !important;}
+.umbracoDialog .controls-row, .umb-modal .controls-row{margin-left: 0px !important;}
 
 .controls-row img {
 	max-width: none;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/rteembed.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/rteembed.controller.js
index 5adf5d41a2..07fb7ab332 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/rteembed.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/rteembed.controller.js
@@ -1,48 +1,49 @@
 angular.module("umbraco").controller("Umbraco.Dialogs.RteEmbedController", function ($scope, $http) {
-    $scope.url = "";
-    $scope.width = 500;
-    $scope.height = 300;
-    $scope.constrain = true;
-    $scope.preview = "";
-    $scope.success = false;
-    $scope.info = "";
-    $scope.supportsDimensions = false;
+    $scope.form = {};
+    $scope.form.url = "";
+    $scope.form.width = 360;
+    $scope.form.height = 240;
+    $scope.form.constrain = true;
+    $scope.form.preview = "";
+    $scope.form.success = false;
+    $scope.form.info = "";
+    $scope.form.supportsDimensions = false;
     
     var origWidth = 500;
     var origHeight = 300;
     
     $scope.showPreview = function(){
 
-        if ($scope.url != "") {
-            
-            $scope.preview = "<div class=\"umb-loader\" style=\"height: 10px; margin: 10px 0px;\"></div>";
-            $scope.info = "";
-            $scope.success = false;
+        if ($scope.form.url != "") {
+            $scope.form.show = true;
+            $scope.form.preview = "<div class=\"umb-loader\" style=\"height: 10px; margin: 10px 0px;\"></div>";
+            $scope.form.info = "";
+            $scope.form.success = false;
 
-            $http({ method: 'GET', url: '/umbraco/UmbracoApi/RteEmbed/GetEmbed', params: { url: $scope.url, width: $scope.width, height: $scope.height } })
+            $http({ method: 'GET', url: '/umbraco/UmbracoApi/RteEmbed/GetEmbed', params: { url: $scope.form.url, width: $scope.form.width, height: $scope.form.height } })
                 .success(function (data) {
                     
-                    $scope.preview = "";
+                    $scope.form.preview = "";
                     
                     switch (data.Status) {
                         case 0:
                             //not supported
-                            $scope.info = "Not Supported";
+                            $scope.form.info = "Not Supported";
                             break;
                         case 1:
                             //error
-                            $scope.info = "Computer says no";
+                            $scope.form.info = "Computer says no";
                             break;
                         case 2:
-                            $scope.preview = data.Markup;
-                            $scope.supportsDimensions = data.SupportsDimensions;
-                            $scope.success = true;
+                            $scope.form.preview = data.Markup;
+                            $scope.form.supportsDimensions = data.SupportsDimensions;
+                            $scope.form.success = true;
                             break;
                     }
                 })
                 .error(function() {
-                    $scope.preview = "";
-                    $scope.info = "Computer says no";
+                    $scope.form.preview = "";
+                    $scope.form.info = "Computer says no";
                 });
 
         }
@@ -52,24 +53,24 @@
     $scope.changeSize = function (type) {
         var width, height;
         
-        if ($scope.constrain) {
-            width = parseInt($scope.width, 10);
-            height = parseInt($scope.height, 10);
+        if ($scope.form.constrain) {
+            width = parseInt($scope.form.width, 10);
+            height = parseInt($scope.form.height, 10);
             if (type == 'width') {
                 origHeight = Math.round((width / origWidth) * height);
-                $scope.height = origHeight;
+                $scope.form.height = origHeight;
             } else {
                 origWidth = Math.round((height / origHeight) * width);
-                $scope.width = origWidth;
+                $scope.form.width = origWidth;
             }
         }
-        if ($scope.url != "") {
+        if ($scope.form.url != "") {
             $scope.showPreview();
         }
 
     };
     
     $scope.insert = function(){
-        $scope.submit($scope.preview);
+        $scope.submit($scope.form.preview);
     };
 });
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/rteembed.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/rteembed.html
index e752b0685e..85f45ef400 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/rteembed.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/rteembed.html
@@ -1,39 +1,31 @@
 <form ng-controller="Umbraco.Dialogs.RteEmbedController">
-    
     <div class="umb-panel" val-show-validation>
- 
-        <div class="umb-panel-header">
-            <div class="umb-el-wrap umb-panel-buttons">
-                <div class="btn-toolbar umb-btn-toolbar">
-                    <button type="button" class="btn" ng-click="close()">Cancel</button>
-                    
-                    <input type="button" ng-click="insert()" class="btn btn-primary" value="Ok" ng-disabled="!success" />
+         <div class="umb-panel-body no-header with-footer">
+            <umb-pane>
+                <umb-control-group label="Url">
+                    <input id="url" class="umb-editor input-block-level" type="text" ng-model="form.url" ng-change="showPreview()" required/>
+                </umb-control-group>
+
+                <umb-control-group label="Size" ng-show="form.supportsDimensions">
+                    <input type="text" ng-model="form.width" on-blur="changeSize('width')" style="width:50px"/> x <input type="text" ng-model="form.height" on-blur="changeSize('height')" style="width:50px"/>
+
+                    <label for="constrain" style="display:inline">Constrain:</label> 
+                    <input id="constrain" type="checkbox" ng-model="form.constrain" style="margin-bottom: 10px;"/>
+                </umb-control-group>
+                
+                <div>
+                    <p ng-bind="form.info"></p>
+                    <div ng-bind-html-unsafe="form.preview"></div>
                 </div>
-            </div>
-        </div>
-       
-         <div class="umb-panel-body umb-scrollable" auto-scale="1">
-           
-                <div class="umb-control-group">
-                    
-                    <div class="umb-pane">
-                    <label for="url">Url:</label> 
-                    <input id="url" type="text" ng-model="url" ng-change="showPreview()" required/>
-                    </div>
-                    <div class="umb-pane" ng-show="supportsDimensions">
-                        <label>Size:</label> 
-                        <input type="text" ng-model="width" on-blur="changeSize('width')" style="width:50px"/> x <input type="text" ng-model="height" on-blur="changeSize('height')" style="width:50px"/>
-                        <label for="constrain" style="display:inline">Constrain:</label> 
-                        <input id="constrain" type="checkbox" ng-model="constrain" style="margin-bottom: 10px;"/>
-                    </div>
-                      <div class="umb-pane">
-                    <p ng-bind="info"></p>
-                          <div ng-bind-html-unsafe="preview">
-                          </div>
-                           </div>
-                </div>
-          
+                
+            </umb-pane>
         </div>
 
+        <div class="umb-panel-footer">
+            <div class="btn-toolbar umb-btn-toolbar pull-right">
+                <a href class="btn btn-link" ng-click="close()">Cancel</a>
+                <input type="button" ng-click="insert()" class="btn btn-primary" value="Ok" ng-disabled="!form.success" />
+            </div>
+        </div>
     </div>
 </form>