Add basic navigator UI

gaurab13 · Dec 1, 2019 · 70ae485 · 70ae485
1 parent 40d367d
commit 70ae485
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 3 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,7 @@
         margin: 0;
       }
     </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -4,7 +4,9 @@ import 'bootstrap/scss/bootstrap.scss';
 
 const App: React.FC = () => {
   return (
-    <TopBar />
+    <div className="topbar" id="topbar">
+      <TopBar />
+    </div>
   );
 }
 

diff --git a/src/components/Navigator/index.scss b/src/components/Navigator/index.scss
@@ -0,0 +1,33 @@
+.browser-navigator {
+  border-right: 1px solid #dbdce4;
+  white-space: nowrap;
+  height: 32px;
+  button {
+    background: #f2f3f5;
+    cursor: pointer;
+    border: 0;
+    padding: 4px 4px 0 4px;
+    &:focus,
+    &:active {
+      outline: none;
+    }
+    i {
+      width: 24px;
+      height: 24px;
+      font-size: 16px;
+      color: #646575;
+      &:hover {
+        color: #272833;
+      }
+    }
+  }
+  .disabled-btn {
+    cursor: default;
+    i {
+      color: #9fa1b3;
+      &:hover {
+        color: #9fa1b3;
+      }
+    }
+  }
+}
diff --git a/src/components/Navigator/index.tsx b/src/components/Navigator/index.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react';
+import './index.scss';
+
+interface IProps {
+  isLoading: boolean;
+  canGoBack: boolean;
+  canGoForward: boolean;
+}
+
+export const Navigator: React.FunctionComponent<IProps> = props => {
+  // useEffect(() => {
+  //   updateNavigationState();
+  // }, []);
+
+  const handlePageviewReload = () => {
+    // reloadPageView();
+    console.log("yo")
+  };
+
+  const handleStopPageviewReload = () => {
+    // stopPageViewReload();
+    console.log("yo")
+  };
+
+  const handleOnBackClick = () => {
+    // goBacktoPreviousPageView();
+    console.log("yo")
+  };
+
+  const handleOnForwardClick = () => {
+    // goForwardtoNextPageView();
+    console.log("yo")
+  };
+
+  return (
+    <div className="browser-navigator px-1">
+      <button
+        className={`go-backward ${props.canGoBack ? '' : 'disabled-btn'}`}
+        onClick={() => handleOnBackClick()}
+        disabled={!props.canGoBack}
+      >
+        <i className="fa fa-arrow-left" />
+      </button>
+
+      <button
+        className={`go-forward ${props.canGoForward ? '' : 'disabled-btn'}`}
+        onClick={() => handleOnForwardClick()}
+        disabled={!props.canGoForward}
+      >
+        <i className="fa fa-arrow-right" />
+      </button>
+      {props.isLoading ? (
+        <button className="stop-page-reload" onClick={() => handleStopPageviewReload()}>
+          <i className="fa fa-times" />
+        </button>
+      ) : (
+        <button className="reload-page" onClick={() => handlePageviewReload()}>
+          <i className="fa fa-repeat" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default Navigator;
diff --git a/src/components/TopBar/index.scss b/src/components/TopBar/index.scss
@@ -85,7 +85,7 @@
   padding: 3px;
   .form-control {
     font-size: 14px;
-    border-radius: 2px;
+    border: none;
     height: 28px;
     background: #f8f8fa;
     &:focus {

diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import './index.scss';
+import Navigator from '../Navigator';
 
 type ActionCreator = (...args: any[]) => void;
 
@@ -32,6 +33,11 @@ export const TopBar: React.FunctionComponent<IProps> = props => {
   return (
     <div>
       <div className="d-flex flex-row tab-container">
+        <Navigator
+          canGoBack={true}
+          canGoForward={false}
+          isLoading={true}
+        />
         {urls.map((url, index) => {
           const activeClass = index === activeTabIndex ? 'active' : '';
           return (
@@ -49,7 +55,7 @@ export const TopBar: React.FunctionComponent<IProps> = props => {
         <input
           type="text"
           className="form-control"
-          value={'url'}
+          value={urls[activeTabIndex]}
         />
       </div>
     </div>