Skip to content

Commit 3a5bc5e

Browse files
Tishasoumya-02Tishasoumya-02
committed
fix margins for sidebar and formatting
1 parent d2d445c commit 3a5bc5e

File tree

4 files changed

+134
-123
lines changed

4 files changed

+134
-123
lines changed

‎frontend/packages/volto-workflow-manager/src/components/Graph/Nodes/index.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/* Custom Node Styles */
22
.custom-node {
3+
position: relative;
4+
min-width: 100px;
35
padding: 10px 15px;
46
border: 2px solid #ddd;
57
border-radius: 8px;
68
background: white;
79
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
8-
min-width: 100px;
910
transition: all 0.2s ease;
10-
position: relative;
1111
}
1212

1313
.custom-node:hover {
@@ -22,14 +22,14 @@
2222

2323
/* Node content layout */
2424
.node-content {
25-
text-align: center;
2625
line-height: 1.4;
26+
text-align: center;
2727
}
2828

2929
.node-description {
30-
font-size: 11px;
31-
color: #666;
3230
margin-top: 4px;
31+
color: #666;
32+
font-size: 11px;
3333
font-weight: normal;
3434
}
3535

@@ -57,8 +57,8 @@
5757
/* Responsive adjustments */
5858
@media (max-width: 768px) {
5959
.custom-node {
60-
padding: 8px 12px;
6160
min-width: 80px;
61+
padding: 8px 12px;
6262
}
6363

6464
.node-description {

‎frontend/packages/volto-workflow-manager/src/components/States/State.tsx‎

Lines changed: 68 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import PermissionRolesTab from './Tabs/PermissionRolesTab';
2020
import GroupRolesTab from './Tabs/GroupRolesTab';
2121
import type { GlobalRootState } from '../../types';
2222
import type { StateData, StateProps } from '../../types/state';
23+
import { Label } from 'react-aria-components';
2324

2425
const propertiesSchema = {
2526
title: 'State Properties',
@@ -145,10 +146,14 @@ const State: React.FC<StateProps> = ({
145146

146147
return (
147148
<View>
148-
<Flex direction="column" gap="size-200" marginY="size-300">
149+
<Flex
150+
direction="column"
151+
gap="size-200"
152+
marginY="size-300"
153+
marginX="size-300"
154+
>
149155
<Heading level={3}>Configure a State</Heading>
150156
<Picker
151-
label="Select a state to edit"
152157
placeholder="Choose a state..."
153158
items={statesInfo.data?.states || []}
154159
selectedKey={selectedStateId}
@@ -157,67 +162,68 @@ const State: React.FC<StateProps> = ({
157162
>
158163
{(item) => <Item key={item.id}>{item.title}</Item>}
159164
</Picker>
165+
166+
{selectedStateId && (
167+
<Accordion
168+
defaultExpandedKeys={['properties']}
169+
key={selectedStateId}
170+
aria-label="State Configuration"
171+
>
172+
<Disclosure id="properties">
173+
<DisclosureTitle>Properties</DisclosureTitle>
174+
<DisclosurePanel>
175+
<PropertiesTab
176+
key={`properties-${selectedStateId}`}
177+
data={localStateData?.properties}
178+
schema={propertiesSchema}
179+
onChange={(properties) => handleStateChange({ properties })}
180+
isDisabled={areTabsDisabled}
181+
/>
182+
</DisclosurePanel>
183+
</Disclosure>
184+
<Disclosure id="transitions">
185+
<DisclosureTitle>Transitions</DisclosureTitle>
186+
<DisclosurePanel>
187+
<TransitionsTab
188+
key={`transitions-${selectedStateId}`}
189+
data={localStateData?.transitions}
190+
availableTransitions={transitionsInfo.data?.transitions || []}
191+
onChange={(transitions) => handleStateChange({ transitions })}
192+
isDisabled={areTabsDisabled}
193+
/>
194+
</DisclosurePanel>
195+
</Disclosure>
196+
<Disclosure id="permissions">
197+
<DisclosureTitle>Permission Roles</DisclosureTitle>
198+
<DisclosurePanel>
199+
<PermissionRolesTab
200+
key={`permissions-${selectedStateId}`}
201+
data={localStateData?.permissions}
202+
managedPermissions={
203+
workflow?.context_data?.managed_permissions || []
204+
}
205+
availableRoles={workflow?.context_data?.available_roles || []}
206+
onChange={(permissions) => handleStateChange({ permissions })}
207+
isDisabled={areTabsDisabled}
208+
/>
209+
</DisclosurePanel>
210+
</Disclosure>
211+
<Disclosure id="group-roles">
212+
<DisclosureTitle>Group Roles</DisclosureTitle>
213+
<DisclosurePanel>
214+
<GroupRolesTab
215+
key={`group-roles-${selectedStateId}`}
216+
data={localStateData?.groupRoles}
217+
groups={workflow?.context_data?.groups || []}
218+
availableRoles={workflow?.context_data?.available_roles || []}
219+
onChange={(groupRoles) => handleStateChange({ groupRoles })}
220+
isDisabled={areTabsDisabled}
221+
/>
222+
</DisclosurePanel>
223+
</Disclosure>
224+
</Accordion>
225+
)}
160226
</Flex>
161-
{selectedStateId && (
162-
<Accordion
163-
defaultExpandedKeys={['properties']}
164-
key={selectedStateId}
165-
aria-label="State Configuration"
166-
>
167-
<Disclosure id="properties">
168-
<DisclosureTitle>Properties</DisclosureTitle>
169-
<DisclosurePanel>
170-
<PropertiesTab
171-
key={`properties-${selectedStateId}`}
172-
data={localStateData?.properties}
173-
schema={propertiesSchema}
174-
onChange={(properties) => handleStateChange({ properties })}
175-
isDisabled={areTabsDisabled}
176-
/>
177-
</DisclosurePanel>
178-
</Disclosure>
179-
<Disclosure id="transitions">
180-
<DisclosureTitle>Transitions</DisclosureTitle>
181-
<DisclosurePanel>
182-
<TransitionsTab
183-
key={`transitions-${selectedStateId}`}
184-
data={localStateData?.transitions}
185-
availableTransitions={transitionsInfo.data?.transitions || []}
186-
onChange={(transitions) => handleStateChange({ transitions })}
187-
isDisabled={areTabsDisabled}
188-
/>
189-
</DisclosurePanel>
190-
</Disclosure>
191-
<Disclosure id="permissions">
192-
<DisclosureTitle>Permission Roles</DisclosureTitle>
193-
<DisclosurePanel>
194-
<PermissionRolesTab
195-
key={`permissions-${selectedStateId}`}
196-
data={localStateData?.permissions}
197-
managedPermissions={
198-
workflow?.context_data?.managed_permissions || []
199-
}
200-
availableRoles={workflow?.context_data?.available_roles || []}
201-
onChange={(permissions) => handleStateChange({ permissions })}
202-
isDisabled={areTabsDisabled}
203-
/>
204-
</DisclosurePanel>
205-
</Disclosure>
206-
<Disclosure id="group-roles">
207-
<DisclosureTitle>Group Roles</DisclosureTitle>
208-
<DisclosurePanel>
209-
<GroupRolesTab
210-
key={`group-roles-${selectedStateId}`}
211-
data={localStateData?.groupRoles}
212-
groups={workflow?.context_data?.groups || []}
213-
availableRoles={workflow?.context_data?.available_roles || []}
214-
onChange={(groupRoles) => handleStateChange({ groupRoles })}
215-
isDisabled={areTabsDisabled}
216-
/>
217-
</DisclosurePanel>
218-
</Disclosure>
219-
</Accordion>
220-
)}
221227
</View>
222228
);
223229
};

‎frontend/packages/volto-workflow-manager/src/components/Transitions/Transition.tsx‎

Lines changed: 59 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,12 @@ const Transition: React.FC<TransitionProps> = ({
184184

185185
return (
186186
<View>
187-
<Flex direction="column" gap="size-200" marginY="size-300">
187+
<Flex
188+
direction="column"
189+
gap="size-200"
190+
marginY="size-300"
191+
marginX="size-300"
192+
>
188193
<Heading level={3}>Configure a Transition</Heading>
189194
<Picker
190195
label="Select a transition to edit"
@@ -196,60 +201,60 @@ const Transition: React.FC<TransitionProps> = ({
196201
>
197202
{(item) => <Item key={item.id}>{item.title}</Item>}
198203
</Picker>
199-
</Flex>
200204

201-
{selectedTransitionId && (
202-
<Accordion
203-
defaultExpandedKeys={['properties']}
204-
key={selectedTransitionId}
205-
aria-label="Transition Configuration"
206-
>
207-
<Disclosure id="properties">
208-
<DisclosureTitle>Properties</DisclosureTitle>
209-
<DisclosurePanel>
210-
<PropertiesTab
211-
key={`properties-${selectedTransitionId}`}
212-
data={localTransitionData?.properties}
213-
schema={propertiesSchema}
214-
onChange={(properties) =>
215-
handleTransitionChange({ properties })
216-
}
217-
isDisabled={isTabDisabled}
218-
/>
219-
</DisclosurePanel>
220-
</Disclosure>
221-
<Disclosure id="guards">
222-
<DisclosureTitle>Guard Configuration</DisclosureTitle>
223-
<DisclosurePanel>
224-
<GuardsTab
225-
key={`guards-${selectedTransitionId}`}
226-
data={localTransitionData?.guards}
227-
availableRoles={workflow?.context_data?.available_roles || []}
228-
availableGroups={workflow?.context_data?.groups || []}
229-
availablePermissions={
230-
workflow?.context_data?.managed_permissions || []
231-
}
232-
onChange={(guards) => handleTransitionChange({ guards })}
233-
isDisabled={isTabDisabled}
234-
/>
235-
</DisclosurePanel>
236-
</Disclosure>
237-
<Disclosure id="source-states">
238-
<DisclosureTitle>Source States</DisclosureTitle>
239-
<DisclosurePanel>
240-
<SourceStatesTab
241-
key={`source-states-${selectedTransitionId}`}
242-
data={localTransitionData?.sourceStates}
243-
availableStates={statesInfo.data?.states || []}
244-
onChange={(sourceStates) =>
245-
handleTransitionChange({ sourceStates })
246-
}
247-
isDisabled={isTabDisabled}
248-
/>
249-
</DisclosurePanel>
250-
</Disclosure>
251-
</Accordion>
252-
)}
205+
{selectedTransitionId && (
206+
<Accordion
207+
defaultExpandedKeys={['properties']}
208+
key={selectedTransitionId}
209+
aria-label="Transition Configuration"
210+
>
211+
<Disclosure id="properties">
212+
<DisclosureTitle>Properties</DisclosureTitle>
213+
<DisclosurePanel>
214+
<PropertiesTab
215+
key={`properties-${selectedTransitionId}`}
216+
data={localTransitionData?.properties}
217+
schema={propertiesSchema}
218+
onChange={(properties) =>
219+
handleTransitionChange({ properties })
220+
}
221+
isDisabled={isTabDisabled}
222+
/>
223+
</DisclosurePanel>
224+
</Disclosure>
225+
<Disclosure id="guards">
226+
<DisclosureTitle>Guard Configuration</DisclosureTitle>
227+
<DisclosurePanel>
228+
<GuardsTab
229+
key={`guards-${selectedTransitionId}`}
230+
data={localTransitionData?.guards}
231+
availableRoles={workflow?.context_data?.available_roles || []}
232+
availableGroups={workflow?.context_data?.groups || []}
233+
availablePermissions={
234+
workflow?.context_data?.managed_permissions || []
235+
}
236+
onChange={(guards) => handleTransitionChange({ guards })}
237+
isDisabled={isTabDisabled}
238+
/>
239+
</DisclosurePanel>
240+
</Disclosure>
241+
<Disclosure id="source-states">
242+
<DisclosureTitle>Source States</DisclosureTitle>
243+
<DisclosurePanel>
244+
<SourceStatesTab
245+
key={`source-states-${selectedTransitionId}`}
246+
data={localTransitionData?.sourceStates}
247+
availableStates={statesInfo.data?.states || []}
248+
onChange={(sourceStates) =>
249+
handleTransitionChange({ sourceStates })
250+
}
251+
isDisabled={isTabDisabled}
252+
/>
253+
</DisclosurePanel>
254+
</Disclosure>
255+
</Accordion>
256+
)}
257+
</Flex>
253258
</View>
254259
);
255260
};

‎frontend/packages/volto-workflow-manager/src/theme/workflow.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,4 @@ body.section-controlpanel.section-workflowmanager.is-authenticated.cms-ui.has-to
2525
background-color: transparent !important;
2626
}
2727
}
28-
}
28+
}

0 commit comments

Comments
 (0)