in progress

src/editor/extensions/ext-connector/ext-connector.js

@@ -349,13 +349,7 @@ export default {
 
     const buttons = [{
       id: 'mode_connect',
-      type: 'mode',
-      icon: svgEditor.curConfig.imgPath + 'cut.png',
-      includeWith: {
-        button: '#tool_line',
-        isDefault: false,
-        position: 1
-      },
+      type: 'mode_flyout',
       events: {
         click () {
           svgCanvas.setMode('connector');
@@ -364,6 +358,8 @@ export default {
     }];
     const strings = await loadExtensionTranslation(svgEditor.curPrefs.lang);
     return {
+      /** @todo JFH special flag */
+      newUI: true,
       name: strings.name,
       svgicons: 'conn.svg',
       buttons: strings.buttons.map((button, i) => {

src/editor/extensions/ext-imagelib/ext-imagelib.js

@@ -454,7 +454,7 @@ export default {
 
     const buttons = [{
       id: 'tool_imagelib',
-      type: 'app_menu', // _flyout
+      type: 'app_menu',
       icon: 'imagelib.png',
       position: 4,
       events: {

src/editor/extensions/ext-shapes/ext-shapes.js

@@ -156,7 +156,7 @@ export default {
     const buttons = [{
       id: 'tool_shapelib',
       icon: 'shapes.png',
-      type: 'mode_flyout', // _flyout
+      type: 'mode_flyout',
       position: 6,
       events: {
         click () {
@@ -214,7 +214,6 @@ export default {
           if (!btn.length) { return; }
 
           const copy = btn.children().clone();
-          shower.children(':not(.flyout_arrow_horiz)').remove();
           shower
             .append(copy)
             .attr('data-curopt', '#' + btn[0].id) // This sets the current mode
@@ -223,8 +222,6 @@ export default {
 
           curShapeId = btn[0].id.substr((modeId + '_').length);
           currentD = curLib.data[curShapeId];
-
-          $('.tools_flyout').fadeOut();
         });
 
         const shapeCats = $('<div id="shape_cats">');