Transition validation 72436

public/cui.js

@@ -55212,22 +55212,25 @@ CUI.ListViewColumnRowMoveHandle = (function(superClass) {
  }
 
  ListViewColumnRowMoveHandle.prototype.setElement = function(cell) {
- var row;
+ var drag_handle, moveTool, ref, row;
  ListViewColumnRowMoveHandle.__super__.setElement.call(this, cell);
  row = this.getRow();
  if (!row.isMovable()) {
  return;
  }
- if (CUI.ListView.defaults.row_move_handle_tooltip) {
+ moveTool = row.getListView().getRowMoveTool({
+ row: row,
+ element: cell
+ });
+ if (moveTool) {
+ drag_handle = (ref = CUI.dom.children(moveTool.element)) != null ? ref[0] : void 0;
+ }
+ if (CUI.ListView.defaults.row_move_handle_tooltip && drag_handle) {
  new CUI.Tooltip({
  text: CUI.ListView.defaults.row_move_handle_tooltip,
- element: cell
+ element: drag_handle
  });
  }
- row.getListView().getRowMoveTool({
- row: row,
- element: cell
- });
  };
 
  ListViewColumnRowMoveHandle.prototype.render = function() {

src/elements/ListView/tools/ListViewColumnRowMoveHandle.coffee

@@ -15,16 +15,18 @@ class CUI.ListViewColumnRowMoveHandle extends CUI.ListViewColumn
 if not row.isMovable()
 return
 
-if CUI.ListView.defaults.row_move_handle_tooltip
-new CUI.Tooltip
-text: CUI.ListView.defaults.row_move_handle_tooltip
-element: cell
-
-
-row.getListView().getRowMoveTool
+moveTool = row.getListView().getRowMoveTool
 row: row
 element: cell
 
+if moveTool
+drag_handle = CUI.dom.children(moveTool.element)?[0]
+
+if CUI.ListView.defaults.row_move_handle_tooltip and drag_handle
+new CUI.Tooltip
+text: CUI.ListView.defaults.row_move_handle_tooltip
+element: drag_handle
+
 return
 
 render: ->

src/scss/themes/fylr/components/_list-view.scss

@@ -27,6 +27,8 @@
 --list-view-selected-row-background: #{$list-view-selected-row-background};
 // hover
 --list-view-hover-row-background: #{$list-view-hover-row-background};
+// invalid
+--list-view-invalid-row-background: #{$danger-bg-light};
 
 
 min-height: 0;
@@ -185,6 +187,29 @@
 background-color: var(--list-view-selected-row-background);
 }
 }
+
+&.cui-row-invalid {
+position: relative;
+
+> .cui-label-validation {
+position: absolute;
+top: $spacer-sm;
+left: $spacer-sm;
+z-index: 1;
+}
+
+> .cui-lv-tr > .cui-lv-row-move-handle-column > .cui-drag-handle-row {
+display: none;
+}
+}
+
+&.cui-row-invalid,
+&.cui-row-invalid:hover,
+&.cui-row-invalid:focus {
+> .cui-lv-tr {
+background-color: var(--list-view-invalid-row-background);
+}
+}
 }
 
 // * Special Header Row
@@ -448,6 +473,8 @@
 }
 
 .cui-lv-row-move-handle-column {
+cursor: default; // reset .cui-drag-drop-select-draggable
+
 &::after {
 display: none;
 }
@@ -464,13 +491,12 @@
 }
 
 .cui-list-view-row-movable & {
-cursor: -webkit-grab;
-cursor: grab;
-
 .cui-drag-handle-row {
 display: block;
 margin: 0;
 margin-top: 0.45em;
+cursor: -webkit-grab;
+cursor: grab;
 }
 }
 }

src/scss/themes/ng/body.scss

@@ -2124,6 +2124,10 @@ a[role="button"].cui-button-appearance-link {
 &[data-type="null"] {
 color: #0184bb;
 }
+
+&.cui-label-danger {
+color: $error-color;
+}
 }
 
 // Label: Markdown
@@ -2528,7 +2532,7 @@ a[role="button"].cui-button-appearance-link {
 &.cui-input-invalid {
 input {
 border-color: $error-color;
-background: transparentize($error-color, 0.85);
+background: $error-color-background;
 }
 }
 }
@@ -4116,6 +4120,29 @@ $layer-sizes: (
 &.cui-lv-tree-node--is-branch {
 @include clickable;
 }
+
+&.cui-row-invalid {
+position: relative;
+
+> .cui-label-validation {
+position: absolute;
+top: 6px;
+left: 6px;
+z-index: 1;
+}
+
+> .cui-lv-tr > .cui-lv-row-move-handle-column > .cui-drag-handle-row {
+display: none;
+}
+}
+
+&.cui-row-invalid,
+&.cui-row-invalid:hover,
+&.cui-row-invalid:focus {
+> .cui-lv-tr {
+background-color: $error-color-background;
+}
+}
 }
 
 .cui-lv-tr {

src/scss/themes/ng/header.scss

@@ -136,6 +136,7 @@ $row-move-handle-width: (0.5 * $padding) + $table-data-padding*2+2;
 $tree-node-handle-width: 14px;
 
 $error-color: hsl(10,90%,52%);
+$error-color-background: transparentize($error-color, 0.85);
 $on-error-color: white;
 $neutral-color: hsl(48,100%,58%);
 $positive-color: hsl(100,69%,50%);