feat(decision-table-head): rework decision table head

* Only one row for column labels. * Input/output context menu extended with type ref. * Moved "add column" button to the right edge of column group. * Added input/output clauses. * Moved drag'n'drop handle to top right corner. Closes #498 Closes #499
bpmn-io · May 19, 2020 · d0b08cb · d0b08cb
1 parent af24409
commit d0b08cb
Show file tree

Hide file tree

Showing 22 changed files with 288 additions and 502 deletions.
diff --git a/packages/dmn-js-decision-table/assets/css/dmn-js-decision-table-controls.css b/packages/dmn-js-decision-table/assets/css/dmn-js-decision-table-controls.css
@@ -153,8 +153,8 @@
 
 .dmn-decision-table-container th .dmn-icon-drag {
   position: absolute;
-  left: 4px;
-  top: 50%;
+  right: 4px;
+  top: 10px;
   transform: translateY(-50%);
 }
 

diff --git a/packages/dmn-js-decision-table/assets/css/dmn-js-decision-table.css b/packages/dmn-js-decision-table/assets/css/dmn-js-decision-table.css
@@ -5,7 +5,6 @@
 }
 
 .dmn-decision-table-container .input-cell .input-label,
-.dmn-decision-table-container .input-cell .input-expression,
 .dmn-decision-table-container .input-cell .output-label,
 .dmn-decision-table-container .input-cell .output-name {
   display: block;
@@ -15,26 +14,6 @@
   box-sizing: border-box;
 }
 
-/** actionable icon */
-.dmn-decision-table-container .action-icon {
-  border-radius: 2px;
-  color: #52b415;
-  margin-left: 5px;
-}
-
-.dmn-decision-table-container .action-icon:before {
-  margin-left: .1em;
-  margin-right: .1em;
-}
-
-.dmn-decision-table-container .actionable:hover .action-icon {
-  background-color: #52b415;
-  color: white;
-}
-
-/** end actionable icon */
-
-
 /* basic styles */
 
 .dmn-decision-table-container {
@@ -43,10 +22,6 @@
   max-height: 100%;
 }
 
-.dmn-decision-table-container .tjs-table {
-  min-width: 100%;
-}
-
 /* end basic styles */
 
 
@@ -86,6 +61,10 @@
   border-left: 1px solid #444;
 }
 
+.dmn-decision-table-container .tjs-table tr .annotation {
+  border-left: 3px double #444;
+}
+
 .dmn-decision-table-container th {
   min-width: 192px;
 }
@@ -106,21 +85,13 @@
 
 .dmn-decision-table-container th.header {
   text-align: center;
-  font-weight: bold;
-}
-
-.dmn-decision-table-container th.annotation.header {
-  vertical-align: bottom;
 }
 
 .dmn-decision-table-container td.rule-index {
   text-align: right;
   padding-right: 8px;
 }
 
-.dmn-decision-table-container thead .input-expression,
-.dmn-decision-table-container thead .input-variable,
-.dmn-decision-table-container thead .output-name,
 .dmn-decision-table-container thead .type-ref,
 .dmn-decision-table-container .script-editor {
   font-family: monospace;
@@ -249,10 +220,118 @@
 
 /* end decision table properties */
 
+/* input and output headers */
+.dmn-decision-table-container thead .input-cell,
+.dmn-decision-table-container thead .output-cell {
+  max-width: 192px;
+
+  text-align: left;
+}
+
+.dmn-decision-table-container thead .input-label,
+.dmn-decision-table-container thead .input-expression,
+.dmn-decision-table-container thead .output-label,
+.dmn-decision-table-container thead .output-name {
+  margin: 16px 6px;
+
+  font-size: 16px;
+  white-space: nowrap;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dmn-decision-table-container thead .input-variable,
+.dmn-decision-table-container thead .output-variable {
+  white-space: nowrap;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dmn-decision-table-container thead .input-cell .clause,
+.dmn-decision-table-container thead .output-cell .clause,
+.dmn-decision-table-container thead .input-cell .input-variable,
+.dmn-decision-table-container thead .output-cell .output-variable {
+  font-size: 12px;
+
+  color: #bfbfbf
+}
+
+.dmn-decision-table-container thead .input-cell:hover .clause,
+.dmn-decision-table-container thead .output-cell:hover .clause,
+.dmn-decision-table-container thead .input-cell:hover .input-variable,
+.dmn-decision-table-container thead .output-cell:hover .output-variable {
+  color: #545454;
+}
+
+.dmn-decision-table-container thead .input-cell .clause,
+.dmn-decision-table-container thead .output-cell .clause {
+  text-align: left;
+}
+
+.dmn-decision-table-container thead .input-variable,
+.dmn-decision-table-container thead .output-variable {
+  text-align: right;
+}
+
+
+/** actionable icon */
+.dmn-decision-table-container .action-icon {
+  border-radius: 2px;
+  color: #52b415;
+  margin-left: 5px;
+}
+
+.dmn-decision-table-container .action-icon:before {
+  margin-left: .1em;
+  margin-right: .1em;
+}
+
+.dmn-decision-table-container .actionable:hover .action-icon {
+  background-color: #52b415;
+  color: white;
+}
+
+.dmn-decision-table-container .action-icon.add-input:before,
+.dmn-decision-table-container .action-icon.add-output:before {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 16px;
+  height: 16px;
+  margin: 0;
+
+  border-radius: 50%;
+
+  color: white;
+  background-color: #545454;
+
+  cursor: pointer;
+}
+
+.dmn-decision-table-container .input-editor .action-icon.add-input,
+.dmn-decision-table-container .output-editor .action-icon.add-output {
+  position: absolute;
+
+  top: 50%;
+  right: 0;
+
+  transform: translate(50%, -50%);
+  z-index: 1;
+}
+
+.dmn-decision-table-container .actionable:hover .action-icon.add-input,
+.dmn-decision-table-container .actionable:hover .action-icon.add-output {
+  background-color: unset;
+  color: unset;
+}
+
+/** end actionable icon */
+
 /* view drd */
 .dmn-decision-table-container .view-drd {
-  float: right;
-
   margin-bottom: 10px;
 }
 
@@ -361,11 +440,6 @@
   margin-left: 3px;
 }
 
-.dms-badge.dmn-variable-name {
-  background: #9e9e9e;
-  color: white;
-}
-
 .dms-badge.dmn-expression-language {
   background: rgba(84, 146, 250, 0.3);
   color: white;
@@ -384,7 +458,6 @@
   display: inline-block;
 }
 
-.dmn-decision-table-container .input-editor .dmn-variable-name,
 .dmn-decision-table-container .input-editor .dmn-expression-language {
   margin-top: 4px;
   display: inline-block;

diff --git a/packages/dmn-js-decision-table/src/features/add-input-output/AddInputOutputProvider.js b/packages/dmn-js-decision-table/src/features/add-input-output/AddInputOutputProvider.js
@@ -6,12 +6,14 @@ export default function AddInputOutputProvider(
     components, editorActions, eventBus
 ) {
 
-  components.onGetComponent('cell', ({ cellType }) => {
-    if (cellType === 'input-label') {
+  components.onGetComponent('cell-inner', (context = {}) => {
+    const { cellType, index, inputsLength, outputsLength } = context;
+
+    if (cellType === 'input-cell' && index === inputsLength - 1) {
       return AddInput;
     }
 
-    if (cellType === 'output-label') {
+    if (cellType === 'output-cell' && index === outputsLength -1) {
       return AddOutput;
     }
   });

diff --git a/packages/dmn-js-decision-table/src/features/add-input-output/components/AddInput.js b/packages/dmn-js-decision-table/src/features/add-input-output/components/AddInput.js
@@ -44,30 +44,12 @@ export default class AddInput extends Component {
   }
 
   render() {
-
-    const {
-      businessObject
-    } = this.getRoot();
-
-    const inputs = businessObject.input;
-
-    if (!inputs || !inputs.length) {
-      return null;
-    }
-
-    const colspan = inputs.length;
-
     return (
-      <th
-        className="input-cell inputs-label actionable add-input header"
+      <span
         onClick={ this.handleClick }
-        colspan={ colspan }
-      >
-        { this._translate('Input') } <span
-          className="add-input dmn-icon-plus action-icon"
-          title={ this._translate('Add Input') }
-        ></span>
-      </th>
+        className="add-input actionable dmn-icon-plus action-icon"
+        title={ this._translate('Add Input') }
+      ></span>
     );
   }
 

diff --git a/packages/dmn-js-decision-table/src/features/add-input-output/components/AddOutput.js b/packages/dmn-js-decision-table/src/features/add-input-output/components/AddOutput.js
@@ -44,24 +44,12 @@ export default class AddOutput extends Component {
   }
 
   render() {
-
-    const {
-      businessObject
-    } = this.getRoot();
-
-    const colspan = businessObject.output.length;
-
     return (
-      <th
-        className="output-cell outputs-label add-output actionable header"
+      <span
         onClick={ this.handleClick }
-        colspan={ colspan }
-      >
-        { this._translate('Output') } <span
-          className="add-output dmn-icon-plus action-icon"
-          title={ this._translate('Add Output') }
-        ></span>
-      </th>
+        className="add-output actionable dmn-icon-plus action-icon"
+        title={ this._translate('Add Output') }
+      ></span>
     );
   }
 

diff --git a/packages/dmn-js-decision-table/src/features/add-rule/components/AddRuleFootComponent.js b/packages/dmn-js-decision-table/src/features/add-rule/components/AddRuleFootComponent.js
@@ -58,6 +58,8 @@ export default class AddRuleFootComponent extends Component {
         if (businessObject.$instanceOf('dmn:OutputClause')) {
           className += ' output-cell';
         }
+      } else {
+        className += ' annotation';
       }
 
       cells.push(<td className={ className }>{placeholder}</td>);

diff --git a/packages/dmn-js-decision-table/src/features/allowed-values/AllowedValuesEditingProvider.js b/packages/dmn-js-decision-table/src/features/allowed-values/AllowedValuesEditingProvider.js
@@ -6,7 +6,9 @@ const LOW_PRIORITY = 500;
 export default class InputOutputValues {
   constructor(components) {
     components.onGetComponent('context-menu', LOW_PRIORITY, (context = {}) => {
-      if (context.contextMenuType && context.contextMenuType === 'type-ref-edit') {
+      const { contextMenuType } = context;
+
+      if (contextMenuType === 'input-edit' || contextMenuType === 'output-edit') {
         return AllowedValuesEditing;
       }
     });

diff --git a/...ages/dmn-js-decision-table/src/features/allowed-values/components/AllowedValuesEditing.js b/...ages/dmn-js-decision-table/src/features/allowed-values/components/AllowedValuesEditing.js
@@ -86,7 +86,7 @@ export default class AllowedValuesEditing extends Component {
   }
 
   getAllowedValuesTarget() {
-    const { element } = this.props.context;
+    const element = this.getElement();
 
     if (is(element, 'dmn:LiteralExpression')) {
       return element.$parent;
@@ -147,8 +147,12 @@ export default class AllowedValuesEditing extends Component {
     this.setPredefinedValues(null);
   }
 
+  getElement() {
+    return this.props.context.output || this.props.context.input.inputExpression;
+  }
+
   render() {
-    const { element } = this.props.context;
+    const element = this.getElement();
 
     const {
       inputValue,

diff --git a/packages/dmn-js-decision-table/src/features/annotations/components/AnnotationHeader.js b/packages/dmn-js-decision-table/src/features/annotations/components/AnnotationHeader.js
@@ -2,8 +2,8 @@ export default function AnnotationHeader(props, context) {
   const _translate = context.injector.get('translate');
 
   return (
-    <th className="annotation header" rowspan="3">
-      { _translate('Annotation') }
+    <th className="annotation header">
+      { _translate('Annotations') }
     </th>
   );
 }
diff --git a/...ages/dmn-js-decision-table/src/features/create-inputs/components/CreateInputHeaderCell.js b/...ages/dmn-js-decision-table/src/features/create-inputs/components/CreateInputHeaderCell.js
@@ -20,7 +20,6 @@ export default class CreateInputsHeaderCell extends Component {
       <th
         className="input-cell create-inputs header actionable"
         onClick={ this.onClick }
-        rowspan="3"
         title={ this.translate('Add Input') }>
         { this.translate('Input') } <span
           className="add-input dmn-icon-plus action-icon"