From 45e656a9304b6b73b927af94dfb6661d3ef04d37 Mon Sep 17 00:00:00 2001 From: Stefan Natter Date: Sun, 8 Jul 2018 19:58:12 +0200 Subject: [PATCH] UI and Styling Improvements (w/o Drag&Scroll) (#19) --- .../__snapshots__/index.test.js.snap | 287 +++++++++++++++++- .../__tests__/index.test.js | 9 + src/components/app-menu-container/index.js | 35 +-- src/components/board/component.js | 2 + .../__snapshots__/component.test.js.snap | 6 + src/components/boards-list/component.js | 2 +- .../__snapshots__/component.test.js.snap | 26 +- .../main-app/__tests__/component.test.js | 40 +++ src/components/main-app/component.js | 72 +++-- .../__snapshots__/component.test.js.snap | 3 +- src/components/trello-card/component.js | 3 +- src/components/trello-card/iframe.scss | 9 + src/constants/__tests__/constants.js | 15 + src/constants/index.js | 6 + src/styles/main.scss | 12 +- src/styles/scrollbar.scss | 25 ++ 16 files changed, 465 insertions(+), 87 deletions(-) create mode 100644 src/components/trello-card/iframe.scss create mode 100644 src/constants/__tests__/constants.js create mode 100644 src/styles/scrollbar.scss diff --git a/src/components/app-menu-container/__tests__/__snapshots__/index.test.js.snap b/src/components/app-menu-container/__tests__/__snapshots__/index.test.js.snap index 61b27ac..bd17baf 100644 --- a/src/components/app-menu-container/__tests__/__snapshots__/index.test.js.snap +++ b/src/components/app-menu-container/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,283 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Component/AppMenuContainer should render proper withStyles result 1`] = ` + + + +`; + exports[`Component/AppMenuContainer should render without throwing an error 1`] = `
diff --git a/src/components/app-menu-container/__tests__/index.test.js b/src/components/app-menu-container/__tests__/index.test.js index e3ac2e7..0dbddc6 100644 --- a/src/components/app-menu-container/__tests__/index.test.js +++ b/src/components/app-menu-container/__tests__/index.test.js @@ -15,4 +15,13 @@ describe('Component/AppMenuContainer', () => { expect(wrapper.dive()).toMatchSnapshot() expect(wrapper.find(Child).length).toEqual(1) }) + + test('should render proper withStyles result', () => { + const wrapper = shallow( + + + , + ) + expect(wrapper).toMatchSnapshot() + }) }) diff --git a/src/components/app-menu-container/index.js b/src/components/app-menu-container/index.js index 7b64511..3242157 100644 --- a/src/components/app-menu-container/index.js +++ b/src/components/app-menu-container/index.js @@ -18,6 +18,8 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight' import AppMenuContent from './menu' import Config from '../../../config/config' +import { breakpoints } from '../../constants' + const drawerWidth = 240 const styles = theme => ({ @@ -59,9 +61,14 @@ const styles = theme => ({ hide: { display: 'none', }, + drawer: { + backgroundColor: '#fff', + border: '1px solid rgba(0, 0, 0, 0.12)', + }, drawerPaper: { position: 'relative', width: drawerWidth, + borderRight: 0, }, drawerHeader: { display: 'flex', @@ -81,6 +88,10 @@ const styles = theme => ({ }, 'content-left': { marginLeft: -drawerWidth, + padding: 20, + [breakpoints.small]: { + padding: 10, + }, }, contentShift: { transition: theme.transitions.create('margin', { @@ -104,7 +115,6 @@ class AppMenuContainer extends React.Component { super(props) this.state = { open: false, - anchor: 'left', } } @@ -118,14 +128,15 @@ class AppMenuContainer extends React.Component { render() { const { classes, theme } = this.props - const { anchor, open } = this.state + const { open } = this.state const drawer = ( @@ -139,22 +150,13 @@ class AppMenuContainer extends React.Component { ) - let before = null - let after = null - - if (anchor === 'left') { - before = drawer - } else { - after = drawer - } - return (
@@ -171,17 +173,16 @@ class AppMenuContainer extends React.Component { - {before} + {drawer}
{this.props.children}
- {after}
) diff --git a/src/components/board/component.js b/src/components/board/component.js index 058faff..a1d2232 100644 --- a/src/components/board/component.js +++ b/src/components/board/component.js @@ -11,6 +11,8 @@ import TrelloCardsList from '../trello-cards-list' const ThinContainer = styled.div` padding: 5px 0; min-width: 200px; + justify-content: center; + display: flex; ` class Board extends React.Component { diff --git a/src/components/boards-list/__tests__/__snapshots__/component.test.js.snap b/src/components/boards-list/__tests__/__snapshots__/component.test.js.snap index 88abdea..ee2bc9b 100644 --- a/src/components/boards-list/__tests__/__snapshots__/component.test.js.snap +++ b/src/components/boards-list/__tests__/__snapshots__/component.test.js.snap @@ -6,6 +6,12 @@ exports[`Component/BoardsList should render without throwing an error 1`] = ` key="board-1" > board-1 diff --git a/src/components/boards-list/component.js b/src/components/boards-list/component.js index c5229c7..1e98b1c 100644 --- a/src/components/boards-list/component.js +++ b/src/components/boards-list/component.js @@ -41,7 +41,7 @@ const BoardsList = props => { const boardName = getBoardName(get(board, 'board.name', '')) return ( - + {boardName} {renderEstimations(board)} diff --git a/src/components/main-app/__tests__/__snapshots__/component.test.js.snap b/src/components/main-app/__tests__/__snapshots__/component.test.js.snap index 4f57130..c2f4fdb 100644 --- a/src/components/main-app/__tests__/__snapshots__/component.test.js.snap +++ b/src/components/main-app/__tests__/__snapshots__/component.test.js.snap @@ -13,35 +13,13 @@ exports[`Component/MainApp should render without throwing an error 1`] = ` } > - - Options - - - Toggle preferred Members - - - Show Estimations Card - - Refresh Boards + Show Options diff --git a/src/components/main-app/__tests__/component.test.js b/src/components/main-app/__tests__/component.test.js index dd8de2a..a90b56b 100644 --- a/src/components/main-app/__tests__/component.test.js +++ b/src/components/main-app/__tests__/component.test.js @@ -48,6 +48,11 @@ describe('Component/MainApp', () => { expect(wrapper).toMatchSnapshot() }) + test('should have an initial state', () => { + const wrapper = shallow().dive() + expect(wrapper.state()).toEqual({ showEstimationCard: false, showOptions: false }) + }) + test('should show EstimationCard when toggled', () => { const wrapper = shallow().dive() expect(wrapper.find(EstimationCard).length).toEqual(0) @@ -85,8 +90,32 @@ describe('Component/MainApp', () => { expect(props.loadBoards).toHaveBeenCalledTimes(1) }) + test('should change showOptions state when showOptions button was pressed', () => { + const wrapper = shallow().dive() + expect(wrapper.state()).toMatchObject({ showOptions: false }) + + wrapper.find('#showOptions').simulate('click') + expect(wrapper.state()).toMatchObject({ showOptions: true }) + }) + + test('should not show options buttons when state.showOptions is false', () => { + const wrapper = shallow().dive() + expect(wrapper.find('#togglePreferredButton')).toHaveLength(0) + expect(wrapper.find('#showEstimationCard')).toHaveLength(0) + expect(wrapper.find('#doResetButton')).toHaveLength(0) + }) + + test('should show options buttons when state.showOptions is true', () => { + const wrapper = shallow().dive() + wrapper.setState({ showOptions: true }) + expect(wrapper.find('#togglePreferredButton')).toHaveLength(1) + expect(wrapper.find('#showEstimationCard')).toHaveLength(1) + expect(wrapper.find('#doResetButton')).toHaveLength(1) + }) + test('should invoke doTogglePreferred when Toggle Preferred Button was clicked and change togglePreferred', () => { const wrapper = shallow().dive() + wrapper.setState({ showOptions: true }) wrapper.find('#togglePreferredButton').simulate('click') expect(props.doTogglePreferred).toHaveBeenCalledTimes(1) @@ -106,9 +135,20 @@ describe('Component/MainApp', () => { test('should invoke resetBoards when Toggle Refresh Boards Button was clicked', () => { const wrapper = shallow().dive() + wrapper.setState({ showOptions: true }) wrapper.find('#doResetButton').simulate('click') expect(props.reloadBoards).toHaveBeenCalledTimes(1) expect(props.loadPreferredMembers).toHaveBeenCalledTimes(1) }) + + test('should change the state.showEstimationCard when the EstimationCard Button was clicked', () => { + const wrapper = shallow().dive() + expect(wrapper.state()).toMatchObject({ showEstimationCard: false }) + + wrapper.setState({ showOptions: true }) + wrapper.find('#showEstimationCard').simulate('click') + + expect(wrapper.state()).toMatchObject({ showEstimationCard: true }) + }) }) diff --git a/src/components/main-app/component.js b/src/components/main-app/component.js index ea057e2..7c6ee99 100644 --- a/src/components/main-app/component.js +++ b/src/components/main-app/component.js @@ -42,6 +42,7 @@ class MainApp extends React.Component { constructor(props) { super(props) this.state = { + showOptions: false, showEstimationCard: false, } } @@ -84,7 +85,7 @@ class MainApp extends React.Component { } render() { - const { showEstimationCard } = this.state + const { showEstimationCard, showOptions } = this.state const { app, classes, isAppLoading, isLoading } = this.props const togglePreferred = get(app, 'memberToggle.togglePreferred', false) const togglePreferredMember = get(app, 'memberToggle.togglePreferredMember', false) @@ -103,42 +104,53 @@ class MainApp extends React.Component {
- - Options - - - + {showOptions && ( + + + + + + )} diff --git a/src/components/trello-card/__tests__/__snapshots__/component.test.js.snap b/src/components/trello-card/__tests__/__snapshots__/component.test.js.snap index f939e79..0ad5b2c 100644 --- a/src/components/trello-card/__tests__/__snapshots__/component.test.js.snap +++ b/src/components/trello-card/__tests__/__snapshots__/component.test.js.snap @@ -79,7 +79,8 @@ exports[`Component/TrelloCard should render without throwing an error 1`] = ` id="card_id-1" style={ Object { - "display": "block", + "display": "flex", + "justifyContent": "center", } } > diff --git a/src/components/trello-card/component.js b/src/components/trello-card/component.js index 187bab3..41f7daf 100644 --- a/src/components/trello-card/component.js +++ b/src/components/trello-card/component.js @@ -49,7 +49,8 @@ class TrelloCard extends React.Component { id={`card_${card.id}`} className={`card ${this.getMemberClass()}`} style={{ - display: isHidden ? 'none' : 'block', + display: isHidden ? 'none' : 'flex', + justifyContent: 'center', }} > { + test('exports GITHUB_URL', () => { + expect(GITHUB_URL).toEqual('https://github.com/natterstefan/react-trello-multiboard/') + }) + + test('exports breakpoints', () => { + expect(breakpoints).toEqual({ + small: '@media (max-width: 768px)', + medium: '@media (max-width: 1440px)', + large: '@media (min-width: 1441px)', + }) + }) +}) diff --git a/src/constants/index.js b/src/constants/index.js index 39f8afe..6ad2b67 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -1 +1,7 @@ export const GITHUB_URL = 'https://github.com/natterstefan/react-trello-multiboard/' + +export const breakpoints = { + small: '@media (max-width: 768px)', + medium: '@media (max-width: 1440px)', + large: '@media (min-width: 1441px)', +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 41036e0..cbd0a6a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,11 +1,5 @@ -iframe { - /* Trello embed.min.js CSS Hack (2018-04-04) - * - as embed.min.js checks for the visability of the cards and sets the height - * to 0 when they are not visible, we force them to be visible. This allows - * us to display and filter cards at any given time. Otherwise cards would be - * at 0 height and only be visible once loaded (polling done) - */ - min-height: 100%; -} +/** globals **/ +$primary-color: #3f51b5; +@import './scrollbar'; @import '../components/trello-card/styles'; diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss new file mode 100644 index 0000000..16ee6a3 --- /dev/null +++ b/src/styles/scrollbar.scss @@ -0,0 +1,25 @@ +/** Scrollbar + * - https://gist.github.com/natterstefan/d294080bd0dee372cca03a81fa5c25c9 +*/ + +/* Scrollbar */ +::-webkit-scrollbar { + border: 1px solid #d5d5d5; + height: 2px; + width: 5px; +} + +/* Track */ +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: $primary-color; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: #555; +}