Skip to content

Commit 2f9552b

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #2087 from iamfaran/feat/2085-navstyles
[Feat]: extend nav item styles + fix publish mode space
2 parents 451d9f8 + c3b5329 commit 2f9552b

File tree

4 files changed

+255
-117
lines changed

4 files changed

+255
-117
lines changed

‎client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,11 @@ const DrawerList = styled.div<{
183183
gap: 8px;
184184
background-color: ${(p) => p.$itemStyle.background};
185185
color: ${(p) => p.$itemStyle.text};
186+
font-size: ${(p) => p.$itemStyle.textSize};
187+
font-family: ${(p) => p.$itemStyle.fontFamily};
188+
font-style: ${(p) => p.$itemStyle.fontStyle};
189+
font-weight: ${(p) => p.$itemStyle.textWeight};
190+
text-decoration: ${(p) => p.$itemStyle.textDecoration};
186191
border-radius: ${(p) => p.$itemStyle.radius};
187192
border: 1px solid ${(p) => p.$itemStyle.border};
188193
margin: ${(p) => p.$itemStyle.margin};
@@ -194,11 +199,21 @@ const DrawerList = styled.div<{
194199
background-color: ${(p) => p.$hoverStyle.background};
195200
color: ${(p) => p.$hoverStyle.text};
196201
border: 1px solid ${(p) => p.$hoverStyle.border};
202+
font-size: ${(p) => p.$hoverStyle.textSize || p.$itemStyle.textSize};
203+
font-family: ${(p) => p.$hoverStyle.fontFamily || p.$itemStyle.fontFamily};
204+
font-style: ${(p) => p.$hoverStyle.fontStyle || p.$itemStyle.fontStyle};
205+
font-weight: ${(p) => p.$hoverStyle.textWeight || p.$itemStyle.textWeight};
206+
text-decoration: ${(p) => p.$hoverStyle.textDecoration || p.$itemStyle.textDecoration};
197207
}
198208
.drawer-item.active {
199209
background-color: ${(p) => p.$activeStyle.background};
200210
color: ${(p) => p.$activeStyle.text};
201211
border: 1px solid ${(p) => p.$activeStyle.border};
212+
font-size: ${(p) => p.$activeStyle.textSize || p.$itemStyle.textSize};
213+
font-family: ${(p) => p.$activeStyle.fontFamily || p.$itemStyle.fontFamily};
214+
font-style: ${(p) => p.$activeStyle.fontStyle || p.$itemStyle.fontStyle};
215+
font-weight: ${(p) => p.$activeStyle.textWeight || p.$itemStyle.textWeight};
216+
text-decoration: ${(p) => p.$activeStyle.textDecoration || p.$itemStyle.textDecoration};
202217
}
203218
`;
204219

@@ -260,16 +275,37 @@ const StyledTabBar = styled(TabBar)<{
260275
.adm-tab-bar-item {
261276
background-color: ${(props) => props.$tabItemStyle?.background};
262277
color: ${(props) => props.$tabItemStyle?.text};
278+
font-size: ${(props) => props.$tabItemStyle?.textSize};
279+
font-family: ${(props) => props.$tabItemStyle?.fontFamily};
280+
font-style: ${(props) => props.$tabItemStyle?.fontStyle};
281+
font-weight: ${(props) => props.$tabItemStyle?.textWeight};
282+
text-decoration: ${(props) => props.$tabItemStyle?.textDecoration};
263283
border-radius: ${(props) => props.$tabItemStyle?.radius} !important;
264284
border: ${(props) => `1px solid ${props.$tabItemStyle?.border}`};
265285
margin: ${(props) => props.$tabItemStyle?.margin};
266286
padding: ${(props) => props.$tabItemStyle?.padding};
287+
288+
.adm-tab-bar-item-title {
289+
font-size: ${(props) => props.$tabItemStyle?.textSize};
290+
font-family: ${(props) => props.$tabItemStyle?.fontFamily};
291+
font-style: ${(props) => props.$tabItemStyle?.fontStyle};
292+
font-weight: ${(props) => props.$tabItemStyle?.textWeight};
293+
text-decoration: ${(props) => props.$tabItemStyle?.textDecoration};
294+
}
267295
}
268296
269297
.adm-tab-bar-item:hover {
270298
background-color: ${(props) => props.$tabItemHoverStyle?.background} !important;
271299
color: ${(props) => props.$tabItemHoverStyle?.text} !important;
272300
border: ${(props) => `1px solid ${props.$tabItemHoverStyle?.border}`};
301+
302+
.adm-tab-bar-item-title {
303+
font-size: ${(props) => props.$tabItemHoverStyle?.textSize || props.$tabItemStyle?.textSize};
304+
font-family: ${(props) => props.$tabItemHoverStyle?.fontFamily || props.$tabItemStyle?.fontFamily};
305+
font-style: ${(props) => props.$tabItemHoverStyle?.fontStyle || props.$tabItemStyle?.fontStyle};
306+
font-weight: ${(props) => props.$tabItemHoverStyle?.textWeight || props.$tabItemStyle?.textWeight};
307+
text-decoration: ${(props) => props.$tabItemHoverStyle?.textDecoration || props.$tabItemStyle?.textDecoration};
308+
}
273309
}
274310
275311
.adm-tab-bar-item.adm-tab-bar-item-active {
@@ -278,6 +314,13 @@ const StyledTabBar = styled(TabBar)<{
278314
.adm-tab-bar-item-icon, .adm-tab-bar-item-title {
279315
color: ${(props) => props.$tabItemActiveStyle.text};
280316
}
317+
.adm-tab-bar-item-title {
318+
font-size: ${(props) => props.$tabItemActiveStyle?.textSize || props.$tabItemStyle?.textSize};
319+
font-family: ${(props) => props.$tabItemActiveStyle?.fontFamily || props.$tabItemStyle?.fontFamily};
320+
font-style: ${(props) => props.$tabItemActiveStyle?.fontStyle || props.$tabItemStyle?.fontStyle};
321+
font-weight: ${(props) => props.$tabItemActiveStyle?.textWeight || props.$tabItemStyle?.textWeight};
322+
text-decoration: ${(props) => props.$tabItemActiveStyle?.textDecoration || props.$tabItemStyle?.textDecoration};
323+
}
281324
}
282325
`;
283326

‎client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx‎

Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ const DEFAULT_WIDTH = 240;
4949
type MenuItemStyleOptionValue = "normal" | "hover" | "active";
5050
const EventOptions = [clickEvent] as const;
5151

52-
const StyledSide = styled(LayoutSider)`
53-
max-height: calc(100vh - ${TopHeaderHeight});
52+
const StyledSide = styled(LayoutSider)<{ $isPreview: boolean }>`
53+
max-height: ${(props) => (props.$isPreview ? `calc(100vh - ${TopHeaderHeight})` : "100vh")};
5454
overflow: auto;
5555
5656
.ant-menu-item:first-child {
@@ -87,18 +87,42 @@ const StyledMenu = styled(AntdMenu)<{
8787
border: ${(props) => `1px solid ${props.$navItemStyle?.border}`};
8888
margin: ${(props) => props.$navItemStyle?.margin};
8989
padding: ${(props) => props.$navItemStyle?.padding};
90+
}
9091
92+
.ant-menu-title-content {
93+
font-size: ${(props) => props.$navItemStyle?.textSize};
94+
font-family: ${(props) => props.$navItemStyle?.fontFamily};
95+
font-style: ${(props) => props.$navItemStyle?.fontStyle};
96+
font-weight: ${(props) => props.$navItemStyle?.textWeight};
97+
text-decoration: ${(props) => props.$navItemStyle?.textDecoration};
9198
}
99+
92100
.ant-menu-item-active {
93101
background-color: ${(props) => props.$navItemHoverStyle?.background} !important;
94102
color: ${(props) => props.$navItemHoverStyle?.text} !important;
95103
border: ${(props) => `1px solid ${props.$navItemHoverStyle?.border}`};
104+
105+
.ant-menu-title-content {
106+
font-size: ${(props) => props.$navItemHoverStyle?.textSize || props.$navItemStyle?.textSize};
107+
font-family: ${(props) => props.$navItemHoverStyle?.fontFamily || props.$navItemStyle?.fontFamily};
108+
font-style: ${(props) => props.$navItemHoverStyle?.fontStyle || props.$navItemStyle?.fontStyle};
109+
font-weight: ${(props) => props.$navItemHoverStyle?.textWeight || props.$navItemStyle?.textWeight};
110+
text-decoration: ${(props) => props.$navItemHoverStyle?.textDecoration || props.$navItemStyle?.textDecoration};
111+
}
96112
}
97113
98114
.ant-menu-item-selected {
99115
background-color: ${(props) => props.$navItemActiveStyle?.background} !important;
100116
color: ${(props) => props.$navItemActiveStyle?.text} !important;
101117
border: ${(props) => `1px solid ${props.$navItemActiveStyle?.border}`};
118+
119+
.ant-menu-title-content {
120+
font-size: ${(props) => props.$navItemActiveStyle?.textSize || props.$navItemStyle?.textSize};
121+
font-family: ${(props) => props.$navItemActiveStyle?.fontFamily || props.$navItemStyle?.fontFamily};
122+
font-style: ${(props) => props.$navItemActiveStyle?.fontStyle || props.$navItemStyle?.fontStyle};
123+
font-weight: ${(props) => props.$navItemActiveStyle?.textWeight || props.$navItemStyle?.textWeight};
124+
text-decoration: ${(props) => props.$navItemActiveStyle?.textDecoration || props.$navItemStyle?.textDecoration};
125+
}
102126
}
103127
104128
.ant-menu-submenu {
@@ -112,11 +136,15 @@ const StyledMenu = styled(AntdMenu)<{
112136
max-height: 100%;
113137
background-color: ${(props) => props.$navItemStyle?.background};
114138
color: ${(props) => props.$navItemStyle?.text};
139+
font-size: ${(props) => props.$navItemStyle?.textSize};
140+
font-family: ${(props) => props.$navItemStyle?.fontFamily};
141+
font-style: ${(props) => props.$navItemStyle?.fontStyle};
142+
font-weight: ${(props) => props.$navItemStyle?.textWeight};
143+
text-decoration: ${(props) => props.$navItemStyle?.textDecoration};
115144
border-radius: ${(props) => props.$navItemStyle?.radius} !important;
116145
border: ${(props) => `1px solid ${props.$navItemStyle?.border}`};
117146
margin: 0;
118147
padding: ${(props) => props.$navItemStyle?.padding};
119-
120148
}
121149
122150
.ant-menu-item {
@@ -129,6 +157,11 @@ const StyledMenu = styled(AntdMenu)<{
129157
background-color: ${(props) => props.$navItemHoverStyle?.background} !important;
130158
color: ${(props) => props.$navItemHoverStyle?.text} !important;
131159
border: ${(props) => `1px solid ${props.$navItemHoverStyle?.border}`};
160+
font-size: ${(props) => props.$navItemHoverStyle?.textSize || props.$navItemStyle?.textSize};
161+
font-family: ${(props) => props.$navItemHoverStyle?.fontFamily || props.$navItemStyle?.fontFamily};
162+
font-style: ${(props) => props.$navItemHoverStyle?.fontStyle || props.$navItemStyle?.fontStyle};
163+
font-weight: ${(props) => props.$navItemHoverStyle?.textWeight || props.$navItemStyle?.textWeight};
164+
text-decoration: ${(props) => props.$navItemHoverStyle?.textDecoration || props.$navItemStyle?.textDecoration};
132165
}
133166
}
134167
&.ant-menu-submenu-selected {
@@ -137,6 +170,11 @@ const StyledMenu = styled(AntdMenu)<{
137170
background-color: ${(props) => props.$navItemActiveStyle?.background} !important;
138171
color: ${(props) => props.$navItemActiveStyle?.text} !important;
139172
border: ${(props) => `1px solid ${props.$navItemActiveStyle?.border}`};
173+
font-size: ${(props) => props.$navItemActiveStyle?.textSize || props.$navItemStyle?.textSize};
174+
font-family: ${(props) => props.$navItemActiveStyle?.fontFamily || props.$navItemStyle?.fontFamily};
175+
font-style: ${(props) => props.$navItemActiveStyle?.fontStyle || props.$navItemStyle?.fontStyle};
176+
font-weight: ${(props) => props.$navItemActiveStyle?.textWeight || props.$navItemStyle?.textWeight};
177+
text-decoration: ${(props) => props.$navItemActiveStyle?.textDecoration || props.$navItemStyle?.textDecoration};
140178
}
141179
}
142180
}
@@ -161,6 +199,11 @@ const StyledMenu = styled(AntdMenu)<{
161199
162200
`;
163201

202+
203+
const ViewerMainContent = styled(MainContent)<{ $isPreview: boolean }>`
204+
height: ${(props) => (props.$isPreview ? `calc(100vh - ${TopHeaderHeight})` : "100vh")};
205+
`;
206+
164207
const StyledImage = styled.img`
165208
height: 1em;
166209
color: currentColor;
@@ -317,6 +360,7 @@ let NavTmpLayout = (function () {
317360
NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
318361
const pathParam = useAppPathParam();
319362
const isViewMode = isUserViewMode(pathParam);
363+
const isPreview = pathParam.viewMode === "preview";
320364
const [selectedKey, setSelectedKey] = useState("");
321365
const items = comp.children.items.getView();
322366
const navWidth = comp.children.width.getView();
@@ -636,25 +680,25 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
636680
);
637681

638682
let content = (
639-
<Layout>
683+
<Layout style={{ height: isPreview ? undefined : "100vh" }}>
640684
{(navPosition === 'top') && (
641685
<Header style={{ display: 'flex', alignItems: 'center', padding: 0 }}>
642686
{ navMenu }
643687
</Header>
644688
)}
645689
{(navPosition === 'left') && (
646-
<StyledSide theme="light" width={navWidth} collapsed={navCollapse}>
690+
<StyledSide $isPreview={isPreview} theme="light" width={navWidth} collapsed={navCollapse}>
647691
{navMenu}
648692
</StyledSide>
649693
)}
650-
<MainContent>{pageView}</MainContent>
694+
<ViewerMainContent $isPreview={isPreview}>{pageView}</ViewerMainContent>
651695
{(navPosition === 'bottom') && (
652696
<Footer style={{ display: 'flex', alignItems: 'center', padding: 0 }}>
653697
{ navMenu }
654698
</Footer>
655699
)}
656700
{(navPosition === 'right') && (
657-
<StyledSide theme="light" width={navWidth} collapsed={navCollapse}>
701+
<StyledSide $isPreview={isPreview} theme="light" width={navWidth} collapsed={navCollapse}>
658702
{navMenu}
659703
</StyledSide>
660704
)}

0 commit comments

Comments
 (0)