Stian Fredrik Aune
4 years ago
11 changed files with 238 additions and 37 deletions
-
5webui/package.json
-
49webui/src/App.tsx
-
34webui/src/contexts/DialogContext.tsx
-
9webui/src/models/Dialog.ts
-
23webui/src/models/Icons.ts
-
3webui/src/pages/SettingsPage.tsx
-
20webui/src/primitives/Elements.tsx
-
67webui/src/primitives/Layout.sass
-
41webui/src/primitives/Layout.tsx
-
3webui/src/res/colors.sass
-
19webui/yarn.lock
@ -0,0 +1,34 @@ |
|||||
|
import React, {createContext, useState} from "react"; |
||||
|
import {DialogConfig, DialogType} from "../models/Dialog"; |
||||
|
import {unimplemented} from "../helpers/misc"; |
||||
|
|
||||
|
interface DialogContextValue { |
||||
|
dialog: DialogConfig, |
||||
|
setDialog: (dialog: DialogConfig) => void, |
||||
|
} |
||||
|
|
||||
|
const DialogContext = createContext<DialogContextValue>({ |
||||
|
dialog: {type: DialogType.None}, |
||||
|
setDialog: unimplemented, |
||||
|
}); |
||||
|
|
||||
|
export const DialogContextProvider: React.FC = ({children}) => { |
||||
|
const [dialog, setDialog] = useState<DialogConfig>({type: DialogType.None}); |
||||
|
|
||||
|
return ( |
||||
|
<DialogContext.Provider value={{dialog, setDialog}}> |
||||
|
{children} |
||||
|
</DialogContext.Provider> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export function makeDialog(dialog: DialogConfig) { |
||||
|
switch (dialog.type) { |
||||
|
case DialogType.None: |
||||
|
return undefined; |
||||
|
case DialogType.AddColor: |
||||
|
return undefined; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default DialogContext; |
@ -0,0 +1,9 @@ |
|||||
|
export enum DialogType { |
||||
|
None, |
||||
|
AddColor, |
||||
|
} |
||||
|
|
||||
|
export type DialogConfig = |
||||
|
| { type: DialogType.None } |
||||
|
| { type: DialogType.AddColor } |
||||
|
; |
@ -1,26 +1,49 @@ |
|||||
import bridgeIcon from "@iconify-icons/mdi/bridge"; |
import bridgeIcon from "@iconify-icons/mdi/bridge"; |
||||
|
import checkIcon from "@iconify-icons/mdi/check"; |
||||
|
import crossIcon from "@iconify-icons/mdi/window-close"; |
||||
|
import cogIcon from "@iconify-icons/mdi/cog"; |
||||
import hexagonIcon from "@iconify-icons/mdi/hexagon"; |
import hexagonIcon from "@iconify-icons/mdi/hexagon"; |
||||
|
import hexagonGroupIcon from "@iconify-icons/mdi/hexagon-multiple"; |
||||
import lightBulbIcon from "@iconify-icons/mdi/lightbulb"; |
import lightBulbIcon from "@iconify-icons/mdi/lightbulb"; |
||||
import lightBulbGroupIcon from "@iconify-icons/mdi/lightbulb-group"; |
import lightBulbGroupIcon from "@iconify-icons/mdi/lightbulb-group"; |
||||
|
import lightSwitchIcon from '@iconify-icons/mdi/light-switch'; |
||||
|
import routerIcon from "@iconify-icons/mdi/router-wireless"; |
||||
import squareIcon from "@iconify-icons/mdi/square-rounded"; |
import squareIcon from "@iconify-icons/mdi/square-rounded"; |
||||
|
import triangleIcon from "@iconify-icons/mdi/triangle"; |
||||
|
|
||||
|
|
||||
|
|
||||
// To add a new icon, follow the instructions on this page:
|
// To add a new icon, follow the instructions on this page:
|
||||
// https://iconify.design/icon-sets/mdi/
|
// https://iconify.design/icon-sets/mdi/
|
||||
|
|
||||
export enum LuciferIcon { |
export enum LuciferIcon { |
||||
Bridge = "Bridge", |
Bridge = "Bridge", |
||||
|
Check = "Check", |
||||
|
Cog = "Cog", |
||||
|
Cross = "Cross", |
||||
Bulb = "Bulb", |
Bulb = "Bulb", |
||||
BulbGroup = "BulbGroup", |
BulbGroup = "BulbGroup", |
||||
Hexagon = "Hexagon", |
Hexagon = "Hexagon", |
||||
|
HexagonGroup = "HexagonGroup", |
||||
|
Router = "Router", |
||||
Square = "Square", |
Square = "Square", |
||||
|
Switch = "Switch", |
||||
|
Triangle = "Triangle", |
||||
} |
} |
||||
|
|
||||
const iconMap = { |
const iconMap = { |
||||
[LuciferIcon.Bridge]: bridgeIcon, |
[LuciferIcon.Bridge]: bridgeIcon, |
||||
|
[LuciferIcon.Check]: checkIcon, |
||||
|
[LuciferIcon.Cog]: cogIcon, |
||||
|
[LuciferIcon.Cross]: crossIcon, |
||||
[LuciferIcon.Bulb]: lightBulbIcon, |
[LuciferIcon.Bulb]: lightBulbIcon, |
||||
[LuciferIcon.BulbGroup]: lightBulbGroupIcon, |
[LuciferIcon.BulbGroup]: lightBulbGroupIcon, |
||||
[LuciferIcon.Hexagon]: hexagonIcon, |
[LuciferIcon.Hexagon]: hexagonIcon, |
||||
|
[LuciferIcon.HexagonGroup]: hexagonGroupIcon, |
||||
|
[LuciferIcon.Router]: routerIcon, |
||||
[LuciferIcon.Square]: squareIcon, |
[LuciferIcon.Square]: squareIcon, |
||||
|
[LuciferIcon.Switch]: lightSwitchIcon, |
||||
|
[LuciferIcon.Triangle]: triangleIcon, |
||||
} |
} |
||||
|
|
||||
export function toIconify(icon: LuciferIcon): object { |
export function toIconify(icon: LuciferIcon): object { |
||||
|
@ -1,8 +1,11 @@ |
|||||
$color-background: #111 |
$color-background: #111 |
||||
$color-background-elevated: #222 |
$color-background-elevated: #222 |
||||
|
$color-background-elevated2: #333 |
||||
$color-foreground: rgb(204, 204, 204) |
$color-foreground: rgb(204, 204, 204) |
||||
|
$color-foreground-elevated: #FFF |
||||
$color-foreground-dark: rgba(238, 238, 238, 0.05) |
$color-foreground-dark: rgba(238, 238, 238, 0.05) |
||||
|
|
||||
|
|
||||
body, html |
body, html |
||||
background-color: $color-background |
background-color: $color-background |
||||
color: $color-foreground |
color: $color-foreground |
Write
Preview
Loading…
Cancel
Save
Reference in new issue