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:
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,
