Skip to content
This repository was archived by the owner on May 4, 2023. It is now read-only.

Commit 5feb8bf

Browse files
dastrong-codigadastrong-codiga
committed
fix: added mac style window options and added connecting text for offline case
1 parent 181affb commit 5feb8bf

File tree

4 files changed

+144
-84
lines changed

4 files changed

+144
-84
lines changed

‎src/renderer/components/Layout/Titlebar.tsx

Lines changed: 51 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
/* eslint-disable react/button-has-type */
22
/* eslint-disable jsx-a11y/control-has-associated-label */
3-
import { Flex, Link, Image } from '@chakra-ui/react';
3+
import { Flex, Link, Text } from '@chakra-ui/react';
44
import { Avatar } from '@codiga/components';
5+
import { ProviderKind } from '@codiga/components/dist/lib/ProviderLogo';
6+
57
import { useUser } from '../UserContext';
68
import { APP_URL } from '../../lib/config';
79
import { getAvatarUrl } from '../../utils/userUtils';
8-
import CodigaLogo from './CodigaIcon.png';
9-
import TitlebarButton from './TitlebarButton';
10+
11+
import TitlebarButtonsMac from './TitlebarButtonsMac';
12+
import TitlebarButtonsWin from './TitlebarButtonsWin';
1013

1114
type TitlebarProps = {
1215
openLoginModal: () => void;
@@ -25,84 +28,55 @@ export default function Titlebar({ openLoginModal, isOnline }: TitlebarProps) {
2528
justifyContent="space-between"
2629
bg="neutral.25"
2730
_dark={{ bg: 'base.dark' }}
28-
sx={{
29-
'-webkit-app-region': 'drag',
30-
}}
31+
sx={{ '-webkit-app-region': 'drag' }}
3132
>
32-
<Image src={CodigaLogo} h="24px" ml="space_16" />
33-
34-
<Flex
35-
alignItems="center"
36-
gridGap="space_16"
37-
sx={{ '-webkit-app-region': 'no-drag' }}
38-
>
39-
{isOnline && (
40-
<>
41-
<Link
42-
isExternal
43-
href={`${APP_URL}/assistant/snippet/create`}
44-
variant="square"
45-
>
46-
Create Snippet
47-
</Link>
48-
49-
<Flex w="32px" alignItems="center">
50-
{id ? (
51-
<Avatar
52-
name={username || 'Anon'}
53-
kind={accountType as any}
54-
src={getAvatarUrl({ id, username, accountType })}
55-
size="sm"
56-
/>
57-
) : (
58-
// eslint-disable-next-line jsx-a11y/anchor-is-valid
59-
<Link
60-
as="button"
61-
onClick={openLoginModal}
62-
variant="solid"
63-
size="sm"
64-
p="0"
65-
>
66-
Login
67-
</Link>
68-
)}
69-
</Flex>
70-
</>
71-
)}
33+
{/* LEFT SIDE */}
34+
{/* we either show the Mac buttons or a Codiga img here */}
35+
<TitlebarButtonsMac />
7236

73-
<Flex>
74-
<TitlebarButton message="minimizeApp">
75-
<svg
76-
width="12"
77-
height="12"
78-
xmlns="http://www.w3.org/2000/svg"
79-
viewBox="0 0 448 512"
80-
>
81-
<path d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z" />
82-
</svg>
83-
</TitlebarButton>
84-
<TitlebarButton message="maximizeApp">
85-
<svg
86-
width="12"
87-
height="12"
88-
xmlns="http://www.w3.org/2000/svg"
89-
viewBox="0 0 448 512"
90-
>
91-
<path d="M128 32H32C14.31 32 0 46.31 0 64v96c0 17.69 14.31 32 32 32s32-14.31 32-32V96h64c17.69 0 32-14.31 32-32S145.7 32 128 32zM416 32h-96c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32V64C448 46.31 433.7 32 416 32zM128 416H64v-64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96c0 17.69 14.31 32 32 32h96c17.69 0 32-14.31 32-32S145.7 416 128 416zM416 320c-17.69 0-32 14.31-32 32v64h-64c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c17.69 0 32-14.31 32-32v-96C448 334.3 433.7 320 416 320z" />
92-
</svg>
93-
</TitlebarButton>
37+
{/* RIGHT SIDE */}
38+
{/* we show windows buttons, connecting text or CTA/Avatar here */}
39+
<Flex sx={{ '-webkit-app-region': 'no-drag' }}>
40+
<Flex alignItems="center" gridGap="space_16" mr="space_16">
41+
{isOnline ? (
42+
<>
43+
<Link
44+
isExternal
45+
href={`${APP_URL}/assistant/snippet/create`}
46+
variant="square"
47+
>
48+
Create Snippet
49+
</Link>
9450

95-
<TitlebarButton message="closeApp">
96-
<svg
97-
width="12"
98-
height="12"
99-
xmlns="http://www.w3.org/2000/svg"
100-
viewBox="0 0 320 512"
101-
>
102-
<path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z" />
103-
</svg>
104-
</TitlebarButton>
51+
<Flex w="32px" alignItems="center">
52+
{id ? (
53+
<Avatar
54+
name={username || 'Anon'}
55+
kind={accountType as ProviderKind}
56+
src={getAvatarUrl({ id, username, accountType })}
57+
size="sm"
58+
/>
59+
) : (
60+
// eslint-disable-next-line jsx-a11y/anchor-is-valid
61+
<Link
62+
as="button"
63+
onClick={openLoginModal}
64+
variant="solid"
65+
size="sm"
66+
p="0"
67+
>
68+
Login
69+
</Link>
70+
)}
71+
</Flex>
72+
</>
73+
) : (
74+
<Text size="xs" opacity={0.7}>
75+
Connecting...
76+
</Text>
77+
)}
10578
</Flex>
79+
<TitlebarButtonsWin />
10680
</Flex>
10781
</Flex>
10882
);

‎src/renderer/components/Layout/TitlebarButton.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,11 @@ export default function TitlebarButton({
1212
return (
1313
<Button
1414
variant="unstyled"
15-
minW="32px"
16-
maxW="32px"
17-
h="32px"
18-
m="2px"
15+
minW="0px"
16+
minH="0px"
1917
display="flex"
20-
alignItems="center"
2118
justifyContent="center"
22-
fill="neutral.100"
23-
_dark={{ fill: 'neutral.0' }}
19+
alignItems="center"
2420
onClick={() => {
2521
window.electron.ipcRenderer.sendMessage(message, [message]);
2622
}}

‎src/renderer/components/Layout/TitlebarButtonsMac.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Flex, Image } from '@chakra-ui/react';
2+
import { DotIcon } from '@codiga/components';
3+
import TitlebarButton from './TitlebarButton';
4+
import CodigaLogo from './CodigaIcon.png';
5+
6+
export default function TitlebarActionsMac() {
7+
if (!window.electron.isMac) {
8+
return <Image src={CodigaLogo} h="24px" ml="space_16" />;
9+
}
10+
11+
return (
12+
<Flex
13+
gridGap="space_8"
14+
ml="space_16"
15+
sx={{ '-webkit-app-region': 'no-drag' }}
16+
>
17+
<TitlebarButton message="closeApp" boxShadow="none !important" h="12px">
18+
<DotIcon h="12px" w="12px" color="#f96057" />
19+
</TitlebarButton>
20+
21+
<TitlebarButton
22+
message="minimizeApp"
23+
boxShadow="none !important"
24+
h="12px"
25+
>
26+
<DotIcon h="12px" w="12px" color="#f8ce52" />
27+
</TitlebarButton>
28+
29+
<TitlebarButton
30+
message="maximizeApp"
31+
boxShadow="none !important"
32+
h="12px"
33+
>
34+
<DotIcon h="12px" w="12px" color="#5fcf65" />
35+
</TitlebarButton>
36+
</Flex>
37+
);
38+
}

‎src/renderer/components/Layout/TitlebarButtonsWin.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Flex } from '@chakra-ui/react';
2+
import TitlebarButton from './TitlebarButton';
3+
4+
const buttonStyles = {
5+
minW: '32px',
6+
maxW: '32px',
7+
h: '32px',
8+
m: '2px',
9+
fill: 'neutral.100',
10+
_dark: { fill: 'neutral.0' },
11+
};
12+
13+
export default function TitlebarActionsWin() {
14+
if (window.electron.isMac) return null;
15+
16+
return (
17+
<Flex>
18+
<TitlebarButton message="minimizeApp" {...buttonStyles}>
19+
<svg
20+
width="12"
21+
height="12"
22+
xmlns="http://www.w3.org/2000/svg"
23+
viewBox="0 0 448 512"
24+
>
25+
<path d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z" />
26+
</svg>
27+
</TitlebarButton>
28+
29+
<TitlebarButton message="maximizeApp" {...buttonStyles}>
30+
<svg
31+
width="12"
32+
height="12"
33+
xmlns="http://www.w3.org/2000/svg"
34+
viewBox="0 0 448 512"
35+
>
36+
<path d="M128 32H32C14.31 32 0 46.31 0 64v96c0 17.69 14.31 32 32 32s32-14.31 32-32V96h64c17.69 0 32-14.31 32-32S145.7 32 128 32zM416 32h-96c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32V64C448 46.31 433.7 32 416 32zM128 416H64v-64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96c0 17.69 14.31 32 32 32h96c17.69 0 32-14.31 32-32S145.7 416 128 416zM416 320c-17.69 0-32 14.31-32 32v64h-64c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c17.69 0 32-14.31 32-32v-96C448 334.3 433.7 320 416 320z" />
37+
</svg>
38+
</TitlebarButton>
39+
40+
<TitlebarButton message="closeApp" {...buttonStyles}>
41+
<svg
42+
width="12"
43+
height="12"
44+
xmlns="http://www.w3.org/2000/svg"
45+
viewBox="0 0 320 512"
46+
>
47+
<path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z" />
48+
</svg>
49+
</TitlebarButton>
50+
</Flex>
51+
);
52+
}

0 commit comments

Comments
 (0)