Gsoc workflow experiment

administrator/components/com_workflow/layouts/toolbar/redo.php

@@ -13,13 +13,19 @@
 use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
-Factory::getDocument()->getWebAssetManager()
+Factory::getApplication()->getDocument()->getWebAssetManager()
     ->useScript('webcomponent.toolbar-button');
 
 ?>
 <joomla-toolbar-button>
-    <button class="btn btn-info action-button" onclick="WorkflowGraph.Event.fire('onClickRedoWorkflow');" tabindex="0">
+    <button id="redo-workflow" class="btn btn-info action-button" tabindex="0">
         <span class="icon-redo icon-fw" aria-hidden="true"></span>
         <?php echo Text::_('COM_WORKFLOW_REDO'); ?>
     </button>
 </joomla-toolbar-button>
+
+<script>
+    document.getElementById('redo-workflow')?.addEventListener('click', () => {
+        WorkflowGraph.Event.fire('onClickRedoWorkflow');
+    });
+</script>

administrator/components/com_workflow/layouts/toolbar/shortcuts.php

@@ -13,7 +13,7 @@
 use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
-Factory::getDocument()->getWebAssetManager()
+Factory::getApplication()->getDocument()->getWebAssetManager()
     ->useScript('webcomponent.toolbar-button');
 
 $shortcutsPopupOptions = json_encode([

administrator/components/com_workflow/layouts/toolbar/undo.php

@@ -13,13 +13,21 @@
 use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
-Factory::getDocument()->getWebAssetManager()
+Factory::getApplication()->getDocument()->getWebAssetManager()
     ->useScript('webcomponent.toolbar-button');
 
 ?>
 <joomla-toolbar-button>
-    <button class="btn btn-info action-button" onclick="WorkflowGraph.Event.fire('onClickUndoWorkflow');" tabindex="0">
+    <button id="undo-workflow" class="btn btn-info action-button" tabindex="0">
         <span class="icon-undo-2 icon-fw" aria-hidden="true"></span>
         <?php echo Text::_('COM_WORKFLOW_UNDO'); ?>
     </button>
 </joomla-toolbar-button>
+
+
+<script>
+    document.getElementById('undo-workflow')?.addEventListener('click', () => {
+        WorkflowGraph.Event.fire('onClickUndoWorkflow');
+    });
+</script>
+

administrator/components/com_workflow/resources/scripts/components/App.vue

@@ -1,13 +1,11 @@
 <template>
   <div
     id="workflow-app"
-    class="workflow-app-container d-flex flex-column flex-grow-1 min-vh-80"
-    role="application"
-    aria-label="appTitle"
+    class="d-flex flex-column flex-grow-1 min-vh-80"
   >
     <div
+      id="workflow-title"
       class="d-flex flex-column flex-shrink-0"
-      role="banner"
     >
       <WorkflowTitlebar
         :save-status="saveStatus"
@@ -17,8 +15,6 @@
       <div
         id="main-canvas"
         class="flex-grow-1 position-relative"
-        role="main"
-        aria-labelledby="workflow-heading"
       >
         <WorkflowCanvas
           ref="canvas"
@@ -51,10 +47,10 @@ function handleCanvasFocus() {
 onMounted(() => {
   const { workflowId: idFromOpts = null } = Joomla.getOptions('com_workflow', {});
   const idFromURL = parseInt(new URL(window.location.href).searchParams.get('id'), 10);
-  const workflowIdFinal = idFromOpts || idFromURL;
+  const currentWorkflowId = idFromOpts || idFromURL;
 
-  if (workflowIdFinal !== null && !Number.isNaN(workflowIdFinal)) {
-    store.dispatch('loadWorkflow', workflowIdFinal);
+  if (currentWorkflowId !== null && !Number.isNaN(currentWorkflowId)) {
+    store.dispatch('loadWorkflow', currentWorkflowId);
   } else {
     throw new Error('COM_WORKFLOW_GRAPH_ERROR_INVALID_ID');
   }

administrator/components/com_workflow/resources/scripts/components/Titlebar.vue

@@ -1,60 +1,51 @@
 <template>
   <section
-    class="workflow-graph-titlebar d-flex flex-wrap align-items-center justify-content-between"
+    class="d-flex flex-wrap align-items-center justify-content-between"
     aria-labelledby="workflow-title"
-    role="region"
   >
     <div class="col-md-6 d-flex flex-column">
-      <h2
-        id="workflow-title"
-        class="mb-2"
-      >
+      <h2 class="mb-2">
         {{ translate(workflow?.title) }}
       </h2>
       <dl
         class="d-flex align-items-center flex-wrap mb-0"
         aria-label="workflow details"
       >
-        <div class="me-3 mb-1 d-flex align-items-center">
-          <dt class="visually-hidden">
-            {{ translate('COM_WORKFLOW_GRAPH_STATUS') }}
-          </dt>
-          <dd>
-            <span
-              class="badge"
-              :class="workflow.published ? 'bg-success text-white' : 'bg-warning text-dark'"
-              role="status"
-            >
-              {{ workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
-            </span>
-          </dd>
-        </div>
-        <div class="me-3 mb-1 d-flex align-items-center">
-          <dt class="visually-hidden">
-            {{ translate('COM_WORKFLOW_GRAPH_STAGE_COUNT') }}
-          </dt>
-          <dd>
-            {{ stagesCount }} {{ stagesCount === 1 ? translate('COM_WORKFLOW_GRAPH_STAGE') : translate('COM_WORKFLOW_GRAPH_STAGES') }}
-          </dd>
-        </div>
-        <div class="me-3 mb-1 d-flex align-items-center">
-          <dt class="visually-hidden">
-            {{ translate('COM_WORKFLOW_GRAPH_TRANSITION_COUNT') }}
-          </dt>
-          <dd>
-            {{ transitionsCount }} {{ transitionsCount === 1 ? translate('COM_WORKFLOW_GRAPH_TRANSITION') :
-              translate('COM_WORKFLOW_GRAPH_TRANSITIONS') }}
-          </dd>
-        </div>
+        <dt class="visually-hidden">
+          {{ sprintf('COM_WORKFLOW_GRAPH_STATUS', workflow.published ? 'COM_WORKFLOW_GRAPH_ENABLED' : 'COM_WORKFLOW_GRAPH_DISABLED') }}
+        </dt>
+        <dd class="me-3 mb-1 d-flex">
+          <span
+            class="badge"
+            :class="workflow.published ? 'bg-success' : 'bg-warning'"
+            role="status"
+          >
+            {{ workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
+          </span>
+        </dd>
+
+        <dt class="visually-hidden">
+          {{ sprintf('COM_WORKFLOW_GRAPH_STAGE_COUNT', stagesCount) }}
+        </dt>
+        <dd class="me-3 mb-1 d-flex">
+          {{ stagesCount }} {{ stagesCount === 1 ? translate('COM_WORKFLOW_GRAPH_STAGE') : translate('COM_WORKFLOW_GRAPH_STAGES') }}
+        </dd>
+
+        <dt class="visually-hidden">
+          {{ sprintf('COM_WORKFLOW_GRAPH_TRANSITION_COUNT', transitionsCount) }}
+        </dt>
+        <dd class="me-3 mb-1 d-flex">
+          {{ transitionsCount }} {{ transitionsCount === 1 ? translate('COM_WORKFLOW_GRAPH_TRANSITION')
+            : translate('COM_WORKFLOW_GRAPH_TRANSITIONS') }}
+        </dd>
       </dl>
     </div>
     <div
       id="save-message"
+      class="mb-2 fw-bold"
       :class="{
         'text-warning': saveStatus.value === 'unsaved',
-        'text-muted': saveStatus.value !== 'unsaved'
       }"
-      class="mb-2 text-primary fw-bold"
     >
       {{
         saveStatus.value === 'unsaved'

administrator/components/com_workflow/resources/scripts/components/canvas/ControlsPanel.vue

@@ -29,21 +29,6 @@
       />
       {{ translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION') }}
     </button>
-
-    <!--<button
-          :class="['btn toolbar-button', isTransitionMode ? 'btn-success' : 'btn-primary', 'd-flex', 'align-items-center', 'gap-1']"
-          tabindex="0"
-          :aria-pressed="isTransitionMode"
-          :aria-label="isTransitionMode ? translate('COM_WORKFLOW_GRAPH_EXIT_TRANSITION_MODE')
-            : translate('COM_WORKFLOW_GRAPH_ENTER_TRANSITION_MODE')"
-          @click="$emit('toggle-transition-mode')"
-        >
-          <span
-            :class="isTransitionMode ? 'icon icon-toggle-on' : 'icon icon-toggle-off'"
-            aria-hidden="true"
-          />
-          {{ isTransitionMode ? translate('COM_WORKFLOW_GRAPH_EXIT_TRANSITION_MODE') : translate('COM_WORKFLOW_GRAPH_ENTER_TRANSITION_MODE') }}
-        </button> -->
   </Panel>
 </template>
 
@@ -53,12 +38,6 @@ import { Panel } from '@vue-flow/core';
 export default {
   name: 'ControlsPanel',
   components: { Panel },
-  props: {
-    isTransitionMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['add-stage', 'add-transition', 'toggle-transition-mode'],
+  emits: ['add-stage', 'add-transition'],
 };
 </script>

administrator/components/com_workflow/resources/scripts/components/canvas/CustomControls.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="controlsContainer"
-    class="custom-controls"
+    class="custom-controls z-10"
     tabindex="0"
   >
     <button