Refactor Process Builder UI for Enhanced Clarity and Usability
- Removed the temporary debug button from the process builder interface to streamline the user experience. - Adjusted layout and spacing for edge and node headers to improve visual organization and readability. - Enhanced the display of node and edge IDs with break-word support for better handling of long text. - Updated action button icons to ensure consistent sizing and alignment across the interface. - Improved overflow handling in scrollable content areas to prevent horizontal scrolling issues.
This commit is contained in:
parent
ed00664882
commit
8f56505af1
@ -2940,17 +2940,6 @@ const sendToBack = () => {
|
||||
<span class="hidden md:inline">Paste</span>
|
||||
</RsButton>
|
||||
|
||||
<!-- Debug button (temporary) -->
|
||||
<RsButton
|
||||
@click="debugSelection"
|
||||
variant="tertiary"
|
||||
size="sm"
|
||||
class="ml-1"
|
||||
title="Debug selection state"
|
||||
>
|
||||
<Icon name="material-symbols:bug-report" class="w-4 h-4" />
|
||||
</RsButton>
|
||||
|
||||
<!-- Selection indicator -->
|
||||
<div v-if="currentSelectionInfo && !clipboardInfo" class="ml-2 px-2 py-1 bg-green-100 text-green-700 text-xs rounded-md border border-green-200 hidden sm:block" :title="`Selected: ${currentSelectionInfo}. Press Ctrl+C to copy.`">
|
||||
<Icon name="material-symbols:select-all" class="w-3 h-3 mr-1" />
|
||||
@ -3122,7 +3111,7 @@ const sendToBack = () => {
|
||||
<Icon name="material-symbols:close" class="w-4 h-4 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<!-- Show variable manager when no node is selected -->
|
||||
<VariableManager v-if="!selectedNodeData && !selectedEdgeData" :key="`variables-${variablesUpdateKey}`" />
|
||||
|
||||
@ -3130,17 +3119,24 @@ const sendToBack = () => {
|
||||
<div v-else-if="selectedEdgeData" class="flex flex-col h-full">
|
||||
<!-- Edge Header -->
|
||||
<div class="p-4 border-b border-gray-200 bg-gray-50">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="space-y-3">
|
||||
<!-- Row 1: Title with Icon -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-medium bg-blue-500">
|
||||
<div class="w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-medium bg-blue-500 flex-shrink-0">
|
||||
<Icon name="material-symbols:timeline" class="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900">Connection</h3>
|
||||
<p class="text-xs text-gray-500">{{ selectedEdgeData.id }}</p>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h3 class="text-sm font-semibold text-gray-900 break-words">Connection</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
<!-- Row 2: Edge ID -->
|
||||
<div class="flex items-center space-y-0">
|
||||
<p class="text-xs text-gray-500 break-all">{{ selectedEdgeData.id }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Row 3: Action Buttons -->
|
||||
<div class="flex items-center">
|
||||
<RsButton
|
||||
@click="copySelectedElements"
|
||||
variant="secondary-text"
|
||||
@ -3149,7 +3145,7 @@ const sendToBack = () => {
|
||||
:title="`Copy Edge (Ctrl+C)${currentSelectionInfo ? ' - ' + currentSelectionInfo : clipboardInfo ? ' - Current: ' + clipboardInfo : ''}`"
|
||||
class="modern-icon-btn"
|
||||
>
|
||||
<Icon name="material-symbols:content-copy" />
|
||||
<Icon name="material-symbols:content-copy" class="w-4 h-4" />
|
||||
</RsButton>
|
||||
<RsButton
|
||||
@click="deleteEdge"
|
||||
@ -3159,14 +3155,14 @@ const sendToBack = () => {
|
||||
:title="'Delete Edge'"
|
||||
class="modern-icon-btn"
|
||||
>
|
||||
<Icon name="material-symbols:delete" />
|
||||
<Icon name="material-symbols:delete" class="w-4 h-4" />
|
||||
</RsButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edge Properties -->
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<div class="p-4 space-y-4">
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-700 mb-3 flex items-center">
|
||||
@ -3210,32 +3206,28 @@ const sendToBack = () => {
|
||||
<div v-else class="flex flex-col h-full">
|
||||
<!-- Node/Shape Header -->
|
||||
<div class="p-4 border-b border-gray-200 bg-gray-50">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="space-y-1">
|
||||
<!-- Row 1: Title with Icon -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-medium"
|
||||
<div class="w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-medium flex-shrink-0"
|
||||
:style="{ backgroundColor: nodeBorderColor }">
|
||||
<Icon :name="`material-symbols:${getNodeIcon(selectedNodeData.type)}`"
|
||||
class="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900 capitalize">
|
||||
<div class="min-w-0 flex-1">
|
||||
<h3 class="text-sm font-semibold text-gray-900 capitalize break-words">
|
||||
{{ selectedNodeData.data?.isShape ? 'Shape' : 'Node' }}: {{ selectedNodeData.type.replace('-', ' ') }}
|
||||
</h3>
|
||||
<p class="text-xs text-gray-500">{{ selectedNodeData.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Node ID -->
|
||||
<div class="flex items-center">
|
||||
<p class="text-xs text-gray-500 break-all">{{ selectedNodeData.id }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Row 3: Action Buttons -->
|
||||
<div v-if="canShowNodeActions" class="flex items-center gap-2">
|
||||
<RsButton
|
||||
@click="copySelectedElements"
|
||||
variant="secondary-text"
|
||||
size="sm"
|
||||
icon
|
||||
:disabled="!canCopy"
|
||||
:title="`Copy Node (Ctrl+C)${currentSelectionInfo ? ' - ' + currentSelectionInfo : clipboardInfo ? ' - Current: ' + clipboardInfo : ''}`"
|
||||
class="modern-icon-btn"
|
||||
>
|
||||
<Icon name="material-symbols:content-copy" />
|
||||
</RsButton>
|
||||
<RsButton
|
||||
@click="duplicateNode"
|
||||
variant="secondary-text"
|
||||
@ -3244,7 +3236,7 @@ const sendToBack = () => {
|
||||
:title="'Duplicate Node'"
|
||||
class="modern-icon-btn"
|
||||
>
|
||||
<Icon name="material-symbols:content-copy-outline" />
|
||||
<Icon name="material-symbols:content-copy-outline" class="w-5 h-5" />
|
||||
</RsButton>
|
||||
<RsButton
|
||||
@click="deleteNode"
|
||||
@ -3254,18 +3246,18 @@ const sendToBack = () => {
|
||||
:title="'Delete Node'"
|
||||
class="modern-icon-btn"
|
||||
>
|
||||
<Icon name="material-symbols:delete" />
|
||||
<Icon name="material-symbols:delete" class="w-5 h-5" />
|
||||
</RsButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable Content -->
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<!-- Basic Properties Section -->
|
||||
<div class="p-4 space-y-4">
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-700 mb-3 flex items-center">
|
||||
<h4 v-if="!selectedNodeData.data?.isShape || selectedNodeData.type === 'text-annotation'" class="text-sm font-medium text-gray-700 mb-3 flex items-center">
|
||||
<Icon name="material-symbols:edit" class="w-4 h-4 mr-2" />
|
||||
Basic Properties
|
||||
</h4>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user