Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

chore: use emotion for styling (pt. 9)#10474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
aslilac merged 28 commits intomainfromemotional-damage-9
Nov 2, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
28 commits
Select commitHold shift + click to select a range
4bd9a7e
emotion: `IconField`
aslilacOct 31, 2023
6f820c1
emotion: `UserAutocomplete`
aslilacOct 31, 2023
ffa39ef
emotion: `WorkspaceBuildLogs`
aslilacOct 31, 2023
f6e0a64
emotion: `CreateTemplateForm`
aslilacOct 31, 2023
1f61a4b
emotion: `SingleSignOnSection`
aslilacOct 31, 2023
55ecf93
emotion: `WorkspaceActions`
aslilacNov 1, 2023
f132aee
emotion: `LicensesSettingsPageView`
aslilacNov 1, 2023
13db92d
emotion: `WorkspaceProxyPage`
aslilacNov 1, 2023
0587497
emotion: `GroupsPageView`
aslilacNov 1, 2023
0706d34
emotion: `useClickableTableRow`
aslilacNov 1, 2023
21da106
🧹
aslilacNov 1, 2023
3212c58
emotion: `CreateWorkspacePageView`
aslilacNov 1, 2023
05df2f5
emotion: `WorkspaceStats`
aslilacNov 1, 2023
90a6252
🧹
aslilacNov 1, 2023
f61ad92
emotion: `StarterTemplatePageView`
aslilacNov 1, 2023
44f9d42
emotion: `WorkspaceBuildProgress`
aslilacNov 1, 2023
ec8e7b6
emotion: `WorkspaceBuildPageView`
aslilacNov 1, 2023
0bf9449
emotion: `EditRolesButton`
aslilacNov 1, 2023
ffc72af
emotion: `TerminalPage`
aslilacNov 1, 2023
d05ea6c
emotion: `TemplatesPageView`
aslilacNov 1, 2023
815ca99
emotion: `Sidebar`
aslilacNov 1, 2023
a128475
🧹
aslilacNov 1, 2023
67d0af4
emotion: `StarterTemplatesPageView`
aslilacNov 1, 2023
49c5812
🧹
aslilacNov 1, 2023
4323a07
emotion: `WorkspaceStatusBadge`
aslilacNov 1, 2023
cca3565
🧹
aslilacNov 1, 2023
7840dcb
Merge branch 'main' into emotional-damage-9
aslilacNov 2, 2023
9af85c8
fix storybook!
aslilacNov 2, 2023
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
61 changes: 31 additions & 30 deletionssite/src/components/IconField/IconField.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import { css, Global, useTheme } from "@emotion/react";
import Button from "@mui/material/Button";
import InputAdornment from "@mui/material/InputAdornment";
import TextField, { TextFieldProps } from "@mui/material/TextField";
import { makeStyles } from "@mui/styles";
import TextField, { type TextFieldProps } from "@mui/material/TextField";
import Picker from "@emoji-mart/react";
import { FC } from "react";
import {typeFC } from "react";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { Stack } from "components/Stack/Stack";
import { colors } from "theme/colors";
Expand DownExpand Up@@ -48,7 +48,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
throw new Error(`Invalid icon value "${typeof textFieldProps.value}"`);
}

conststyles =useStyles();
consttheme =useTheme();
const hasIcon = textFieldProps.value && textFieldProps.value !== "";

return (
Expand All@@ -59,7 +59,21 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
label="Icon"
InputProps={{
endAdornment: hasIcon ? (
<InputAdornment position="end" className={styles.adornment}>
<InputAdornment
position="end"
css={{
width: theme.spacing(3),
height: theme.spacing(3),
display: "flex",
alignItems: "center",
justifyContent: "center",

"& img": {
maxWidth: "100%",
objectFit: "contain",
},
}}
>
<img
alt=""
src={textFieldProps.value}
Expand All@@ -85,6 +99,18 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
id="emoji"
css={{ marginTop: 0, ".MuiPaper-root": { width: "auto" } }}
>
<Global
styles={css`
em-emoji-picker {
--rgb-background: ${theme.palette.background.paper};
--rgb-input: ${colors.gray[17]};
--rgb-color: ${colors.gray[4]};

// Hack to prevent the right side from being cut off
width: 350px;
}
`}
/>
<Picker
set="twitter"
theme="dark"
Expand All@@ -104,29 +130,4 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
);
};

const useStyles = makeStyles((theme) => ({
"@global": {
"em-emoji-picker": {
"--rgb-background": theme.palette.background.paper,
"--rgb-input": colors.gray[17],
"--rgb-color": colors.gray[4],

// Hack to prevent the right side from being cut off
width: 350,
},
},
adornment: {
width: theme.spacing(3),
height: theme.spacing(3),
display: "flex",
alignItems: "center",
justifyContent: "center",

"& img": {
maxWidth: "100%",
objectFit: "contain",
},
},
}));

export default IconField;
2 changes: 1 addition & 1 deletionsite/src/components/TableToolbar/TableToolbar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@ import Skeleton from "@mui/material/Skeleton";
export const TableToolbar = styled(Box)(({ theme }) => ({
fontSize: 13,
marginBottom: theme.spacing(1),
marginTop:theme.spacing(0),
marginTop:0,
height: 36, // The size of a small button
color: theme.palette.text.secondary,
"& strong": { color: theme.palette.text.primary },
Expand Down
39 changes: 21 additions & 18 deletionssite/src/components/UserAutocomplete/UserAutocomplete.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
import { css } from "@emotion/css";
import { useTheme } from "@emotion/react";
import CircularProgress from "@mui/material/CircularProgress";
import { makeStyles } from "@mui/styles";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import { User } from "api/typesGenerated";
importtype{ User } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/AvatarData/AvatarData";
import { ChangeEvent, ComponentProps, FC, useState } from "react";
import {
type ChangeEvent,
type ComponentProps,
type FC,
useState,
} from "react";
import Box from "@mui/material/Box";
import { useDebouncedFunction } from "hooks/debounce";
import { useQuery } from "react-query";
Expand All@@ -27,7 +33,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
className,
size = "small",
}) => {
conststyles =useStyles();
consttheme =useTheme();
const [autoComplete, setAutoComplete] = useState<{
value: string;
open: boolean;
Expand DownExpand Up@@ -101,7 +107,11 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
size={size}
label={label}
placeholder="User email or username"
className={styles.textField}
css={{
"&:not(:has(label))": {
margin: 0,
},
}}
InputProps={{
...params.InputProps,
onChange: debouncedInputOnChange,
Expand All@@ -119,7 +129,12 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
</>
),
classes: {
root: styles.inputRoot,
root: css`
padding-left: ${theme.spacing(
1.75,
)} !important; // Same padding left as input
gap: ${theme.spacing(0.5)};
`,
},
}}
InputLabelProps={{
Expand All@@ -130,15 +145,3 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
/>
);
};

export const useStyles = makeStyles((theme) => ({
textField: {
"&:not(:has(label))": {
margin: 0,
},
},
inputRoot: {
paddingLeft: `${theme.spacing(1.75)} !important`, // Same padding left as input
gap: theme.spacing(0.5),
},
}));
29 changes: 11 additions & 18 deletionssite/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
import { makeStyles } from "@mui/styles";
import dayjs from "dayjs";
import { ComponentProps, FC, Fragment } from "react";
import { ProvisionerJobLog } from "api/typesGenerated";
import {typeComponentProps, type FC, Fragment } from "react";
importtype{ ProvisionerJobLog } from "api/typesGenerated";
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
import { Logs } from "./Logs";
import Box from "@mui/material/Box";
import {combineClasses} from "utils/combineClasses";
import {type Interpolation, type Theme} from "@emotion/react";

const Language = {
seconds: "seconds",
Expand DownExpand Up@@ -53,7 +52,6 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
}) => {
const groupedLogsByStage = groupLogsByStage(logs);
const stages = Object.keys(groupedLogsByStage);
const styles = useStyles();

return (
<Box
Expand All@@ -79,15 +77,10 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({

return (
<Fragment key={stage}>
<div
className={combineClasses([
styles.header,
sticky ? styles.sticky : "",
])}
>
<div css={[styles.header, sticky && styles.sticky]}>
<div>{stage}</div>
{shouldDisplayDuration && (
<divclassName={styles.duration}>
<divcss={styles.duration}>
{duration} {Language.seconds}
</div>
)}
Expand All@@ -100,8 +93,8 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
);
};

constuseStyles =makeStyles((theme) => ({
header: {
conststyles = {
header:(theme) => ({
fontSize: 13,
fontWeight: 600,
padding: theme.spacing(0.5, 3),
Expand All@@ -119,16 +112,16 @@ const useStyles = makeStyles((theme) => ({
"&:first-child": {
borderRadius: "8px 8px 0 0",
},
},
}),

sticky: {
position: "sticky",
top: 0,
},

duration: {
duration:(theme) => ({
marginLeft: "auto",
color: theme.palette.text.secondary,
fontSize: 12,
},
}));
}),
} satisfies Record<string, Interpolation<Theme>>;
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
import { Workspace } from "api/typesGenerated";
importtype{ Workspace } from "api/typesGenerated";
import { Pill } from "components/Pill/Pill";
import { FC, PropsWithChildren } from "react";
import { makeStyles } from "@mui/styles";
import { combineClasses } from "utils/combineClasses";
import { type FC, type PropsWithChildren } from "react";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { DormantDeletionText } from "components/WorkspaceDeletion";
import { getDisplayWorkspaceStatus } from "utils/workspace";
import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
import Tooltip, {
type TooltipProps,
tooltipClasses,
} from "@mui/material/Tooltip";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import ErrorOutline from "@mui/icons-material/ErrorOutline";
import { type Interpolation, type Theme } from "@emotion/react";

export type WorkspaceStatusBadgeProps = {
workspace: Workspace;
Expand DownExpand Up@@ -56,7 +58,6 @@ export const WorkspaceStatusBadge: FC<
export const WorkspaceStatusText: FC<
PropsWithChildren<WorkspaceStatusBadgeProps>
> = ({ workspace, className }) => {
const styles = useStyles();
const { text, type } = getDisplayWorkspaceStatus(
workspace.latest_build.status,
);
Expand All@@ -71,11 +72,8 @@ export const WorkspaceStatusText: FC<
<span
role="status"
data-testid="build-status"
className={combineClasses([
className,
styles.root,
styles[`type-${type}`],
])}
className={className}
css={[styles.root, styles[`type-${type}`]]}
>
{text}
</span>
Expand All@@ -95,27 +93,22 @@ const FailureTooltip = styled(({ className, ...props }: TooltipProps) => (
},
}));

constuseStyles =makeStyles((theme) => ({
conststyles = {
root: { fontWeight: 600 },
"type-error": {

"type-error": (theme) => ({
color: theme.palette.error.light,
},
"type-warning": {
}),
"type-warning":(theme) => ({
color: theme.palette.warning.light,
},
"type-success": {
}),
"type-success":(theme) => ({
color: theme.palette.success.light,
},
"type-info": {
}),
"type-info":(theme) => ({
color: theme.palette.info.light,
},
"type-undefined": {
}),
"type-undefined":(theme) => ({
color: theme.palette.text.secondary,
},
"type-primary": {
color: theme.palette.text.primary,
},
"type-secondary": {
color: theme.palette.text.secondary,
},
}));
}),
} satisfies Record<string, Interpolation<Theme>>;
36 changes: 16 additions & 20 deletionssite/src/hooks/useClickableTableRow.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
import { useTheme, type CSSObject } from "@emotion/react";
import { type MouseEventHandler } from "react";
import { type TableRowProps } from "@mui/material/TableRow";
import { makeStyles } from "@mui/styles";
import { useClickable, type UseClickableResult } from "./useClickable";

type UseClickableTableRowResult = UseClickableResult<HTMLTableRowElement> &
TableRowProps & {
className: string;
css: CSSObject;
hover: true;
onAuxClick: MouseEventHandler<HTMLTableRowElement>;
};
Expand All@@ -28,12 +28,24 @@ export const useClickableTableRow = ({
onDoubleClick,
onMiddleClick,
}: UseClickableTableRowConfig): UseClickableTableRowResult => {
const styles = useStyles();
const clickableProps = useClickable(onClick);
const theme = useTheme();

return {
...clickableProps,
className: styles.row,
css: {
cursor: "pointer",

"&:focus": {
outline: `1px solid ${theme.palette.secondary.dark}`,
outlineOffset: -1,
},

"&:last-of-type": {
borderBottomLeftRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
},
},
hover: true,
onDoubleClick,
onAuxClick: (event) => {
Expand All@@ -46,19 +58,3 @@ export const useClickableTableRow = ({
},
};
};

const useStyles = makeStyles((theme) => ({
row: {
cursor: "pointer",

"&:focus": {
outline: `1px solid ${theme.palette.secondary.dark}`,
outlineOffset: -1,
},

"&:last-of-type": {
borderBottomLeftRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
},
},
}));
Loading
[8]ページ先頭
©2009-2025 Movatter.jp