Merge pull request #2957 from ProjectSidewalk/2807-outlines-for-new-l…

…abel-icons 2807: Labels now have a 0.5 outline
ProjectSidewalk · Aug 22, 2022 · 17c251f · 17c251f
2 parents 4838d12 + 84dd15d
commit 17c251f
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = `<img src="assets/javascripts/SVValidate/img/HideLabel.svg" class="label-visibility-control-button-icon" alt="Hide Label">
         <br /><u>H</u>ide Label</button>`;
         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 = `<img src="assets/javascripts/SVValidate/img/ShowLabel.svg" class="label-visibility-control-button-icon" alt="Hide Label">
         <br />S<u>h</u>ow Label</button>`;
         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
@@ -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
@@ -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
@@ -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
@@ -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;