Skip to content

Commit b9b26c9

Browse files
fgatti675fgatti675
committed
appbar and select styling
1 parent 287991e commit b9b26c9

File tree

2 files changed

+89
-83
lines changed

2 files changed

+89
-83
lines changed

‎packages/firecms_core/src/core/DefaultAppBar.tsx

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export const DefaultAppBar = function DefaultAppBar({
9595
return (
9696
<div
9797
style={style}
98-
className={cls("w-full h-14 sm:h-16 transition-all ease-in duration-75 absolute top-0 max-w-full overflow-x-auto no-scrollbar",
98+
className={cls("w-full h-16 transition-all ease-in duration-75 absolute top-0 max-w-full overflow-x-auto no-scrollbar",
9999
"flex flex-row gap-2 px-4 items-center",
100100
{
101101
"pl-[19rem]": drawerOpen && largeLayout,
@@ -106,70 +106,70 @@ export const DefaultAppBar = function DefaultAppBar({
106106
className)}>
107107

108108

109-
{navigation && <div className="mr-8 hidden lg:block">
110-
<ReactLink
111-
className="visited:text-inherit visited:dark:text-inherit"
112-
to={navigation?.basePath ?? "/"}
113-
>
114-
<div className={"flex flex-row gap-4"}>
115-
{!hasDrawer && (logo
116-
? <img src={logo}
117-
alt="Logo"
118-
className={cls("w-[32px] h-[32px] object-contain")}/>
119-
: <FireCMSLogo width={"32px"} height={"32px"}/>)}
120-
121-
{typeof title === "string"
122-
? <Typography variant="subtitle1"
123-
noWrap
124-
className={cls("transition-all", drawerOpen ? "ml-2" : "")}>
125-
{title}
126-
</Typography>
127-
: title}
128-
</div>
129-
</ReactLink>
109+
{navigation && <div className="mr-8 hidden lg:block">
110+
<ReactLink
111+
className="visited:text-inherit visited:dark:text-inherit"
112+
to={navigation?.basePath ?? "/"}
113+
>
114+
<div className={"flex flex-row gap-4"}>
115+
{!hasDrawer && (logo
116+
? <img src={logo}
117+
alt="Logo"
118+
className={cls("w-[32px] h-[32px] object-contain")}/>
119+
: <FireCMSLogo width={"32px"} height={"32px"}/>)}
120+
121+
{typeof title === "string"
122+
? <Typography variant="subtitle1"
123+
noWrap
124+
className={cls("transition-all", drawerOpen ? "ml-2" : "")}>
125+
{title}
126+
</Typography>
127+
: title}
128+
</div>
129+
</ReactLink>
130+
</div>}
131+
132+
{startAdornment}
133+
134+
<div className={"flex-grow"}/>
135+
136+
{endAdornment &&
137+
<ErrorBoundary>
138+
{endAdornment}
139+
</ErrorBoundary>}
140+
141+
{includeModeToggle && <IconButton
142+
color="inherit"
143+
aria-label="Open drawer"
144+
onClick={toggleMode}
145+
size="large">
146+
{mode === "dark"
147+
? <DarkModeIcon/>
148+
: <LightModeIcon/>}
149+
</IconButton>}
150+
151+
<Menu trigger={avatarComponent}>
152+
{user && <div className={"px-4 py-2 mb-2"}>
153+
{user.displayName && <Typography variant={"body1"} color={"secondary"}>
154+
{user.displayName}
155+
</Typography>}
156+
{user.email && <Typography variant={"body2"} color={"secondary"}>
157+
{user.email}
158+
</Typography>}
130159
</div>}
131160

132-
{startAdornment}
133-
134-
<div className={"flex-grow"}/>
135-
136-
{endAdornment &&
137-
<ErrorBoundary>
138-
{endAdornment}
139-
</ErrorBoundary>}
140-
141-
{includeModeToggle && <IconButton
142-
color="inherit"
143-
aria-label="Open drawer"
144-
onClick={toggleMode}
145-
size="large">
146-
{mode === "dark"
147-
? <DarkModeIcon/>
148-
: <LightModeIcon/>}
149-
</IconButton>}
150-
151-
<Menu trigger={avatarComponent}>
152-
{user && <div className={"px-4 py-2 mb-2"}>
153-
{user.displayName && <Typography variant={"body1"} color={"secondary"}>
154-
{user.displayName}
155-
</Typography>}
156-
{user.email && <Typography variant={"body2"} color={"secondary"}>
157-
{user.email}
158-
</Typography>}
159-
</div>}
160-
161-
{dropDownActions}
162-
163-
{!dropDownActions && <MenuItem onClick={async () => {
164-
await authController.signOut();
165-
// replace current route with home
166-
navigate("/");
167-
}}>
168-
<LogoutIcon/>
169-
Log Out
170-
</MenuItem>}
171-
172-
</Menu>
161+
{dropDownActions}
162+
163+
{!dropDownActions && <MenuItem onClick={async () => {
164+
await authController.signOut();
165+
// replace current route with home
166+
navigate("/");
167+
}}>
168+
<LogoutIcon/>
169+
Log Out
170+
</MenuItem>}
171+
172+
</Menu>
173173

174174
</div>
175175
);

‎packages/ui/src/components/Select.tsx

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
8080
}
8181
}, [onChange, value, onValueChange]);
8282

83-
const hasValue = Array.isArray(value) ? value.length > 0 : value != null;
83+
const hasValue = Array.isArray(value) ? value.length > 0 : (value != null && value !== "" && value !== undefined);
8484

8585
return (
8686
<SelectPrimitive.Root
@@ -119,43 +119,49 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
119119
inputClassName
120120
)}>
121121

122+
<div
123+
ref={ref}
124+
className={cls(
125+
"flex-grow w-full max-w-full flex flex-row gap-2 items-center",
126+
"overflow-visible",
127+
size === "small" ? "h-[42px]" : "h-[64px]"
128+
)}
129+
>
122130
<SelectPrimitive.Value
123131
onClick={(e) => {
124132
e.preventDefault();
125133
e.stopPropagation();
126134
}}
127-
ref={ref}
128-
className={cls(
129-
"flex-grow w-full max-w-full flex flex-row gap-2 items-center",
130-
"overflow-visible",
131-
size === "small" ? "h-[42px]" : "h-[64px]"
132-
)}
133-
placeholder={placeholder}>
135+
placeholder={placeholder}
136+
className={"w-full"}>
134137
{hasValue && value && renderValue ? renderValue(value) : placeholder}
135138
{hasValue && !renderValue && value}
136139
</SelectPrimitive.Value>
140+
</div>
137141

142+
{endAdornment && (
143+
<div
144+
className={cls("h-full flex items-center")}
145+
onClick={(e) => {
146+
e.preventDefault();
147+
e.stopPropagation();
148+
}}>
149+
{endAdornment}
150+
</div>
151+
)}
138152
<SelectPrimitive.Icon asChild>
139-
<ExpandMoreIcon size={"small"} className={cls("absolute right-2 px-2 top-5 transition", open ? "rotate-180" : "")}/>
153+
<ExpandMoreIcon size={"small"}
154+
className={cls("px-2 transition", open ? "rotate-180" : "")}/>
140155
</SelectPrimitive.Icon>
141156
</SelectPrimitive.Trigger>
142-
{endAdornment && (
143-
<div
144-
className={cls("absolute h-full flex items-center", size === "small" ? "right-10" : "right-14")}
145-
onClick={(e) => {
146-
e.preventDefault();
147-
e.stopPropagation();
148-
}}>
149-
{endAdornment}
150-
</div>
151-
)}
157+
152158
</div>
153159
<SelectPrimitive.Portal>
154160
<SelectPrimitive.Content position={position}
155161
className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-gray-900 p-2 rounded-lg", defaultBorderMixin)}>
156162
<SelectPrimitive.Viewport className={"p-1"}
157163
style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
158-
{children}
164+
{children}
159165
</SelectPrimitive.Viewport>
160166
</SelectPrimitive.Content>
161167
</SelectPrimitive.Portal>

0 commit comments

Comments
 (0)