feat: Dynamic change theme

jaro-rokan · Feb 7, 2020 · 3cbfaa7 · 3cbfaa7
1 parent e0348dc
commit 3cbfaa7
Show file tree

Hide file tree

Showing 18 changed files with 282 additions and 91 deletions.
diff --git a/config-overrides.js b/config-overrides.js
@@ -2,6 +2,17 @@ const { override, addLessLoader, addWebpackAlias, fixBabelImports, addWebpackPlu
 const path = require('path')
 const darkThemeVars = require('antd/dist/dark-theme')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const AntDesignThemePlugin = require('antd-theme-webpack-plugin');
+
+const options = {
+  antDir: path.join(__dirname, './node_modules/antd'), 
+  stylesDir: path.join(__dirname, './src/styles'),
+  varFile: path.join(__dirname, './src/styles/var.less'), 
+  mainLessFile: path.join(__dirname, './src/styles/index.less'), 
+  themeVariables: ['@primary-color'],
+  indexFileName: 'index.html',
+  generateOnce: false,
+}
 
 const resolve = dir => path.join(__dirname, '.', dir)
 
@@ -11,24 +22,25 @@ const rewiredSourceMap = () => config => {
 }
 
 module.exports = override(
+  fixBabelImports('import', {
+    libraryName: 'antd',
+    libraryDirectory: 'es',
+    style: true
+  }),
   addLessLoader({
-    javascriptEnabled: true,
     modifyVars: {
-      hack: `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`,
-      ...darkThemeVars,
-      '@primary-color': '#13c2c2',
-      '@dark-color': '#141414',
-      '@font-color': 'rgba(256, 256, 256, 0.85)'
-    }
+      // hack: `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`,
+      // ...darkThemeVars,
+      // '@primary-color': '#13c2c2'
+    },
+    javascriptEnabled: true,
   }),
   addWebpackAlias({
     '~': resolve('src')
   }),
-  // addWebpackPlugin(new BundleAnalyzerPlugin()),
-  fixBabelImports('import', {
-    libraryName: 'antd',
-    libraryDirectory: 'es',
-    style: true
-  }),
+  addWebpackPlugin(
+    // new BundleAnalyzerPlugin(),
+    new AntDesignThemePlugin(options)
+  ),
   rewiredSourceMap()
 )
diff --git a/package.json b/package.json
@@ -54,14 +54,15 @@
     "@types/recharts": "^1.8.5",
     "@types/styled-components": "^4.4.1",
     "@types/webpack-env": "^1.15.0",
+    "antd-theme-webpack-plugin": "^1.3.1",
     "babel-plugin-import": "^1.13.0",
     "babel-plugin-recharts": "^1.2.0",
     "customize-cra": "^0.9.1",
     "eslint-config-prettier": "^6.9.0",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.0",
     "http-proxy-middleware": "^0.20.0",
-    "less": "^3.10.3",
+    "less": "^2.7.0",
     "less-loader": "^5.0.0",
     "prettier": "^1.19.1",
     "react-app-rewired": "^2.1.5",

diff --git a/src/actions/global.action.ts b/src/actions/global.action.ts
@@ -13,6 +13,9 @@ export interface GlobalState {
 
   /** user's language */
   locale: 'zh_CN' | 'en_US'
+
+  /** Is first time to view the site ? */
+  newUser: boolean
 }
 
 const SETGLOBALITEM = 'SETGLOBALITEM'

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './styles/index.less'
+import './styles/main.less'
 import configureStore from './stores'
 import { Provider } from 'react-redux'
 import * as serviceWorker from './serviceWorker'

diff --git a/src/locales/en-US/guide/index.ts b/src/locales/en-US/guide/index.ts
@@ -19,5 +19,7 @@ export const enUS_guide = {
   'app.guide.driverStep.pageTabs.title': 'Page Tabs',
   'app.guide.driverStep.pageTabs.description': 'The history of the page you visited will be displayed here',
   'app.guide.driverStep.pageTabsActions.title': 'Page Tabs Actions',
-  'app.guide.driverStep.pageTabsActions.description': 'Click here to do some quick operations to the Page Tabs'
+  'app.guide.driverStep.pageTabsActions.description': 'Click here to do some quick operations to the Page Tabs',
+  'app.guide.driverStep.switchTheme.title': 'Switch Theme',
+  'app.guide.driverStep.switchTheme.description': 'Click here to switch system theme color'
 }
diff --git a/src/locales/en-US/user/avatorDropMenu.ts b/src/locales/en-US/user/avatorDropMenu.ts
@@ -1,4 +1,8 @@
 export const enUS_avatorDropMenu = {
   'header.avator.account': 'Account',
-  'header.avator.logout': 'Logout'
+  'header.avator.logout': 'Logout',
+  'global.theme.switchTheme': 'Switch Theme',
+  'global.theme.switchingTheme': 'Switching Theme...',
+  'global.theme.switchThemeDone': 'Update theme successfully!',
+  'global.theme.switchThemeFail': 'Update theme fail'
 }
diff --git a/src/locales/zh-CN/guide/index.ts b/src/locales/zh-CN/guide/index.ts
@@ -14,5 +14,7 @@ export const zhCN_guide = {
   'app.guide.driverStep.pageTabs.title': '页面标签',
   'app.guide.driverStep.pageTabs.description': '你的浏览历史会在这里集中显示',
   'app.guide.driverStep.pageTabsActions.title': '标签操作栏',
-  'app.guide.driverStep.pageTabsActions.description': '点击这里可以对页面标签做一些快捷操作'
+  'app.guide.driverStep.pageTabsActions.description': '点击这里可以对页面标签做一些快捷操作',
+  'app.guide.driverStep.switchTheme.title': '切换主题',
+  'app.guide.driverStep.switchTheme.description': '点击这里切换系统主题颜色'
 }
diff --git a/src/locales/zh-CN/user/avatorDropMenu.ts b/src/locales/zh-CN/user/avatorDropMenu.ts
@@ -1,4 +1,8 @@
 export const zhCN_avatorDropMenu = {
   'header.avator.account': '个人设置',
-  'header.avator.logout': '退出登录'
+  'header.avator.logout': '退出登录',
+  'global.theme.switchTheme': '切换主题',
+  'global.theme.switchingTheme': '切换主题中...',
+  'global.theme.switchThemeDone': '主题更新成功',
+  'global.theme.switchThemeFail': '主题更新失败'
 }
diff --git a/src/pages/guide/index.less b/src/pages/guide/index.less
@@ -1,3 +1,5 @@
+@import '~src/styles/var';
+
 .guide-page {
   .guide-intro {
     background-color: rgb(41, 42, 45);

diff --git a/src/pages/guide/index.tsx b/src/pages/guide/index.tsx
@@ -1,77 +1,13 @@
-import React, { FC, useEffect, useState } from 'react'
-import Driver from 'driver.js'
+import React, { FC } from 'react'
 import 'driver.js/dist/driver.min.css'
 import { Button } from 'antd'
 import './index.less'
 import { useLocale } from '~/locales'
+import useGuide from './useGuide'
 
 const GuidePage: FC = () => {
-  const [driver, setDriver] = useState()
-  const { locale, formatMessage } = useLocale()
-
-  useEffect(() => {
-    const _driver = new Driver({
-      opacity: 0.5,
-      className: 'driver-overlay',
-      closeBtnText: formatMessage({ id: 'app.guide.driverjs.closeBtnText' }),
-      prevBtnText: formatMessage({ id: 'app.guide.driverjs.prevBtnText' }),
-      nextBtnText: formatMessage({ id: 'app.guide.driverjs.nextBtnText' }),
-      doneBtnText: formatMessage({ id: 'app.guide.driverjs.doneBtnText' })
-    })
-    setDriver(_driver)
-  }, [locale, formatMessage])
-
-  const onDriverStart = () => {
-    setTimeout(() => {
-      driver.defineSteps([
-        {
-          element: '#sidebar-trigger',
-          popover: {
-            title: formatMessage({ id: 'app.guide.driverStep.sidebarTrigger.title' }),
-            description: formatMessage({ id: 'app.guide.driverStep.sidebarTrigger.description' }),
-            position: 'bottom',
-            offset: 10
-          }
-        },
-        {
-          element: '#notice-center',
-          popover: {
-            title: formatMessage({ id: 'app.guide.driverStep.notices.title' }),
-            description: formatMessage({ id: 'app.guide.driverStep.notices.description' }),
-            position: 'bottom',
-            offset: -160
-          }
-        },
-        {
-          element: '#language-change',
-          popover: {
-            title: formatMessage({ id: 'app.guide.driverStep.switchLanguages.title' }),
-            description: formatMessage({ id: 'app.guide.driverStep.switchLanguages.description' }),
-            position: 'bottom',
-            offset: -170
-          }
-        },
-        {
-          element: '#pageTabs .ant-tabs-nav.ant-tabs-nav-animated',
-          popover: {
-            title: formatMessage({ id: 'app.guide.driverStep.pageTabs.title' }),
-            description: formatMessage({ id: 'app.guide.driverStep.pageTabs.description' }),
-            position: 'bottom',
-            offset: 30
-          }
-        },
-        {
-          element: '#pageTabs-actions svg',
-          popover: {
-            title: formatMessage({ id: 'app.guide.driverStep.pageTabsActions.title' }),
-            description: formatMessage({ id: 'app.guide.driverStep.pageTabsActions.description' }),
-            position: 'left'
-          }
-        }
-      ])
-      driver.start()
-    }, 50)
-  }
+  const { formatMessage } = useLocale()
+  const { driverStart } = useGuide()
 
   return (
     <div className="guide-page">
@@ -87,7 +23,7 @@ const GuidePage: FC = () => {
         </a>
         .
       </p>
-      <Button type="primary" onClick={onDriverStart}>
+      <Button type="primary" onClick={driverStart}>
         {formatMessage({ id: 'app.guide.showGuide' })}
       </Button>
     </div>

diff --git a/src/pages/guide/useGuide.ts b/src/pages/guide/useGuide.ts
@@ -0,0 +1,94 @@
+import { useEffect, useRef } from 'react'
+import Driver from 'driver.js'
+import 'driver.js/dist/driver.min.css'
+import './index.less'
+import { useLocale } from '~/locales'
+
+export const useGuide = () => {
+  const { locale, formatMessage } = useLocale()
+
+  const driver = useRef(
+    new Driver({
+      keyboardControl: false,
+      allowClose: false,
+      overlayClickNext: true,
+      opacity: 0.5,
+      className: 'driver-overlay',
+      closeBtnText: formatMessage({ id: 'app.guide.driverjs.closeBtnText' }),
+      prevBtnText: formatMessage({ id: 'app.guide.driverjs.prevBtnText' }),
+      nextBtnText: formatMessage({ id: 'app.guide.driverjs.nextBtnText' }),
+      doneBtnText: formatMessage({ id: 'app.guide.driverjs.doneBtnText' })
+    })
+  )
+
+  useEffect(() => {
+    driver.current.defineSteps([
+      {
+        element: '#sidebar-trigger',
+        popover: {
+          title: formatMessage({ id: 'app.guide.driverStep.sidebarTrigger.title' }),
+          description: formatMessage({ id: 'app.guide.driverStep.sidebarTrigger.description' }),
+          position: 'bottom',
+          offset: 10,
+          isFirst: true
+        }
+      },
+      {
+        element: '#notice-center',
+        popover: {
+          title: formatMessage({ id: 'app.guide.driverStep.notices.title' }),
+          description: formatMessage({ id: 'app.guide.driverStep.notices.description' }),
+          position: 'bottom',
+          offset: -160
+        }
+      },
+      {
+        element: '#language-change',
+        popover: {
+          title: formatMessage({ id: 'app.guide.driverStep.switchLanguages.title' }),
+          description: formatMessage({ id: 'app.guide.driverStep.switchLanguages.description' }),
+          position: 'bottom',
+          offset: -170
+        }
+      },
+      {
+        element: '#pageTabs .ant-tabs-nav.ant-tabs-nav-animated',
+        popover: {
+          title: formatMessage({ id: 'app.guide.driverStep.pageTabs.title' }),
+          description: formatMessage({ id: 'app.guide.driverStep.pageTabs.description' }),
+          position: 'bottom',
+          offset: 30
+        }
+      },
+      {
+        element: '#pageTabs-actions svg',
+        popover: {
+          title: formatMessage({ id: 'app.guide.driverStep.pageTabsActions.title' }),
+          description: formatMessage({ id: 'app.guide.driverStep.pageTabsActions.description' }),
+          position: 'left'
+        }
+      },
+      {
+        element: '#switchTheme',
+        popover: {
+          title: formatMessage({ id: 'app.guide.driverStep.switchTheme.title' }),
+          description: formatMessage({ id: 'app.guide.driverStep.switchTheme.description' }),
+          position: 'left',
+          isLast: true
+        }
+      }
+    ])
+  }, [formatMessage, locale])
+
+  const driverStart = () => {
+    console.log('guide started')
+    localStorage.setItem('newUser', 'false')
+    driver.current.start()
+  }
+
+  return {
+    driverStart
+  }
+}
+
+export default useGuide
diff --git a/src/pages/layout/index.less b/src/pages/layout/index.less
@@ -1,11 +1,13 @@
+@import '~src/styles/var';
+
 .layout-page {
   &-header {
     padding: 0 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.45);
-    background-color: @dark-color;
+    background-color: @dark-color !important;
     z-index: 9;
   }
   &-sider {
@@ -118,3 +120,39 @@
   line-height: 40px;
   text-align: center;
 }
+
+.themeSwitch {
+  position: fixed;
+  right: 32px;
+  bottom: 102px;
+  z-index: 2147483640;
+  cursor: pointer;
+  > span {
+    display: block;
+    text-align: center;
+    background: #fff;
+    border-radius: 4px;
+    width: 44px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 22px;
+  }
+}
+
+.theme-color-content {
+  display: flex;
+  .theme-color-block {
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+    color: #fff;
+    font-weight: 700;
+    text-align: center;
+    border-radius: 2px;
+    cursor: pointer;
+    border-radius: 2px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}