Refactor Navigation and Form/Process Builder UI for Improved User Experience
- Removed redundant button elements for Templates and History from the form and process builder pages to streamline the interface. - Consolidated action buttons into dropdown menus for better organization and accessibility. - Enhanced visual hierarchy by adding section headers for Form Actions and Process Actions in dropdowns, improving clarity for users. - Updated styles for dropdown menus to ensure consistent appearance and interaction across different screen sizes.
This commit is contained in:
parent
c4a143bb2d
commit
0060ad38b7
@ -45,54 +45,4 @@ export default [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Execute & Monitor",
|
||||
description: "Run processes and track their progress",
|
||||
child: [
|
||||
{
|
||||
title: "Process Execution",
|
||||
icon: "material-symbols:play-circle",
|
||||
child: [
|
||||
{
|
||||
title: "Execution Dashboard",
|
||||
path: "/execution",
|
||||
child: [],
|
||||
meta: {
|
||||
description: "Monitor active processes and performance metrics",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Start New Process",
|
||||
path: "/execution/new-case",
|
||||
child: [],
|
||||
meta: {
|
||||
description: "Initiate a new process instance",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Task Management",
|
||||
icon: "material-symbols:task",
|
||||
child: [
|
||||
{
|
||||
title: "My Tasks",
|
||||
path: "/execution/inbox",
|
||||
child: [],
|
||||
meta: {
|
||||
description: "View and complete assigned tasks",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Process History",
|
||||
path: "/execution/history",
|
||||
child: [],
|
||||
meta: {
|
||||
description: "Review completed processes and audit trails",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -61,24 +61,7 @@
|
||||
</RsButton>
|
||||
</div>
|
||||
|
||||
<!-- Secondary Action Group -->
|
||||
<div v-if="!isPreview" class="mr-1 md:mr-2 border-r border-gray-200 pr-1 md:pr-2 hidden md:block">
|
||||
<RsButton @click="showTemplatesModal = true" variant="secondary" size="sm" class="mr-1 md:mr-2">
|
||||
<Icon name="material-symbols:description-outline" class="mr-0 md:mr-1" />
|
||||
<span class="hidden lg:inline">Templates</span>
|
||||
</RsButton>
|
||||
|
||||
<!-- Form History button - only show if form is saved -->
|
||||
<RsButton
|
||||
v-if="formStore.currentFormId"
|
||||
@click="showFormHistoryModal = true"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
>
|
||||
<Icon name="material-symbols:history" class="mr-0 md:mr-1" />
|
||||
<span class="hidden lg:inline">History</span>
|
||||
</RsButton>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- More Actions Dropdown -->
|
||||
<div v-if="!isPreview" class="relative">
|
||||
@ -87,12 +70,29 @@
|
||||
</RsButton>
|
||||
|
||||
<div v-if="showDropdown" class="dropdown-menu absolute right-0 mt-2 bg-white rounded shadow-lg py-1 z-10 w-48 text-gray-800">
|
||||
<button @click="showFormSettings = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-50 flex items-center transition-colors">
|
||||
<Icon name="material-symbols:code" class="mr-3 w-4 h-4 text-gray-500" />
|
||||
<!-- Form Actions -->
|
||||
<div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide">
|
||||
Form Actions
|
||||
</div>
|
||||
<button @click="showTemplatesModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
|
||||
<Icon name="material-symbols:description-outline" class="mr-2 w-4 h-4" />
|
||||
<span>Templates</span>
|
||||
</button>
|
||||
<button v-if="formStore.currentFormId" @click="showFormHistoryModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
|
||||
<Icon name="material-symbols:history" class="mr-2 w-4 h-4" />
|
||||
<span>History</span>
|
||||
</button>
|
||||
|
||||
<!-- Settings -->
|
||||
<div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide mt-2">
|
||||
Settings
|
||||
</div>
|
||||
<button @click="showFormSettings = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
|
||||
<Icon name="material-symbols:code" class="mr-2 w-4 h-4" />
|
||||
<span>Form Settings</span>
|
||||
</button>
|
||||
<button @click="navigateToManage(); showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-50 flex items-center transition-colors">
|
||||
<Icon name="material-symbols:settings" class="mr-3 w-4 h-4 text-gray-500" />
|
||||
<button @click="navigateToManage(); showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
|
||||
<Icon name="material-symbols:settings" class="mr-2 w-4 h-4" />
|
||||
<span>Manage Forms</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -2334,29 +2334,7 @@ const sendToBack = () => {
|
||||
</RsButton>
|
||||
</div>
|
||||
|
||||
<!-- Templates button - Hidden on mobile -->
|
||||
<div class="mr-1 md:mr-2 border-r border-gray-200 pr-1 md:pr-2 hidden md:block">
|
||||
<RsButton @click="showTemplatesModal = true" variant="secondary" size="sm" :disabled="!hasCurrentProcess">
|
||||
<Icon name="material-symbols:description-outline" class="mr-0 md:mr-1" />
|
||||
<span class="hidden lg:inline">Templates</span>
|
||||
</RsButton>
|
||||
</div>
|
||||
|
||||
<!-- Process History button - Hidden on mobile, only show if process is saved -->
|
||||
<div v-if="processStore.currentProcess && processStore.currentProcess.id" class="mr-1 md:mr-2 border-r border-gray-200 pr-1 md:pr-2 hidden md:block">
|
||||
<RsButton @click="showProcessHistoryModal = true" variant="secondary" size="sm">
|
||||
<Icon name="material-symbols:history" class="mr-0 md:mr-1" />
|
||||
<span class="hidden lg:inline">History</span>
|
||||
</RsButton>
|
||||
</div>
|
||||
|
||||
<!-- Export button - Hidden on mobile -->
|
||||
<div class="mr-1 md:mr-2 border-r border-gray-200 pr-1 md:pr-2 hidden md:block">
|
||||
<RsButton @click="showExportModal = true" variant="secondary" size="sm" :disabled="!hasCurrentProcess">
|
||||
<Icon name="material-symbols:download" class="mr-0 md:mr-1" />
|
||||
<span class="hidden lg:inline">Export</span>
|
||||
</RsButton>
|
||||
</div>
|
||||
|
||||
<!-- Secondary actions -->
|
||||
<div class="flex items-center">
|
||||
@ -2366,20 +2344,26 @@ const sendToBack = () => {
|
||||
</RsButton>
|
||||
|
||||
<div v-if="showDropdown" class="dropdown-menu absolute right-0 mt-2 bg-white rounded shadow-lg py-1 z-10 w-48 text-gray-800">
|
||||
<!-- Mobile-only actions -->
|
||||
<div v-if="isMobile" class="md:hidden border-b border-gray-200 pb-1 mb-1">
|
||||
<button @click="showTemplatesModal = true; showDropdown = false" :disabled="!hasCurrentProcess" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center disabled:opacity-50">
|
||||
<Icon name="material-symbols:description-outline" class="mr-2 w-4 h-4" />
|
||||
<span>Templates</span>
|
||||
</button>
|
||||
<button v-if="processStore.currentProcess && processStore.currentProcess.id" @click="showProcessHistoryModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
|
||||
<Icon name="material-symbols:history" class="mr-2 w-4 h-4" />
|
||||
<span>History</span>
|
||||
</button>
|
||||
<button @click="showExportModal = true; showDropdown = false" :disabled="!hasCurrentProcess" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center disabled:opacity-50">
|
||||
<Icon name="material-symbols:download" class="mr-2 w-4 h-4" />
|
||||
<span>Export</span>
|
||||
</button>
|
||||
<!-- Process Actions -->
|
||||
<div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide">
|
||||
Process Actions
|
||||
</div>
|
||||
<button @click="showTemplatesModal = true; showDropdown = false" :disabled="!hasCurrentProcess" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center disabled:opacity-50">
|
||||
<Icon name="material-symbols:description-outline" class="mr-2 w-4 h-4" />
|
||||
<span>Templates</span>
|
||||
</button>
|
||||
<button v-if="processStore.currentProcess && processStore.currentProcess.id" @click="showProcessHistoryModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
|
||||
<Icon name="material-symbols:history" class="mr-2 w-4 h-4" />
|
||||
<span>History</span>
|
||||
</button>
|
||||
<button @click="showExportModal = true; showDropdown = false" :disabled="!hasCurrentProcess" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center disabled:opacity-50">
|
||||
<Icon name="material-symbols:download" class="mr-2 w-4 h-4" />
|
||||
<span>Export</span>
|
||||
</button>
|
||||
|
||||
<!-- Settings -->
|
||||
<div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide mt-2">
|
||||
Settings
|
||||
</div>
|
||||
<button @click="showProcessSettings = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
|
||||
<Icon name="material-symbols:tune" class="mr-2 w-4 h-4" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user