From 224db06ca45341738ecbe0f25ee4917634cb9507 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 31 Oct 2014 10:55:00 -0400 Subject: [PATCH] design enhancements.. * replace full width bottom bar with subtle list item * move hidden feature details to list item tooltip * simplify some of the text labels on the Map Data panel * progressively hide some footer elements with media queries --- css/app.css | 57 ++++++++++++++++++++++++---------------- data/core.yaml | 7 ++--- dist/locales/en.json | 7 ++--- js/id/ui.js | 22 ++++++++-------- js/id/ui/account.js | 8 +++--- js/id/ui/feature_info.js | 29 ++++++++++++++------ js/id/ui/map_data.js | 8 ++---- 7 files changed, 80 insertions(+), 58 deletions(-) diff --git a/css/app.css b/css/app.css index 3d8fd3747..601326ed9 100644 --- a/css/app.css +++ b/css/app.css @@ -275,18 +275,6 @@ ul li { list-style: none;} background: #E8EBFF; } -.link-list li { - float: right; - border-left: 1px solid rgba(255,255,255,.5); - padding: 5px 0 5px 5px; - margin-left: 5px; -} - -ul.link-list li:last-child { - border-left: 0; - margin-left: 0; - padding-left: 0; -} /* Utility Classes ------------------------------------------------------- */ @@ -316,7 +304,8 @@ ul.link-list li:last-child { div.hide, form.hide, button.hide, -a.hide { +a.hide, +li.hide { display: none; } @@ -2327,6 +2316,19 @@ img.wiki-image { clear: right; } +#about-list li { + float: right; + border-left: 1px solid rgba(255,255,255,.5); + padding: 5px 0 5px 5px; + margin-left: 5px; +} + +#about-list li:last-child { + border-left: 0; + margin-left: 0; + padding-left: 0; +} + .source-switch a { padding: 2px 4px 4px 4px; border-radius: 2px; @@ -2336,18 +2338,18 @@ img.wiki-image { color:#fff; } -@media screen and (max-width: 1200px) { - .user-list { - display: none !important; - } +.feature-warning a { + background: #1e90ff; + padding: 2px 4px 4px 4px; + border-radius: 2px; + color: #eee; } .user-list a:not(:last-child):after { content: ', '; } -.api-status, -.feature-info { +.api-status { float: right; clear: both; text-align: right; @@ -2361,10 +2363,6 @@ img.wiki-image { background: red; } -.feature-info { - background: #1e90ff; -} - /* Modals ------------------------------------------------------- */ @@ -2886,6 +2884,19 @@ img.wiki-image { #bar .save .label { display: block;} } +@media screen and (max-width: 1200px) { + .user-list { display: none !important; } +} + +@media screen and (max-width: 1000px) { + #userLink { display: none !important; } +} + +@media screen and (max-width: 900px) { + #scale-block { display: none !important; } +} + + /* Scrollbars ----------------------------------------------------- */ diff --git a/data/core.yaml b/data/core.yaml index 362a49eb6..095778d28 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -181,7 +181,8 @@ en: loading_auth: "Connecting to OpenStreetMap..." report_a_bug: report a bug feature_info: - hidden_features: "Hidden: {features}" + hidden_warning: "{count} hidden features" + hidden_details: "These features are currently hidden: {details}" status: error: Unable to connect to API. offline: The API is offline. Please try editing later. @@ -250,9 +251,9 @@ en: map_data: title: Map Data description: Map Data - show_features: Show Map Features - show_layers: Show Data Layers + data_layers: Data Layers fill_area: Fill Areas + map_features: Map Features autohidden: "These features have been automatically hidden because too many would be shown on the screen. You can zoom in to edit them." feature: points: diff --git a/dist/locales/en.json b/dist/locales/en.json index 1e7a82206..46267ce6c 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -227,7 +227,8 @@ "loading_auth": "Connecting to OpenStreetMap...", "report_a_bug": "report a bug", "feature_info": { - "hidden_features": "Hidden: {features}" + "hidden_warning": "{count} hidden features", + "hidden_details": "These features are currently hidden: {details}" }, "status": { "error": "Unable to connect to API.", @@ -305,9 +306,9 @@ "map_data": { "title": "Map Data", "description": "Map Data", - "show_features": "Show Map Features", - "show_layers": "Show Data Layers", + "data_layers": "Data Layers", "fill_area": "Fill Areas", + "map_features": "Map Features", "autohidden": "These features have been automatically hidden because too many would be shown on the screen. You can zoom in to edit them." }, "feature": { diff --git a/js/id/ui.js b/js/id/ui.js index 66505eef0..23acc2649 100644 --- a/js/id/ui.js +++ b/js/id/ui.js @@ -96,24 +96,23 @@ iD.ui = function(context) { .attr('id', 'scale-block') .call(iD.ui.Scale(context)); - var linkList = footer.append('div') + var aboutList = footer.append('div') .attr('id', 'info-block') .append('ul') - .attr('id', 'about-list') - .attr('class', 'link-list'); + .attr('id', 'about-list'); if (!context.embed()) { - linkList.call(iD.ui.Account(context)); + aboutList.call(iD.ui.Account(context)); } - linkList.append('li') + aboutList.append('li') .append('a') .attr('target', '_blank') .attr('tabindex', -1) .attr('href', 'http://github.com/openstreetmap/iD') .text(iD.version); - var bugReport = linkList.append('li') + var bugReport = aboutList.append('li') .append('a') .attr('target', '_blank') .attr('tabindex', -1) @@ -127,15 +126,16 @@ iD.ui = function(context) { .placement('top') ); - linkList.append('li') + aboutList.append('li') + .attr('class', 'feature-warning') + .attr('tabindex', -1) + .call(iD.ui.FeatureInfo(context)); + + aboutList.append('li') .attr('class', 'user-list') .attr('tabindex', -1) .call(iD.ui.Contributors(context)); - footer.append('div') - .attr('class', 'feature-info') - .call(iD.ui.FeatureInfo(context)); - footer.append('div') .attr('class', 'api-status') .call(iD.ui.Status(context)); diff --git a/js/id/ui/account.js b/js/id/ui/account.js index d7f32b0b7..a7360561c 100644 --- a/js/id/ui/account.js +++ b/js/id/ui/account.js @@ -4,7 +4,7 @@ iD.ui.Account = function(context) { function update(selection) { if (!connection.authenticated()) { selection.selectAll('#userLink, #logoutLink') - .style('display', 'none'); + .classed('hide', true); return; } @@ -18,7 +18,7 @@ iD.ui.Account = function(context) { if (err) return; selection.selectAll('#userLink, #logoutLink') - .style('display', 'list-item'); + .classed('hide', false); // Link userLink.append('a') @@ -54,11 +54,11 @@ iD.ui.Account = function(context) { return function(selection) { selection.append('li') .attr('id', 'logoutLink') - .style('display', 'none'); + .classed('hide', true); selection.append('li') .attr('id', 'userLink') - .style('display', 'none'); + .classed('hide', true); connection.on('auth.account', function() { update(selection); }); update(selection); diff --git a/js/id/ui/feature_info.js b/js/id/ui/feature_info.js index a90d69eae..81e429ec2 100644 --- a/js/id/ui/feature_info.js +++ b/js/id/ui/feature_info.js @@ -7,19 +7,32 @@ iD.ui.FeatureInfo = function(context) { if (hidden.length) { var stats = features.stats(), + count = 0, hiddenList = _.map(hidden, function(k) { + count += stats[k]; return String(stats[k]) + ' ' + t('feature.' + k + '.description'); + }), + tooltip = bootstrap.tooltip() + .placement('top') + .html(true) + .title(function() { + return iD.ui.tooltipHtml(hiddenList.join('
')); + }); + + var warning = selection.append('a') + .attr('href', '#') + .attr('tabindex', -1) + .html(t('feature_info.hidden_warning', { count: count })) + .call(tooltip) + .on('click', function() { + tooltip.hide(warning); + // open map data panel? + d3.event.preventDefault(); }); - - selection.append('span') - .html(t('feature_info.hidden_features', { features: hiddenList.join(', ') })); } - if (!hidden.length) { - selection.transition().duration(200).style('opacity', 0); - } else if (selection.style('opacity') === '0') { - selection.transition().duration(200).style('opacity', 1); - } + selection + .classed('hide', !hidden.length); } return function(selection) { diff --git a/js/id/ui/map_data.js b/js/id/ui/map_data.js index e4acc44e3..a5cc8584a 100644 --- a/js/id/ui/map_data.js +++ b/js/id/ui/map_data.js @@ -182,7 +182,7 @@ iD.ui.MapData = function(context) { // data layers content.append('a') - .text(t('map_data.show_layers')) + .text(t('map_data.data_layers')) .attr('href', '#') .classed('hide-toggle', true) .classed('expanded', true) @@ -287,7 +287,7 @@ iD.ui.MapData = function(context) { // feature filters content.append('a') - .text(t('map_data.show_features')) + .text(t('map_data.map_features')) .attr('href', '#') .classed('hide-toggle', true) .classed('expanded', false) @@ -318,10 +318,6 @@ iD.ui.MapData = function(context) { .on('B', hidePanel) .on('H', hidePanel); - // keybinding.on('m', function() { - // context.enter(iD.modes.SelectImage(context)); - // }); - d3.select(document) .call(keybinding);