timer styles updated

MenamAfzal · MenamAfzal · commit 00371a935b8c · 2024-05-08T01:14:05.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/timerComp.tsx b/client/packages/lowcoder/src/comps/comps/timerComp.tsx
@@ -1,6 +1,6 @@
 import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import { timerStyle, timerStyleType } from "comps/controls/styleControlConstants";
+import { startButtonStyle, StartButtonStyleType, timerStyle, timerStyleType } from "comps/controls/styleControlConstants";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
@@ -24,21 +24,54 @@ const Container = styled.div<{ $style: timerStyleType | undefined }>`
   word-wrap: break-word;
   line-height: initial;
   background-color: ${props => props.$style?.background};
-  border: 1px solid ${props => props.$style?.border};
-  border-radius: ${props => props.$style?.radius};
-  color: ${props => props.$style?.fontColor};
+ 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 ButtonWarrper = styled.div`
   width: 100%;
   min-height: 35px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   padding-right: 15px;
   padding-bottom: 10px;
-  margin-top: -10px;
+  margin-top: 10px;
 `;
 
+const StyledButton = styled(Button)<{ $style: StartButtonStyleType }>`
+background-color: ${props=>props.$style.background};
+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};
+`;
+
+
+
 function formatTimeDifference(timeDifference: number) {
   // 计算时、分、秒、毫秒
   const hours = Math.floor(timeDifference / (1000 * 60 * 60));
@@ -64,6 +97,8 @@ const timerTypeOptions = [
 
 const childrenMap = {
   style: styleControl(timerStyle),
+  startButtonStyle: styleControl(startButtonStyle),
+  resetButtonStyle: styleControl(startButtonStyle),
   onEvent: eventHandlerControl(EventOptions),
   defaultValue: stringExposingStateControl("defaultValue", '00:00:00:000'),
   timerType: dropdownControl(timerTypeOptions, 'timer'),
@@ -162,19 +197,21 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
       {formatTimeDifference(elapsedTime)}
       <ButtonWarrper hidden={props.hideButton}>
         <Space>
-          <Button
+          <StyledButton
+            $style={props.startButtonStyle}
             disabled={!buttonState}
             type={timerState === 'stoped' ? "primary" : 'default'}
             onClick={() => {
               if (timerState === 'stoped') startAction()
               else if (timerState === 'started') pauseAction()
               else if (timerState === 'paused') resumeAction()
             }}
-          >{timerState === 'stoped' ? trans('timer.start') : (timerState === 'started' ? trans('timer.pause') : trans('timer.resume'))}</Button>
-          <Button
-            onClick={() => resetAction()}
+          >{timerState === 'stoped' ? trans('timer.start') : (timerState === 'started' ? trans('timer.pause') : trans('timer.resume'))}</StyledButton>
+          <StyledButton
+          $style={props.resetButtonStyle}
+          onClick={() => resetAction()}
           >{trans('timer.reset')}
-          </Button>
+          </StyledButton>
         </Space>
       </ButtonWarrper>
     </Container>
@@ -206,9 +243,17 @@ let AvatarGroupBasicComp = (function () {
         )}
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <>
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
+          <Section name={sectionNames.startButtonStyle}>
+            {children.startButtonStyle.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.resetButtonStyle}>
+            {children.resetButtonStyle.getPropertyView()}
+          </Section>
+          </>
         )}
       </>
     ))
