Merge pull request #1246 from ivnnv/zoom-small-frame

Allow zoom buttons on small frames (with settings config)

Author: OskarDamkjaer

src/browser/components/icons/Icons.tsx

@@ -244,17 +244,19 @@ export const ErrorIcon = () => (
   <IconContainer className="fa fa-file-text-o" text="Error" />
 )
 
-export const ZoomInIcon = () => (
+export const ZoomInIcon = (props: any) => (
   <IconContainer
     activeStyle={inactive}
     inactiveStyle={inactive}
+    {...props}
     className="sl-zoom-in"
   />
 )
-export const ZoomOutIcon = () => (
+export const ZoomOutIcon = (props: any) => (
   <IconContainer
     activeStyle={inactive}
     inactiveStyle={inactive}
+    {...props}
     className="sl-zoom-out"
   />
 )

src/browser/modules/D3Visualization/components/Graph.tsx

@@ -133,29 +133,26 @@ export class GraphComponent extends Component<any, State> {
   }
 
   zoomButtons() {
-    if (this.props.fullscreen) {
-      return (
-        <StyledZoomHolder>
-          <StyledZoomButton
-            className={
-              this.state.zoomInLimitReached ? 'faded zoom-in' : 'zoom-in'
-            }
-            onClick={this.zoomInClicked.bind(this)}
-          >
-            <ZoomInIcon />
-          </StyledZoomButton>
-          <StyledZoomButton
-            className={
-              this.state.zoomOutLimitReached ? 'faded zoom-out' : 'zoom-out'
-            }
-            onClick={this.zoomOutClicked.bind(this)}
-          >
-            <ZoomOutIcon />
-          </StyledZoomButton>
-        </StyledZoomHolder>
-      )
-    }
-    return null
+    return (
+      <StyledZoomHolder>
+        <StyledZoomButton
+          className={
+            this.state.zoomInLimitReached ? 'faded zoom-in' : 'zoom-in'
+          }
+          onClick={this.zoomInClicked.bind(this)}
+        >
+          <ZoomInIcon regulateSize={this.props.fullscreen ? 2 : 1} />
+        </StyledZoomButton>
+        <StyledZoomButton
+          className={
+            this.state.zoomOutLimitReached ? 'faded zoom-out' : 'zoom-out'
+          }
+          onClick={this.zoomOutClicked.bind(this)}
+        >
+          <ZoomOutIcon regulateSize={this.props.fullscreen ? 2 : 1} />
+        </StyledZoomButton>
+      </StyledZoomHolder>
+    )
   }
 
   render() {

src/browser/modules/D3Visualization/components/styled.tsx

@@ -362,7 +362,6 @@ export const StyledZoomHolder = styled.div`
 export const StyledZoomButton = styled.button`
   display: list-item;
   list-style-type: none;
-  font-size: 2em;
   margin-bottom: 10px;
   border: none;
   color: #9b9da2;

src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap

@@ -130,6 +130,26 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
             </g>
           </g>
         </svg>
+        <div
+          class="sc-eHgmQL fbpore"
+        >
+          <button
+            class="sc-cvbbAY ZoyPP faded zoom-in"
+          >
+            <i
+              class="sc-bYSBpT eYFbay sl-zoom-in"
+              style="font-size: 1em;"
+            />
+          </button>
+          <button
+            class="sc-cvbbAY ZoyPP zoom-out"
+          >
+            <i
+              class="sc-elJkPf OBknV sl-zoom-out"
+              style="font-size: 1em;"
+            />
+          </button>
+        </div>
       </div>
       <div
         class="sc-gqjmRU dwJWly status-bar"