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

actionListItemTime

Browse Source
This commit is contained in:
Nathan Bierema 2023-12-11 18:20:06 -05:00
parent 627ae13300
commit ec1d1d4170
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx
View File

@ -11,6 +11,7 @@ import {
actionListItemCss, actionListItemCss,
actionListItemSelectedCss, actionListItemSelectedCss,
actionListItemSkippedCss, actionListItemSkippedCss,
actionListItemTimeCss,
} from './utils/createStylingFromTheme'; } from './utils/createStylingFromTheme';
const BUTTON_SKIP = 'Skip'; const BUTTON_SKIP = 'Skip';
@ -98,7 +99,7 @@ export default class ActionListRow<
</div> </div>
{hideActionButtons ? ( {hideActionButtons ? (
<RightSlider styling={styling} shown> <RightSlider styling={styling} shown>
<div {...styling('actionListItemTime')}> <div css={actionListItemTimeCss}>
{timeDelta === 0 {timeDelta === 0
? '+00:00:00' ? '+00:00:00'
: dateformat( : dateformat(
@ -110,7 +111,7 @@ export default class ActionListRow<
) : ( ) : (
<div css={actionListItemButtonsCss}> <div css={actionListItemButtonsCss}>
<RightSlider styling={styling} shown={!showButtons} rotate> <RightSlider styling={styling} shown={!showButtons} rotate>
<div {...styling('actionListItemTime')}> <div css={actionListItemTimeCss}>
{timeDelta === 0 {timeDelta === 0
? '+00:00:00' ? '+00:00:00'
: dateformat( : dateformat(

24
packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
View File

@ -134,19 +134,19 @@ export const actionListItemButtonsCss = css({
display: 'flex', display: 'flex',
}); });
export const actionListItemTimeCss: Interpolation<Theme> = (theme) => ({
display: 'inline',
padding: '4px 6px',
borderRadius: '3px',
fontSize: '0.8em',
lineHeight: '1em',
flexShrink: 0,
backgroundColor: colorMap(theme).ACTION_TIME_BACK_COLOR,
color: colorMap(theme).ACTION_TIME_COLOR,
});
const getSheetFromColorMap = (map: ColorMap) => ({ const getSheetFromColorMap = (map: ColorMap) => ({
actionListItemTime: {
display: 'inline',
padding: '4px 6px',
'border-radius': '3px',
'font-size': '0.8em',
'line-height': '1em',
'flex-shrink': 0,
'background-color': map.ACTION_TIME_BACK_COLOR,
color: map.ACTION_TIME_COLOR,
},
actionListItemSelector: { actionListItemSelector: {
display: 'inline-flex', display: 'inline-flex',
}, },