bpmn-js-rails 0.1.0

data/app/assets/stylesheets/dmn-js/dmn-js-boxed-expression.css

@@ -0,0 +1,186 @@
+.dmn-boxed-expression-container {
+  --element-properties-background-color: var(--color-white);
+  --element-properties-border-color: var(--color-grey-225-10-15);
+  --element-properties-color: var(--color-grey-225-10-15);
+  --boxed-expression-color: var(--color-grey-225-10-15);
+  --boxed-expression-properties-border-color: var(--color-grey-225-10-15);
+  --boxed-expression-properties-color: var(--color-grey-225-10-15);
+  --powered-by-overlay-background-color: var(--color-black-opacity-20);
+  --powered-by-overlay-content-background-color: var(--color-white);
+  --powered-by-overlay-content-border-color: var(--color-grey-225-10-75);
+  --powered-by-overlay-content-color: var(--color-grey-225-10-15);
+  --textarea-border-color: var(--color-grey-225-10-15);
+  --textarea-color: var(--color-grey-225-10-15);
+  --view-drd-button-background-color: var(--color-white);
+  --view-drd-button-border-color: var(--color-grey-225-10-75);
+  --view-drd-button-color: var(--color-grey-225-10-15);
+  --view-drd-button-hover-background-color: var(--color-grey-225-10-97);
+  --boxed-expression-font-family: 'Arial', sans-serif;
+  --boxed-expression-font-family-monospace: monospace;
+  --section-padding: 20px;
+  --padding: 12px;
+  --font-size: 14px;
+  --font-size-big: 16px;
+  --font-size-bigger: 21px;
+
+  font-family: var(--boxed-expression-font-family);
+  color: var(--boxed-expression-color);
+  width: 100%;
+  height: 100%;
+}
+
+.dmn-boxed-expression-container .viewer-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  font-size: var(--font-size);
+}
+
+.dmn-boxed-expression-container * {
+  box-sizing: border-box;
+}
+
+.dmn-boxed-expression-container .dmn-boxed-expression-section {
+  border: 1px solid var(--element-properties-border-color);
+
+  & + .dmn-boxed-expression-section {
+    border-top: none;
+  }
+}
+
+.dmn-boxed-expression-container h2 {
+  margin: 0;
+  font-size: var(--font-size-big);
+}
+
+/* element properties */
+.dmn-boxed-expression-container .element-properties {
+  padding: var(--section-padding);
+  color: var(--element-properties-color);
+  position: relative;
+  min-width: 192px;
+}
+
+.dmn-boxed-expression-container .element-name {
+  margin: 0;
+  font-size: var(--font-size-bigger);
+  font-weight: normal;
+  white-space: pre;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.dmn-boxed-expression-container .textarea .content-editable {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.dmn-boxed-expression-container .element-name.editor:not(.focussed):hover {
+  cursor: text;
+}
+
+.dmn-boxed-expression-container .element-name.focussed .content-editable {
+  text-overflow: unset;
+}
+
+/* textarea */
+.dmn-boxed-expression-container .textarea {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--padding);
+  font-family: var(--boxed-expression-font-family-monospace);
+  line-height: 1.4;
+  white-space: pre;
+  font-size: var(--font-size);
+  color: var(--textarea-color);
+  min-height: 250px;
+  overflow: auto;
+}
+
+.dmn-boxed-expression-container .textarea div:focus {
+  outline: none;
+}
+
+.dmn-boxed-expression-container .textarea.editor {
+  height: 100%;
+  cursor: text;
+}
+
+.dmn-boxed-expression-container .textarea:not(.editor) {
+  cursor: default;
+}
+
+/* view drd */
+.dmn-boxed-expression-container .view-drd {
+  margin-right: 10px;
+  padding-bottom: 10px;
+}
+
+.dmn-boxed-expression-container .view-drd .view-drd-button {
+  background: var(--view-drd-button-background-color);
+  padding: 8px;
+  border: solid 1px var(--view-drd-button-border-color);
+  border-radius: 2px;
+  font-size: 14px;
+  color: var(--view-drd-button-color);
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.dmn-boxed-expression-container .view-drd .view-drd-button:hover {
+  background: var(--view-drd-button-hover-background-color);
+}
+
+/* function definition */
+.dmn-boxed-expression-container .function-definition {
+  display: grid;
+  grid-template-columns: 50px auto;
+  grid-template-rows: 50px auto;
+
+  & .function-definition-kind, & .function-definition-parameters {
+    position: relative;
+  }
+}
+
+.dmn-boxed-expression-container .function-definition .function-definition-kind {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  font-size: var(--font-size-bigger);
+}
+
+.dmn-boxed-expression-container .function-definition .function-definition-parameters {
+  display: flex;
+  align-items: center;
+  padding-left: var(--padding);
+  border-left: 1px solid var(--element-properties-border-color);
+  font-size: var(--font-size-big);
+}
+
+.dmn-boxed-expression-container .function-definition .function-definition-body {
+  grid-column: span 2;
+  border-top: 1px solid var(--element-properties-border-color);
+}
+
+/* element-variable */
+
+.dmn-boxed-expression-container .element-variable {
+  padding: var(--section-padding);
+  display: inline-grid;
+  grid: auto / 1fr 1fr;
+  gap: 10px 20px;
+
+  & > h2 {
+    grid-column: span 2;
+  }
+
+  & .element-variable-name-label, & .element-variable-type-label {
+    display: block;
+    padding-bottom: 7px;
+    color: var(--color-grey-225-10-35)
+  }
+}

data/app/assets/stylesheets/dmn-js/dmn-js-decision-table-controls.css

@@ -0,0 +1,301 @@
+.dmn-decision-table-container {
+  --allowed-values-placeholder-color: var(--color-grey-225-10-35);
+  --cell-description-editor-border-color: var(--color-grey-225-10-15);
+  --create-inputs-border-color: var(--color-grey-225-10-75);
+  --create-inputs-color: var(--color-grey-225-10-35);
+  --create-inputs-hover-color: var(--color-grey-225-10-15);
+  --context-menu-background-color: var(--color-white);
+  --context-menu-border-color: var(--color-grey-225-10-75);
+  --context-menu-color: var(--color-grey-225-10-15);
+  --context-menu-box-shadow-color: var(--color-black-opacity-10);
+  --context-menu-group-entry-border-color: var(--color-grey-225-10-75);
+  --context-menu-group-entry-disabled-color: var(--color-grey-225-10-75);
+  --context-menu-group-entry-hover-background-color: var(--color-grey-225-10-95);
+  --drag-and-drop-handle-color: var(--color-grey-225-10-55);
+  --drag-and-drop-handle-hover-color: var(--color-grey-225-10-15);
+  --form-control-label-color: var(--color-grey-225-10-15);
+  --hint-color: var(--color-grey-225-10-15);
+  --edit-button-color: var(--color-grey-225-10-15);
+  --edit-button-background-color: var(--color-grey-225-10-97);
+  --edit-button-border-color: var(--color-grey-225-10-75);
+  --edit-button-box-shadow-color: var(--color-black-opacity-10);
+  --edit-button-disabled-color: var(--color-grey-225-10-75);
+}
+
+/* simple string edit */
+.dmn-decision-table-container .simple-string-edit,
+.dmn-decision-table-container .simple-date-edit {
+  width: 250px;
+}
+
+.dmn-decision-table-container .input-expression-edit {
+  width: 300px;
+}
+
+.dmn-decision-table-container .dms-form-control {
+  padding: 9px 0;
+}
+
+.dmn-decision-table-container .allowed-values-edit .dms-form-control {
+  display: flex;
+  flex-direction: column;
+}
+
+.dmn-decision-table-container .allowed-values-edit .values {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.dmn-decision-table-container .allowed-values-edit .placeholder {
+  color: var(--allowed-values-placeholder-color);
+}
+
+/** create inputs **/
+.dmn-decision-table-container thead .input-cell.create-inputs,
+.dmn-decision-table-container tbody .input-cell.create-inputs {
+  white-space: normal;
+  border-color: var(--create-inputs-border-color);
+  color: var(--create-inputs-color);
+  min-width: 50px;
+  width: 50px;
+}
+
+.dmn-decision-table-container thead .input-cell.create-inputs {
+  text-align: center;
+}
+
+.dmn-decision-table-container .create-inputs .add-input {
+  right: 50%;
+}
+
+.dmn-decision-table-container .create-inputs:hover {
+  border-color: var(--create-inputs-hover-color);
+  color: var(--create-inputs-hover-color);
+}
+
+.dmn-decision-table-container th.create-inputs {
+  vertical-align: top;
+}
+
+/** end create inputs **/
+
+/* TODO(nikku): namespace and refactor context menu styles */
+.dmn-decision-table-container .context-menu {
+  position: absolute;
+  background: var(--context-menu-background-color);
+  border: solid 1px var(--context-menu-border-color);
+  border-radius: 2px;
+  font-size: 14px;
+  color: var(--context-menu-color);
+  z-index: 6;
+  box-shadow: 1px 1px 1px 1px var(--context-menu-box-shadow-color);
+}
+
+.dmn-decision-table-container .context-menu .context-menu-container {
+  margin: 8px;
+}
+
+.dmn-decision-table-container .context-menu .context-menu-flex {
+  display: flex;
+  flex-direction: column;
+}
+
+.dmn-decision-table-container .context-menu .context-menu-group .context-menu-group-entry {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: 100%;
+  padding: 8px 16px;
+  cursor: default;
+  white-space: nowrap;
+}
+
+.dmn-decision-table-container .context-menu-group .context-menu-group-entry:hover {
+  background-color: var(--context-menu-group-entry-hover-background-color);
+}
+
+.dmn-decision-table-container .context-menu .context-menu-group .context-menu-group-entry.disabled {
+  pointer-events: none;
+  color: var(--context-menu-group-entry-disabled-color);
+}
+
+.dmn-decision-table-container .context-menu .context-menu-group .context-menu-group-entry .context-menu-group-entry-icon {
+  display: inline-block;
+  text-align: center;
+  width: 14px;
+  margin-right: 6px;
+}
+
+.dmn-decision-table-container .context-menu .context-menu-group .context-menu-group-entry .context-menu-group-entry-icon::before {
+  margin: 0;
+}
+
+.dmn-decision-table-container .context-menu-group:not(:last-child)::after {
+  content: '';
+  display: block;
+  margin: 0 8px;
+  border-bottom: 1px solid var(--context-menu-group-entry-border-color);
+  height: 1px;
+}
+
+/* input/output editor */
+
+.dmn-decision-table-container .context-menu .context-menu-container.input-edit,
+.dmn-decision-table-container .context-menu .context-menu-container.output-edit {
+  margin: 34px 10px 10px;
+}
+
+.dmn-decision-table-container .context-menu .context-menu-container.type-ref-edit,
+.dmn-decision-table-container .context-menu .context-menu-container.allowed-values-edit {
+  margin: 10px;
+}
+
+.dmn-decision-table-container .dms-output-label,
+.dmn-decision-table-container .dms-input-label {
+  padding-right: 30px;
+  padding-left: 0;
+  border: none;
+  font-size: 16px;
+  white-space: nowrap;
+}
+
+.dmn-decision-table-container .dms-form-control:first-child {
+  padding-top: 0;
+}
+
+.dmn-decision-table-container .dms-form-control .dms-label {
+  display: block;
+  margin: unset;
+  margin-bottom: 6px;
+  color: var(--form-control-label-color);
+  font-weight: normal;
+}
+
+.dmn-decision-table-container .dms-form-control .dms-input {
+  padding-right: 24px;
+  border-radius: 3px;
+}
+
+.dmn-decision-table-container .dms-form-control .dms-list-component {
+  max-width: 179px;
+}
+
+/* expression language */
+.dmn-decision-table-container .context-menu .context-menu-group .context-menu-entry-set-expression-language {
+  flex-direction: column;
+}
+
+.dmn-decision-table-container .context-menu .context-menu-group .context-menu-entry-set-expression-language:hover {
+  background-color: unset;
+}
+
+.dmn-decision-table-container .context-menu .context-menu-group .context-menu-entry-set-expression-language .expression-language {
+  margin-top: 8px;
+}
+
+/* drag and drop */
+.dmn-icon-drag {
+  color: transparent;
+}
+
+.dmn-icon-drag:hover {
+  color: var(--drag-and-drop-handle-hover-color);
+}
+
+.dmn-decision-table-container th .dmn-icon-drag {
+  position: absolute;
+  left: 4px;
+  top: 10px;
+  transform: translateY(-50%);
+}
+
+.dmn-decision-table-container th:hover .dmn-icon-drag,
+.dmn-decision-table-container td:hover .dmn-icon-drag {
+  color: var(--drag-and-drop-handle-color);
+}
+
+.dmn-decision-table-container .input-cell.input-editor:hover .clause,
+.dmn-decision-table-container .output-cell.output-editor:hover .clause {
+  visibility: hidden;
+}
+
+.dmn-icon-drag.horizontal,
+.dmn-icon-drag.vertical {
+  cursor: grab;
+}
+
+/* description editor */
+
+.dmn-decision-table-container .context-menu .description-editor {
+  margin: 0;
+  padding: 5px 0;
+  width: 192px;
+  border-left: solid 3px var(--cell-description-editor-border-color);
+}
+
+.dmn-decision-table-container .description-editor .dms-input {
+  border: none;
+  min-height: 0;
+}
+
+/* end description editor */
+
+.dmn-decision-table-container .resize-column-handle {
+  width: 25px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: -5px;
+  z-index: 1;
+  cursor: col-resize;
+}
+
+.dmn-decision-table-container .resize-column-handle:last-child {
+  width: 20px;
+  right: 0;
+}
+
+/* cell editor */
+.dmn-decision-table-container .cell-editor:focus-within .dmn-expression-language {
+  display: none;
+}
+
+.dmn-decision-table-container .cell-editor,
+.dmn-decision-table-container .cell-editor .cm-scroller {
+  line-height: 1.4;
+  font-family: monospace;
+}
+
+.dmn-decision-table-container .cell-editor .feel-editor.focussed > :nth-child(2) {
+  display: none;
+}
+
+/* edit-button */
+
+.dmn-decision-table-container .edit-button {
+  color: var(--edit-button-color);
+  background-color: var(--edit-button-background-color);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  padding: 4px;
+  border-radius: 2px;
+  border: solid 1px var(--edit-button-border-color);
+  font-size: var(--font-size);
+  box-shadow: 1px 1px 1px 1px var(--edit-button-box-shadow-color);
+}
+
+.dmn-decision-table-container :not(:has(:focus-visible)) .edit-button {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/* context menu */
+
+.dmn-decision-table-container .context-menu-group-entry.focused {
+  background-color: var(--color-grey-225-10-95);
+}