From cf9341b63a9591047f75d296eda9c6ce24d80c96 Mon Sep 17 00:00:00 2001 From: John Tran Date: Sat, 28 Jul 2018 17:37:39 -0700 Subject: [PATCH 01/21] falcon-ui: Fixed styling import issue --- app/components/Header.js | 4 +++- packages/falcon-ui/src/components/Button.js | 14 +------------- packages/falcon-ui/src/components/Button.scss | 0 packages/falcon-ui/src/styles/Button.scss | 6 +++++- packages/falcon-ui/src/styles/app.global.scss | 1 + 5 files changed, 10 insertions(+), 15 deletions(-) delete mode 100644 packages/falcon-ui/src/components/Button.scss diff --git a/app/components/Header.js b/app/components/Header.js index bf5b9d7..bd25726 100644 --- a/app/components/Header.js +++ b/app/components/Header.js @@ -1,7 +1,8 @@ // @flow import React, { Component } from 'react'; import NProgress from 'nprogress'; -import { Button, Tab } from '@falcon-client/falcon-ui'; +import '@falcon-client/falcon-ui/src/styles/app.global.scss'; +import { Button } from '@falcon-client/falcon-ui'; import ListSymbol from './ListSymbol'; type Props = { @@ -50,6 +51,7 @@ export default class Header extends Component { return (
+
+ ); diff --git a/packages/falcon-ui/src/components/Button.scss b/packages/falcon-ui/src/components/Button.scss deleted file mode 100644 index e69de29..0000000 diff --git a/packages/falcon-ui/src/styles/Button.scss b/packages/falcon-ui/src/styles/Button.scss index 1bb5910..31a506c 100644 --- a/packages/falcon-ui/src/styles/Button.scss +++ b/packages/falcon-ui/src/styles/Button.scss @@ -1,7 +1,11 @@ .Button { - border-radius: 10px; cursor: pointer; + color: #fff; + background-color: #6c757d; + border: 1px solid #6c757d; + border-radius: 10px; + padding: 6px; .Button--border { border: 2px solid gray; } diff --git a/packages/falcon-ui/src/styles/app.global.scss b/packages/falcon-ui/src/styles/app.global.scss index baed055..027046b 100644 --- a/packages/falcon-ui/src/styles/app.global.scss +++ b/packages/falcon-ui/src/styles/app.global.scss @@ -32,6 +32,7 @@ $gray-lightest: white !default; // @import "./Header.scss"; +@import "./Button.scss"; @import "./Tabs.scss"; @import "./Grid.scss"; @import "./Sidebar.scss"; From 4638657a07fbef26970d33b03fe61086a68e936e Mon Sep 17 00:00:00 2001 From: John Tran Date: Sat, 28 Jul 2018 17:38:00 -0700 Subject: [PATCH 02/21] falcon-ui: Added styling scripts --- packages/falcon-ui/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/falcon-ui/package.json b/packages/falcon-ui/package.json index 895c00f..7820eb6 100644 --- a/packages/falcon-ui/package.json +++ b/packages/falcon-ui/package.json @@ -9,7 +9,9 @@ "build": "cross-env NODE_ENV=production rm -rf es && babel -d es/ src/ --source-maps", "example": "parcel test/index.html --open", "test": "yarn build", - "watch": "cross-env NODE_ENV=development babel --out-dir es src --source-maps --watch" + "watch": "cross-env NODE_ENV=development babel --out-dir es src --source-maps --watch", + "lint-fix": "yarn --silent lint --fix; exit 0", + "postlint-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.js'" }, "devDependencies": { "react": "^16.4.1", From be46ff3da08fea1104dd7b0a1759bf8d6427aad8 Mon Sep 17 00:00:00 2001 From: John Tran Date: Sun, 5 Aug 2018 15:58:00 -0700 Subject: [PATCH 03/21] falcon-ui: Changed e2e-data test tag For use in component library since JS variables can't have hyphens --- app/components/Header.js | 4 +-- app/components/Login.js | 10 ++++---- packages/falcon-ui/src/components/Button.js | 14 +++++------ test/e2e/Connections.e2e.js | 28 ++++++++++----------- test/e2e/Login.e2e.js | 2 +- test/e2e/helpers.js | 10 ++++---- 6 files changed, 34 insertions(+), 34 deletions(-) diff --git a/app/components/Header.js b/app/components/Header.js index bd25726..9f2b59f 100644 --- a/app/components/Header.js +++ b/app/components/Header.js @@ -82,12 +82,12 @@ export default class Header extends Component {
this.props.onRefreshClick()} />
this.props.history.push('/login')} />
diff --git a/app/components/Login.js b/app/components/Login.js index b42c631..2fd0a7b 100644 --- a/app/components/Login.js +++ b/app/components/Login.js @@ -78,13 +78,13 @@ class Login extends Component { const { errorMessages, connectionName, databasePath } = this.state; return (
-
+

Create Connection

{errorMessages.map(e => (
{e.message} @@ -99,7 +99,7 @@ class Login extends Component { placeholder="My first connection" value={connectionName} type="text" - data-e2e="create-connection-name" + e2eData="create-connection-name" onChange={e => this.setState({ connectionName: e.target.value }) } @@ -110,7 +110,7 @@ class Login extends Component { this.setState({ databasePath: e.target.value })} />
@@ -123,7 +123,7 @@ class Login extends Component {
this.handleConnect()} - data-e2e="create-connection-submit" + e2eData="create-connection-submit" > Connect
diff --git a/packages/falcon-ui/src/components/Button.js b/packages/falcon-ui/src/components/Button.js index 28388dd..46659d7 100644 --- a/packages/falcon-ui/src/components/Button.js +++ b/packages/falcon-ui/src/components/Button.js @@ -1,24 +1,24 @@ import * as React from 'react'; type Props = { - color: string, - disabled: boolean, - onClick: ?Function, + disabled: ?boolean, className: ?string, style: ?Object, - children: ?[React.Node] + children: ?[React.Node], + onClick: ?Function, + e2eData: ?string }; Button.defaultProps = { - color: '#fff', disabled: false }; export default function Button(props: Props) { - const { disabled, className, style, children } = props; + const { disabled, className, style, children, onClick, e2eData} = props; + return ( - ); diff --git a/test/e2e/Connections.e2e.js b/test/e2e/Connections.e2e.js index 8490874..4f8cac5 100644 --- a/test/e2e/Connections.e2e.js +++ b/test/e2e/Connections.e2e.js @@ -8,7 +8,7 @@ fixture`Connections`.page('../../app/app.html').beforeEach(async () => { }); const loginErrorMessageElement = Selector( - '[data-e2e="login-error-message-box"]' + '[e2eData="login-error-message-box"]' ); async function assertErrorMessagesExists(t, errorMessages) { @@ -25,14 +25,14 @@ function createNewBadConnection( databaseName = path.join(__dirname, 'badSqliteFile.db') ) { return t - .click('[data-e2e="header-create-new-connection-button"]') + .click('[e2eData="header-create-new-connection-button"]') .expect(getPageUrl()) .contains('/login') - .expect(Selector('[data-e2e="login-container"]').visible) + .expect(Selector('[e2eData="login-container"]').visible) .ok() - .typeText('[data-e2e="create-connection-name"]', connectionName) - .typeText('[data-e2e="create-connection-database-name"]', databaseName) - .click('[data-e2e="create-connection-submit"]'); + .typeText('[e2eData="create-connection-name"]', connectionName) + .typeText('[e2eData="create-connection-database-name"]', databaseName) + .click('[e2eData="create-connection-submit"]'); } test('it should open "demo.sqlite"', async t => { @@ -72,16 +72,16 @@ test('it should not handle bad sqlite files', async t => { test('it should not create connection without connection name', async t => { await t - .click('[data-e2e="header-create-new-connection-button"]') + .click('[e2eData="header-create-new-connection-button"]') .expect(getPageUrl()) .contains('/login') - .expect(Selector('[data-e2e="login-container"]').visible) + .expect(Selector('[e2eData="login-container"]').visible) .ok() .typeText( - '[data-e2e="create-connection-database-name"]', + '[e2eData="create-connection-database-name"]', path.join(__dirname, 'oracle-sample.db') ) - .click('[data-e2e="create-connection-submit"]') + .click('[e2eData="create-connection-submit"]') .expect(getPageUrl()) .contains('/login'); await assertErrorMessagesExists(t, ['"name" is not allowed to be empty']); @@ -89,13 +89,13 @@ test('it should not create connection without connection name', async t => { test('it should not create connection without database name', async t => { await t - .click('[data-e2e="header-create-new-connection-button"]') + .click('[e2eData="header-create-new-connection-button"]') .expect(getPageUrl()) .contains('/login') - .expect(Selector('[data-e2e="login-container"]').visible) + .expect(Selector('[e2eData="login-container"]').visible) .ok() - .typeText('[data-e2e="create-connection-name"]', 'Test Connection Name') - .click('[data-e2e="create-connection-submit"]') + .typeText('[e2eData="create-connection-name"]', 'Test Connection Name') + .click('[e2eData="create-connection-submit"]') .expect(getPageUrl()) .contains('/login'); await assertErrorMessagesExists(t, [ diff --git a/test/e2e/Login.e2e.js b/test/e2e/Login.e2e.js index 0d4836f..7a720a7 100644 --- a/test/e2e/Login.e2e.js +++ b/test/e2e/Login.e2e.js @@ -55,6 +55,6 @@ test('it should load graph page', async t => { test('it should refresh connection', async t => { const url = await getPageUrl(); - await t.click('[data-e2e="header-connection-refresh-button"]'); + await t.click('[e2eData="header-connection-refresh-button"]'); await t.expect(url).eql(await getPageUrl()); }); diff --git a/test/e2e/helpers.js b/test/e2e/helpers.js index c1876bb..f8f1f8a 100644 --- a/test/e2e/helpers.js +++ b/test/e2e/helpers.js @@ -27,14 +27,14 @@ export function createNewConnection( databaseName = path.join(__dirname, 'temp.sqlite') ) { return t - .click('[data-e2e="header-create-new-connection-button"]') + .click('[e2eData="header-create-new-connection-button"]') .expect(getPageUrl()) .contains('/login') - .expect(Selector('[data-e2e="login-container"]').visible) + .expect(Selector('[e2eData="login-container"]').visible) .ok() - .typeText('[data-e2e="create-connection-name"]', connectionName) - .typeText('[data-e2e="create-connection-database-name"]', databaseName) - .click('[data-e2e="create-connection-submit"]') + .typeText('[e2eData="create-connection-name"]', connectionName) + .typeText('[e2eData="create-connection-database-name"]', databaseName) + .click('[e2eData="create-connection-submit"]') .click( Selector('a') .withExactText(connectionName) From 5d575315e56b683eb3c0cdb6c79f07123c492342 Mon Sep 17 00:00:00 2001 From: John Tran Date: Mon, 6 Aug 2018 19:33:44 -0700 Subject: [PATCH 04/21] falcon-ui: Replaced buttons with falcon-ui Replaced instances of
{
-
this.props.onRefreshClick()} /> -
this.props.history.push('/login')} diff --git a/app/components/Login.js b/app/components/Login.js index 2fd0a7b..bff13f8 100644 --- a/app/components/Login.js +++ b/app/components/Login.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { remote, ipcRenderer } from 'electron'; import { connect } from 'react-redux'; +import { Button } from '@falcon-client/falcon-ui'; import { OPEN_FILE_CHANNEL } from '../types/channels'; import { setDatabasePath } from '../actions/index'; @@ -115,9 +116,9 @@ class Login extends Component { />
- +
{
- +
Auto Run diff --git a/app/styles/Button.scss b/app/styles/Button.scss deleted file mode 100644 index 1bb5910..0000000 --- a/app/styles/Button.scss +++ /dev/null @@ -1,8 +0,0 @@ -.Button { - border-radius: 10px; - cursor: pointer; - - .Button--border { - border: 2px solid gray; - } -} diff --git a/packages/falcon-ui/src/components/Button.js b/packages/falcon-ui/src/components/Button.js index 46659d7..4d2d246 100644 --- a/packages/falcon-ui/src/components/Button.js +++ b/packages/falcon-ui/src/components/Button.js @@ -18,7 +18,7 @@ export default function Button(props: Props) { return ( - ); From 3f22c2973022f689e0277d0c8750e848ebfe86dd Mon Sep 17 00:00:00 2001 From: John Tran Date: Thu, 9 Aug 2018 19:29:56 -0700 Subject: [PATCH 05/21] falcon-app: Moved falcon-ui scss import Moved import statement from Header.js to index.js --- app/components/Header.js | 1 - app/index.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/Header.js b/app/components/Header.js index 49d0dee..0ab267f 100644 --- a/app/components/Header.js +++ b/app/components/Header.js @@ -1,7 +1,6 @@ // @flow import React, { Component } from 'react'; import NProgress from 'nprogress'; -import '@falcon-client/falcon-ui/src/styles/app.global.scss'; import { Button } from '@falcon-client/falcon-ui'; import ListSymbol from './ListSymbol'; diff --git a/app/index.js b/app/index.js index dc0fb85..dcd60ae 100644 --- a/app/index.js +++ b/app/index.js @@ -4,6 +4,7 @@ import { AppContainer } from 'react-hot-loader'; import Root from './containers/Root'; import { configureStore, history } from './store/configureStore'; import './styles/app.global.scss'; +import '@falcon-client/falcon-ui/src/styles/app.global.scss'; const store = configureStore(); From 8ad46945b9d9497b5ade2160313e7bd7fa86c388 Mon Sep 17 00:00:00 2001 From: John Tran Date: Sat, 11 Aug 2018 16:20:41 -0700 Subject: [PATCH 06/21] falcon-ui: Moved Tabs into falcon-ui --- app/components/Login.js | 5 +- app/styles/Tabs.scss | 159 ------------------ app/styles/app.global.scss | 62 +++---- packages/falcon-ui/src/components/Tab.js | 5 - .../falcon-ui/src}/components/Tabs.js | 0 packages/falcon-ui/src/index.js | 2 +- 6 files changed, 35 insertions(+), 198 deletions(-) delete mode 100644 app/styles/Tabs.scss delete mode 100644 packages/falcon-ui/src/components/Tab.js rename {app => packages/falcon-ui/src}/components/Tabs.js (100%) diff --git a/app/components/Login.js b/app/components/Login.js index bff13f8..3c4c1e2 100644 --- a/app/components/Login.js +++ b/app/components/Login.js @@ -84,10 +84,7 @@ class Login extends Component {

Create Connection

{errorMessages.map(e => ( -
+
{e.message}
))} diff --git a/app/styles/Tabs.scss b/app/styles/Tabs.scss deleted file mode 100644 index f32a5e4..0000000 --- a/app/styles/Tabs.scss +++ /dev/null @@ -1,159 +0,0 @@ -.chrome-tabs { - box-sizing: border-box; - position: relative; - font-size: 10px; - height: 3.2em; - background: linear-gradient(#dad9da, #d9d8d9); - border-radius: 0.5em 0.5em 0 0; - box-shadow: 0 0.05em #b7b7b7; - overflow: hidden; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; -} -.chrome-tabs * { - box-sizing: inherit; - font-family: inherit; -} -.chrome-tabs .chrome-tabs-bottom-bar { - position: absolute; - bottom: 0; - height: 0.45em; - left: 0; - width: 100%; - background: #f2f2f2; - box-shadow: 0 -0.05em rgba(0,0,0,0.27); - z-index: 20; -} -.chrome-tabs .chrome-tabs-content { - position: relative; - width: 100%; - height: 100%; - overflow: hidden; -} -.chrome-tabs .chrome-tab { - position: absolute; - left: 0; - height: 2.8em; - width: 24em; - border: 0; - margin: 0; - z-index: 1; -} -.chrome-tabs .chrome-tab, -.chrome-tabs .chrome-tab * { - user-select: none; - cursor: default; -} -.chrome-tabs .chrome-tab .chrome-tab-background { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden; - pointer-events: none; -} -.chrome-tabs .chrome-tab .chrome-tab-background { - width: 100%; - height: 100%; - border: 1px solid #d2d2d2; -} -.chrome-tabs .chrome-tab .chrome-tab-background .chrome-tab-shadow { - fill: none; - stroke: rgba(0,0,0,0.27); - stroke-width: 0.5px; -} -.chrome-tabs .chrome-tab .chrome-tab-background .chrome-tab-background { - fill: red; - transform: translateX(0.25px) translateY(0.25px); -} -.chrome-tabs .chrome-tab.chrome-tab-current { - z-index: 999; - background: #c3c3c3; -} -.chrome-tabs .chrome-tab.chrome-tab-current .chrome-tab-background .chrome-tab-background { - fill: red; -} -.chrome-tabs .chrome-tab.chrome-tab-just-added { - top: 10px; - animation: chrome-tab-just-added 120ms forwards ease-in-out; -} -@-moz-keyframes chrome-tab-just-added { - to { - top: 0; - } -} -@-webkit-keyframes chrome-tab-just-added { - to { - top: 0; - } -} -@-o-keyframes chrome-tab-just-added { - to { - top: 0; - } -} -@keyframes chrome-tab-just-added { - to { - top: 0; - } -} -.chrome-tabs.chrome-tabs-sorting .chrome-tab:not(.chrome-tab-currently-dragged), -.chrome-tabs:not(.chrome-tabs-sorting) .chrome-tab.chrome-tab-just-dragged { - transition: transform 120ms ease-in-out; -} -.chrome-tabs .chrome-tab-favicon { - position: relative; - margin-left: 1.6em; - height: 1.6em; - width: 1.6em; - background-size: 1.6em; - margin-top: 0.6em; - z-index: 3; - display: inline-block; - vertical-align: top; - pointer-events: none; -} -.chrome-tabs .chrome-tab-title { - position: relative; - display: inline-block; - vertical-align: top; - color: #222; - padding: 0 0.25em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 1.2em; - margin-top: 0.5em; - max-width: calc(100% - 5em); - pointer-events: none; - width: 100%; - text-align: center; -} -.chrome-tabs .chrome-tab-close { - position: absolute; - width: 1.4em; - height: 1.4em; - border-radius: 50%; - z-index: 2; - right: 1.4em; - top: 0.7em; -} -.chrome-tabs .chrome-tab-close::before { - content: url("data:image/svg+xml;utf8,"); - position: absolute; - display: block; - top: 0; - right: 0; - bottom: 0; - left: 0; -} -.chrome-tabs .chrome-tab-close:hover::before, -.chrome-tabs .chrome-tab-close:hover:active::before { - content: url("data:image/svg+xml;utf8,"); -} -.chrome-tabs .chrome-tab-close:hover { - background: #e25c4b; -} -.chrome-tabs .chrome-tab-close:hover:active { - background: #b74a3b; -} diff --git a/app/styles/app.global.scss b/app/styles/app.global.scss index 864cd54..366cb4a 100644 --- a/app/styles/app.global.scss +++ b/app/styles/app.global.scss @@ -2,24 +2,28 @@ // 3rd Party Libraries // -$font-family-sans-serif: "Avenir Next", Avenir, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif; -$font-family-serif: "Avenir Next", Avenir, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif; -$font-family-monospace: "Avenir Next", Avenir, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif; -$font-family-base: "Avenir Next", Avenir, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif; +$font-family-sans-serif: 'Avenir Next', Avenir, 'Segoe UI', Roboto, + 'Helvetica Neue', Helvetica, sans-serif; +$font-family-serif: 'Avenir Next', Avenir, 'Segoe UI', Roboto, 'Helvetica Neue', + Helvetica, sans-serif; +$font-family-monospace: 'Avenir Next', Avenir, 'Segoe UI', Roboto, + 'Helvetica Neue', Helvetica, sans-serif; +$font-family-base: 'Avenir Next', Avenir, 'Segoe UI', Roboto, 'Helvetica Neue', + Helvetica, sans-serif; $headings-font-family: $font-family-base; // Create grayscale -$gray-dark: #767676 !default; -$gray: gray !default; -$gray-light: #F4F4F4 !default; -$gray-lighter: white !default; -$gray-lightest: white !default; +$gray-dark: #767676 !default; +$gray: gray !default; +$gray-light: #f4f4f4 !default; +$gray-lighter: white !default; +$gray-lightest: white !default; -@import "~bootstrap/scss/bootstrap-grid.scss"; -@import "~ionicons-temp/scss/ionicons.scss"; -@import "~nprogress/nprogress.css"; -@import "~react-table/react-table.css"; -@import "../../packages/graphql-voyager/styles.css"; +@import '~bootstrap/scss/bootstrap-grid.scss'; +@import '~ionicons-temp/scss/ionicons.scss'; +@import '~nprogress/nprogress.css'; +@import '~react-table/react-table.css'; +@import '../../packages/graphql-voyager/styles.css'; .Select-menu-outer { position: relative; @@ -30,26 +34,26 @@ $gray-lightest: white !default; // Custom Compoments // -@import "./Header.scss"; -@import "./Tabs.scss"; -@import "./Grid.scss"; -@import "./Sidebar.scss"; -@import "./Footer.scss"; -@import "./Structure.scss"; -@import "./Login.scss"; -@import "./ListSymbol.scss"; -@import "./VirtualList.scss"; -@import "./QueryPage.scss"; -@import "./HomePage.scss"; -@import "./Table.scss"; -@import "./Graph.scss"; +@import './Header.scss'; +@import './Grid.scss'; +@import './Sidebar.scss'; +@import './Footer.scss'; +@import './Structure.scss'; +@import './Login.scss'; +@import './ListSymbol.scss'; +@import './VirtualList.scss'; +@import './QueryPage.scss'; +@import './HomePage.scss'; +@import './Table.scss'; +@import './Graph.scss'; // // Global style overrides // body { - font-family: "Avenir Next", Avenir, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif; + font-family: 'Avenir Next', Avenir, 'Segoe UI', Roboto, 'Helvetica Neue', + Helvetica, sans-serif; margin: 0; } @@ -79,7 +83,7 @@ body { background: white; } .ace_gutter-cell { - color: #D8D8D8; + color: #d8d8d8; } .LogPage.ReactTable { height: 100%; diff --git a/packages/falcon-ui/src/components/Tab.js b/packages/falcon-ui/src/components/Tab.js deleted file mode 100644 index db2ab3f..0000000 --- a/packages/falcon-ui/src/components/Tab.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -export default class Tab extends React.Component { - render = () =>

Hello World (Tabs)

; -} diff --git a/app/components/Tabs.js b/packages/falcon-ui/src/components/Tabs.js similarity index 100% rename from app/components/Tabs.js rename to packages/falcon-ui/src/components/Tabs.js diff --git a/packages/falcon-ui/src/index.js b/packages/falcon-ui/src/index.js index c4c5db9..c153ea5 100644 --- a/packages/falcon-ui/src/index.js +++ b/packages/falcon-ui/src/index.js @@ -1,2 +1,2 @@ export Button from './components/Button'; -export Tab from './components/Tab'; +export Tabs from './components/Tabs'; From 566051ac912b9f51ec9b0b2385ed13dfb1785d08 Mon Sep 17 00:00:00 2001 From: John Tran Date: Sun, 12 Aug 2018 17:15:38 -0700 Subject: [PATCH 07/21] falcon-ui: Removed unused Tabs event listener --- packages/falcon-ui/src/components/Tabs.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/falcon-ui/src/components/Tabs.js b/packages/falcon-ui/src/components/Tabs.js index 1bd97b7..d3f546b 100644 --- a/packages/falcon-ui/src/components/Tabs.js +++ b/packages/falcon-ui/src/components/Tabs.js @@ -313,18 +313,6 @@ export default class Tab extends Component { .addEventListener('click', () => { chromeTabs.removeTab(el.querySelector('.chrome-tab-current')); }); - - document - .querySelector('button[data-theme-toggle]') - .addEventListener('click', () => { - if (el.classList.contains('chrome-tabs-dark-theme')) { - document.documentElement.classList.remove('dark-theme'); - el.classList.remove('chrome-tabs-dark-theme'); - } else { - document.documentElement.classList.add('dark-theme'); - el.classList.add('chrome-tabs-dark-theme'); - } - }); }, 0); } From 50429a7ca7a94fd9f7424ea85f7cf78d5583e1db Mon Sep 17 00:00:00 2001 From: John Tran Date: Sun, 12 Aug 2018 20:34:21 -0700 Subject: [PATCH 08/21] falcon-ui: Updated Tabs documentation --- packages/falcon-ui/src/components/Tabs.js | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/falcon-ui/src/components/Tabs.js b/packages/falcon-ui/src/components/Tabs.js index d3f546b..d2458b4 100644 --- a/packages/falcon-ui/src/components/Tabs.js +++ b/packages/falcon-ui/src/components/Tabs.js @@ -24,14 +24,16 @@ class ChromeTabs { this.draggabillyInstances = []; } + // @1. Should be ran after each javascript initialization of ChromeTabs init(el, options) { - this.el = el; - this.options = options; + this.el = el; // @1a. Root HTML element of ChromeTabs object + this.options = options; // @1b. { tabOverlapDistance: 14, minWidth: 45, maxWidth: 243 } - this.instanceId = instanceId; + this.instanceId = instanceId; // @1c. Sets which instance this ChromeTabs is this.el.setAttribute('data-chrome-tabs-instance-id', this.instanceId); instanceId += 1; + // @1d: Initializes event listeners, layout, etc. this.setupStyleEl(); this.setupEvents(); this.layoutTabs(); @@ -39,6 +41,7 @@ class ChromeTabs { this.setupDraggabilly(); } + /** Utility tool that dispatches events related to chrome tabs*/ emit(eventName, data) { this.el.dispatchEvent(new CustomEvent(eventName, { detail: data })); } @@ -51,7 +54,9 @@ class ChromeTabs { setupEvents() { window.addEventListener('resize', event => this.layoutTabs()); - this.el.addEventListener('dblclick', event => this.addTab()); + this.el.addEventListener('dblclick', event => { + if ([this.el, this.tabContentEl].includes(event.target)) this.addTab() + }) this.el.addEventListener('click', ({ target }) => { if (target.classList.contains('chrome-tab')) { @@ -67,6 +72,7 @@ class ChromeTabs { }); } + /** Returns array of all tab elements */ get tabEls() { return Array.from(this.el.querySelectorAll('.chrome-tab')); } @@ -75,7 +81,8 @@ class ChromeTabs { return this.el.querySelector('.chrome-tabs-content'); } - get tabWidth() { + /** Gets width of tabs */ + get tabWidth(): number { const tabsContentWidth = this.tabContentEl.clientWidth - this.options.tabOverlapDistance; const width = @@ -90,6 +97,7 @@ class ChromeTabs { return this.tabWidth - this.options.tabOverlapDistance; } + /** Gets the positions of each tabs */ get tabPositions() { const tabEffectiveWidth = this.tabEffectiveWidth; let left = 0; @@ -102,6 +110,7 @@ class ChromeTabs { return positions; } + /** Lays out all the current tabs */ layoutTabs() { const tabWidth = this.tabWidth; @@ -137,12 +146,14 @@ class ChromeTabs { }); } + /** Create a tab's HTML representation */ createNewTabEl() { const div = document.createElement('div'); div.innerHTML = tabTemplate; return div.firstElementChild; } + /** Adds additional tabs. Performs necessary HTML/CSS modifications */ addTab(tabProperties) { const tabEl = this.createNewTabEl(); @@ -159,6 +170,7 @@ class ChromeTabs { this.setupDraggabilly(); } + /** Sets the selected tab. Performs necessary HTML/CSS modifications */ setCurrentTab(tabEl) { const currentTab = this.el.querySelector('.chrome-tab-current'); if (currentTab) currentTab.classList.remove('chrome-tab-current'); @@ -182,6 +194,7 @@ class ChromeTabs { this.setupDraggabilly(); } + /** Updates the contents of a Tab (in the TabList) */ updateTab(tabEl, tabProperties) { tabEl.querySelector('.chrome-tab-title').textContent = tabProperties.title; tabEl.querySelector('.chrome-tab-favicon').style.backgroundImage = `url('${ From 0a8330eab9b60c4eeb2bbe136a90fa86744fca44 Mon Sep 17 00:00:00 2001 From: John Tran Date: Sun, 12 Aug 2018 21:21:19 -0700 Subject: [PATCH 09/21] falcon-ui: Added initial Tabs refactored to react Defined component skeleton and Props type --- .../falcon-ui/src/components/Tabs/Tabs.js | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 packages/falcon-ui/src/components/Tabs/Tabs.js diff --git a/packages/falcon-ui/src/components/Tabs/Tabs.js b/packages/falcon-ui/src/components/Tabs/Tabs.js new file mode 100644 index 0000000..05bf3ac --- /dev/null +++ b/packages/falcon-ui/src/components/Tabs/Tabs.js @@ -0,0 +1,22 @@ +//@flow +import * as React from 'react' + +type Props = { + children: React.ReactNode, + className: string, + defaultFocus: boolean, + defaultIndex: number, + disabledTabClassName: string, + onSelect: (index: number, lastIndex: number, event: Event) => ?boolean, + selectedIndex: number, + selectedTabClassName: string, + selectedTabPanelClassName: PropTypes.string, +}; + +export default class Tabs extends Component { + render() { + return ( +
+ ); + } +} From 40e498828f3371e27f8f6ec6e4184d78c43c2d4d Mon Sep 17 00:00:00 2001 From: John Tran Date: Tue, 14 Aug 2018 22:56:14 -0700 Subject: [PATCH 10/21] falcon-ui: Formatted files --- packages/falcon-ui/src/components/Button.js | 11 ++++++++--- packages/falcon-ui/src/components/Tabs.js | 6 +++--- packages/falcon-ui/src/components/Tabs/Tabs.js | 10 ++++------ 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/falcon-ui/src/components/Button.js b/packages/falcon-ui/src/components/Button.js index 4d2d246..cb23228 100644 --- a/packages/falcon-ui/src/components/Button.js +++ b/packages/falcon-ui/src/components/Button.js @@ -14,11 +14,16 @@ Button.defaultProps = { }; export default function Button(props: Props) { - const { disabled, className, style, children, onClick, e2eData} = props; - + const { disabled, className, style, children, onClick, e2eData } = props; return ( - ); diff --git a/packages/falcon-ui/src/components/Tabs.js b/packages/falcon-ui/src/components/Tabs.js index d2458b4..a211f13 100644 --- a/packages/falcon-ui/src/components/Tabs.js +++ b/packages/falcon-ui/src/components/Tabs.js @@ -55,8 +55,8 @@ class ChromeTabs { window.addEventListener('resize', event => this.layoutTabs()); this.el.addEventListener('dblclick', event => { - if ([this.el, this.tabContentEl].includes(event.target)) this.addTab() - }) + if ([this.el, this.tabContentEl].includes(event.target)) this.addTab(); + }); this.el.addEventListener('click', ({ target }) => { if (target.classList.contains('chrome-tab')) { @@ -82,7 +82,7 @@ class ChromeTabs { } /** Gets width of tabs */ - get tabWidth(): number { + get tabWidth(): number { const tabsContentWidth = this.tabContentEl.clientWidth - this.options.tabOverlapDistance; const width = diff --git a/packages/falcon-ui/src/components/Tabs/Tabs.js b/packages/falcon-ui/src/components/Tabs/Tabs.js index 05bf3ac..9bf31d7 100644 --- a/packages/falcon-ui/src/components/Tabs/Tabs.js +++ b/packages/falcon-ui/src/components/Tabs/Tabs.js @@ -1,5 +1,5 @@ -//@flow -import * as React from 'react' +// @flow +import * as React from 'react'; type Props = { children: React.ReactNode, @@ -10,13 +10,11 @@ type Props = { onSelect: (index: number, lastIndex: number, event: Event) => ?boolean, selectedIndex: number, selectedTabClassName: string, - selectedTabPanelClassName: PropTypes.string, + selectedTabPanelClassName: PropTypes.string }; export default class Tabs extends Component { render() { - return ( -
- ); + return
; } } From 6077692d67e2a89815296b50a3a749681b1ad505 Mon Sep 17 00:00:00 2001 From: John Tran Date: Tue, 14 Aug 2018 23:05:57 -0700 Subject: [PATCH 11/21] falcon-ui: Added initial Tabs children components Defined component skeletons and Props type --- packages/falcon-ui/src/components/Tabs/Tab.js | 50 +++++++++++++++++++ .../falcon-ui/src/components/Tabs/TabList.js | 14 ++++++ .../falcon-ui/src/components/Tabs/TabPanel.js | 16 ++++++ 3 files changed, 80 insertions(+) create mode 100644 packages/falcon-ui/src/components/Tabs/Tab.js create mode 100644 packages/falcon-ui/src/components/Tabs/TabList.js create mode 100644 packages/falcon-ui/src/components/Tabs/TabPanel.js diff --git a/packages/falcon-ui/src/components/Tabs/Tab.js b/packages/falcon-ui/src/components/Tabs/Tab.js new file mode 100644 index 0000000..95bda22 --- /dev/null +++ b/packages/falcon-ui/src/components/Tabs/Tab.js @@ -0,0 +1,50 @@ +import * as React from 'react'; + +type Props = { + children: React.ReactNode, + className?: string, + disabled?: boolean, + tabIndex: string, + disabledClassName?: PropTypes.string, + focus: PropTypes.bool, // private + id: PropTypes.string, // private + panelId: PropTypes.string, // private + selected: PropTypes.bool, // private + selectedClassName: PropTypes.string, + tabRef: PropTypes.func // private +}; + +export default class Tab extends React.Component { + componentDidMount() { + this.checkFocus(); + } + + componentDidUpdate() { + this.checkFocus(); + } + + checkFocus() { + if (this.props.selected && this.props.focus) { + this.node.focus(); + } + } + + render() { + const { + children, + className, + disabled, + disabledClassName, + focus, // unused + id, + panelId, + selected, + selectedClassName, + tabIndex, + tabRef, + ...attributes + } = this.props; + + return
; + } +} diff --git a/packages/falcon-ui/src/components/Tabs/TabList.js b/packages/falcon-ui/src/components/Tabs/TabList.js new file mode 100644 index 0000000..7576f81 --- /dev/null +++ b/packages/falcon-ui/src/components/Tabs/TabList.js @@ -0,0 +1,14 @@ +import * as React from 'react'; + +type Props = { + children: React.ReactNode, + className: string +}; + +export default class TabList extends React.Component { + render = () => ( +
+ {children} +
+ ); +} diff --git a/packages/falcon-ui/src/components/Tabs/TabPanel.js b/packages/falcon-ui/src/components/Tabs/TabPanel.js new file mode 100644 index 0000000..a82ce60 --- /dev/null +++ b/packages/falcon-ui/src/components/Tabs/TabPanel.js @@ -0,0 +1,16 @@ +import * as React from 'react'; + +type Props = { + children: React.ReactNode, + className: string, + id: PropTypes.string, // private + selected: PropTypes.bool, // private + selectedClassName: PropTypes.string, + tabId: PropTypes.string // private +}; + +export default class TabPanel extends React.Component { + render() { + return
; + } +} From 9ae8959fa357d396437141dcb66f1de98695c148 Mon Sep 17 00:00:00 2001 From: John Tran Date: Wed, 15 Aug 2018 22:01:44 -0700 Subject: [PATCH 12/21] falcon-ui: Fixed incorrect prop types --- packages/falcon-ui/src/components/Tabs/Tab.js | 14 +++++++------- packages/falcon-ui/src/components/Tabs/TabPanel.js | 8 ++++---- packages/falcon-ui/src/components/Tabs/Tabs.js | 4 ++-- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/falcon-ui/src/components/Tabs/Tab.js b/packages/falcon-ui/src/components/Tabs/Tab.js index 95bda22..b6d16b6 100644 --- a/packages/falcon-ui/src/components/Tabs/Tab.js +++ b/packages/falcon-ui/src/components/Tabs/Tab.js @@ -5,13 +5,13 @@ type Props = { className?: string, disabled?: boolean, tabIndex: string, - disabledClassName?: PropTypes.string, - focus: PropTypes.bool, // private - id: PropTypes.string, // private - panelId: PropTypes.string, // private - selected: PropTypes.bool, // private - selectedClassName: PropTypes.string, - tabRef: PropTypes.func // private + disabledClassName?: string, + focus: boolean, // private + id: string, // private + panelId: string, // private + selected: boolean, // private + selectedClassName: string, + tabRef: Function // private }; export default class Tab extends React.Component { diff --git a/packages/falcon-ui/src/components/Tabs/TabPanel.js b/packages/falcon-ui/src/components/Tabs/TabPanel.js index a82ce60..6eeed78 100644 --- a/packages/falcon-ui/src/components/Tabs/TabPanel.js +++ b/packages/falcon-ui/src/components/Tabs/TabPanel.js @@ -3,10 +3,10 @@ import * as React from 'react'; type Props = { children: React.ReactNode, className: string, - id: PropTypes.string, // private - selected: PropTypes.bool, // private - selectedClassName: PropTypes.string, - tabId: PropTypes.string // private + id: string, // private + selected: boolean, // private + selectedClassName: string, + tabId: string // private }; export default class TabPanel extends React.Component { diff --git a/packages/falcon-ui/src/components/Tabs/Tabs.js b/packages/falcon-ui/src/components/Tabs/Tabs.js index 9bf31d7..ad1c51d 100644 --- a/packages/falcon-ui/src/components/Tabs/Tabs.js +++ b/packages/falcon-ui/src/components/Tabs/Tabs.js @@ -10,10 +10,10 @@ type Props = { onSelect: (index: number, lastIndex: number, event: Event) => ?boolean, selectedIndex: number, selectedTabClassName: string, - selectedTabPanelClassName: PropTypes.string + selectedTabPanelClassName: string }; -export default class Tabs extends Component { +export default class Tabs extends React.Component { render() { return
; } From a71af3d047458e8102e3b0f6f49529ea987095ea Mon Sep 17 00:00:00 2001 From: John Tran Date: Tue, 21 Aug 2018 18:53:05 -0700 Subject: [PATCH 13/21] falcon-ui: Changed non-React Tab file name --- packages/falcon-ui/src/components/{Tabs.js => HTMLTabs.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/falcon-ui/src/components/{Tabs.js => HTMLTabs.js} (100%) diff --git a/packages/falcon-ui/src/components/Tabs.js b/packages/falcon-ui/src/components/HTMLTabs.js similarity index 100% rename from packages/falcon-ui/src/components/Tabs.js rename to packages/falcon-ui/src/components/HTMLTabs.js From 2fe3c15444dd6f3ee5ada6ce7591dc1f02d7fd3c Mon Sep 17 00:00:00 2001 From: John Tran Date: Wed, 22 Aug 2018 10:04:27 -0700 Subject: [PATCH 14/21] falcon-ui: Added export of Tabs components --- packages/falcon-ui/src/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/falcon-ui/src/index.js b/packages/falcon-ui/src/index.js index c153ea5..1925789 100644 --- a/packages/falcon-ui/src/index.js +++ b/packages/falcon-ui/src/index.js @@ -1,2 +1,6 @@ export Button from './components/Button'; -export Tabs from './components/Tabs'; +export Tabs from './components/Tabs/Tabs'; +export Tab from './components/Tabs/Tab'; +export TabList from './components/Tabs/TabList'; +export TabPanel from './components/Tabs/TabPanel'; +export HTMLTabs from './components/HTMLTabs'; From 7f8d7cf1f33c0dabe29d8748cdf8c433506bed2f Mon Sep 17 00:00:00 2001 From: John Tran Date: Wed, 22 Aug 2018 12:49:09 -0700 Subject: [PATCH 15/21] falcon-ui: Added initial Tabs code --- app/containers/HomePage.js | 7 +++ packages/falcon-ui/src/components/HTMLTabs.js | 19 ++++++ packages/falcon-ui/src/components/Tabs/Tab.js | 13 ++++- .../falcon-ui/src/components/Tabs/TabList.js | 58 +++++++++++++++++-- .../falcon-ui/src/components/Tabs/Tabs.js | 38 ++++++++++-- 5 files changed, 122 insertions(+), 13 deletions(-) diff --git a/app/containers/HomePage.js b/app/containers/HomePage.js index 55cffe4..b3a676f 100644 --- a/app/containers/HomePage.js +++ b/app/containers/HomePage.js @@ -4,6 +4,13 @@ import React, { Component } from 'react'; import { ResizableBox } from 'react-resizable'; import { ipcRenderer } from 'electron'; import { Switch, Route } from 'react-router'; +import { + Tabs, + Tab, + TabPanel, + TabList, + HTMLTabs +} from '@falcon-client/falcon-ui'; import Loadable from 'react-loadable'; import Header from '../components/Header'; import Footer from '../components/Footer'; diff --git a/packages/falcon-ui/src/components/HTMLTabs.js b/packages/falcon-ui/src/components/HTMLTabs.js index a211f13..3776dc7 100644 --- a/packages/falcon-ui/src/components/HTMLTabs.js +++ b/packages/falcon-ui/src/components/HTMLTabs.js @@ -21,11 +21,13 @@ let instanceId = 0; class ChromeTabs { constructor() { + console.log('In ChromeTabs constructor'); this.draggabillyInstances = []; } // @1. Should be ran after each javascript initialization of ChromeTabs init(el, options) { + console.log('In init'); this.el = el; // @1a. Root HTML element of ChromeTabs object this.options = options; // @1b. { tabOverlapDistance: 14, minWidth: 45, maxWidth: 243 } @@ -43,15 +45,18 @@ class ChromeTabs { /** Utility tool that dispatches events related to chrome tabs*/ emit(eventName, data) { + console.log('In emit'); this.el.dispatchEvent(new CustomEvent(eventName, { detail: data })); } setupStyleEl() { + console.log('In setupStyleEl'); this.animationStyleEl = document.createElement('style'); this.el.appendChild(this.animationStyleEl); } setupEvents() { + console.log('In setupEvents'); window.addEventListener('resize', event => this.layoutTabs()); this.el.addEventListener('dblclick', event => { @@ -74,15 +79,18 @@ class ChromeTabs { /** Returns array of all tab elements */ get tabEls() { + console.log('In get tabEls'); return Array.from(this.el.querySelectorAll('.chrome-tab')); } get tabContentEl() { + console.log('In get tabContentEl'); return this.el.querySelector('.chrome-tabs-content'); } /** Gets width of tabs */ get tabWidth(): number { + console.log('In get tabWidth'); const tabsContentWidth = this.tabContentEl.clientWidth - this.options.tabOverlapDistance; const width = @@ -99,6 +107,7 @@ class ChromeTabs { /** Gets the positions of each tabs */ get tabPositions() { + console.log('In tabPositions'); const tabEffectiveWidth = this.tabEffectiveWidth; let left = 0; const positions = []; @@ -112,6 +121,7 @@ class ChromeTabs { /** Lays out all the current tabs */ layoutTabs() { + console.log('In layoutTabs'); const tabWidth = this.tabWidth; this.cleanUpPreviouslyDraggedTabs(); @@ -132,6 +142,7 @@ class ChromeTabs { } fixZIndexes() { + console.log('In fixZIndexes'); const bottomBarEl = this.el.querySelector('.chrome-tabs-bottom-bar'); const tabEls = this.tabEls; @@ -148,6 +159,7 @@ class ChromeTabs { /** Create a tab's HTML representation */ createNewTabEl() { + console.log('In createNewTabEl'); const div = document.createElement('div'); div.innerHTML = tabTemplate; return div.firstElementChild; @@ -155,6 +167,7 @@ class ChromeTabs { /** Adds additional tabs. Performs necessary HTML/CSS modifications */ addTab(tabProperties) { + console.log('In addTab'); const tabEl = this.createNewTabEl(); tabEl.classList.add('chrome-tab-just-added'); @@ -172,6 +185,7 @@ class ChromeTabs { /** Sets the selected tab. Performs necessary HTML/CSS modifications */ setCurrentTab(tabEl) { + console.log('In setCurrentTab'); const currentTab = this.el.querySelector('.chrome-tab-current'); if (currentTab) currentTab.classList.remove('chrome-tab-current'); tabEl.classList.add('chrome-tab-current'); @@ -180,6 +194,7 @@ class ChromeTabs { } removeTab(tabEl) { + console.log('In removeTab'); if (tabEl.classList.contains('chrome-tab-current')) { if (tabEl.previousElementSibling) { this.setCurrentTab(tabEl.previousElementSibling); @@ -196,6 +211,7 @@ class ChromeTabs { /** Updates the contents of a Tab (in the TabList) */ updateTab(tabEl, tabProperties) { + console.log('In updateTab'); tabEl.querySelector('.chrome-tab-title').textContent = tabProperties.title; tabEl.querySelector('.chrome-tab-favicon').style.backgroundImage = `url('${ tabProperties.favicon @@ -203,12 +219,14 @@ class ChromeTabs { } cleanUpPreviouslyDraggedTabs() { + console.log('In cleanUpPreviouslyDraggedTabs'); this.tabEls.forEach(tabEl => tabEl.classList.remove('chrome-tab-just-dragged') ); } setupDraggabilly() { + console.log('In setupDraggabilly'); const tabEls = this.tabEls; const tabEffectiveWidth = this.tabEffectiveWidth; const tabPositions = this.tabPositions; @@ -282,6 +300,7 @@ class ChromeTabs { } animateTabMove(tabEl, originIndex, destinationIndex) { + console.log('In animateTabMove'); if (destinationIndex < originIndex) { tabEl.parentNode.insertBefore(tabEl, this.tabEls[destinationIndex]); } else { diff --git a/packages/falcon-ui/src/components/Tabs/Tab.js b/packages/falcon-ui/src/components/Tabs/Tab.js index b6d16b6..242725e 100644 --- a/packages/falcon-ui/src/components/Tabs/Tab.js +++ b/packages/falcon-ui/src/components/Tabs/Tab.js @@ -6,12 +6,14 @@ type Props = { disabled?: boolean, tabIndex: string, disabledClassName?: string, + title: string, focus: boolean, // private id: string, // private panelId: string, // private selected: boolean, // private selectedClassName: string, - tabRef: Function // private + tabRef: Function, // private + left: number // private }; export default class Tab extends React.Component { @@ -45,6 +47,13 @@ export default class Tab extends React.Component { ...attributes } = this.props; - return
; + return ( +
+
+
+
{this.props.title}
+
+
+ ); } } diff --git a/packages/falcon-ui/src/components/Tabs/TabList.js b/packages/falcon-ui/src/components/Tabs/TabList.js index 7576f81..3740edb 100644 --- a/packages/falcon-ui/src/components/Tabs/TabList.js +++ b/packages/falcon-ui/src/components/Tabs/TabList.js @@ -2,13 +2,59 @@ import * as React from 'react'; type Props = { children: React.ReactNode, - className: string + className: string, + id: string, // private + selected: boolean, // private + selectedClassName: string, + clientWidth: number, + minTabWidth: number, + maxTabWidth: number, + tabOverlapDistance: number, + tabId: string // private }; export default class TabList extends React.Component { - render = () => ( -
- {children} -
- ); + getTabWidth = (): number => { + console.log('In get tabWidth'); + const tabsContentWidth = + this.props.clientWidth - this.props.tabOverlapDistance; + const width = + tabsContentWidth / this.tabEls.length + this.props.tabOverlapDistance; + return Math.max( + this.props.minTabWidth, + Math.min(this.props.maxTabWidth, width) + ); + }; + + getTabEffectiveWidth = () => + this.getTabWidth() - this.props.tabOverlapDistance; + + getTabPositions = () => { + console.log('In getTabPositions'); + const tabEffectiveWidth = this.getTabEffectiveWidth(); + let left = 0; + const positions = []; + + this.tabEls.forEach((tabEl, i) => { + positions.push(left); + left += tabEffectiveWidth; + }); + return positions; + }; + + renderChildren = () => + React.Children.map(this.props.children, child => { + console.log('In TabList.js'); + console.dir(child); + return React.cloneElement(child, {}); + }); + + render() { + return ( +
+
{this.renderChildren()}
+
+
+ ); + } } diff --git a/packages/falcon-ui/src/components/Tabs/Tabs.js b/packages/falcon-ui/src/components/Tabs/Tabs.js index ad1c51d..523a598 100644 --- a/packages/falcon-ui/src/components/Tabs/Tabs.js +++ b/packages/falcon-ui/src/components/Tabs/Tabs.js @@ -1,5 +1,5 @@ // @flow -import * as React from 'react'; +import React, { Children, Component } from 'react'; type Props = { children: React.ReactNode, @@ -7,14 +7,42 @@ type Props = { defaultFocus: boolean, defaultIndex: number, disabledTabClassName: string, - onSelect: (index: number, lastIndex: number, event: Event) => ?boolean, selectedIndex: number, selectedTabClassName: string, - selectedTabPanelClassName: string + selectedTabPanelClassName: string, + width: number, + onSelect: (index: number, lastIndex: number, event: Event) => ?boolean }; -export default class Tabs extends React.Component { +export default class Tabs extends Component { + renderChildren = () => + React.Children.map(this.props.children, child => + // console.log('In Tab.js'); + // console.dir(child); + React.cloneElement(child, {}) + ); + + 3; + + getTabWidth(): number { + const tabsContentWidth = + this.tabContentEl.clientWidth - this.options.tabOverlapDistance; + const width = + tabsContentWidth / this.tabEls.length + this.options.tabOverlapDistance; + return Math.max( + this.options.minWidth, + Math.min(this.options.maxWidth, width) + ); + } + + renderSelectedTab = (i: number) => {}; + render() { - return
; + return ( +
+
{this.renderChildren()}
+
+
+ ); } } From 986f3e79635846a87015451674eeb447d21a52e1 Mon Sep 17 00:00:00 2001 From: John Tran Date: Wed, 22 Aug 2018 22:28:49 -0700 Subject: [PATCH 16/21] falcon-ui: Commented unused Tabs-related props --- packages/falcon-ui/src/components/Tabs/Tab.js | 49 ++++++++++--------- .../falcon-ui/src/components/Tabs/TabList.js | 12 ++--- .../falcon-ui/src/components/Tabs/TabPanel.js | 12 ++--- .../falcon-ui/src/components/Tabs/Tabs.js | 29 ++++------- 4 files changed, 46 insertions(+), 56 deletions(-) diff --git a/packages/falcon-ui/src/components/Tabs/Tab.js b/packages/falcon-ui/src/components/Tabs/Tab.js index 242725e..33aa147 100644 --- a/packages/falcon-ui/src/components/Tabs/Tab.js +++ b/packages/falcon-ui/src/components/Tabs/Tab.js @@ -1,19 +1,19 @@ import * as React from 'react'; type Props = { - children: React.ReactNode, - className?: string, - disabled?: boolean, - tabIndex: string, - disabledClassName?: string, + // children: React.ReactNode, + // className?: string, + // disabled?: boolean, + // tabIndex: string, + // disabledClassName?: string, title: string, focus: boolean, // private - id: string, // private - panelId: string, // private - selected: boolean, // private - selectedClassName: string, - tabRef: Function, // private - left: number // private + // id: string, // private + // panelId: string, // private + selected: boolean // private + // selectedClassName: string, + // tabRef: Function, // private + // left: number // private }; export default class Tab extends React.Component { @@ -33,25 +33,26 @@ export default class Tab extends React.Component { render() { const { - children, - className, - disabled, - disabledClassName, - focus, // unused - id, - panelId, - selected, - selectedClassName, - tabIndex, - tabRef, - ...attributes + // children, + // className, + // disabled, + // disabledClassName, + title + // focus, // unused + // id, + // panelId, + // selected, + // selectedClassName, + // tabIndex, + // tabRef, + // ...attributes } = this.props; return (
-
{this.props.title}
+
{title}
); diff --git a/packages/falcon-ui/src/components/Tabs/TabList.js b/packages/falcon-ui/src/components/Tabs/TabList.js index 3740edb..93c70cd 100644 --- a/packages/falcon-ui/src/components/Tabs/TabList.js +++ b/packages/falcon-ui/src/components/Tabs/TabList.js @@ -2,15 +2,15 @@ import * as React from 'react'; type Props = { children: React.ReactNode, - className: string, - id: string, // private - selected: boolean, // private - selectedClassName: string, + // className: string, + // id: string, // private + // selected: boolean, // private + // selectedClassName: string, clientWidth: number, minTabWidth: number, maxTabWidth: number, - tabOverlapDistance: number, - tabId: string // private + tabOverlapDistance: number + // tabId: string // private }; export default class TabList extends React.Component { diff --git a/packages/falcon-ui/src/components/Tabs/TabPanel.js b/packages/falcon-ui/src/components/Tabs/TabPanel.js index 6eeed78..1bc458c 100644 --- a/packages/falcon-ui/src/components/Tabs/TabPanel.js +++ b/packages/falcon-ui/src/components/Tabs/TabPanel.js @@ -1,12 +1,12 @@ import * as React from 'react'; type Props = { - children: React.ReactNode, - className: string, - id: string, // private - selected: boolean, // private - selectedClassName: string, - tabId: string // private + // children: React.ReactNode, + // className: string, + // id: string, // private + // selected: boolean, // private + // selectedClassName: string, + // tabId: string // private }; export default class TabPanel extends React.Component { diff --git a/packages/falcon-ui/src/components/Tabs/Tabs.js b/packages/falcon-ui/src/components/Tabs/Tabs.js index 523a598..01ec671 100644 --- a/packages/falcon-ui/src/components/Tabs/Tabs.js +++ b/packages/falcon-ui/src/components/Tabs/Tabs.js @@ -3,15 +3,15 @@ import React, { Children, Component } from 'react'; type Props = { children: React.ReactNode, - className: string, - defaultFocus: boolean, - defaultIndex: number, - disabledTabClassName: string, - selectedIndex: number, - selectedTabClassName: string, - selectedTabPanelClassName: string, - width: number, - onSelect: (index: number, lastIndex: number, event: Event) => ?boolean + // className: string, + // defaultFocus: boolean, + // defaultIndex: number, + // disabledTabClassName: string, + // selectedIndex: number, + // selectedTabClassName: string, + // selectedTabPanelClassName: string, + width: number + // onSelect: (index: number, lastIndex: number, event: Event) => ?boolean }; export default class Tabs extends Component { @@ -24,17 +24,6 @@ export default class Tabs extends Component { 3; - getTabWidth(): number { - const tabsContentWidth = - this.tabContentEl.clientWidth - this.options.tabOverlapDistance; - const width = - tabsContentWidth / this.tabEls.length + this.options.tabOverlapDistance; - return Math.max( - this.options.minWidth, - Math.min(this.options.maxWidth, width) - ); - } - renderSelectedTab = (i: number) => {}; render() { From 7d3930eb4ac9189421afccbfb44b01ea2f39f2eb Mon Sep 17 00:00:00 2001 From: John Tran Date: Wed, 22 Aug 2018 22:40:36 -0700 Subject: [PATCH 17/21] falcon-ui: Fixed Tab spacing --- packages/falcon-ui/src/components/Tabs/Tab.js | 15 ++++--- .../falcon-ui/src/components/Tabs/TabList.js | 39 ++++++++----------- .../falcon-ui/src/components/Tabs/Tabs.js | 4 +- 3 files changed, 27 insertions(+), 31 deletions(-) diff --git a/packages/falcon-ui/src/components/Tabs/Tab.js b/packages/falcon-ui/src/components/Tabs/Tab.js index 33aa147..a2ff4bd 100644 --- a/packages/falcon-ui/src/components/Tabs/Tab.js +++ b/packages/falcon-ui/src/components/Tabs/Tab.js @@ -10,10 +10,11 @@ type Props = { focus: boolean, // private // id: string, // private // panelId: string, // private - selected: boolean // private + selected: boolean, // private // selectedClassName: string, // tabRef: Function, // private - // left: number // private + left: number, // private + tabWidth: number // private }; export default class Tab extends React.Component { @@ -37,7 +38,6 @@ export default class Tab extends React.Component { // className, // disabled, // disabledClassName, - title // focus, // unused // id, // panelId, @@ -45,14 +45,19 @@ export default class Tab extends React.Component { // selectedClassName, // tabIndex, // tabRef, + tabWidth, + left // ...attributes } = this.props; return ( -
+
-
{title}
+
{this.props.title}
); diff --git a/packages/falcon-ui/src/components/Tabs/TabList.js b/packages/falcon-ui/src/components/Tabs/TabList.js index 93c70cd..cabef02 100644 --- a/packages/falcon-ui/src/components/Tabs/TabList.js +++ b/packages/falcon-ui/src/components/Tabs/TabList.js @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React, { Children, Component } from 'react'; type Props = { children: React.ReactNode, @@ -13,42 +13,35 @@ type Props = { // tabId: string // private }; -export default class TabList extends React.Component { +export default class TabList extends Component { getTabWidth = (): number => { console.log('In get tabWidth'); const tabsContentWidth = this.props.clientWidth - this.props.tabOverlapDistance; - const width = - tabsContentWidth / this.tabEls.length + this.props.tabOverlapDistance; + const tabWidth = + tabsContentWidth / Children.count(this.props.children) + + this.props.tabOverlapDistance; return Math.max( this.props.minTabWidth, - Math.min(this.props.maxTabWidth, width) + Math.min(this.props.maxTabWidth, tabWidth) ); }; getTabEffectiveWidth = () => this.getTabWidth() - this.props.tabOverlapDistance; - getTabPositions = () => { - console.log('In getTabPositions'); - const tabEffectiveWidth = this.getTabEffectiveWidth(); - let left = 0; - const positions = []; - - this.tabEls.forEach((tabEl, i) => { - positions.push(left); - left += tabEffectiveWidth; - }); - return positions; + renderChildren = () => { + const tabWidth = this.getTabEffectiveWidth(); + return React.Children.map(this.props.children, (child, i) => + React.cloneElement(child, { + left: tabWidth * i, + tabWidth, + tabIndex: i, + key: i + }) + ); }; - renderChildren = () => - React.Children.map(this.props.children, child => { - console.log('In TabList.js'); - console.dir(child); - return React.cloneElement(child, {}); - }); - render() { return (
diff --git a/packages/falcon-ui/src/components/Tabs/Tabs.js b/packages/falcon-ui/src/components/Tabs/Tabs.js index 01ec671..1b43627 100644 --- a/packages/falcon-ui/src/components/Tabs/Tabs.js +++ b/packages/falcon-ui/src/components/Tabs/Tabs.js @@ -16,14 +16,12 @@ type Props = { export default class Tabs extends Component { renderChildren = () => - React.Children.map(this.props.children, child => + Children.map(this.props.children, child => // console.log('In Tab.js'); // console.dir(child); React.cloneElement(child, {}) ); - 3; - renderSelectedTab = (i: number) => {}; render() { From f340357f59c0a89db6c7ac77308469f15cd3fbe0 Mon Sep 17 00:00:00 2001 From: Amila Welihinda Date: Thu, 23 Aug 2018 22:16:29 -0700 Subject: [PATCH 18/21] Update Login.e2e.js --- test/e2e/Login.e2e.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/Login.e2e.js b/test/e2e/Login.e2e.js index c353539..b9ed2f6 100644 --- a/test/e2e/Login.e2e.js +++ b/test/e2e/Login.e2e.js @@ -41,7 +41,7 @@ async function assertGraphPageLink(t, linkText) { test('it should refresh connection', async t => { const url = await getPageUrl(); - await t.click('[data-e2e="header-connection-refresh-button"]'); + await t.click('[dataE2e="header-connection-refresh-button"]'); await t.expect(url).eql(await getPageUrl()); }); From deba5084fc3fc66e8e299059711f49f387618735 Mon Sep 17 00:00:00 2001 From: John Tran Date: Sat, 25 Aug 2018 18:08:37 -0700 Subject: [PATCH 19/21] Fixed attributes for e2e tests --- app/components/Sidebar.js | 2 +- test/e2e/Login.e2e.js | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js index 965aca7..b968156 100644 --- a/app/components/Sidebar.js +++ b/app/components/Sidebar.js @@ -60,7 +60,7 @@ export default function Sidebar(props: Props) { : 'Sidebar--list-item' } style={{ paddingLeft: 40 }} - data-e2e="Sidebar--list-item" + e2eData="Sidebar--list-item" > {table.name} diff --git a/test/e2e/Login.e2e.js b/test/e2e/Login.e2e.js index b9ed2f6..9cfaa2b 100644 --- a/test/e2e/Login.e2e.js +++ b/test/e2e/Login.e2e.js @@ -39,12 +39,6 @@ async function assertGraphPageLink(t, linkText) { } } -test('it should refresh connection', async t => { - const url = await getPageUrl(); - await t.click('[dataE2e="header-connection-refresh-button"]'); - await t.expect(url).eql(await getPageUrl()); -}); - fixture`Graph`.page('../../app/app.html').beforeEach(async t => { await clearConfig(); await createNewConnection(t); From f2d3bec51fc34ff5eaaa985301ad99a6407d93e0 Mon Sep 17 00:00:00 2001 From: John Tran Date: Sun, 26 Aug 2018 17:35:55 -0700 Subject: [PATCH 20/21] falcon-app: Integrated Tabs into HomePage --- app/containers/HomePage.js | 194 ++++++++++++++++++++----------------- 1 file changed, 105 insertions(+), 89 deletions(-) diff --git a/app/containers/HomePage.js b/app/containers/HomePage.js index b3a676f..1cb8781 100644 --- a/app/containers/HomePage.js +++ b/app/containers/HomePage.js @@ -306,11 +306,12 @@ export default class HomePage extends Component { const sidebar = document.querySelector('.Sidebar'); if (grid && sidebar) { const height = 32 + 10 + 21 + 15; - grid.style.height = `${window.innerHeight - height}px`; + // -32 for Tabs Height + grid.style.height = `${window.innerHeight - height - 32}px`; sidebar.style.height = `${window.innerHeight - height + 40}px`; // If the window is resized, change the height of the grid repsectively window.onresizeFunctions['resize-grid-resize'] = () => { - grid.style.height = `${window.innerHeight - height}px`; + grid.style.height = `${window.innerHeight - height - 32}px`; sidebar.style.height = `${window.innerHeight - height + 40}px`; }; } @@ -365,96 +366,111 @@ export default class HomePage extends Component { activeConnections={this.state.activeConnections} /> -
- - ( - { - this.setConnections(); - this.props.history.push('/content'); - }} - /> - )} - /> - - this.state.selectedTable ? ( - + + + + + + +
+ + ( + { + this.setConnections(); + this.props.history.push('/content'); }} /> - ) : null - } - /> - ( - - this.setRefreshQueryFn(() => - this.onTableSelect(this.state.selectedTable) - ) - } - /> - )} - /> - ( - this.setRefreshQueryFn(e)} - executeQuery={query => this.executeQuery(query)} - sqlFormatter={this.sqlFormatter} - /> - )} - /> - - this.core && - this.core.connection && - this.state.selectedConnection && - this.state.selectedConnection.database ? ( - + + this.state.selectedTable ? ( + + ) : null + } + /> + ( + + this.setRefreshQueryFn(() => + this.onTableSelect(this.state.selectedTable) + ) + } + /> + )} + /> + ( + this.setRefreshQueryFn(e)} + executeQuery={query => this.executeQuery(query)} + sqlFormatter={this.sqlFormatter} /> - ) : null - } - /> - } - /> - + )} + /> + + this.core && + this.core.connection && + this.state.selectedConnection && + this.state.selectedConnection.database ? ( + + ) : null + } + /> + } + /> + +