Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Feature/styletypes improvement#637

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
FalkWolsky merged 5 commits intodevfromfeature/styletypes-improvement
Jan 16, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -177,4 +177,4 @@ const ColorBlock = styled.div<{ $color: string }>`
cursor: pointer;
background-clip: content-box;
overflow: hidden;
`;
`;
4 changes: 2 additions & 2 deletionsclient/packages/lowcoder/src/components/ColorPicker.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -197,7 +197,7 @@ export default function ColorPicker(props: ColorConfigProps) {
)}
{colorKey === "margin" && (
<div className="config-input">
<Margin $margin={defaultMargin || "3px"}>
<Margin $margin={defaultMargin || "4px"}>
<div>
<ExpandIcon title="" />
</div>
Expand All@@ -215,7 +215,7 @@ export default function ColorPicker(props: ColorConfigProps) {
)}
{colorKey === "padding" && (
<div className="config-input">
<Padding $padding={defaultPadding || "3px"}>
<Padding $padding={defaultPadding || "4px"}>
<div>
<CompressIcon title="" />
</div>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,30 +16,30 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
margin: ${buttonStyle.margin};
padding: ${buttonStyle.padding};
&:not(:disabled) {
// click animation color
--antd-wave-shadow-color: ${buttonStyle.border};
border-color: ${buttonStyle.border};
color: ${buttonStyle.text};
font-size: ${buttonStyle.textSize};
font-weight: ${buttonStyle.textWeight};
background-color: ${buttonStyle.background};
border-radius: ${buttonStyle.radius};
margin: ${buttonStyle.margin};
padding: ${buttonStyle.padding};

:hover,
:focus {
&:hover,
&:focus {
color: ${buttonStyle.text};
background-color: ${hoverColor};
border-color: ${buttonStyle.border === buttonStyle.background
? hoverColor
: buttonStyle.border};
: buttonStyle.border} !important;
}

:active {
&:active {
color: ${buttonStyle.text};
background-color: ${activeColor};
border-color: ${buttonStyle.border === buttonStyle.background
? activeColor
: buttonStyle.border};
: buttonStyle.border} !important;
}
}
}
Expand All@@ -54,11 +54,11 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
justify-content: center;
align-items: center;
overflow: hidden;
gap: 6px;
span {
overflow: hidden;
text-overflow: ellipsis;
}
gap: 6px;
`;

export const ButtonCompWrapper = styled.div<{ disabled: boolean }>`
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -41,7 +41,11 @@ export const ContainerBaseComp = (function () {
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
<><Section name={sectionNames.layout}>
{children.container.getPropertyView()}
</Section><Section name={sectionNames.style}>{children.container.stylePropertyView()}</Section></>
</Section>
<Section name={sectionNames.style}>
{ children.container.stylePropertyView() }
</Section>
</>
)}
</>
);
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -318,7 +318,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
const defaultGrid =
useContext(ThemeContext)?.theme?.gridColumns ||
defaultTheme?.gridColumns ||
"24";
"12";
/////////////////////
const isDroppable =
useContext(IsDroppable) && (_.isNil(props.isDroppable) || props.isDroppable) && !readOnly;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,7 @@ import { EventData, EventTypeEnum } from "./types";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
import { EditorContext } from "comps/editorState";
import * as ReactDOMClient from 'react-dom/client';

// TODO: eventually to embedd in container so we have styling?
// TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
Expand DownExpand Up@@ -59,9 +60,8 @@ const defaultCode = `
);

const ConnectedComponent = ${trans("customComp.sdkGlobalVarName")}.connect(MyCustomComponent);

const container = document.getElementById("root");
const root = createRoot(container);
const container = document.getElementById('root');
const root = ReactDOMClient.createRoot(container);
root.render(<ConnectedComponent />);

</script>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { JSONObject, JSONValue } from "util/jsonTypes";
import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core";
import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core";
import { AutoHeightControl } from "comps/controls/autoHeightControl";
import { stringExposingStateControl } from "comps/controls/codeStateControl";
import {BooleanStateControl, booleanExposingStateControl,stringExposingStateControl } from "comps/controls/codeStateControl";
import { eventHandlerControl } from "comps/controls/eventHandlerControl";
import { TabsOptionControl } from "comps/controls/optionsControl";
import { styleControl } from "comps/controls/styleControl";
Expand All@@ -12,7 +12,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
import { addMapChildAction } from "comps/generators/sameTypeMap";
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
import { NameGenerator } from "comps/utils";
import { Section, sectionNames } from "lowcoder-design";
import {ControlNode,Section, sectionNames } from "lowcoder-design";
import { HintPlaceHolder } from "lowcoder-design";
import _ from "lodash";
import React, { useCallback, useContext } from "react";
Expand All@@ -33,6 +33,9 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
import { EditorContext } from "comps/editorState";
import { checkIsMobile } from "util/commonUtils";
import { messageInstance } from "lowcoder-design";
import { show } from "antd-mobile/es/components/dialog/show";
import { BoolControl } from "@lowcoder-ee/index.sdk";
import { Switch } from "antd";

const EVENT_OPTIONS = [
{
Expand All@@ -52,27 +55,40 @@ const childrenMap = {
autoHeight: AutoHeightControl,
onEvent: eventHandlerControl(EVENT_OPTIONS),
disabled: BoolCodeControl,
showHeader: BooleanStateControl,
style: styleControl(TabContainerStyle),
};

type ViewProps = RecordConstructorToView<typeof childrenMap>;
type TabbedContainerProps = ViewProps & { dispatch: DispatchType };

const getStyle = (style: TabContainerStyleType) => {
return css`
&.ant-tabs {
border:1px solid ${style.border};
border:${style.borderWidth} solid ${style.border};
border-radius: ${style.radius};
overflow: hidden;
padding: ${style.padding};
padding: ${style.padding};

> .ant-tabs-content-holder > .ant-tabs-content > div > .react-grid-layout {
background-color: ${style.background};
border-radius: 0;

background-image: ${style.backgroundImage};
background-repeat: ${style.backgroundImageRepeat};
background-size: ${style.backgroundImageSize};
background-position: ${style.backgroundImagePosition};
background-origin: ${style.backgroundImageOrigin};

}

> .ant-tabs-nav {
background-color: ${style.headerBackground};
background-image: ${style.headerBackgroundImage};
background-repeat: ${style.headerBackgroundImageRepeat};
background-size: ${style.headerBackgroundImageSize};
background-position: ${style.headerBackgroundImagePosition};
background-origin: ${style.headerBackgroundImageOrigin};

.ant-tabs-tab {
div {
Expand All@@ -96,7 +112,11 @@ const getStyle = (style: TabContainerStyleType) => {
`;
};

const StyledTabs = styled(Tabs)<{ $style: TabContainerStyleType; $isMobile?: boolean }>`
const StyledTabs = styled(Tabs)<{
$style: TabContainerStyleType;
$isMobile?: boolean;
$showHeader?: boolean;
}>`
&.ant-tabs {
height: 100%;
}
Expand All@@ -111,6 +131,7 @@ const StyledTabs = styled(Tabs)<{ $style: TabContainerStyleType; $isMobile?: boo
}

.ant-tabs-nav {
display: ${(props) => (props.$showHeader ? "block" : "none")};
padding: 0 ${(props) => (props.$isMobile ? 16 : 24)}px;
background: white;
margin: 0px;
Expand DownExpand Up@@ -158,12 +179,10 @@ const TabbedContainer = (props: TabbedContainerProps) => {
const editorState = useContext(EditorContext);
const maxWidth = editorState.getAppSettings().maxWidth;
const isMobile = checkIsMobile(maxWidth);
const paddingWidth = isMobile ? 8 : 20;

// log.debug("TabbedContainer. props: ", props);
const showHeader = props.showHeader.value;
const paddingWidth = isMobile ? 8 : 0;

const tabItems = visibleTabs.map((tab) => {
// log.debug("Tab. tab: ", tab, " containers: ", containers);
const id = String(tab.id);
const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
const containerProps = containers[id].children;
Expand DownExpand Up@@ -203,6 +222,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
<StyledTabs
activeKey={activeKey}
$style={style}
$showHeader={showHeader}
onChange={(key) => {
if (key !== props.selectedTabKey.value) {
props.selectedTabKey.onChange(key);
Expand All@@ -220,6 +240,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
);
};


export const TabbedContainerBaseComp = (function () {
return new UICompBuilder(childrenMap, (props, dispatch) => {
return (
Expand All@@ -238,11 +259,12 @@ export const TabbedContainerBaseComp = (function () {
})}
{children.selectedTabKey.propertyView({ label: trans("prop.defaultValue") })}
</Section>

{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
<Section name={sectionNames.interaction}>
{children.onEvent.getPropertyView()}
{disabledPropertyView(children)}
{children.showHeader.propertyView({ label: trans("prop.showHeader") })}
{hiddenPropertyView(children)}
</Section>
)}
Expand DownExpand Up@@ -364,6 +386,8 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai
override autoHeight(): boolean {
return this.children.autoHeight.getView();
}


}

export const TabbedContainerComp = withExposingConfigs(TabbedContainerImplComp, [
Expand Down
2 changes: 2 additions & 0 deletionsclient/packages/lowcoder/src/comps/comps/textComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -26,6 +26,8 @@ const getStyle = (style: TextStyleType) => {
border-radius: ${(style.radius ? style.radius : "4px")};
border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
color: ${style.text};
font-size: ${style.textSize} !important;
font-weight: ${style.textWeight} !important;
background-color: ${style.background};
.markdown-body a {
color: ${style.links};
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,8 +9,9 @@ import { gridItemCompToGridItems, InnerGrid } from "../containerComp/containerVi
import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder";

const getStyle = (style: ContainerStyleType) => {
return css`
return css`
border-color: ${style.border};
border-width: ${style.borderWidth};
border-radius: ${style.radius};
overflow: hidden;
// margin: ${style.margin};
Expand All@@ -29,32 +30,64 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>`
${(props) => props.$style && getStyle(props.$style)}
`;

const HeaderInnerGrid = styled(InnerGrid)<{ $backgroundColor: string }>`
const HeaderInnerGrid = styled(InnerGrid)<{
$backgroundColor: string
$headerBackgroundImage: string;
$headerBackgroundImageRepeat: string;
$headerBackgroundImageSize: string;
$headerBackgroundImagePosition: string;
$headerBackgroundImageOrigin: string;
}>`
overflow: visible;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
${(props) => props.$headerBackgroundImage && `background-image: ${props.$headerBackgroundImage};`}
${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`}
${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`}
${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`}
${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`}
`;

const BodyInnerGrid = styled(InnerGrid)<{
$showBorder: boolean;
$backgroundColor: string;
$borderColor: string;
$backgroundImage: string;
$backgroundImageRepeat: string;
$backgroundImageSize: string;
$backgroundImagePosition: string;
$backgroundImageOrigin: string;
}>`
border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
flex: 1;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
${(props) => props.$backgroundImage && `background-image: ${props.$backgroundImage};`}
${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`}
${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`}
${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`}
${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`}
`;

const FooterInnerGrid = styled(InnerGrid)<{
$showBorder: boolean;
$backgroundColor: string;
$borderColor: string;
$footerBackgroundImage: string;
$footerBackgroundImageRepeat: string;
$footerBackgroundImageSize: string;
$footerBackgroundImagePosition: string;
$footerBackgroundImageOrigin: string;
}>`
border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
overflow: visible;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
${(props) => props.$footerBackgroundImage && `background-image: ${props.$footerBackgroundImage};`}
${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`}
${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`}
${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`}
${(props) => props.$footerBackgroundImageOrigin && `background-origin: ${props.$footerBackgroundImageOrigin};`}
`;

export type TriContainerProps = TriContainerViewProps & {
Expand All@@ -75,7 +108,7 @@ export function TriContainer(props: TriContainerProps) {
const editorState = useContext(EditorContext);
const maxWidth = editorState.getAppSettings().maxWidth;
const isMobile = checkIsMobile(maxWidth);
const paddingWidth = isMobile ?7 :19;
const paddingWidth = isMobile ?8 :0;

return (
<div style={{padding: style.margin, height: '100%'}}>
Expand All@@ -91,7 +124,13 @@ export function TriContainer(props: TriContainerProps) {
containerPadding={[paddingWidth, 3]}
showName={{ bottom: showBody || showFooter ? 20 : 0 }}
$backgroundColor={style?.headerBackground}
$headerBackgroundImage={style?.headerBackgroundImage}
$headerBackgroundImageRepeat={style?.headerBackgroundImageRepeat}
$headerBackgroundImageSize={style?.headerBackgroundImageSize}
$headerBackgroundImagePosition={style?.headerBackgroundImagePosition}
$headerBackgroundImageOrigin={style?.headerBackgroundImageOrigin}
style={{padding: style.containerheaderpadding}}

/>
</BackgroundColorContext.Provider>
)}
Expand All@@ -110,6 +149,11 @@ export function TriContainer(props: TriContainerProps) {
hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
$backgroundColor={style?.background}
$borderColor={style?.border}
$backgroundImage={style?.backgroundImage}
$backgroundImageRepeat={style?.backgroundImageRepeat}
$backgroundImageSize={style?.backgroundImageSize}
$backgroundImagePosition={style?.backgroundImagePosition}
$backgroundImageOrigin={style?.backgroundImageOrigin}
style={{padding: style.containerbodypadding}}
/>
</BackgroundColorContext.Provider>
Expand All@@ -126,6 +170,11 @@ export function TriContainer(props: TriContainerProps) {
containerPadding={showBody || showHeader ? [paddingWidth, 3.5] : [paddingWidth, 3]}
showName={{ top: showHeader || showBody ? 20 : 0 }}
$backgroundColor={style?.footerBackground}
$footerBackgroundImage={style?.footerBackgroundImage}
$footerBackgroundImageRepeat={style?.footerBackgroundImageRepeat}
$footerBackgroundImageSize={style?.footerBackgroundImageSize}
$footerBackgroundImagePosition={style?.footerBackgroundImagePosition}
$footerBackgroundImageOrigin={style?.footerBackgroundImageOrigin}
$borderColor={style?.border}
style={{padding: style.containerfooterpadding}}
/>
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp