[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 d6d7fb8f3bc83752e0d29df4c5218d5c41ec0596
parent b802524890b75dced0b96ea1caa615f4b15a8885
Author: mcol <mcol@posteo.net>
Date:   Sun, 26 Jul 2020 21:18:05 +0100

colour -> color everywhere

Diffstat:
Msrc/components/button/index.js | 2+-
Rsrc/components/colour/index.css -> src/components/color/index.css | 0
Asrc/components/color/index.js | 38++++++++++++++++++++++++++++++++++++++
Dsrc/components/colour/index.js | 38--------------------------------------
Msrc/components/optbox/index.js | 2+-
Msrc/features/background/menu.js | 10+++++-----
Msrc/features/background/slice.js | 12++++++------
Msrc/features/borders/panel.js | 10+++++-----
Msrc/features/colors/slice.js | 2+-
Msrc/features/desktop/index.js | 4++--
Msrc/features/shadows/panel.js | 8++++----
Msrc/features/shadows/slice.js | 12++++++------
Msrc/features/status_bars/menu.js | 16++++++++--------
Msrc/features/status_bars/slice.js | 12++++++------
Msrc/features/title_bars/index.js | 8++++----
Msrc/features/title_bars/menu.js | 20++++++++++----------
Msrc/features/title_bars/slice.js | 32++++++++++++++++----------------
Msrc/features/widgets/menu.js | 8++++----
Msrc/features/window_content/panel.js | 14+++++++-------
Msrc/features/window_content/slice.js | 26+++++++++++++-------------
20 files changed, 137 insertions(+), 137 deletions(-)

diff --git a/src/components/button/index.js b/src/components/button/index.js @@ -14,7 +14,7 @@ export default function Button(props) { <button onClick={() => dispatch(props.callback())} - style={{color: windowContent.textColour, ...props.style}} + style={{color: windowContent.textColor, ...props.style}} > {props.text} </button> diff --git a/src/components/colour/index.css b/src/components/color/index.css diff --git a/src/components/color/index.js b/src/components/color/index.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { useDispatch } from 'react-redux'; +import ColorPicker from 'rc-color-picker'; +import 'rc-color-picker/assets/index.css'; + +import './index.css'; + + +function fixColor(color) { + if (color.length === 0) { + color = "inherit" + } else if (color[0] !== '#') { + color = '#' + color + } + return color +} + + +export default function Color(props) { + const dispatch = useDispatch(); + + return ( + <> + + <input value={props.value} + onChange={e => dispatch(props.callback(fixColor(e.target.value)))} + className="color" + /> + + <ColorPicker + color={props.value} + onChange={c => dispatch(props.callback(fixColor(c.color)))} + > + </ColorPicker> + + </> + ); +} diff --git a/src/components/colour/index.js b/src/components/colour/index.js @@ -1,38 +0,0 @@ -import React from 'react'; -import { useDispatch } from 'react-redux'; -import ColorPicker from 'rc-color-picker'; -import 'rc-color-picker/assets/index.css'; - -import './index.css'; - - -function fixColour(colour) { - if (colour.length === 0) { - colour = "inherit" - } else if (colour[0] !== '#') { - colour = '#' + colour - } - return colour -} - - -export default function Colour(props) { - const dispatch = useDispatch(); - - return ( - <> - - <input value={props.value} - onChange={e => dispatch(props.callback(fixColour(e.target.value)))} - className="colour" - /> - - <ColorPicker - color={props.value} - onChange={c => dispatch(props.callback(fixColour(c.color)))} - > - </ColorPicker> - - </> - ); -} diff --git a/src/components/optbox/index.js b/src/components/optbox/index.js @@ -16,7 +16,7 @@ export default function OptBox(props) { return ( <div className={className} - style={{width: props.width, color: windowContent.textColour}} + style={{width: props.width, color: windowContent.textColor}} > <h3>{props.label}</h3> diff --git a/src/features/background/menu.js b/src/features/background/menu.js @@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'; import Button from 'components/button'; import ContextMenu from 'components/context_menu'; -import Colour from 'components/colour'; +import Color from 'components/color'; import OptBox from 'components/optbox'; import { selectContextMenus } from 'features/context_menus/slice'; @@ -12,7 +12,7 @@ import { setWallpaper, removeWallpaper, setTint, - setTintColour, + setTintColor, selectBackground, } from './slice'; @@ -36,8 +36,8 @@ export default function Menu(props) { <OptBox className="BackgroundCtl" label="Background" width="260px"> <div> - Colour - <Colour value={background.colour} callback={setBackground} /> + Color + <Color value={background.color} callback={setBackground} /> </div> <div> @@ -71,7 +71,7 @@ export default function Menu(props) { <input value={background.tint} type="number" min={0} max={100} onChange={e => dispatch(setTint(e.target.value))} /> - <Colour value={background.tintColour} callback={setTintColour} /> + <Color value={background.tintColor} callback={setTintColor} /> </div> </OptBox> diff --git a/src/features/background/slice.js b/src/features/background/slice.js @@ -5,15 +5,15 @@ export const backgroundSlice = createSlice({ name: 'background', initialState: { - colour: '#5d479d', + color: '#5d479d', wallpaper: "", tint: 0, - tintColour: '#333333', + tintColor: '#333333', }, reducers: { setBackground: (state, input) => { - state.colour = input.payload; + state.color = input.payload; }, setWallpaper: (state, image) => { state.wallpaper = image.payload; @@ -24,8 +24,8 @@ export const backgroundSlice = createSlice({ setTint: (state, input) => { state.tint = input.payload; }, - setTintColour: (state, input) => { - state.tintColour = input.payload; + setTintColor: (state, input) => { + state.tintColor = input.payload; }, }, }); @@ -35,7 +35,7 @@ export const { setWallpaper, removeWallpaper, setTint, - setTintColour, + setTintColor, } = backgroundSlice.actions; export const selectBackground = state => state.background; diff --git a/src/features/borders/panel.js b/src/features/borders/panel.js @@ -1,7 +1,7 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import Colour from 'components/colour'; +import Color from 'components/color'; import OptBox from 'components/optbox'; import { @@ -35,13 +35,13 @@ export function BorderCtl() { </div> <div> - Colour - <Colour value={style.borderColor} callback={setBorderColor} /> + Color + <Color value={style.borderColor} callback={setBorderColor} /> </div> <div> - Focussed colour - <Colour value={style.borderColorFocus} callback={setBorderColorFocus} /> + Focussed color + <Color value={style.borderColorFocus} callback={setBorderColorFocus} /> </div> </OptBox> diff --git a/src/features/colors/slice.js b/src/features/colors/slice.js @@ -24,7 +24,7 @@ export const colorSlice = createSlice({ ], reducers: { - setColour: (state, value) => { + setColor: (state, value) => { state[value.payload.id] = value.payload.color }, }, diff --git a/src/features/desktop/index.js b/src/features/desktop/index.js @@ -20,9 +20,9 @@ export default function Desktop() { const style = {}; if (background.wallpaper) { - style.backgroundColor = background.tintColour; + style.backgroundColor = background.tintColor; } else { - style.backgroundColor = background.colour; + style.backgroundColor = background.color; }; return ( diff --git a/src/features/shadows/panel.js b/src/features/shadows/panel.js @@ -1,7 +1,7 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import Colour from 'components/colour'; +import Color from 'components/color'; import OptBox from 'components/optbox'; import Switch from 'components/switch'; import { @@ -10,7 +10,7 @@ import { setHOffset, setVOffset, setBlur, - setColour, + setColor, } from './slice'; @@ -25,8 +25,8 @@ export function ShadowCtl() { Enabled <Switch value={style.enabled} callback={toggleShadows} /> - Colour - <Colour value={style.colour} callback={setColour} /> + Color + <Color value={style.color} callback={setColor} /> </div> <div> diff --git a/src/features/shadows/slice.js b/src/features/shadows/slice.js @@ -9,7 +9,7 @@ export const shadowSlice = createSlice({ hOffset: 4, vOffset: 4, blur: 4, - colour: '#000000', + color: '#000000', }, reducers: { @@ -25,8 +25,8 @@ export const shadowSlice = createSlice({ setBlur: (state, value) => { state.blur = value.payload }, - setColour: (state, value) => { - state.colour = value.payload + setColor: (state, value) => { + state.color = value.payload }, }, }); @@ -36,15 +36,15 @@ export const { setHOffset, setVOffset, setBlur, - setColour + setColor } = shadowSlice.actions; export const selectShadowStyle = state => state.shadows; export const selectShadowStyleCSS = state => { - const { enabled, hOffset, vOffset, blur, colour } = state.shadows; + const { enabled, hOffset, vOffset, blur, color } = state.shadows; if (enabled) { - return {boxShadow: `${hOffset}px ${vOffset}px ${blur}px ${colour}`} + return {boxShadow: `${hOffset}px ${vOffset}px ${blur}px ${color}`} } else { return null } diff --git a/src/features/status_bars/menu.js b/src/features/status_bars/menu.js @@ -2,7 +2,7 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import Button from 'components/button'; -import Colour from 'components/colour'; +import Color from 'components/color'; import ContextMenu from 'components/context_menu'; import OptBox from 'components/optbox'; import Switch from 'components/switch'; @@ -14,8 +14,8 @@ import { setHeight, setXOffset, setYOffset, - setColour, - setTextColour, + setColor, + setTextColor, setCornerRadius, toggleShadows, selectStatusBars, @@ -43,15 +43,15 @@ export default function Menu(props) { <OptBox label={`${id} Status Bar`} className="status-bar-menu" width={350}> <div> - Colour - <Colour + Color + <Color value={style.backgroundColor} - callback={colour => setColour({id: id, colour: colour})} + callback={color => setColor({id: id, color: color})} /> Text - <Colour + <Color value={style.color} - callback={colour => setTextColour({id: id, colour: colour})} + callback={color => setTextColor({id: id, color: color})} /> </div> diff --git a/src/features/status_bars/slice.js b/src/features/status_bars/slice.js @@ -39,11 +39,11 @@ export const statusBarSlice = createSlice({ setHeight: (state, value) => { state[value.payload.id].height = value.payload.value; }, - setColour: (state, value) => { - state[value.payload.id].backgroundColor = value.payload.colour; + setColor: (state, value) => { + state[value.payload.id].backgroundColor = value.payload.color; }, - setTextColour: (state, value) => { - state[value.payload.id].color = value.payload.colour; + setTextColor: (state, value) => { + state[value.payload.id].color = value.payload.color; }, setXOffset: (state, value) => { state[value.payload.id].xOffset = value.payload.value; @@ -64,8 +64,8 @@ export const { toggle, setWidth, setHeight, - setColour, - setTextColour, + setColor, + setTextColor, setXOffset, setYOffset, setCornerRadius, diff --git a/src/features/title_bars/index.js b/src/features/title_bars/index.js @@ -21,11 +21,11 @@ export default function TitleBar(props) { }; if (props.focussed) { - style.backgroundColor = titleBars.colourFocus; - style.color = titleBars.textColourFocus; + style.backgroundColor = titleBars.colorFocus; + style.color = titleBars.textColorFocus; } else { - style.backgroundColor = titleBars.colour; - style.color = titleBars.textColour; + style.backgroundColor = titleBars.color; + style.color = titleBars.textColor; }; if (titleBars.position === "E") { diff --git a/src/features/title_bars/menu.js b/src/features/title_bars/menu.js @@ -1,7 +1,7 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import Colour from 'components/colour'; +import Color from 'components/color'; import ContextMenu from 'components/context_menu'; import OptBox from 'components/optbox'; import Option from 'components/option'; @@ -11,10 +11,10 @@ import { selectContextMenus } from 'features/context_menus/slice'; import { toggle, setPosition, - setColour, - setTextColour, - setColourFocus, - setTextColourFocus, + setColor, + setTextColor, + setColorFocus, + setTextColorFocus, setWidth, selectTitleBars, } from './slice'; @@ -63,18 +63,18 @@ export default function Menu(props) { </div> <div> - Colour - <Colour value={style.colour} callback={setColour} /> + Color + <Color value={style.color} callback={setColor} /> Text - <Colour value={style.textColour} callback={setTextColour} /> + <Color value={style.textColor} callback={setTextColor} /> </div> <div> Focussed - <Colour value={style.colourFocus} callback={setColourFocus} /> + <Color value={style.colorFocus} callback={setColorFocus} /> Text - <Colour value={style.textColourFocus} callback={setTextColourFocus} /> + <Color value={style.textColorFocus} callback={setTextColorFocus} /> </div> </OptBox> diff --git a/src/features/title_bars/slice.js b/src/features/title_bars/slice.js @@ -7,10 +7,10 @@ export const titleBarSlice = createSlice({ initialState: { enabled: true, position: "N", - colour: '#252133', - textColour: '#8d80d8', - colourFocus: '#8d80d8', - textColourFocus: '#12101d', + color: '#252133', + textColor: '#8d80d8', + colorFocus: '#8d80d8', + textColorFocus: '#12101d', width: 20, }, @@ -21,17 +21,17 @@ export const titleBarSlice = createSlice({ setPosition: (state, value) => { state.position = value.payload }, - setColour: (state, value) => { - state.colour = value.payload + setColor: (state, value) => { + state.color = value.payload }, - setTextColour: (state, value) => { - state.textColour = value.payload + setTextColor: (state, value) => { + state.textColor = value.payload }, - setColourFocus: (state, value) => { - state.colourFocus = value.payload + setColorFocus: (state, value) => { + state.colorFocus = value.payload }, - setTextColourFocus: (state, value) => { - state.textColourFocus = value.payload + setTextColorFocus: (state, value) => { + state.textColorFocus = value.payload }, setWidth: (state, value) => { state.width = value.payload @@ -42,10 +42,10 @@ export const titleBarSlice = createSlice({ export const { toggle, setPosition, - setColour, - setTextColour, - setColourFocus, - setTextColourFocus, + setColor, + setTextColor, + setColorFocus, + setTextColorFocus, setWidth, } = titleBarSlice.actions; diff --git a/src/features/widgets/menu.js b/src/features/widgets/menu.js @@ -1,7 +1,7 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import Colour from 'components/colour'; +import Color from 'components/color'; import ContextMenu from 'components/context_menu'; import OptBox from 'components/optbox'; @@ -36,8 +36,8 @@ export default function Menu(props) { <OptBox label="widget"> <div> - Colour - <Colour + Color + <Color value={style.color} callback={color => setColor({...details, color: color})} /> @@ -45,7 +45,7 @@ export default function Menu(props) { <div> Background - <Colour + <Color value={style.backgroundColor} callback={color => setBackgroundColor({...details, color: color})} /> diff --git a/src/features/window_content/panel.js b/src/features/window_content/panel.js @@ -1,12 +1,12 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import Colour from 'components/colour'; +import Color from 'components/color'; import OptBox from 'components/optbox'; import { - setColour, - setTextColour, + setColor, + setTextColor, setPadding, selectWindowContent } from './slice'; @@ -19,13 +19,13 @@ export function WindowContentCtl() { <OptBox className="WindowContentCtl" label="Window Content" width="240px"> <div> - Colour - <Colour value={windowContent.colour} callback={setColour} /> + Color + <Color value={windowContent.color} callback={setColor} /> </div> <div> - Text colour - <Colour value={windowContent.textColour} callback={setTextColour} /> + Text color + <Color value={windowContent.textColor} callback={setTextColor} /> </div> <div> diff --git a/src/features/window_content/slice.js b/src/features/window_content/slice.js @@ -5,21 +5,21 @@ export const windowContentSlice = createSlice({ name: 'windowContent', initialState: { - colour: "#030405", - textColour: "#c5c5c8", + color: "#030405", + textColor: "#c5c5c8", padding: 5, }, reducers: { - setColour: (state, input) => { + setColor: (state, input) => { if (input.payload) { - state.colour = input.payload; + state.color = input.payload; } }, - setTextColour: (state, input) => { - let colour = input.payload - if (colour) { - state.textColour = colour; + setTextColor: (state, input) => { + let color = input.payload + if (color) { + state.textColor = color; } }, setPadding: (state, value) => { @@ -29,18 +29,18 @@ export const windowContentSlice = createSlice({ }); export const { - setColour, - setTextColour, + setColor, + setTextColor, setPadding } = windowContentSlice.actions; export const selectWindowContent = state => state.windowContent; export const selectWindowContentCSS = state => { - const { colour, textColour, padding } = state.windowContent; + const { color, textColor, padding } = state.windowContent; return { - backgroundColor: colour, - color: textColour, + backgroundColor: color, + color: textColor, padding: `${padding}px`, } }