From 6baa034197bd24b693fe4492130752738e841f18 Mon Sep 17 00:00:00 2001 From: sudheer Date: Mon, 9 Jul 2018 18:12:51 +0530 Subject: [PATCH] Fix review comments --- src/browser/components/Finder.jsx | 108 +++++++++++++++++++++++ src/browser/components/MainPage.jsx | 30 ++++--- src/browser/css/components/Finder.css | 42 +++++++++ src/browser/css/components/MainPage.css | 47 ---------- src/browser/css/components/index.css | 1 + src/main/finder.js | 109 ------------------------ 6 files changed, 170 insertions(+), 167 deletions(-) create mode 100644 src/browser/components/Finder.jsx create mode 100644 src/browser/css/components/Finder.css delete mode 100644 src/main/finder.js diff --git a/src/browser/components/Finder.jsx b/src/browser/components/Finder.jsx new file mode 100644 index 00000000..80203a87 --- /dev/null +++ b/src/browser/components/Finder.jsx @@ -0,0 +1,108 @@ +// Copyright (c) 2015-2016 Yuya Ochiai +// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import React from 'react'; +import PropTypes from 'prop-types'; + +export default class Finder extends React.Component { + constructor(props) { + super(props); + this.webview = document.getElementById('mattermostView' + this.props.webviewKey); + this.state = { + foundInPage: false, + searchTxt: '', + }; + } + + componentDidMount() { + this.webview.addEventListener('found-in-page', this.foundInPage); + this.searchInput.focus(); + + // synthetic events are not working all that reliably for touch bar with esc keys + this.searchInput.addEventListener('keyup', this.handleKeyEvent); + } + + componentWillUnmount() { + this.webview.stopFindInPage('clearSelection'); + this.webview.removeEventListener('found-in-page', this.foundInPage); + this.searchInput.removeEventListener('keyup', this.handleKeyEvent); + } + + findNext = () => { + this.webview.findInPage(this.state.searchTxt); + }; + + find = (keyword) => { + this.webview.stopFindInPage('clearSelection'); + if (keyword) { + this.webview.findInPage(keyword); + } else { + this.setState({ + matches: '0/0', + }); + } + }; + + findPrev = () => { + this.webview.findInPage(this.state.searchTxt, {forward: false}); + } + + searchTxt = (event) => { + this.setState({searchTxt: event.target.value}); + this.find(event.target.value); + } + + handleKeyEvent = (event) => { + if (event.code === 'Escape') { + this.props.close(); + } else if (event.code === 'Enter') { + this.findNext(); + } + } + + foundInPage = (event) => { + const {matches, activeMatchOrdinal} = event.result; + this.setState({ + foundInPage: true, + matches: `${activeMatchOrdinal}/${matches}`, + }); + } + + render() { + return ( +
+
+
+ { + this.searchInput = input; + }} + /> + {this.state.matches} +
+ + + +
+
+ ); + } +} + +Finder.propTypes = { + close: PropTypes.func, + webviewKey: PropTypes.number, +}; diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx index 7007b933..9440433c 100644 --- a/src/browser/components/MainPage.jsx +++ b/src/browser/components/MainPage.jsx @@ -11,7 +11,6 @@ import {Grid, Row} from 'react-bootstrap'; import {ipcRenderer, remote} from 'electron'; -import Finder from '../../main/finder'; import Utils from '../../utils/util.js'; import LoginModal from './LoginModal.jsx'; @@ -19,7 +18,7 @@ import MattermostView from './MattermostView.jsx'; import TabBar from './TabBar.jsx'; import HoveringURL from './HoveringURL.jsx'; import PermissionRequestDialog from './PermissionRequestDialog.jsx'; - +import Finder from './Finder.jsx'; import NewTeamModal from './NewTeamModal.jsx'; const MainPage = createReactClass({ @@ -144,24 +143,20 @@ const MainPage = createReactClass({ } }); - const webview = document.getElementById('mattermostView' + this.state.key); - this.finder = new Finder(webview); ipcRenderer.on('toggle-find', () => { - this.finder.toggle(); + this.toggleFinder(); }); }, componentDidUpdate(prevProps, prevState) { if (prevState.key !== this.state.key) { // i.e. When tab has been changed this.refs[`mattermostView${this.state.key}`].focusOnWebView(); - this.finder.destroy(); - const webview = document.getElementById('mattermostView' + this.state.key); - this.finder = new Finder(webview); } }, handleSelect(key) { const newKey = (this.props.teams.length + key) % this.props.teams.length; this.setState({ key: newKey, + finderVisible: false, }); var webview = document.getElementById('mattermostView' + newKey); ipcRenderer.send('update-title', { @@ -256,13 +251,20 @@ const MainPage = createReactClass({ }); }, - focusOnWebView() { - this.refs[`mattermostView${this.state.key}`].focusOnWebView(); + focusOnWebView(e) { + if (e.target.className !== 'finder-input') { + this.refs[`mattermostView${this.state.key}`].focusOnWebView(); + } + }, + + toggleFinder() { + this.setState({ + finderVisible: !this.state.finderVisible, + }); }, render() { var self = this; - var tabsRow; if (this.props.teams.length > 1) { tabsRow = ( @@ -376,6 +378,12 @@ const MainPage = createReactClass({ { tabsRow } { viewsRow } + { this.state.finderVisible ? ( + + ) : null} { (this.state.targetURL === '') ? diff --git a/src/browser/css/components/Finder.css b/src/browser/css/components/Finder.css new file mode 100644 index 00000000..45c72d03 --- /dev/null +++ b/src/browser/css/components/Finder.css @@ -0,0 +1,42 @@ +.finder-input-wrapper { + display: inline-block; + position: relative; +} + +.finder button { + border: 1px solid #d2d2d2; + border-radius: 3px; + background: white; + outline: none; + padding: 5px; + cursor: pointer; + font-size: 14px; +} + +.finder button:hover { + background: #f0f0f0; +} + +.finder-input { + border: 1px solid #d2d2d2; + border-radius: 3px; + padding: 5px; + outline: none; + font-size: 14px; +} + +.finder-input:focus { + border-color: #35b5f4; + box-shadow: 0 0 1px #35b5f4; +} + +.finder-progress__disabled { + display: none; +} + +.finder-progress { + position: absolute; + font-size: 12px; + right: 10px; + top: 10px; +} diff --git a/src/browser/css/components/MainPage.css b/src/browser/css/components/MainPage.css index 746a03f7..e6e75041 100644 --- a/src/browser/css/components/MainPage.css +++ b/src/browser/css/components/MainPage.css @@ -25,50 +25,3 @@ div[id*="-permissionDialog"] { border-bottom-right-radius: 5px; font-size: 0px; } - -.finder-input-wrapper { - display: inline-block; - position: relative; -} - -.finder button { - border: 1px solid #d2d2d2; - border-radius: 3px; - background: white; - outline: none; - padding: 5px; - cursor: pointer; - font-size: 14px; -} - -.finder button:hover { - background: #f0f0f0; -} - -.finder-input { - border: 1px solid #d2d2d2; - border-radius: 3px; - padding: 5px; - outline: none; - font-size: 14px; -} - -.finder-input:focus { - border-color: #35b5f4; - box-shadow: 0 0 1px #35b5f4; -} - -.finder__hidden { - display: none; -} - -.finder-progress__disabled { - display: none; -} - -.finder-progress { - position: absolute; - font-size: 12px; - right: 10px; - top: 10px; -} diff --git a/src/browser/css/components/index.css b/src/browser/css/components/index.css index 65e16e05..357b259d 100644 --- a/src/browser/css/components/index.css +++ b/src/browser/css/components/index.css @@ -6,3 +6,4 @@ @import url("PermissionRequestDialog.css"); @import url("TabBar.css"); @import url("TeamListItem.css"); +@import url("Finder.css"); diff --git a/src/main/finder.js b/src/main/finder.js deleted file mode 100644 index 231ee925..00000000 --- a/src/main/finder.js +++ /dev/null @@ -1,109 +0,0 @@ -// Copyright (c) 2015-2016 Yuya Ochiai -// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -export default class Finder { - constructor(target) { - this.target = target; - } - - toggle() { - return this.opened ? this.close() : this.open(); - } - - open() { - if (!this.initialized) { - this.initialize(); - } - this.opened = true; - this.$finder.classList.remove('finder__hidden'); - this.$input.focus(); - } - - close = () => { - this.opened = false; - this.target.stopFindInPage('clearSelection'); - this.$finder.classList.add('finder__hidden'); - } - - findNext = () => { - if (this.$input.value) { - this.target.findInPage(this.$input.value); - } - } - - findPrev = () => { - if (this.$input.value) { - this.target.findInPage(this.$input.value, {forward: false}); - } - } - - find = (keyword) => { - this.target.stopFindInPage('clearSelection'); - if (keyword) { - this.target.findInPage(keyword); - } else { - this.$progress.textContent = '0/0'; - } - } - - handleKeyEvent = (event) => { - if (event.code === 'Escape') { - this.close(); - } else if (event.code === 'Enter') { - this.findNext(); - } else { - this.find(event.target.value); - } - } - - foundInPage = (event) => { - const {matches, activeMatchOrdinal} = event.result; - this.$progress.classList.remove('finder-progress__disabled'); - this.$progress.textContent = `${activeMatchOrdinal}/${matches}`; - } - - destroy() { - this.initialized = false; - if (this.$input) { - this.$input.removeEventListener('keyup', this.handleKeyEvent); - this.$prev.removeEventListener('click', this.findPrev); - this.$next.removeEventListener('click', this.findNext); - this.$close.removeEventListener('click', this.close); - this.target.removeEventListener('found-in-page', this.foundInPage); - const searchDiv = document.getElementById('searchDiv'); - searchDiv.parentNode.removeChild(searchDiv); - } - } - - initialize() { - this.initialized = true; - const wrapper = document.createElement('div'); - wrapper.setAttribute('id', 'searchDiv'); - wrapper.innerHTML = ` -
-
- - -
- - - -
`; - - document.body.appendChild(wrapper); - - this.$finder = wrapper.querySelector('.finder'); - this.$progress = this.$finder.querySelector('.finder-progress'); - this.$input = this.$finder.querySelector('.finder-input'); - this.$prev = this.$finder.querySelector('.finder-prev'); - this.$next = this.$finder.querySelector('.finder-next'); - this.$close = this.$finder.querySelector('.finder-close'); - - this.$input.addEventListener('keyup', this.handleKeyEvent); - this.$prev.addEventListener('click', this.findPrev); - this.$next.addEventListener('click', this.findNext); - this.$close.addEventListener('click', this.close); - this.target.addEventListener('found-in-page', this.foundInPage); - } -}