Skip to content

Commit df84050

Browse files
geodem127geodem127
committed
Fixed variant container's overflowing text
1 parent 706e272 commit df84050

File tree

3 files changed

+259
-5
lines changed

3 files changed

+259
-5
lines changed

‎src/apps/content-editor/src/app/views/ItemEdit/Content/Content copy.js

+238
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
import { Editor } from "../../../components/Editor";
2+
import { PreviewMode } from "../../../components/Editor/PreviewMode";
3+
import {
4+
Box,
5+
Stack,
6+
IconButton,
7+
Tooltip,
8+
useMediaQuery,
9+
Grid,
10+
} from "@mui/material";
11+
import { StartRounded, DesktopMacRounded } from "@mui/icons-material";
12+
import { Actions } from "./Actions";
13+
import { useLocalStorage } from "react-use";
14+
import { useContext } from "react";
15+
import { DuoModeContext } from "../../../../../../../shell/contexts/duoModeContext";
16+
import { FieldError } from "../../../components/Editor/FieldError";
17+
import { BlockTabs } from "../components/BlockTabs";
18+
19+
export default function Content(props) {
20+
const [showSidebar, setShowSidebar] = useLocalStorage(
21+
"zesty:content:sidebarOpen",
22+
false
23+
);
24+
25+
const {
26+
value: showDuoModeContextValue,
27+
setValue: setShowDuoMode,
28+
isDisabled,
29+
} = useContext(DuoModeContext);
30+
31+
const xLarge = useMediaQuery((theme) => theme.breakpoints.up("xl"));
32+
33+
const isFocusMode = !showDuoMode && !showSidebar;
34+
35+
const showDuoMode = props?.model?.type === "block" || showDuoModeContextValue;
36+
37+
return (
38+
<>
39+
<Box
40+
bgcolor="grey.50"
41+
height="100%"
42+
overflow="hidden"
43+
pt={2.5}
44+
px={4}
45+
boxSizing="border-box"
46+
position="relative"
47+
sx={{
48+
"*": {
49+
scrollbarWidth: "none",
50+
"-ms-overflow-style": "none",
51+
"&::-webkit-scrollbar": {
52+
display: "none",
53+
},
54+
},
55+
}}
56+
>
57+
<Grid
58+
container
59+
spacing={0}
60+
columnGap={3}
61+
columns={2}
62+
flexWrap="nowrap"
63+
sx={{
64+
height: "100%",
65+
width: "100%",
66+
boxSizing: "border-box",
67+
}}
68+
>
69+
<Grid
70+
item
71+
xs={
72+
!showDuoMode && !showSidebar
73+
? 2
74+
: showSidebar && !showDuoMode
75+
? 1.85
76+
: "auto"
77+
}
78+
sx={{
79+
position: "relative",
80+
height: "100%",
81+
width: "100%",
82+
}}
83+
>
84+
<Box
85+
boxSizing="border-box"
86+
height="100%"
87+
flexGrow={0}
88+
sx={{
89+
display: "flex",
90+
justifyContent:
91+
(!showDuoMode && !showSidebar) || xLarge
92+
? "center"
93+
: "flex-start",
94+
overflowY: "scroll",
95+
width: "100%",
96+
maxWidth: showDuoMode ? 640 : "100%",
97+
minWidth: isFocusMode ? 640 : "auto",
98+
}}
99+
>
100+
<Box width={isFocusMode && !showDuoMode ? "60%" : "100%"}>
101+
{props.saveClicked && props.hasErrors && (
102+
<Box mb={3}>
103+
<FieldError
104+
ref={props.fieldErrorRef}
105+
errors={props.fieldErrors}
106+
fields={props.activeFields}
107+
/>
108+
</Box>
109+
)}
110+
<Editor
111+
// active={this.state.makeActive}
112+
// scrolled={() => this.setState({ makeActive: "" })}
113+
model={props.model}
114+
itemZUID={props.itemZUID}
115+
item={props.item}
116+
dispatch={props.dispatch}
117+
isDirty={props.item.dirty}
118+
onSave={props.onSave}
119+
modelZUID={props.modelZUID}
120+
saveClicked={props.saveClicked}
121+
fieldErrors={props.fieldErrors}
122+
onUpdateFieldErrors={props.onUpdateFieldErrors}
123+
hasErrors={props.hasErrors}
124+
/>
125+
</Box>
126+
</Box>
127+
</Grid>
128+
<Grid
129+
item
130+
xs
131+
sx={{
132+
position: "relative",
133+
height: "100%",
134+
}}
135+
>
136+
{!showDuoMode ? (
137+
<Box display="flex" gap={1}>
138+
<Stack
139+
gap={1.5}
140+
sx={{
141+
...(!showSidebar && {
142+
position: "absolute",
143+
right: 0,
144+
}),
145+
}}
146+
>
147+
<Tooltip
148+
title={showSidebar ? "Close Info Bar" : "Open Info Bar"}
149+
placement="left"
150+
>
151+
<IconButton
152+
size="small"
153+
onClick={() => setShowSidebar(!showSidebar)}
154+
data-cy="ContentSidebarToggle"
155+
>
156+
<StartRounded
157+
fontSize="small"
158+
sx={{
159+
transform: showSidebar
160+
? "rotate(0deg)"
161+
: "rotate(180deg)",
162+
}}
163+
/>
164+
</IconButton>
165+
</Tooltip>
166+
{!isDisabled && (
167+
<Tooltip title="Open DUO Mode" placement="left" dark>
168+
<IconButton
169+
size="small"
170+
onClick={() => {
171+
setShowDuoMode(true);
172+
}}
173+
>
174+
<DesktopMacRounded fontSize="small" />
175+
</IconButton>
176+
</Tooltip>
177+
)}
178+
</Stack>
179+
180+
{showSidebar && (
181+
<Box
182+
maxWidth={320}
183+
pl={4}
184+
sx={{
185+
borderLeft: (theme) =>
186+
`1px solid ${theme.palette.grey[200]}`,
187+
overflowY: "auto",
188+
boxSizing: "border-box",
189+
}}
190+
data-cy="ContentSidebar"
191+
>
192+
<Actions
193+
{...props}
194+
site={{}}
195+
set={{
196+
type: props.model?.type,
197+
}}
198+
/>
199+
</Box>
200+
)}
201+
</Box>
202+
) : (
203+
<Box
204+
height="100%"
205+
flex="1 1 auto"
206+
minWidth={360}
207+
display="flex"
208+
flexDirection="column"
209+
gap={2}
210+
>
211+
<Box flex={1}>
212+
<PreviewMode
213+
dirty={props.item.dirty}
214+
version={props.item.meta.version}
215+
onClose={() => setShowDuoMode(false)}
216+
onSave={() => props.onSave()}
217+
hasErrors={props.hasErrors}
218+
model={props.model}
219+
/>
220+
</Box>
221+
{props?.model?.type === "block" && (
222+
<Box
223+
flex="1"
224+
sx={{
225+
overflowY: "auto",
226+
}}
227+
>
228+
<BlockTabs {...props} />
229+
</Box>
230+
)}
231+
</Box>
232+
)}
233+
</Grid>
234+
</Grid>
235+
</Box>
236+
</>
237+
);
238+
}

‎src/apps/content-editor/src/app/views/ItemEdit/Content/Content.js

+1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export default function Content(props) {
5757
overflowY: "scroll",
5858
maxWidth: showDuoMode ? 640 : "unset",
5959
width: showDuoMode ? "100%" : "unset",
60+
minWidth: showDuoMode || showSidebar ? 550 : "unset",
6061
}}
6162
pr={3}
6263
pl={4}

‎src/apps/content-editor/src/app/views/ItemEdit/components/BlockTabs.tsx

+20-5
Original file line numberDiff line numberDiff line change
@@ -239,10 +239,13 @@ const BlockVariantCard = ({ block }: { block: ContentItem }) => {
239239
}
240240
disableGutters
241241
sx={{
242-
display: "flex",
242+
display: "grid",
243+
position: "relative",
244+
overflow: "hidden",
245+
gridTemplateColumns: "187px 1fr",
243246
px: 2,
244247
py: 1.75,
245-
gap: 1.5,
248+
gap: "0px 12px",
246249
"&.Mui-selected": {
247250
"&:first-of-type": {
248251
borderBottomColor: "primary.main",
@@ -285,11 +288,23 @@ const BlockVariantCard = ({ block }: { block: ContentItem }) => {
285288

286289
<Box
287290
sx={{
288-
minWidth: 0,
289-
maxWidth: 458,
291+
display: "flex",
292+
flexDirection: "column",
293+
justifyContent: "center",
294+
alignItems: "flex-start",
295+
overflow: "hidden",
290296
}}
291297
>
292-
<Typography noWrap variant="body1" fontWeight={700}>
298+
<Typography
299+
noWrap
300+
variant="body1"
301+
fontWeight={700}
302+
sx={{
303+
width: "100%",
304+
overflow: "hidden",
305+
textOverflow: "ellipsis",
306+
}}
307+
>
293308
{block?.web?.metaTitle}
294309
</Typography>
295310
<Typography

0 commit comments

Comments
 (0)