Merge pull request #77 from PADAS/feature/4278-default-icon-sizing

Feature/4278 default icon sizing
PADAS · Nov 1, 2019 · cdf8fd2 · cdf8fd2
2 parents e09304a + f584fa3
commit cdf8fd2
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 19 deletions.
diff --git a/src/AddReport/styles.module.scss b/src/AddReport/styles.module.scss
@@ -30,6 +30,7 @@
   display: flex;
   line-height: normal;
   margin-bottom: 0;
+  width: 100%;
   button {
     @include unstyledButton;
     font-weight: bold;
@@ -73,7 +74,6 @@
   padding: 0.5rem;
   position: absolute;
   top: 0;
-  width: 100%;
   @media (min-width: $md-layout-width-min) {
     font-size: 1rem;
   }

diff --git a/src/DasIcon/index.js b/src/DasIcon/index.js
@@ -25,10 +25,16 @@ const calcIconUrl = (type, iconId) => {
 };
 
 const DasIcon = (props) => {
-  const { type, iconId, color, dispatch:_dispatch, ...rest } = props;
+  const { type, iconId, color, dispatch:_dispatch, className, ...rest } = props;
+
+  const svgHref = calcIconUrl(type, iconId);
+
+  const isGeneric = svgHref.includes('generic');
+
+
   return (
-    <svg {...rest} fill={color}>
-      <use href={calcIconUrl(type, iconId)} />
+    <svg className={`${className || ''} ${isGeneric ? 'generic' : ''}`} {...rest} fill={color}>
+      <use href={svgHref} />
     </svg>
   );
 };

diff --git a/src/MapLegend/styles.module.scss b/src/MapLegend/styles.module.scss
@@ -21,7 +21,6 @@
     align-items: center;
     display: flex;
     justify-content: flex-start;
-    white-space: nowrap;
   }
   button:not(.gearButton) {
     @include unstyledButton;
@@ -32,7 +31,10 @@
   [class*=Collapsible__trigger] {
     cursor: pointer;
     padding-left: 1rem;
+    margin-right: 4rem;
+    overflow: hidden;
     position: relative;
+    width: 100%;
     &:hover {
       text-decoration: underline;
     }
@@ -54,7 +56,7 @@
 .closedLegend {
   .gearButton {
     bottom: auto;
-    top: 25%;
+    top: 0.5rem;
     right: 2.75rem;
   }
 }

diff --git a/src/ReportForm/styles.module.scss b/src/ReportForm/styles.module.scss
@@ -214,11 +214,15 @@
   }
   .icon {
     --dimensions: 1.5rem;
+    --half-size: calc(var(--dimensions)/2);
     max-height: var(--dimensions);
     width: var(--dimensions);
     @media #{$whenPageIsAtMediumHeightAndWidth} {
       --dimensions: 2.5rem;
     }
+    &[class*=generic] {
+      max-height: var(--half-size);
+    }
   }
 
   &.highPriority {

diff --git a/src/ReportListItem/styles.module.scss b/src/ReportListItem/styles.module.scss
@@ -50,12 +50,20 @@ $colors in $priorities {
 .icon {
   align-items: center;
   display: flex;
+  height: 3.75rem;
   justify-content: center;
   padding: 0.5rem 1rem;
+  width: 3.75rem;
   svg, svg > svg {
+    --dimensions: 2rem;
+    --half-size: calc(var(--dimensions)/2);
     fill: white;
-    height: 2rem;
-    width: 2rem;
+    height: var(--dimensions);
+    width: var(--dimensions);
+    &[class*=generic] {
+      height: var(--half-size);
+      width: var(--half-size);
+    }
   }
 }
 
@@ -74,7 +82,6 @@ $colors in $priorities {
   flex: 1;
   justify-content: flex-start;
   text-align: left;
-  outline: none;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

diff --git a/src/ReportTypeMultiSelect/styles.module.scss b/src/ReportTypeMultiSelect/styles.module.scss
@@ -41,10 +41,16 @@
 
 
   svg {
+    --dimensions: 1.5rem;
+    --half-size: calc(var(--dimensions)/2);
     cursor: pointer;
-    max-height: 1.5rem;
+    max-height: var(--dimensions);
     margin: 0 0.75rem 0.5rem 0;
-    max-width: 1.5rem;
+    max-width: var(--dimensions);
+    &[class*=generic] {
+      max-width: var(--half-size);
+      max-height: var(--half-size);
+    }
   }
 }
 

diff --git a/src/SubjectHeatmapLegend/styles.module.scss b/src/SubjectHeatmapLegend/styles.module.scss
@@ -16,7 +16,7 @@
     margin: 0;
     max-height: 18rem;
     overflow-y: auto;
-    padding: 1rem;
+    padding: 0.5rem;
     width: 100%;
   } 
   li {

diff --git a/src/common/styles/_buttons.scss b/src/common/styles/_buttons.scss
@@ -16,7 +16,7 @@ $square-button-border-radius: .25rem;
 
 @mixin imageButton($icon_name: 'gear', $color: darken(gray, 15%)) {
   background: url('../images/icons/#{$icon_name}.svg') no-repeat;
-  background-size: cover;
+  background-size: contain;
   border: none;
 }
 

diff --git a/src/constants/index.js b/src/constants/index.js
@@ -65,16 +65,22 @@ export const LAYER_IDS = {
   ISOCHRONE_LAYER: 'isochrone',
 };
 
+/* "match" will be replaced with "in" once that expression is merged into master for the mapbox-gl style spec, at which point this expression will work for half-sised generic icons. */
+const IF_IS_GENERIC = (ifGeneric, ifNonGeneric) => ['match', ['get', 'image'], 'generic', ifGeneric, ifNonGeneric];
+
+const symbolIconSize = [
+  'interpolate', ['exponential', 0.5], ['zoom'],
+  7, 0,
+  12, IF_IS_GENERIC(0.5, 1),
+  MAX_ZOOM, IF_IS_GENERIC(0.75, 1.5),
+];
+
+
 export const DEFAULT_SYMBOL_LAYOUT = {
   'icon-allow-overlap': ['step', ['zoom'], false, 10, true],
   'icon-anchor': 'center',
   'icon-image': ['get', 'icon_id'],
-  'icon-size': [
-    'interpolate', ['exponential', 0.5], ['zoom'],
-    7, 0,
-    12, 1,
-    MAX_ZOOM, 1.5,
-  ],
+  'icon-size': symbolIconSize,
   'text-allow-overlap': ['step', ['zoom'], false, 10, true],
   'text-anchor': 'top',
   'text-offset': [0, .75],