Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[draft] feat: History and Navigation #2

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

[draft] feat: History and Navigation #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6f8acc3
ui: scaffold navigation bar
mrivasperez Oct 29, 2024
d0e82b6
chore: add icon assets
mrivasperez Oct 29, 2024
ed0327b
ui: prototype navigation bar
mrivasperez Oct 30, 2024
ea179b9
ui: title bar
mrivasperez Oct 30, 2024
80ae537
ui: add history cta
mrivasperez Nov 1, 2024
8297bdb
feat: url updates when user navigates
mrivasperez Nov 1, 2024
4064423
feat: use can navigate back and forth
mrivasperez Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/renderer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
/>
<link rel="stylesheet" href="./src/assets/bootstrap.min.css">
<base href="./">
</head>

<body>
Expand Down
29 changes: 27 additions & 2 deletions src/renderer/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,41 @@
import { useRef, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import './assets/styles.css'
import AddressBar from './components/AddressBar'
import useWindowsDimensions from './hooks/useWindowsDimensions'
import Splash from './components/Splash'
import NavigationBar from './feature/navigation/NavigationBar'
import TitleBar from './components/TitleBar'
import { WebviewTag } from 'electron'

function App(): JSX.Element {
const [url, setUrl] = useState<string>('')
const windowDimensions = useWindowsDimensions()
const webviewRef = useRef<HTMLWebViewElement>(null)
const webviewRef = useRef<WebviewTag>(null)
const [pageTitle, setPageTitle] = useState('')
useEffect(() => {
if (webviewRef.current) {
webviewRef.current.addEventListener('did-navigate', (event) => {
console.log(event)
setUrl(event.url)
})

// Get the title from the webview
webviewRef.current.executeJavaScript(`document.title;`, (title) => {
setPageTitle(title)
})
}

return () => {
if (webviewRef.current) {
webviewRef.current.removeEventListener('did-navigate', () => {})
}
}
}, [])

return (
<>
<TitleBar pageTitle={pageTitle} />
<NavigationBar webViewRef={webviewRef} />
<AddressBar setUrl={setUrl} url={url} />
{url ? (
<webview
Expand Down
21 changes: 10 additions & 11 deletions src/renderer/src/components/AddressBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,16 @@ const AddressBar = ({
setUrl: React.Dispatch<React.SetStateAction<string>>
}): JSX.Element => {
return (
<nav className="navbar bg-primary text-white p-2 border-bottom-dark sticky-top" id="drag">
<div className="container">
<input
type="text"
className="form-control border-primary shadow-sm"
id="no-drag"
value={url}
onChange={(e) => setUrl(e.target.value)}
/>
</div>
</nav>
<div className="d-flex bg-body-tertiary align-center border-bottom sticky-top ps-0" id="drag">
<p className="text-secondary m-0 p-2 align-center">Address</p>
<input
type="text"
className="form-control rounded-0 border-start border-0"
id="no-drag"
value={url}
onChange={(e) => setUrl(e.target.value)}
/>
</div>
)
}

Expand Down
9 changes: 9 additions & 0 deletions src/renderer/src/components/TitleBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const TitleBar = ({ pageTitle }: { pageTitle: string }): JSX.Element => {
return (
<div className="bg-secondary fw-bold p-2 border-bottom text-center " id="drag">
{pageTitle}
</div>
)
}

export default TitleBar
37 changes: 37 additions & 0 deletions src/renderer/src/feature/navigation/NavigationBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import goBack from './assets/go-previous.svg'
import goForward from './assets/go-next.svg'
import history from './assets/recent.svg'
const NavigationBar = ({
webViewRef
}: {
webViewRef: React.RefObject<Electron.WebviewTag>
}): JSX.Element => {
const handleGoBack = (): void => webViewRef.current?.goBack()

const handleGoForward = (): void => webViewRef.current?.goForward()

return (
<div
className="d-flex justify-content-between border-bottom bg-body-tertiary sticky-top"
id="drag"
>
<div className="d-flex">
<button className="btn d-flex" id="no-drag" onClick={handleGoBack}>
<img src={goBack} height={40} />
<p className="m-0 py-2 ms-1 mt-0 fw-medium">Back</p>
</button>
{webViewRef.current && webViewRef.current.canGoForward() && (
<button className="btn p-0" id="no-drag" onClick={handleGoForward}>
<img src={goForward} className="lead" height={40} />
</button>
)}
</div>

<button className="btn p-0 me-2" id="no-drag">
<img src={history} className="lead" height={40} />
</button>
</div>
)
}

export default NavigationBar
150 changes: 150 additions & 0 deletions src/renderer/src/feature/navigation/assets/go-next.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading