diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx index 1acdfcb3..aada87ae 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx @@ -133,7 +133,18 @@ export class QueryForm extends React.PureComponent< onSubmit={this.handleSubmit} {...styling('queryForm')} > -
+
({ + display: 'flex', + padding: 4, + flex: '0 0 auto', + alignItems: 'center', + borderBottomWidth: '1px', + borderBottomStyle: 'solid', + + borderColor: theme.LIST_BORDER_COLOR, + })} + > diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryList.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryList.tsx index 8c803c1a..c2402435 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/QueryList.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryList.tsx @@ -1,8 +1,24 @@ import React, { PureComponent, ReactNode } from 'react'; +import type { Interpolation, Theme } from '@emotion/react'; import { StyleUtilsContext } from '../styles/createStylingFromTheme'; import { RtkResourceInfo, RtkQueryMonitorState } from '../types'; import { isQuerySelected } from '../utils/rtk-query'; +const queryStatusCss: Interpolation = (theme) => ({ + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + height: 22, + padding: '0 6px', + borderRadius: '3px', + fontSize: '0.7em', + lineHeight: '1em', + flexShrink: 0, + fontWeight: 700, + backgroundColor: theme.ACTION_TIME_BACK_COLOR, + color: theme.ACTION_TIME_COLOR, +}); + export interface QueryListProps { resInfos: RtkResourceInfo[]; selectedQueryKey: RtkQueryMonitorState['selectedQueryKey']; @@ -36,7 +52,7 @@ export class QueryList extends PureComponent { return ( {({ styling }) => ( -
    +
      {resInfos.map((resInfo) => { const isSelected = isQuerySelected(selectedQueryKey, resInfo); @@ -44,19 +60,58 @@ export class QueryList extends PureComponent {
    • onSelectQuery(resInfo)} - {...styling( - ['queryListItem', isSelected && 'queryListItemSelected'], - isSelected, - )} + css={[ + (theme) => ({ + borderBottomWidth: '1px', + borderBottomStyle: 'solid', + display: 'flex', + justifyContent: 'space-between', + padding: '5px 10px', + cursor: 'pointer', + userSelect: 'none', + '&:last-child': { + borderBottomWidth: 0, + }, + overflow: 'hidden', + maxHeight: 47, + borderBottomColor: theme.BORDER_COLOR, + }), + isSelected && + ((theme) => ({ + backgroundColor: theme.SELECTED_BACKGROUND_COLOR, + })), + ]} > -

      +

      {QueryList.formatQuery(resInfo)}

      -
      - +
      + {resInfo.type === 'query' ? 'Q' : 'M'} -

      {resInfo.state.status}

      +

      {resInfo.state.status}

    • ); diff --git a/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx b/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx index 076686b6..a1c9601a 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx @@ -151,7 +151,38 @@ class RtkQueryInspector> extends PureComponent< })} >
      ({ + display: 'flex', + flex: '0 0 auto', + height: '50%', + width: '100%', + borderColor: theme.TAB_BORDER_COLOR, + + '&[data-wide-layout="0"]': { + borderBottomWidth: 1, + borderStyle: 'solid', + }, + + '&[data-wide-layout="1"]': { + height: '100%', + width: '44%', + borderRightWidth: 1, + borderStyle: 'solid', + }, + flexFlow: 'column nowrap', + '& > form': { + flex: '0 0 auto', + borderBottomWidth: '1px', + borderBottomStyle: 'solid', + borderColor: theme.LIST_BORDER_COLOR, + }, + '& > ul': { + flex: '1 1 auto', + overflowX: 'hidden', + overflowY: 'auto', + maxHeight: 'calc(100% - 70px)', + }, + })} data-wide-layout={+this.state.isWideLayout} > { }; return { - querySectionWrapper: { - display: 'flex', - flex: '0 0 auto', - height: '50%', - width: '100%', - borderColor: map.TAB_BORDER_COLOR, - - '&[data-wide-layout="0"]': { - borderBottomWidth: 1, - borderStyle: 'solid', - }, - - '&[data-wide-layout="1"]': { - height: '100%', - width: '44%', - borderRightWidth: 1, - borderStyle: 'solid', - }, - flexFlow: 'column nowrap', - '& > :first-child': { - flex: '0 0 auto', - 'border-bottom-width': '1px', - 'border-bottom-style': 'solid', - 'border-color': map.LIST_BORDER_COLOR, - }, - '& > :nth-child(n + 2)': { - flex: '1 1 auto', - overflowX: 'hidden', - overflowY: 'auto', - maxHeight: 'calc(100% - 70px)', - }, - }, - - queryList: { - listStyle: 'none', - margin: '0', - padding: '0', - }, - - queryListItem: { - 'border-bottom-width': '1px', - 'border-bottom-style': 'solid', - display: 'flex', - 'justify-content': 'space-between', - padding: '5px 10px', - cursor: 'pointer', - 'user-select': 'none', - '&:last-child': { - 'border-bottom-width': 0, - }, - overflow: 'hidden', - maxHeight: 47, - 'border-bottom-color': map.BORDER_COLOR, - }, - - queryListItemKey: { - display: '-webkit-box', - boxOrient: 'vertical', - '-webkit-line-clamp': 2, - whiteSpace: 'normal', - overflow: 'hidden', - width: '100%', - maxWidth: 'calc(100% - 70px)', - wordBreak: 'break-all', - margin: 0, - }, - - queryListHeader: { - display: 'flex', - padding: 4, - flex: '0 0 auto', - 'align-items': 'center', - 'border-bottom-width': '1px', - 'border-bottom-style': 'solid', - - 'border-color': map.LIST_BORDER_COLOR, - }, - - queryStatusWrapper: { - display: 'flex', - width: 'auto', - justifyContent: 'center', - alignItems: 'center', - margin: 0, - flex: '0 0 auto', - overflow: 'hidden', - }, - - queryType: { - marginRight: 4, - }, - - queryStatus: { - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', - height: 22, - padding: '0 6px', - 'border-radius': '3px', - 'font-size': '0.7em', - 'line-height': '1em', - 'flex-shrink': 0, - fontWeight: 700, - 'background-color': map.ACTION_TIME_BACK_COLOR, - color: map.ACTION_TIME_COLOR, - }, - - queryListItemSelected: { - 'background-color': map.SELECTED_BACKGROUND_COLOR, - }, - tabSelector: { display: 'flex', width: '100%',