From 4902a59c017c0f19e1873f3bca2ab73201f4565b Mon Sep 17 00:00:00 2001 From: Takashi Kokubun Date: Sun, 20 Mar 2016 21:11:01 +0900 Subject: [PATCH] Drop application header --- src/components/app.js | 3 -- src/components/header.js | 30 -------------- src/containers/header-container.js | 66 ------------------------------ src/index.scss | 58 ++++---------------------- 4 files changed, 9 insertions(+), 148 deletions(-) delete mode 100644 src/components/header.js delete mode 100644 src/containers/header-container.js diff --git a/src/components/app.js b/src/components/app.js index 8dbfe32..08ad72a 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -1,7 +1,6 @@ import React, { PropTypes } from 'react'; import AccountContainer from '../containers/account-container'; import EditorContainer from '../containers/editor-container'; -import HeaderContainer from '../containers/header-container'; import TimelineContainer from '../containers/timeline-container'; export default class App extends React.Component { @@ -17,8 +16,6 @@ export default class App extends React.Component { render() { return(
- - diff --git a/src/components/header.js b/src/components/header.js deleted file mode 100644 index b754174..0000000 --- a/src/components/header.js +++ /dev/null @@ -1,30 +0,0 @@ -import React, { PropTypes } from 'react'; - -export default class Header extends React.Component { - static propTypes = { - activeAccount: PropTypes.object, - activeListId: PropTypes.string, - activeSearchQuery: PropTypes.string, - onHomeClicked: PropTypes.func.isRequired, - onRefreshClicked: PropTypes.func.isRequired, - } - - render() { - return( -
-
-
- -
- Home -
-
-
- -
- Refresh -
-
- ); - } -} diff --git a/src/containers/header-container.js b/src/containers/header-container.js deleted file mode 100644 index 6f736fe..0000000 --- a/src/containers/header-container.js +++ /dev/null @@ -1,66 +0,0 @@ -import Actions from '../actions'; -import Header from '../components/header'; -import TimelineProxy from '../utils/timeline-proxy'; -import TwitterClient from '../utils/twitter-client'; -import { connect } from 'react-redux'; -import { shell } from 'electron'; - -const mapStateToProps = (state) => { - let activeAccount = state.accounts[state.activeAccountIndex]; - return { - activeAccount: activeAccount, - activeListId: activeAccount && state.activeListIdByUserId[activeAccount.id_str], - activeSearchQuery: activeAccount && state.searchQueryByUserId[activeAccount.id_str], - } -} - -const mergeProps = (stateProps, dispatchProps, ownProps) => { - const { dispatch } = dispatchProps; - - const addTweet = (tweet, account, tab) => { - dispatch(Actions.addTweet(tweet, account, tab)); - } - - const refreshListsTab = (client) => { - if (stateProps.activeListId) { - client.listsStatuses(stateProps.activeListId, (tweets) => { - for (let tweet of tweets) { - addTweet(tweet, stateProps.activeAccount, 'lists'); - } - }) - } - } - - const refreshSearchTab = (client) => { - if (stateProps.activeSearchQuery) { - client.searchTweets(stateProps.activeSearchQuery, (tweets) => { - for (let tweet of tweets) { - addTweet(tweet, stateProps.activeAccount, 'search'); - } - }) - } - } - - return { - ...ownProps, - ...stateProps, - onHomeClicked: () => { - let url = `https://twitter.com/${stateProps.activeAccount.screenName}`; - shell.openExternal(url); - }, - onRefreshClicked: () => { - let client = new TwitterClient(stateProps.activeAccount); - let proxy = new TimelineProxy(addTweet, stateProps.activeAccount, true); - - client.homeTimeline((tweets) => { - for (let tweet of tweets) { - proxy.addTweet(tweet); - } - }); - refreshListsTab(client); - refreshSearchTab(client); - }, - } -} - -export default connect(mapStateToProps, null, mergeProps)(Header); diff --git a/src/index.scss b/src/index.scss index ae9a696..790ca37 100644 --- a/src/index.scss +++ b/src/index.scss @@ -2,7 +2,6 @@ @import "bootstrap"; @import "font-awesome"; -$header_height: 46px; $editor_height: 47px; $tabs_height: 28px; $timeline_height: 640px; @@ -32,54 +31,15 @@ body { user-select: none; -webkit-user-select: none; - .header { - position: fixed; - top: 0; - left: 0; - background: linear-gradient(#e0e0e0, #cccbcc); - width: 100%; - height: $header_height; - z-index: 400; - overflow: hidden; - border-bottom: 1px solid #b4b4b4; - box-shadow: 0 1px 2px 1px rgba(0,0,0,0.14); - box-sizing: border-box; - padding: 5px 0 0 8px; - - .button_wrapper { - float: left; - font-size: 11px; - text-align: center; - margin: 0 12px 0 4px; - color: #403638; - } - - .button { - background: #fbfafb; - color: #606060; - font-size: 14px; - width: 38px; - margin: auto; - height: 24px; - padding-top: 4px; - border-radius: 3px; - border-bottom: 1px solid #b5b2b5; - } - - .button:active { - background: #ccc; - } - } - #account_selector { position: absolute; - top: 60px; + top: 14px; left: 16px; } .editor { position: fixed; - top: $header_height; + top: 0; left: 0; background: $white; width: 100%; @@ -136,7 +96,7 @@ body { .tabs { position: fixed; - top: $header_height + $editor_height; + top: $editor_height; left: 0; background: #bbb; width: 100%; @@ -190,19 +150,19 @@ body { .tweets { position: fixed; - top: $header_height + $editor_height + $tabs_height; + top: $editor_height + $tabs_height; left: 0; background: $white; width: 100%; - height: calc(100% - #{$header_height + $editor_height + $tabs_height}); + height: calc(100% - #{$editor_height + $tabs_height}); overflow: scroll; overflow-x: hidden; padding: 0; display: none; &.with_header { - height: calc(100% - #{$header_height + $editor_height + $tabs_height + $tweets_header_height}); - top: $header_height + $editor_height + $tabs_height + $tweets_header_height; + height: calc(100% - #{$editor_height + $tabs_height + $tweets_header_height}); + top: $editor_height + $tabs_height + $tweets_header_height; } &.active { @@ -362,7 +322,7 @@ body { .tweets_header { position: absolute; - top: $header_height + $editor_height + $tabs_height; + top: $editor_height + $tabs_height; width: 100%; height: $tweets_header_height; background: linear-gradient(#efefef, #cccbcc); @@ -402,7 +362,7 @@ body { .timeline_container.darwin { $title_bar_offset: 20px; - $header_height: $header_height + $title_bar_offset; + $header_height: $title_bar_offset; .header { height: $header_height;