Skip to content

Commit 0520bc2

Browse files
lxieyanglxieyang
committed
Merge branch 'new-features'
2 parents f66e3bd + 79a953f commit 0520bc2

File tree

9 files changed

+102
-50
lines changed

9 files changed

+102
-50
lines changed

‎src/components/Logo/Logo.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,12 @@ const logo = (props) => {
1313
let src = AppLogo;
1414

1515
if (window.chrome !== undefined && chrome.extension !== undefined) {
16-
src = chrome.runtime.getURL('icon-128.png');
16+
try {
17+
src = chrome.runtime.getURL('icon-128.png');
18+
} catch (err) {
19+
console.log(err);
20+
// return null;
21+
}
1722
}
1823

1924
return (

‎src/pages/Background/helpers/InstallationHelper.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ chrome.runtime.onInstalled.addListener((details) => {
1818
const prevVersion = details.previousVersion;
1919
console.log(thisVersion, prevVersion);
2020
}
21-
if (details.reason === 'install' || details.reason === 'update') {
21+
if (
22+
details.reason === 'install'
23+
// || details.reason === 'update'
24+
) {
2225
console.log('go to release log page');
2326
chrome.tabs.create({
2427
url: `https://github.com/lxieyang/vertical-tabs-chrome-extension/blob/master/CHANGELOG.md#v2x-official-releases`,

‎src/pages/Content/helpers/UpdateNoticeHelper.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3+
import { sidebarRoot } from './SidebarHelper';
4+
import { SIDEBAR_CONTAINER_ID } from '../../../shared/constants';
35
import UpdateNotice from '../modules/UpdateNotice/UpdateNotice';
46

57
let updateNoticeRoot = document.createElement('div');
@@ -18,8 +20,16 @@ document.addEventListener('visibilitychange', (info) => {
1820
if (err.toString().indexOf('Extension context invalidated') !== -1) {
1921
if (!document.hidden) {
2022
console.log('should refresh page');
23+
updateNoticeRoot.style.zIndex = '999999999';
2124
ReactDOM.render(<UpdateNotice />, updateNoticeRoot);
25+
const sidebarIframe = sidebarRoot.querySelector('iframe');
26+
sidebarIframe.style.opacity = 0.4;
27+
sidebarIframe.style.pointerEvents = 'none';
28+
sidebarIframe.style.userSelect = 'none';
29+
document.querySelector(`#${SIDEBAR_CONTAINER_ID}`).style.cursor =
30+
'not-allowed';
2231
} else {
32+
updateNoticeRoot.style.zIndex = null;
2333
ReactDOM.unmountComponentAtNode(updateNoticeRoot);
2434
}
2535
}

‎src/pages/Content/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import copy from 'clipboard-copy';
2-
import './helpers/UpdateNoticeHelper';
32
import './helpers/SidebarHelper';
43
import './helpers/TabPreviewHelper';
4+
import './helpers/UpdateNoticeHelper';
55

66
window.addEventListener('message', (event) => {
77
const { msg, payload } = event.data;

‎src/pages/Content/modules/UpdateNotice/UpdateNotice.jsx‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,32 @@
11
import React, { useState } from 'react';
22
import styled from 'styled-components';
3-
import { FaSyncAlt, FaTimesCircle } from 'react-icons/fa';
3+
import { FaTimesCircle as DismissIcon } from 'react-icons/fa';
4+
import { MdRefresh as RefreshIcon } from 'react-icons/md';
45
import { APP_NAME_FULL } from '../../../../shared/constants';
56

67
const UpdateNoticeContainer = styled.div`
7-
max-width: 560px;
8+
max-width: 360px;
89
position: relative;
9-
background-color: #fff;
10-
border: 1px solid #ffb74d;
11-
padding: 8px 8px;
12-
border-radius: 4px;
10+
border: 2px solid #ff8f34;
11+
box-sizing: border-box;
12+
padding: 8px 16px;
13+
border-radius: 10px;
1314
color: #000;
14-
background-color: #fff3e0;
15+
background-color: #fff !important;
1516
1617
font-family: sans-serif;
1718
text-align: center;
1819
font-size: 14px;
1920
font-weight: 400;
2021
font-style: normal;
21-
box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
22+
box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
23+
line-height: 22px;
2224
`;
2325

2426
const ExtensionNameContainerSpan = styled.span`
25-
background-color: rgb(233, 115, 46);
26-
color: #fff;
27-
padding: 2px 4px;
27+
background-color: rgb(255, 196, 161);
28+
color: #000;
29+
padding: 2px 6px;
2830
border-radius: 4px;
2931
font-weight: 600;
3032
`;
@@ -42,12 +44,16 @@ const ActionButton = styled.div`
4244
display: flex;
4345
align-items: center;
4446
transition: all 0.05s ease-in;
45-
padding: 2px 6px;
47+
padding: 4px 8px;
4648
border-radius: 4px;
4749
50+
text-decoration: underline;
51+
4852
&:hover {
49-
background-color: rgb(233, 115, 46);
50-
color: #fff;
53+
background-color: ${(props) =>
54+
props.action === 'reload' ? '#198754' : 'gray'};
55+
color: ${(props) => (props.action === 'reload' ? '#fff' : '#fff')};
56+
text-decoration: none;
5157
}
5258
`;
5359

@@ -60,7 +66,7 @@ const UpdateNotice = () => {
6066
<div
6167
style={{
6268
position: 'fixed',
63-
bottom: 5,
69+
bottom: 10,
6470
left: 0,
6571
right: 0,
6672
display: 'flex',
@@ -78,21 +84,23 @@ const UpdateNotice = () => {
7884
</div>
7985
<ActionButtonsContainer>
8086
<ActionButton
87+
action={'reload'}
8188
onClick={() => {
8289
localStorage.removeItem('vt-update-notice-dismissed');
8390
window.location.reload();
8491
}}
8592
>
86-
<FaSyncAlt size="12px" style={{ marginRight: '4px' }} />
93+
<RefreshIcon size="20px" style={{ marginRight: '4px' }} />
8794
Refresh Now
8895
</ActionButton>
8996
<ActionButton
97+
action={'dismiss'}
9098
onClick={() => {
9199
localStorage.setItem('vt-update-notice-dismissed', 'true');
92100
setShouldDisplay(false);
93101
}}
94102
>
95-
<FaTimesCircle size="12px" style={{ marginRight: '4px' }} />
103+
<DismissIcon size="16px" style={{ marginRight: '4px' }} />
96104
Dismiss
97105
</ActionButton>
98106
</ActionButtonsContainer>

‎src/pages/Content/modules/frame/frame.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const iframeClass = css`
2020
`;
2121

2222
const containerClass = css`
23+
background-color: #fff;
2324
position: fixed;
2425
top: 0px;
2526
/* right: 0px; */

‎src/pages/Sidebar/Sidebar.jsx‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -260,34 +260,32 @@ class Sidebar extends Component {
260260

261261
return (
262262
<DarkModeContext.Consumer>
263-
{(darkModeContext) => {
264-
return (
265-
<div
266-
className={classNames({
267-
SidebarContainer: true,
268-
Dark: darkModeContext.isDark,
269-
})}
270-
>
271-
<Title
272-
setDisplayTabInFull={this.setDisplayTabInFull}
273-
setDisplayTabPreviewFrame={this.setDisplayTabPreviewFrame}
274-
/>
275-
<TabsList
276-
displayTabInFull={displayTabInFull}
277-
displayTabPreviewFrame={displayTabPreviewFrame}
278-
tabOrders={tabOrders
279-
.filter(({ id }) => tabsDict[id] !== undefined)
280-
.map((tabOrder) => ({
281-
...tabOrder,
282-
...tabsDict[tabOrder.id],
283-
}))}
284-
activeTab={activeTab}
285-
setTabAsLoading={this.setTabAsLoading}
286-
/>
287-
{/* <UpdateNotice /> */}
288-
</div>
289-
);
290-
}}
263+
{({ isDark }) => (
264+
<div
265+
className={classNames({
266+
SidebarContainer: true,
267+
Dark: isDark,
268+
})}
269+
>
270+
<Title
271+
setDisplayTabInFull={this.setDisplayTabInFull}
272+
setDisplayTabPreviewFrame={this.setDisplayTabPreviewFrame}
273+
/>
274+
<TabsList
275+
displayTabInFull={displayTabInFull}
276+
displayTabPreviewFrame={displayTabPreviewFrame}
277+
tabOrders={tabOrders
278+
.filter(({ id }) => tabsDict[id] !== undefined)
279+
.map((tabOrder) => ({
280+
...tabOrder,
281+
...tabsDict[tabOrder.id],
282+
}))}
283+
activeTab={activeTab}
284+
setTabAsLoading={this.setTabAsLoading}
285+
/>
286+
{/* <UpdateNotice /> */}
287+
</div>
288+
)}
291289
</DarkModeContext.Consumer>
292290
);
293291
}

‎src/pages/Sidebar/containers/ErrorBoundary/ErrorBoundary.jsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { Component } from 'react';
2+
3+
class ErrorBoundary extends Component {
4+
state = { hasError: false };
5+
6+
static getDerivedStateFromError(error) {
7+
return { hasError: true };
8+
}
9+
10+
componentDidCatch(error, errorInfo) {
11+
console.log({ error, errorInfo });
12+
}
13+
14+
render() {
15+
// if (this.state.hasError) {
16+
// return (
17+
// <h1>
18+
// Oops, please refresh the current page to use Vertical Tabs again.
19+
// </h1>
20+
// );
21+
// }
22+
return this.props.children;
23+
}
24+
}
25+
26+
export default ErrorBoundary;

‎src/pages/Sidebar/index.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { DndProvider } from 'react-dnd';
44
import { HTML5Backend } from 'react-dnd-html5-backend';
55
import SnackbarProvider from 'react-simple-snackbar';
66
import MediaQuery from 'react-responsive';
7+
import EB from './containers/ErrorBoundary/ErrorBoundary';
78

89
import Sidebar from './Sidebar';
910
import './index.css';
@@ -50,7 +51,7 @@ const App = () => {
5051
}
5152

5253
return (
53-
<React.Fragment>
54+
<EB>
5455
<SnackbarProvider>
5556
<DarkModeContext.Provider
5657
value={{ mediaQueryDark, isDark, setDarkStatus }}
@@ -71,7 +72,7 @@ const App = () => {
7172
<div style={{ width: 0, height: 0 }}></div>
7273
</MediaQuery>
7374
</SnackbarProvider>
74-
</React.Fragment>
75+
</EB>
7576
);
7677
};
7778

0 commit comments

Comments
 (0)