From dc73b6d9912a0ec5a7ea1a965dc318345515af67 Mon Sep 17 00:00:00 2001 From: Jean Jacques Avril Date: Sat, 6 Nov 2021 16:25:52 +0100 Subject: [PATCH] added ui elements --- web/public/index.html | 2 +- web/src/App.jsx | 5 +- web/src/components/Button.jsx | 22 ++++++++ web/src/components/Card.jsx | 2 + web/src/components/Checkbox.jsx | 50 ++++++++++++++++++ web/src/components/Checkbox.svg | 11 ++++ web/src/components/ColourPalette.jsx | 25 +++++++++ web/src/components/CreateUserWidget.jsx | 3 +- web/src/components/SearchBox.jsx | 5 +- web/src/components/Select.jsx | 22 ++++++++ web/src/components/Table.jsx | 21 ++++++++ web/src/components/TextInput.jsx | 2 +- web/src/components/index.js | 9 +++- web/src/theme/index.js | 2 +- web/src/views/AccountEdit.jsx | 13 +++++ web/src/views/AccountManager.jsx | 69 ++++++++++++++++++++++--- web/src/views/AdminUI.jsx | 35 +++++-------- web/src/views/Logs.jsx | 39 +++++++++++--- web/src/views/Overlay.jsx | 41 +++++++++++++++ web/src/views/System.jsx | 8 +-- web/src/views/index.js | 3 +- 21 files changed, 342 insertions(+), 47 deletions(-) create mode 100644 web/src/components/Button.jsx create mode 100644 web/src/components/Checkbox.jsx create mode 100644 web/src/components/Checkbox.svg create mode 100644 web/src/components/ColourPalette.jsx create mode 100644 web/src/components/Select.jsx create mode 100644 web/src/components/Table.jsx create mode 100644 web/src/views/AccountEdit.jsx create mode 100644 web/src/views/Overlay.jsx diff --git a/web/public/index.html b/web/public/index.html index 6f22205..4d5b7b5 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -7,7 +7,7 @@ Doorlock diff --git a/web/src/App.jsx b/web/src/App.jsx index a297819..85733a3 100644 --- a/web/src/App.jsx +++ b/web/src/App.jsx @@ -4,7 +4,7 @@ import { Route, } from "react-router-dom"; import { ThemeProvider } from "styled-components"; -import {CreateUserWidget, RecentActivityWidget, SystemStatusWidget} from './components' +import {CreateUserWidget, RecentActivityWidget, SystemStatusWidget, ColourPalette} from './components' import {AccountManager, AdminUI, Logs, System} from './views' import theme from './theme'; function App() { @@ -14,7 +14,8 @@ function App() { - + + diff --git a/web/src/components/Button.jsx b/web/src/components/Button.jsx new file mode 100644 index 0000000..be449a8 --- /dev/null +++ b/web/src/components/Button.jsx @@ -0,0 +1,22 @@ +import styled from 'styled-components' + +const Button = styled.button` +font-size: 1em; +font-weight: bold; +color: ${props=>props.disabled?props.theme.colours.color1:props.theme.colours.color3}; +display: inline-block; +padding: 0.3em 0.5em; +border: solid .1em ${props=>props.disabled?props.theme.colours.color7:props.theme.colours.color3}; +background: ${props=>props.disabled?props.theme.colours.color9:props.theme.colours.color4}; +transition: ease-in-out 225ms; +&:hover{ + background-color: ${props=>props.disabled?props.theme.colours.color9:props.theme.colours.color3}; + color: ${props=>props.disabled?props.theme.colours.color1:props.theme.colours.color6}; + border: solid .1em ${props=>props.disabled?props.theme.colours.color7:props.theme.colours.color10}; + text-shadow: 0 0 .2em ${props=>props.disabled?"transparent":props.theme.colours.color9}; +} +`; + + + +export default Button diff --git a/web/src/components/Card.jsx b/web/src/components/Card.jsx index 59aae88..b4512fc 100644 --- a/web/src/components/Card.jsx +++ b/web/src/components/Card.jsx @@ -7,6 +7,8 @@ background: ${props=>props.theme.colours.color1}; border-radius: 1em; padding: 1em; margin: 1em; +display: block; +flex-direction: column; h4 { margin: 0; } diff --git a/web/src/components/Checkbox.jsx b/web/src/components/Checkbox.jsx new file mode 100644 index 0000000..5d931ad --- /dev/null +++ b/web/src/components/Checkbox.jsx @@ -0,0 +1,50 @@ +import styled from "styled-components"; +import Hook from './Checkbox.svg' +const CheckboxOrigin = styled.input.attrs({ type: 'checkbox' })` + visibility: hidden; +`; + + +const CheckboxStyled = styled.div` +position: absolute; +top: 0; +right: 0; +font-size: 1em; +width: 1em; +height: 1em; +font-weight: bold; +color: ${props => props.disabled ? props.theme.colours.color1 : props.theme.colours.color3}; +border: solid .1em ${props => props.disabled ? props.theme.colours.color7 : props.theme.colours.color3}; +background: ${props => props.disabled ? props.theme.colours.color9 : props.theme.colours.color4}; +transition: ease-in-out 125ms; + +${CheckboxOrigin}:checked +&{ + border: solid .1em ${props => props.disabled ? props.theme.colours.color7 : props.theme.colours.color3}; + background-color: ${props => props.disabled ? props.theme.colours.color9 : props.theme.colours.color3}; + color: ${props => props.disabled ? props.theme.colours.color1 : props.theme.colours.color6}; + background-image: url(${Hook}); + background-position: center; + background-repeat: no-repeat; +} +${CheckboxOrigin}:hover +&{ + background-color: ${props => props.disabled ? props.theme.colours.color9 : props.theme.colours.color3}; + color: ${props => props.disabled ? props.theme.colours.color1 : props.theme.colours.color6}; + border: solid .1em ${props => props.disabled ? props.theme.colours.color7 : props.theme.colours.color10}; + +} +`; +const CheckboxWrapper = styled.label` + position: relative; + display: inline-block; + vertical-align: middle; +`; + + +const Checkbox = ({ className, checked, ...props }) => ( + + + + + +); +export default Checkbox; \ No newline at end of file diff --git a/web/src/components/Checkbox.svg b/web/src/components/Checkbox.svg new file mode 100644 index 0000000..c8b3e5b --- /dev/null +++ b/web/src/components/Checkbox.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/web/src/components/ColourPalette.jsx b/web/src/components/ColourPalette.jsx new file mode 100644 index 0000000..cc6ad3b --- /dev/null +++ b/web/src/components/ColourPalette.jsx @@ -0,0 +1,25 @@ +import React from 'react' +import styled from 'styled-components' +import { useContext } from 'react'; +import { ThemeContext } from 'styled-components'; +const Element = styled.div` +//width: 1em; +height: 2em; +display: block; +background: ${props=> props.bg}; +color: #707070; +padding: .5em; + +`; +export default function ColourPalette() { + var colours = useContext(ThemeContext).colours; + return ( +
+ + + {Object.keys(colours).map((name, index) => ( + {name} + ))} +
+ ) +} diff --git a/web/src/components/CreateUserWidget.jsx b/web/src/components/CreateUserWidget.jsx index e204e5b..52943b4 100644 --- a/web/src/components/CreateUserWidget.jsx +++ b/web/src/components/CreateUserWidget.jsx @@ -1,6 +1,7 @@ import React, { Component } from 'react' import TextInput from './TextInput' import Card from './Card' +import Button from './Button' export class CreateUserWidget extends Component { render() { return ( @@ -13,7 +14,7 @@ export class CreateUserWidget extends Component { {console.log("Button Pressed",e)}}/> - + ) } diff --git a/web/src/components/SearchBox.jsx b/web/src/components/SearchBox.jsx index 725f549..321665d 100644 --- a/web/src/components/SearchBox.jsx +++ b/web/src/components/SearchBox.jsx @@ -9,7 +9,7 @@ export class SearchBox extends Component { border-radius: .5rem; display: inline-flex; white-space: nowrap; - margin-left: auto; + //margin-left: auto; transition: ease-in-out all 500ms; flex-grow: 0; max-width: 20em; @@ -28,7 +28,7 @@ export class SearchBox extends Component { background: ${this.props.theme.colours.color3}; border: none; outline: none; - color: ${this.props.theme.colours.color6}; + color: ${this.props.theme.colours.color10}; flex-grow: 0; margin-left: auto; width: 100%; @@ -41,6 +41,7 @@ export class SearchBox extends Component { + button{ height: 2rem; border: none; + transition: ease-in-out all 100ms; color: ${this.props.theme.colours.color6}; border-radius: 0 .5rem .5rem 0; display: inline-flex; diff --git a/web/src/components/Select.jsx b/web/src/components/Select.jsx new file mode 100644 index 0000000..71492bb --- /dev/null +++ b/web/src/components/Select.jsx @@ -0,0 +1,22 @@ +import styled from "styled-components"; + +const Select = styled.select` +font-size: 1em; +font-weight: bold; +color: ${props=>props.disabled?props.theme.colours.color1:props.theme.colours.color3}; +display: inline-block; +padding: 0.3em 0.5em; +border: solid .1em ${props=>props.disabled?props.theme.colours.color7:props.theme.colours.color3}; +background: ${props=>props.disabled?props.theme.colours.color9:props.theme.colours.color4}; +transition: ease-in-out 225ms; + +option { + background-color: ${props=>props.disabled?props.theme.colours.color9:props.theme.colours.color3}; + color: ${props=>props.disabled?props.theme.colours.color1:props.theme.colours.color6}; + border: solid .1em ${props=>props.disabled?props.theme.colours.color7:props.theme.colours.color10}; + text-shadow: 0 0 .2em ${props=>props.disabled?"transparent":props.theme.colours.color9}; +} + +`; + +export default Select; \ No newline at end of file diff --git a/web/src/components/Table.jsx b/web/src/components/Table.jsx new file mode 100644 index 0000000..70ae645 --- /dev/null +++ b/web/src/components/Table.jsx @@ -0,0 +1,21 @@ +import styled from "styled-components"; +const Table = styled.table` +width: 100%; +border-spacing: 0; +border-collapse: collapse; +thead{ + background-color: ${props=>props.theme.colours.color9}; + font-weight: bold; + +} +tbody tr:not(:last-child){ + border-bottom: 1px solid ${props=>props.theme.colours.color9}; +} +tr:nth-child(2){ + background-color: ${props=>props.theme.colours.color1}; +} +td{ + padding: 0.5em 1em; +} +`; +export default Table; \ No newline at end of file diff --git a/web/src/components/TextInput.jsx b/web/src/components/TextInput.jsx index ed2fa61..7afd0bb 100644 --- a/web/src/components/TextInput.jsx +++ b/web/src/components/TextInput.jsx @@ -99,7 +99,7 @@ export class TextInput extends Component { `; return ( - + {this.props.label != null ? : ""} {this.props.button != null ? : ""} diff --git a/web/src/components/index.js b/web/src/components/index.js index 6a9d2fe..4d15bcb 100644 --- a/web/src/components/index.js +++ b/web/src/components/index.js @@ -2,4 +2,11 @@ import CreateUserWidget from "./CreateUserWidget"; import RecentActivityWidget from "./RecentActivityWidget"; import SystemStatusWidget from "./SystemStatusWidget"; import SearchBox from "./SearchBox"; -export { CreateUserWidget, RecentActivityWidget, SystemStatusWidget, SearchBox } \ No newline at end of file +import Card from "./Card"; +import TextInput from "./TextInput"; +import Button from "./Button"; +import Select from "./Select"; +import Checkbox from "./Checkbox"; +import ColourPalette from "./ColourPalette"; +import Table from "./Table"; +export { CreateUserWidget, RecentActivityWidget, SystemStatusWidget, SearchBox, Card, TextInput, Button, Select, Checkbox, Table, ColourPalette} \ No newline at end of file diff --git a/web/src/theme/index.js b/web/src/theme/index.js index 3601ca1..bed5837 100644 --- a/web/src/theme/index.js +++ b/web/src/theme/index.js @@ -13,7 +13,7 @@ const colours1 = { const colours2 = { color1: "#1e2e2e", color2: "#273a37", - color3: "#43f48d", + color3: "#18cb64", color4: "#012400be", color5: "#254904c6", color6: "#daebd9bf", diff --git a/web/src/views/AccountEdit.jsx b/web/src/views/AccountEdit.jsx new file mode 100644 index 0000000..09456f8 --- /dev/null +++ b/web/src/views/AccountEdit.jsx @@ -0,0 +1,13 @@ +import React, { Component } from 'react' + +export class AccountEdit extends Component { + render() { + return ( +
+ +
+ ) + } +} + +export default AccountEdit diff --git a/web/src/views/AccountManager.jsx b/web/src/views/AccountManager.jsx index 6909946..3f68fec 100644 --- a/web/src/views/AccountManager.jsx +++ b/web/src/views/AccountManager.jsx @@ -1,15 +1,72 @@ import React, { Component } from 'react' import Card from '../components/Card' +import styled, { withTheme } from 'styled-components' +import { Button, Table, Select, Checkbox } from '../components'; + export class AccountManager extends Component { render() { + const ActionSelect = styled.div` + width: 100%; + + display: flex; + justify-content: flex-end; + `; + return ( - -

Account Manager

-
- Hello World - + <> + +

Account Manager

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UserIDFirst NameLast NameLast Access
001AntonStigloher06.10.2021
002MaxMustermann07.10.2021
003PeterLustig08.10.2021
+ + + + + ) } } -export default AccountManager +export default withTheme(AccountManager) diff --git a/web/src/views/AdminUI.jsx b/web/src/views/AdminUI.jsx index 56fcb90..890f916 100644 --- a/web/src/views/AdminUI.jsx +++ b/web/src/views/AdminUI.jsx @@ -30,37 +30,28 @@ export class AdminUI extends Component { -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: header; - display: -webkit-inline-box; - display: -ms-inline-flexbox; + display: inline-flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; + flex-wrap: wrap; + flex-direction: row; min-height: auto; padding: .5em; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: space-between; + align-items: center; background: ${this.props.theme.colours.color1}; color: ${this.props.theme.colours.color7}; h1 { -ms-flex-wrap: nowrap; flex-wrap: nowrap; white-space: nowrap; - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; font-size: 1.5em; + margin: .5em; + margin-right: auto; + padding-right: 2em; } &::after { - -ms-grid-column-align: start; justify-self: start; position: absolute; display: block; @@ -73,6 +64,7 @@ export class AdminUI extends Component { z-index: 1; } nav{ + margin-left: auto; display: inline-flex; flex-wrap: nowrap; flex-shrink: 1; @@ -207,6 +199,7 @@ export class AdminUI extends Component { align-items: flex-start; flex-wrap: wrap; padding: 1em; + color: ${props=>props.theme.colours.color6}; background: ${this.props.theme.colours.color2}; `; return ( @@ -217,7 +210,7 @@ export class AdminUI extends Component { @@ -225,9 +218,9 @@ export class AdminUI extends Component {

Menu{props => this.props.theme}

    -
  • Status
    • -
  • Account
    • -
  • Log
    • +
  • Dashboard
    • +
  • Accounts
    • +
  • Logs
  • System
 diff --git a/web/src/views/Logs.jsx b/web/src/views/Logs.jsx index 199569f..fc6dfbd 100644 --- a/web/src/views/Logs.jsx +++ b/web/src/views/Logs.jsx @@ -1,15 +1,42 @@ import React, { Component } from 'react' +import styled, {withTheme} from 'styled-components' +import { Table, Button } from '../components' import Card from '../components/Card' export class Logs extends Component { render() { return ( - -

Logs

-
- Hello World - + <> +

Logs

+ + + + + + + + + + + + + + + + + + + + + + + + + +
TimeTypeInfo
12.12.12 08:12Authentication[NFC] Max Mustermann
12.12.12 08:12Authentication Error[NFC] 92:23:c3:32
12.12.12 08:12Admin LoginToni Stigloher
+ + ) } } -export default Logs +export default withTheme(Logs) diff --git a/web/src/views/Overlay.jsx b/web/src/views/Overlay.jsx new file mode 100644 index 0000000..8a34bed --- /dev/null +++ b/web/src/views/Overlay.jsx @@ -0,0 +1,41 @@ +import React, { Children, Component } from 'react' +import styled, {withTheme, createGlobalStyle} from 'styled-components' + +export class Overlay extends Component { + render() { + const GlobalStyle = createGlobalStyle` + #root{ + overflow : hidden ; + //pointer-events:none; + //user-select: none; + } + `; + const OverlayWrapper = styled.div` + user-select: all; + pointer-events: all; + filter: blur(0); + position: fixed; + top: 0; + left: 0; + width: calc(100vw - 4em); + margin: 2em; + height: calc(100vh - 4em); + z-index: 2; + border-radius: 1em; + padding: 1em; + color: ${this.props.theme.colours.color3}; + background: ${this.props.theme.colours.color9}; + box-shadow: 0 0 2em ${this.props.theme.colours.color3}; + border: 1px solid ${this.props.theme.colours.color3}; + overflow: auto; + `; + return ( + + + {this.props.children} + + ) + } +} + +export default withTheme(Overlay) diff --git a/web/src/views/System.jsx b/web/src/views/System.jsx index 703c3d0..0348d66 100644 --- a/web/src/views/System.jsx +++ b/web/src/views/System.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react' -import Card from '../components/Card' -import TextInput from '../components/TextInput' +import styled, {withTheme} from 'styled-components' +import {Button, Card, TextInput} from '../components' export class System extends Component { render() { return ( @@ -15,7 +15,7 @@ export class System extends Component {
- + @@ -23,4 +23,4 @@ export class System extends Component { } } -export default System +export default withTheme(System) diff --git a/web/src/views/index.js b/web/src/views/index.js index 3aacf28..4481902 100644 --- a/web/src/views/index.js +++ b/web/src/views/index.js @@ -2,4 +2,5 @@ import AdminUI from "./AdminUI"; import AccountManager from "./AccountManager"; import Logs from "./Logs"; import System from "./System"; -export {AccountManager, AdminUI, Logs, System} \ No newline at end of file +import Overlay from "./Overlay"; +export {AccountManager, AdminUI, Logs, System, Overlay} \ No newline at end of file