github-personal/openapi-ui
1
0
Fork 0
mirror of https://github.com/outbackdingo/openapi-ui.git synced 2026-01-27 18:19:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

layout improvements

Browse Source
This commit is contained in:
typescreep
2025-10-31 03:38:23 +03:00
parent d1a1bd656a
commit a416ee43f7
2 changed files with 30 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/organisms/Events/molecules/EventRow/EventRow.tsx
View File

@@ -1,5 +1,5 @@
import React, { FC } from 'react'
import { theme as antdtheme, Flex } from 'antd'
import { theme as antdtheme, Flex, Typography } from 'antd'
import { EarthIcon, getUppercase, hslFromString, Spacer } from '@prorobotech/openapi-k8s-toolkit'
import { useSelector } from 'react-redux'
import { RootState } from 'store/store'
@@ -16,11 +16,14 @@ export const EventRow: FC<TEventRowProps> = ({ e }) => {
const theme = useSelector((state: RootState) => state.openapiTheme.theme)
const abbr = e.regarding?.kind ? getUppercase(e.regarding.kind) : undefined
const bgColor = e.regarding?.kind && abbr ? hslFromString(abbr, theme) : 'initial'
const bgColorNamespace = hslFromString('NS', theme)
const bgColor = e.regarding?.kind && abbr ? hslFromString(e.regarding?.kind, theme) : 'initial'
const bgColorNamespace = hslFromString('Namespace', theme)
return (
<Styled.Card $colorText={token.colorText}>
<Styled.Card
$bigBorder={e.type === 'Warning'}
$mainColor={e.type === 'Warning' ? token.colorWarningActive : token.colorText}
>
<Flex justify="space-between" align="center">
<Flex align="center" gap={16}>
<Flex align="center" gap={8}>
@@ -44,10 +47,21 @@ export const EventRow: FC<TEventRowProps> = ({ e }) => {
)}
</Flex>
<Spacer $space={16} $samespace />
<Flex gap={8} wrap>
<Flex gap={8} align="center" wrap>
<div>
{e.deprecatedSource?.component && (
<Flex gap={8} align="center" wrap>
<Flex gap={6} align="center" wrap>
<Typography.Text type="secondary">Generated by</Typography.Text>
<Styled.Title>{e.deprecatedSource?.component}</Styled.Title>
</Flex>
<div>
<Typography.Text type="secondary">•</Typography.Text>
</div>
</Flex>
)}
</div>
<Styled.Title>{e.reason || e.action || 'Event'}</Styled.Title>
<Styled.Title>•</Styled.Title>
<Styled.Title>{e.type || 'Normal'}</Styled.Title>
</Flex>
<Spacer $space={16} $samespace />
{eventText(e) && <div>{eventText(e)}</div>}

17
src/components/organisms/Events/molecules/EventRow/styled.ts
View File

@@ -1,13 +1,14 @@
import styled from 'styled-components'
type TCardProps = {
$colorText: string
$mainColor: string
$bigBorder?: boolean
}
const Card = styled.div<TCardProps>`
border-radius: 6px;
padding: 16px 8px;
border: 1px solid ${({ $colorText }) => $colorText};
border: ${({ $bigBorder }) => ($bigBorder ? 2 : 1)}px solid ${({ $mainColor }) => $mainColor};
gap: 12px;
margin-bottom: 16px;
position: relative;
@@ -16,8 +17,8 @@ const Card = styled.div<TCardProps>`
position: absolute;
content: '';
width: 36px;
height: 1px;
background: ${({ $colorText }) => $colorText};
height: ${({ $bigBorder }) => ($bigBorder ? 2 : 1)}px;
background: ${({ $mainColor }) => $mainColor};
left: -37px;
top: 50%; /* halfway down parent */
transform: translateY(-50%); /* center vertically */
@@ -26,11 +27,11 @@ const Card = styled.div<TCardProps>`
&:after {
position: absolute;
content: '';
width: 6px;
height: 6px;
width: ${({ $bigBorder }) => ($bigBorder ? 7 : 6)}px;
height: ${({ $bigBorder }) => ($bigBorder ? 7 : 6)}px;
border-radius: 50%;
background: ${({ $colorText }) => $colorText};
left: -39px;
background: ${({ $mainColor }) => $mainColor};
left: ${({ $bigBorder }) => ($bigBorder ? -41 : -39)}px;
top: 50%;
transform: translateY(-50%);
}