From 7be7f8dcc202a653f5982759f9220c00afb64448 Mon Sep 17 00:00:00 2001 From: Yuya Ochiai Date: Wed, 17 May 2017 01:38:03 +0900 Subject: [PATCH] Use css to style UI --- package.json | 2 + src/browser/components/ErrorView.jsx | 41 +---- src/browser/components/HoveringURL.jsx | 3 +- src/browser/components/MainPage.jsx | 25 +-- src/browser/components/NewTeamModal.jsx | 13 +- src/browser/components/TabBar.jsx | 168 +++++++++----------- src/browser/components/TeamListItem.jsx | 11 +- src/browser/css/components/ErrorView.css | 31 +++- src/browser/css/components/HoveringURL.css | 18 +++ src/browser/css/components/MainPage.css | 9 ++ src/browser/css/components/NewTeamModal.css | 4 + src/browser/css/components/TabBar.css | 61 +++++++ src/browser/css/components/TeamListItem.css | 9 ++ src/browser/css/components/index.css | 7 + src/browser/css/index.css | 37 +---- src/browser/css/settings.css | 4 - src/browser/index.html | 1 - src/browser/index.jsx | 2 + webpack.config.renderer.js | 6 + 19 files changed, 234 insertions(+), 218 deletions(-) create mode 100644 src/browser/css/components/HoveringURL.css create mode 100644 src/browser/css/components/MainPage.css create mode 100644 src/browser/css/components/NewTeamModal.css create mode 100644 src/browser/css/components/TabBar.css create mode 100644 src/browser/css/components/TeamListItem.css create mode 100644 src/browser/css/components/index.css diff --git a/package.json b/package.json index 869423ae..84136bc7 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "babel-preset-react": "^6.24.1", "chai": "^3.5.0", "cross-env": "^4.0.0", + "css-loader": "^0.28.1", "devtron": "^1.4.0", "electron": "1.6.6", "electron-builder": "17.4.0", @@ -56,6 +57,7 @@ "mocha-circleci-reporter": "0.0.2", "npm-run-all": "^4.0.2", "spectron": "~3.6.2", + "style-loader": "^0.17.0", "url-loader": "^0.5.8", "webpack": "^2.5.1", "webpack-dev-server": "^2.4.5", diff --git a/src/browser/components/ErrorView.jsx b/src/browser/components/ErrorView.jsx index cde8bd04..631f7784 100644 --- a/src/browser/components/ErrorView.jsx +++ b/src/browser/components/ErrorView.jsx @@ -4,48 +4,21 @@ const React = require('react'); const PropTypes = require('prop-types'); const {Grid, Row, Col} = require('react-bootstrap'); -const errorPage = { - tableStyle: { - display: 'table', - width: '100%', - height: '100%', - position: 'absolute', - top: '0', - left: '0' - }, - - cellStyle: { - display: 'table-cell', - verticalAlign: 'top', - paddingTop: '2em' - }, - - bullets: { - paddingLeft: '15px', - lineHeight: '1.7' - }, - - techInfo: { - fontSize: '12px', - color: '#aaa' - } -}; - function ErrorView(props) { - const classNames = ['container', 'errorView']; + const classNames = ['container', 'ErrorView']; if (!props.active) { - classNames.push('errorView-hidden'); + classNames.push('ErrorView-hidden'); } if (props.withTab) { - classNames.push('errorView-with-tab'); + classNames.push('ErrorView-with-tab'); } return ( -
-
+
+

{'We\'re having trouble connecting to Mattermost. If refreshing this page (Ctrl+R or Command+R) does not work please verify that:'}


-
    +
    -
    +
    {props.errorInfo.errorDescription}{' ('} {props.errorInfo.errorCode }{')'}
    diff --git a/src/browser/components/HoveringURL.jsx b/src/browser/components/HoveringURL.jsx index adfa87a7..c0dd7df4 100644 --- a/src/browser/components/HoveringURL.jsx +++ b/src/browser/components/HoveringURL.jsx @@ -3,14 +3,13 @@ const PropTypes = require('prop-types'); function HoveringURL(props) { return ( -
    +
    {props.targetURL}
    ); } HoveringURL.propTypes = { - style: PropTypes.object, targetURL: PropTypes.string }; diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx index 35d4a6ff..b21bb2fb 100644 --- a/src/browser/components/MainPage.jsx +++ b/src/browser/components/MainPage.jsx @@ -14,28 +14,6 @@ const HoveringURL = require('./HoveringURL.jsx'); const NewTeamModal = require('./NewTeamModal.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 = createReactClass({ propTypes: { onUnreadCountChange: PropTypes.func.isRequired, @@ -313,7 +291,7 @@ const MainPage = createReactClass({ /> ); return ( -
    +
    } diff --git a/src/browser/components/NewTeamModal.jsx b/src/browser/components/NewTeamModal.jsx index 24883880..4fc3d482 100644 --- a/src/browser/components/NewTeamModal.jsx +++ b/src/browser/components/NewTeamModal.jsx @@ -105,11 +105,6 @@ class NewTeamModal extends React.Component { } render() { - const noBottomSpaceing = { - paddingBottom: 0, - marginBottom: 0 - }; - if (this.wasShown !== this.props.show && this.props.show) { this.initializeOnShow(); } @@ -117,6 +112,8 @@ class NewTeamModal extends React.Component { return ( {'The name of the server displayed on your desktop app tab bar.'} {'Server URL'} - {'The URL of your Mattermost server. Must start with http:// or https://.'} + {'The URL of your Mattermost server. Must start with http:// or https://.'} diff --git a/src/browser/components/TabBar.jsx b/src/browser/components/TabBar.jsx index f59c0b53..87f6be29 100644 --- a/src/browser/components/TabBar.jsx +++ b/src/browser/components/TabBar.jsx @@ -2,61 +2,56 @@ const React = require('react'); const PropTypes = require('prop-types'); const {Nav, NavItem, Button} = require('react-bootstrap'); -class TabBar extends React.Component { - render() { - var self = this; - var tabs = this.props.teams.map((team, index) => { - var unreadCount = 0; - var badgeStyle = { - background: '#FF1744', - float: 'right', - color: 'white', - minWidth: '19px', - fontSize: '12px', - textAlign: 'center', - lineHeight: '20px', - height: '19px', - marginLeft: '5px', - marginTop: '5px', - borderRadius: '50%' - }; +function AddServerButton(props) { + return ( + + + + ); +} - if (self.props.unreadCounts[index] > 0) { - unreadCount = self.props.unreadCounts[index]; - } - if (self.props.unreadAtActive[index]) { - unreadCount += 1; - } +AddServerButton.propTypes = { + onClick: PropTypes.func +}; - var mentionCount = 0; - if (self.props.mentionCounts[index] > 0) { - mentionCount = self.props.mentionCounts[index]; - } - if (self.props.mentionAtActiveCounts[index] > 0) { - mentionCount += self.props.mentionAtActiveCounts[index]; - } +function TabBar(props) { + const tabs = props.teams.map((team, index) => { + let unreadCount = 0; + if (props.unreadCounts[index] > 0) { + unreadCount = props.unreadCounts[index]; + } + if (props.unreadAtActive[index]) { + unreadCount += 1; + } - var badgeDiv; - if (mentionCount !== 0) { - badgeDiv = ( -
    - {mentionCount} -
    ); - } - var id = 'teamTabItem' + index; - if (unreadCount === 0) { - return ( - - { team.name } - { ' ' } - { badgeDiv } - ); - } + let mentionCount = 0; + if (props.mentionCounts[index] > 0) { + mentionCount = props.mentionCounts[index]; + } + if (props.mentionAtActiveCounts[index] > 0) { + mentionCount += props.mentionAtActiveCounts[index]; + } + + let badgeDiv; + if (mentionCount !== 0) { + badgeDiv = ( +
    + {mentionCount} +
    ); + } + const id = 'teamTabItem' + index; + if (unreadCount === 0) { return ( - { team.name } + { team.name } { ' ' } { badgeDiv } ); - }); - return ( - - ); - } - - renderAddTeamButton() { - var tabButton = { - border: 'none', - fontSize: '20px', - height: '31px', - padding: '2px 0 0 0', - width: '40px', - color: '#999', - fontWeight: 'bold', - margin: '0', - borderRadius: '2px 2px 0 0', - outline: 'none' - }; - + } return ( - - - ); - } + { team.name } + { ' ' } + { badgeDiv } + ); + }); + return ( + + ); } TabBar.propTypes = { @@ -121,6 +95,8 @@ TabBar.propTypes = { id: PropTypes.string, onSelect: PropTypes.func, teams: PropTypes.array, + mentionCounts: PropTypes.array, + mentionAtActiveCounts: PropTypes.array, onAddServer: PropTypes.func }; diff --git a/src/browser/components/TeamListItem.jsx b/src/browser/components/TeamListItem.jsx index bb73cccc..2ea72a7a 100644 --- a/src/browser/components/TeamListItem.jsx +++ b/src/browser/components/TeamListItem.jsx @@ -15,17 +15,10 @@ class TeamListItem extends React.Component { this.props.onTeamEditing(); } render() { - var style = { - left: { - display: 'inline-block', - width: 'calc(100% - 100px)', - cursor: 'pointer' - } - }; return ( -
    +

    { this.props.name }

    diff --git a/src/browser/css/components/ErrorView.css b/src/browser/css/components/ErrorView.css index 8a11f1e1..9a51706d 100644 --- a/src/browser/css/components/ErrorView.css +++ b/src/browser/css/components/ErrorView.css @@ -1,4 +1,4 @@ -.errorView { +.ErrorView { position: absolute; top: 0px; right: 0px; @@ -6,10 +6,35 @@ left: 0px; } -.errorView-with-tab { +.ErrorView-with-tab { top: 32px; } -.errorView-hidden { +.ErrorView-hidden { visibility: hidden; } + +.ErrorView-tableStyle { + display: table; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} + +.ErrorView-cellStyle { + display: table-cell; + vertical-align: top; + padding-top: 2em; +} + +.ErrorView-bullets { + padding-left: 15px; + line-height: 1.7; +} + +.ErrorView-techInfo { + font-size: 12px; + color: #aaa; +} diff --git a/src/browser/css/components/HoveringURL.css b/src/browser/css/components/HoveringURL.css new file mode 100644 index 00000000..947e0af3 --- /dev/null +++ b/src/browser/css/components/HoveringURL.css @@ -0,0 +1,18 @@ +.HoveringURL { + color: gray; + background-color: whitesmoke; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-left: 4px; + padding-right: 16px; + padding-top: 2px; + padding-bottom: 2px; + border-top: solid thin lightgray; + pointer-events: none; +} + +.HoveringURL-left { + border-top-right-radius: 4px; + border-right: solid thin lightgray; +} diff --git a/src/browser/css/components/MainPage.css b/src/browser/css/components/MainPage.css new file mode 100644 index 00000000..2c6ec16e --- /dev/null +++ b/src/browser/css/components/MainPage.css @@ -0,0 +1,9 @@ +/*.mainPage,.mainPage > .container-fluid, .mainPage-viewsRow { + height: 100%; +}*/ + +.MainPage .HoveringURL { + max-width: 95%; + position: absolute; + bottom: 0px; +} diff --git a/src/browser/css/components/NewTeamModal.css b/src/browser/css/components/NewTeamModal.css new file mode 100644 index 00000000..dcd4c6bd --- /dev/null +++ b/src/browser/css/components/NewTeamModal.css @@ -0,0 +1,4 @@ +.NewTeamModal-noBottomSpace { + padding-bottom: 0px; + margin-bottom: 0px; +} diff --git a/src/browser/css/components/TabBar.css b/src/browser/css/components/TabBar.css new file mode 100644 index 00000000..ac967a7b --- /dev/null +++ b/src/browser/css/components/TabBar.css @@ -0,0 +1,61 @@ +.TabBar>li>a { + background: rgba(0, 0, 0, 0.05); + border-radius: 2px 2px 0 0; + border: 1px solid #ddd; + color: #888; + height: 31px; + line-height: 29px; + margin-right: -1px; + margin-top: 0px; + padding: 0 15px; +} + +.TabBar .AddServerButton>a { + border: none; + background: transparent; + margin: 0px; + margin-left: 1px; /*Has no border and would be placed above the last item's border due to it's margin-right: -1px */ + padding: 0; + margin-bottom: 1px; +} + +.TabBar .TabBar-badge { + background: #FF1744; + float: right; + color: white; + min-width: 19px; + font-size: 12px; + text-align: center; + line-height: 20px; + height: 19px; + margin-left: 5px; + margin-top: 5px; + border-radius: 50%; +}; + + +.TabBar .AddServerButton-button { + background-color: #fff; + border-color: #ccc; + color: #333; + margin-top: 3px; +} + +.TabBar .AddServerButton-button { + border: none; + font-size: 20px; + height: 31px; + padding: 2px 0 0 0; + width: 40px; + color: #999; + font-weight: bold; + margin: 0; + border-radius: 2px 2px 0 0; + outline: none; +} + +.TabBar .AddServerButton-button:hover { + color: #333; + background-color: #e6e6e6; + border-color: #adadad; +} diff --git a/src/browser/css/components/TeamListItem.css b/src/browser/css/components/TeamListItem.css new file mode 100644 index 00000000..28b9449c --- /dev/null +++ b/src/browser/css/components/TeamListItem.css @@ -0,0 +1,9 @@ +.TeamListItem:hover { + background: #eee; +} + +.TeamListItem-left { + display: inline-block; + width: calc(100% - 100px); + cursor: pointer; +} diff --git a/src/browser/css/components/index.css b/src/browser/css/components/index.css new file mode 100644 index 00000000..b8a24d01 --- /dev/null +++ b/src/browser/css/components/index.css @@ -0,0 +1,7 @@ +@import url("ErrorView.css"); +@import url("HoveringURL.css"); +@import url("MainPage.css"); +@import url("MattermostView.css"); +@import url("NewTeamModal.css"); +@import url("TabBar.css"); +@import url("TeamListItem.css"); diff --git a/src/browser/css/index.css b/src/browser/css/index.css index b9dd5c5a..dbc1b374 100644 --- a/src/browser/css/index.css +++ b/src/browser/css/index.css @@ -1,5 +1,4 @@ -@import url("components/MattermostView.css"); -@import url("components/ErrorView.css"); +@import url("components/index.css"); .hovering-enter { opacity: 0.01; @@ -19,40 +18,6 @@ transition: opacity 500ms ease-in-out; } -.btn-tabButton { - background-color: #fff; - border-color: #ccc; - color: #333; - margin-top: 3px; -} - -.btn-tabButton:hover { - color: #333; - background-color: #e6e6e6; - border-color: #adadad; -} - -.nav-tabs>li>a { - background: rgba(0, 0, 0, 0.05); - border-radius: 2px 2px 0 0; - border: 1px solid #ddd; - color: #888; - height: 31px; - line-height: 29px; - margin-right: -1px; - margin-top: 0px; - padding: 0 15px; -} - -.nav-tabs>li.buttonTab>a { - border: none; - background: transparent; - margin: 0px; - margin-left: 1px; /*Has no border and would be placed above the last item's border due to it's margin-right: -1px */ - padding: 0; - margin-bottom: 1px; -} - .has-error .control-label, .has-error .help-block { color: #333; diff --git a/src/browser/css/settings.css b/src/browser/css/settings.css index e64b4d54..0d5a3b65 100644 --- a/src/browser/css/settings.css +++ b/src/browser/css/settings.css @@ -1,8 +1,4 @@ -.teamListItem:hover { - background: #eee; -} - .IndicatorContainer { position: absolute; height: 100%; diff --git a/src/browser/index.html b/src/browser/index.html index 85cdb400..5ef4de78 100644 --- a/src/browser/index.html +++ b/src/browser/index.html @@ -4,7 +4,6 @@ - diff --git a/src/browser/index.jsx b/src/browser/index.jsx index c702f2ec..b31b1dad 100644 --- a/src/browser/index.jsx +++ b/src/browser/index.jsx @@ -1,5 +1,7 @@ 'use strict'; +require('./css/index.css'); + window.eval = global.eval = () => { throw new Error('Sorry, Mattermost does not support window.eval() for security reasons.'); }; diff --git a/webpack.config.renderer.js b/webpack.config.renderer.js index 35a9abe9..0b920b96 100644 --- a/webpack.config.renderer.js +++ b/webpack.config.renderer.js @@ -25,6 +25,12 @@ module.exports = merge(base, { plugins: ['transform-object-rest-spread'] } } + }, { + test: /\.css$/, + use: [ + {loader: 'style-loader'}, + {loader: 'css-loader'} + ] }, { test: /\.mp3$/, use: {