From 8d5f338688220851b95d0477b75c424d1de219df Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 11 Dec 2023 20:59:32 -0500 Subject: [PATCH] Remaining css --- .../src/ActionListHeader.tsx | 8 +- .../src/ActionListRow.tsx | 17 +- .../src/ActionPreview.tsx | 13 +- .../src/ActionPreviewHeader.tsx | 37 ++- .../src/RightSlider.tsx | 18 +- .../src/tabs/JSONDiff.tsx | 55 +-- .../src/tabs/getItemString.tsx | 3 +- .../src/utils/createStylingFromTheme.ts | 312 +++++++++--------- 8 files changed, 233 insertions(+), 230 deletions(-) diff --git a/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx b/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx index 4e124bf1..970f03f7 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx @@ -6,6 +6,8 @@ import { actionListHeaderSearchCss, actionListHeaderSelectorCss, actionListHeaderWrapperCss, + selectorButtonCss, + selectorButtonSmallCss, } from './utils/createStylingFromTheme'; const getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] => @@ -54,11 +56,7 @@ const ActionListHeader: FunctionComponent = ({ Sweep: onSweep, })[btn]() } - {...styling( - ['selectorButton', 'selectorButtonSmall'], - false, - true, - )} + css={[selectorButtonCss, selectorButtonSmallCss]} > {btn} diff --git a/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx b/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx index 53536617..72f734ea 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx @@ -15,6 +15,9 @@ import { actionListItemSelectorCss, actionListItemSkippedCss, actionListItemTimeCss, + selectorButtonCss, + selectorButtonSelectedCss, + selectorButtonSmallCss, } from './utils/createStylingFromTheme'; const BUTTON_SKIP = 'Skip'; @@ -131,15 +134,11 @@ export default class ActionListRow<
this.handleButtonClick(btn, e)} - {...styling( - [ - 'selectorButton', - isButtonSelected(btn) && 'selectorButtonSelected', - 'selectorButtonSmall', - ], - isButtonSelected(btn), - true, - )} + css={[ + selectorButtonCss, + isButtonSelected(btn) && selectorButtonSelectedCss, + selectorButtonSmallCss, + ]} > {btn}
diff --git a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx index f286a084..4eec7d44 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx @@ -10,7 +10,12 @@ import ActionPreviewHeader from './ActionPreviewHeader'; import DiffTab from './tabs/DiffTab'; import StateTab from './tabs/StateTab'; import ActionTab from './tabs/ActionTab'; -import { actionPreviewCss } from './utils/createStylingFromTheme'; +import { + actionPreviewContentCss, + actionPreviewCss, + stateErrorCss, + treeItemPinCss, +} from './utils/createStylingFromTheme'; export interface TabComponentProps> { labelRenderer: LabelRenderer; @@ -128,7 +133,7 @@ class ActionPreview> extends Component< {...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }} /> {!error && ( -
+
> extends Component< />
)} - {error &&
{error}
} + {error &&
{error}
}
); } @@ -164,7 +169,7 @@ class ActionPreview> extends Component< {key} onInspectPath([ ...inspectedPath.slice(0, inspectedPath.length - 1), diff --git a/packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx b/packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx index 3a810b7a..8438ea7c 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx @@ -2,6 +2,15 @@ import React, { FunctionComponent } from 'react'; import { Action } from 'redux'; import { StylingFunction } from 'react-base16-styling'; import { Tab } from './ActionPreview'; +import { + inspectedPathCss, + inspectedPathKeyCss, + inspectedPathKeyLinkCss, + previewHeaderCss, + selectorButtonCss, + selectorButtonSelectedCss, + tabSelectorCss, +} from './utils/createStylingFromTheme'; interface Props> { tabs: Tab[]; @@ -15,31 +24,25 @@ interface Props> { const ActionPreviewHeader: FunctionComponent< Props> > = ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => ( -
-
+
+
{tabs.map((tab) => (
onSelectTab(tab.name)} key={tab.name} - {...styling( - [ - 'selectorButton', - tab.name === tabName && 'selectorButtonSelected', - ], - tab.name === tabName, - )} + css={[ + selectorButtonCss, + tab.name === tabName && selectorButtonSelectedCss, + ]} > {tab.name}
))}
-
+
{inspectedPath.length ? ( - - onInspectPath([])} - {...styling('inspectedPathKeyLink')} - > + + onInspectPath([])} css={inspectedPathKeyLinkCss}> {tabName} @@ -50,10 +53,10 @@ const ActionPreviewHeader: FunctionComponent< idx === inspectedPath.length - 1 ? ( {key} ) : ( - + onInspectPath(inspectedPath.slice(0, idx + 1))} - {...styling('inspectedPathKeyLink')} + css={inspectedPathKeyLinkCss} > {key} diff --git a/packages/redux-devtools-inspector-monitor/src/RightSlider.tsx b/packages/redux-devtools-inspector-monitor/src/RightSlider.tsx index 261f9c34..c0c01762 100644 --- a/packages/redux-devtools-inspector-monitor/src/RightSlider.tsx +++ b/packages/redux-devtools-inspector-monitor/src/RightSlider.tsx @@ -1,5 +1,11 @@ import React, { FunctionComponent } from 'react'; import { StylingFunction } from 'react-base16-styling'; +import { + rightSliderCss, + rightSliderRotateCss, + rightSliderRotateShownCss, + rightSliderShownCss, +} from './utils/createStylingFromTheme'; interface Props { styling: StylingFunction; @@ -15,12 +21,12 @@ const RightSlider: FunctionComponent = ({ rotate, }) => (
{children}
diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx index 1ea2fda4..5826b249 100644 --- a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx +++ b/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx @@ -7,6 +7,16 @@ import { StylingFunction } from 'react-base16-styling'; import { Base16Theme } from 'redux-devtools-themes'; import getItemString from './getItemString'; import getJsonTreeTheme from './getJsonTreeTheme'; +import { + diffAddCss, + diffCss, + diffRemoveCss, + diffUpdateArrowCss, + diffUpdateFromCss, + diffUpdateToCss, + diffWrapCss, + stateDiffEmptyCss, +} from '../utils/createStylingFromTheme'; function stringifyAndShrink(val: any, isWideLayout?: boolean) { if (val === null) { @@ -85,7 +95,7 @@ export default class JSONDiff extends Component { const { styling, base16Theme, ...props } = this.props; if (!this.state.data) { - return
(states are equal)
; + return
(states are equal)
; } return ( @@ -116,43 +126,36 @@ export default class JSONDiff extends Component { valueRenderer = (raw: any, value: any) => { const { styling, isWideLayout } = this.props; - function renderSpan(name: string, body: string) { - return ( - - {body} - - ); - } - if (Array.isArray(value)) { switch (value.length) { case 1: return ( - - {renderSpan( - 'diffAdd', - stringifyAndShrink(value[0], isWideLayout), - )} + + + {stringifyAndShrink(value[0], isWideLayout)} + ); case 2: return ( - - {renderSpan( - 'diffUpdateFrom', - stringifyAndShrink(value[0], isWideLayout), - )} - {renderSpan('diffUpdateArrow', ' => ')} - {renderSpan( - 'diffUpdateTo', - stringifyAndShrink(value[1], isWideLayout), - )} + + + {stringifyAndShrink(value[0], isWideLayout)} + + + {' => '} + + + {stringifyAndShrink(value[1], isWideLayout)} + ); case 3: return ( - - {renderSpan('diffRemove', stringifyAndShrink(value[0]))} + + + {stringifyAndShrink(value[0])} + ); } diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx index b26880b5..e4b587f7 100644 --- a/packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx +++ b/packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { isCollection, isIndexed, isKeyed } from 'immutable'; import { StylingFunction } from 'react-base16-styling'; import isIterable from '../utils/isIterable'; +import { treeItemHintCss } from '../utils/createStylingFromTheme'; const IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@'; @@ -79,7 +80,7 @@ const getItemString = ( isWideLayout: boolean, isDiff?: boolean, ) => ( - + {data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''} {dataTypeKey && data[dataTypeKey] ? `${data[dataTypeKey] as string} ` : ''} {getText(type, data, isWideLayout, isDiff)} diff --git a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts index 4dc2f8fc..24916469 100644 --- a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts +++ b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts @@ -201,177 +201,165 @@ export const actionPreviewCss: Interpolation = (theme) => ({ backgroundColor: colorMap(theme).BACKGROUND_COLOR, }); -const getSheetFromColorMap = (map: ColorMap) => ({ - actionPreviewContent: { - flex: 1, - 'overflow-y': 'auto', - }, +export const actionPreviewContentCss = css({ flex: 1, overflowY: 'auto' }); - stateDiff: { - padding: '5px 0', - }, +export const stateDiffEmptyCss: Interpolation = (theme) => ({ + padding: '10px', - stateDiffEmpty: { - padding: '10px', + color: colorMap(theme).TEXT_PLACEHOLDER_COLOR, +}); - color: map.TEXT_PLACEHOLDER_COLOR, - }, +export const stateErrorCss: Interpolation = (theme) => ({ + padding: '10px', + marginLeft: '14px', + fontWeight: 'bold', - stateError: { - padding: '10px', - 'margin-left': '14px', - 'font-weight': 'bold', + color: colorMap(theme).ERROR_COLOR, +}); - color: map.ERROR_COLOR, - }, +export const inspectedPathCss = css({ padding: '6px 0' }); - inspectedPath: { - padding: '6px 0', - }, - - inspectedPathKey: { - '&:not(:last-child):after': { - content: '" > "', - }, - }, - - inspectedPathKeyLink: { - cursor: 'pointer', - color: map.LINK_COLOR, - '&:hover': { - 'text-decoration': 'underline', - color: map.LINK_HOVER_COLOR, - }, - }, - - treeItemPin: { - 'font-size': '0.7em', - 'padding-left': '5px', - cursor: 'pointer', - '&:hover': { - 'text-decoration': 'underline', - }, - - color: map.PIN_COLOR, - }, - - treeItemHint: { - color: map.ITEM_HINT_COLOR, - }, - - previewHeader: { - flex: '0 0 30px', - padding: '5px 10px', - 'align-items': 'center', - 'border-bottom-width': '1px', - 'border-bottom-style': 'solid', - - 'background-color': map.HEADER_BACKGROUND_COLOR, - 'border-bottom-color': map.HEADER_BORDER_COLOR, - }, - - tabSelector: { - position: 'relative', - display: 'inline-flex', - float: 'right', - }, - - selectorButton: { - cursor: 'pointer', - position: 'relative', - padding: '5px 10px', - 'border-style': 'solid', - 'border-width': '1px', - 'border-left-width': 0, - - '&:first-child': { - 'border-left-width': '1px', - 'border-top-left-radius': '3px', - 'border-bottom-left-radius': '3px', - }, - - '&:last-child': { - 'border-top-right-radius': '3px', - 'border-bottom-right-radius': '3px', - }, - - 'background-color': map.TAB_BACK_COLOR, - - '&:hover': { - 'background-color': map.TAB_BACK_HOVER_COLOR, - }, - - 'border-color': map.TAB_BORDER_COLOR, - }, - - selectorButtonSmall: { - padding: '0px 8px', - 'font-size': '0.8em', - }, - - selectorButtonSelected: { - 'background-color': map.TAB_BACK_SELECTED_COLOR, - }, - - diff: { - padding: '2px 3px', - 'border-radius': '3px', - position: 'relative', - - color: map.TEXT_COLOR, - }, - - diffWrap: { - position: 'relative', - 'z-index': 1, - }, - - diffAdd: { - 'background-color': map.DIFF_ADD_COLOR, - }, - - diffRemove: { - 'text-decoration': 'line-through', - 'background-color': map.DIFF_REMOVE_COLOR, - }, - - diffUpdateFrom: { - 'text-decoration': 'line-through', - 'background-color': map.DIFF_REMOVE_COLOR, - }, - - diffUpdateTo: { - 'background-color': map.DIFF_ADD_COLOR, - }, - - diffUpdateArrow: { - color: map.DIFF_ARROW_COLOR, - }, - - rightSlider: { - 'font-smoothing': 'subpixel-antialiased', // http://stackoverflow.com/a/21136111/4218591 - position: 'absolute', - right: 0, - transform: 'translateX(150%)', - transition: 'transform 0.2s ease-in-out', - }, - - rightSliderRotate: { - transform: 'rotateX(90deg)', - transition: 'transform 0.2s ease-in-out 0.08s', - }, - - rightSliderShown: { - position: 'static', - transform: 'translateX(0)', - }, - - rightSliderRotateShown: { - transform: 'rotateX(0)', - transition: 'transform 0.2s ease-in-out 0.18s', +export const inspectedPathKeyCss = css({ + '&:not(:last-child):after': { + content: '" > "', }, }); +export const inspectedPathKeyLinkCss: Interpolation = (theme) => ({ + cursor: 'pointer', + color: colorMap(theme).LINK_COLOR, + '&:hover': { + textDecoration: 'underline', + color: colorMap(theme).LINK_HOVER_COLOR, + }, +}); + +export const treeItemPinCss: Interpolation = (theme) => ({ + fontSize: '0.7em', + paddingLeft: '5px', + cursor: 'pointer', + '&:hover': { + textDecoration: 'underline', + }, + + color: colorMap(theme).PIN_COLOR, +}); + +export const treeItemHintCss: Interpolation = (theme) => ({ + color: colorMap(theme).ITEM_HINT_COLOR, +}); + +export const previewHeaderCss: Interpolation = (theme) => ({ + flex: '0 0 30px', + padding: '5px 10px', + alignItems: 'center', + borderBottomWidth: '1px', + borderBottomStyle: 'solid', + + backgroundColor: colorMap(theme).HEADER_BACKGROUND_COLOR, + borderBottomColor: colorMap(theme).HEADER_BORDER_COLOR, +}); + +export const tabSelectorCss = css({ + position: 'relative', + display: 'inline-flex', + float: 'right', +}); + +export const selectorButtonCss: Interpolation = (theme) => ({ + cursor: 'pointer', + position: 'relative', + padding: '5px 10px', + borderStyle: 'solid', + borderWidth: '1px', + borderLeftWidth: 0, + + '&:first-child': { + borderLeftWidth: '1px', + borderTopLeftRadius: '3px', + borderBottomLeftRadius: '3px', + }, + + '&:last-child': { + borderTopRightRadius: '3px', + borderBottomRightRadius: '3px', + }, + + backgroundColor: colorMap(theme).TAB_BACK_COLOR, + + '&:hover': { + backgroundColor: colorMap(theme).TAB_BACK_HOVER_COLOR, + }, + + borderColor: colorMap(theme).TAB_BORDER_COLOR, +}); + +export const selectorButtonSmallCss = css({ + padding: '0px 8px', + fontSize: '0.8em', +}); + +export const selectorButtonSelectedCss: Interpolation = (theme) => ({ + backgroundColor: colorMap(theme).TAB_BACK_SELECTED_COLOR, +}); + +export const diffCss: Interpolation = (theme) => ({ + padding: '2px 3px', + borderRadius: '3px', + position: 'relative', + + color: colorMap(theme).TEXT_COLOR, +}); + +export const diffWrapCss = css({ position: 'relative', zIndex: 1 }); + +export const diffAddCss: Interpolation = (theme) => ({ + backgroundColor: colorMap(theme).DIFF_ADD_COLOR, +}); + +export const diffRemoveCss: Interpolation = (theme) => ({ + textDecoration: 'line-through', + backgroundColor: colorMap(theme).DIFF_REMOVE_COLOR, +}); + +export const diffUpdateFromCss: Interpolation = (theme) => ({ + textDecoration: 'line-through', + backgroundColor: colorMap(theme).DIFF_REMOVE_COLOR, +}); + +export const diffUpdateToCss: Interpolation = (theme) => ({ + backgroundColor: colorMap(theme).DIFF_ADD_COLOR, +}); + +export const diffUpdateArrowCss: Interpolation = (theme) => ({ + color: colorMap(theme).DIFF_ARROW_COLOR, +}); + +export const rightSliderCss = css({ + WebkitFontSmoothing: 'subpixel-antialiased', // http://stackoverflow.com/a/21136111/4218591 + position: 'absolute', + right: 0, + transform: 'translateX(150%)', + transition: 'transform 0.2s ease-in-out', +}); + +export const rightSliderRotateCss = css({ + transform: 'rotateX(90deg)', + transition: 'transform 0.2s ease-in-out 0.08s', +}); + +export const rightSliderShownCss = css({ + position: 'static', + transform: 'translateX(0)', +}); + +export const rightSliderRotateShownCss = css({ + transform: 'rotateX(0)', + transition: 'transform 0.2s ease-in-out 0.18s', +}); + +const getSheetFromColorMap = (map: ColorMap) => ({}); + let themeSheet: StyleSheet; const getDefaultThemeStyling = (theme: Base16Theme) => {