From e4e40ec7c03caba4a478af986c6ed4a85e0cbfe9 Mon Sep 17 00:00:00 2001 From: Yuya Ochiai Date: Sat, 26 Nov 2016 00:37:32 +0900 Subject: [PATCH 1/6] Show URL when hovering over links --- src/browser/components/HoveringURL.jsx | 32 +++++++++++++++++++++++ src/browser/components/MainPage.jsx | 9 ++++++- src/browser/components/MattermostView.jsx | 7 +++++ 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/browser/components/HoveringURL.jsx diff --git a/src/browser/components/HoveringURL.jsx b/src/browser/components/HoveringURL.jsx new file mode 100644 index 00000000..ad71de9a --- /dev/null +++ b/src/browser/components/HoveringURL.jsx @@ -0,0 +1,32 @@ +const React = require('react'); + +const divStyle = { + backgroundColor: 'whitesmoke', + position: 'absolute', + bottom: 0, + paddingLeft: 4, + paddingRight: 16, + borderTopRightRadius: 4 +}; + +const spanStyle = { + color: 'gray' +}; + +class HoveringURL extends React.Component { + render() { + return ( +
+ + {this.props.targetURL} + +
+ ); + } +} + +HoveringURL.propTypes = { + targetURL: React.PropTypes.string +}; + +module.exports = HoveringURL; diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx index f8eb505a..5bc025c9 100644 --- a/src/browser/components/MainPage.jsx +++ b/src/browser/components/MainPage.jsx @@ -7,6 +7,7 @@ const url = require('url'); const LoginModal = require('./LoginModal.jsx'); const MattermostView = require('./MattermostView.jsx'); const TabBar = require('./TabBar.jsx'); +const HoveringURL = require('./HoveringURL.jsx'); const MainPage = React.createClass({ propTypes: { @@ -22,7 +23,8 @@ const MainPage = React.createClass({ mentionCounts: new Array(this.props.teams.length), unreadAtActive: new Array(this.props.teams.length), mentionAtActiveCounts: new Array(this.props.teams.length), - loginQueue: [] + loginQueue: [], + targetURL: '' }; }, componentDidMount() { @@ -196,6 +198,9 @@ const MainPage = React.createClass({ loginQueue.shift(); this.setState({loginQueue}); }, + handleTargetURLChange(targetURL) { + this.setState({targetURL}); + }, render() { var self = this; @@ -234,6 +239,7 @@ const MainPage = React.createClass({ src={team.url} name={team.name} disablewebsecurity={this.props.disablewebsecurity} + onTargetURLChange={self.handleTargetURLChange} onUnreadCountChange={handleUnreadCountChange} onNotificationClick={handleNotificationClick} ref={id} @@ -268,6 +274,7 @@ const MainPage = React.createClass({ { tabsRow } { viewsRow } + ); } diff --git a/src/browser/components/MattermostView.jsx b/src/browser/components/MattermostView.jsx index 7a7aec86..59243a6d 100644 --- a/src/browser/components/MattermostView.jsx +++ b/src/browser/components/MattermostView.jsx @@ -13,6 +13,7 @@ const MattermostView = React.createClass({ disablewebsecurity: React.PropTypes.bool, name: React.PropTypes.string, id: React.PropTypes.string, + onTargetURLChange: React.PropTypes.func, onUnreadCountChange: React.PropTypes.func, src: React.PropTypes.string, style: React.PropTypes.object @@ -108,6 +109,12 @@ const MattermostView = React.createClass({ }); }); + webview.addEventListener('update-target-url', (event) => { + if (self.props.onTargetURLChange) { + self.props.onTargetURLChange(event.url); + } + }); + webview.addEventListener('ipc-message', (event) => { switch (event.channel) { case 'onUnreadCountChange': From 93c76861ed37f88a9e8e41de02431f822f232cf3 Mon Sep 17 00:00:00 2001 From: Yuya Ochiai Date: Sat, 26 Nov 2016 15:01:09 +0900 Subject: [PATCH 2/6] Add hovering animation --- src/browser/components/MainPage.jsx | 14 +++++++++++++- src/browser/css/index.css | 18 ++++++++++++++++++ src/browser/index.html | 1 + src/package.json | 1 + 4 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 src/browser/css/index.css diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx index 5bc025c9..b1a6a6e4 100644 --- a/src/browser/components/MainPage.jsx +++ b/src/browser/components/MainPage.jsx @@ -1,4 +1,5 @@ const React = require('react'); +const ReactCSSTransitionGroup = require('react-addons-css-transition-group'); const {Grid, Row} = require('react-bootstrap'); const {ipcRenderer, remote} = require('electron'); @@ -274,7 +275,18 @@ const MainPage = React.createClass({ { tabsRow } { viewsRow } - + + { (this.state.targetURL === '') ? + null : + } + ); } diff --git a/src/browser/css/index.css b/src/browser/css/index.css new file mode 100644 index 00000000..b0c13b5b --- /dev/null +++ b/src/browser/css/index.css @@ -0,0 +1,18 @@ + +.hovering-enter { + opacity: 0.01; +} + +.hovering-enter.hovering-enter-active { + opacity: 1; + transition: opacity 300ms ease-in-out; +} + +.hovering-leave { + opacity: 1; +} + +.hovering-leave.hovering-leave-active { + opacity: 0.01; + transition: opacity 500ms ease-in-out; +} diff --git a/src/browser/index.html b/src/browser/index.html index 61900980..99cb3b8f 100644 --- a/src/browser/index.html +++ b/src/browser/index.html @@ -4,6 +4,7 @@ + diff --git a/src/package.json b/src/package.json index dc2dac09..0a9e3b3b 100644 --- a/src/package.json +++ b/src/package.json @@ -21,6 +21,7 @@ "electron-squirrel-startup": "^1.0.0", "os-locale": "^1.4.0", "react": "^15.3.0", + "react-addons-css-transition-group": "^15.3.0", "react-bootstrap": "~0.30.6", "react-dom": "^15.3.0", "yargs": "^3.32.0" From 14969a8c0449491091ddbebad71927e857336f56 Mon Sep 17 00:00:00 2001 From: Yuya Ochiai Date: Tue, 29 Nov 2016 22:01:18 +0900 Subject: [PATCH 3/6] Improve visility of hevering URL - Add top and bottom padding - Add border lines - Truncate long URL using ellipsis --- src/browser/components/HoveringURL.jsx | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/browser/components/HoveringURL.jsx b/src/browser/components/HoveringURL.jsx index ad71de9a..d15fdff9 100644 --- a/src/browser/components/HoveringURL.jsx +++ b/src/browser/components/HoveringURL.jsx @@ -1,25 +1,28 @@ const React = require('react'); -const divStyle = { +const style = { + color: 'gray', backgroundColor: 'whitesmoke', + maxWidth: '95%', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', position: 'absolute', bottom: 0, paddingLeft: 4, paddingRight: 16, - borderTopRightRadius: 4 -}; - -const spanStyle = { - color: 'gray' + paddingTop: 2, + paddingBottom: 2, + borderTopRightRadius: 4, + borderTop: 'solid thin lightgray', + borderRight: 'solid thin lightgray' }; class HoveringURL extends React.Component { render() { return ( -
- - {this.props.targetURL} - +
+ {this.props.targetURL}
); } From 9d3a80a295c3155e13871cf5ae976a3b612d6b59 Mon Sep 17 00:00:00 2001 From: Yuya Ochiai Date: Tue, 29 Nov 2016 22:49:40 +0900 Subject: [PATCH 4/6] Suppress momentary URL disappearance when hovering over multiple links --- src/browser/components/MainPage.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx index b1a6a6e4..b5726f1b 100644 --- a/src/browser/components/MainPage.jsx +++ b/src/browser/components/MainPage.jsx @@ -200,7 +200,15 @@ const MainPage = React.createClass({ this.setState({loginQueue}); }, handleTargetURLChange(targetURL) { - this.setState({targetURL}); + clearTimeout(this.targetURLDisappearTimeout); + if (targetURL === '') { + // set delay to avoid momentary disappearance when hovering over multiple links + this.targetURLDisappearTimeout = setTimeout(() => { + this.setState({targetURL: ''}); + }, 500); + } else { + this.setState({targetURL}); + } }, render() { var self = this; From b333ca580fe305efd66844f85a47bdf0633366a9 Mon Sep 17 00:00:00 2001 From: Yuya Ochiai Date: Wed, 30 Nov 2016 20:27:29 +0900 Subject: [PATCH 5/6] Make hovering URL unclickable --- src/browser/components/HoveringURL.jsx | 21 ++------------------- src/browser/components/MainPage.jsx | 23 +++++++++++++++++++++++ 2 files changed, 25 insertions(+), 19 deletions(-) diff --git a/src/browser/components/HoveringURL.jsx b/src/browser/components/HoveringURL.jsx index d15fdff9..65bb3d67 100644 --- a/src/browser/components/HoveringURL.jsx +++ b/src/browser/components/HoveringURL.jsx @@ -1,27 +1,9 @@ const React = require('react'); -const style = { - color: 'gray', - backgroundColor: 'whitesmoke', - maxWidth: '95%', - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - position: 'absolute', - bottom: 0, - paddingLeft: 4, - paddingRight: 16, - paddingTop: 2, - paddingBottom: 2, - borderTopRightRadius: 4, - borderTop: 'solid thin lightgray', - borderRight: 'solid thin lightgray' -}; - class HoveringURL extends React.Component { render() { return ( -
+
{this.props.targetURL}
); @@ -29,6 +11,7 @@ class HoveringURL extends React.Component { } HoveringURL.propTypes = { + style: React.PropTypes.object, targetURL: React.PropTypes.string }; diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx index b5726f1b..831d1f27 100644 --- a/src/browser/components/MainPage.jsx +++ b/src/browser/components/MainPage.jsx @@ -10,6 +10,28 @@ const MattermostView = require('./MattermostView.jsx'); const TabBar = require('./TabBar.jsx'); const HoveringURL = require('./HoveringURL.jsx'); +// Todo: Need to consider better way to apply styles +const styles = { + hoveringURL: { + color: 'gray', + backgroundColor: 'whitesmoke', + maxWidth: '95%', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + position: 'absolute', + bottom: 0, + paddingLeft: 4, + paddingRight: 16, + paddingTop: 2, + paddingBottom: 2, + borderTopRightRadius: 4, + borderTop: 'solid thin lightgray', + borderRight: 'solid thin lightgray', + pointerEvents: 'none' + } +}; + const MainPage = React.createClass({ propTypes: { disablewebsecurity: React.PropTypes.bool.isRequired, @@ -292,6 +314,7 @@ const MainPage = React.createClass({ null : } From 1a26508f440e95ca2ff4ba2437d7541ccbe9d70a Mon Sep 17 00:00:00 2001 From: Yuya Ochiai Date: Wed, 30 Nov 2016 23:41:49 +0900 Subject: [PATCH 6/6] Update CHANGELOG.md for hovering links --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 43de8c20..9de8e25d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ Release date: TBD - Suppressed verbose error which is related to certificates - Clear cache on desktop app update: The application cache will be purged whenever the desktop app version changes - Added CTRL+SHIFT+MINUS as a shortcut for zooming out + - Show URL when the mouse cursor is hovering over links #### Windows - Copying a links address and pasting it inside the app now works