Skip to content

Commit bb71058

Browse files
yessGlory17yessGlory17
committed
docs update
1 parent 36645c8 commit bb71058

File tree

3 files changed

+113
-89
lines changed

3 files changed

+113
-89
lines changed

‎README.md

+17-2
Original file line numberDiff line numberDiff line change
@@ -52,17 +52,32 @@ Hello, I am a programmer. And I need to speed dial while writing code. That's wh
5252

5353
[![Programmer Browser Video](https://img.youtube.com/vi/viSwzTKtArQ/0.jpg)](https://www.youtube.com/watch?v=viSwzTKtArQ)
5454

55+
56+
57+
58+
59+
## :keyboard: Shortucts
60+
61+
| Shortcut Name | Shortcut Keys |
62+
| ---------------- | -------------------- |
63+
| Full Screen | F11 |
64+
| Ctrl+E | Change Search Engine |
65+
| Skip To Next Tab | Tab |
66+
67+
68+
5569
## :tada: Roadmap
5670

5771
- [x] Collapses
5872
- [x] AdBlock
73+
- [x] Change Search Engine
5974
- [ ] Mute Collapse Audio
6075
- [ ] Keyboard Shortcuts (Search/Control) (VIM/Emacs)
6176
- [ ] Create Categories
6277
- [ ] Context Menu (Cut/Copy/Paste)
6378
- [ ] Set Tab Color
64-
- [ ] Refresh Collapse
65-
- [ ] Add Electron Updater
79+
- [x] Refresh Collapse
80+
- [x] Add Electron Updater
6681

6782

6883
## :crystal_ball: Usage

‎src/renderer/components/BrowserCollapse.tsx

+72-78
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,96 @@
1-
import { CloseIcon,ArrowLeftIcon,RepeatIcon } from "@chakra-ui/icons";
2-
import { Accordion,
1+
import { CloseIcon, ArrowLeftIcon, RepeatIcon } from '@chakra-ui/icons';
2+
import {
3+
Accordion,
34
AccordionItem,
45
AccordionButton,
56
Box,
67
AccordionIcon,
78
AccordionPanel,
8-
IconButton
9-
} from "@chakra-ui/react";
10-
import { useContext, useEffect,useRef, useState } from "react";
11-
import { SearchContext } from "renderer/context/SearchContext";
12-
import Webview from "./Webview";
13-
import {AiOutlineLeft, AiOutlineRight,AiOutlineClose} from 'react-icons/ai';
14-
15-
16-
const BrowserCollapse = ({name, tabUrl, tabId}) => {
17-
9+
IconButton,
10+
} from '@chakra-ui/react';
11+
import {
12+
MouseEvent,
13+
MouseEvent,
14+
MouseEvent,
15+
useContext,
16+
useEffect,
17+
useRef,
18+
useState,
19+
} from 'react';
20+
import { SearchContext } from 'renderer/context/SearchContext';
21+
import { AiOutlineLeft, AiOutlineRight, AiOutlineClose } from 'react-icons/ai';
22+
import Webview from './Webview';
23+
24+
const BrowserCollapse = ({ name, tabUrl, tabId }) => {
1825
const webviewRef = useRef();
1926

2027
const [collapseName, setCollapseName] = useState(name);
2128

29+
const { closeTab } = useContext(SearchContext);
2230

23-
const {closeTab} = useContext(SearchContext);
24-
25-
const close = (id) => closeTab(id);
31+
const close = (id: any) => closeTab(id);
2632

27-
28-
const back = (e) => {
33+
const back = (e: MouseEvent<HTMLButtonElement, MouseEvent>) => {
2934
e.preventDefault();
30-
webviewRef.current.canGoBack() && webviewRef.current.goBack()
31-
}
32-
35+
webviewRef.current.canGoBack() && webviewRef.current.goBack();
36+
};
3337

34-
const forward = (e) => {
38+
const forward = (e: MouseEvent<HTMLButtonElement, MouseEvent>) => {
3539
e.preventDefault();
36-
webviewRef.current.canGoForward() && webviewRef.current.goForward()
37-
}
40+
webviewRef.current.canGoForward() && webviewRef.current.goForward();
41+
};
3842

39-
const refresh = (e) => {
43+
const refresh = (e: MouseEvent<HTMLButtonElement, MouseEvent>) => {
4044
e.preventDefault();
41-
webviewRef.current.isLoading() ? webviewRef.current.stop() : webviewRef.current.reload();
42-
}
45+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
46+
webviewRef.current.isLoading()
47+
? webviewRef.current.stop()
48+
: webviewRef.current.reload();
49+
};
4350

4451
const getTitle = () => {
45-
if(webviewRef.current === undefined){
52+
if (webviewRef.current === undefined) {
4653
return name;
47-
}else{
48-
return webviewRef.current.getTitle();
4954
}
50-
}
55+
return webviewRef.current.getTitle();
56+
};
5157
return (
52-
53-
<AccordionItem border='none'>
58+
<AccordionItem border="none">
5459
<h2>
55-
<AccordionButton _expanded={{ bg: '#03c9d7', color: 'white' }}>
60+
<AccordionButton _expanded={{ bg: '#03c9d7', color: 'white' }}>
5661
<IconButton
57-
backgroundColor='#32363e'
58-
_hover={{bg: '#32363e'}}
59-
size='xs'
60-
onClick={(e)=>back(e)}
61-
icon={<AiOutlineLeft _hover={{color:'red'}} />}
62-
/>
63-
<Box flex='1' textAlign='left' marginLeft='5px' marginRight='5px'>
64-
<p style={{textAlign:'center'}}>{getTitle()}</p>
65-
</Box>
66-
<IconButton
67-
backgroundColor='#32363e'
68-
marginRight='10px'
69-
_hover={{bg: '#32363e'}}
70-
size='xs'
71-
onClick={(e)=>forward(e)}
72-
icon={<AiOutlineRight _hover={{color:'red'}} />}
73-
/>
74-
<IconButton
75-
backgroundColor="#32363e"
76-
marginRight='10px'
77-
_hover={{ bg: '#32363e' }}
78-
size='xs'
79-
onClick={(e) => refresh(e)}
80-
icon={
81-
<RepeatIcon
82-
_hover={{ color: 'yellow' }}
83-
84-
/>
85-
}
86-
/>
87-
<IconButton
88-
backgroundColor="#32363e"
89-
_hover={{ bg: '#32363e' }}
90-
size='xs'
91-
onClick={() => close(tabId)}
92-
icon={
93-
<AiOutlineClose
94-
_hover={{ color: 'red' }}
95-
96-
/>
97-
}
98-
/>
62+
backgroundColor="#32363e"
63+
_hover={{ bg: '#32363e' }}
64+
size="xs"
65+
onClick={(e) => back(e)}
66+
icon={<AiOutlineLeft _hover={{ color: 'red' }} />}
67+
/>
68+
<Box flex="1" textAlign="left" marginLeft="5px" marginRight="5px">
69+
<p style={{ textAlign: 'center' }}>{getTitle()}</p>
70+
</Box>
71+
<IconButton
72+
backgroundColor="#32363e"
73+
marginRight="10px"
74+
_hover={{ bg: '#32363e' }}
75+
size="xs"
76+
onClick={(e) => forward(e)}
77+
icon={<AiOutlineRight _hover={{ color: 'red' }} />}
78+
/>
79+
<IconButton
80+
backgroundColor="#32363e"
81+
marginRight="10px"
82+
_hover={{ bg: '#32363e' }}
83+
size="xs"
84+
onClick={(e) => refresh(e)}
85+
icon={<RepeatIcon _hover={{ color: 'yellow' }} />}
86+
/>
87+
<IconButton
88+
backgroundColor="#32363e"
89+
_hover={{ bg: '#32363e' }}
90+
size="xs"
91+
onClick={() => close(tabId)}
92+
icon={<AiOutlineClose _hover={{ color: 'red' }} />}
93+
/>
9994

10095
<AccordionIcon />
10196
</AccordionButton>
@@ -109,8 +104,7 @@ const BrowserCollapse = ({name, tabUrl, tabId}) => {
109104
/>
110105
</AccordionPanel>
111106
</AccordionItem>
112-
)
113-
}
114-
107+
);
108+
};
115109

116110
export default BrowserCollapse;

‎src/renderer/components/Settings/SearchEngineModal.jsx

+24-9
Original file line numberDiff line numberDiff line change
@@ -21,36 +21,51 @@ const SearchEngineModal = ({ isOpen, onClose }) => {
2121
onChange,
2222
search,
2323
setSearchEngine,
24-
searchEngine
24+
searchEngine,
2525
} = useContext(SearchContext);
2626

2727
const onChangeSelect = (event) => setSearchEngine(event.target.value);
2828

2929
return (
3030
<>
3131
<Modal isOpen={isOpen} onClose={onClose}>
32-
<ModalOverlay backgroundColor='transparent' />
32+
<ModalOverlay backgroundColor="transparent" />
3333
<ModalContent
3434
backgroundColor="#32363e"
3535
onChange={(e) => onChangeSelect(e)}
3636
>
3737
<ModalHeader>Search Engine Settings</ModalHeader>
3838
<ModalCloseButton />
39-
<ModalBody marginBottom='20px' >
39+
<ModalBody marginBottom="20px">
4040
<Select
4141
value={searchEngine}
4242
backgroundColor={{ backgroundColor: '#32363e' }}
4343
>
44-
<option value='https://www.google.com/search?q=' style={{backgroundColor:'#32363e'}} > Google</option>
45-
<option value='https://duckduckgo.com/?q=' style={{backgroundColor:'#32363e'}}>DucDuckGo</option>
46-
<option value='https://yandex.com.tr/search/?text=' style={{backgroundColor:'#32363e'}}>Yandex</option>
44+
<option
45+
value="https://www.google.com/search?q="
46+
style={{ backgroundColor: '#32363e' }}
47+
>
48+
{' '}
49+
Google
50+
</option>
51+
<option
52+
value="https://duckduckgo.com/?q="
53+
style={{ backgroundColor: '#32363e' }}
54+
>
55+
DucDuckGo
56+
</option>
57+
<option
58+
value="https://yandex.com.tr/search/?text="
59+
style={{ backgroundColor: '#32363e' }}
60+
>
61+
Yandex
62+
</option>
4763
</Select>
4864
</ModalBody>
49-
5065
</ModalContent>
5166
</Modal>
5267
</>
53-
)
54-
}
68+
);
69+
};
5570

5671
export default SearchEngineModal;

0 commit comments

Comments
 (0)