Update fixes UI for icons, link styling, and non-actionable fixes

Fix several bugs
This commit is contained in:
Quincy Morgan
2019-02-14 15:56:04 -05:00
parent c86f11c359
commit 1821c3e955
13 changed files with 114 additions and 41 deletions
+45 -21
View File
@@ -3009,50 +3009,60 @@ div.full-screen > button:hover {
width: 100%;
font-weight: inherit;
border-radius: 0;
text-align: inherit;
display: flex;
color: inherit;
}
[dir='rtl'] .issue button {
padding: 5px 5px 5px 10px;
}
.issue button.label {
text-align: inherit;
display: flex;
}
.warnings-list,
.issue.severity-warning,
.issue.severity-warning li,
li.issue.severity-warning {
border-color: #FFDF5C;
}
.errors-list,
.issue.severity-error,
.issue.severity-error li,
li.issue.severity-error {
border-color: #f5b0ab;
}
.issue.severity-warning,
.issue.severity-warning button,
.mode-save .warning-section {
background: #ffb;
}
.issue.severity-warning button:hover,
.issue.severity-warning button:focus {
.issue.severity-warning:not(.expanded) button:hover,
.issue.severity-warning:not(.expanded) button:focus {
background: #FFFF99;
}
.issue.severity-warning .icon {
color: #FFB300
.issue.severity-warning .issue-icon,
.issue.severity-warning .issue-fix-item.actionable {
color: #ff9205;
fill: #ff9205;
}
.issue.severity-warning .issue-fix-item.actionable:hover {
color: #f07504;
fill: #f07504;
}
.issue.severity-error,
.issue.severity-error button,
.mode-save .error-section {
background: #FFD5D4;
}
.issue.severity-error button:hover,
.issue.severity-error button:focus {
.issue.severity-error:not(.expanded) button:hover,
.issue.severity-error:not(.expanded) button:focus {
background: #ffc9c7;
}
.issue.severity-error .icon {
color: #DD1400
.issue.severity-error .issue-icon,
.issue.severity-error .issue-fix-item.actionable {
color: #DD1400;
fill: #DD1400;
}
.issue.severity-error .issue-fix-item.actionable:hover {
color: #ab0f00;
fill: #ab0f00;
}
/* Issues Pane */
@@ -3091,13 +3101,27 @@ div.full-screen > button:hover {
.entity-issues .issue:not(:last-of-type) {
margin-bottom: 10px;
}
ul.issue-fix-list li:first-child {
border-top-style: solid;
border-top-width: 2px;
.issue.expanded button.label {
cursor: pointer;
pointer-events: none;
padding-bottom: 0px;
}
ul.issue-fix-list li:not(:last-of-type) {
border-bottom-style: solid;
border-bottom-width: 1px;
ul.issue-fix-list button {
padding: 2px 10px 2px 26px;
}
.issue-fix-item:first-of-type button {
padding-top:4px;
}
.issue-fix-item:last-of-type button {
padding-bottom:7px;
}
.issue-fix-item:not(.actionable) button {
cursor: pointer;
pointer-events: none;
}
.issue-fix-item:not(.actionable) .fix-icon {
color: #555;
fill: #555;
}
.issue:not(.expanded) ul.issue-fix-list {
height: 0px;
+2
View File
@@ -1266,6 +1266,8 @@ en:
remove_tag:
title: Remove the tag
annotation: Removed tag.
reposition_features:
title: Reposition the features
select_preset:
title: Select a feature type
tag_as_disconnected:
+3
View File
@@ -1556,6 +1556,9 @@
"title": "Remove the tag",
"annotation": "Removed tag."
},
"reposition_features": {
"title": "Reposition the features"
},
"select_preset": {
"title": "Select a feature type"
},
+1
View File
@@ -222,6 +222,7 @@ export function validationIssue(attrs) {
export function validationIssueFix(attrs) {
this.icon = attrs.icon;
this.title = attrs.title;
this.onClick = attrs.onClick;
this.entityIds = attrs.entityIds || []; // Used for hover-higlighting.
+41 -16
View File
@@ -14,11 +14,13 @@ export function uiEntityIssues(context) {
var _entityID;
// context.validator().on('reload.entity_issues', function() {
// _selection.selectAll('.entity-issues')
// .call(render);
// update();
// });
context.validator().on('reload.entity_issues', function() {
update();
_selection.selectAll('.entity-issues')
.call(render);
});
function clamp(num, min, max) {
@@ -64,6 +66,11 @@ export function uiEntityIssues(context) {
var itemsEnter = items.enter()
.append('div')
.attr('class', function(d) { return 'issue severity-' + d.severity; })
.call(tooltip()
.html(true)
.title(function(d) { return uiTooltipHtml(d.tooltip); })
.placement('top')
)
.on('mouseover.highlight', function(d) {
var ids = d.entities.map(function(e) { return e.id; });
utilHighlightEntities(ids, true, context);
@@ -91,13 +98,6 @@ export function uiEntityIssues(context) {
.append('button')
.attr('class', 'label');
labelsEnter
.call(tooltip()
.html(true)
.title(function(d) { return uiTooltipHtml(d.tooltip); })
.placement('top')
);
labelsEnter
.append('span')
.attr('class', 'issue-icon')
@@ -129,14 +129,39 @@ export function uiEntityIssues(context) {
// fixes
var fixLists = items.selectAll('.issue-fix-list');
fixLists.selectAll('.issue-fix-item')
var fixes = fixLists.selectAll('.issue-fix-item')
.data(function(d) { return d.fixes; })
.enter()
.append('li')
.attr('class', 'issue-fix-item')
.attr('class', function(d) {
return 'issue-fix-item ' + (!!d.onClick ? 'actionable' : '');
})
.append('button')
.text(function(d) { return d.title; })
.on('click', function(d) { d.onClick(); });
.on('click', function(d) {
if (d.onClick) {
utilHighlightEntities(d.entityIds, false, context);
d.onClick();
}
})
.on('mouseover.highlight', function(d) {
utilHighlightEntities(d.entityIds, true, context);
})
.on('mouseout.highlight', function(d) {
utilHighlightEntities(d.entityIds, false, context);
});
fixes.append('span')
.attr('class', 'fix-icon')
.each(function(d) {
var iconName = d.icon || 'iD-icon-wrench';
if (iconName.startsWith('maki')) {
iconName += '-15';
}
d3_select(this).call(svgIcon('#' + iconName, 'pre-text'));
});
fixes.append('span')
.text(function(d) { return d.title; });
}
+1
View File
@@ -162,6 +162,7 @@ export function validationAlmostJunction() {
if (Object.keys(node.tags).length === 0) {
// node has no tags, suggest noexit fix
fixes.push(new validationIssueFix({
icon: 'maki-barrier',
title: t('issues.fix.tag_as_disconnected.title'),
onClick: function() {
var nodeID = this.issue.entities[1].id;
+3 -1
View File
@@ -398,7 +398,9 @@ export function validationCrossingWays() {
}
}));
}
fixes.push(new validationIssueFix({
title: t('issues.fix.reposition_features.title')
}));
return new validationIssue({
type: type,
severity: 'warning',
+1
View File
@@ -30,6 +30,7 @@ export function validationDeprecatedTag() {
},
fixes: [
new validationIssueFix({
icon: 'iD-icon-up',
title: t('issues.fix.upgrade_tags.title'),
onClick: function() {
var entity = this.issue.entities[0];
+4 -1
View File
@@ -38,6 +38,7 @@ export function validationDisconnectedWay() {
if (!entity.isClosed()) {
fixes.push(new validationIssueFix({
icon: 'iD-operation-continue-left',
title: t('issues.fix.continue_from_start.title'),
entityIds: [entity.first()],
onClick: function() {
@@ -46,6 +47,7 @@ export function validationDisconnectedWay() {
}
}));
fixes.push(new validationIssueFix({
icon: 'iD-operation-continue',
title: t('issues.fix.continue_from_end.title'),
entityIds: [entity.last()],
onClick: function() {
@@ -56,6 +58,7 @@ export function validationDisconnectedWay() {
}
fixes.push(new validationIssueFix({
icon: 'iD-operation-delete',
title: t('issues.fix.delete_feature.title'),
entityIds: [entity.id],
onClick: function() {
@@ -80,7 +83,7 @@ export function validationDisconnectedWay() {
function continueDrawing(way, vertex) {
// make sure the vertex is actually visible and editable
var map = context.map();
if (!map.editable() || !map.contains(vertex.loc)) {
if (!map.editable() || !map.trimmedExtent().contains(vertex.loc)) {
map.zoomToEase(vertex);
}
+3 -2
View File
@@ -6,7 +6,7 @@ import { actionChangeTags } from '../actions';
import { discardNames } from '../../node_modules/name-suggestion-index/config/filters.json';
export function validationGenericName(context) {
export function validationGenericName() {
var type = 'generic_name';
@@ -37,7 +37,7 @@ export function validationGenericName(context) {
}
var validation = function(entity) {
var validation = function(entity, context) {
var issues = [];
var generic = isGenericName(entity);
if (generic) {
@@ -50,6 +50,7 @@ export function validationGenericName(context) {
entities: [entity],
fixes: [
new validationIssueFix({
icon: 'iD-operation-delete',
title: t('issues.fix.remove_generic_name.title'),
onClick: function() {
var entity = this.issue.entities[0];
+2
View File
@@ -58,12 +58,14 @@ export function validationMissingTag() {
entities: [entity],
fixes: [
new validationIssueFix({
icon: 'iD-icon-search',
title: t('issues.fix.select_preset.title'),
onClick: function() {
context.ui().sidebar.showPresetList();
}
}),
new validationIssueFix({
icon: 'iD-operation-delete',
title: t('issues.fix.delete_feature.title'),
onClick: function() {
var id = this.issue.entities[0].id;
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M10.6879121,7.42604898 C10.2489814,6.19270935 10.5231466,4.76238732 11.5104076,3.77512627 C12.8772427,2.40829124 15.0933201,2.40829124 16.4601551,3.77512627 C16.6542987,3.96926984 16.8208663,4.1805469 16.9598581,4.4040902 L14.1066017,5.11740429 L14.1066017,7.11740429 L17.0920951,7.86377764 C16.9309697,8.17376943 16.720323,8.46470585 16.4601551,8.72487373 C15.4728941,9.71213479 14.042572,9.98629999 12.8092324,9.54736932 L7.9750032,14.3815985 C8.08186131,15.1334839 7.84611589,15.9246994 7.26776695,16.5030483 C6.29145622,17.4793591 4.70854378,17.4793591 3.73223305,16.5030483 C2.75592232,15.5267376 2.75592232,13.9438252 3.73223305,12.9675144 C4.31058199,12.3891655 5.10179747,12.1534201 5.85368286,12.2602782 L10.6879121,7.42604898 Z M6.20710678,15.4423882 C6.59763107,15.0518639 6.59763107,14.4186989 6.20710678,14.0281746 C5.81658249,13.6376503 5.18341751,13.6376503 4.79289322,14.0281746 C4.40236893,14.4186989 4.40236893,15.0518639 4.79289322,15.4423882 C5.18341751,15.8329124 5.81658249,15.8329124 6.20710678,15.4423882 Z" fill="currentColor"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M6,4 C9.314,4 12,6.686 12,10 C12,13.314 9.314,16 6,16 C2.686,16 0,13.314 0,10 C0,6.686 2.686,4 6,4 Z M7,6 L5,6 L5,9 L2,9 L2,11 L5,11 L5,14 L7,14 L7,11 L10,11 L10,9 L7,9 L7,6 Z M15,9 L15,11 L13,11 L13,9 L15,9 Z M18,8 C19.105,8 20,8.895 20,10 C20,11.105 19.105,12 18,12 C16.895,12 16,11.105 16,10 C16,8.895 16.895,8 18,8 Z" fill="inherit"/>
</svg>

After

Width:  |  Height:  |  Size: 543 B