Fix preview with multiple cultures + highlight the current culture

src/Umbraco.Web.UI.Client/src/less/canvas-designer.less

@@ -272,7 +272,6 @@ a, a:hover{
 ul.sections {
     display: block;
     background: #1b264f;
-    height: 100%;
     position:absolute;
     top: 90px;
     width: 80px;
@@ -281,12 +280,21 @@ ul.sections {
     margin:0;
     padding:0;
     margin-left: -80px;
+    overflow: scroll;
+    overflow-x: hidden;
+    height: calc(100% - 91px);
+
+    &::-webkit-scrollbar {
+        width: 0px;
+        background: transparent; 
+    }
 }
 
 ul.sections li {
     display: block;
     border-left: 4px #1b264f solid;
     transition: all .3s linear;
+    cursor: pointer;
 }
 
 .fix-left-menu ul.sections li a span,

src/Umbraco.Web.UI.Client/src/preview/preview.controller.js

@@ -143,7 +143,10 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
                 setPageUrl();
             }
         };
-        
+
+        $scope.isCurrentCulture = function(culture) {
+            return $location.search().culture === culture;
+        }
     })
 
 

src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml

@@ -44,21 +44,21 @@
             </div>
             <ul class="sections" ng-class="{selected: showDevicesPreview && showDevices}">
                 <li ng-repeat="device in devices" ng-class="{ current:previewDevice==device }">
-                    <a href="" ng-click="updatePreviewDevice(device)"><i class="icon {{device.icon}}" title="{{device.title}}"></i><span></span></a>
+                    <a ng-click="updatePreviewDevice(device)"><i class="icon {{device.icon}}" title="{{device.title}}"></i><span></span></a>
                 </li>
 
                 @if (Model.Languages != null && Model.Languages.Count() > 1)
                 {
                     foreach (var previewLink in Model.Languages)
                      {
-                         <li>
-                             <a href="" ng-click="changeCulture('@previewLink.IsoCode')" title="Preview in @previewLink.CultureName"><i class="icon icon-globe-europe---africa"></i><span>@previewLink.CultureName</span></a>
+                         <li ng-class="{ current:isCurrentCulture('@previewLink.IsoCode') }">
+                             <a ng-click="changeCulture('@previewLink.IsoCode')" title="Preview in @previewLink.CultureName"><i class="icon icon-globe-europe---africa"></i><span>@previewLink.CultureName</span></a>
                          </li>
                      }
                 }
 
                 <li>
-                    <a href="" ng-click="exitPreview()" title="Exit Preview"><i class="icon icon-wrong"></i><span> </span></a>
+                    <a ng-click="exitPreview()" title="Exit Preview"><i class="icon icon-wrong"></i><span> </span></a>
                 </li>
             </ul>
         </div>