feat: add close button to App

Author: geekdada

package.json

@@ -47,6 +47,7 @@
  "babel-preset-react-app": "^10.0.0",
  "chrome-call": "^4.0.1",
  "clean-webpack-plugin": "^3.0.0",
+ "clsx": "^1.1.1",
  "connect.io": "^3.1.3",
  "copy-webpack-plugin": "^6.4.0",
  "css-loader": "^5.0.1",
@@ -66,11 +67,13 @@
  "postcss-import": "^14.0.0",
  "postcss-loader": "^4.1.0",
  "prettier": "^2.2.1",
+ "process": "^0.11.10",
  "rangy": "^1.3.0",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-draggable": "^4.4.3",
  "react-hot-loader": "^4.13.0",
+ "react-scroll-to-bottom": "^4.1.0",
  "sass-loader": "^10.1.0",
  "smoothscroll-polyfill": "^0.4.4",
  "source-map-loader": "^1.1.3",

src/assets/img/icon-128.png

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Icon: React.FC = (props) => {
+ return <div className="ate_Icon">{props.children}</div>
+}
+
+export default Icon

src/assets/img/icon-34.png

@@ -0,0 +1,20 @@
+import React, { HTMLProps, MouseEventHandler } from 'react'
+import clsx from 'clsx'
+
+const IconButton: React.FC<Omit<HTMLProps<HTMLButtonElement>, 'size'>> = (
+ props,
+) => {
+ const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+ props.onClick && props.onClick(e)
+ }
+
+ return (
+ <button
+ className={clsx(['ate_IconButton', props.className])}
+ onClick={handleClick}>
+ {props.children}
+ </button>
+ )
+}
+
+export default IconButton

src/components/Icon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function Close(): React.ReactElement {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ width="16"
+ height="16"
+ viewBox="0 0 24 24"
+ stroke="currentColor">
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth={2}
+ d="M6 18L18 6M6 6l12 12"
+ />
+ </svg>
+ )
+}

src/components/IconButton.tsx

@@ -1,6 +1,6 @@
 {
  "name": "A Translator",
- "permissions": ["<all_urls>", "storage"],
+ "permissions": ["<all_urls>", "storage", "tabs"],
  "options_ui": {
  "page": "options.html",
  "chrome_style": false,
@@ -10,8 +10,10 @@
  "page": "background.html"
  },
  "browser_action": {
- "default_popup": "popup.html",
- "default_icon": "icon-34.png"
+ "default_icon": {
+ "128": "icon-128.png"
+ },
+ "default_title": "A Translator"
  },
  "icons": {
  "128": "icon-128.png"
@@ -21,7 +23,7 @@
  "matches": ["http://*/*", "https://*/*", "<all_urls>"],
  "js": ["contentScript.bundle.js"],
  "css": ["contentScript.bundle.css"],
- "run_at": "document_start"
+ "run_at": "document_end"
  }
  ],
  "web_accessible_resources": [

src/components/svg/Close.tsx

@@ -0,0 +1,17 @@
+import cc from 'chrome-call'
+import { createClient } from 'connect.io'
+import logger from '../../../common/logger'
+
+export const openExtension = (): void => {
+ cc(chrome.tabs, 'query', { active: true, currentWindow: true })
+ .then((tabs: chrome.tabs.Tab[]) => {
+ const client = createClient(tabs[0].id)
+
+ client.send('open_extension')
+ })
+ .catch((err) => {
+ logger.error({
+ err,
+ })
+ })
+}

src/manifest.json

@@ -2,3 +2,6 @@ import '../../assets/img/icon-34.png'
 import '../../assets/img/icon-128.png'
 
 import './common/server'
+import { openExtension } from './common/utils'
+
+chrome.browserAction.onClicked.addListener(openExtension)

src/pages/Background/common/utils.ts

@@ -1,9 +1,14 @@
+import clsx from 'clsx'
 import React, { useCallback, useEffect, useState } from 'react'
-import Draggable from 'react-draggable'
+import Draggable, { DraggableEventHandler } from 'react-draggable'
 import cc from 'chrome-call'
+// @ts-ignore
+import ScrollToBottom from 'react-scroll-to-bottom'
 
 import logger from '../../../../common/logger'
 import { Config } from '../../../../common/types'
+import IconButton from '../../../../components/IconButton'
+import CloseIcon from '../../../../components/svg/Close'
 import translationStack from '../../common/translation-stack'
 import { TranslateJob } from '../../common/types'
 import { ConfigContext, ConfigState } from '../../providers/config'
@@ -12,6 +17,7 @@ import TranslationList from '../TranslationList'
 
 const App: React.FC = () => {
  const [config, setConfig] = useState<ConfigState>()
+ const [close, setClose] = useState(false)
  const dispatch = useTranslateJobsDispatch()
 
  const onNewJob = useCallback(
@@ -33,6 +39,16 @@ const App: React.FC = () => {
  [dispatch],
  )
 
+ const onDragStart: DraggableEventHandler = (e) => {
+ if (
+ document
+ .querySelector<HTMLButtonElement>('.ate_App__close-button')
+ ?.contains(e.target as Node)
+ ) {
+ return false
+ }
+ }
+
  useEffect(() => {
  translationStack.attachQueue(onNewJob)
 
@@ -47,20 +63,40 @@ const App: React.FC = () => {
  targetLang: config.targetLang,
  })
  })
+
+ window.__ate_setClose = setClose
  }, [])
 
  return (
  <ConfigContext.Provider value={config}>
- <Draggable handle=".ate_App__header" defaultPosition={{ x: 20, y: 20 }}>
- <div className="ate_App">
- <div className="ate_App__header">A Translator</div>
- <div className="ate_App__container">
- <TranslationList />
+ <Draggable
+ handle=".ate_App__header"
+ onStart={onDragStart}
+ defaultPosition={{ x: 20, y: 20 }}>
+ <div className={clsx(['ate_App', close && 'ate_App--inactive'])}>
+ <div className="ate_App__header">
+ <span>A Translator</span>
+ <span>
+ <IconButton
+ className="ate_App__close-button"
+ onClick={() => setClose(true)}>
+ <CloseIcon />
+ </IconButton>
+ </span>
  </div>
+ <ScrollToBottom className="ate_App__container" debug={false}>
+ <TranslationList />
+ </ScrollToBottom>
  </div>
  </Draggable>
  </ConfigContext.Provider>
  )
 }
 
 export default App
+
+declare global {
+ interface Window {
+ __ate_setClose?: React.Dispatch<any>
+ }
+}