Merge remote-tracking branch 'upstream/master'

Author: ulaurson

lib/Viewer.js

@@ -2,8 +2,7 @@
 
 var assign = require('lodash/object/assign'),
     omit = require('lodash/object/omit'),
-    isString = require('lodash/lang/isString'),
-    isNumber = require('lodash/lang/isNumber');
+    isString = require('lodash/lang/isString');
 
 var domify = require('min-dom/lib/domify'),
     domQuery = require('min-dom/lib/query'),
@@ -52,19 +51,9 @@ function checkValidationError(err) {
 }
 
 var DEFAULT_OPTIONS = {
-  width: '100%',
-  position: 'relative',
   container: 'body'
 };
 
-
-/**
- * Ensure the passed argument is a proper unit (defaulting to px)
- */
-function ensureUnit(val) {
-  return val + (isNumber(val) ? 'px' : '');
-}
-
 /**
  * A viewer for DMN tables.
  *
@@ -128,12 +117,6 @@ function Viewer(options) {
 
   var container = this.container = domify('<div class="dmn-table"></div>');
   parent.appendChild(container);
-
-  assign(container.style, {
-    width: ensureUnit(options.width),
-    height: ensureUnit(options.height),
-    position: options.position
-  });
 }
 
 Viewer.prototype.importXML = function(xml, done) {
@@ -225,6 +208,19 @@ Viewer.prototype.importDefinitions = function(definitions, done) {
 
 Viewer.prototype._init = function(table) {
   initListeners(table, this.__listeners || []);
+
+  var container = table.get('sheet').getContainer();
+
+  /**
+   * The code in the <project-logo></project-logo> area
+   * must not be changed, see http://bpmn.io/license for more information
+   *
+   * <project-logo>
+   */
+  container.appendChild(domify('<a href="http://bpmn.io" class="dmn-js-logo"></a>'));
+  /**
+   * </project-logo>
+   */
 };
 
 Viewer.prototype._createTable = function(options) {
@@ -240,7 +236,11 @@ Viewer.prototype._createTable = function(options) {
   options = omit(options, 'additionalModules');
 
   options = assign(options, {
-    sheet: { container: this.container },
+    sheet: {
+      width: options.width,
+      height: options.height,
+      container: this.container
+    },
     modules: modules
   });
 

lib/features/annotations/Annotations.js

@@ -28,16 +28,8 @@ function Annotations(eventBus, sheet, elementRegistry, graphicsFactory, hideTech
         return element._type === 'cell' && element.column === self.column && element.row.isLabelRow;
       })[0];
     labelCell.rowspan = hideTechControl.isHidden() ? 2 : 4;
-    /**
-     * The code in the <project-logo></project-logo> area
-     * must not be changed, see http://bpmn.io/license for more information
-     *
-     * <project-logo>
-     */
 
-    labelCell.content = domify('<a href="http://bpmn.io" class="dmn-js-logo"></a>Annotation');
-
-    /* </project-logo> */
+    labelCell.content = domify('Annotation');
 
     graphicsFactory.update('column', self.column, elementRegistry.getGraphics(self.column.id));
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dmn-js",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "A dmn toolkit and web modeler",
   "scripts": {
     "test": "grunt test"
@@ -78,6 +78,6 @@
     "min-dom": "^0.2.0",
     "object-refs": "^0.1.0",
     "selection-update": "^0.1.2",
-    "table-js": "^0.4.0"
+    "table-js": "^0.5.0"
   }
 }

styles/dmn-combobox.less

@@ -42,12 +42,10 @@
       position: absolute;
       display: block;
       right: 0;
-      width: 1.2em;
       height: @line-height-computed;
       line-height: @line-height-computed;
-      height: 1.2em;
       top: 50%;
-      margin-top: -0.6em;
+      margin-top: 0 - round(@line-height-computed * 0.5);
       content: '\E801';
     }
 

styles/dmn-contextmenu.less

@@ -19,10 +19,10 @@
   li {
     margin: 0;
     padding: 0;
+    list-style: none;
   }
 
-  ul {
-    list-style: none;
+  ul:not(.tjs-menu > ul) {
     .fancy-list;
   }
 
@@ -35,6 +35,11 @@
     font-size: 100%;
     font-weight: normal;
     padding: 0;
+
+    &:hover,
+    &:focus {
+      color: @dmn-gray-darker;
+    }
   }
 
   .tjs-icon {
@@ -66,20 +71,15 @@
     &.clear:before { content: '\e812'; }
   }
 
-  a.disabled,
-  a.disabled:hover {
-    color: @dmn-gray-dark;
-    cursor: default;
-  }
-
   ul:empty {
     display: none;
   }
 
   > ul > li {
-    padding-top: @dmn-vertical-padding;
-    padding-bottom: @dmn-vertical-padding;
+    padding-top: @dmn-vertical-padding * 2;
+    padding-bottom: @dmn-vertical-padding * 2;
     border-bottom: 1px dotted @dmn-gray-light;
+
     &:last-child {
       border-bottom: none;
     }
@@ -145,4 +145,19 @@
       background-color: @dmn-output-color;
     }
   }
+
+  .tjs-dropdown-menu > *:not(.tjs-context-menu > .tjs-dropdown-menu > *) {
+    padding-left: 5px;
+  }
+
+  a.disabled,
+  a.disabled:hover {
+    color: @dmn-gray;
+    cursor: default;
+    border-bottom: none;
+    .tjs-label {
+      font-weight: 700;
+      color: @dmn-gray;
+    }
+  }
 }

styles/dmn-dragdrop.less

@@ -23,7 +23,6 @@
 
   table > tbody tr {
     &.drop {
-
       &.above {
         border-top: 6px double @dmn-primary;
       }
@@ -37,11 +36,16 @@
       cursor: ns-resize;
 
       &:before {
+        visibility: hidden;
         float: left;
         cursor: move;
         cursor: ns-resize;
       }
 
+      &:hover:before {
+        visibility: visible;
+      }
+
       span {
         float: right;
         width: auto;
@@ -62,6 +66,7 @@
       }
 
       .drag-handle {
+        visibility: hidden;
         float: left;
         width: 1em;
         cursor: move;
@@ -72,6 +77,9 @@
           display: inline-block;
         }
       }
+      &:hover .drag-handle {
+        visibility: visible;
+      }
     }
   }
 }

styles/dmn-mixins.less

@@ -1,6 +1,5 @@
-.empty(@color: @dmn-gray) {
+.empty(@color: @dmn-gray-light) {
   &:empty:before {
-    // content: '…';
     content: '-';
     display: inline-block;
     width: 100%;
@@ -76,6 +75,7 @@
 
   &:after {
     .dmn-font;
+    margin: 0;
     content: '\e807';
     text-align: right;
     font-size: 3em;
@@ -98,16 +98,17 @@
       content: '';
       position: absolute;
       z-index: 1;
-      background-color: rgba(200, 200, 200, .3);
+      background-color: rgba(200, 200, 200, .2);
       height: 100%;
       top: 0;
       left: 0;
       width: 0;
-      .transition(width 0.218s ease);
+      // .transition(width 0.218s ease, left 0.218s ease);
     }
 
     &:hover:after {
-      width: 1.6em;
+      width: 3px;
+      left: 2px;
     }
 
     li:hover:after {
@@ -126,9 +127,9 @@
 }
 
 
-.tjs-label() {
-  color: @dmn-gray-darker;
-  font-weight: bold;
+.tjs-label(@color: @dmn-gray) {
+  color: @color;
+  font-weight: 700;
   background-color: transparent;
 }
 
@@ -143,16 +144,12 @@
 }
 
 .links-item(@color:           @dmn-primary,
-            @bg-color:        @dmn-gray-light,
+            @bg-color:        @dmn-gray-lighter,
             @pad-horizontal:  @dmn-vertical-padding,
             @pad-vertical:    @dmn-horizontal-padding) {
   .link(@color);
   display: block;
   padding: @pad-horizontal @pad-vertical;
-
-  &:hover {
-    background-color: @bg-color;
-  }
 }
 
 .borderbox() {