From 510ecf5168ad62dc21b6d740d2adef0807a002ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 20 Feb 2020 10:22:09 +0100
Subject: [PATCH] update save dialogs

---
 .../umb-variant-selector-overlay.less         |  4 ++
 .../editor/umb-editor-content-header.html     |  2 +-
 .../src/views/content/overlays/publish.html   | 14 ++++-
 .../overlays/publishdescendants.controller.js | 19 +++++--
 .../content/overlays/publishdescendants.html  | 14 +++--
 .../views/content/overlays/save.controller.js | 11 +++-
 .../src/views/content/overlays/save.html      | 40 ++++++++------
 .../content/overlays/schedule.controller.js   | 45 +++++++--------
 .../src/views/content/overlays/schedule.html  |  9 ++-
 .../overlays/sendtopublish.controller.js      | 55 +++++++++----------
 .../views/content/overlays/sendtopublish.html | 55 ++++++++-----------
 .../content/overlays/unpublish.controller.js  | 18 ++++--
 .../src/views/content/overlays/unpublish.html |  7 ++-
 13 files changed, 168 insertions(+), 125 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-variant-selector-overlay.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-variant-selector-overlay.less
index af9c57b4ff..b50a622f98 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-variant-selector-overlay.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-variant-selector-overlay.less
@@ -11,6 +11,10 @@
     .umb-variant-selector-entry__title {
         font-weight: 600;
         font-size: 14px;
+        .__secondarytitle {
+            font-weight: normal;
+            color: @gray-5;
+        }
     }
     .umb-variant-selector-entry__description {
         display: block;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
index 544a04515f..a17529ca79 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
@@ -53,7 +53,7 @@
                         <umb-dropdown-item
                             ng-repeat-start="entry in vm.variantMenu track by $index"
                             class="umb-variant-switcher__item"
-                            ng-class="{'--current': entry.variant === editor.content, '--active': entry.variant.active && vm.dropdownOpen, '--error': variantHasError(entry.variant), '--state-notCreated':entry.variant.state==='NotCreated', '--state-draft':entry.variant.state==='Draft'}"
+                            ng-class="{'--current': entry.variant === editor.content, '--active': entry.variant.active && vm.dropdownOpen, '--error': variantHasError(entry.variant), '--state-notCreated':entry.variant.state==='NotCreated' && entry.variant.name == null, '--state-draft':entry.variant.state==='Draft' || (entry.variant.state==='NotCreated' && entry.variant.name != null)}"
                         >
                             <button type="button" ng-if="entry.subVariants && entry.subVariants.length > 0" class="umb-variant-switcher__item-expand-button umb-outline" ng-click="entry.open = !entry.open">
                                 <i class="icon icon-navigation-down" ng-if="entry.open"></i>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
index ae0d35c293..4cf4444cfe 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
@@ -21,10 +21,15 @@
                                   on-change="vm.changeSelection(variant)"
                                   server-validation-field="{{variant.htmlId}}"
                     >
-                        <span class="umb-variant-selector-entry__title">
+                        <span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
                             <span ng-bind="variant.displayName"></span>
                             <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
                         </span>
+                        <span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
+                            <span ng-bind="variant.segment"></span>
+                            <span class="__secondarytitle"> — {{variant.language.name}}</span>
+                            <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
+                        </span>
                         <span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                             <umb-variant-state variant="variant"></umb-variant-state>
                             <span ng-if="variant.isMandatory"> - </span>
@@ -54,10 +59,15 @@
 
         <div class="umb-list-item" ng-repeat="variant in vm.missingMandatoryVariants track by variant.compositeId">
             <div class="umb-variant-selector-entry" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
-                <span class="umb-variant-selector-entry__title">
+                <span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
                     <span ng-bind="variant.displayName"></span>
                     <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
                 </span>
+                <span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
+                    <span ng-bind="variant.segment"></span>
+                    <span class="__secondarytitle"> — {{variant.language.name}}</span>
+                    <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
+                </span>
                 <span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                     <umb-variant-state variant="variant"></umb-variant-state>
                     <span ng-if="variant.isMandatory"> - </span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.controller.js
index 2dfb907922..a13ab56e62 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.controller.js
@@ -22,11 +22,12 @@
                 });
             }
 
-            _.each(vm.variants,
-                function (variant) {
-                    variant.compositeId = (variant.language ? variant.language.culture : "inv") + "_" + (variant.segment ? variant.segment : "");
-                    variant.htmlId = "_content_variant_" + variant.compositeId;
-                });
+            _.each(vm.variants, function (variant) {
+                variant.compositeId = (variant.language ? variant.language.culture : "inv") + "_" + (variant.segment ? variant.segment : "");
+                variant.htmlId = "_content_variant_" + variant.compositeId;
+                
+                variant.isMandatory = isMandatoryFilter(variant);
+            });
 
             if (vm.variants.length > 1) {
 
@@ -107,6 +108,14 @@
             variant.save = variant.publish;
         }
 
+        
+        function isMandatoryFilter(variant) {
+            //determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
+            // * has a mandatory language
+            // * without having a segment, segments cant be mandatory at current state of code.
+            return (variant.language && variant.language.isMandatory === true && variant.segment == null);
+        }
+
         //when this dialog is closed, reset all 'publish' flags
         $scope.$on('$destroy', function () {
             for (var i = 0; i < vm.variants.length; i++) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
index 8a58e02dd2..03ff9f9825 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
@@ -37,17 +37,21 @@
                 <ng-form name="publishVariantSelectorForm">
                     <div class="umb-variant-selector-entry" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
 
-                        <umb-checkbox
+                        <umb-checkbox input-id="{{variant.htmlId}}"
                             name="publishVariantSelector"
                             model="variant.publish"
                             on-change="vm.changeSelection(variant)"
                             server-validation-field="{{variant.htmlId}}"
-                            >
-
-                            <span class="umb-variant-selector-entry__title">
+                        >
+                            <span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
                                 <span ng-bind="variant.displayName"></span>
                                 <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
                             </span>
+                            <span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
+                                <span ng-bind="variant.segment"></span>
+                                <span class="__secondarytitle"> — {{variant.language.name}}</span>
+                                <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
+                            </span>
                             <span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                 <umb-variant-state variant="variant"></umb-variant-state>
                                 <span ng-if="variant.isMandatory"> - </span>
@@ -56,12 +60,10 @@
                             <span class="umb-variant-selector-entry__description" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
                                 <span class="text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
                             </span>
-
                         </umb-checkbox>
 
                         <umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
                     </div>
-
                 </ng-form>
             </div>
         </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js
index 9508cb6917..2d5c679815 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js
@@ -25,6 +25,13 @@
             return (variant.active || variant.isDirty);
         }
 
+        function isMandatoryFilter(variant) {
+            //determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
+            // * has a mandatory language
+            // * without having a segment, segments cant be mandatory at current state of code.
+            return (variant.language && variant.language.isMandatory === true && variant.segment == null);
+        }
+
         function hasAnyData(variant) {
             if(variant.name == null || variant.name.length === 0) {
                 return false;
@@ -65,6 +72,8 @@
                     variant.save = false;
                     variant.publish = false;
 
+                    variant.isMandatory = isMandatoryFilter(variant);
+
                     if(variant.state !== "NotCreated"){
                         vm.isNew = false;
                     }
@@ -101,7 +110,7 @@
                     }
                     return 0;
                 });
-                
+
                 _.find(vm.variants, function (v) {
                     if(v.active) {
                         //ensure that the current one is selected
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html
index 516446a676..72aa6b9430 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html
@@ -1,4 +1,4 @@
-<div ng-controller="Umbraco.Overlays.SaveContentController as vm">
+<div ng-controller="Umbraco.Overlays.SaveContentController as vm" class="umb-variant-selector-overlay">
 
     <div ng-if="vm.loading" style="min-height: 50px; position: relative;">
         <umb-load-indicator></umb-load-indicator>
@@ -7,8 +7,7 @@
     <div ng-if="!vm.loading">
         <div class="mb3">
             <p>
-                <localize ng-if="!vm.isNew" key="content_languagesToSave"></localize>
-                <localize ng-if="vm.isNew" key="content_languagesToSaveForFirstTime"></localize>
+                <localize key="content_variantsToSave"></localize>
             </p>
         </div>
 
@@ -17,7 +16,7 @@
             <div class="umb-list-item"
                  ng-repeat="variant in vm.variants | filter:vm.dirtyVariantFilter track by variant.compositeId">
                 <ng-form name="saveVariantSelectorForm">
-                    <div ng-class="{'umb-list-item--error': saveVariantSelectorForm.saveVariantSelector.$invalid}">
+                    <div class="umb-variant-selector-entry" ng-class="{'umb-list-item--error': saveVariantSelectorForm.saveVariantSelector.$invalid}">
 
                         <umb-checkbox
                             input-id="{{variant.htmlId}}"
@@ -25,21 +24,28 @@
                             model="variant.save"
                             on-change="vm.changeSelection(variant)"
                             server-validation-field="{{variant.htmlId}}"
-                            text="{{variant.language.name}}"
-                        />
+                        >
+                            <span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
+                                <span ng-bind="variant.displayName"></span>
+                                <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
+                            </span>
+                            <span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
+                                <span ng-bind="variant.segment"></span>
+                                <span class="__secondarytitle"> — {{variant.language.name}}</span>
+                                <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
+                            </span>
+                            <span class="umb-variant-selector-entry__description" ng-if="!saveVariantSelectorForm.saveVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
+                                <umb-variant-state variant="variant"></umb-variant-state>
+                                <span ng-if="variant.isMandatory"> - </span>
+                                <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="languages_mandatoryLanguage"></localize></span>
+                            </span>
+                            <span class="umb-variant-selector-entry__description" ng-messages="saveVariantSelectorForm.saveVariantSelector.$error" show-validation-on-submit>
+                                <span class="text-error" ng-message="valServerField">{{saveVariantSelectorForm.saveVariantSelector.errorMsg}}</span>
+                            </span>
+                        </umb-checkbox>
 
-                        <div>
-                                <span class="db umb-list-item__description umb-list-item__description--checkbox" ng-if="!saveVariantSelectorForm.$invalid && !(variant.notifications && variant.notifications.length > 0)">
-                                    <umb-variant-state variant="variant"></umb-variant-state>
-                                    <span ng-if="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
-                                </span>
+                        <umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
 
-                                <span class="db" ng-messages="saveVariantSelectorForm.saveVariantSelector.$error" show-validation-on-submit>
-                                    <span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{saveVariantSelectorForm.saveVariantSelector.errorMsg}}</span>
-                                </span>
-
-                                <umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
-                        </div>
                     </div>
 
                 </ng-form>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js
index 087fba49cf..5e2955950b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js
@@ -12,7 +12,6 @@
         vm.clearPublishDate = clearPublishDate;
         vm.clearUnpublishDate = clearUnpublishDate;
         vm.dirtyVariantFilter = dirtyVariantFilter;
-        vm.pristineVariantFilter = pristineVariantFilter;
         vm.changeSelection = changeSelection;
 
         vm.firstSelectedDates = {};
@@ -24,7 +23,6 @@
         function onInit() {
 
             vm.variants = $scope.model.variants;
-            vm.hasPristineVariants = false;
 
             for (let i = 0; i < vm.variants.length; i++) {
                 origDates.push({
@@ -38,23 +36,19 @@
                     $scope.model.title = value;
                 });
             }
+           
+            _.each(vm.variants, function (variant) {
+                variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
+                variant.htmlId = "_content_variant_" + variant.compositeId;
+
+                variant.isMandatory = isMandatoryFilter(variant);
+
+            });
 
             // Check for variants: if a node is invariant it will still have the default language in variants
             // so we have to check for length > 1
             if (vm.variants.length > 1) {
 
-                _.each(vm.variants,
-                    function (variant) {
-                        variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
-                        variant.htmlId = "_content_variant_" + variant.compositeId;
-    
-                        //check for pristine variants
-                        if (!vm.hasPristineVariants) {
-                            vm.hasPristineVariants = pristineVariantFilter(variant);
-                        }
-                    });
-
-                
                 vm.variants = vm.variants.sort(function (a, b) {
                     if (a.language && b.language) {
                         if (a.language.name > b.language.name) {
@@ -75,15 +69,12 @@
                     return 0;
                 });
 
-                var active = _.find(vm.variants, function (v) {
-                    return v.active;
+                _.each(vm.variants, function (v) {
+                    if (v.active) {
+                        v.save = true;
+                    }
                 });
-
-                if (active) {
-                    //ensure that the current one is selected
-                    active.save = true;
-                }
-
+                
                 $scope.model.disableSubmitButton = !canSchedule();
             
             }
@@ -143,6 +134,7 @@
          * @param {any} type publish or unpublish
          */
         function datePickerChange(variant, dateStr, type) {
+            console.log("datePickerChange", variant, dateStr, type)
             if (type === 'publish') {
                 setPublishDate(variant, dateStr);
             } else if (type === 'unpublish') {
@@ -257,6 +249,7 @@
          * @param {any} variant 
          */
         function clearPublishDate(variant) {
+            console.log("clearPublishDate", variant, variant.releaseDate)
             if(variant && variant.releaseDate) {
                 variant.releaseDate = null;
                 // we don't have a publish date anymore so we can clear the min date for unpublish
@@ -272,6 +265,7 @@
          * @param {any} variant 
          */
         function clearUnpublishDate(variant) {
+            console.log("clearUnpublishDate", variant)
             if(variant && variant.expireDate) {
                 variant.expireDate = null;
                 // we don't have a unpublish date anymore so we can clear the max date for publish
@@ -313,8 +307,11 @@
             return (variant.active || variant.isDirty || variant.state === "Draft" || variant.state === "PublishedPendingChanges" || variant.state === "NotCreated");
         }
 
-        function pristineVariantFilter(variant) {
-            return !(dirtyVariantFilter(variant));
+        function isMandatoryFilter(variant) {
+            //determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
+            // * has a mandatory language
+            // * without having a segment, segments cant be mandatory at current state of code.
+            return (variant.language && variant.language.isMandatory === true && variant.segment == null);
         }
 
         /** Returns true if publishing is possible based on if there are un-published mandatory languages */
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
index 80cffbc998..e0812d8654 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
@@ -94,10 +94,15 @@
                             model="variant.save"
                             on-change="vm.changeSelection(variant)"
                         >
-                            <span class="umb-variant-selector-entry__title">
+                            <span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
                                 <span ng-bind="variant.displayName"></span>
                                 <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
                             </span>
+                            <span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
+                                <span ng-bind="variant.segment"></span>
+                                <span class="__secondarytitle"> — {{variant.language.name}}</span>
+                                <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
+                            </span>
                             <span class="umb-variant-selector-entry__description"
                                 ng-if="!scheduleSelectorForm.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                 <umb-variant-state variant="variant"></umb-variant-state>
@@ -110,7 +115,7 @@
 
 
                             <div class="date-wrapper-mini date-wrapper-mini--checkbox">
-                                <div class="date-wrapper-mini__date" ng-if="vm.dirtyVariantFilter(variant) && (variant.releaseDate || variant.save)">
+                                <div class="date-wrapper-mini__date" ng-if="(variant.releaseDate || variant.save)">
 
                                     <div style="font-size: 13px; margin-right: 5px;">Publish:<em ng-show="!variant.save">&nbsp;&nbsp;{{variant.releaseDateFormatted}}</em></div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.controller.js
index 296698f576..e11b651c23 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.controller.js
@@ -6,8 +6,6 @@
         var vm = this;
         vm.loading = true;
 
-        vm.modifiedVariantFilter = modifiedVariantFilter;
-        vm.unmodifiedVariantFilter = unmodifiedVariantFilter;
         vm.changeSelection = changeSelection;
 
         function onInit() {
@@ -20,15 +18,19 @@
                     $scope.model.title = value;
                 });
             }
-            
-            if (vm.variants.length !== 0) {
-                _.each(vm.variants,
-                    function (variant) {
-                        variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
-                        variant.htmlId = "_content_variant_" + variant.compositeId;
-                    });
 
-                vm.variants = vm.variants.sort(function (a, b) {
+            _.each(vm.variants, function (variant) {
+                variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
+                variant.htmlId = "_content_variant_" + variant.compositeId;
+                
+                variant.isMandatory = isMandatoryFilter(variant);
+            });
+            
+            vm.availableVariants = vm.variants.filter(publishableVariantFilter);
+            
+            if (vm.availableVariants.length !== 0) {
+
+                vm.availableVariants = vm.availableVariants.sort(function (a, b) {
                     if (a.language && b.language) {
                         if (a.language.name > b.language.name) {
                             return -1;
@@ -48,15 +50,12 @@
                     return 0;
                 });
 
-                var active = _.find(vm.variants, function (v) {
-                    return v.active;
+                _.each(vm.availableVariants, function (v) {
+                    if(v.active) {
+                        v.save = true;
+                    }
                 });
 
-                if (active) {
-                    //ensure that the current one is selected
-                    active.save = true;
-                }
-
             } else {
                 //disable save button if we have nothing to save
                 $scope.model.disableSubmitButton = true;
@@ -73,20 +72,20 @@
             $scope.model.disableSubmitButton = !firstSelected; //disable submit button if there is none selected
         }
 
-        function modifiedVariantFilter(variant) {
-            //determine a variant is 'modified' (meaning it will show up as able to send for approval)
-            // * it's editor is in a $dirty state
-            // * it is in Draft state
-            // * it is published with pending changes
-            return (variant.active || variant.isDirty || variant.state === "Draft" || variant.state === "PublishedPendingChanges");
+        function isMandatoryFilter(variant) {
+            //determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
+            // * has a mandatory language
+            // * without having a segment, segments cant be mandatory at current state of code.
+            return (variant.language && variant.language.isMandatory === true && variant.segment == null);
         }
 
-        function unmodifiedVariantFilter(variant) {
-            //determine a variant is 'unmodified' (meaning it will NOT show up as able to send for approval)
+        function publishableVariantFilter(variant) {
+            //determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
+            // * variant is active
             // * it's editor is in a $dirty state
-            // * it has been published
-            // * it is not created for that specific language
-            return (variant.state === "Published" && !variant.isDirty && !variant.active || variant.state === "NotCreated" && !variant.isDirty && !variant.active);
+            // * it has pending saves
+            // * it is unpublished
+            return (variant.active || variant.isDirty || variant.state === "Draft" || variant.state === "PublishedPendingChanges");
         }
 
         //when this dialog is closed, reset all 'save' flags
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
index ae8cd87484..1c5667ed5b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
@@ -1,4 +1,4 @@
-<div ng-controller="Umbraco.Overlays.SendToPublishController as vm">
+<div ng-controller="Umbraco.Overlays.SendToPublishController as vm" class="umb-variant-selector-overlay">
 
     <div class="mb3">
         <p><localize key="content_languagesToSendForApproval"></localize></p>
@@ -10,31 +10,36 @@
 
     <div class="umb-list umb-list--condensed" ng-if="!vm.loading">
 
-        <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.modifiedVariantFilter">
+        <div class="umb-list-item" ng-repeat="variant in vm.availableVariants">
             <ng-form name="publishVariantSelectorForm">
-                <div ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
+                <div class="umb-variant-selector-entry" ng-class="{'umb-list-item--error': publishVariantSelectorForm.publishVariantSelector.$invalid}">
 
-                    <umb-checkbox
-                        input-id="{{variant.htmlId}}"
+                    <umb-checkbox input-id="{{variant.htmlId}}"
                         name="publishVariantSelector"
-                        model="variant.save"
+                        model="variant.publish"
                         on-change="vm.changeSelection(variant)"
                         server-validation-field="{{variant.htmlId}}"
-                        text="{{ variant.language.name }}"
-                    />
-
-                    <div>
-                        <span class="db umb-list-item__description umb-list-item__description--checkbox" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
+                    >
+                        <span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
+                            <span ng-bind="variant.displayName"></span>
+                            <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
+                        </span>
+                        <span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
+                            <span ng-bind="variant.segment"></span>
+                            <span class="__secondarytitle"> — {{variant.language.name}}</span>
+                            <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
+                        </span>
+                        <span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                             <umb-variant-state variant="variant"></umb-variant-state>
-                            <span ng-if="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
+                            <span ng-if="variant.isMandatory"> - </span>
+                            <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="languages_mandatoryLanguage"></localize></span>
                         </span>
-
-                        <span class="db" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
-                            <span class="db umb-list-item__description umb-list-item__description--checkbox text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
+                        <span class="umb-variant-selector-entry__description" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
+                            <span class="text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
                         </span>
+                    </umb-checkbox>
 
-                        <umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
-                    </div>
+                    <umb-variant-notification-list notifications="variant.notifications"></umb-variant-notification-list>
                 </div>
 
             </ng-form>
@@ -42,20 +47,4 @@
         <br />
     </div>
 
-    <div class="umb-list umb-list--condensed" ng-if="!vm.loading && (vm.variants | filter:vm.unmodifiedVariantFilter).length > 0">
-        <div class="bold mb3">
-            <p><localize key="content_unmodifiedLanguages"></localize></p>
-        </div>
-
-        <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.unmodifiedVariantFilter">
-            <div>
-                <div style="margin-bottom: 2px;">
-                    <span>{{ variant.language.name }}</span>
-                    <strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
-                </div>
-                <umb-variant-state class="umb-list-item__description" variant="variant"></umb-variant-state>
-            </div>
-        </div>
-    </div>
-
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.controller.js
index 06f7be3a17..1349880ba4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.controller.js
@@ -20,11 +20,12 @@
                 });
             }
 
-            _.each(vm.variants,
-                function (variant) {
-                    variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
-                    variant.htmlId = "_content_variant_" + variant.compositeId;
-                });
+            _.each(vm.variants, function (variant) {
+                variant.compositeId = contentEditingHelper.buildCompositeVariantId(variant);
+                variant.htmlId = "_content_variant_" + variant.compositeId;
+
+                variant.isMandatory = isMandatoryFilter(variant);
+            });
 
             // node has variants
             if (vm.variants.length !== 1) {
@@ -110,6 +111,13 @@
 
         }
 
+        function isMandatoryFilter(variant) {
+            //determine a variant is 'dirty' (meaning it will show up as publish-able) if it's
+            // * has a mandatory language
+            // * without having a segment, segments cant be mandatory at current state of code.
+            return (variant.language && variant.language.isMandatory === true && variant.segment == null);
+        }
+
         function publishedVariantFilter(variant) {
             //determine a variant is 'published' (meaning it will show up as able unpublish)
             // * it has been published
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
index adcba5c259..a02ad5b659 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
@@ -25,10 +25,15 @@
                             disabled="variant.disabled"
                             server-validation-field="{{variant.htmlId}}"
                         >
-                            <span class="umb-variant-selector-entry__title">
+                            <span class="umb-variant-selector-entry__title" ng-if="!(variant.segment && variant.language)">
                                 <span ng-bind="variant.displayName"></span>
                                 <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
                             </span>
+                            <span class="umb-variant-selector-entry__title" ng-if="variant.segment && variant.language">
+                                <span ng-bind="variant.segment"></span>
+                                <span class="__secondarytitle"> — {{variant.language.name}}</span>
+                                <strong ng-if="variant.isMandatory" class="umb-control-required">*</strong>
+                            </span>
                             <span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                 <umb-variant-state variant="variant"></umb-variant-state>
                                 <span ng-if="variant.isMandatory"> - </span>