Skip to content

Commit 1b8f17f

Browse files
AHyman18katesmatthews
AHyman18
authored and
katesmatthews
committed
grommettify settingspanel (#50)
* Grommettify Settings Panel * Grommetify descriptive files
1 parent f32af6e commit 1b8f17f

File tree

8 files changed

+350
-115
lines changed

8 files changed

+350
-115
lines changed

‎app/components/sidepanels/InfoPanel.tsx

Lines changed: 28 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import * as React from 'react';
22
import styled from 'styled-components';
3+
4+
import { InformationPanel } from './sidePanelMolecules/Headers'
35
import { Grommet } from "grommet";
46
import { grommet } from 'grommet/themes';
57
import { License, CircleInformation } from 'grommet-icons';
68

9+
710
interface ISidePanelTableWrapperProps {
811
sidePanelVisibility: boolean;
912
}
@@ -21,17 +24,6 @@ const InfoSection = styled.div`
2124
padding: 30px 0px;
2225
`;
2326

24-
const Title = styled.p`
25-
font-family: 'Poppins', sans-serif;
26-
color: black;
27-
font-size: 32px;
28-
display: flex;
29-
justify-content: center;
30-
align-items: center;
31-
padding: 0px 0px 20px 0px;
32-
border-bottom: 3px solid grey;
33-
`;
34-
3527
const Text = styled.p`
3628
font-family: 'Poppins', sans-serif;
3729
color: black;
@@ -108,44 +100,31 @@ const InfoPanel: React.SFC<Props> = ({
108100
}
109101

110102
return (
111-
<Grommet theme={grommet}>
112-
<SidePanelTableListWrapper sidePanelVisibility={sidePanelVisibility}>
113-
<Title><CircleInformation size="medium" color="#149BD2" /><span> Information</span></Title>
114-
{Object.keys(activeTableInPanel).length > 0 ? (
115-
<InfoSection>
116-
<LabelTextWrapper>
117-
<Label>table</Label>
118-
<Text>{table_name}</Text>
119-
</LabelTextWrapper>
120-
<LabelTextWrapper>
121-
<Label>primary key</Label>
122-
<Text>{primaryKey}</Text>
123-
</LabelTextWrapper>
124-
<LabelTextWrapper>
125-
{primaryKeyRelationships.length > 0 && (
126-
<div>
127-
<Label><License
128-
size="small"
129-
color="#f39c12" /> Primary key is used in:</Label>
130-
<ul>{primaryKeyRelationships}</ul>
131-
</div>
132-
)}
133-
</LabelTextWrapper>
134-
<LabelTextWrapper>
135-
{foreignKeyRelationships.length > 0 && (
136-
<div>
137-
<Label><License
138-
size="small"
139-
color="#6DDEF4" /> Foreign keys in this table:</Label>
140-
<ul>{foreignKeyRelationships}</ul>
141-
</div>
142-
)}
143-
</LabelTextWrapper>
144-
</InfoSection>
145-
) : (
146-
<EmptyState>
147-
You haven't selected a table yet, click on a the <CircleInformation style={{ height: '20px' }} color="#149BD2" /> in a table to see more information.
148-
</EmptyState>
103+
<SidePanelTableListWrapper sidePanelVisibility={sidePanelVisibility}>
104+
<InformationPanel />
105+
{Object.keys(activeTableInPanel).length > 0 ? (
106+
<InfoSection>
107+
<Label>table name</Label>
108+
<Text>{table_name}</Text>
109+
<Label>primary key</Label>
110+
<Text>{primaryKey}</Text>
111+
{primaryKeyRelationships.length === 0 && (
112+
<Label>The primary key is not used in any other table</Label>
113+
)}
114+
{primaryKeyRelationships.length > 0 && (
115+
<div>
116+
<Label>The primary key is referenced in</Label>
117+
<ul>{primaryKeyRelationships}</ul>
118+
</div>
119+
)}
120+
{foreignKeyRelationships.length === 0 && (
121+
<Label>This table does not have any foreign keys</Label>
122+
)}
123+
{foreignKeyRelationships.length > 0 && (
124+
<div>
125+
<Label>foreign keys in this table are</Label>
126+
<ul>{foreignKeyRelationships}</ul>
127+
</div>
149128
)}
150129
</SidePanelTableListWrapper>
151130
</Grommet>

‎app/components/sidepanels/SettingsPanel.tsx

Lines changed: 11 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import * as React from 'react';
2-
import { useReducer, useContext, useState, useEffect } from 'react';
32
import { NavLink } from 'react-router-dom';
43
import styled from 'styled-components';
54
import { ipcRenderer } from 'electron';
6-
import Context from '../../contexts/themeContext';
7-
import themeReducer from '../../reducers/themeReducer';
5+
import NestedCollapsible from './sidePanelMolecules/doubleCollapsible'
6+
import SingleCollapsible from './sidePanelMolecules/SingleCollapsible'
7+
import { SettingsHead, SignOutLink } from './sidePanelMolecules/titles'
8+
89

910
const PanelWrapper = styled.div`
1011
display: flex;
1112
flex-direction: column;
12-
justify-content: space-between;
13-
font-family: 'Poppins', sans-serif;
13+
justify-content: space-between
14+
color: black;
15+
font-family: 'Poppins', sans-serif;˜
1416
padding: 20px;
1517
padding: 40px;
1618
width: 250px;
@@ -20,70 +22,21 @@ const TopSection = styled.section`
2022
display: flex;
2123
flex-direction: column;
2224
`;
23-
const DivWrapper = styled.div`
24-
display: flex;
25-
flex-direction: column;
26-
`;
27-
const Title = styled.h1`
28-
font-size: 30px;
29-
`;
30-
const Label = styled.label`
31-
padding: 10px 0;
32-
`;
33-
const SignOut = styled.span`
34-
`;
3525

3626
const SettingsPanel = ({ intervalId }) => {
37-
const [context, setContext] = useContext(Context);
38-
const [state, dispatch] = useReducer(themeReducer, context);
39-
const [activeMode, setActiveMode] = useState('default');
40-
4127
const logOut = () => {
4228
clearInterval(intervalId);
4329
ipcRenderer.send('logout-to-main', 'userlogout');
4430
};
4531

46-
useEffect(() => {
47-
setContext(state);
48-
}, [state]);
49-
5032
return (
5133
<PanelWrapper>
5234
<TopSection>
53-
<Title>Settings</Title>
54-
55-
<DivWrapper>
56-
<Label>Theme</Label>
57-
<select
58-
name="modeList"
59-
onChange={e => {
60-
setActiveMode(e.target.value);
61-
ipcRenderer.send('user-theme-selected', e.target.value);
62-
dispatch({
63-
type: 'CHANGE_MODE',
64-
selected: e.target.value,
65-
payload: activeMode
66-
});
67-
}}
68-
>
69-
{context.map(modeObj => (
70-
<option key={modeObj.value} value={modeObj.value}>
71-
{modeObj.value}
72-
</option>
73-
))}
74-
</select>
75-
</DivWrapper>
76-
<DivWrapper>
77-
<Label>Font Size</Label>
78-
<select>
79-
<option value="">Normal</option>
80-
<option value="">small</option>
81-
<option value="">large</option>
82-
<option value="">Extra-Large</option>
83-
</select>
84-
</DivWrapper>
35+
<SettingsHead />
36+
<NestedCollapsible />
37+
<SingleCollapsible />
8538
<NavLink onClick={logOut} to="/">
86-
<SignOut>SignOut</SignOut>
39+
<SignOutLink />
8740
</NavLink>
8841
</TopSection>
8942
</PanelWrapper>

‎app/components/sidepanels/sidePanelMolecules/SingleCollapsible.tsx

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import React, { Component } from "react";
2+
import { Box, Button, Collapsible, Grommet, Text } from "grommet";
3+
import { grommet } from "grommet/themes";
4+
import MenuButton from './menuButton'
5+
6+
7+
8+
9+
class SingleCollapsible extends Component {
10+
state = {
11+
openMenu1: false,
12+
};
13+
14+
render() {
15+
const { openMenu1 } = this.state;
16+
return (
17+
<Grommet theme={grommet}>
18+
<Box width="small">
19+
<MenuButton
20+
open={openMenu1}
21+
label="Font Size"
22+
onClick={() => {
23+
const newOpenMenu1 = !openMenu1;
24+
this.setState({
25+
openMenu1: newOpenMenu1
26+
});
27+
}}
28+
/>
29+
30+
<Collapsible open ={openMenu1}>
31+
<Button
32+
hoverIndicator="background"
33+
onClick={() => alert("xtrasmall clicked")}
34+
>
35+
<Box
36+
margin={{ left: "medium" }}
37+
direction="row"
38+
align="center"
39+
pad="xsmall"
40+
>
41+
<Text size="small">Extra Small</Text>
42+
</Box>
43+
</Button>
44+
45+
46+
<Button
47+
hoverIndicator="background"
48+
onClick={() => alert("small clicked")}
49+
>
50+
<Box
51+
margin={{ left: "medium" }}
52+
direction="row"
53+
align="center"
54+
pad="xsmall"
55+
>
56+
<Text size="small">Small</Text>
57+
</Box>
58+
</Button>
59+
60+
61+
<Button
62+
hoverIndicator="background"
63+
onClick={() => alert("medium clicked")}
64+
>
65+
<Box
66+
margin={{ left: "medium" }}
67+
direction="row"
68+
align="center"
69+
pad="xsmall"
70+
>
71+
<Text size="small">Medium</Text>
72+
</Box>
73+
74+
</Button>
75+
<Button
76+
hoverIndicator="background"
77+
onClick={() => alert("large clicked")}
78+
>
79+
<Box
80+
margin={{ left: "medium" }}
81+
direction="row"
82+
align="center"
83+
pad="xsmall"
84+
>
85+
<Text size="small">Large</Text>
86+
</Box>
87+
</Button>
88+
89+
<Button
90+
hoverIndicator="background"
91+
onClick={() => alert("geriatric clicked")}
92+
>
93+
<Box
94+
margin={{ left: "medium" }}
95+
direction="row"
96+
align="center"
97+
pad="xsmall"
98+
>
99+
<Text size="small">Geriatric</Text>
100+
</Box>
101+
</Button>
102+
103+
104+
105+
{}
106+
</Collapsible>
107+
108+
</Box>
109+
</Grommet>
110+
);
111+
}
112+
113+
}
114+
115+
116+
117+
118+
export default SingleCollapsible

0 commit comments

Comments
 (0)