NFC-Doorlock/ESP8266-Firmware
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added ui elements

Browse Source
This commit is contained in:
Jean Jacques Avril
2021-11-06 16:25:52 +01:00
parent 09e6deb019
commit dc73b6d991
21 changed files with 342 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/Button.jsx
+22
View File
@@ -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
web/src/components/Card.jsx
+2
View File
@@ -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;
}
web/src/components/Checkbox.jsx
+50
View File
@@ -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 }) => (
<CheckboxWrapper className={className}>
<CheckboxOrigin checked={checked} {...props} />
<CheckboxStyled checked={checked} />
</CheckboxWrapper>
);
export default Checkbox;
web/src/components/Checkbox.svg
+11
View File
@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
</style>
<path class="st0" d="M26.66,289.39l138.79,155.55c7.35,8.24,20.27,8.1,27.45-0.28l278.92-325.86c5.17-6.04,5.83-14.73,1.63-21.48
l-27.59-44.36c-6.48-10.41-21.18-11.59-29.23-2.34L214.5,282.9c-7.55,8.67-21.14,8.28-28.17-0.82l-89.7-116.01
c-8.54-11.05-25.83-8.78-31.23,4.1L23.45,270.2C20.73,276.68,21.98,284.14,26.66,289.39z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 770 B

web/src/components/ColourPalette.jsx
+25
View File
@@ -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 (
<div>
{Object.keys(colours).map((name, index) => (
<Element bg={colours[name]}>{name}</Element>
))}
</div>
)
}
web/src/components/CreateUserWidget.jsx
+2 -1
View File
@@ -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 {
<TextInput id="pin" label="PIN" />
<TextInput id="rfid" disabled label="RFID" button="Scan" value="Scanning RFID" onClick={(e)=>{console.log("Button Pressed",e)}}/>
<TextInput id="Expire_Date" label="Expire Date" type="date" />
<button>Add</button>
<Button>Create User</Button><Button disabled>Disabled</Button>
</Card>
)
}
web/src/components/SearchBox.jsx
+3 -2
View File
@@ -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;
web/src/components/Select.jsx
+22
View File
@@ -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;
web/src/components/Table.jsx
+21
View File
@@ -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;
web/src/components/TextInput.jsx
+1 -1
View File
@@ -99,7 +99,7 @@ export class TextInput extends Component {
`;
return (
<InputWrapper>
<input id={this.props.id} placeholder="" type={this.props.type ? this.props.type : "text"} value={this.props.value} disabled={this.props.disabled} />
<input id={this.props.id} placeholder=" " type={this.props.type ? this.props.type : "text"} value={this.props.value} disabled={this.props.disabled} />
{this.props.label != null ? <label htmlFor={this.props.id}>{this.props.label}</label> : ""}
{this.props.button != null ? <button onClick={this.props.onClick}>{this.props.button}</button> : ""}
</InputWrapper>
web/src/components/index.js
+8 -1
View File
@@ -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 }
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}