V8: General UX overhaul of the media picker in the RTE (#6722)

umbraco · Oct 24, 2019 · df8347d · df8347d
1 parent b103778
commit df8347d
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 36 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
@@ -567,6 +567,7 @@ When building a custom infinite editor view you can use the same components as a
          * @param {Boolean} editor.multiPicker Pick one or multiple items
          * @param {Boolean} editor.onlyImages Only display files that have an image file-extension
          * @param {Boolean} editor.disableFolderSelect Disable folder selection
+         * @param {Boolean} editor.disableFocalPoint Disable focal point editor for selected media
          * @param {Array} editor.updatedMediaNodes A list of ids for media items that have been updated through the media picker
          * @param {Callback} editor.submit Submits the editor
          * @param {Callback} editor.close Closes the editor

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
@@ -1489,6 +1489,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
                     onlyImages: true,
                     showDetails: true,
                     disableFolderSelect: true,
+                    disableFocalPoint: true,
                     startNodeId: startNodeId,
                     startNodeIsVirtual: startNodeIsVirtual,
                     dataTypeKey: args.model.dataTypeKey,

diff --git a/...raco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js b/...raco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js
@@ -28,6 +28,7 @@ angular.module("umbraco")
             var dialogOptions = $scope.model;
 
             $scope.disableFolderSelect = (dialogOptions.disableFolderSelect && dialogOptions.disableFolderSelect !== "0") ? true : false;
+            $scope.disableFocalPoint = (dialogOptions.disableFocalPoint && dialogOptions.disableFocalPoint !== "0") ? true : false;
             $scope.onlyImages = (dialogOptions.onlyImages && dialogOptions.onlyImages !== "0") ? true : false;
             $scope.onlyFolders = (dialogOptions.onlyFolders && dialogOptions.onlyFolders !== "0") ? true : false;
             $scope.showDetails = (dialogOptions.showDetails && dialogOptions.showDetails !== "0") ? true : false;
@@ -137,7 +138,8 @@ angular.module("umbraco")
                             $scope.target = node;
                             if (ensureWithinStartNode(node)) {
                                 selectMedia(node);
-                                $scope.target.url = mediaHelper.resolveFile(node);
+                                $scope.target.url = mediaHelper.resolveFileFromEntity(node);
+                                $scope.target.thumbnail = mediaHelper.resolveFileFromEntity(node, true);
                                 $scope.target.altText = altText;
                                 openDetailsDialog();
                             }
@@ -333,22 +335,26 @@ angular.module("umbraco")
             }
 
             function openDetailsDialog() {
-
-                vm.mediaPickerDetailsOverlay = {
-                    show: true,
-                    submit: function (model) {
-
-                        $scope.model.selection.push($scope.target);
-                        $scope.model.submit($scope.model);
-
-                        vm.mediaPickerDetailsOverlay.show = false;
-                        vm.mediaPickerDetailsOverlay = null;
-                    },
-                    close: function (oldModel) {
-                        vm.mediaPickerDetailsOverlay.show = false;
-                        vm.mediaPickerDetailsOverlay = null;
-                    }
-                };
+                localizationService.localize("defaultdialogs_editSelectedMedia").then(function (data) {
+                    vm.mediaPickerDetailsOverlay = {
+                        show: true,
+                        title: data,
+                        disableFocalPoint: $scope.disableFocalPoint,
+                        submit: function (model) {
+                            $scope.model.selection.push($scope.target);
+                            $scope.model.submit($scope.model);
+
+                            vm.mediaPickerDetailsOverlay.show = false;
+                            vm.mediaPickerDetailsOverlay = null;
+                        },
+                        close: function (oldModel) {
+                            vm.mediaPickerDetailsOverlay.show = false;
+                            vm.mediaPickerDetailsOverlay = null;
+
+                            close();
+                        }
+                    };
+                });
             };
 
             var debounceSearchMedia = _.debounce(function () {

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html
@@ -123,14 +123,40 @@
                 </div>
 
                 <umb-overlay ng-if="vm.mediaPickerDetailsOverlay.show" model="vm.mediaPickerDetailsOverlay" position="right">
+
+                <div class="umb-control-group" ng-if="!target.id">
+                    <h5>
+                        <localize key="@general_url"></localize>
+                    </h5>
+                    <input type="text" localize="placeholder" placeholder="@general_url" class="umb-property-editor umb-textstring" ng-model="target.url" />
+                </div>
 
                     <div class="umb-control-group">
+                    <h5>
+                        <localize key="@content_altTextOptional"></localize>
+                    </h5>
+                    <input type="text" class="umb-property-editor umb-textstring" ng-model="target.altText" />
+                </div>
+
+                <div class="umb-control-group">
+
+                    <div ng-if="vm.mediaPickerDetailsOverlay.disableFocalPoint && target.thumbnail">
+                        <h5>
+                            <localize key="general_preview">Preview</localize>
+                        </h5>
+
+                        <img ng-src="{{target.thumbnail}}" alt="{{target.name}}" />
+                    </div>
+
+                    <div ng-if="!vm.mediaPickerDetailsOverlay.disableFocalPoint">
+                        <h5>
+                            <localize key="@general_focalPoint">Focal point</localize>
+                        </h5>
 
                         <div ng-if="target.url">
-                            <umb-image-gravity
-                                src="target.url"
-                                center="target.focalPoint"
-                                on-value-changed="vm.focalPointChanged(left, top)">
+                            <umb-image-gravity src="target.url"
+                            center="target.focalPoint"
+							on-value-changed="vm.focalPointChanged(left, top)">
                             </umb-image-gravity>
                         </div>
 
@@ -148,25 +174,10 @@ <h5>
                             </umb-image-thumbnail>
 
                         </div>
-
-                    </div>
-
-                    <div class="umb-control-group">
-                        <label>
-                            <localize key="@general_url"></localize>
-                        </label>
-                        <input type="text" localize="placeholder" placeholder="@general_url" class="umb-property-editor umb-textstring" ng-model="target.url"
-                            ng-disabled="target.id" />
                     </div>
 
-                    <div class="umb-control-group">
-                        <label>
-                            <localize key="@content_altTextOptional"></localize>
-                        </label>
-                        <input type="text" class="umb-property-editor umb-textstring" ng-model="target.altText" />
                     </div>
 
-
                 </umb-overlay>
 
             </form>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -408,6 +408,7 @@
     <key alias="cut">Klip</key>
     <key alias="editdictionary">Rediger ordbogsnøgle</key>
     <key alias="editlanguage">Rediger sprog</key>
+    <key alias="editSelectedMedia">Rediger det valgte medie</key>
     <key alias="insertAnchor">Indsæt lokalt link</key>
     <key alias="insertCharacter">Indsæt tegn</key>
     <key alias="insertgraphicheadline">Indsæt grafisk overskrift</key>
@@ -643,6 +644,7 @@
     <key alias="field">Felt</key>
     <key alias="findDocument">Find</key>
     <key alias="first">Første</key>
+    <key alias="focalPoint">Fokuspunkt</key>
     <key alias="general">Generelt</key>
     <key alias="groups">Grupper</key>
     <key alias="group">Gruppe</key>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -411,6 +411,7 @@
     <key alias="cut">Cut</key>
     <key alias="editdictionary">Edit Dictionary Item</key>
     <key alias="editlanguage">Edit Language</key>
+    <key alias="editSelectedMedia">Edit selected media</key>
     <key alias="insertAnchor">Insert local link</key>
     <key alias="insertCharacter">Insert character</key>
     <key alias="insertgraphicheadline">Insert graphic headline</key>
@@ -646,6 +647,7 @@
     <key alias="field">Field</key>
     <key alias="findDocument">Find</key>
     <key alias="first">First</key>
+    <key alias="focalPoint">Focal point</key>
     <key alias="general">General</key>
     <key alias="groups">Groups</key>
     <key alias="group">Group</key>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -414,6 +414,7 @@
     <key alias="cut">Cut</key>
     <key alias="editdictionary">Edit Dictionary Item</key>
     <key alias="editlanguage">Edit Language</key>
+    <key alias="editSelectedMedia">Edit selected media</key>
     <key alias="insertAnchor">Insert local link</key>
     <key alias="insertCharacter">Insert character</key>
     <key alias="insertgraphicheadline">Insert graphic headline</key>
@@ -652,6 +653,7 @@
     <key alias="field">Field</key>
     <key alias="findDocument">Find</key>
     <key alias="first">First</key>
+    <key alias="focalPoint">Focal point</key>
     <key alias="general">General</key>
     <key alias="groups">Groups</key>
     <key alias="group">Group</key>