reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-26 07:59:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

Finish convert styling to Emotion

Browse Source
This commit is contained in:
Nathan Bierema 2023-12-13 18:03:56 -05:00
parent 5e589ba80c
commit 63efdf0a19
10 changed files with 234 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx
View File

@ -5,7 +5,19 @@ export function NoRtkQueryApi(): JSX.Element {
return (
<StyleUtilsContext.Consumer>
{({ styling }) => (
<div {...styling('noApiFound')}>
<div
css={(theme) => ({
width: '100%',
textAlign: 'center',
color: theme.TEXT_COLOR,
padding: '1.4em',
'& a': {
fontSize: 'inherit',
color: theme.TEXT_COLOR,
textDecoration: 'underline',
},
})}
>
No rtk-query api found.
<br />
Make sure to follow{' '}

119
packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx
View File

@ -143,7 +143,10 @@ export class QueryForm extends React.PureComponent<
id="rtk-query-monitor-query-selection-form"
action="#"
onSubmit={this.handleSubmit}
{...styling('queryForm')}
css={{
display: 'flex',
flexFlow: 'column nowrap',
}}
>
<div
css={(theme) => ({
@ -160,7 +163,42 @@ export class QueryForm extends React.PureComponent<
<label htmlFor={searchId} css={srOnlyCss}>
filter query
</label>
<div {...styling('querySearch')}>
<div
css={(theme) => ({
maxWidth: '65%',
backgroundColor: theme.BACKGROUND_COLOR,
display: 'flex',
alignItems: 'center',
flexFlow: 'row nowrap',
flex: '1 1 auto',
paddingRight: 6,
'& input': {
outline: 'none',
border: 'none',
width: '100%',
flex: '1 1 auto',
padding: '5px 10px',
fontSize: '1em',
position: 'relative',
fontFamily:
'monaco, Consolas, "Lucida Console", monospace',
backgroundColor: theme.BACKGROUND_COLOR,
color: theme.TEXT_COLOR,
'&::-webkit-input-placeholder': {
color: theme.TEXT_PLACEHOLDER_COLOR,
},
'&::-moz-placeholder': {
color: theme.TEXT_PLACEHOLDER_COLOR,
},
'&::-webkit-search-cancel-button': {
WebkitAppearance: 'none',
},
},
})}
>
<input
ref={this.inputSearchRef}
type="search"
@ -175,7 +213,32 @@ export class QueryForm extends React.PureComponent<
+(this.state.searchValue.length === 0) || undefined
}
onClick={this.handleClearSearchClick}
{...styling('closeButton')}
css={(theme) => ({
WebkitAppearance: 'none',
border: 'none',
outline: 'none',
boxShadow: 'none',
display: 'block',
flex: '0 0 auto',
cursor: 'pointer',
background: 'transparent',
position: 'relative',
fontSize: 'inherit',
'&[data-invisible="1"]': {
visibility: 'hidden !important' as 'hidden',
},
'&::after': {
content: '"\u00d7"',
display: 'block',
padding: 4,
fontSize: '1.2em',
color: theme.TEXT_PLACEHOLDER_COLOR,
background: 'transparent',
},
'&:hover::after': {
color: theme.TEXT_COLOR,
},
})}
/>
<button
type="button"
@ -184,7 +247,36 @@ export class QueryForm extends React.PureComponent<
data-type={regexToggleType}
aria-pressed={isRegexSearch}
onClick={this.handleRegexSearchClick}
{...styling('toggleButton')}
css={(theme) => ({
width: '24px',
height: '24px',
display: 'inline-block',
flex: '0 0 auto',
color: theme.TEXT_PLACEHOLDER_COLOR,
cursor: 'pointer',
padding: 0,
fontSize: '0.7em',
letterSpacing: '-0.7px',
outline: 'none',
boxShadow: 'none',
fontWeight: '700',
border: 'none',
'&:hover': {
color: theme.TEXT_COLOR,
},
backgroundColor: 'transparent',
'&[aria-pressed="true"]': {
color: theme.BACKGROUND_COLOR,
backgroundColor: theme.TEXT_COLOR,
},
'&[data-type="error"]': {
color: theme.TEXT_COLOR,
backgroundColor: theme.TOGGLE_BUTTON_ERROR,
},
})}
>
<RegexIcon />
</button>
@ -203,7 +295,24 @@ export class QueryForm extends React.PureComponent<
onChange={this.handleSelectFilterChange}
/>
</div>
<div {...styling('sortBySection')}>
<div
css={{
display: 'flex',
padding: '0.4em',
'& label': {
display: 'flex',
flex: '0 0 auto',
whiteSpace: 'nowrap',
alignItems: 'center',
paddingRight: '0.4em',
},
'& > :last-child': {
flex: '0 0 auto',
marginLeft: '0.4em',
},
}}
>
<label htmlFor={selectId}>Sort by</label>
<Select<SelectOption<QueryComparators>>
id={selectId}

18
packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx
View File

@ -41,7 +41,23 @@ export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
return (
<StyleUtilsContext.Consumer>
{({ styling }) => (
<article {...rootProps} {...styling('tabContent')}>
<article
{...rootProps}
css={(theme) => ({
display: 'block',
overflowY: 'auto',
padding: '0.5em 0',
color: theme.TAB_CONTENT_COLOR,
'& h2': {
color: theme.ULIST_STRONG_COLOR,
padding: '0.5em 1em',
fontWeight: 700,
},
'& h3': {
color: theme.ULIST_STRONG_COLOR,
},
})}
>
<h2>{apiState.config.reducerPath}</h2>
<TreeView
before={<h3>State</h3>}

13
packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewHeader.tsx
View File

@ -26,7 +26,18 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
return (
<StyleUtilsContext.Consumer>
{({ styling }) => (
<div {...styling('previewHeader')}>
<div
css={(theme) => ({
flex: '0 0 30px',
padding: '5px 4px',
alignItems: 'center',
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
backgroundColor: theme.HEADER_BACKGROUND_COLOR,
borderBottomColor: theme.HEADER_BORDER_COLOR,
})}
>
<div
css={{
display: 'flex',

23
packages/redux-devtools-rtk-query-monitor/src/components/SortOrderButton.tsx
View File

@ -35,7 +35,28 @@ export function SortOrderButton({
id={id}
onClick={handleButtonClick}
aria-pressed={isAsc}
{...styling(['sortButton'])}
css={(theme) => ({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexFlow: 'row nowrap',
cursor: 'pointer',
position: 'relative',
padding: '0 8px',
color: theme.TEXT_COLOR,
borderStyle: 'solid',
borderWidth: '1px',
borderRadius: '3px',
backgroundColor: theme.TAB_BACK_COLOR,
borderColor: theme.TAB_BORDER_COLOR,
height: 30,
fontSize: 12,
width: 64,
'&:active': {
backgroundColor: theme.TAB_BACK_SELECTED_COLOR,
},
})}
>
<ArrowUpIcon style={arrowStyles} />
{buttonLabel}

9
packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx
View File

@ -90,7 +90,14 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
<StyleUtilsContext.Consumer>
{({ styling, invertTheme, base16Theme }) => {
return (
<div {...rootProps} {...styling('treeWrapper')}>
<div
{...rootProps}
css={{
overflowX: 'auto',
overflowY: 'auto',
padding: '0.5em 1em',
}}
>
{before}
<JSONTree
keyPath={keyPath}

25
packages/redux-devtools-rtk-query-monitor/src/components/UList.tsx
View File

@ -6,7 +6,30 @@ export type UListProps = React.HTMLAttributes<HTMLUListElement>;
export function UList(props: UListProps): JSX.Element {
return (
<StyleUtilsContext.Consumer>
{({ styling }) => <ul {...props} {...styling('uList')} />}
{({ styling }) => (
<ul
{...props}
css={(theme) => ({
listStyle: 'none',
padding: '0 0 0 1em',
color: theme.ULIST_COLOR,
'& > li': {
listStyle: 'none',
},
'& > li::before': {
content: '"\\2022"',
display: 'inline-block',
paddingRight: '0.5em',
color: theme.ULIST_DISC_COLOR,
fontSize: '0.8em',
},
'& strong': {
color: theme.ULIST_STRONG_COLOR,
},
})}
/>
)}
</StyleUtilsContext.Consumer>
);
}

22
packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx
View File

@ -1,4 +1,5 @@
import React, { ReactNode } from 'react';
import type { Interpolation, Theme } from '@emotion/react';
import { StyleUtilsContext } from '../styles/createStylingFromTheme';
import { createTreeItemLabelRenderer } from '../styles/tree';
import {
@ -38,6 +39,23 @@ import {
QueryPreviewDataProps,
} from '../components/QueryPreviewData';
const queryPreviewCss: Interpolation<Theme> = (theme) => ({
flex: '1 1 50%',
overflowX: 'hidden',
oveflowY: 'auto',
display: 'flex',
flexDirection: 'column',
overflowY: 'hidden',
'& pre': {
border: 'inherit',
borderRadius: '3px',
lineHeight: 'inherit',
color: 'inherit',
},
backgroundColor: theme.BACKGROUND_COLOR,
});
export interface QueryPreviewProps<S = unknown> {
readonly selectedTab: QueryPreviewTabs;
readonly hasNoApis: boolean;
@ -213,7 +231,7 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
return (
<StyleUtilsContext.Consumer>
{({ styling }) => (
<div {...styling('queryPreview')}>
<div css={queryPreviewCss}>
<QueryPreviewHeader
selectedTab={selectedTab}
onTabChange={onTabChange}
@ -241,7 +259,7 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
<StyleUtilsContext.Consumer>
{({ styling }) => {
return (
<div {...styling('queryPreview')}>
<div css={queryPreviewCss}>
<QueryPreviewHeader
selectedTab={selectedTab}
onTabChange={onTabChange}

244
packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts
View File

@ -91,249 +91,7 @@ type ColorMap = {
[color in Color]: string;
};
const getSheetFromColorMap = (map: ColorMap) => {
const appearanceNone = {
'-webkit-appearance': 'none',
};
return {
sortButton: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexFlow: 'row nowrap',
cursor: 'pointer',
position: 'relative',
padding: '0 8px',
color: map.TEXT_COLOR,
borderStyle: 'solid',
borderWidth: '1px',
borderRadius: '3px',
backgroundColor: map.TAB_BACK_COLOR,
borderColor: map.TAB_BORDER_COLOR,
height: 30,
fontSize: 12,
width: 64,
'&:active': {
backgroundColor: map.TAB_BACK_SELECTED_COLOR,
},
},
toggleButton: {
width: '24px',
height: '24px',
display: 'inline-block',
flex: '0 0 auto',
color: map.TEXT_PLACEHOLDER_COLOR,
cursor: 'pointer',
padding: 0,
fontSize: '0.7em',
letterSpacing: '-0.7px',
outline: 'none',
boxShadow: 'none',
fontWeight: '700',
border: 'none',
'&:hover': {
color: map.TEXT_COLOR,
},
backgroundColor: 'transparent',
'&[aria-pressed="true"]': {
color: map.BACKGROUND_COLOR,
backgroundColor: map.TEXT_COLOR,
},
'&[data-type="error"]': {
color: map.TEXT_COLOR,
backgroundColor: map.TOGGLE_BUTTON_ERROR,
},
},
queryForm: {
display: 'flex',
flexFlow: 'column nowrap',
},
sortBySection: {
display: 'flex',
padding: '0.4em',
'& label': {
display: 'flex',
flex: '0 0 auto',
whiteSpace: 'noWrap',
alignItems: 'center',
paddingRight: '0.4em',
},
'& > :last-child': {
flex: '0 0 auto',
marginLeft: '0.4em',
},
},
querySearch: {
maxWidth: '65%',
'background-color': map.BACKGROUND_COLOR,
display: 'flex',
alignItems: 'center',
flexFlow: 'row nowrap',
flex: '1 1 auto',
paddingRight: 6,
'& input': {
outline: 'none',
border: 'none',
width: '100%',
flex: '1 1 auto',
padding: '5px 10px',
'font-size': '1em',
position: 'relative',
fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
'background-color': map.BACKGROUND_COLOR,
color: map.TEXT_COLOR,
'&::-webkit-input-placeholder': {
color: map.TEXT_PLACEHOLDER_COLOR,
},
'&::-moz-placeholder': {
color: map.TEXT_PLACEHOLDER_COLOR,
},
'&::-webkit-search-cancel-button': appearanceNone,
},
},
closeButton: {
...appearanceNone,
border: 'none',
outline: 'none',
boxShadow: 'none',
display: 'block',
flex: '0 0 auto',
cursor: 'pointer',
background: 'transparent',
position: 'relative',
fontSize: 'inherit',
'&[data-invisible="1"]': {
visibility: 'hidden !important',
},
'&::after': {
content: '"\u00d7"',
display: 'block',
padding: 4,
fontSize: '1.2em',
color: map.TEXT_PLACEHOLDER_COLOR,
background: 'transparent',
},
'&:hover::after': {
color: map.TEXT_COLOR,
},
},
noApiFound: {
width: '100%',
textAlign: 'center',
color: map.TEXT_COLOR,
padding: '1.4em',
'& a': {
fontSize: 'inherit',
color: map.TEXT_COLOR,
textDecoration: 'underline',
},
},
searchSelectLabel: {
display: 'inline-block',
padding: 4,
borderLeft: '1px solid currentColor',
},
queryPreview: {
flex: '1 1 50%',
overflowX: 'hidden',
oveflowY: 'auto',
display: 'flex',
'flex-direction': 'column',
'overflow-y': 'hidden',
'& pre': {
border: 'inherit',
'border-radius': '3px',
'line-height': 'inherit',
color: 'inherit',
},
'background-color': map.BACKGROUND_COLOR,
},
previewHeader: {
flex: '0 0 30px',
padding: '5px 4px',
'align-items': 'center',
'border-bottom-width': '1px',
'border-bottom-style': 'solid',
'background-color': map.HEADER_BACKGROUND_COLOR,
'border-bottom-color': map.HEADER_BORDER_COLOR,
},
treeItemPin: {
'font-size': '0.7em',
'padding-left': '5px',
cursor: 'pointer',
'&:hover': {
'text-decoration': 'underline',
},
color: map.PIN_COLOR,
},
treeItemKey: {
color: map.TEXT_PLACEHOLDER_COLOR,
},
treeWrapper: {
overflowX: 'auto',
overflowY: 'auto',
padding: '0.5em 1em',
},
tabContent: {
display: 'block',
overflowY: 'auto',
padding: '0.5em 0',
color: map.TAB_CONTENT_COLOR,
'& h2': {
color: map.ULIST_STRONG_COLOR,
padding: '0.5em 1em',
fontWeight: 700,
},
'& h3': {
color: map.ULIST_STRONG_COLOR,
},
},
uList: {
listStyle: 'none',
padding: '0 0 0 1em',
color: map.ULIST_COLOR,
'& > li': {
listStyle: 'none',
},
'& > li::before': {
content: '"\\2022"',
display: 'inline-block',
paddingRight: '0.5em',
color: map.ULIST_DISC_COLOR,
fontSize: '0.8em',
},
'& strong': {
color: map.ULIST_STRONG_COLOR,
},
},
};
};
const getSheetFromColorMap = (map: ColorMap) => ({});
let themeSheet: StyleSheet;

4
packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx
View File

@ -98,7 +98,9 @@ export function createTreeItemLabelRenderer(
return function labelRenderer([key], nodeType, expanded) {
return (
<span>
<span {...styling('treeItemKey')}>{key}</span>
<span css={(theme) => ({ color: theme.TEXT_PLACEHOLDER_COLOR })}>
{key}
</span>
{!expanded && ': '}
</span>
);