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

Convert more styling to Emotion

Browse Source
This commit is contained in:
Nathan Bierema 2023-12-13 17:41:53 -05:00
parent af0ca8f304
commit 5e589ba80c
4 changed files with 75 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import React, { ReactNode, FormEvent, MouseEvent, ChangeEvent } from 'react';
import type { DebouncedFunc } from 'lodash';
import { css } from '@emotion/react';
import { Select } from '@redux-devtools/ui';
import { QueryFormValues } from '../types';
import { StyleUtilsContext } from '../styles/createStylingFromTheme';
@ -10,6 +11,17 @@ import { QueryFilters, filterQueryOptions } from '../utils/filters';
import { SortOrderButton } from './SortOrderButton';
import { RegexIcon } from './RegexIcon';
const srOnlyCss = css({
position: 'absolute',
width: 1,
height: 1,
padding: 0,
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0,0,0,0)',
border: 0,
});
export interface QueryFormProps {
values: QueryFormValues;
searchQueryRegex: RegExp | null;
@ -145,7 +157,7 @@ export class QueryForm extends React.PureComponent<
borderColor: theme.LIST_BORDER_COLOR,
})}
>
<label htmlFor={searchId} {...styling('srOnly')}>
<label htmlFor={searchId} css={srOnlyCss}>
filter query
</label>
<div {...styling('querySearch')}>
@ -177,7 +189,7 @@ export class QueryForm extends React.PureComponent<
<RegexIcon />
</button>
</div>
<label htmlFor={selectId} {...styling('srOnly')}>
<label htmlFor={selectId} css={srOnlyCss}>
filter by
</label>
<Select<SelectOption<QueryFilters>>

2
packages/redux-devtools-rtk-query-monitor/src/components/QueryList.tsx
View File

@ -85,7 +85,7 @@ export class QueryList extends PureComponent<QueryListProps> {
<p
css={{
display: '-webkit-box',
boxOrient: 'vertical',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
whiteSpace: 'normal',
overflow: 'hidden',

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

@ -27,7 +27,17 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
<StyleUtilsContext.Consumer>
{({ styling }) => (
<div {...styling('previewHeader')}>
<div {...styling('tabSelector')}>
<div
css={{
display: 'flex',
width: '100%',
justifyContent: 'flex-end',
overflow: 'hidden',
'& > *': {
flex: '0 1 auto',
},
}}
>
{tabs.map((tab) => (
<button
type="button"
@ -36,13 +46,55 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
role={'tab'}
onClick={() => this.handleTabClick(tab)}
key={tab.value}
{...styling(
[
'selectorButton',
tab.value === selectedTab && 'selectorButtonSelected',
],
tab.value === selectedTab,
)}
css={[
(theme) => ({
cursor: 'pointer',
position: 'relative',
height: '33px',
padding: '0 8px',
display: 'inline-flex',
alignItems: 'center',
boxShadow: 'none',
outline: 'none',
color: theme.TEXT_COLOR,
borderStyle: 'solid',
borderWidth: '1px',
borderLeftWidth: 0,
'&:first-of-type': {
borderLeftWidth: '1px',
borderTopLeftRadius: '3px',
borderBottomLeftRadius: '3px',
},
'&:last-of-type': {
borderTopRightRadius: '3px',
borderBottomRightRadius: '3px',
},
backgroundColor: theme.TAB_BACK_COLOR,
'&:hover': {
backgroundColor: theme.TAB_BACK_HOVER_COLOR,
},
borderColor: theme.TAB_BORDER_COLOR,
'& > *': {
display: '-webkit-box',
boxOrient: 'vertical',
WebkitLineClamp: 1,
overflow: 'hidden',
wordBreak: 'break-all',
WebkitBoxPack: 'end',
paddingBottom: 0,
},
}),
tab.value === selectedTab &&
((theme) => ({
backgroundColor: theme.TAB_BACK_SELECTED_COLOR,
})),
]}
>
<span>
{renderTabLabel ? renderTabLabel(tab) : tab.label}

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

@ -97,80 +97,6 @@ const getSheetFromColorMap = (map: ColorMap) => {
};
return {
tabSelector: {
display: 'flex',
width: '100%',
justifyContent: 'flex-end',
overflow: 'hidden',
'& > *': {
flex: '0 1 auto',
},
},
srOnly: {
position: 'absolute',
width: 1,
height: 1,
padding: 0,
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0,0,0,0)',
border: 0,
},
selectorButton: {
cursor: 'pointer',
position: 'relative',
height: '33px',
padding: '0 8px',
display: 'inline-flex',
alignItems: 'center',
boxShadow: 'none',
outline: 'none',
color: map.TEXT_COLOR,
'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,
'& > *': {
display: '-webkit-box',
boxOrient: 'vertical',
'-webkit-line-clamp': 1,
overflow: 'hidden',
wordBreak: 'break-all',
'-webkit-box-pack': 'end',
paddingBottom: 0,
},
},
selectorButtonSmall: {
padding: '0px 8px',
'font-size': '0.8em',
},
selectorButtonSelected: {
'background-color': map.TAB_BACK_SELECTED_COLOR,
},
sortButton: {
display: 'flex',
justifyContent: 'space-between',