From 623ace56bc9478d49013d9d7dc1905552bb4b70c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Fri, 8 Mar 2019 14:22:05 +0100
Subject: [PATCH] Improved UX of Save + Remove special case for new content +
 Never disable the user choices, instead provide feedback for when the
 selection doesn't make sense.

---
 .../src/views/content/overlays/save.html      | 72 +++++--------------
 src/Umbraco.Web.UI/Umbraco/config/lang/da.xml |  5 +-
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  5 +-
 .../Umbraco/config/lang/en_us.xml             |  3 +-
 4 files changed, 25 insertions(+), 60 deletions(-)

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 830f460a30..a61b1ac95e 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
@@ -6,54 +6,12 @@
         <umb-load-indicator></umb-load-indicator>
     </div>
 
-
-    <div ng-if="vm.isNew && !vm.loading">
+    <div ng-if="!vm.loading">
         <div style="margin-bottom: 15px;">
-            <p><localize key="content_languagesToSaveForFirstTime"></localize></p>
-        </div>
-
-        <div class="umb-list umb-list--condensed">
-
-            <div class="umb-list-item" ng-repeat="variant in vm.variants">
-                <ng-form name="saveVariantSelectorForm">
-                    <div class="flex">
-
-                       <umb-checkbox
-                            input-id="{{variant.htmlId}}"
-                            name="saveVariantSelector"
-                            model="variant.save"
-                            disabled="vm.isNew"
-                            server-validation-field="{{variant.htmlId}}"/>
-
-                        <div>
-                            <label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
-                                <span>{{ variant.language.name }}</span>
-                                <strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
-
-                                <span class="db" ng-if="!saveVariantSelectorForm.$invalid && !(variant.notifications && variant.notifications.length > 0)">
-                                    <umb-variant-state class="umb-permission__description" variant="variant"></umb-variant-state>
-                                </span>
-
-                                <span class="db" ng-messages="saveVariantSelectorForm.saveVariantSelector.$error" show-validation-on-submit>
-                                    <span class="db umb-permission__description text-error" ng-message="valServerField">{{saveVariantSelectorForm.saveVariantSelector.errorMsg}}</span>
-                                </span>
-
-                                <span class="db" ng-repeat="notification in variant.notifications">
-                                    <span class="db umb-permission__description text-success">{{notification.message}}</span>
-                                </span>
-                            </label>
-                        </div>
-                    </div>
-
-                </ng-form>
-            </div>
-            <br/>
-        </div>
-    </div>
-
-    <div ng-if="!vm.isNew && !vm.loading">
-        <div style="margin-bottom: 15px;">
-            <p><localize key="content_languagesToSave"></localize></p>
+            <p>
+                <localize ng-if="!vm.isNew" key="content_languagesToSave"></localize>
+                <localize ng-if="vm.isNew" key="content_languagesToSaveForFirstTime"></localize>
+            </p>
         </div>
 
         <div class="umb-list umb-list--condensed">
@@ -61,13 +19,14 @@
             <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.dirtyVariantFilter track by variant.compositeId">
                 <ng-form name="saveVariantSelectorForm">
                     <div class="flex">
-                        <input id="{{variant.htmlId}}"
-                               name="saveVariantSelector"
-                               type="checkbox"
-                               ng-model="variant.save"
-                               ng-change="vm.changeSelection(variant)"
-                               style="margin-right: 8px;"
-                               val-server-field="{{variant.htmlId}}" />
+
+                        <umb-checkbox
+                            input-id="{{variant.htmlId}}"
+                            name="saveVariantSelector"
+                            model="variant.save"
+                            on-change="vm.changeSelection(variant)"
+                            server-validation-field="{{variant.htmlId}}"/>
+
                         <div>
                             <label for="{{variant.htmlId}}" style="margin-bottom: 2px;">
                                 <span>{{ variant.language.name }}</span>
@@ -95,7 +54,10 @@
 
         <div class="umb-list umb-list--condensed" ng-if="vm.hasPristineVariants">
             <div style="margin-bottom: 15px; font-weight: bold;">
-                <p><localize key="content_unmodifiedLanguages"></localize></p>
+                <p>
+                    <localize ng-if="!vm.isNew" key="content_unmodifiedLanguages"></localize>
+                    <localize ng-if="vm.isNew" key="content_untouchedLanguagesForFirstTime"></localize>
+                </p>
             </div>
 
             <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.pristineVariantFilter">
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
index 7969655264..3ffb2ae13c 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -271,13 +271,14 @@
     <key alias="languagesToPublishForFirstTime">Hvilke sprog vil du gerne udgive? Alle sprog med indhold gemmes!</key>
     <key alias="languagesToPublish">Hvilke sprog vil du gerne udgive?</key>
     <key alias="languagesToSave">Hvilke sprog vil du gerne gemme?</key>
-    <key alias="languagesToSaveForFirstTime">Alle sprog med indhold gemmes ved oprettelsen!</key>
+    <key alias="languagesToSaveForFirstTime">Hvilke sprog vil du gerne gemme?</key>
     <key alias="languagesToSendForApproval">Hvilke sprog vil du gerne sende til godkendelse?</key>
     <key alias="languagesToSchedule">Hvilke sprog vil du gerne planlægge?</key>
     <key alias="languagesToUnpublish">Vælg sproget du vil afpublicere. Afpublicering af et obligatorisk sprog vil afpublicere alle sprog.</key>
     <key alias="publishedLanguages">Udgivne sprog</key>
     <key alias="unpublishedLanguages">Ikke-udgivne sprog</key>
-    <key alias="unmodifiedLanguages">Uændrede sprog</key>
+    <key alias="unmodifiedLanguages">Uændrede sprog</key>
+    <key alias="untouchedLanguagesForFirstTime">Disse sprog er ikke blevet oprettet</key>
     <key alias="readyToPublish">Klar til at udgive?</key>
     <key alias="readyToSave">Klar til at gemme?</key>
     <key alias="sendForApproval">Send til godkendelse</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 1840883c34..c14576ba7c 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -281,13 +281,14 @@
     <key alias="languagesToPublishForFirstTime">What languages would you like to publish? All languages with content are saved!</key>
     <key alias="languagesToPublish">What languages would you like to publish?</key>
     <key alias="languagesToSave">What languages would you like to save?</key>
-    <key alias="languagesToSaveForFirstTime">All languages with content are saved on creation!</key>
+    <key alias="languagesToSaveForFirstTime">What languages would you like to save?</key>
     <key alias="languagesToSendForApproval">What languages would you like to send for approval?</key>
     <key alias="languagesToSchedule">What languages would you like to schedule?</key>
     <key alias="languagesToUnpublish">Select the languages to unpublish. Unpublishing a mandatory language will unpublish all languages.</key>
     <key alias="publishedLanguages">Published Languages</key>
     <key alias="unpublishedLanguages">Unpublished Languages</key>
-    <key alias="unmodifiedLanguages">Unmodified Languages</key>
+    <key alias="unmodifiedLanguages">Unmodified Languages</key>
+    <key alias="untouchedLanguagesForFirstTime">These languages haven't been created</key>
     <key alias="readyToPublish">Ready to Publish?</key>
     <key alias="readyToSave">Ready to Save?</key>
     <key alias="sendForApproval">Send for approval</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
index 50714c0ad6..a739bc85aa 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -283,13 +283,14 @@
     <key alias="languagesToPublishForFirstTime">What languages would you like to publish? All languages with content are saved!</key>
     <key alias="languagesToPublish">What languages would you like to publish?</key>
     <key alias="languagesToSave">What languages would you like to save?</key>
-    <key alias="languagesToSaveForFirstTime">All languages with content are saved on creation!</key>
+    <key alias="languagesToSaveForFirstTime">What languages would you like to save?</key>
     <key alias="languagesToSendForApproval">What languages would you like to send for approval?</key>
     <key alias="languagesToSchedule">What languages would you like to schedule?</key>
     <key alias="languagesToUnpublish">Select the languages to unpublish. Unpublishing a mandatory language will unpublish all languages.</key>
     <key alias="publishedLanguages">Published Languages</key>
     <key alias="unpublishedLanguages">Unpublished Languages</key>
     <key alias="unmodifiedLanguages">Unmodified Languages</key>
+    <key alias="untouchedLanguagesForFirstTime">These languages haven't been created</key>
     <key alias="readyToPublish">Ready to Publish?</key>
     <key alias="readyToSave">Ready to Save?</key>
     <key alias="sendForApproval">Send for approval</key>