Keep right QA

css/20_map.css

@@ -75,15 +75,19 @@
     pointer-events: none !important;
 }
 
+/* NOTE: when more QA layers are added, replace kr_error with generic QA layer selector */
+/* points, notes & QA */
 
 /* points & notes */
+g.kr_error .stroke,
 g.note .stroke {
     stroke: #222;
     stroke-width: 1;
     fill: #222;
     opacity: 0.6;
 }
 
+g.kr_error.active .stroke,
 g.note.active .stroke {
     stroke: #222;
     stroke-width: 1;
@@ -97,6 +101,7 @@ g.point .stroke {
     fill: #fff;
 }
 
+g.kr_error .shadow,
 g.point .shadow,
 g.note .shadow {
     fill: none;
@@ -105,13 +110,16 @@ g.note .shadow {
     stroke-opacity: 0;
 }
 
+g.kr_error.related:not(.selected) .shadow,
+g.kr_error.hover:not(.selected) .shadow,
 g.note.related:not(.selected) .shadow,
 g.note.hover:not(.selected) .shadow,
 g.point.related:not(.selected) .shadow,
 g.point.hover:not(.selected) .shadow {
     stroke-opacity: 0.5;
 }
 
+g.kr_error.selected .shadow,
 g.note.selected .shadow,
 g.point.selected .shadow {
     stroke-opacity: 0.7;

css/65_data.css

@@ -1,15 +1,19 @@
 
-/* OSM Notes Layer */
+/* OSM Notes and KeepRight Layers */
+.layer-keepRight,
 .layer-notes {
     pointer-events: none;
 }
+.layer-keepRight .kr_error,
 .layer-notes .note * {
     pointer-events: none;
 }
 .mode-browse .layer-notes .note .note-fill,
 .mode-select .layer-notes .note .note-fill,
 .mode-select-data .layer-notes .note .note-fill,
-.mode-select-note .layer-notes .note .note-fill {
+.mode-select-note .layer-notes .note .note-fill,
+.layer-keepRight .kr_error .kr_error-fill,
+.layer-notes .note .note-fill {
     pointer-events: visible;
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-point.png), pointer; /* FF */
@@ -19,6 +23,13 @@
 .layer-notes .note .note-shadow {
     color: #000;
 }
+
+.kr_error-header-icon .kr_error-fill,
+.layer-keepRight .kr_error .kr_error-fill {
+    stroke: #333;
+    stroke-width: 1.3px;  /* NOTE: likely a better way to scale the icon stroke */
+}
+
 .note-header-icon .note-fill,
 .layer-notes .note .note-fill {
     color: #ff3300;
@@ -54,8 +65,81 @@
 }
 
 
-/* Custom Map Data (geojson, gpx, kml, vector tile) */
+/* Keep Right Errors
+------------------------------------------------------- */
+.kr_error_type_20,     /* multiple nodes on same spot */
+.kr_error_type_40,     /* impossible oneways */
+.kr_error_type_210,    /* self intersecting ways */
+.kr_error_type_270,    /* unusual motorway connection */
+.kr_error_type_310,    /* roundabout issues */
+.kr_error_type_320,    /* improper _link */
+.kr_error_type_350 {   /* improper bridge tag */
+    color: #ff9;
+}
+
+.kr_error_type_50 {    /* almost junctions */
+    color: #88f;
+}
+
+.kr_error_type_60,     /* deprecated tags */
+.kr_error_type_70,     /* tagging issues */
+.kr_error_type_90,     /* motorway without ref */
+.kr_error_type_100,    /* place of worship without religion */
+.kr_error_type_110,    /* poi without name */
+.kr_error_type_150,    /* railway crossing without tag */
+.kr_error_type_220,    /* misspelled tag */
+.kr_error_type_380 {    /* non-physical sport tag */
+    color: #5d0;
+}
+
+.kr_error_type_130 {   /* disconnected ways */
+    color: #fa3;
+}
+
+.kr_error_type_170 {   /* FIXME tag */
+    color: #ff0;
+}
+
+.kr_error_type_190 {   /* intersection without junction */
+    color: #f33;
+}
 
+.kr_error_type_200 {   /* overlapping ways */
+    color: #fdbf6f;
+}
+
+.kr_error_type_160,    /* railway layer conflict */
+.kr_error_type_230 {   /* layer conflict */
+    color: #b60;
+}
+
+.kr_error_type_280 {   /* boundary issues */
+    color: #5f47a0;
+}
+
+.kr_error_type_180,    /* relation without type */
+.kr_error_type_290 {   /* turn restriction issues */
+    color: #ace;
+}
+
+.kr_error_type_300,    /* missing maxspeed */
+.kr_error_type_390 {   /* missing tracktype */
+    color: #090;
+}
+
+.kr_error_type_360,    /* language unknown */
+.kr_error_type_370,    /* doubled places */
+.kr_error_type_410 {   /* website issues */
+    color: #f9b;
+}
+
+.kr_error_type_120,    /* way without nodes */
+.kr_error_type_400 {   /* geometry / turn angles */
+    color: #c35;
+}
+
+
+/* Custom Map Data (geojson, gpx, kml, vector tile) */
 .layer-mapdata {
     pointer-events: none;
 }

css/80_app.css

@@ -586,6 +586,7 @@ button.add-note svg.icon {
 .field-help-title button.close,
 .sidebar-component .header button.data-editor-close,
 .sidebar-component .header button.note-editor-close,
+.sidebar-component .header button.keepRight-editor-close,
 .entity-editor-pane .header button.preset-close,
 .preset-list-pane .header button.preset-choose {
     position: absolute;
@@ -595,6 +596,7 @@ button.add-note svg.icon {
 [dir='rtl'] .field-help-title button.close,
 [dir='rtl'] .sidebar-component .header button.data-editor-close,
 [dir='rtl'] .sidebar-component .header button.note-editor-close,
+[dir='rtl'] .sidebar-component .header button.keepRight-editor-close,
 [dir='rtl'] .entity-editor-pane .header button.preset-close,
 [dir='rtl'] .preset-list-pane .header button.preset-choose {
     left: 0;
@@ -2429,9 +2431,10 @@ input.key-trap {
 }
 
 
-/* OSM Note Editor
+/* OSM Note / KeepRight Editors
 ------------------------------------------------------- */
-.note-header {
+.note-header,
+.kr_error-header {
     background-color: #f6f6f6;
     border-radius: 5px;
     border: 1px solid #ccc;
@@ -2440,7 +2443,8 @@ input.key-trap {
     align-items: center;
 }
 
-.note-header-icon {
+.note-header-icon,
+.kr_error-header-icon {
     background-color: #fff;
     padding: 10px;
     flex: 0 0 62px;
@@ -2450,26 +2454,30 @@ input.key-trap {
     border-right: 1px solid #ccc;
     border-radius: 5px 0 0 5px;
 }
-[dir='rtl'] .note-header-icon {
+[dir='rtl'] .note-header-icon,
+[dir='rtl'] .kr_error-header-icon {
     border-right: unset;
     border-left: 1px solid #ccc;
     border-radius: 0 5px 5px 0;
 }
 
-.note-header-icon .icon-wrap {
+.note-header-icon .icon-wrap,
+.kr_error-header-icon .icon-wrap {
     position: absolute;
     top: 0px;
 }
 
-.note-header-label {
+.note-header-label,
+.kr_error-header-label {
     background-color: #f6f6f6;
     padding: 0 15px;
     flex: 1 1 100%;
     font-size: 14px;
     font-weight: bold;
     border-radius: 0 5px 5px 0;
 }
-[dir='rtl'] .note-header-label {
+[dir='rtl'] .note-header-label,
+[dir='rtl'] .kr_error-header-label {
     border-radius: 5px 0 0 5px;
 }
 
@@ -2535,17 +2543,22 @@ input.key-trap {
     border-left: none;
 }
 
-.note-save {
+.note-save,
+.keepRight-save,
+.kr_error-details,
+.kr_error-comment-container {
     padding: 10px;
 }
 
-.note-save #new-comment-input {
+.keepRight-save .new-comment-input,
+.note-save .new-comment-input {
     width: 100%;
     height: 100px;
     max-height: 300px;
     min-height: 100px;
 }
 
+.keepRight-save .detail-section,
 .note-save .detail-section {
     margin: 10px 0;
 }
@@ -2554,6 +2567,18 @@ input.key-trap {
     float: right;
 }
 
+.kr_error-details-container {
+    background: #ececec;
+    padding: 10px;
+    margin-top: 20px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+}
+
+.kr_error-details-description {
+    margin-bottom: 10px;
+}
+
 
 /* Custom Data Editor
 ------------------------------------------------------- */