[Work in progress] A Reactjs-based web app to help with ricing: designing beautiful unix desktop environments.
git clone https://mcol.xyz/code/unix.sexy
Log | Files | Refs

commit 2e785cdfe87e6b071c3fe721a86487ecdec03d27
parent 9b9c3120cb250f431ca2bd5a95d56b89ec89c628
Author: mcol <mcol@posteo.net>
Date:   Sun,  7 Jun 2020 11:18:36 +0100

reorganise panels into panel files in individual features, fix all imports

Diffstat:
Ajsconfig.json | 6++++++
Msrc/App.js | 8++++----
Asrc/features/background/panel.js | 68++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Msrc/features/background/slice.js | 2+-
Asrc/features/launchers/index.js | 8++++++++
Asrc/features/launchers/panel.js | 13+++++++++++++
Asrc/features/misc/index.js | 8++++++++
Asrc/features/misc/panel.js | 10++++++++++
Asrc/features/notifications/index.js | 8++++++++
Asrc/features/notifications/panel.js | 10++++++++++
Dsrc/features/reset.js | 5-----
Asrc/features/reset/panel.js | 15+++++++++++++++
Asrc/features/reset/slice.js | 6++++++
Asrc/features/status_bars/index.js | 8++++++++
Asrc/features/status_bars/panel.js | 13+++++++++++++
Dsrc/features/tabs/index.js | 50--------------------------------------------------
Asrc/features/tabs/panel.js | 51+++++++++++++++++++++++++++++++++++++++++++++++++++
Dsrc/features/windows/index.css | 3---
Asrc/features/windows/panel.js | 28++++++++++++++++++++++++++++
Msrc/features/windows/slice.js | 8++++----
Msrc/index.js | 6+++---
Asrc/panels/corner.js | 13+++++++++++++
Dsrc/panels/corner/index.js | 16----------------
Asrc/panels/desktop.js | 20++++++++++++++++++++
Dsrc/panels/desktop/index.js | 18------------------
Asrc/panels/left.js | 9+++++++++
Dsrc/panels/left/index.js | 11-----------
Asrc/panels/top.js | 48++++++++++++++++++++++++++++++++++++++++++++++++
Dsrc/panels/top/extras.js | 15---------------
Dsrc/panels/top/index.js | 44--------------------------------------------
Dsrc/panels/top/launchers.js | 15---------------
Dsrc/panels/top/notifications.js | 12------------
Dsrc/panels/top/settings.js | 59-----------------------------------------------------------
Dsrc/panels/top/status_bars.js | 15---------------
Dsrc/panels/top/windows.js | 25-------------------------
35 files changed, 354 insertions(+), 300 deletions(-)

diff --git a/jsconfig.json b/jsconfig.json @@ -0,0 +1,6 @@ +{ + "compilerOptions": { + "baseUrl": "src" + }, + "include": ["src"] +} diff --git a/src/App.js b/src/App.js @@ -1,8 +1,8 @@ import React from 'react'; -import Corner from './panels/corner'; -import Top from './panels/top'; -import Left from './panels/left'; -import Desktop from './panels/desktop'; +import { Corner } from 'panels/corner.js'; +import { Top } from 'panels/top.js'; +import { Left } from 'panels/left.js'; +import { Desktop } from 'panels/desktop.js'; function App() { diff --git a/src/features/background/panel.js b/src/features/background/panel.js @@ -0,0 +1,68 @@ +import React, { useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import ColorPicker from 'rc-color-picker'; +import 'rc-color-picker/assets/index.css'; + +import { setBackground, selectBackground, setWallpaper } from './slice'; + + +export function BackgroundCtl() { + const backgroundColour = useSelector(selectBackground); + const dispatch = useDispatch(); + const [inputColour, setInputColour] = useState(backgroundColour); + + return ( + <> + Background: + + <input + value={inputColour} + onChange={e => setInputColour(e.target.value)} + /> + + <ColorPicker + color={inputColour} + alpha={100} + onChange={c => { + setInputColour(c.color) + dispatch(setBackground(inputColour)) + }} + enableAlpha="false" + > + </ColorPicker> + + <button onClick={() => dispatch(setBackground(inputColour))}> + Set + </button> + </> + ); +}; + + +export function WallpaperCtl() { + const dispatch = useDispatch(); + + return ( + <> + <input + type="file" + accept="image/*" + multiple="false" + onChange={e => { + if (e.target.files[0]) { + let reader = new FileReader(); + reader.onload = (e) => { + dispatch(setWallpaper(e.target.result)); + }; + reader.readAsDataURL(e.target.files[0]); + } + }} + /> + + <ul> + <li>wallpaper saturation</li> + <li>wallpaper tint</li> + </ul> + </> + ) +} diff --git a/src/features/background/slice.js b/src/features/background/slice.js @@ -1,6 +1,6 @@ import { createSlice } from '@reduxjs/toolkit'; -import { fixColour } from '../helpers'; +import { fixColour } from 'features/helpers'; export const backgroundSlice = createSlice({ diff --git a/src/features/launchers/index.js b/src/features/launchers/index.js @@ -0,0 +1,8 @@ +import React from 'react'; + + +export default function Launcher() { + return ( + undefined + ); +}; diff --git a/src/features/launchers/panel.js b/src/features/launchers/panel.js @@ -0,0 +1,13 @@ +import React from 'react'; + + +export function LauncherCtl() { + return ( + <ul> + <li>rofi / dmenu</li> + <li>cairo-dock</li> + <li>xmenu</li> + <li>DE-specific?</li> + </ul> + ); +}; diff --git a/src/features/misc/index.js b/src/features/misc/index.js @@ -0,0 +1,8 @@ +import React from 'react'; + + +export default function Misc() { + return ( + undefined + ); +}; diff --git a/src/features/misc/panel.js b/src/features/misc/panel.js @@ -0,0 +1,10 @@ +import React from 'react'; + + +export function MiscCtl() { + return ( + <ul> + <li>?</li> + </ul> + ); +}; diff --git a/src/features/notifications/index.js b/src/features/notifications/index.js @@ -0,0 +1,8 @@ +import React from 'react'; + + +export default function Notifications() { + return ( + undefined + ); +}; diff --git a/src/features/notifications/panel.js b/src/features/notifications/panel.js @@ -0,0 +1,10 @@ +import React from 'react'; + + +export function NotificationCtl() { + return ( + <ul> + <li>dunst</li> + </ul> + ); +}; diff --git a/src/features/reset.js b/src/features/reset.js @@ -1,5 +0,0 @@ -export const RESET = 'RESET' - -export default function reset() { - return { type: RESET } -} diff --git a/src/features/reset/panel.js b/src/features/reset/panel.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { useDispatch } from 'react-redux'; + +import reset from './slice.js'; + + +export function ResetCtl() { + const dispatch = useDispatch(); + + return ( + <button onClick={() => dispatch(reset())}> + Reset + </button> + ) +} diff --git a/src/features/reset/slice.js b/src/features/reset/slice.js @@ -0,0 +1,6 @@ +export const RESET = 'RESET' + + +export default function reset() { + return { type: RESET } +} diff --git a/src/features/status_bars/index.js b/src/features/status_bars/index.js @@ -0,0 +1,8 @@ +import React from 'react'; + + +export default function StatusBar() { + return ( + undefined + ); +}; diff --git a/src/features/status_bars/panel.js b/src/features/status_bars/panel.js @@ -0,0 +1,13 @@ +import React from 'react'; + + +export function StatusBarCtl() { + return ( + <ul> + <li>polybar</li> + <li>lemonbar</li> + <li>i3blocks</li> + <li>Qtile bar</li> + </ul> + ); +}; diff --git a/src/features/tabs/index.js b/src/features/tabs/index.js @@ -1,50 +0,0 @@ -import React from 'react'; -import { useDispatch, useSelector } from 'react-redux'; - -import { selectTab, setTab } from './slice'; - - -export default function Tabs(props) { - const active = useSelector(selectTab); - - return ( - <div className="tabs"> - <TabList - active={active} - children={props.children} - /> - - <div className="tab-content"> - {props.children[active].props.children} - </div> - </div> - ); -} - - -function TabList(props) { - const dispatch = useDispatch(); - - return ( - <ol className="tab-list"> - {props.children.map((child, i) => { - const { label } = child.props; - - let className = 'tab-list-item'; - if (props.active === i) { - className += ' tab-list-active'; - } - - return ( - <li - className={className} - onClick={() => dispatch(setTab(i))} - key={label} - > - {label} - </li> - ); - })} - </ol> - ) -} diff --git a/src/features/tabs/panel.js b/src/features/tabs/panel.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; + +import { selectTab, setTab } from './slice'; + + +export default function Tabs(props) { + const active = useSelector(selectTab); + + return ( + <div className="tabs"> + <TabList + active={active} + children={props.children} + /> + + <div className="tab-content"> + {props.children[active]} + </div> + </div> + ); +} + + +function TabList(props) { + const dispatch = useDispatch(); + + return ( + <ol className="tab-list"> + {props.children.map((child, i) => { + const { label } = child.props; + console.log(child) + + let className = 'tab-list-item'; + if (props.active === i) { + className += ' tab-list-active'; + } + + return ( + <li + className={className} + onClick={() => dispatch(setTab(i))} + key={label} + > + {label} + </li> + ); + })} + </ol> + ) +} diff --git a/src/features/windows/index.css b/src/features/windows/index.css @@ -1,3 +0,0 @@ -.Window { - position: absolute; -} diff --git a/src/features/windows/panel.js b/src/features/windows/panel.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { useDispatch } from 'react-redux'; + +import { addWindow, delWindow } from './slice'; + + +export function WindowCtl() { + const dispatch = useDispatch(); + + return ( + <> + <ul> + <li>Border styles</li> + <li>Title bars</li> + <li>Rounded corners</li> + <li>Shadows(picom/compton)</li> + </ul> + + <button onClick={() => dispatch(addWindow())}> + + + </button> + <button onClick={() => dispatch(delWindow())}> + - + </button> + </> + ); +} + diff --git a/src/features/windows/slice.js b/src/features/windows/slice.js @@ -5,10 +5,10 @@ export const windowSlice = createSlice({ name: 'windows', initialState: [ - { x: 320, y: 200, width: 280, height: 140, }, - { x: 640, y: 60, width: 140, height: 280, }, - { x: 640, y: 380, width: 280, height: 140, }, - { x: 460, y: 380, width: 140, height: 280, }, + { x: 320, y: 200, width: 280, height: 140 }, + { x: 640, y: 60, width: 140, height: 280 }, + { x: 640, y: 380, width: 280, height: 140 }, + { x: 460, y: 380, width: 140, height: 280 }, ], reducers: { diff --git a/src/index.js b/src/index.js @@ -2,10 +2,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; -import './index.css'; +import 'index.css'; import App from './App'; -import { store, persistor } from './store'; -import * as serviceWorker from './serviceWorker'; +import { store, persistor } from 'store'; +import * as serviceWorker from 'serviceWorker'; import { PersistGate } from 'redux-persist/integration/react'; diff --git a/src/panels/corner.js b/src/panels/corner.js @@ -0,0 +1,13 @@ +import React from 'react'; + + +export function Corner() { + return ( + <div id="Corner"> + <a href="https://unix.sexy"> + unix.sexy + </a> + <p>desktop environment builder</p> + </div> + ); +} diff --git a/src/panels/corner/index.js b/src/panels/corner/index.js @@ -1,16 +0,0 @@ -import React from 'react'; -import './index.css'; - - -export function Corner() { - return ( - <div id="Corner"> - <a href="https://unix.sexy"> - unix.sexy - </a> - </div> - ); -} - - -export default Corner; diff --git a/src/panels/desktop.js b/src/panels/desktop.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; + +import Windows from 'features/windows'; +import Wallpaper from 'features/background/index'; +import { selectBackground } from 'features/background/slice'; + + +export function Desktop() { + const background = useSelector(selectBackground); + + return ( + <div id="Desktop" style={{backgroundColor: background}}> + <Wallpaper /> + <Windows /> + </div> + ); +} + +export default Desktop; diff --git a/src/panels/desktop/index.js b/src/panels/desktop/index.js @@ -1,18 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; - -import Windows from '../../features/windows'; -import Wallpaper from '../../features/background/index'; -import { selectBackground } from '../../features/background/slice'; - - -export default function Desktop() { - const background = useSelector(selectBackground); - - return ( - <div id="Desktop" style={{backgroundColor: background}}> - <Wallpaper /> - <Windows /> - </div> - ); -} diff --git a/src/panels/left.js b/src/panels/left.js @@ -0,0 +1,9 @@ +import React from 'react'; + + +export function Left() { + return ( + <div id="Left"> + </div> + ); +} diff --git a/src/panels/left/index.js b/src/panels/left/index.js @@ -1,11 +0,0 @@ -import React from 'react'; - - -export function Left() { - return ( - <div id="Left"> - </div> - ); -} - -export default Left; diff --git a/src/panels/top.js b/src/panels/top.js @@ -0,0 +1,48 @@ +import React from 'react'; + +import Tabs from 'features/tabs/panel'; + +import { BackgroundCtl, WallpaperCtl } from 'features/background/panel'; +import { LauncherCtl } from 'features/launchers/panel'; +import { NotificationCtl } from 'features/notifications/panel'; +import { WindowCtl } from 'features/windows/panel'; +import { MiscCtl } from 'features/misc/panel'; +import { StatusBarCtl } from 'features/status_bars/panel'; +import { ResetCtl } from 'features/reset/panel'; + + +export function Top() { + return ( + <div id="Top"> + <Tabs> + + <div label="Settings"> + <BackgroundCtl /> + <WallpaperCtl /> + <ResetCtl /> + </div> + + <div label="Windows"> + <WindowCtl /> + </div> + + <div label="Status bars"> + <StatusBarCtl /> + </div> + + <div label="Launchers"> + <LauncherCtl /> + </div> + + <div label="Notification"> + <NotificationCtl /> + </div> + + <div label="Misc"> + <MiscCtl /> + </div> + + </Tabs> + </div> + ); +} diff --git a/src/panels/top/extras.js b/src/panels/top/extras.js @@ -1,15 +0,0 @@ -import React from 'react'; - - -export function ExtrasTab() { - return ( - <div label="Extras"> - <ul> - <li>picom</li> - <li>cursor</li> - </ul> - </div> - ); -} - -export default ExtrasTab; diff --git a/src/panels/top/index.js b/src/panels/top/index.js @@ -1,44 +0,0 @@ -import React from 'react'; - -import Tabs from '../../features/tabs/Tabs'; -import SettingsTab from './settings.js'; -import WindowsTab from './windows.js'; -import StatusBarsTab from './status_bars.js'; -import LaunchersTab from './launchers.js'; -import NotificationsTab from './notifications.js'; -import ExtrasTab from './extras.js'; - - -export default function Top() { - return ( - <div id="Top"> - <Tabs> - - <div label="Settings"> - <SettingsTab /> - </div> - - <div label="Windows"> - <WindowsTab /> - </div> - - <div label="Status Bars"> - <StatusBarsTab /> - </div> - - <div label="Launchers"> - <LaunchersTab /> - </div> - - <div label="Notifications"> - <NotificationsTab /> - </div> - - <div label="Extras"> - <ExtrasTab /> - </div> - - </Tabs> - </div> - ); -} diff --git a/src/panels/top/launchers.js b/src/panels/top/launchers.js @@ -1,15 +0,0 @@ -import React from 'react'; - - -export default function LaunchersTab() { - return ( - <div label="Launchers"> - <ul> - <li>rofi / dmenu</li> - <li>cairo-dock</li> - <li>xmenu</li> - <li>DE-specific?</li> - </ul> - </div> - ); -} diff --git a/src/panels/top/notifications.js b/src/panels/top/notifications.js @@ -1,12 +0,0 @@ -import React from 'react'; - - -export default function NotificationsTab() { - return ( - <div label="Notification"> - <ul> - <li>dunst</li> - </ul> - </div> - ); -} diff --git a/src/panels/top/settings.js b/src/panels/top/settings.js @@ -1,59 +0,0 @@ -import React, { useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import ColorPicker from 'rc-color-picker'; -import 'rc-color-picker/assets/index.css'; - -import reset from '../../features/reset'; -import { setBackground, selectBackground, setWallpaper } from '../../features/background/slice'; - - -export default function SettingsTab() { - const backgroundColour = useSelector(selectBackground); - const dispatch = useDispatch(); - const [inputColour, setInputColour] = useState(backgroundColour); - - return ( - <div id="background2"> - Set background: - <input - aria-label="Set background colour" - value={inputColour} - onChange={e => setInputColour(e.target.value)} - /> - <ColorPicker - color={inputColour} - alpha={100} - onChange={c => { - setInputColour(c.color) - dispatch(setBackground(inputColour)) - }} - placement="topLeft" - className="some-class" - enableAlpha="false" - > - </ColorPicker> - <button onClick={() => dispatch(setBackground(inputColour))}> - Set - </button> - - <input - type="file" - accept="image/*" - multiple="false" - onChange={e => { - if (e.target.files[0]) { - let reader = new FileReader(); - reader.onload = (e) => { - dispatch(setWallpaper(e.target.result)); - }; - reader.readAsDataURL(e.target.files[0]); - } - }} - /> - - <button onClick={() => dispatch(reset())}> - Reset - </button> - </div> - ); -} diff --git a/src/panels/top/status_bars.js b/src/panels/top/status_bars.js @@ -1,15 +0,0 @@ -import React from 'react'; - - -export default function StatusBarsTab() { - return ( - <div label="Status bars"> - <ul> - <li>polybar</li> - <li>lemonbar</li> - <li>i3blocks</li> - <li>Qtile bar</li> - </ul> - </div> - ); -} diff --git a/src/panels/top/windows.js b/src/panels/top/windows.js @@ -1,25 +0,0 @@ -import React from 'react'; -import { useDispatch } from 'react-redux'; - -import { addWindow, delWindow } from '../../features/windows/slice'; - - -export default function WindowsTab() { - const dispatch = useDispatch(); - - return ( - <> - <ul> - <li>Border styles</li> - <li>Title bars</li> - <li>Rounded corners</li> - </ul> - <button onClick={() => dispatch(addWindow())}> - + - </button> - <button onClick={() => dispatch(delWindow())}> - - - </button> - </> - ); -}