From abb3f6e09c66455922474003235fb24a3f0f37ed Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Mon, 13 Apr 2020 13:49:00 +0200 Subject: [PATCH] opened tabs widget --- packages/web/src/appobj/openedTabAppObject.js | 22 ++++++++++ packages/web/src/widgets/DatabaseWidget.js | 39 ++-------------- packages/web/src/widgets/FilesWidget.js | 33 ++++++++++++++ packages/web/src/widgets/WidgetContainer.js | 2 + packages/web/src/widgets/WidgetIconPanel.js | 16 +++---- packages/web/src/widgets/WidgetStyles.js | 44 +++++++++++++++++++ 6 files changed, 112 insertions(+), 44 deletions(-) create mode 100644 packages/web/src/appobj/openedTabAppObject.js create mode 100644 packages/web/src/widgets/FilesWidget.js create mode 100644 packages/web/src/widgets/WidgetStyles.js diff --git a/packages/web/src/appobj/openedTabAppObject.js b/packages/web/src/appobj/openedTabAppObject.js new file mode 100644 index 00000000..f6db5e36 --- /dev/null +++ b/packages/web/src/appobj/openedTabAppObject.js @@ -0,0 +1,22 @@ +import React from 'react'; +import _ from 'lodash'; +import { getIconImage } from '../icons'; + +const openedTabAppObject = () => ({ tabid, props, selected, icon, title }, { setOpenedTabs }) => { + const key = tabid; + const Icon = (props) => getIconImage(icon, props); + const isBold = !!selected; + + const onClick = () => { + setOpenedTabs((files) => + files.map((x) => ({ + ...x, + selected: x.tabid == tabid, + })) + ); + }; + + return { title, key, Icon, isBold, onClick }; +}; + +export default openedTabAppObject; diff --git a/packages/web/src/widgets/DatabaseWidget.js b/packages/web/src/widgets/DatabaseWidget.js index 2a710730..3186783f 100644 --- a/packages/web/src/widgets/DatabaseWidget.js +++ b/packages/web/src/widgets/DatabaseWidget.js @@ -1,49 +1,14 @@ import React from 'react'; -import styled from 'styled-components'; import _ from 'lodash'; import { AppObjectList } from '../appobj/AppObjectList'; import connectionAppObject from '../appobj/connectionAppObject'; import databaseAppObject from '../appobj/databaseAppObject'; import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalState'; -import theme from '../theme'; import InlineButton from './InlineButton'; import databaseObjectAppObject from '../appobj/databaseObjectAppObject'; import { useSqlObjectList, useDatabaseList, useConnectionList } from '../utility/metadataLoaders'; - -const SearchBoxWrapper = styled.div` - display: flex; - margin-bottom: 5px; -`; - -const MainContainer = styled.div` - position: relative; - display: flex; - flex-flow: column wrap; - flex: 1; - flex-direction: column; - user-select: none; -`; - -const OuterContainer = styled.div` - flex: 1 1 0; - overflow: hidden; - width: ${theme.leftPanel.width}px; - position: relative; - flex-direction: column; - display: flex; -`; - -const InnerContainer = styled.div` - flex: 1 1; - overflow: scroll; - width: ${theme.leftPanel.width}px; -`; - -const Input = styled.input` - flex: 1; - min-width: 90px; -`; +import { SearchBoxWrapper, InnerContainer, Input, MainContainer, OuterContainer, WidgetTitle } from './WidgetStyles'; function SubDatabaseList({ data }) { const setDb = useSetCurrentDatabase(); @@ -70,6 +35,7 @@ function ConnectionList() { const [filter, setFilter] = React.useState(''); return ( <> + Connections setFilter(e.target.value)} /> Refresh @@ -98,6 +64,7 @@ function SqlObjectList({ conid, database }) { ); return ( <> + Tables, views, functions + Opened tabs + + + + + ); +} + +export default function FilesWidget() { + return ( + + + + + + + ); +} diff --git a/packages/web/src/widgets/WidgetContainer.js b/packages/web/src/widgets/WidgetContainer.js index a3ec04ea..1f6df241 100644 --- a/packages/web/src/widgets/WidgetContainer.js +++ b/packages/web/src/widgets/WidgetContainer.js @@ -1,9 +1,11 @@ import React from 'react'; import { useCurrentWidget } from '../utility/globalState'; import DatabaseWidget from './DatabaseWidget'; +import FilesWidget from './FilesWidget'; export default function WidgetContainer() { const currentWidget = useCurrentWidget(); if (currentWidget === 'database') return ; + if (currentWidget === 'file') return ; return null; } diff --git a/packages/web/src/widgets/WidgetIconPanel.js b/packages/web/src/widgets/WidgetIconPanel.js index dec048e1..16fce50f 100644 --- a/packages/web/src/widgets/WidgetIconPanel.js +++ b/packages/web/src/widgets/WidgetIconPanel.js @@ -24,18 +24,18 @@ export default function WidgetIconPanel() { icon: 'fa-database', name: 'database', }, - { - icon: 'fa-table', - name: 'table', - }, + // { + // icon: 'fa-table', + // name: 'table', + // }, { icon: 'fa-file-alt', name: 'file', }, - { - icon: 'fa-cog', - name: 'settings', - }, + // { + // icon: 'fa-cog', + // name: 'settings', + // }, // { // icon: 'fa-check', // name: 'settings', diff --git a/packages/web/src/widgets/WidgetStyles.js b/packages/web/src/widgets/WidgetStyles.js new file mode 100644 index 00000000..5744761d --- /dev/null +++ b/packages/web/src/widgets/WidgetStyles.js @@ -0,0 +1,44 @@ +import styled from 'styled-components'; +import theme from '../theme'; + +export const SearchBoxWrapper = styled.div` + display: flex; + margin-bottom: 5px; +`; + +export const MainContainer = styled.div` + position: relative; + display: flex; + flex-flow: column wrap; + flex: 1; + flex-direction: column; + user-select: none; +`; + +export const OuterContainer = styled.div` + flex: 1 1 0; + overflow: hidden; + width: ${theme.leftPanel.width}px; + position: relative; + flex-direction: column; + display: flex; +`; + +export const InnerContainer = styled.div` + flex: 1 1; + overflow: scroll; + width: ${theme.leftPanel.width}px; +`; + +export const Input = styled.input` + flex: 1; + min-width: 90px; +`; + +export const WidgetTitle = styled.div` + padding: 5px; + font-weight: bold; + text-transform: uppercase; + background-color: gray; + // background-color: #CEC; +`;