Feature/add styles

client/packages/lowcoder-design/src/components/Section.tsx

@@ -149,5 +149,12 @@ export const sectionNames = {
   data: trans("prop.data"),
   meetings: trans("prop.meetings"), // added by Falk Wolsky
   field: trans("prop.field"),
-  inputFieldStyle:trans("prop.inputFieldStyle")
+  inputFieldStyle:trans("prop.inputFieldStyle"),
+  avatarStyle:trans("prop.avatarStyle"),
+  captionStyle:trans("prop.captionStyle"),
+  startButtonStyle:trans("prop.startButtonStyle"),
+  resetButtonStyle:trans("prop.resetButtonStyle"),
+  headerStyle:trans("prop.headerStyle"),
+  bodyStyle:trans("prop.bodyStyle"),
+  badgeStyle:trans("prop.badgeStyle"),
 };

client/packages/lowcoder-design/src/i18n/design/locales/en.ts

@@ -28,7 +28,14 @@ export const en = {
     meetings: "Meeting Settings",
     data: "Data",
     field: 'Field',
-    inputFieldStyle:'Input Field Style'
+    inputFieldStyle: 'Input Field Style',
+    avatarStyle: 'Avatar Style',
+    captionStyle: 'Caption Style',
+    startButtonStyle: 'Start Button Style',
+    resetButtonStyle: 'Reset Button Style',
+    headerStyle: 'Header Style',
+    bodyStyle: 'Body Style',
+    badgeStyle: 'Badge Style',
   },
   passwordInput: {
     label: "Password:",

client/packages/lowcoder/src/comps/comps/avatar.tsx

@@ -3,6 +3,10 @@ import { RecordConstructorToView } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
 import _ from "lodash";
 import {
+  avatarContainerStyle,
+  AvatarContainerStyleType,
+  avatarLabelStyle,
+  AvatarLabelStyleType,
   AvatarStyle,
   AvatarStyleType,
 } from "comps/controls/styleControlConstants";
@@ -37,13 +41,20 @@ const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean,
   cursor: ${(props) => props.$cursorPointer ? 'pointer' : ''};
 `;
 
-const Wrapper = styled.div <{ iconSize: number, labelPosition: string }>`
+const Wrapper = styled.div <{ iconSize: number, labelPosition: string,$style: AvatarContainerStyleType}>`
 display: flex;
 width: 100%;
 height: 100%;
-padding: 0px;
 align-items: center;
 flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'};
+${(props) => {
+    return (
+      props.$style && {
+        ...props.$style,
+        borderRadius: props.$style.radius,
+      }
+    );
+  }}
 `
 
 const LabelWrapper = styled.div<{ iconSize: number, alignmentPosition: string }>`
@@ -55,20 +66,47 @@ flex-direction: column;
 justify-content: flex-end;
 align-items: ${(props) => props.alignmentPosition === 'left' ? 'flex-start' : 'flex-end'};
 `
-const LabelSpan = styled.span<{ color: string }>`
+const LabelSpan = styled.span<{ $style:AvatarLabelStyleType }>`
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
-font-weight: bold;
-color: ${(props) => props.color};
+font-weight: ${props=>props.$style.textWeight};
+border-radius: ${props=>props.$style.radius};
+font-size: ${props=>props.$style.textSize};
+rotate: ${props=>props.$style.rotation};
+text-transform: ${props=>props.$style.textTransform};
+color: ${props=>props.$style.text};
+border: ${props => props.$style.border};
+border-style: ${props=>props.$style.borderStyle};
+border-width: ${props=>props.$style.borderWidth};
+font-family: ${props=>props.$style.fontFamily};
+font-style: ${props=>props.$style.fontStyle};
+margin: ${props=>props.$style.margin};
+padding: ${props=>props.$style.padding};
+background: ${props=>props.$style.background};
+text-decoration: ${props=>props.$style.textDecoration};
 `
-const CaptionSpan = styled.span<{ color: string }>`
+const CaptionSpan = styled.span<{ $style:AvatarLabelStyleType }>`
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
-color: ${(props) => props.color};
+font-weight: ${props=>props.$style.textWeight};
+border-radius: ${props=>props.$style.radius};
+font-size: ${props=>props.$style.textSize};
+rotate: ${props=>props.$style.rotation};
+text-transform: ${props=>props.$style.textTransform};
+color: ${props=>props.$style.text};
+border: ${props => props.$style.border};
+border-style: ${props=>props.$style.borderStyle};
+border-width: ${props=>props.$style.borderWidth};
+font-family: ${props=>props.$style.fontFamily};
+font-style: ${props=>props.$style.fontStyle};
+margin: ${props=>props.$style.margin};
+padding: ${props=>props.$style.padding};
+background: ${props=>props.$style.background};
+text-decoration: ${props => props.$style.textDecoration};
 `
 const EventOptions = [clickEvent] as const;
 const sharpOptions = [
@@ -82,7 +120,10 @@ const sideOptions = [
 ] as const;
 
 const childrenMap = {
-  style: styleControl(AvatarStyle),
+  style: styleControl(avatarContainerStyle),
+  avatarStyle: styleControl(AvatarStyle),
+  labelStyle: styleControl(avatarLabelStyle),
+  captionStyle: styleControl(avatarLabelStyle),
   icon: withDefault(IconControl, "/icon:solid/user"),
   iconSize: withDefault(NumberControl, 40),
   onEvent: eventHandlerControl(EventOptions),
@@ -127,7 +168,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
       disabled={!props.enableDropdownMenu}
       dropdownRender={() => menu}
     >
-      <Wrapper iconSize={props.iconSize} labelPosition={props.labelPosition}>
+      <Wrapper iconSize={props.iconSize} labelPosition={props.labelPosition} $style={props.style}>
         <Badge
           count={props.badgeCount.value}
           dot={props.badgeType === 'dot'}
@@ -140,7 +181,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
             size={iconSize}
             icon={title.value !== '' ? null : props.icon}
             shape={shape}
-            $style={props.style}
+            $style={props.avatarStyle}
             src={src.value}
             // $cursorPointer={eventsCount > 0}
             onClick={() => props.onEvent("click")}
@@ -149,8 +190,8 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
           </AvatarWrapper>
         </Badge>
         <LabelWrapper iconSize={props.iconSize} alignmentPosition={props.alignmentPosition}>
-          <LabelSpan color={props.style.label}>{props.avatarLabel.value}</LabelSpan>
-          <CaptionSpan color={props.style.caption}>{props.avatarCatption.value}</CaptionSpan>
+          <LabelSpan $style={props.labelStyle}>{props.avatarLabel.value}</LabelSpan>
+          <CaptionSpan $style={props.captionStyle}>{props.avatarCatption.value}</CaptionSpan>
         </LabelWrapper>
       </Wrapper>
     </Dropdown>
@@ -220,6 +261,15 @@ let AvatarBasicComp = (function () {
         <Section name={sectionNames.style}>
           {children.style.getPropertyView()}
         </Section>
+        <Section name={sectionNames.avatarStyle}>
+          {children.avatarStyle.getPropertyView()}
+        </Section>
+        <Section name={sectionNames.labelStyle}>
+          {children.labelStyle.getPropertyView()}
+        </Section>
+        <Section name={sectionNames.captionStyle}>
+          {children.captionStyle.getPropertyView()}
+        </Section>
       </>
     ))
     .build();

client/packages/lowcoder/src/comps/comps/avatarGroup.tsx

@@ -1,6 +1,6 @@
 import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import { QRCodeStyle, QRCodeStyleType, avatarGroupStyle, AvatarGroupStyleType } from "comps/controls/styleControlConstants";
+import { QRCodeStyle, QRCodeStyleType, avatarGroupStyle, AvatarGroupStyleType, avatarContainerStyle, AvatarContainerStyleType } from "comps/controls/styleControlConstants";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { AlignCenter, AlignLeft, AlignRight, Section, sectionNames } from "lowcoder-design";
@@ -31,13 +31,20 @@ const MacaroneList = [
   '#fcd6bb',
 ]
 
-const Container = styled.div<{ $style: AvatarGroupStyleType | undefined, alignment: string }>`
+const Container = styled.div<{ $style: AvatarContainerStyleType | undefined, alignment: string }>`
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: ${props => props.alignment};
   cursor: pointer;
+  background: ${props => props?.$style?.background};
+  margin: ${props => props?.$style?.margin};
+  padding: ${props => props?.$style?.padding};
+  border: ${props => props?.$style?.border};
+  border-style: ${props => props?.$style?.borderStyle};
+  border-radius: ${props => props?.$style?.radius};
+  border-width: ${props => props?.$style?.borderWidth};
 `;
 
 const DropdownOption = new MultiCompBuilder(
@@ -79,7 +86,8 @@ export const alignOptions = [
 ] as const;
 
 const childrenMap = {
-  style: styleControl(avatarGroupStyle),
+  avatar: styleControl(avatarGroupStyle),
+  style: styleControl(avatarContainerStyle),
   maxCount: withDefault(NumberControl, 3),
   avatarSize: withDefault(NumberControl, 40),
   alignment: dropdownControl(alignOptions, "center"),
@@ -112,8 +120,8 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
                     src={item.src ?? undefined}
                     icon={(item.AvatarIcon as ReactElement)?.props.value === '' || item.label.trim() !== '' ? undefined : item.AvatarIcon}
                     style={{
-                      color: item.color ? item.color : (props.style.fill !== '#FFFFFF' ? props.style.fill : '#FFFFFF'),
-                      backgroundColor: item.backgroundColor ? item.backgroundColor : (props.autoColor ? MacaroneList[index % MacaroneList.length] : props.style.background),
+                      color: item.color ? item.color : (props.avatar.fill !== '#FFFFFF' ? props.avatar.fill : '#FFFFFF'),
+                      backgroundColor: item.backgroundColor ? item.backgroundColor : (props.autoColor ? MacaroneList[index % MacaroneList.length] : props.avatar.background),
                     }}
                     size={props.avatarSize}
                     onClick={() => {
@@ -163,9 +171,14 @@ let AvatarGroupBasicComp = (function () {
         )}
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <>
+          <Section name={sectionNames.avatarStyle}>
+            {children.avatar.getPropertyView()}
+          </Section>
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
+          </>
         )}
       </>
     ))

client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx

@@ -3,7 +3,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
-import { FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
+import { BadgeStyle, BadgeStyleType, FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
@@ -17,7 +17,7 @@ import styled from "styled-components";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { manualOptionsControl } from "comps/controls/optionsControl";
 
-const Wrapper = styled.div<{ $style: FloatButtonStyleType }>`
+const Wrapper = styled.div<{ $badgeStyle: BadgeStyleType, $style: FloatButtonStyleType}>`
     width: 0px;
     height: 0px;
     overflow: hidden;
@@ -29,6 +29,12 @@ const Wrapper = styled.div<{ $style: FloatButtonStyleType }>`
         right: 0px;
         inset-block-end: -8px;
     }
+    .ant-float-btn-primary .ant-float-btn-body {
+    background-color: ${(props) => props.$style.background};
+    border: ${(props) => props.$style.border};
+    border-style: ${(props) => props.$style.borderStyle};
+    border-width: ${(props) => props.$style.borderWidth};
+    }
 `
 
 const buttonShapeOption = [
@@ -70,6 +76,7 @@ const childrenMap = {
     includeMargin: BoolControl.DEFAULT_TRUE,
     image: StringControl,
     icon: withDefault(IconControl, '/icon:antd/questioncircleoutlined'),
+    badgeStyle: styleControl(BadgeStyle),
     style: styleControl(FloatButtonStyle),
     buttons: manualOptionsControl(buttonGroupOption, {
         initOptions: [
@@ -92,20 +99,20 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
                 onClick={() => button.onEvent("click")}
                 tooltip={button?.label}
                 description={button?.description}
-                badge={{ count: button?.badge, color: props.style.badgeColor, dot: props?.dot }}
+                badge={{ count: button?.badge, color: props.badgeStyle.badgeColor, dot: props?.dot }}
                 type={onlyOne ? props.buttonTheme : 'default'}
                 shape={props.shape}
             />)
             : ''
     }
     return (
-        <Wrapper $style={props.style} >
+        <Wrapper $badgeStyle={props.badgeStyle} $style={props.style}>
             {props.buttons.length === 1 ? (renderButton(props.buttons[0], true)) :
                 (<FloatButton.Group
                     trigger="hover"
                     icon={props.icon}
                     shape={props.shape}
-                    badge={{ count: props.buttons.reduce((sum, i) => sum + (i.buttonType === 'custom' && !i.hidden ? i.badge : 0), 0), color: props.style.badgeColor, dot: props.dot }}
+                    badge={{ count: props.buttons.reduce((sum, i) => sum + (i.buttonType === 'custom' && !i.hidden ? i.badge : 0), 0), color: props.badgeStyle.badgeColor, dot: props.dot }}
                     type={props.buttonTheme}
                 >
                     {props.buttons.map((button: any) => renderButton(button))}
@@ -129,6 +136,7 @@ let FloatButtonBasicComp = (function () {
                 <Section name={sectionNames.layout}>
                     {hiddenPropertyView(children)}
                 </Section>
+                <Section name={sectionNames.badgeStyle}>{children.badgeStyle.getPropertyView()}</Section>
                 <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             </>
         ))