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

Added scrollbar & Switches#1192

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
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
24 commits
Select commitHold shift + click to select a range
64ee003
PageLayout: Added Main Content Scrollbar
MenamAfzalSep 23, 2024
b59560a
ResponsiveLayout: Added Main Content Scrollbar
MenamAfzalSep 23, 2024
ac9cb31
ColumnLayout: Added Main Content Scrollbar
MenamAfzalSep 23, 2024
908ccf5
added heightControl & scroll toggleBar in JSONSCHEMAFORM
MenamAfzalSep 24, 2024
9973b1e
Modal: Added Main Content Scrollbar
MenamAfzalSep 24, 2024
9279376
Drawer: Added Main Content Scrollbar
MenamAfzalSep 24, 2024
ac126e6
added height control in fileViewer
MenamAfzalSep 24, 2024
7f75647
pull from dev
MenamAfzalSep 24, 2024
d529033
FloatTextContainer: Added Main Content Scrollbar
MenamAfzalSep 24, 2024
54581e3
TextDisplay: Added Main Content Scrollbar
MenamAfzalSep 24, 2024
c3f5b1c
RichTextEditor: Added Main Content Scrollbar
MenamAfzalSep 24, 2024
8a56c37
fileViewer: fixing scrollbar funxtionality
MenamAfzalSep 25, 2024
ed5596c
scrollBar toggle in calendar
MenamAfzalSep 25, 2024
5bd097c
Timeline: Added autoHeight component and a vertical scrollbar
MenamAfzalSep 25, 2024
0d15cc7
TreeComponent: Added autoHeight component and a vertical scrollbar
MenamAfzalSep 25, 2024
3de9006
conflicts resolved
MenamAfzalSep 25, 2024
0a7dfb8
responsive layout edited
MenamAfzalSep 25, 2024
d57085e
stepControl fixed
MenamAfzalSep 25, 2024
31e9394
Dropdown: Added scrollbar
MenamAfzalSep 26, 2024
168efdb
PageLayout: Fixed main content scrollbar
MenamAfzalSep 26, 2024
a7926ab
PageLayout: Changed the placement of scrollbar controllers
MenamAfzalSep 26, 2024
b153e17
minor tweak
MenamAfzalSep 26, 2024
a74271c
StepControl: Added min width and a horizontal scroll
MenamAfzalSep 26, 2024
76cf4d7
StepControl: refactor non used code
MenamAfzalSep 26, 2024
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@@ -150,6 +150,7 @@ let childrenMap: any = {
currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"),
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
showVerticalScrollbar: withDefault(BoolControl, false),
};

// this should ensure backwards compatibility with older versions of the SDK
Expand DownExpand Up@@ -188,7 +189,10 @@ let CalendarBasicComp = (function () {
currentPremiumView?: string;
animationStyle?:any;
modalStyle?:any
}) => {
showVerticalScrollbar?:boolean

}, dispatch: any) => {

const comp = useContext(EditorContext)?.getUICompByName(
useContext(CompNameContext)
);
Expand DownExpand Up@@ -315,6 +319,7 @@ let CalendarBasicComp = (function () {
licenseKey,
resourceName,
modalStyle,
showVerticalScrollbar
} = props;

const handleEventDataChange = useCallback((data: Array<Record<string,any>>) => {
Expand DownExpand Up@@ -745,6 +750,7 @@ let CalendarBasicComp = (function () {
$editable={editable}
$style={style}
$theme={theme?.theme}
$showVerticalScrollbar={showVerticalScrollbar}
onDoubleClick={handleDbClick}
$left={left}
key={initialDate ? currentView + initialDate : currentView}
Expand DownExpand Up@@ -873,7 +879,8 @@ let CalendarBasicComp = (function () {
style: { getPropertyView: () => any; };
animationStyle: { getPropertyView: () => any; };
modalStyle: { getPropertyView: () => any; };
licenseKey: { getView: () => any; propertyView: (arg0: { label: string; tooltip: string; }) => any; };
licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; };
showVerticalScrollbar: { propertyView: (arg0: { label: string; }) => any; };
}) => {
const license = children.licenseKey.getView();

Expand DownExpand Up@@ -918,6 +925,7 @@ let CalendarBasicComp = (function () {
? children.currentFreeView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })
: children.currentPremiumView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })}
{children.firstDay.propertyView({ label: trans("calendar.startWeek"), })}
{children.showVerticalScrollbar.propertyView({ label: trans("calendar.showVerticalScrollbar")})}
</Section>
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,7 @@ export const Wrapper = styled.div<{
$style?: CalendarStyleType;
$theme?: ThemeDetail;
$left?: number;
$showVerticalScrollbar?:boolean;
}>`
position: relative;
height: 100%;
Expand DownExpand Up@@ -359,6 +360,9 @@ export const Wrapper = styled.div<{
.fc .fc-scrollgrid table {
width: 100% !important;
}
.fc-scroller.fc-scroller-liquid-absolute::-webkit-scrollbar {
display:${(props) => (props.$showVerticalScrollbar ? 'block' : 'none')};
}

// event
.fc-timegrid-event .fc-event-main {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -345,7 +345,8 @@ export const en = {
animationType:"Type",
animationDelay:"Delay",
animationDuration:"Duration",
animationIterationCount:"IterationCount"
animationIterationCount:"IterationCount",
showVerticalScrollbar:"Show Vertical ScrollBar"
},
};

14 changes: 14 additions & 0 deletionsclient/packages/lowcoder-design/src/components/Dropdown.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import { ReactNode } from "react";
import styled from "styled-components";
import { CustomSelect } from "./customSelect";
import { EllipsisTextCss } from "./Label";
import { useEffect } from "react";
import { TacoMarkDown } from "./markdown";
import { Tooltip, ToolTipLabel } from "./toolTip";

Expand DownExpand Up@@ -157,6 +158,19 @@ interface DropdownProps<T extends OptionsType> extends Omit<SelectProps, "placem
export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
const { placement = "right" } = props;
const valueInfoMap = _.fromPairs(props.options.map((option) => [option.value, option]));

useEffect(() => {
const dropdownElems = document.querySelectorAll<HTMLElement>("div.ant-dropdown ul.ant-dropdown-menu");
for (let index = 0; index < dropdownElems.length; index++) {
const element = dropdownElems[index];
console.log(element);
element.style.maxHeight = "300px";
element.style.overflowY = "scroll";
element.style.minWidth = "150px";
element.style.paddingRight = "10px";
}
}, []);

return (
<FlexDiv style={props.style} className={props.className}>
{props.label && (
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
import { addMapChildAction } from "comps/generators/sameTypeMap";
import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
import { NameGenerator } from "comps/utils";
import { Section, controlItem, sectionNames } from "lowcoder-design";
import {ScrollBar,Section, controlItem, sectionNames } from "lowcoder-design";
import { HintPlaceHolder } from "lowcoder-design";
import _ from "lodash";
import styled from "styled-components";
Expand DownExpand Up@@ -96,6 +96,7 @@ const childrenMap = {
templateRows: withDefault(StringControl, "1fr"),
rowGap: withDefault(StringControl, "20px"),
templateColumns: withDefault(StringControl, "1fr 1fr"),
mainScrollbar: withDefault(BoolControl, false),
columnGap: withDefault(StringControl, "20px"),
style: styleControl(ContainerStyle, 'style'),
columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle')
Expand DownExpand Up@@ -133,48 +134,53 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
columnGap,
columnStyle,
horizontalGridCells,
mainScrollbar
} = props;

return (
<BackgroundColorContext.Provider value={props.style.background}>
<DisabledContext.Provider value={props.disabled}>
<ContainWrapper $style={{
...props.style,
display: "grid",
gridTemplateColumns: templateColumns,
columnGap,
gridTemplateRows: templateRows,
rowGap,
}}>
{columns.map(column => {
const id = String(column.id);
const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
if(!containers[id]) return null
const containerProps = containers[id].children;
const noOfColumns = columns.length;
return (
<BackgroundColorContext.Provider value={props.columnStyle.background}>
<ColWrapper
key={id}
$style={props.columnStyle}
$minWidth={column.minWidth}
$matchColumnsHeight={matchColumnsHeight}
>
<ColumnContainer
layout={containerProps.layout.getView()}
items={gridItemCompToGridItems(containerProps.items.getView())}
horizontalGridCells={horizontalGridCells}
positionParams={containerProps.positionParams.getView()}
dispatch={childDispatch}
autoHeight={props.autoHeight}
style={columnStyle}
/>
</ColWrapper>
</BackgroundColorContext.Provider>
)
})
}
</ContainWrapper>
<div style={{ height: "inherit", overflow: "auto"}}>
<ScrollBar style={{ margin: "0px", padding: "0px" }} overflow="scroll" hideScrollbar={!mainScrollbar}>
<ContainWrapper $style={{
...props.style,
display: "grid",
gridTemplateColumns: templateColumns,
columnGap,
gridTemplateRows: templateRows,
rowGap,
}}>
{columns.map(column => {
const id = String(column.id);
const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
if(!containers[id]) return null
const containerProps = containers[id].children;
const noOfColumns = columns.length;
return (
<BackgroundColorContext.Provider value={props.columnStyle.background}>
<ColWrapper
key={id}
$style={props.columnStyle}
$minWidth={column.minWidth}
$matchColumnsHeight={matchColumnsHeight}
>
<ColumnContainer
layout={containerProps.layout.getView()}
items={gridItemCompToGridItems(containerProps.items.getView())}
horizontalGridCells={horizontalGridCells}
positionParams={containerProps.positionParams.getView()}
dispatch={childDispatch}
autoHeight={props.autoHeight}
style={columnStyle}
/>
</ColWrapper>
</BackgroundColorContext.Provider>
)
})
}
</ContainWrapper>
</ScrollBar>
</div>
</DisabledContext.Provider>
</BackgroundColorContext.Provider>
);
Expand DownExpand Up@@ -207,6 +213,9 @@ export const ResponsiveLayoutBaseComp = (function () {
<>
<Section name={sectionNames.layout}>
{children.autoHeight.getPropertyView()}
{(!children.autoHeight.getView()) && children.mainScrollbar.propertyView({
label: trans("prop.mainScrollbar")
})}
{children.horizontalGridCells.propertyView({
label: trans('prop.horizontalGridCells'),
})}
Expand Down
31 changes: 26 additions & 5 deletionsclient/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,11 +6,11 @@ import { DocumentViewer } from "react-documents";
import styled, { css } from "styled-components";
import { Section, sectionNames } from "lowcoder-design";
import { StringControl } from "../controls/codeControl";
import { UICompBuilder } from "../generators";
import { UICompBuilder, withDefault } from "../generators";
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";

import { AutoHeightControl, BoolControl } from "@lowcoder-ee/index.sdk";
import { useContext } from "react";
import { EditorContext } from "comps/editorState";

Expand DownExpand Up@@ -42,12 +42,18 @@ const StyledDiv = styled.div<{$style: FileViewerStyleType;}>`
${(props) => props.$style && getStyle(props.$style)}
`;

const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,animationStyle:AnimationStyleType }) => {
const DraggableFileViewer = (props: {
src: string;
style: FileViewerStyleType,
animationStyle:AnimationStyleType,
showVerticalScrollbar: boolean,
}) => {
const [isActive, setActive] = useState(false);

return (
<StyledDiv
$style={props.style}
id="fileViewer"
onClick={(e) => setActive(true)}
onMouseLeave={(e) => setActive(false)}
>
Expand All@@ -67,6 +73,8 @@ const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,an
let FileViewerBasicComp = (function () {
const childrenMap = {
src: StringControl,
autoHeight: withDefault(AutoHeightControl,'auto'),
showVerticalScrollbar: withDefault(BoolControl, false),
style: styleControl(FileViewerStyle , 'style'),
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
};
Expand All@@ -81,7 +89,12 @@ let FileViewerBasicComp = (function () {
</ErrorWrapper>
);
}
return <DraggableFileViewer src={props.src} style={props.style} animationStyle={props.animationStyle}/>;
return <DraggableFileViewer
src={props.src}
style={props.style}
animationStyle={props.animationStyle}
showVerticalScrollbar={props.showVerticalScrollbar}
/>;
})
.setPropertyViewFn((children) => {
return (
Expand All@@ -100,6 +113,14 @@ let FileViewerBasicComp = (function () {
{hiddenPropertyView(children)}
</Section>
)}
<Section name={sectionNames.layout}>
{children.autoHeight.getPropertyView()}
{!children.autoHeight.getView() && (
children.showVerticalScrollbar.propertyView({
label: trans("prop.showVerticalScrollbar"),
})
)}
</Section>

{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
<>
Expand All@@ -119,7 +140,7 @@ let FileViewerBasicComp = (function () {

FileViewerBasicComp = class extends FileViewerBasicComp {
override autoHeight(): boolean {
returnfalse;
returnthis.children.autoHeight.getView();
}
};

Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp