From 9a5101dbcbcc755e2d8daa37f8a51ef06ac065ec Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Tue, 26 Feb 2019 17:21:11 -0500 Subject: [PATCH 1/2] Convert preset icon to use percentages for size and position rather than explicit pixel values --- css/80_app.css | 125 +++++++++++++++----------------------- modules/ui/preset_icon.js | 27 +++++--- 2 files changed, 68 insertions(+), 84 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 2dd8b885a..3c02e2d28 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -949,6 +949,7 @@ a.hide-toggle { height: 100%; position: relative; border: 1px solid #ccc; + display: flex; } [dir='ltr'] .preset-list-button-wrap:not(.category) .preset-list-button { border-top-right-radius: 0; @@ -963,10 +964,19 @@ a.hide-toggle { background: #ececec; } +.preset-icon-container { + position: relative; + width: 60px; + height: 60px; + text-align: center; +} + .preset-icon-line { margin: auto; position: absolute; top: 0; + width: 100%; + height: 100%; } [dir='ltr'] .preset-icon-line { left: 0; @@ -991,12 +1001,12 @@ a.hide-toggle { .preset-icon-fill-area { cursor: inherit; - height: 40px; - width: 40px; + height: 66%; + width: 66%; margin: auto; position: absolute; - left: 10px; - top: 10px; + left: 17%; + top: 17%; } .preset-icon-fill-vertex { @@ -1017,92 +1027,57 @@ a.hide-toggle { left: auto; right: 10px; } - .preset-icon-frame { + width: 100%; + height:100%; +} +.preset-icon-frame .icon{ position: absolute; - top: 7px; - left: 7px; - margin: auto; -} -[dir='rtl'] .preset-icon-frame { - left: auto; - right: 7px; -} - -.preset-icon-frame .icon { - width: 46px; - height: 46px; -} - -.preset-icon-60 { - position: absolute; - top: 0px; - left: 0px; + top: 12%; + left: 12%; + width: 76%; + height: 76%; margin: auto; } -.preset-icon-60 .icon { - width: 60px; - height: 60px; +.preset-icon { + width: 100%; + height:100%; } - -.preset-icon-44 { +.preset-icon .icon { position: absolute; - top: 9px; - left: 8px; margin: auto; -} -.preset-icon-44.line-geom { - top: 2px; + top: 26%; + left: 26%; + width: 48%; + height: 48%; } -.preset-icon-44 .icon { - width: 44px; - height: 44px; +.preset-icon.framed .icon { + top: 30%; + left: 30%; + width: 40%; + height: 40%; +} +.preset-icon.framed.line-geom .icon { + top: 20%; } -.preset-icon-28 { - position: absolute; - top: 16px; - left: 16px; - margin: auto; +.preset-icon-iD .icon { + top: 0; + left: 0; + height: 100%; + width: 100%; } -.preset-icon-28 .icon { - width: 28px; - height: 28px; +.preset-icon-iD.framed .icon { + top: 13%; + left: 13%; + width: 74%; + height: 74%; } - -.preset-icon-24 { - position: absolute; - top: 18px; - left: 18px; - margin: auto; -} -.preset-icon-24.line-geom { - top: 12px; -} - -.preset-icon-24 .icon { - width: 24px; - height: 24px; -} - -[dir='rtl'] .preset-list-button-wrap .preset-icon { - left: auto; - right: auto; -} - -[dir='rtl'] .preset-list-button-wrap .preset-icon-44 { - right: 8px; -} - -[dir='rtl'] .preset-list-button-wrap .preset-icon-28 { - right: 16px; -} - -[dir='rtl'] .preset-list-button-wrap .preset-icon-24 { - right: 18px; +.preset-icon-iD.framed.line-geom .icon { + top: 3%; } .preset-list-button .label { diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js index 505fcebe8..571b164f9 100644 --- a/modules/ui/preset_icon.js +++ b/modules/ui/preset_icon.js @@ -26,13 +26,22 @@ export function uiPresetIcon() { function render() { var selection = d3_select(this); + + var container = selection.selectAll('.preset-icon-container') + .data([0]); + + container = container.enter() + .append('div') + .attr('class', 'preset-icon-container') + .merge(container); + var p = preset.apply(this, arguments); var geom = geometry.apply(this, arguments); var picon = getIcon(p, geom); var isMaki = /^maki-/.test(picon); var isTemaki = /^temaki-/.test(picon); var isFa = /^fa[srb]-/.test(picon); - var isPOI = isMaki || isTemaki || isFa; + var isiDIcon = !(isMaki || isTemaki || isFa); var isCategory = !p.setTags; var drawLine = geom === 'line' && !isCategory; var isFramed = (geom === 'area' || drawLine || geom === 'vertex'); @@ -45,7 +54,7 @@ export function uiPresetIcon() { } var tagClasses = svgTagClasses().getClassesString(tags, ''); - var fill = selection.selectAll('.preset-icon-fill') + var fill = container.selectAll('.preset-icon-fill') .data([0]); fill = fill.enter() @@ -57,7 +66,7 @@ export function uiPresetIcon() { return 'preset-icon-fill preset-icon-fill-' + geom + ' ' + tagClasses; }); - var line = selection.selectAll('.preset-icon-line') + var line = container.selectAll('.preset-icon-line') .data(drawLine ? [0] : []); line.exit() @@ -99,7 +108,7 @@ export function uiPresetIcon() { .attr('class', 'line casing ' + tagClasses); - var areaFrame = selection.selectAll('.preset-icon-frame') + var areaFrame = container.selectAll('.preset-icon-frame') .data((geom === 'area') ? [0] : []); areaFrame.exit() @@ -111,7 +120,7 @@ export function uiPresetIcon() { .call(svgIcon('#iD-preset-icon-frame')); - var icon = selection.selectAll('.preset-icon') + var icon = container.selectAll('.preset-icon') .data([0]); icon = icon.enter() @@ -121,13 +130,13 @@ export function uiPresetIcon() { .merge(icon); icon - .attr('class', 'preset-icon ' + geom + '-geom ' + 'preset-icon-' + - (isPOI ? (isFramed ? '24' : '28') : (isFramed ? '44' : '60')) - ); + .attr('class', 'preset-icon ' + geom + '-geom') + .classed('framed', isFramed) + .classed('preset-icon-iD', isiDIcon); icon.selectAll('svg') .attr('class', function() { - return 'icon ' + picon + ' ' + (isPOI && geom !== 'line' ? '' : tagClasses); + return 'icon ' + picon + ' ' + (!isiDIcon && geom !== 'line' ? '' : tagClasses); }); icon.selectAll('use') From bd4f5f66567bd9318af3cc09975bb822231d4608 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Tue, 26 Feb 2019 17:27:38 -0500 Subject: [PATCH 2/2] Fix issue fix list padding in rtl layout --- css/80_app.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/css/80_app.css b/css/80_app.css index 3c02e2d28..6aa0c715d 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3099,6 +3099,9 @@ ul.issue-fix-list { ul.issue-fix-list button { padding: 2px 10px 2px 26px; } +[dir='rtl'] ul.issue-fix-list button { + padding: 2px 26px 2px 10px; +} .issue-fix-item:not(.actionable) button { cursor: auto;