Merge pull request #455 from gemini-testing/HERMIONE-840.invalid_eye

fix: add inactive ViewInBrowser icon

Author: KuznetsovRoman

lib/static/components/icons/view-in-browser.js renamed to lib/static/components/icons/view-in-browser/index.js

@@ -5,15 +5,17 @@ import PropTypes from 'prop-types';
 import url from 'url';
 import classNames from 'classnames';
 
-import * as actions from '../../modules/actions';
+import * as actions from '../../../modules/actions';
+
+import './index.styl';
 
 class ViewInBrowser extends Component {
     static propTypes = {
         resultId: PropTypes.string.isRequired,
         extendClassNames: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
         // from store
-        suiteUrl: PropTypes.string.isRequired,
-        parsedHost: PropTypes.object.isRequired
+        suiteUrl: PropTypes.string,
+        parsedHost: PropTypes.object
     }
 
     onViewInBrowser = (e) => {
@@ -31,18 +33,23 @@ class ViewInBrowser extends Component {
     render() {
         const {suiteUrl, parsedHost, extendClassNames} = this.props;
         const className = classNames(
-            'button custom-icon custom-icon_view-in-browser',
+            'fa view-in-browser',
+            suiteUrl ? 'fa-eye view-in-browser_active' : 'fa-eye-slash view-in-browser_disabled',
             extendClassNames
         );
 
+        if (!suiteUrl) {
+            return <i className={className} aria-hidden="true" />;
+        }
+
         return (
             <a
                 className={className}
                 href={this._buildUrl(suiteUrl, parsedHost)}
                 onClick={this.onViewInBrowser}
                 title="view in browser"
-                target="_blank">
-            </a>
+                target="_blank"
+            />
         );
     }
 }

lib/static/components/icons/view-in-browser/index.styl

@@ -0,0 +1,28 @@
+.view-in-browser {
+    display: inline-block;
+    width: 16px;
+    height: 19px;
+    vertical-align: middle;
+    margin-left: 4px;
+    margin-right: 0;
+    padding: 0 2px;
+    border: none;
+    color: black;
+    opacity: 0.3;
+
+    &:visited {
+        color: black;
+    }
+
+    &:active,
+    &:hover {
+        &.view-in-browser_active {
+            opacity: 1;
+            cursor: pointer;
+        }
+
+        &.view-in-browser_disabled {
+            cursor: default;
+        }
+    }
+}

lib/static/styles.css

@@ -447,10 +447,6 @@ details[open] > .details__summary:before {
     margin-left: 4px;
 }
 
-.custom-icon_view-in-browser:before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath transform='scale(0.027,-0.027) translate(0,-448)' d=' M569.354 216.369C512.969 312.051 407.81 376 288 376C168.14 376 63.004 312.006 6.646 216.369A47.999 47.999 0 0 1 6.646 167.63C63.031 71.949 168.19 8 288 8C407.86 8 512.996 71.994 569.354 167.631A47.997 47.997 0 0 1 569.354 216.369zM288 56C212.838 56 152 116.827 152 192C152 267.1620000000001 212.826 328 288 328C363.1620000000001 328 424 267.174 424 192C424 116.838 363.174 56 288 56zM392 192C392 134.562 345.438 88 288 88S184 134.562 184 192C184 209.708 188.431 226.379 196.236 240.973L196.235 240.941C196.235 217.29 215.408 198.118 239.059 198.118S281.883 217.291 281.883 240.941C281.883 264.592 262.71 283.765 239.059 283.765L239.027 283.764C253.621 291.569 270.292 296 288 296C345.438 296 392 249.438 392 192z'/%3E%3C/svg%3E");
-}
-
 .custom-icon_copy-to-clipboard:before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath transform='scale(0.027,-0.027) translate(0,-448)' d=' M464 448H144C117.49 448 96 426.51 96 400V352H48C21.49 352 0 330.51 0 304V-16C0 -42.51 21.49 -64 48 -64H368C394.51 -64 416 -42.51 416 -16V32H464C490.51 32 512 53.49 512 80V400C512 426.51 490.51 448 464 448zM362 -16H54A6 6 0 0 0 48 -10V298A6 6 0 0 0 54 304H96V80C96 53.49 117.49 32 144 32H368V-10A6 6 0 0 0 362 -16zM458 80H150A6 6 0 0 0 144 86V394A6 6 0 0 0 150 400H458A6 6 0 0 0 464 394V86A6 6 0 0 0 458 80z'/%3E%3C/svg%3E");
 }