Merge pull request #5622 from openstreetmap/5614

5614 - add close button to commit side bar

css/80_app.css

@@ -648,6 +648,19 @@ button.add-note svg.icon {
     justify-content: center;
 }
 
+.header-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.header-block-outer {
+    width: 20%;
+}
+
+.header-block-close {
+    display: flex;
+    justify-content: flex-end;
+}
 
 /* Hide/Toggle collapsable sections (aka Disclosure)
 ------------------------------------------------------- */

modules/ui/commit.js

@@ -14,6 +14,8 @@ import { uiCommitWarnings } from './commit_warnings';
 import { uiRawTagEditor } from './raw_tag_editor';
 import { utilDetect } from '../util/detect';
 import { utilRebind } from '../util';
+import { modeBrowse } from '../modes';
+import { svgIcon } from '../svg';
 
 
 var _changeset;
@@ -100,11 +102,27 @@ export function uiCommit(context) {
         var header = selection.selectAll('.header')
             .data([0]);
 
-        header.enter()
+        var headerTitle = header.enter()
             .append('div')
-            .attr('class', 'header fillL')
+            .attr('class', 'header fillL header-container');
+
+        headerTitle
+            .append('div')
+            .attr('class', 'header-block header-block-outer');
+
+        headerTitle
+            .append('div')
+            .attr('class', 'header-block')
             .append('h3')
             .text(t('commit.title'));
+
+        headerTitle
+            .append('div')
+            .attr('class', 'header-block header-block-outer header-block-close')
+            .append('button') 
+            .attr('class', 'close')
+            .on('click', function() { context.enter(modeBrowse(context)); })
+            .call(svgIcon('#iD-icon-close'));
 
         var body = selection.selectAll('.body')
             .data([0]);