From 98d27493ac1f0d555c5eb24c34f1382c0a0ad9c2 Mon Sep 17 00:00:00 2001 From: Tsang Wai Lam Date: Tue, 6 Dec 2016 09:56:54 +0800 Subject: [PATCH 1/5] #23 Add sidebar docking --- package.json | 1 + src/App/App.css | 4 ++-- src/App/App.js | 49 ++++++++++++++++++++++++++++++++-------- src/Settings/Settings.js | 6 +++++ src/actions.js | 5 ++++ src/reducers.js | 7 ++++++ 6 files changed, 61 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 00d815f..2cca2a8 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-helmet": "^3.2.2", "react-redux": "^4.4.6", "react-router": "^3.0.0", + "react-sidebar": "^2.2.1", "redux": "^3.6.0", "semantic-ui-react": "^0.61.4", "string.prototype.repeat": "^0.2.0", diff --git a/src/App/App.css b/src/App/App.css index d63233c..4afa04c 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -93,10 +93,10 @@ header > a { background: #333; height: 100%; left: 0; - max-width: 320px; + max-width: 150px; -webkit-overflow-scrolling: touch; overflow-x: hidden; - padding: 1em 0; + padding: 3em 0 1em 0; position: fixed; top: 0; width: 40%; diff --git a/src/App/App.js b/src/App/App.js index 3243ba2..40e8079 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux' import * as types from '../actions' import Helmet from 'react-helmet' import moment from 'moment' +import Sidebar from 'react-sidebar' import { Icon, Modal, Image } from 'semantic-ui-react' import { VelocityComponent } from 'velocity-react' @@ -34,6 +35,7 @@ class App extends Component { state = { drawerOpen: false, modalOpen: false, + sidebarDocked: false } async componentDidMount() { @@ -62,6 +64,10 @@ class App extends Component { if (isStory && !this.props.app.storyMode) { this.props.actions.onToggleStoryMode() } + const isDockMenu = JSON.parse(localStorage.getItem('dm')) + if (isDockMenu && !this.props.app.dockMenu) { + this.props.actions.onToggleDockMenu() + } let list try { @@ -90,6 +96,29 @@ class App extends Component { window.requestAnimationFrame(step) } + + async componentWillMount() { + let mql = window.matchMedia(`(min-width: 800px)`); + mql.addListener(this.mediaQueryChanged); + this.setState({mql: mql, drawerOpen: mql.matches}); + + } + + async componentWillUnmount() { + this.state.mql.removeListener(this.mediaQueryChanged); + } + + async mediaQueryChanged() { + console.log("change open"); + + // this.setState({drawerOpen: !this.state.drawerOpen}); + this.setState({ drawerOpen: !this.state.drawerOpen }, () => { + document.body.style.overflow = this.state.drawerOpen ? 'hidden' : 'visible' + }) + + this.state.mql.removeListener(this.mediaQueryChanged); + } + render() { let { user } = this.props.app.user const linkRef = e => this.settings = e @@ -109,7 +138,7 @@ class App extends Component { this.setState({ modalOpen: !this.state.modalOpen }) } const drawer = ( -
+
{ this.props.app.categories.map(c => { const click = e => { setTimeout(browserHistory.push.bind(null, `/category/${ c.cat_id }`), 250) @@ -169,18 +198,20 @@ class App extends Component { -
- - - - - { drawer } - -
+ {/*
*/} + {/**/} + {/**/} + {/**/} + {/**/} + {/*{ drawer }*/} + {/**/} + {/*
*/} +
{ children }
+
) } diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js index 2c67b63..09bbbab 100644 --- a/src/Settings/Settings.js +++ b/src/Settings/Settings.js @@ -44,6 +44,12 @@ class Settings extends Component { { this.props.app.storyMode ? 'ON' : 'OFF' }
+
+ 癡住條命 + +
洗底 ({ type: TOGGLE_STORY_MODE, }) +export const TOGGLE_DOCK_MENU = 'TOGGLE_DOCK_MENU' +export const onToggleDockMenu = () => ({ + type: TOGGLE_DOCK_MENU, +}) + export const SET_CATEGORIES = 'SET_CATEGORIES' export const onSetCategories = categories => ({ type: SET_CATEGORIES, diff --git a/src/reducers.js b/src/reducers.js index 991c559..ac1c370 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -6,6 +6,7 @@ const initialStates = { darkMode: true, officeMode: false, storyMode: false, + dockMenu: false, categories: [], visitedThreads: JSON.parse(localStorage.getItem('vts')) || [], } @@ -41,6 +42,12 @@ const app = (state = initialStates, action = {}) => { ...state, storyMode: !state.storyMode, } + case types.TOGGLE_DOCK_MENU: + localStorage.setItem('dm', !state.dockMenu) + return { + ...state, + dockMenu: !state.dockMenu, + } case types.SET_CATEGORIES: return { ...state, From 86002c57e20b4979a17f9d1c1d686ef44e6446de Mon Sep 17 00:00:00 2001 From: Tsang Wai Lam Date: Tue, 6 Dec 2016 12:04:45 +0800 Subject: [PATCH 2/5] #23 Add hide/show sidebar options --- src/App/App.css | 6 ++++-- src/App/App.js | 40 ++++++++++++++-------------------------- src/Settings/Settings.js | 2 +- 3 files changed, 19 insertions(+), 29 deletions(-) diff --git a/src/App/App.css b/src/App/App.css index d48b502..027d273 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -72,6 +72,7 @@ header > a { } } .App-content { + margin-top: 5rem; margin-bottom: 6rem; } .App.dark .ui.form textarea, .App.dark .ui.form input { @@ -95,13 +96,13 @@ header > a { flex-direction: column; height: 100%; left: 0; - max-width: 150px; + max-width: 200px; -webkit-overflow-scrolling: touch; overflow-x: hidden; padding: 3em 0 1em 0; position: fixed; top: 0; - width: 40%; + width: 100%; z-index: 41; } .App.light .App-drawer { @@ -110,6 +111,7 @@ header > a { .App-drawer-lower { flex: 1; overflow: auto; + height: 30%; } .App-drawer-item { cursor: pointer; diff --git a/src/App/App.js b/src/App/App.js index 0ba2535..76de197 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -35,7 +35,7 @@ class App extends Component { state = { drawerOpen: false, modalOpen: false, - sidebarDocked: false + drawerDocked: false } async componentDidMount() { @@ -74,6 +74,12 @@ class App extends Component { location.reload(true) } this.props.actions.onSetCategories(list) + + let mql = window.matchMedia(`(min-width: 800px)`); + let opened = mql.matches && this.props.app.dockMenu; + this.mediaQueryChanged = this.mediaQueryChanged.bind(this); + mql.addListener(this.mediaQueryChanged); + this.setState({mql: mql, drawerOpen: opened, drawerDocked: opened}); } scrollToTop() { @@ -92,27 +98,13 @@ class App extends Component { window.requestAnimationFrame(step) } - - async componentWillMount() { - let mql = window.matchMedia(`(min-width: 800px)`); - mql.addListener(this.mediaQueryChanged); - this.setState({mql: mql, drawerOpen: mql.matches}); - - } - async componentWillUnmount() { this.state.mql.removeListener(this.mediaQueryChanged); } async mediaQueryChanged() { - console.log("change open"); - - // this.setState({drawerOpen: !this.state.drawerOpen}); - this.setState({ drawerOpen: !this.state.drawerOpen }, () => { - document.body.style.overflow = this.state.drawerOpen ? 'hidden' : 'visible' - }) - - this.state.mql.removeListener(this.mediaQueryChanged); + let opened = this.state.mql.matches && this.props.app.dockMenu; + this.setState({drawerOpen: opened, drawerDocked: opened}); } render() { @@ -125,6 +117,10 @@ class App extends Component { document.body.style.overflow = this.state.drawerOpen ? 'hidden' : 'visible' }) } + const closeDrawer = e => { + this.setState({ drawerOpen: false }); + document.body.style.overflow = 'hidden'; + } const linkTo = (path, e) => { browserHistory.push(path) toggleDrawer(e) @@ -155,6 +151,7 @@ class App extends Component { ) return (
+
@@ -194,15 +191,6 @@ class App extends Component { - {/*
*/} - {/**/} - {/**/} - {/**/} - {/**/} - {/*{ drawer }*/} - {/**/} - {/*
*/} -
{ children } diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js index 09bbbab..02a9e9b 100644 --- a/src/Settings/Settings.js +++ b/src/Settings/Settings.js @@ -45,7 +45,7 @@ class Settings extends Component {
- 癡住條命 + 癡實選單 From a3177f55a89b4401ddb8a0147a407cd9e99dd9b3 Mon Sep 17 00:00:00 2001 From: Tsang Wai Lam Date: Tue, 6 Dec 2016 12:22:28 +0800 Subject: [PATCH 3/5] Remove import { VelocityComponent } from 'velocity-react' --- src/App/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App/App.js b/src/App/App.js index 76de197..c7a441e 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -8,7 +8,6 @@ import moment from 'moment' import Sidebar from 'react-sidebar' import { Icon, Modal, Image, Divider } from 'semantic-ui-react' -import { VelocityComponent } from 'velocity-react' import Settings from '../Settings/Settings' import './App.css' From e257c1f6415e6f3176f0abec7919332518f36765 Mon Sep 17 00:00:00 2001 From: Tsang Wai Lam Date: Wed, 7 Dec 2016 14:00:53 +0800 Subject: [PATCH 4/5] Fix merge problem. --- src/reducers.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/reducers.js b/src/reducers.js index 4085072..bf8fde5 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -42,6 +42,12 @@ const app = (state = initialStates, action = {}) => { ...state, darkMode: !state.darkMode, } + case types.TOGGLE_DOCK_MENU: + localStorage.setItem('dm', !state.dockMenu) + return { + ...state, + dockMenu: !state.dockMenu, + } case types.SET_CATEGORIES: return { ...state, From 07c8d09a62b90d6f1441d8199c70beeff0ac1bbc Mon Sep 17 00:00:00 2001 From: Tsang Wai Lam Date: Wed, 7 Dec 2016 14:23:37 +0800 Subject: [PATCH 5/5] =?UTF-8?q?Fix=20=E2=80=9CforEach=20is=20not=20a=20fun?= =?UTF-8?q?ction=20error=E2=80=9D=20in=20Thread.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Thread/Thread.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Thread/Thread.js b/src/Thread/Thread.js index 8a0799b..23a2897 100644 --- a/src/Thread/Thread.js +++ b/src/Thread/Thread.js @@ -28,7 +28,7 @@ class Thread extends React.PureComponent { dom.innerHTML = messages // Remove quotes const quotes = dom.querySelectorAll('blockquote' + ' > blockquote'.repeat(5 - 1)) - quotes.forEach(r => r.parentNode.removeChild(r)) + Array.prototype.forEach.call(quotes,r => r.parentNode.removeChild(r)) // Remove icons if (this.props.app.officeMode) { const icons = dom.querySelectorAll('img[src^="https://lihkg.com/assets"]') @@ -39,13 +39,13 @@ class Thread extends React.PureComponent { } // Add link to image const images = dom.querySelectorAll('img:not(.hkgmoji)') - images.forEach(i => { - const anchor = document.createElement('a') - anchor.target = '_blank' - anchor.href = i.src - i.parentNode.replaceChild(anchor, i) - anchor.appendChild(i) - }) + Array.prototype.forEach.call(images, i => { + const anchor = document.createElement('a') + anchor.target = '_blank' + anchor.href = i.src + i.parentNode.replaceChild(anchor, i) + anchor.appendChild(i) + }); return dom.innerHTML.split('
') }