[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 551ba14ff9cd26fd5ac639499b8239ff1b5fbb71
parent 04066085423f845bcf9708b5d9448e2de03bb8c4
Author: mcol <mcol@posteo.net>
Date:   Sat, 27 Jun 2020 18:10:40 +0100

remove table structure; make panel a floating window

Diffstat:
Dsrc/App.js | 24------------------------
Msrc/components/optbox/index.css | 2+-
Msrc/components/tabs/index.css | 10++++++----
Asrc/features/desktop/index.css | 4++++
Asrc/features/desktop/index.js | 23+++++++++++++++++++++++
Asrc/features/panel/index.css | 4++++
Asrc/features/panel/index.js | 81+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/features/panel/slice.js | 26++++++++++++++++++++++++++
Asrc/features/windows/index.css | 4++++
Msrc/features/windows/index.js | 2+-
Msrc/index.css | 29-----------------------------
Msrc/index.js | 4++--
Dsrc/panels/corner.js | 13-------------
Dsrc/panels/desktop.js | 20--------------------
Dsrc/panels/left.js | 9---------
Dsrc/panels/top.js | 57---------------------------------------------------------
Msrc/store.js | 2++
17 files changed, 154 insertions(+), 160 deletions(-)

diff --git a/src/App.js b/src/App.js @@ -1,24 +0,0 @@ -import React from 'react'; -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() { - return ( - <div id="App"> - <div id="TopRow"> - <Corner /> - <Top /> - </div> - <div> - <Left /> - <Desktop /> - </div> - </div> - ); -} - - -export default App; diff --git a/src/components/optbox/index.css b/src/components/optbox/index.css @@ -1,9 +1,9 @@ .optbox { border: 2px solid #eee; width: 300px; - float: left; height: 100%; margin: 2px; + flex: 0 0 auto; } .optbox h3 { diff --git a/src/components/tabs/index.css b/src/components/tabs/index.css @@ -1,11 +1,10 @@ .tabs { - height: 192px; + height: 214px; } .tab-list { padding: 0; margin: 0; - width: 100%; } .tab-list-item { @@ -20,6 +19,9 @@ } .tab-content { - width: 100%; - height: 153px; + display: flex; + flex-wrap: nowrap; + height: 175px; + overflow-x: auto; + overflow-y: hidden; } diff --git a/src/features/desktop/index.css b/src/features/desktop/index.css @@ -0,0 +1,4 @@ +#Desktop { + width: 100%; + height: 100%; +} diff --git a/src/features/desktop/index.js b/src/features/desktop/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; + +import { selectBackground } from 'features/background/slice'; +import Wallpaper from 'features/background'; +import Windows from 'features/windows'; +import Panel from 'features/panel'; +import './index.css'; + + +export function Desktop() { + const background = useSelector(selectBackground); + + return ( + <div id="Desktop" style={{backgroundColor: background.colour}}> + <Wallpaper /> + <Panel /> + <Windows /> + </div> + ); +} + +export default Desktop; diff --git a/src/features/panel/index.css b/src/features/panel/index.css @@ -0,0 +1,4 @@ +#Panel { + padding: 4px; + background: #fff; +} diff --git a/src/features/panel/index.js b/src/features/panel/index.js @@ -0,0 +1,81 @@ +import React from 'react'; +import { Rnd } from 'react-rnd'; +import { useDispatch, useSelector } from 'react-redux'; + +import { dragPanel, selectPanel } from './slice'; + +import Tabs from 'components/tabs/panel'; + +import { AlphaCtl } from 'features/alpha/panel'; +import { BackgroundCtl } from 'features/background/panel'; +import { ResetCtl } from 'features/reset/panel'; +import { WindowCtl } from 'features/windows/panel'; +import { WindowContentCtl } from 'features/window_content/panel'; +import { TitleBarCtl } from 'features/title_bars/panel'; +import { ShadowCtl } from 'features/shadows/panel'; +import { BorderCtl } from 'features/borders/panel'; +import { StatusBarCtl } from 'features/status_bars/panel'; +import { LauncherCtl } from 'features/launchers/panel'; +import { NotificationCtl } from 'features/notifications/panel'; +import { MiscCtl } from 'features/misc/panel'; +import './index.css'; + + +export function Panel() { + const dispatch = useDispatch(); + const position = useSelector(selectPanel); + + return ( + <Rnd + bounds="parent" + id="Panel" + enableResizing={false} + position={{ + x: position.x, + y: position.y + }} + size={{ + width: "520px", height: "212px" + }} + onDragStop={ + (e, d) => {dispatch(dragPanel({x: d.x, y: d.y}))} + } + > + <Tabs> + + <div label="Settings"> + <ResetCtl /> + <BackgroundCtl /> + </div> + + <div label="Windows"> + <WindowCtl /> + <TitleBarCtl /> + <WindowContentCtl /> + <ShadowCtl /> + <BorderCtl /> + <AlphaCtl /> + </div> + + <div label="Status bars"> + <StatusBarCtl /> + </div> + + <div label="Launchers"> + <LauncherCtl /> + </div> + + <div label="Notification"> + <NotificationCtl /> + </div> + + <div label="Misc"> + <MiscCtl /> + </div> + + </Tabs> + </Rnd> + ); +} + +export default Panel; diff --git a/src/features/panel/slice.js b/src/features/panel/slice.js @@ -0,0 +1,26 @@ +import { createSlice } from '@reduxjs/toolkit'; + + +export const panelSlice = createSlice({ + name: 'panel', + + initialState: { + x: 30, + y: 30, + }, + + reducers: { + dragPanel: (state, action) => { + state.x = action.payload.x + state.y = action.payload.y + }, + }, +}); + +export const { + dragPanel, +} = panelSlice.actions; + +export const selectPanel = state => state.panel; + +export default panelSlice.reducer; diff --git a/src/features/windows/index.css b/src/features/windows/index.css @@ -0,0 +1,4 @@ +.Window { + border-style: solid; + overflow: hidden; +} diff --git a/src/features/windows/index.js b/src/features/windows/index.js @@ -8,7 +8,7 @@ import TitleBar from 'features/title_bars'; import { selectShadowStyleCSS } from 'features/shadows/slice'; import { selectBorderStyle, selectBorderFocusStyle } from 'features/borders/slice'; import { selectAlphaStyle, selectAlphaFocusStyle } from 'features/alpha/slice'; - +import './index.css'; export default function Windows() { const dispatch = useDispatch(); diff --git a/src/index.css b/src/index.css @@ -22,35 +22,6 @@ code { left: 0; } -#App { - display: table; - width: 100%; - height: 100%; -} - -#App > div { - display: table-row; -} - -#App > div > div { - display: table-cell; - box-shadow:inset 0px 0px 0px 4px #eee; - padding: 4px; -} - -#TopRow { - height: 200px; -} - -#Corner, #Left { - width: 200px; -} - -.Window { - border-style: solid; - overflow: hidden; -} - .window-content { font-size: 40%; width: 100%; diff --git a/src/index.js b/src/index.js @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import 'index.css'; -import App from './App'; +import Desktop from 'features/desktop'; import { store, persistor } from 'store'; import * as serviceWorker from 'serviceWorker'; import { PersistGate } from 'redux-persist/integration/react'; @@ -13,7 +13,7 @@ ReactDOM.render( <React.StrictMode> <Provider store={store}> <PersistGate loading={null} persistor={persistor}> - <App /> + <Desktop /> </PersistGate> </Provider> </React.StrictMode>, diff --git a/src/panels/corner.js b/src/panels/corner.js @@ -1,13 +0,0 @@ -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/desktop.js b/src/panels/desktop.js @@ -1,20 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; - -import { selectBackground } from 'features/background/slice'; -import Wallpaper from 'features/background'; -import Windows from 'features/windows'; - - -export function Desktop() { - const background = useSelector(selectBackground); - - return ( - <div id="Desktop" style={{backgroundColor: background.colour}}> - <Wallpaper /> - <Windows /> - </div> - ); -} - -export default Desktop; diff --git a/src/panels/left.js b/src/panels/left.js @@ -1,9 +0,0 @@ -import React from 'react'; - - -export function Left() { - return ( - <div id="Left"> - </div> - ); -} diff --git a/src/panels/top.js b/src/panels/top.js @@ -1,57 +0,0 @@ -import React from 'react'; - -import Tabs from 'components/tabs/panel'; - -import { AlphaCtl } from 'features/alpha/panel'; -import { BackgroundCtl } from 'features/background/panel'; -import { ResetCtl } from 'features/reset/panel'; -import { WindowCtl } from 'features/windows/panel'; -import { WindowContentCtl } from 'features/window_content/panel'; -import { TitleBarCtl } from 'features/title_bars/panel'; -import { ShadowCtl } from 'features/shadows/panel'; -import { BorderCtl } from 'features/borders/panel'; -import { StatusBarCtl } from 'features/status_bars/panel'; -import { LauncherCtl } from 'features/launchers/panel'; -import { NotificationCtl } from 'features/notifications/panel'; -import { MiscCtl } from 'features/misc/panel'; - - -export function Top() { - return ( - <div id="Top"> - <Tabs> - - <div label="Settings"> - <ResetCtl /> - <BackgroundCtl /> - </div> - - <div label="Windows"> - <WindowCtl /> - <TitleBarCtl /> - <WindowContentCtl /> - <ShadowCtl /> - <BorderCtl /> - <AlphaCtl /> - </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/store.js b/src/store.js @@ -3,6 +3,7 @@ import { persistStore, persistReducer } from 'redux-persist' import storage from 'redux-persist/lib/storage'; import tabReducer from 'components/tabs/slice'; +import panelReducer from 'features/panel/slice'; import backgroundReducer from 'features/background/slice'; import windowReducer from 'features/windows/slice'; @@ -16,6 +17,7 @@ import { RESET } from 'features/reset/slice'; const reducer = combineReducers({ tab: tabReducer, + panel: panelReducer, background: backgroundReducer, windows: windowReducer, windowContent: windowContentReducer,