From e215d19f968f09b12af15e7ded43cf39ae431062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 16 Dec 2019 16:31:04 +0100
Subject: [PATCH] only show languages if we have any + select default if none
 is selected + right align dropdown menu

---
 .../src/less/canvas-designer.less             |  5 +++--
 .../src/preview/preview.controller.js         | 13 +++++++++---
 .../Umbraco/Views/Preview/Index.cshtml        | 20 +++++++++----------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
index 7fe08a6feb..7135692ae8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
@@ -126,6 +126,7 @@ body {
 
 .preview-menu-option {
 
+    position: relative;
     display: inline-block;
 
     > .menu-bar__button {
@@ -136,11 +137,11 @@ body {
         display:none;
 
         position: absolute;
+        right: 0;
         bottom: 100%;
-        float: left;
         min-width: 200px;
 
-        border-radius: 3px 3px 3px 0;
+        border-radius: 3px 3px 0 3px;
         overflow: hidden;
 
         background-color: @blueExtraDark;
diff --git a/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js b/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js
index fa76d3b79b..dc40338d01 100644
--- a/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js
@@ -189,7 +189,7 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
             $scope.frameLoaded = true;
             configureSignalR(iframe);
 
-            $scope.currentCultureIso = $location.search().culture;
+            $scope.currentCultureIso = $location.search().culture || null;
         };
 
         /*****************************************************************************/
@@ -211,12 +211,19 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
                 setPageUrl();
             }
         };
-        $scope.registerCulture = function(iso, title, icon) {
-            var cultureObject = {iso: iso, title: title, icon: icon};
+        $scope.registerCulture = function(iso, title, isDefault) {
+            var cultureObject = {iso: iso, title: title, isDefault: isDefault};
             cultures.push(cultureObject);
         }
 
         $scope.$watch("currentCultureIso", function(oldIso, newIso) {
+            // if no culture is selected, we will pick the default one:
+            if ($scope.currentCultureIso === null) {
+                $scope.currentCulture = cultures.find(function(culture) {
+                    return culture.isDefault === true;
+                })
+                return;
+            }
             $scope.currentCulture = cultures.find(function(culture) {
                 return culture.iso === $scope.currentCultureIso;
             })
diff --git a/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml b/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml
index 9b9fe37143..4b7bcaee87 100644
--- a/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml
+++ b/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml
@@ -50,22 +50,20 @@
                     </div>
                 </div>
 
-
-                <div class="preview-menu-option" ng-class="{'--open': cultureOpen === true}" ng-click="$event.stopPropagation()">
-                    <button class="menu-bar__button umb-outline" ng-click="toggleCultureOpen()"><i class="icon {{currentCulture.icon}}"></i><span>{{currentCulture.title}}</span></button>
-                    <div class="dropdown-menu">
-
-                        @if (Model.Languages != null && Model.Languages.Count() > 1)
-                        {
-                            foreach (var language in Model.Languages)
+                @if (Model.Languages != null && Model.Languages.Count() > 1)
+                {
+                    <div class="preview-menu-option" ng-class="{'--open': cultureOpen === true}" ng-click="$event.stopPropagation()">
+                        <button class="menu-bar__button umb-outline" ng-click="toggleCultureOpen()"><i class="icon icon-globe-europe---africa"></i><span>{{currentCulture.title}}</span></button>
+                        <div class="dropdown-menu">
+                            @foreach (var language in Model.Languages)
                             {
-                                <button class="menu-bar__button umb-outline" ng-class="{ '--active':'@language.IsoCode' === currentCultureIso }" ng-click="changeCulture('@language.IsoCode')" ng-init="registerCulture('@language.IsoCode', '@language.CultureName', 'icon-globe-europe---africa')">
+                                <button class="menu-bar__button umb-outline" ng-class="{ '--active': currentCultureIso === '@language.IsoCode' || (@language.IsDefault.ToString().ToLower() && currentCultureIso === null) }" ng-click="changeCulture('@language.IsoCode')" ng-init="registerCulture('@language.IsoCode', '@language.CultureName', @language.IsDefault.ToString().ToLower())">
                                     <i class="icon icon-globe-europe---africa"></i><span>@language.CultureName</span>
                                 </button>
                             }
-                        }
+                        </div>
                     </div>
-                </div>
+                }
 
                 <button ng-click="exitPreview()" title="Exit Preview" class="menu-bar__button umb-outline"><i class="icon icon-power"></i><span>Exit</span>
                 </button>