Miko/PyUIBuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling updates

Browse Source
This commit is contained in:
paul
2025-03-11 14:00:09 +05:30
parent 81c3056a10
commit b3ab3b1193
6 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/canvas/canvas.js
View File

@@ -1332,7 +1332,7 @@ class Canvas extends React.Component {
</DroppableWrapper>
<CanvasToolBar isOpen={this.state.toolbarOpen}
widgetType={this.selectedWidget?.getWidgetType() || ""}
widgetType={this.selectedWidget?.getDisplayName() || ""}
attrs={this.state.toolbarAttrs}
/>
{/* </ActiveWidgetProvider> */}

10
src/canvas/toolbar.js
View File

@@ -338,7 +338,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
if (isFirstLevel){
return (
<Collapse key={keyName} ghost defaultActiveKey={keys}>
<Collapse key={keyName} defaultActiveKey={keys}>
<Collapse.Panel header={val.label} key={keyName}>
{renderTool(keyName, val)}
</Collapse.Panel>
@@ -367,7 +367,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
if (isFirstLevel){
return (
<Collapse key={keyName} ghost defaultActiveKey={keys}>
<Collapse key={keyName} defaultActiveKey={keys}>
<Collapse.Panel header={val.label} key={keyName}>
<div className={`${containerClass} tw-px-2`}>
{renderToolbar(val, keyName, toolCount+1)}
@@ -398,13 +398,15 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
${toolbarOpen ? "tw-translate-x-0" : "tw-translate-x-full"}
tw-w-[280px] tw-px-3 tw-p-2 tw-h-[600px] tw-rounded-md tw-z-[1000] tw-shadow-lg
tw-transition-transform tw-duration-[0.3s] tw-overflow-x-hidden
tw-flex tw-flex-col tw-gap-2 tw-overflow-y-auto`}
tw-flex tw-flex-col tw-gap-2 tw-overflow-y-auto tw-border-[2px]
tw-border-solid tw-border-gray-300`}
style={{
transform: toolbarOpen ? "translateX(0)" : "translateX(calc(100% + 50px))"
}}
>
<h3 className="tw-text-lg tw-text-center">
<h3 className="tw-text-lg tw-text-center tw-bg-[#FAFAFA] tw-border-[1px] tw-border-solid tw-border-[#D9D9D9]
tw-p-1 tw-px-2 tw-rounded-md tw-font-medium">
{capitalize(`${widgetType || ""}`).replace(/_/g, " ")}
</h3>

1
src/canvas/widgets/base.js
View File

@@ -1290,6 +1290,7 @@ class Widget extends React.Component {
style={{
position: "fixed", // transforms are applied on parent so its going to be relative to parent
// TODO: this Change left and top with elementRect.left
left: left,
top: top,

2
src/components/cards.js
View File

@@ -42,7 +42,7 @@ export function SidebarWidgetCard({ name, img, url, license, widgetClass, innerR
<div ref={innerRef} className="tw-select-none tw-h-[200px] tw-w-[230px] tw-flex tw-flex-col
tw-rounded-md tw-overflow-hidden
tw-gap-2 tw-text-gray-600 tw-bg-[#ffffff44] tw-border-solid tw-border-[1px]
tw-border-blue-500 tw-shadow-md">
tw-border-gray-500 tw-shadow-md">
<div className="tw-h-[200px] tw-pointer-events-none tw-w-full tw-overflow-hidden">
<img src={img} alt={name} className="tw-object-contain tw-h-full tw-w-full tw-select-none" />
</div>

6
src/sidebar/sidebar.js
View File

@@ -62,7 +62,7 @@ function Sidebar({tabs}){
>
<div className="tw-min-w-[80px] tw-w-[80px] tw-h-full tw-flex tw-flex-col tw-gap-4 tw-p-3 tw-place-items-center">
<div className="tw-min-w-[80px] tw-w-[80px] tw-bg-gray-100 tw-h-full tw-flex tw-flex-col tw-gap-4 tw-p-3 tw-place-items-center">
{
sidebarTabs.map((tab, index) => {
return (
@@ -113,7 +113,9 @@ function Sidebar({tabs}){
</div>
</div>
<div className="tw-w-full tw-h-full tw-bg-inherit tw-flex tw-flex-col tw-overflow-x-hidden" ref={sideBarExtraRef}>
<div className="tw-w-full tw-h-full tw-bg-inherit tw-rounded-lg
tw-shadow-[rgb(59,130,246)] !tw-shadow-[rgba(179,116,206,0.5)_-3px_0px_10px_] tw-flex tw-flex-col tw-overflow-x-hidden"
ref={sideBarExtraRef}>
<div className="tw-w-full tw-h-[50px] tw-flex tw-place-content-end tw-p-1">
<button className="tw-outline-none tw-bg-transparent tw-border-none tw-text-gray-600 tw-cursor-pointer tw-text-xl"
onClick={closeSidebar}

2
src/styles/index.css
View File

@@ -13,7 +13,7 @@ body {
/* width */
::-webkit-scrollbar {
width: 8px;
width: 6px;
}
/* Track */