diff --git a/public/javascripts/Gallery/css/cards.css b/public/javascripts/Gallery/css/cards.css index 73684de32d..ec31e18917 100644 --- a/public/javascripts/Gallery/css/cards.css +++ b/public/javascripts/Gallery/css/cards.css @@ -156,8 +156,7 @@ with respect to the image holder. This allows the validation menu to be placed o color: black; } -.label-icon { - position: absolute; +.label-icon-gallery { width: 1.1vw; z-index: 1; } diff --git a/public/javascripts/Gallery/src/cards/Card.js b/public/javascripts/Gallery/src/cards/Card.js index 5e39a6fdb1..e3eb5ae9cb 100644 --- a/public/javascripts/Gallery/src/cards/Card.js +++ b/public/javascripts/Gallery/src/cards/Card.js @@ -84,7 +84,7 @@ function Card (params, imageUrl, modal) { // Place label icon. labelIcon.src = iconImagePaths[getLabelType()]; - labelIcon.className = "label-icon"; + labelIcon.classList.add("label-icon", "label-icon-gallery"); let iconCoords = getIconPercent(); labelIcon.style.left = iconCoords.x + "px"; labelIcon.style.top = iconCoords.y + "px"; diff --git a/public/javascripts/Gallery/src/modal/GalleryPanorama.js b/public/javascripts/Gallery/src/modal/GalleryPanorama.js index 64769ad941..8e78bdb05e 100644 --- a/public/javascripts/Gallery/src/modal/GalleryPanorama.js +++ b/public/javascripts/Gallery/src/modal/GalleryPanorama.js @@ -176,7 +176,7 @@ pano: self.panorama, position: {heading: pos.heading, pitch: pos.pitch}, icon: url, - size: new google.maps.Size(20, 20), + size: new google.maps.Size(22, 22), anchor: new google.maps.Point(10, 10) }) }; diff --git a/public/javascripts/Progress/src/MistakeCarousel.js b/public/javascripts/Progress/src/MistakeCarousel.js index bab3be1c4d..27eb7b9009 100644 --- a/public/javascripts/Progress/src/MistakeCarousel.js +++ b/public/javascripts/Progress/src/MistakeCarousel.js @@ -75,8 +75,8 @@ function MistakeCarousel() { // Add the label icon onto the GSV image. let labelIcon = document.createElement('img'); labelIcon.src = `/assets/images/icons/AdminTool_${labelType}.png`; + labelIcon.classList.add('label-icon'); Object.assign(labelIcon.style, { - position: 'absolute', left: `${100 * label.canvas_x / label.canvas_width}%`, top: `${100 * label.canvas_y / label.canvas_height}%` }); diff --git a/public/javascripts/SVLabel/src/SVLabel/label/Label.js b/public/javascripts/SVLabel/src/SVLabel/label/Label.js index 8cd6904cd8..a68d6c7330 100644 --- a/public/javascripts/SVLabel/src/SVLabel/label/Label.js +++ b/public/javascripts/SVLabel/src/SVLabel/label/Label.js @@ -423,6 +423,17 @@ function Label (svl, pathIn, params) { // Renders the label image. path.render2(ctx, pov); + // Draws label outline. + ctx.lineWidth = .7; + ctx.beginPath(); + ctx.arc(getCoordinate().x, getCoordinate().y, 15.3, 0, 2 * Math.PI); + ctx.strokeStyle = 'black'; + ctx.stroke(); + ctx.beginPath(); + ctx.arc(getCoordinate().x, getCoordinate().y, 16.2, 0, 2 * Math.PI); + ctx.strokeStyle = 'white'; + ctx.stroke(); + // Only render severity warning if there's a severity option. if (properties.labelType !== 'Occlusion' && properties.labelType !== 'Signal') { if (properties.severity === null) { diff --git a/public/javascripts/SVValidate/src/label/LabelVisibilityControl.js b/public/javascripts/SVValidate/src/label/LabelVisibilityControl.js index eeee701d08..668de2d580 100644 --- a/public/javascripts/SVValidate/src/label/LabelVisibilityControl.js +++ b/public/javascripts/SVValidate/src/label/LabelVisibilityControl.js @@ -21,15 +21,16 @@ function LabelVisibilityControl () { hideLabel(); } else { svv.tracker.push("Click_UnhideLabel"); - unhideLabel(); + unhideLabel(false); } } /** * Unhides label in Google StreetView Panorama * depending on current state. + * @param {boolean} newLabel Indicates whether we unhide due to showing a new label vs. clicking the unhide button. */ - function unhideLabel () { + function unhideLabel (newLabel) { let panomarker = svv.panorama.getPanomarker(); let label = svv.panorama.getCurrentLabel(); panomarker.setIcon(label.getIconUrl()); @@ -40,6 +41,10 @@ function LabelVisibilityControl () { htmlString = `Hide Label
Hide Label`; labelVisibilityControlButton.html(htmlString); + // If we are unhiding because the user is moving on to their next label, then Panomarker.js adds the outline. + if (!newLabel) { + panomarker.marker_.classList.add('icon-outline'); + } } /** @@ -55,6 +60,7 @@ function LabelVisibilityControl () { htmlString = `Hide Label
Show Label`; labelVisibilityControlButton.html(htmlString); + panomarker.marker_.classList.remove('icon-outline'); } /** diff --git a/public/javascripts/SVValidate/src/panorama/Panorama.js b/public/javascripts/SVValidate/src/panorama/Panorama.js index 42a2fbd294..4f21dc2676 100644 --- a/public/javascripts/SVValidate/src/panorama/Panorama.js +++ b/public/javascripts/SVValidate/src/panorama/Panorama.js @@ -239,7 +239,7 @@ function Panorama (label) { pano: panorama, position: {heading: pos.heading, pitch: pos.pitch}, icon: url, - size: new google.maps.Size(currentLabel.getRadius() * 2, currentLabel.getRadius() * 2), + size: new google.maps.Size(currentLabel.getRadius() * 2 + 2, currentLabel.getRadius() * 2 + 2), anchor: new google.maps.Point(currentLabel.getRadius(), currentLabel.getRadius()), zIndex: 2 }); diff --git a/public/javascripts/SVValidate/src/panorama/PanoramaContainer.js b/public/javascripts/SVValidate/src/panorama/PanoramaContainer.js index dc8850939b..78c3923435 100644 --- a/public/javascripts/SVValidate/src/panorama/PanoramaContainer.js +++ b/public/javascripts/SVValidate/src/panorama/PanoramaContainer.js @@ -99,7 +99,7 @@ function PanoramaContainer (labelList) { svv.panorama.setLabel(labels[getProperty('progress')]); setProperty('progress', getProperty('progress') + 1); if (svv.labelVisibilityControl && !svv.labelVisibilityControl.isVisible()) { - svv.labelVisibilityControl.unhideLabel(); + svv.labelVisibilityControl.unhideLabel(true); } // Update zoom availability on desktop. diff --git a/public/javascripts/common/Panomarker.js b/public/javascripts/common/Panomarker.js index 127acd2304..f6f17eff20 100644 --- a/public/javascripts/common/Panomarker.js +++ b/public/javascripts/common/Panomarker.js @@ -400,6 +400,7 @@ } var marker = document.createElement('div'); + marker.classList.add('icon-outline'); // Basic style attributes for every marker marker.style.position = 'absolute'; diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css index d885bada21..cdcfe17c93 100644 --- a/public/stylesheets/main.css +++ b/public/stylesheets/main.css @@ -70,6 +70,18 @@ footer { /* * Custom styles */ +.label-icon { + position: absolute; + border: 1px solid black; + border-radius: 100%; + outline: 0.5px solid white; +} + +.icon-outline { + border: 1px solid black; + border-radius: 25px; + outline: .5px solid white; +} .stats-grid{ display: flex;