Workflow Commons 3.12.0

ReleaseNotes.md

@@ -1,3 +1,11 @@
+## Release 3.12.0
+
+* We upgraded the module to Mendix 10.17.0 
+* We updated Data Widgets module compatibility to v2.28.1
+* We fixed an issue where the `Reason` field was not displayed for `Paused` workflow instances after locking a workflow definition. We updated the conditional visibility to show the `Reason` field if available, regardless of the workflow state.
+* We fixed an issue where switching between the `Minimal`, `Default` and `All` views did not work correctly for the Audit Trail.
+* We added compatibility for changes in the System module that were introduced with Mendix 10.17.0
+
 ## Release 3.11.0
 
 * We added 'Manage task assignments' page. This page provides the workflow administrator the ability to manage the assignment and targeting of user tasks based on a selected user. This is typically done when a user is leaving the organization or a group/role.

Source/themesource/datawidgets/.version

@@ -1 +1 @@
-2.26.0
+2.28.1

Source/themesource/datawidgets/web/_datagrid-filters.scss

@@ -88,7 +88,7 @@ $dg-item-min-height: 32px;
 
                 &.filter-selected {
                     background-color: var(--gray-lighter, $dg-hover-color);
-                    color: var(--brand-primary, $brand-primary);
+                    color: var(--brand-primary, $dg-brand-primary);
                 }
 
                 &:hover,
@@ -122,7 +122,7 @@ $dg-item-min-height: 32px;
 
         &.filter-selected {
             background-color: var(--gray-lighter, $dg-hover-color);
-            color: var(--brand-primary, $brand-primary);
+            color: var(--brand-primary, $dg-brand-primary);
         }
 
         &:hover,
@@ -153,7 +153,7 @@ $dg-item-min-height: 32px;
 
         &.filter-selected {
             background-color: var(--gray-lighter, $dg-hover-color);
-            color: var(--brand-primary, $brand-primary);
+            color: var(--brand-primary, $dg-brand-primary);
         }
 
         &:hover,
@@ -254,7 +254,7 @@ $dg-item-min-height: 32px;
 
             &.filter-selected {
                 background-color: var(--gray-lighter, $dg-hover-color);
-                color: var(--brand-primary, $brand-primary);
+                color: var(--brand-primary, $dg-brand-primary);
             }
 
             &:hover,

Source/themesource/datawidgets/web/_datagrid.scss

@@ -1,3 +1,7 @@
+@import "export-alert";
+@import "export-progress";
+@import "pseudo-modal";
+
 $dg-background-color: #fff;
 $dg-icon-color: #606671;
 $dg-icon-size: 14px;
@@ -16,6 +20,7 @@ $dg-grid-border-color: #ced0d3;
 $dg-brand-primary: #264ae5;
 $dg-brand-light: #e6eaff;
 $dg-grid-selected-row-background: $dg-brand-light;
+$dg-skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%);
 
 .table {
     position: relative;
@@ -399,17 +404,126 @@ $dg-grid-selected-row-background: $dg-brand-light;
 }
 
 .widget-datagrid {
+    position: relative;
+
     &.widget-datagrid-selection-method-click {
         .tr.tr-selected .td {
             background-color: $dg-grid-selected-row-background;
         }
     }
+
+    .th.widget-datagrid-col-select,
+    .td.widget-datagrid-col-select {
+        align-items: center;
+    }
+
+    &-exporting {
+        .widget-datagrid-top-bar,
+        .widget-datagrid-header,
+        .widget-datagrid-content,
+        .widget-datagrid-footer {
+            visibility: hidden;
+
+            * {
+                transition: unset;
+            }
+        }
+    }
+
+    &-col-select input:focus-visible {
+        outline-offset: 0;
+    }
+
+    &-content {
+        overflow-y: auto;
+    }
+
+    &-loader-container {
+        align-items: center;
+        background-color: rgba(255, 255, 255, 1);
+        display: flex;
+        height: 400px;
+        justify-content: center;
+    }
+
+    &-skeleton,
+    &-spinner {
+        align-content: center;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        overflow: hidden;
+    }
+
+    &-skeleton {
+        padding: 6px var(--dropdown-outer-padding, 10px);
+
+        &-loader {
+            animation: skeleton-loading 1s linear infinite alternate;
+            background: var(--dg-skeleton-background, $dg-skeleton-background);
+            background-size: 300% 100%;
+            border-radius: 4px;
+            height: 16px;
+            width: 148px;
+
+            &-small {
+                margin-right: 8px;
+                width: 16px;
+            }
+        }
+    }
+
+    &-spinner {
+        justify-content: center;
+        width: 100%;
+
+        &-margin {
+            margin: 52px 0;
+        }
+
+        &-loader {
+            --widget-combobox-spinner-loader: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+            animation: rotate 1s infinite linear;
+            aspect-ratio: 1;
+            background: var(--brand-primary, $dg-brand-primary);
+            border-radius: 50%;
+            mask: var(--widget-combobox-spinner-loader);
+            mask-composite: subtract;
+
+            &-large {
+                height: 48px;
+                padding: 7px;
+                width: 48px;
+            }
+            &-medium {
+                height: 24px;
+                padding: 3.5px;
+                width: 24px;
+            }
+
+            &-small {
+                height: 16px;
+                padding: 2.3px;
+                width: 16px;
+            }
+        }
+    }
 }
 
-.widget-datagrid-col-select input:focus-visible {
-    outline-offset: 0;
+.widget-datagrid .widget-datagrid-load-more {
+    display: block !important;
+    margin: 0 auto;
 }
 
-.widget-datagrid-content {
-    overflow-y: auto;
+@keyframes skeleton-loading {
+    0% {
+        background-position: right;
+    }
+}
+
+@keyframes rotate {
+    to {
+        transform: rotate(1turn);
+    }
 }

Source/themesource/datawidgets/web/_export-alert.scss

@@ -0,0 +1,45 @@
+$brand-primary: #264ae5 !default;
+
+.widget-datagrid-export-alert {
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 4px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    display: flex;
+    flex-direction: column;
+    padding: 54px;
+    min-width: 200px;
+    max-width: 378px;
+    width: 100%;
+    position: relative;
+
+    &-cancel {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+
+        // TODO: Hover styles
+        &.btn {
+            display: flex;
+            padding: 4px;
+            &:focus-visible {
+                outline: 1px solid $brand-primary;
+            }
+        }
+    }
+
+    &-message {
+        color: rgba(38, 74, 229, 1);
+        font-size: 18px;
+        font-weight: 700;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &-failed {
+        .widget-datagrid-export-progress-indicator {
+            background-color: rgba(227, 63, 78, 1);
+        }
+    }
+}

Source/themesource/datawidgets/web/_export-progress.scss

@@ -0,0 +1,37 @@
+.widget-datagrid-export-progress {
+    align-items: center;
+    background-color: rgba(240, 241, 242, 1);
+    border-radius: 4px;
+    display: flex;
+    height: 18px;
+    overflow: hidden;
+    position: relative;
+    transform: translateZ(0);
+    width: 100%;
+
+    &-indicator {
+        background-color: rgba(38, 74, 229, 1);
+        border-radius: 4px;
+        height: 17px;
+        transition: transform 100ms cubic-bezier(0.65, 0, 0.35, 1);
+        width: 100%;
+    }
+
+    &-indicator-indeterminate {
+        animation: indeterminateAnimation 1s infinite linear;
+        transform-origin: 0% 50%;
+        transition: none;
+    }
+}
+
+@keyframes indeterminateAnimation {
+    0% {
+        transform: translateX(0) scaleX(0);
+    }
+    40% {
+        transform: translateX(0) scaleX(0.4);
+    }
+    100% {
+        transform: translateX(100%) scaleX(0.5);
+    }
+}

Source/themesource/datawidgets/web/_pseudo-modal.scss

@@ -0,0 +1,33 @@
+.widget-datagrid-modal {
+    &-overlay {
+        animation: fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
+        background-color: rgba(128, 128, 128, 0.5);
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 50;
+    }
+
+    &-main {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 55;
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}