Diagram - fix js error in FF and IE browsers + update touch bar appea…

…rance (#10650)
DevExpress · Nov 18, 2019 · 37f10da · 37f10da
1 parent 75df821
commit 37f10da
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 19 deletions.
diff --git a/images/widgets/common/diagram/image-delete.svg b/images/widgets/common/diagram/image-delete.svg
diff --git a/images/widgets/common/diagram/image-edit.svg b/images/widgets/common/diagram/image-edit.svg
diff --git a/images/widgets/common/diagram/image-insert.svg b/images/widgets/common/diagram/image-insert.svg
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   "types": "./bundles/dx.all.d.ts",
   "license": "SEE LICENSE IN README.md",
   "dependencies": {
-    "devexpress-diagram": "0.1.43",
+    "devexpress-diagram": "0.1.45",
     "devexpress-gantt": "0.0.24",
     "jszip": "^2.0.0 || ^3.0.0",
     "quill": "^1.3.7",

diff --git a/styles/widgets/common/diagram.less b/styles/widgets/common/diagram.less
@@ -136,10 +136,11 @@
     height: 64px;
 }
 
-.dx-diagram-touchbar {
+.dx-diagram-touchbar.dx-context-menu {
     .dx-menu-items-container {
         display: block;
         height: 100%;
+        padding: 0;
     }
 
     .dx-menu-items-container::after {
@@ -153,16 +154,6 @@
         float: left;
     }
 
-    .dx-menu-separator {
-        width: 1px;
-        height: 29px;
-        margin: 0 2px;
-    }
-
-    .dx-menu-item .dx-menu-item-content {
-        padding: 5px 5px 6px;
-    }
-
     .dx-menu-item.dx-menu-item-has-text.dx-menu-item-has-icon .dx-menu-item-content .dx-icon {
         margin: 0;
     }

diff --git a/styles/widgets/generic/diagram.generic.less b/styles/widgets/generic/diagram.generic.less
@@ -12,6 +12,7 @@
 
 @GENERIC_DIAGRAM_TOOLBAR_ICON_SIZE: @GENERIC_BASE_ICON_SIZE;
 @DIAGRAM_TOOLBAR_COLORBUTTON_BORDER_WIDTH: 3px;
+@DIAGRAM_TOUCHBAR_ITEM_PADDING: 5px;
 
 .dx-diagram {
     border-color: @diagram-border-color;
@@ -162,4 +163,16 @@
     }
 }
 
+.dx-diagram-touchbar.dx-context-menu {
+    .dx-menu-item .dx-menu-item-content {
+        padding: @DIAGRAM_TOUCHBAR_ITEM_PADDING;
+    }
+
+    .dx-menu-separator {
+        width: 1px;
+        height: @GENERIC_BASE_ICON_SIZE + @DIAGRAM_TOUCHBAR_ITEM_PADDING + @DIAGRAM_TOUCHBAR_ITEM_PADDING + 2;
+        margin: 0;
+    }
+}
+
 .diagram-icons-mixin(@base-icon-color, @menu-color, @GENERIC_DIAGRAM_TOOLBAR_ICON_SIZE);
diff --git a/styles/widgets/ios7/diagram.ios7.less b/styles/widgets/ios7/diagram.ios7.less
@@ -12,6 +12,7 @@
 
 @IOS7_DIAGRAM_TOOLBAR_ICON_SIZE: 18px;
 @DIAGRAM_TOOLBAR_COLORBUTTON_BORDER_WIDTH: 3px;
+@DIAGRAM_TOUCHBAR_ITEM_PADDING: 6px;
 
 .dx-diagram {
     .dx-diagram-toolbar-wrapper {
@@ -36,4 +37,16 @@
     }
 }
 
+.dx-diagram-touchbar {
+    .dx-menu-item .dx-menu-item-content {
+        padding: @DIAGRAM_TOUCHBAR_ITEM_PADDING;
+    }
+
+    .dx-menu-separator {
+        width: 1px;
+        height: @IOS7_DIAGRAM_TOOLBAR_ICON_SIZE + @DIAGRAM_TOUCHBAR_ITEM_PADDING + @DIAGRAM_TOUCHBAR_ITEM_PADDING + 2;
+        margin: 0;
+    }
+}
+
 .diagram-icons-mixin(@IOS7_BUTTON_TEXT, @IOS7_CONTEXT_MENU_TEXT_COLOR, @IOS7_DIAGRAM_TOOLBAR_ICON_SIZE);
diff --git a/styles/widgets/material/diagram.material.less b/styles/widgets/material/diagram.material.less
@@ -13,6 +13,14 @@
 @MATERIAL_DIAGRAM_TOOLBAR_ICON_SIZE: @MATERIAL_BASE_ICON_SIZE;
 @DIAGRAM_TOOLBAR_COLORBUTTON_BORDER_WIDTH: 3px;
 
+.dx-size-default() {
+    @DIAGRAM_TOUCHBAR_ITEM_PADDING: 10px;
+}
+
+.dx-size-compact() {
+    @DIAGRAM_TOUCHBAR_ITEM_PADDING: 7px;
+}
+
 .dx-diagram {
     border-color: @diagram-border-color;
     // stylelint-disable selector-class-pattern
@@ -171,4 +179,16 @@
     }
 }
 
+.dx-diagram-touchbar {
+    .dx-menu-item .dx-menu-item-content {
+        padding: @DIAGRAM_TOUCHBAR_ITEM_PADDING;
+    }
+
+    .dx-menu-separator {
+        width: 1px;
+        height: @MATERIAL_DIAGRAM_TOOLBAR_ICON_SIZE + @DIAGRAM_TOUCHBAR_ITEM_PADDING + @DIAGRAM_TOUCHBAR_ITEM_PADDING + 2;
+        margin: 0;
+    }
+}
+
 .diagram-icons-mixin(@base-text-color, @base-text-color, @MATERIAL_DIAGRAM_TOOLBAR_ICON_SIZE);