[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 373165d259c4d6cd9ce2702fe5b88f6a4f1acfb1
parent cf970f43b663847beb739ab8e29c0f3093718928
Author: mcol <mcol@posteo.net>
Date:   Sat, 27 Jun 2020 14:21:29 +0100

add alpha feature for window transparency

Diffstat:
Asrc/features/alpha/panel.js | 35+++++++++++++++++++++++++++++++++++
Asrc/features/alpha/slice.js | 41+++++++++++++++++++++++++++++++++++++++++
Msrc/features/windows/index.js | 7+++++--
Msrc/panels/top.js | 2++
Msrc/store.js | 2++
5 files changed, 85 insertions(+), 2 deletions(-)

diff --git a/src/features/alpha/panel.js b/src/features/alpha/panel.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; + +import { + setAlpha, + setAlphaFocus, + selectAlpha, +} from './slice'; +import OptBox from 'components/optbox'; + + +export function AlphaCtl() { + const alpha = useSelector(selectAlpha); + const dispatch = useDispatch(); + + return ( + <OptBox className="AlphaCtl" label="Alpha" width="150px"> + + <div> + Value + <input value={alpha.value} type="number" min={0} max={100} + onChange={e => dispatch(setAlpha(e.target.value))} + /> + </div> + + <div> + Focussed + <input value={alpha.valueFocus} type="number" min={0} max={100} + onChange={e => dispatch(setAlphaFocus(e.target.value))} + /> + </div> + + </OptBox> + ); +} diff --git a/src/features/alpha/slice.js b/src/features/alpha/slice.js @@ -0,0 +1,41 @@ +import { createSlice } from '@reduxjs/toolkit'; + + +export const alphaSlice = createSlice({ + name: 'alpha', + + initialState: { + value: 100, + valueFocus: 100, + }, + + reducers: { + setAlpha: (state, value) => { + state.value = value.payload + }, + setAlphaFocus: (state, value) => { + state.valueFocus = value.payload + }, + }, +}); + +export const { + setAlpha, + setAlphaFocus, +} = alphaSlice.actions; + +export const selectAlpha = state => state.alpha; + +export const selectAlphaStyle = state => { + return { + opacity: state.alpha.value / 100 + } +} + +export const selectAlphaFocusStyle = state => { + return { + opacity: state.alpha.valueFocus / 100 + } +} + +export default alphaSlice.reducer; diff --git a/src/features/windows/index.js b/src/features/windows/index.js @@ -7,6 +7,7 @@ import { selectWindowContent, selectWindowContentCSS } from 'features/window_con 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'; export default function Windows() { @@ -18,10 +19,12 @@ export default function Windows() { const windowContentStyle = useSelector(selectWindowContentCSS); const shadowStyle = useSelector(selectShadowStyleCSS); const borderStyle = useSelector(selectBorderStyle); - let style = {...shadowStyle, ...borderStyle, ...windowContentStyle}; + const alphaStyle = useSelector(selectAlphaStyle); + let style = {...shadowStyle, ...borderStyle, ...windowContentStyle, ...alphaStyle}; const borderFocusStyle = useSelector(selectBorderFocusStyle); - let focusStyle = Object.assign({}, style, borderFocusStyle); + const alphaFocusStyle = useSelector(selectAlphaFocusStyle); + let focusStyle = Object.assign({}, style, borderFocusStyle, alphaFocusStyle); return ( positions.map((position, key) => { diff --git a/src/panels/top.js b/src/panels/top.js @@ -2,6 +2,7 @@ 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'; @@ -31,6 +32,7 @@ export function Top() { <WindowContentCtl /> <ShadowCtl /> <BorderCtl /> + <AlphaCtl /> </div> <div label="Status bars"> diff --git a/src/store.js b/src/store.js @@ -7,6 +7,7 @@ import tabReducer from 'components/tabs/slice'; import backgroundReducer from 'features/background/slice'; import windowReducer from 'features/windows/slice'; import windowContentReducer from 'features/window_content/slice'; +import alphaReducer from 'features/alpha/slice'; import shadowReducer from 'features/shadows/slice'; import borderReducer from 'features/borders/slice'; import titleBarReducer from 'features/title_bars/slice'; @@ -18,6 +19,7 @@ const reducer = combineReducers({ background: backgroundReducer, windows: windowReducer, windowContent: windowContentReducer, + alpha: alphaReducer, titleBars: titleBarReducer, shadows: shadowReducer, borders: borderReducer,