big commit modal cleanup.

2026-03-31 09:19:25 +02:00 · 2013-03-21 17:02:22 -04:00
parent 36da7fee4e
commit 992df47cac
10 changed files with 105 additions and 175 deletions
--- a/css/app.css
+++ b/css/app.css
@@ -70,12 +70,12 @@ h2:last-child,
 h4:last-child { margin-bottom: 0;}

 h3 {
-    font-size: 18px;
+    font-size: 16px;
    line-height: 1.3333;
    font-weight: bold;
    margin-bottom: 10px;
    text-overflow: ellipsis;
-    white-space: nowrap
+    white-space: nowrap;
 }

 h4 {
@@ -134,6 +134,7 @@ a:hover {

 textarea  {
    resize: vertical;
+    font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
 }

 textarea,
@@ -285,9 +286,6 @@ form.hide {
 }

 .pad1    {padding: 10px;}
-.pad2    {padding: 20px;}
-.margin1 {margin: 10px;}
-.margin2 {margin: 20px;}

 .loading {
    background: url(../img/loader_bg.gif);
@@ -443,12 +441,6 @@ button.save.has-count .count::before {
    border-right:  6px solid rgba(255,255,255,.5);
 }

-button.close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-}
-
 button[disabled] {
    cursor:auto;
    background: rgba(255,255,255,.5);
@@ -580,6 +572,37 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
    border-radius: 0;
 }

+
+/* Header for modals / panes
+------------------------------------------------------- */
+
+.header {
+    border-bottom: 1px solid #ccc;
+    z-index: 2;
+    position: relative;
+}
+
+.header h3 {
+    margin-bottom: 0;
+}
+
+.modal > button,
+.header button {
+    height: 100%;
+    border-radius: 0;
+    border-left: 1px solid #CCC;
+    width: 40px;
+    text-align: center;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+}
+
+.modal > button {
+    height: 61px;
+    z-index: 3;
+}
+
 /* Inspector
 ------------------------------------------------------- */

@@ -616,24 +639,13 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
    position: relative;
 }

-.inspector-wrap .message {
-    height: 60px;
-    border-bottom: 1px solid #ccc;
-    z-index: 100;
-    position: relative;
-}
-
-.inspector-wrap .message button {
-    height: 100%;
-    border-radius: 0;
+.inspector-wrap .header button.preset-reset {
    border-right: 1px solid #CCC;
-    width: 60px;
-    text-align: center;
-    overflow: hidden;
    position: relative;
+    width: 60px;
 }

-.inspector-wrap .message button > div {
+.inspector-wrap .header button.preset-reset > div {
    height: 100%;
    padding: 20px 0;
    -webkit-transition: opacity 200ms;
@@ -641,38 +653,26 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
            transition: opacity 200ms;
 }

-.inspector-wrap .message button .col12:last-child {
+.inspector-wrap .header button.preset-reset .col12:last-child {
    position: absolute;
    width: 100%;
    padding: 20px 0;
    opacity: 0;
 }

-.inspector-wrap .message button:hover .col12:first-child {
+.inspector-wrap .header button:hover .col12:first-child {
    opacity: 0;
 }

-.inspector-wrap .message button:hover .col12:last-child {
+.inspector-wrap .header button:hover .col12:last-child {
    opacity: 1;
 }

-.inspector-wrap .message button.line > div {
+.inspector-wrap .header button.line > div {
    padding: 0;
 }

-.inspector-wrap .message button.fr {
-    border-left: 1px solid #CCC;
-    width: 40px;
-}
-
-.inspector-wrap .message h3 {
-    display: block;
-    font-size: 16px;
-    line-height: 20px;
-    overflow: hidden;
-}
-
-.pane:last-child .message h3 {
+.pane:last-child .header h3 {
    position: absolute;
    left: 60px;
    right: 40px;
@@ -1639,11 +1639,9 @@ div.typeahead a:first-child {
 .modal {
    display: inline-block;
    position:absolute;
-    width: 50%;
    left: 0;
    right: 0;
    margin: auto;
-    max-width: 600px;
    top: 80px;
    z-index: 3;
 }
@@ -1652,27 +1650,10 @@ div.typeahead a:first-child {
    margin-bottom: 10px;
 }

-.modal .content {
-    margin-bottom: 40px;
-}
-
 .modal .description {
    text-align: center;
 }

-.modal button.close-modal {
-    float:right;
-    position: absolute;
-    right:5px;
-    top:5px;
-    opacity: .5;
-}
-
-.modal button.close-modal:hover {
-    background-color: transparent;
-    opacity: 1;
-}
-
 .shaded {
    z-index: 2;
    position: absolute;
@@ -1680,6 +1661,7 @@ div.typeahead a:first-child {
    width: 100%;
    overflow: auto;
 }
+
 .shaded:before {
    content:'';
    background:rgba(0,0,0,0.5);
@@ -1689,29 +1671,7 @@ div.typeahead a:first-child {

 .modal-section {
    padding: 20px;
-}
-
-.modal-section:first-child {
-    border-radius: 4px 4px 0 0;
-}
-
-.modal-section:last-child {
-    border-radius: 0 0 4px 4px;
-}
-
-.modal-section:only-of-type {
-    border-radius: 4px;
-}
-
-.modal-section .buttons {
-    padding-top: 10px;
-    width: 100%;
-}
-
-.modal-section img.wiki-image {
-    max-width: 100%;
-    max-height: 300px;
-    display: block;
+    border-bottom: 1px solid #CCC;
 }

 .modal-flash .content {
@@ -1752,6 +1712,7 @@ div.typeahead a:first-child {

 .commit-modal .commit-info {
    margin-top: 10px;
+    padding-bottom: 20px;
 }

 .commit-modal .user-info img {
@@ -1775,66 +1736,46 @@ div.typeahead a:first-child {
 .commit-modal .changeset-list {
    overflow: auto;
    border:1px solid #ccc;
+    border-radius: 4px;
    background:#fff;
    max-height: 160px;
 }

+.commit-modal .warning-section .changeset-list {
+    border-radius: 4px 0 0 4px;
+}
+
 .commit-modal .warning-section .changeset-list  button {
    float: right;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: 0;
+    height: 100%;
+    width: 30px;
 }

-.commit-section.modal-section {
-    padding-bottom: 0;
-}
-
-.commit-section.modal-section:last-child { padding-bottom: 20px;}
-
 .commit-modal .changeset-list li {
    position: relative;
    border-top:1px solid #ccc;
    padding:5px 10px;
 }

-.modal-section {
-    padding: 20px;
-}
-
-.modal-section img.wiki-image {
-    max-width: 100%;
-    max-height: 300px;
-    display: block;
-}
-
-.modal-flash .content {
-    box-shadow: none;
-    border-radius: 4px;
-    background: #111;
-    color: #eee;
-}
-
-.modal-flash .close-modal {
-    display:none;
-}
-
 .changeset-list li span.count {
    font-size:10px;
    color:#555;
 }

 .changeset-list li span.count:before { content: '('; }
+
 .changeset-list li span.count:after { content: ')'; }

 .changeset-list li:first-child { border-top: 0;}

-.commit-modal .changeset-comment {
-    height: 60px;
-    width:100%;
-    /* firefox uses monospace in textareas */
-    font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
-}
-
 /* Success
 ------------------------------------------------------- */
+
 a.success-action {
  display:inline-block;
  padding:10px;
@@ -2098,10 +2039,10 @@ a.success-action {
 ------------------------------------------------------- */

@media only screen and (max-width: 840px) {
-    span.label {display: none;}
+    #bar span.label {display: none;}
+    #bar .icon.icon-pre-text { margin-right: 0px;}
    /* override hide for save button */
-    .icon.icon-pre-text { margin-right: 0px;}
-    .save .label, .apply .label, .cancel .label { display: block;}
+    #bar .save .label { display: block;}
 }

@media only screen and (max-height: 840px) {
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -114,6 +114,7 @@ en:
  commit:
    title: Save Changes
    description_placeholder: Brief description of your contributions
+    message_label: Commit message
    upload_explanation: "The changes you upload as {user} will be visible on all maps that use OpenStreetMap data."
    save: Save
    cancel: Cancel
--- a/data/locales.js
+++ b/data/locales.js
@@ -146,6 +146,7 @@ locale.en = {
    "commit": {
        "title": "Save Changes",
        "description_placeholder": "Brief description of your contributions",
+        "message_label": "Commit message",
        "upload_explanation": "The changes you upload as {user} will be visible on all maps that use OpenStreetMap data.",
        "save": "Save",
        "cancel": "Cancel",
--- a/js/id/ui/commit.js
+++ b/js/id/ui/commit.js
@@ -28,22 +28,30 @@ iD.ui.Commit = function(context) {
        var changes = selection.datum(),
            connection = changes.connection,
            user = connection.user(),
-            header = selection.append('div').attr('class', 'header modal-section fillL'),
+            header = selection.append('div').attr('class', 'header modal-section'),
            body = selection.append('div').attr('class', 'body');

-        header.append('h2')
+        header.append('h3')
            .text(t('commit.title'));

+        // Comment Section
        var commentSection = body.append('div')
-            .attr('class', 'modal-section fillD');
+            .attr('class', 'modal-section preset-field');

-        var commentField = commentSection.append('textarea')
-            .attr('class', 'changeset-comment')
-            .attr('placeholder', t('commit.description_placeholder'))
-            .property('value',  context.storage('comment') || '');
+            commentSection.append('h4')
+                .attr('for','input-commit-note')
+                .text(t('commit.message_label'));
+
+        var commentField = commentSection
+                .append('textarea')
+                .attr('placeholder', t('commit.description_placeholder'))
+                .property('value',  context.storage('comment') || '');

        commentField.node().select();

+        // Save Section
+        var saveSection = body.append('div').attr('class','modal-section cf');
+
        var userLink = d3.select(document.createElement('div'));

        if (user.image_url) {
@@ -58,18 +66,14 @@ iD.ui.Commit = function(context) {
            .attr('href', connection.url() + '/user/' + user.display_name)
            .attr('target', '_blank');

-        commentSection.append('p')
+        saveSection.append('p')
            .attr('class', 'commit-info')
            .html(t('commit.upload_explanation', {user: userLink.html()}));

        // Confirm / Cancel Buttons
-        var buttonWrap = commentSection.append('div')
-            .attr('class', 'buttons cf')
-            .append('div')
-            .attr('class', 'button-wrap joined col4');

-        var saveButton = buttonWrap.append('button')
-            .attr('class', 'save action col6 button')
+        var saveButton = saveSection.append('button')
+            .attr('class', 'action col3 button')
            .on('click.save', function() {
                var comment = commentField.node().value;
                localStorage.comment = comment;
@@ -82,21 +86,11 @@ iD.ui.Commit = function(context) {
            .attr('class', 'label')
            .text(t('commit.save'));

-        var cancelButton = buttonWrap.append('button')
-            .attr('class', 'cancel col6 button')
-            .on('click.cancel', function() {
-                event.cancel();
-            });
-
-        cancelButton.append('span')
-            .attr('class', 'label')
-            .text(t('commit.cancel'));
-
        var warnings = body.selectAll('div.warning-section')
            .data(iD.validate(changes, context.graph()))
            .enter()
            .append('div')
-            .attr('class', 'modal-section warning-section fillL');
+            .attr('class', 'modal-section warning-section fillL2');

        warnings.append('h3')
            .text(t('commit.warnings'));
--- a/js/id/ui/confirm.js
+++ b/js/id/ui/confirm.js
@@ -5,7 +5,7 @@ iD.ui.confirm = function(selection) {
        .classed('modal-alert', true);

    var section = modal.select('.content')
-        .attr('class', 'modal-section fillD');
+        .attr('class', 'modal-section');

    var description = section.append('div')
        .attr('class', 'description');
@@ -17,13 +17,7 @@ iD.ui.confirm = function(selection) {
        .attr('class', 'col2 action centered')
        .on('click.confirm', function() {
            modal.remove();
-        });
-
-    okbutton.append('span')
-        .attr('class', 'icon apply icon-pre-text');
-
-    okbutton.append('span')
-        .attr('class', 'label')
+        })
        .text('Okay');

    return modal;
--- a/js/id/ui/modal.js
+++ b/js/id/ui/modal.js
@@ -21,13 +21,15 @@ iD.ui.modal = function(selection, blocking) {
        });

    var modal = shaded.append('div')
-        .attr('class', 'modal');
+        .attr('class', 'modal fillL col6');

    modal.append('button')
-        .attr('class', 'icon remove')
+        .attr('class', 'close')
        .on('click', function() {
            if (!blocking) shaded.remove();
-        });
+        })
+        .append('div')
+            .attr('class','icon close');

    modal.append('div')
        .attr('class', 'content');
--- a/js/id/ui/preset_grid.js
+++ b/js/id/ui/preset_grid.js
@@ -12,7 +12,7 @@ iD.ui.PresetGrid = function(context, entity) {
        presets = context.presets().matchGeometry(entity, context.graph());

        var messagewrap = selection.append('div')
-            .attr('class', 'message fillL');
+            .attr('class', 'header fillL cf');

        var message = messagewrap.append('h3')
            .attr('class', 'inspector-inner fl')
@@ -20,13 +20,13 @@ iD.ui.PresetGrid = function(context, entity) {

        if (preset) {
            messagewrap.append('button')
-                .attr('class', 'tooltip-bottom preset-choose fr')
+                .attr('class', 'preset-choose')
                .on('click', event.choose)
                .append('span')
                .attr('class', 'icon forward');
        } else {
            messagewrap.append('button')
-                .attr('class', 'tooltip-bottom preset-close fr')
+                .attr('class', 'close')
                .on('click', event.close)
                .append('span')
                .attr('class', 'icon close');
--- a/js/id/ui/restore.js
+++ b/js/id/ui/restore.js
@@ -16,7 +16,7 @@ iD.ui.Restore = function(context) {
            .text(t('restore.description'));

        var buttonWrap = introModal.append('div')
-            .attr('class', 'modal-section fillD cf col12');
+            .attr('class', 'modal-section cf col12');

        var buttons = buttonWrap
            .append('div')
--- a/js/id/ui/success.js
+++ b/js/id/ui/success.js
@@ -3,12 +3,10 @@ iD.ui.Success = function(connection) {

    function success(selection) {
        var changeset = selection.datum(),
-            header = selection.append('div').attr('class', 'header fillL modal-section'),
+            header = selection.append('div').attr('class', 'header modal-section'),
            body = selection.append('div').attr('class', 'body');

-        var section = body.append('div').attr('class','modal-section fillD');
-
-        header.append('h2').text(t('just_edited'));
+        header.append('h3').text(t('just_edited'));

        var m = '';
        if (changeset.comment) {
@@ -18,7 +16,9 @@ iD.ui.Success = function(connection) {
        var message = (m || 'Edited OSM!') +
            connection.changesetUrl(changeset.id);

-        header.append('a')
+        var links = body.append('div').attr('class','modal-section');
+
+        links.append('a')
            .attr('href', function() {
                return connection.changesetUrl(changeset.id);
            })
@@ -26,7 +26,7 @@ iD.ui.Success = function(connection) {
            .attr('class', 'success-action')
            .text(t('view_on_osm'));

-        header.append('a')
+        links.append('a')
            .attr('target', '_blank')
            .attr('href', function() {
                return 'https://twitter.com/intent/tweet?source=webclient&text=' +
@@ -35,17 +35,14 @@ iD.ui.Success = function(connection) {
            .attr('class', 'success-action')
            .text('Tweet');

-        var buttonwrap = section.append('div')
-            .attr('class', 'buttons cf');
+        var section = body.append('div').attr('class','modal-section cf');

-        var okbutton = buttonwrap.append('button')
+        section.append('button')
            .attr('class', 'action col2')
            .on('click.save', function() {
                event.cancel();
-            });
-
-        okbutton.append('span').attr('class','icon apply icon-pre-text');
-        okbutton.append('span').attr('class','label').text('Okay');
+            })
+            .append('span').attr('class','label').text('Okay');
    }

    return d3.rebind(success, event, 'on');
--- a/js/id/ui/tag_editor.js
+++ b/js/id/ui/tag_editor.js
@@ -27,7 +27,7 @@ iD.ui.TagEditor = function(context, entity) {
        selection.html('');

        var messagewrap = selection.append('div')
-            .attr('class', 'message fillL');
+            .attr('class', 'header fillL cf');

        var back = messagewrap.append('button')
            .attr('class', 'preset-reset fl ' + geometry)