Improve save flow

(see #3777)

* When entering Save mode, map content transitions inactive: appears grayscale
and dims slightly so colorblind users perceive a change. The sidebar controls
still let the user review their edits, or return to editing to address any
warnings.
* Adjusted the language a little bit "Save" -> "Upload" to make it clear that
an Upload needs to happen. No more 2 Save buttons.

css/app.css

@@ -41,6 +41,20 @@ body {
     height: 100%;
 }
 
+#content.active {
+    -webkit-filter: none !important;
+    filter: none !important;
+    -webkit-duration: 200ms;
+    transition-duration: 200ms;
+}
+
+#content.inactive {
+    -webkit-filter: grayscale(80%) brightness(80%);
+    filter: grayscale(80%) brightness(80%);
+    -webkit-duration: 200ms;
+    transition-duration: 200ms;
+}
+
 #defs {
     /* Can't be display: none or the clippaths are ignored. */
     position: absolute;

data/core.yaml

@@ -248,12 +248,12 @@ en:
     readonly: The API is read-only. You will need to wait to save your changes.
     rateLimit: The API is limiting anonymous connections.  You can fix this by logging in.
   commit:
-    title: Save Changes
+    title: Upload to OpenStreetMap
     description_placeholder: Brief description of your contributions (required)
-    message_label: Changeset comment
+    message_label: Changeset Comment
     upload_explanation: "The changes you upload will be visible on all maps that use OpenStreetMap data."
     upload_explanation_with_user: "The changes you upload as {user} will be visible on all maps that use OpenStreetMap data."
-    save: Save
+    save: Upload
     cancel: Cancel
     changes: "{count} Changes"
     warnings: Warnings

dist/locales/en.json

@@ -320,12 +320,12 @@
             "rateLimit": "The API is limiting anonymous connections.  You can fix this by logging in."
         },
         "commit": {
-            "title": "Save Changes",
+            "title": "Upload to OpenStreetMap",
             "description_placeholder": "Brief description of your contributions (required)",
-            "message_label": "Changeset comment",
+            "message_label": "Changeset Comment",
             "upload_explanation": "The changes you upload will be visible on all maps that use OpenStreetMap data.",
             "upload_explanation_with_user": "The changes you upload as {user} will be visible on all maps that use OpenStreetMap data.",
-            "save": "Save",
+            "save": "Upload",
             "cancel": "Cancel",
             "changes": "{count} Changes",
             "warnings": "Warnings",

modules/modes/save.js

@@ -353,6 +353,9 @@ export function modeSave(context) {
             context.ui().sidebar.show(ui);
         }
 
+        context.container().selectAll('#content')
+            .attr('class', 'inactive');
+
         if (context.connection().authenticated()) {
             done();
         } else {
@@ -368,6 +371,9 @@ export function modeSave(context) {
 
 
     mode.exit = function() {
+        context.container().selectAll('#content')
+            .attr('class', 'active');
+
         context.ui().sidebar.hide();
     };
 

modules/ui/init.js

@@ -63,7 +63,8 @@ export function uiInit(context) {
 
         var content = container
             .append('div')
-            .attr('id', 'content');
+            .attr('id', 'content')
+            .attr('class', 'active');
 
         var bar = content
             .append('div')