Add start activity icon and fix menu

Author: martenrichter

src/ui/icons/icons.jsx

@@ -1292,6 +1292,79 @@ const jupyterLiteIcon = (
   </React.Fragment>
 )
 
+// the next icon is a merge between the jupyterlite icon and the poll icon
+// the comments to the original icons apply
+const startActivityIcon = (
+  <React.Fragment>
+    <g transform='matrix(.66567 0 0 .66567 .42782 3.4386)'>
+      <path
+        d='m60.084 79.958h-16.104c-0.561 0-1.016 0.455-1.016 1.018v78.88c0 0.562 0.455 1.017 1.016 1.017h16.104c0.561 0 1.016-0.455 1.016-1.017v-78.88c0-0.563-0.455-1.018-1.016-1.018z'
+        fill='none'
+        stroke='currentColor'
+        stroke-miterlimit='10'
+        stroke-width='7'
+      />
+      <path
+        d='m156 94.722h-16.098c-0.563 0-1.018 0.455-1.018 1.018v64.115c0 0.563 0.455 1.018 1.018 1.018h16.098c0.563 0 1.018-0.455 1.018-1.018v-64.116c0-0.562-0.456-1.017-1.018-1.017z'
+        fill='none'
+        stroke='currentColor'
+        stroke-miterlimit='10'
+        stroke-width='7'
+      />
+      <path
+        d='m108.42 164.31h-16.104c-2.457 0-4.457-1.998-4.457-4.457v-42.711c0-2.457 2-4.457 4.457-4.457h16.104c2.457 0 4.457 2 4.457 4.457v42.711c0 2.458-2 4.457-4.457 4.457m-13.682-6.879h11.258v-37.867h-11.258z'
+        fill='currentColor'
+      />
+      <g
+        fill='currentColor'
+        stroke='currentColor'
+        stroke-miterlimit='10'
+        stroke-width='7'
+      >
+        <line x1='109.95' x2='134.95' y1='77.473' y2='67.865' />
+        <path d='m63.596 57.933c1.38 0.345 17.994 11.408 28.165 18.234' />
+        <circle cx='148.53' cy='64.542' r='14.427' />
+        <circle cx='100.31' cy='85.247' r='14.427' />
+        <circle cx='51.474' cy='50.114' r='14.427' />
+      </g>
+    </g>
+    <g transform='matrix(.51664 0 0 .51664 95.351 89.261)'>
+      <path
+        d='m100.17 2.6783a78.041 75.135 0 0 0-78.039 75.139 78.041 75.135 0 0 0 78.039 75.133 78.041 75.135 0 0 0 78.039-75.133 78.041 75.135 0 0 0-78.039-75.139zm-7.579 39.702a8.2127 7.9069 0 0 1 8.2146 7.9087 8.2127 7.9069 0 0 1-8.2146 7.9087 8.2127 7.9069 0 0 1-8.2146-7.9087 8.2127 7.9069 0 0 1 8.2146-7.9087zm29.289 11.328c0.32619 0 0.66827 0.01604 1.0269 0.04705 5.6394 0.34521 8.4591 3.4992 8.4591 9.4622 0 6.4964-2.9012 13.715-8.7036 21.655-3.6835 5.0528-7.5464 9.1484-11.588 12.287 1.1083 5.9629 2.3307 10.435 3.6672 13.417 2.4774 5.5235 6.161 8.2853 11.051 8.2853 0.32581 0 0.66824-0.0306 1.0269-0.0946 1.0757-0.18835 2.5753-0.94159 4.4985-2.2596 1.8581-1.224 3.3087-1.8359 4.3518-1.8359 0.4564 0 0.89642 0.14128 1.3202 0.42367 0.94538 0.62767 1.418 1.475 1.418 2.5421-0.0651 1.632-1.2715 3.311-3.6183 5.0371-2.9338 2.0399-6.1121 3.0599-9.5348 3.0599-7.8561-0.31343-13.675-4.9268-17.456-13.84-1.4877-3.5641-2.5778-7.5564-3.2761-11.969-4.5681 3.6388-10.288 7.9487-17.309 13.005l-2.2492 15.582c-0.0977 0.72183-0.24446 1.4279-0.44007 2.1184-1.4995 5.5235-5.2646 8.2853-11.295 8.2853-2.999 0-5.6394-1.0828-7.9212-3.2482-2.2492-2.1655-3.3739-4.5977-3.3739-7.2967 0-2.8245 0.70086-5.1469 2.1026-6.9672 0.78234-0.94148 2.3144-2.2282 4.5963-3.8602l11.735-8.4736c4.1399-26.331 6.2588-40.171 6.3565-41.521 0-0.18827 0.01685-0.3609 0.04877-0.51782 0.35862-3.5464 1.7114-5.3196 4.0584-5.3196 2.1188 0.03095 3.2109 1.365 3.2761 4.0014l-5.4275 37.378c8.1494-5.9943 12.729-9.3837 13.74-10.168 0.42837-0.35671 0.85914-0.64872 1.2957-0.88268-0.0804-1.5624-0.12233-3.1645-0.12233-4.8135 0-0.50217 0.0314-1.1455 0.098-1.9301 0.45644-6.622 1.7277-12.695 3.8139-18.218 3.3901-8.913 8.182-13.369 14.376-13.369zm0.0486 7.1084c-1.9232 0.03095-3.6183 0.83143-5.0852 2.4009-3.7161 4.0485-5.7535 12.506-6.1121 25.374 1.9558-1.9144 3.9117-4.174 5.8676-6.7789 5.4112-7.1241 8.1168-13.134 8.1168-18.03 0-0.25108-0.0651-0.54919-0.19565-0.89442-0.52161-1.3809-1.3854-2.0713-2.5915-2.0713zm-43.127 58.185-5.4275 4.0014c-2.347 1.6947-3.5369 3.2953-3.5695 4.8017 0 0.53348 0.09786 1.0356 0.29342 1.5064 0.55415 1.3809 1.5973 2.0713 3.1294 2.0713 0.61938 0 1.1736-0.0946 1.6625-0.28253 1.5647-0.65907 2.5915-2.7775 3.0805-6.3552z'
+        stroke-width='3.0706'
+        fill='currentColor'
+      />
+      <rect
+        x='65.916'
+        y='154.24'
+        width='66.866'
+        height='11.5'
+        rx='4.879'
+        ry='4.6973'
+        fill='currentColor'
+      />
+      <rect
+        x='65.987'
+        y='169.35'
+        width='66.724'
+        height='11.737'
+        rx='4.9796'
+        ry='4.7941'
+        fill='currentColor'
+      />
+      <rect
+        x='80.188'
+        y='184.7'
+        width='38.321'
+        height='11.619'
+        rx='4.9293'
+        ry='4.7457'
+        fill='currentColor'
+      />
+    </g>
+  </React.Fragment>
+)
+
 // exports
 export const fiAddNotepad = iconMakerInl(addNotepadIcon, 'add notepad')
 export const fiAddScreen = iconMakerInl(addScreenIcon, 'add screen')
@@ -1366,6 +1439,14 @@ export const fiJupyterLiteIcon = iconMakerInl(jupyterLiteIcon, 'jupyter lite', {
   size: '30px'
 })
 
+export const fiStartActivityIcon = iconMakerInl(
+  startActivityIcon,
+  'start activity',
+  {
+    size: '30px'
+  }
+)
+
 // inlined icons by petedesign works, modified for integration by Marten Richter, see readme
 
 const broadcastStartIcon = (

src/ui/toolbox/toolbox.jsx

@@ -64,7 +64,8 @@ import {
   fiAddRectangleIcon,
   fiAddEllipseIcon,
   fiAddCircleIcon,
-  fiJupyterLiteIcon
+  fiJupyterLiteIcon,
+  fiStartActivityIcon
 } from '../icons/icons.jsx'
 import { UAParser } from 'ua-parser-js'
 import { ToolHandling } from './toolhandling.jsx'
@@ -426,7 +427,7 @@ export class ToolBox extends ToolHandling {
 
     const startactivitybutton = (
       <Button
-        icon={<b>A</b>}
+        icon={fiStartActivityIcon}
         tooltip='Start activity'
         tooltipOptions={ttopts}
         key={11}
@@ -974,7 +975,7 @@ export class ToolBox extends ToolHandling {
       />
     )
 
-    const activitywheel = []
+    let activitywheel = []
     activitywheel.push(pollbutton)
     if (this.props.experimental) activitywheel.push(ipynbbutton)
 
@@ -985,6 +986,12 @@ export class ToolBox extends ToolHandling {
       }
     }
 
+    activitywheel = activitywheel.map((ele, it) => (
+      <div className='p-mr-2 p-mb-2' id={it} key={it}>
+        {ele}
+      </div>
+    ))
+
     const { colorwheel, pensizewheel, tmcolorwheel, bcolorwheel, fcolorwheel } =
       this.getColorButtons({
         addclass: 'p-mr-2 p-mb-2',