From fab08f4dde453efd8188cfd0250ea182666db061 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 21 Aug 2018 14:29:21 +0200
Subject: [PATCH] convert linpicker overlay to infinite editor

---
 .../linkpicker/linkpicker.controller.js       |  27 ++-
 .../linkpicker/linkpicker.html                | 214 +++++++++++-------
 2 files changed, 152 insertions(+), 89 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.controller.js
index 720edc2114..6936574bbd 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.controller.js
@@ -1,17 +1,24 @@
 //used for the media picker dialog
 angular.module("umbraco").controller("Umbraco.Overlays.LinkPickerController",
     function ($scope, eventsService, dialogService, entityResource, contentResource, mediaHelper, userService, localizationService, tinyMceService) {
+        
+        var vm = this;
         var dialogOptions = $scope.model;
-
         var anchorPattern = /<a id=\\"(.*?)\\">/gi;
-
         var searchText = "Search...";
+
+        vm.submit = submit;
+        vm.close = close;
+
         localizationService.localize("general_search").then(function (value) {
             searchText = value + "...";
         });
 
         if (!$scope.model.title) {
-            $scope.model.title = localizationService.localize("defaultdialogs_selectLink");
+            localizationService.localize("defaultdialogs_selectLink")
+                .then(function(value) {
+                    $scope.model.title = value;
+                });
         }
 
         $scope.dialogTreeApi = {};
@@ -83,7 +90,7 @@ angular.module("umbraco").controller("Umbraco.Overlays.LinkPickerController",
             } else {
                 contentResource.getById(args.node.id).then(function (resp) {
                     $scope.anchorValues = tinyMceService.getAnchorNames(JSON.stringify(resp.properties));
-                    $scope.model.target.url = resp.urls[0];
+                    $scope.model.target.url = resp.urls[0].text;
                 });
             }
 
@@ -167,4 +174,16 @@ angular.module("umbraco").controller("Umbraco.Overlays.LinkPickerController",
             $scope.miniListView = node;
         }
 
+        function close() {
+            if($scope.model && $scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
+        function submit() {
+            if($scope.model && $scope.model.submit) {
+                $scope.model.submit($scope.model);
+            }
+        }
+
     });
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.html
index 5dd1275014..de2b6e5168 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/linkpicker/linkpicker.html
@@ -1,100 +1,144 @@
-<div ng-controller="Umbraco.Overlays.LinkPickerController">
+<div ng-controller="Umbraco.Overlays.LinkPickerController as vm">
 
-    <umb-control-group label="@defaultdialogs_urlLinkPicker" class="umb-property--pull">
-        <input type="text"
-               localize="placeholder"
-               placeholder="@general_url"
-               class="umb-property-editor umb-textstring"
-               ng-model="model.target.url"
-               ng-disabled="model.target.id" />
-    </umb-control-group>
+    <umb-editor-view>
 
-    <umb-control-group label="@defaultdialogs_anchorLinkPicker" class="umb-property--push">
-        <input type="text"
-               list="anchors"
-               localize="placeholder"
-               placeholder="@placeholders_anchor"
-               class="umb-editor umb-textstring"
-               ng-model="model.target.anchor" />
+        <umb-editor-header
+            name="model.title"
+            name-locked="true"
+            hide-alias="true"
+            hide-icon="true"
+            hide-description="true">
+        </umb-editor-header>
 
-        <datalist id="anchors">
-            <option value="{{a}}" ng-repeat="a in anchorValues"></option>
-        </datalist>
-    </umb-control-group>
+        <umb-editor-container class="block-form">
+            <umb-box>
+                <umb-box-content>
 
-    <umb-control-group label="@defaultdialogs_nodeNameLinkPicker">
-        <input type="text"
-               localize="placeholder"
-               placeholder="@placeholders_entername"
-               class="umb-property-editor umb-textstring"
-               ng-model="model.target.name" />
-    </umb-control-group>
+                    <div class="flex">
 
-    <umb-control-group ng-if="showTarget" label="@content_target">
-        <label class="checkbox no-indent">
-            <input type="checkbox"
-                   ng-model="model.target.target"
-                   ng-true-value="'_blank'"
-                   ng-false-value="" /> <localize key="defaultdialogs_openInNewWindow">Opens the linked document in a new window or tab</localize>
-        </label>
-    </umb-control-group>
+                        <umb-control-group label="@defaultdialogs_urlLinkPicker">
+                            <input type="text"
+                                    style="margin-right: 10px;"
+                                    localize="placeholder"
+                                    placeholder="@general_url"
+                                    class="umb-property-editor umb-textstring"
+                                    ng-model="model.target.url"
+                                    ng-disabled="model.target.id" />
+                        </umb-control-group>
+                
+                        <umb-control-group label="@defaultdialogs_anchorLinkPicker">
+                            <input type="text"
+                                    list="anchors"
+                                    localize="placeholder"
+                                    placeholder="@placeholders_anchor"
+                                    class="umb-property-editor umb-textstring"
+                                    ng-model="model.target.anchor" />
+                    
+                            <datalist id="anchors">
+                                <option value="{{a}}" ng-repeat="a in anchorValues"></option>
+                            </datalist>
+                        </umb-control-group>
+                    </div>
+                
+                    <umb-control-group label="@defaultdialogs_nodeNameLinkPicker">
+                        <input type="text"
+                                localize="placeholder"
+                                placeholder="@placeholders_entername"
+                                class="umb-property-editor umb-textstring"
+                                ng-model="model.target.name" />
+                    </umb-control-group>
+                
+                    <umb-control-group ng-if="showTarget" label="@content_target">
+                        <label class="checkbox no-indent">
+                            <input type="checkbox"
+                                    ng-model="model.target.target"
+                                    ng-true-value="'_blank'"
+                                    ng-false-value="" /> 
+                            <localize key="defaultdialogs_openInNewWindow">Opens the linked document in a new window or tab</localize>
+                        </label>
+                    </umb-control-group>
 
-    <div class="umb-control-group">
-        <h5>
-            <localize key="defaultdialogs_linkToPage">Link to page</localize>
-        </h5>
-
-        <div ng-hide="miniListView">
-            <umb-tree-search-box hide-search-callback="hideSearch"
-                                 search-callback="onSearchResults"
-                                 search-from-id="{{searchInfo.searchFromId}}"
-                                 search-from-name="{{searchInfo.searchFromName}}"
-                                 show-search="{{searchInfo.showSearch}}"
-                                 section="{{section}}">
-            </umb-tree-search-box>
-
-            <br />
-
-            <umb-tree-search-results ng-if="searchInfo.showSearch"
-                                     results="searchInfo.results"
-                                     select-result-callback="selectResult">
-            </umb-tree-search-results>
-
-            <div ng-hide="searchInfo.showSearch">
-                <umb-tree section="content"
-                          hideheader="true"
-                          hideoptions="true"
-                    	  api="dialogTreeApi"
-                    	  on-init="onTreeInit()"
-                          enablelistviewexpand="true"
-                          isdialog="true"
-                          enablecheckboxes="true">
-                </umb-tree>
-            </div>
-        </div>
-
-        <umb-mini-list-view ng-if="miniListView"
+                    <div class="umb-control-group">
+                        <h5><localize key="defaultdialogs_linkToPage">Link to page</localize></h5>
+                
+                        <div ng-hide="miniListView">
+                            <umb-tree-search-box 
+                                hide-search-callback="hideSearch"
+                                search-callback="onSearchResults"
+                                search-from-id="{{searchInfo.searchFromId}}"
+                                search-from-name="{{searchInfo.searchFromName}}"
+                                show-search="{{searchInfo.showSearch}}"
+                                section="{{section}}">
+                            </umb-tree-search-box>
+                
+                            <br />
+                
+                            <umb-tree-search-results 
+                                ng-if="searchInfo.showSearch"
+                                results="searchInfo.results"
+                                select-result-callback="selectResult">
+                            </umb-tree-search-results>
+                
+                            <div ng-hide="searchInfo.showSearch">
+                                <umb-tree 
+                                    section="content"
+                                    hideheader="true"
+                                    hideoptions="true"
+                                    api="dialogTreeApi"
+                                    on-init="onTreeInit()"
+                                    enablelistviewexpand="true"
+                                    isdialog="true"
+                                    enablecheckboxes="true">
+                                </umb-tree>
+                            </div>
+                        </div>
+                
+                        <umb-mini-list-view 
+                            ng-if="miniListView"
                             node="miniListView"
                             entity-type="Document"
                             on-select="selectListViewNode(node)"
                             on-close="closeMiniListView()">
-        </umb-mini-list-view>
+                        </umb-mini-list-view>
+                
+                    </div>
+                
+                    <div class="umb-control-group">
+                        <h5><localize key="defaultdialogs_linkToMedia">Link to media</localize></h5>
+                        <a href ng-click="switchToMediaPicker()" class="btn">
+                            <localize key="defaultdialogs_selectMedia">Select media</localize>
+                        </a>
+                    </div>
+                
+                    <umb-overlay 
+                        ng-if="mediaPickerOverlay.show"
+                        model="mediaPickerOverlay"
+                        view="mediaPickerOverlay.view"
+                        position="right">
+                    </umb-overlay>
 
-    </div>
+                </umb-box-content>
+            </umb-box>
+        </umb-editor-container>
 
-    <div class="umb-control-group">
-        <h5>
-            <localize key="defaultdialogs_linkToMedia">Link to media</localize>
-        </h5>
-        <a href ng-click="switchToMediaPicker()" class="btn">
-            <localize key="defaultdialogs_selectMedia">Select media</localize>
-        </a>
-    </div>
+        <umb-editor-footer>
+            <umb-editor-footer-content-right>
+                <umb-button
+                    type="button"
+                    button-style="link"
+                    label-key="general_close"
+                    action="vm.close()">
+                </umb-button>
+                <umb-button
+                    type="button"
+                    button-style="success"
+                    label-key="general_submit"
+                    state="vm.saveButtonState"
+                    action="vm.submit(model)">
+                </umb-button>
+            </umb-editor-footer-content-right>
+        </umb-editor-footer>
 
-    <umb-overlay ng-if="mediaPickerOverlay.show"
-                 model="mediaPickerOverlay"
-                 view="mediaPickerOverlay.view"
-                 position="right">
-    </umb-overlay>
+    </umb-editor-view>
 
 </div>