From 26ba443154123db0253f8c248ca7d90573b0cb6b Mon Sep 17 00:00:00 2001
From: Nick Mitchell <nickm@us.ibm.com>
Date: Thu, 9 Apr 2020 18:06:29 -0400
Subject: [PATCH] feat: StatusStripe should respond to font zooming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

this also fixes an oversight with font zooming for other icons. for cmd- below the default size, those icons weren’t unzooming
this also cleans up zoom.css, avoiding repeated css paths by leveraging scss nesting

Fixes #4242
---
 .../src/components/StatusStripe/index.tsx     |   2 +-
 .../web/css/static/zoom.css                   | 370 ++++++++++--------
 2 files changed, 210 insertions(+), 162 deletions(-)

diff --git a/plugins/plugin-client-common/src/components/StatusStripe/index.tsx b/plugins/plugin-client-common/src/components/StatusStripe/index.tsx
index 148b5678bf1..5e592277f3a 100644
--- a/plugins/plugin-client-common/src/components/StatusStripe/index.tsx
+++ b/plugins/plugin-client-common/src/components/StatusStripe/index.tsx
@@ -70,7 +70,7 @@ export default class StatusStripe extends React.PureComponent {
 
   public render() {
     return (
-      <div className="kui--status-stripe kui--inverted-color-context" id="kui--status-stripe">
+      <div className="kui--status-stripe kui--inverted-color-context zoomable" id="kui--status-stripe">
         {this.widgets()}
         <div className="kui--status-stripe-button">
           <div className="kui--status-stripe-element">{this.screenshot()}</div>
diff --git a/plugins/plugin-core-support/web/css/static/zoom.css b/plugins/plugin-core-support/web/css/static/zoom.css
index a878260b993..afa83de7b3f 100644
--- a/plugins/plugin-core-support/web/css/static/zoom.css
+++ b/plugins/plugin-core-support/web/css/static/zoom.css
@@ -40,165 +40,213 @@
 .page[data-zoom="1"] svg.zoomable {
   transform: scale(1);
 }
-.page[data-zoom="2"] .zoomable .view-lines > div,
-.page[data-zoom="2"] .zoomable {
-  font-size: 106.25% !important;
-}
-.page[data-zoom="2"] .zoomable svg[width="16"] {
-  width: 17px;
-  height: 17px;
-}
-.page[data-zoom="2"] .graphical-icon > svg {
-  width: 21.25px;
-  height: 21.25px;
-}
-.page[data-zoom="3"] .zoomable .view-lines > div,
-.page[data-zoom="3"] .zoomable {
-  font-size: 112.5% !important;
-}
-.page[data-zoom="3"] .zoomable svg[width="16"] {
-  width: 18px;
-  height: 18px;
-}
-.page[data-zoom="3"] .graphical-icon > svg {
-  width: 22.25px;
-  height: 22.25px;
-}
-.page[data-zoom="4"] .zoomable .view-lines > div,
-.page[data-zoom="4"] .zoomable {
-  font-size: 118.75% !important;
-}
-.page[data-zoom="4"] .zoomable[data-bounded-zoom] {
-  font-size: 112.5% !important;
-}
-.page[data-zoom="4"] .zoomable svg[width="16"] {
-  width: 19px;
-  height: 19px;
-}
-.page[data-zoom="4"] .graphical-icon > svg {
-  width: 23.75px;
-  height: 23.75px;
-}
-.page[data-zoom="5"] .zoomable .view-lines > div,
-.page[data-zoom="5"] .zoomable {
-  font-size: 125% !important;
-}
-.page[data-zoom="5"] .zoomable[data-bounded-zoom] {
-  font-size: 112.5% !important;
-}
-.page[data-zoom="5"] .zoomable svg[width="16"] {
-  width: 20px;
-  height: 20px;
-}
-.page[data-zoom="5"] .graphical-icon > svg {
-  width: 25px;
-  height: 25px;
-}
-.page[data-zoom="6"] .zoomable .view-lines > div,
-.page[data-zoom="6"] .zoomable {
-  font-size: 131.25% !important;
-}
-.page[data-zoom="6"] .zoomable[data-bounded-zoom] {
-  font-size: 112.5% !important;
-}
-.page[data-zoom="6"] .zoomable svg[width="16"] {
-  width: 21px;
-  height: 21px;
-}
-.page[data-zoom="6"] .graphical-icon > svg {
-  width: 26.25px;
-  height: 26.25px;
-}
-.page[data-zoom="7"] .zoomable .view-lines > div,
-.page[data-zoom="7"] .zoomable {
-  font-size: 137.5% !important;
-}
-.page[data-zoom="7"] .zoomable[data-bounded-zoom] {
-  font-size: 112.5% !important;
-}
-.page[data-zoom="7"] .zoomable svg[width="16"] {
-  width: 22px;
-  height: 22px;
-}
-.page[data-zoom="7"] .graphical-icon > svg {
-  width: 27.5px;
-  height: 27.5px;
-}
-.page[data-zoom="8"] .zoomable .view-lines > div,
-.page[data-zoom="8"] .zoomable {
-  font-size: 143.75% !important;
-}
-.page[data-zoom="8"] .zoomable[data-bounded-zoom] {
-  font-size: 112.5% !important;
-}
-.page[data-zoom="8"] .zoomable svg[width="16"] {
-  width: 23px;
-  height: 23px;
-}
-.page[data-zoom="8"] .graphical-icon > svg {
-  width: 28.75px;
-  height: 28.75px;
-}
-.page[data-zoom="9"] .zoomable .view-lines > div,
-.page[data-zoom="9"] .zoomable {
-  font-size: 150% !important;
-}
-.page[data-zoom="9"] .zoomable[data-bounded-zoom] {
-  font-size: 112.5% !important;
-}
-.page[data-zoom="9"] .zoomable svg[width="16"] {
-  width: 24px;
-  height: 24px;
-}
-.page[data-zoom="9"] .graphical-icon > svg {
-  width: 30px;
-  height: 30px;
-}
-.page[data-zoom="10"] .zoomable .view-lines > div,
-.page[data-zoom="10"] .zoomable {
-  font-size: 156.25% !important;
-}
-.page[data-zoom="10"] .zoomable[data-bounded-zoom] {
-  font-size: 112.5% !important;
-}
-.page[data-zoom="10"] .zoomable svg[width="16"] {
-  width: 25px;
-  height: 25px;
-}
-.page[data-zoom="10"] .graphical-icon > svg {
-  width: 31.25px;
-  height: 31.25px;
-}
-.page[data-zoom="0"] .zoomable .view-lines > div,
-.page[data-zoom="0"] .zoomable {
-  font-size: 93.75% !important;
-}
-.page[data-zoom="0"] .zoomable[data-bounded-zoom] {
-  font-size: 100% !important;
-}
-.page[data-zoom="0"] .graphical-icon > svg {
-  width: 18.75px;
-  height: 18.75px;
-}
-.page[data-zoom="-1"] .zoomable .view-lines > div,
-.page[data-zoom="-1"] .zoomable {
-  font-size: 87.5% !important;
-}
-.page[data-zoom="-1"] .zoomable[data-bounded-zoom] {
-  font-size: 100% !important;
-}
-.page[data-zoom="-1"] .graphical-icon > svg {
-  width: 17.5px;
-  height: 17.5px;
-}
-.page[data-zoom="-2"] .zoomable .view-lines > div,
-.page[data-zoom="-2"] .zoomable {
-  font-size: 81.25% !important;
-}
-.page[data-zoom="-2"] .zoomable[data-bounded-zoom] {
-  font-size: 100% !important;
-}
-.page[data-zoom="-2"] .graphical-icon > svg {
-  width: 16.25px;
-  height: 16.25px;
+.page[data-zoom="2"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 106.25% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 17px;
+    height: 17px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="20"] {
+    width: 21.25px;
+    height: 21.25px;
+  }
+}
+.page[data-zoom="3"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 112.5% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 18px;
+    height: 18px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="20"] {
+    width: 22.25px;
+    height: 22.25px;
+  }
+}
+.page[data-zoom="4"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 118.75% !important;
+  }
+  .zoomable[data-bounded-zoom] {
+    font-size: 112.5% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 19px;
+    height: 19px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="20"] {
+    width: 23.75px;
+    height: 23.75px;
+  }
+}
+.page[data-zoom="5"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 125% !important;
+  }
+  .zoomable[data-bounded-zoom] {
+    font-size: 112.5% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 20px;
+    height: 20px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="20"] {
+    width: 25px;
+    height: 25px;
+  }
+}
+.page[data-zoom="6"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 131.25% !important;
+  }
+  .zoomable[data-bounded-zoom] {
+    font-size: 112.5% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 21px;
+    height: 21px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="20"] {
+    width: 26.25px;
+    height: 26.25px;
+  }
+}
+.page[data-zoom="7"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 137.5% !important;
+  }
+  .zoomable[data-bounded-zoom] {
+    font-size: 112.5% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 22px;
+    height: 22px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="20"] {
+    width: 27.5px;
+    height: 27.5px;
+  }
+}
+.page[data-zoom="8"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 143.75% !important;
+  }
+  .zoomable[data-bounded-zoom] {
+    font-size: 112.5% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 23px;
+    height: 23px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="20"] {
+    width: 28.75px;
+    height: 28.75px;
+  }
+}
+.page[data-zoom="9"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 150% !important;
+  }
+  .zoomable[data-bounded-zoom] {
+    font-size: 112.5% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 24px;
+    height: 24px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="20"] {
+    width: 30px;
+    height: 30px;
+  }
+}
+.page[data-zoom="10"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 156.25% !important;
+  }
+  .zoomable[data-bounded-zoom] {
+    font-size: 112.5% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 25px;
+    height: 25px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="16"] {
+    width: 31.25px;
+    height: 31.25px;
+  }
+}
+.page[data-zoom="0"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 93.75% !important;
+  }
+  .zoomable[data-bounded-zoom] {
+    font-size: 100% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 15px;
+    height: 15px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="20"] {
+    width: 18.75px;
+    height: 18.75px;
+  }
+}
+.page[data-zoom="-1"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 87.5% !important;
+  }
+  .zoomable[data-bounded-zoom] {
+    font-size: 100% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 14px;
+    height: 14px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="20"] {
+    width: 17.5px;
+    height: 17.5px;
+  }
+}
+.page[data-zoom="-2"] {
+  .zoomable .view-lines > div,
+  .zoomable {
+    font-size: 81.25% !important;
+  }
+  .zoomable[data-bounded-zoom] {
+    font-size: 100% !important;
+  }
+  .zoomable svg[width="16"] {
+    width: 13px;
+    height: 13px;
+  }
+  .graphical-icon > svg,
+  .zoomable svg[width="20"] {
+    width: 16.25px;
+    height: 16.25px;
+  }
 }