Skip to content
This repository was archived by the owner on Feb 8, 2024. It is now read-only.

Make connection icon bigger & fix compressed items on list #693

Merged
gzdunek merged 2 commits into from
Mar 25, 2022
Merged

Make connection icon bigger & fix compressed items on list #693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57d16d9
Make connections icon bigger
gzdunek Mar 23, 2022
53334f5
Properly use `css` prop
gzdunek Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,13 @@ export const ClusterSelector = forwardRef<HTMLDivElement, ClusterSelectorProps>(
isClusterSelected={!!props.clusterName}
title={text}
>
<Text css={{ whiteSpace: 'nowrap' }}>{text}</Text>
<Text
css={`
white-space: nowrap;
`}
>
{text}
</Text>
<SortIcon fontSize={12} ml={3} />
</Container>
);
Expand All @@ -42,7 +48,7 @@ const Container = styled.button`
justify-content: space-between;
align-items: center;
padding: 0 12px;
opacity: ${props => props.isClusterSelected ? 1 : 0.6};
opacity: ${props => (props.isClusterSelected ? 1 : 0.6)};
cursor: pointer;

&:hover,
Expand Down
16 changes: 12 additions & 4 deletions packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,10 @@ export function ConnectionItem(props: ConnectionItemProps) {
<ListItem
onClick={props.onActivate}
isActive={isActive}
css={{ padding: '6px 8px', height: 'unset' }}
css={`
padding: 6px 8px;
height: unset;
`}
>
<ConnectionStatusIndicator mr={3} connected={props.item.connected} />
<Flex
Expand All @@ -59,20 +62,25 @@ export function ConnectionItem(props: ConnectionItemProps) {
bold
color="text.primary"
title={props.item.title}
css={{ lineHeight: '16px', whiteSpace: 'normal' }}
css={`
line-height: 16px;
white-space: normal;
`}
>
{props.item.title}
</Text>
<Text
color="text.secondary"
typography="body2"
css={{ whiteSpace: 'normal' }}
css={`
white-space: normal;
`}
>
{props.item.clusterName}
</Text>
</Flex>
<ButtonIcon
mr="-10px"
mr="-3px"
color="text.placeholder"
title={actionIcon.title}
onClick={e => {
Expand Down
7 changes: 5 additions & 2 deletions packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,25 @@ import { ConnectionsIconStatusIndicator } from './ConnectionsIconStatusIndicator

interface ConnectionsIconProps {
isAnyConnectionActive: boolean;

onClick(): void;
}

export const ConnectionsIcon = forwardRef<HTMLDivElement, ConnectionsIconProps>(
(props, ref) => {
return (
<Container ref={ref}>
<ConnectionsIconStatusIndicator connected={props.isAnyConnectionActive} />
<ConnectionsIconStatusIndicator
connected={props.isAnyConnectionActive}
/>
<StyledButton
onClick={props.onClick}
kind="secondary"
size="small"
m="auto"
title="Connections"
>
<Cluster fontSize={14} />
<Cluster fontSize={16} />
</StyledButton>
</Container>
);
Expand Down