Added some styling for disabled variants

src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js

@@ -107,7 +107,7 @@
                         $scope.editors[s].content = initVariant(variant);
                     }
                 }
-                
+
             }
         }
 
@@ -128,15 +128,16 @@
                 //if the variant list that defines the header drop down isn't assigned to the variant then assign it now
                 if (!variant.variants) {
                     variant.variants = _.map($scope.content.variants,
-                        function(v) {
+                        function (v) {
                             return _.pick(v, "active", "language", "state");
                         });
                 }
                 else {
                     //merge the scope variants on top of the header variants collection (handy when needing to refresh)
+                    var orgVar = variant;
                     angular.extend(variant.variants,
                         _.map($scope.content.variants,
-                            function(v) {
+                            function (v) {
                                 return _.pick(v, "active", "language", "state");
                             }));
                 }
@@ -150,6 +151,25 @@
                         variant.variants[i].active = false;
                     }
                 }
+
+                // disables the active variant in the opposite editor language dropdown
+                // to prevent same variant to be opened twice
+                if ($scope.editors.length > 1) {
+                    for (var y = 0; y < $scope.editors.length; y++) {
+                        for (var $ = 0; $ < $scope.editors[y].content.variants.length; $++) {
+
+                            var editorIndex = y === 0 ? 1 : 0;
+
+                            if ($scope.editors[y].content.variants[$].active === true) {
+                                $scope.editors[editorIndex].content.variants[$].disabled = true;
+
+                            } else {
+                                $scope.editors[editorIndex].content.variants[$].disabled = false;
+                            }
+                        }
+                    }
+
+                }
             }
 
             //then assign the variant to a view model to the content app
@@ -312,7 +332,7 @@
                 $scope.page.buttonGroupState = "success";
 
                 eventsService.emit("content.saved", { content: $scope.content, action: args.action });
-                
+
                 return $q.when(data);
             },
                 function (err) {
@@ -322,7 +342,7 @@
                     }
 
                     $scope.page.buttonGroupState = "error";
-                    
+
                     return $q.reject(err);
                 });
         }
@@ -581,7 +601,7 @@
                 $scope.saveAndCloseButtonState = "success";
             }).catch(angular.noop);;
         };
-        
+
         function moveNode(node, target) {
 
             contentResource.move({ "parentId": target.id, "id": node.id })

src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontent.directive.js

@@ -43,10 +43,13 @@
                     });
 
                     var editor = {
-                        content: scope.initVariant({ variant: variant})
+                        content: scope.initVariant({ variant: variant })
                     };
+
                     scope.editors.push(editor);
 
+                    disableActiveVariant();
+
                     //TODO: hacking animation states - these should hopefully be easier to do when we upgrade angular
                     editor.collapsed = true;
                     editor.loading = true;
@@ -56,6 +59,7 @@
                     }, 100);
                 };
 
+               
                 /**
                  * Changes the currently selected variant
                  * @param {any} variantDropDownItem
@@ -71,8 +75,7 @@
                     if (editorIndex === 0) {
                         //if we've made it this far, then update the query string
                         $location.search("cculture", variantDropDownItem.language.culture);
-                    }
-                    else {
+                    } else {
                         //set all variant drop down items as inactive for this editor and then set the selected on as active
                         for (var i = 0; i < scope.editor.content.variants.length; i++) {
                             scope.editor.content.variants[i].active = false;
@@ -85,21 +88,64 @@
                         });
                         scope.editor.content = scope.initVariant({ variant: variant });
                     }
+
+                    disableActiveVariant();
                 };
 
                 /** Closes the split view */
                 scope.closeSplitView = function () {
+
+                    // if we close split view, then disabled to false on all active variants
+                    for (var i = 0; i < scope.editors.length; i++) {
+                        for (var c = 0; c < scope.editors[i].content.variants.length; c++) {
+                            if (scope.editors[1].content.variants[c].active === true) {
+
+                                if (scope.editors[i].content.variants[c].hide) {
+                                    scope.editors[i].content.variants[c].hide = false;
+                                }
+                            }
+                        }
+                    }
+
+
                     //TODO: hacking animation states - these should hopefully be easier to do when we upgrade angular
                     scope.editor.loading = true;
                     scope.editor.collapsed = true;
                     $timeout(function () {
-                        var index = _.findIndex(scope.editors, function(e) {
+                        var index = _.findIndex(scope.editors, function (e) {
                             return e === scope.editor;
                         });
                         scope.editors.splice(index, 1);
                     }, 400);
                 };
 
+                /*
+                 * Disables the active variant in the opposite editor language dropdown
+                 * to prevent same variant to be opened twice
+                 */
+                function disableActiveVariant() {
+                    for (var j = 0; j < scope.editors[0].content.variants.length; j++) {
+
+                        if (scope.editors[1].content.variants[j].disabled) {
+                            scope.editors[1].content.variants[j].disabled = false;
+                        }
+
+                        if (scope.editors[0].content.variants[j].active === true) {
+                            scope.editors[1].content.variants[j].disabled = true;
+                        }
+                    }
+
+                    for (var c = 0; c < scope.editors[1].content.variants.length; c++) {
+                        if (scope.editors[0].content.variants[c].disabled) {
+                            scope.editors[0].content.variants[c].disabled = false;
+                        }
+
+                        if (scope.editors[1].content.variants[c].active === true) {
+                            scope.editors[0].content.variants[c].disabled = true;
+                        }
+                    }
+                }
+
                 //set the content to dirty if the header changes
                 scope.$watch("contentHeaderForm.$dirty",
                     function (newValue, oldValue) {

src/Umbraco.Web.UI.Client/src/less/components/editor.less

@@ -168,12 +168,17 @@ a.umb-variant-switcher__toggle {
 	border-left: 2px solid @turquoise;
 }
 
+.umb-variant-switcher_item--disabled .umb-variant-switcher__name-wrapper-disabled {
+    background-color: @gray-9;
+    border-left: 2px solid @red;
+}
+
 .umb-variant-switcher__item:hover,
 .umb-variant-switcher__item:focus,
 .umb-variant-switcher__name-wrapper:hover,
 .umb-variant-switcher__name-wrapper:focus {
-	background-color: @gray-10;
-	outline: none;
+    background-color: @gray-10;
+    outline: none;
 }
 
 .umb-variant-switcher__item:hover .umb-variant-switcher__split-view {
@@ -190,9 +195,18 @@ a.umb-variant-switcher__toggle {
 	border-left: 2px solid transparent;
 }
 
+.umb-variant-switcher__name-wrapper-disabled {
+    font-size: 14px;
+    flex: 1;
+    cursor: not-allowed;
+    padding-top: 6px !important;
+    padding-bottom: 6px !important;
+    border-left: 2px solid transparent;
+}
+
 .umb-variant-switcher__name {
-	display: block;
-	font-weight: bold;
+    display: block;
+    font-weight: bold;
 }
 
 .umb-variant-switcher__state {

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html

@@ -50,6 +50,7 @@
                         server-validation-field="Alias">
                     </umb-generate-alias>
                     
+
                     <a ng-if="variants.length > 0 && hideChangeVariant !== true" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
                         <span>{{vm.currentVariant.language.name}}</span>
                         <ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
@@ -60,8 +61,10 @@
                     </span>
 
                     <umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
-                        <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active}" ng-repeat="variant in variants">
-                            <a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
+                        <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active, 'umb-variant-switcher_item--disabled': variant.disabled}" ng-repeat="variant in variants">
+
+                            <!--Dropdown in nonsplit view-->
+                            <a ng-if="splitViewOpen !== true" href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
                                 <span class="umb-variant-switcher__name">{{variant.language.name}}</span>
                                 <span ng-switch="variant.state">
                                     <span class="umb-variant-switcher__state" ng-switch-when="NotCreated"><localize key="content_notCreated"></localize></span>
@@ -70,9 +73,29 @@
                                     <span class="umb-variant-switcher__state" ng-switch-when="Published"><localize key="content_published"></localize></span>
                                 </span>
                             </a>
-                                                        
-                            <div ng-if="splitViewOpen !== true" class="umb-variant-switcher__split-view" ng-click="openInSplitView($event, variant)">Open in split view</div>
-                            
+
+                            <!--Dropdown in split view -->
+                            <a ng-if="splitViewOpen === true && variant.disabled !== true" href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
+                                <span class="umb-variant-switcher__name">{{variant.language.name}}</span>
+                                <span ng-switch="variant.state">
+                                    <span class="umb-variant-switcher__state" ng-switch-when="NotCreated"><localize key="content_notCreated"></localize></span>
+                                    <span class="umb-variant-switcher__state" ng-switch-when="Draft"><localize key="content_unpublished"></localize></span>
+                                    <span class="umb-variant-switcher__state" ng-switch-when="PublishedPendingChanges"><localize key="content_publishedPendingChanges"></localize></span>
+                                    <span class="umb-variant-switcher__state" ng-switch-when="Published"><localize key="content_published"></localize></span>
+                                </span>
+                            </a>
+                            <a ng-if="splitViewOpen === true && variant.disabled === true" href="" class="umb-variant-switcher__name-wrapper-disabled" prevent-default>
+                                <span class="umb-variant-switcher__name">{{variant.language.name}}</span>
+                                <span ng-switch="variant.state">
+                                    <span class="umb-variant-switcher__state" ng-switch-when="NotCreated"><localize key="content_notCreated"></localize></span>
+                                    <span class="umb-variant-switcher__state" ng-switch-when="Draft"><localize key="content_unpublished"></localize></span>
+                                    <span class="umb-variant-switcher__state" ng-switch-when="PublishedPendingChanges"><localize key="content_publishedPendingChanges"></localize></span>
+                                    <span class="umb-variant-switcher__state" ng-switch-when="Published"><localize key="content_published"></localize></span>
+                                </span>
+                            </a>
+
+                            <div ng-if="splitViewOpen !== true && variant.active != true" class="umb-variant-switcher__split-view" ng-click="openInSplitView($event, variant)">Open in split view</div>
+
                         </umb-dropdown-item>
                     </umb-dropdown>