setion in top navbar

rubicon · Apr 12, 2020 · 2e10b73 · 2e10b73
1 parent 40809e9
commit 2e10b73
Show file tree

Hide file tree

Showing 19 changed files with 365 additions and 122 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "test:ci": "jest --ci"
   },
   "dependencies": {
+    "@tippyjs/react": "^4.0.0-alpha.4",
     "deep-equal": "^2.0.1",
     "downloadjs": "^1.4.7",
     "next": "^9.3.4",
@@ -18,6 +19,7 @@
     "react-color": "^2.18.0",
     "react-dom": "16.13.1",
     "react-redux": "^7.2.0",
+    "react-switch": "^5.0.1",
     "react-tippy": "^1.3.4",
     "react-toastify": "^5.5.0",
     "redux": "^4.0.5",

diff --git a/pages/_app/index.tsx b/pages/_app/index.tsx
@@ -6,6 +6,7 @@ import { appStore } from '../../src/redux/store';
 import withReduxStore from '../../src/lib/with-redux-store';
 import { ToastContainer } from 'react-toastify';
 
+import 'tippy.js/dist/tippy.css';
 import 'react-tippy/dist/tippy.css';
 import 'react-toastify/dist/ReactToastify.css';
 import '../../src/theme/main.scss';

diff --git a/pages/index/index.tsx b/pages/index/index.tsx
@@ -28,7 +28,10 @@ class Home extends React.Component<IProps, IState> {
                     </div>
                 </div>
 
-                <TopNavbar />
+                <TopNavbar
+                    itemStatus={this.props.itemStatus}
+                    theme={this.props.theme}
+                />
 
                 <div className={styles.container}>
 
@@ -40,8 +43,9 @@ class Home extends React.Component<IProps, IState> {
 	}
 }
 
-const mapStateToProps = (state:any) => ({
-    theme: state.theme
+const mapStateToProps = (store:any) => ({
+    theme: store.theme,
+    itemStatus: store.itemStatus
 });
 
 const mapDispatchToProps = () => ({

diff --git a/pages/index/indexType.d.ts b/pages/index/indexType.d.ts
@@ -2,6 +2,9 @@ export interface IProps {
 	theme: {
 		color: string,
 		fontFamily: string
-    }
+	},
+	itemStatus: {
+		[key: string]: boolean
+	}
 }
 export interface IState {}
diff --git a/pages/index/style.module.scss b/pages/index/style.module.scss
@@ -47,13 +47,3 @@
     // box-shadow: 0px 0px 19px 1px rgba(19,121,189,1);
 }
 
-.name {
-    font-weight: bold;
-    font-size: 30px;
-    line-height: 28px;
-}
-
-.title {
-    font-weight: bold;
-    font-size: 20px;
-}
diff --git a/src/component/TopNavbar/index.tsx b/src/component/TopNavbar/index.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import { CirclePicker } from 'react-color';
+import Tippy from '@tippyjs/react';
+import Switch from "react-switch";
 
 import download from 'downloadjs';
 
 import AppConfig from '../../constant/config';
 import SelectFont from '../SelectFont';
 import { appStore } from '../../redux/store';
-import { updateTheme } from '../../redux/core/actions';
+import { updateTheme, updateItemStatus } from '../../redux/core/actions';
 
 import styles from './topNavbar.module.scss';
 
@@ -20,7 +22,9 @@ class TopNavbar extends React.Component<IProps, IState> {
         this.state = {
             colorPicker: false,
             bgComplete: false,
-            background: ''
+            background: '',
+            checked: false,
+            sectionStatus: false
         }
 
     }
@@ -56,6 +60,89 @@ class TopNavbar extends React.Component<IProps, IState> {
 
     }
 
+    _updateItemStatus = (name: string, status: boolean) => {
+        const data = {
+            [name]: status
+        }
+        appStore.dispatch(updateItemStatus(data));
+    }
+
+    _switchBtnClick = (name: string) => {
+        const { itemStatus } = this.props;
+        this._updateItemStatus(name, !itemStatus[name]);
+    }
+
+    _switchBtn = (name: string) => {
+        const { itemStatus, theme } = this.props;
+        return (
+            <Switch
+                onChange={() => this._updateItemStatus(name, !itemStatus[name])}
+                checked={itemStatus[name]}
+                uncheckedIcon={false}
+                checkedIcon={false}
+                activeBoxShadow="0px 0px 0px 0px #ffffff00"
+                width={40}
+                height={20}
+                offColor="#aaa"
+                onColor={theme.color}
+            /> 
+        )
+    }
+
+    _sectionBtnPress = () => {
+        this.setState({
+            bgComplete: !this.state.bgComplete,
+            sectionStatus: !this.state.sectionStatus
+        })
+    }
+
+    _setcionTippyContent = () => {
+        return (
+            <div className={styles.sectionBox}>
+                <div className={styles.sectionLeft}>
+                    <div className={styles.sectionItem}>
+                        {this._switchBtn('picture')}
+                        <span className={styles.sectionItemText} onClick={() => this._switchBtnClick('picture')}>
+                            Picture
+                        </span>
+                    </div>
+                    <div className={styles.sectionItem}>
+                        {this._switchBtn('info')}
+                        <span className={styles.sectionItemText} onClick={() => this._switchBtnClick('info')}>
+                            Info
+                        </span>
+                    </div>
+                    <div className={styles.sectionItem}>
+                        {this._switchBtn('profile')}
+                        <span className={styles.sectionItemText} onClick={() => this._switchBtnClick('profile')}>
+                            Profile
+                        </span>
+                    </div>
+                </div>
+                <div className={styles.sectionRight}>
+                    <div className={styles.sectionItem}>
+                        {this._switchBtn('workExperience')}
+                        <span className={styles.sectionItemText} onClick={() => this._switchBtnClick('workExperience')}>
+                            WorkExperience
+                        </span>
+                    </div>
+                    <div className={styles.sectionItem}>
+                        {this._switchBtn('education')}
+                        <span className={styles.sectionItemText} onClick={() => this._switchBtnClick('education')}>
+                            Education
+                        </span>
+                    </div>
+                    <div className={styles.sectionItem}>
+                        {this._switchBtn('skills')}
+                        <span className={styles.sectionItemText} onClick={() => this._switchBtnClick('skills')}>
+                            Skills
+                        </span>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
     render(){
         let { colorPicker, bgComplete } = this.state;
         return (
@@ -88,8 +175,33 @@ class TopNavbar extends React.Component<IProps, IState> {
                         </div>
                     </div>
                 </div>
-
-                <div className={[styles.item, styles.tonNavbarBorderRight, styles.tonNavbarFelx1].join(' ')}>
+
+                <Tippy
+                    visible={this.state.sectionStatus}
+                    onClickOutside={() => this.setState({ sectionStatus: false })}
+                    className="sectionTippy"
+                    content={this._setcionTippyContent()}
+                    interactive={true}
+                    delay={200}
+                    placement='bottom'
+                    arrow
+                >
+                    <div
+                        className={[styles.item, styles.tonNavbarBorderRight, styles.tonNavbarFelx1].join(' ')}
+                        onClick={this._sectionBtnPress}
+                    >
+                        <div className={styles.topNavbarSection}>
+                            <div className={styles.topPart}>
+                                <i className="material-icons">vertical_split</i>
+                            </div>
+                            <div className={styles.bottomPart}>
+                                Section
+                            </div>
+
+                        </div>
+                    </div>
+                </Tippy>
+                {/* <div className={[styles.item, styles.tonNavbarBorderRight, styles.tonNavbarFelx1].join(' ')}>
                     <div className={styles.topNavbarSection}>
                         <div className={styles.topPart}>
                             <i className="material-icons">vertical_split</i>
@@ -99,7 +211,7 @@ class TopNavbar extends React.Component<IProps, IState> {
                         </div>
                         
                     </div>
-                </div>
+                </div> */}
 
                 <div className={[styles.item, styles.tonNavbarBorderRight, styles.tonNavbarFelx1].join(' ')}>
                     <div className={styles.topNavbarSave}>

diff --git a/src/component/TopNavbar/topNavbar.d.ts b/src/component/TopNavbar/topNavbar.d.ts
@@ -1,7 +1,21 @@
 export interface IProps {
+    itemStatus: {
+		// picture: boolean,
+        // info: boolean,
+        // profile: boolean,
+        // workExperience: boolean,
+        // education: boolean,
+        // skills: boolean
+        [key: string]: boolean
+    },
+    theme: {
+        [key: string]: string
+    }
 }
 export interface IState {
     colorPicker: boolean,
     bgComplete: boolean,
-    background: string
+    background: string,
+    checked: boolean,
+    sectionStatus: boolean
 }
diff --git a/src/component/TopNavbar/topNavbar.module.scss b/src/component/TopNavbar/topNavbar.module.scss
@@ -133,4 +133,28 @@
 
 .bottomPart {
     height: 40%;
+}
+
+.sectionBox {
+    display: flex;
+    color: $black_light
+}
+.sectionLeft {
+    flex: 1;
+    padding: 10px 20px;
+}
+.sectionRight {
+    flex: 1;
+    border-left: 1px dashed $border;
+    padding: 10px 20px;
+}
+.sectionItem {
+    margin: 5px 0;
+}
+.sectionItemText {
+    margin: 0px 0px 0 15px;
+    vertical-align: super;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
 }
diff --git a/src/redux/core/actionTypes.js b/src/redux/core/actionTypes.js
@@ -16,5 +16,6 @@ export const actionTypes = {
     UPDATE_SKILL_DATA: 'UPDATE_SKILL_DATA',
     DELETE_SKILL_DATA: 'DELETE_SKILL_DATA',
     ADD_DELETED_WORK_SKILL_ITEM: 'ADD_DELETED_WORK_SKILL_ITEM',
+    UPDATE_ITEM_STATUS: 'UPDATE_ITEM_STATUS',
 
 };
diff --git a/src/redux/core/actions.js b/src/redux/core/actions.js
@@ -16,6 +16,13 @@ export const updateTheme = (data) => {
     }
 }
 
+export const updateItemStatus = (data) => {
+    return {
+        type : actionTypes.UPDATE_ITEM_STATUS,
+        payload: data
+    }
+}
+
 export const updateWorkExperience = (data) => {
     return {
         type : actionTypes.UPDATE_WORK_EXPERIENCE,