goblin-gadgets 2.0.13 → 2.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goblin-gadgets",
-  "version": "2.0.13",
+  "version": "2.0.16",
   "description": "Gadgets library",
   "main": "./builders/builders.js",
   "scripts": {

package/widgets/hinter-field/widget.js

@@ -93,6 +93,13 @@ class HinterFieldControl extends Widget {
   }
 
   clear() {
+    const service = this.workitemId.split('@', 1)[0];
+    const action = `clear-${this.props.hinter}`;
+    if (this.canDo(`${service}.${action}`)) {
+      this.doFor(this.workitemId, action, {
+        previousValue: this.props.selectedId,
+      });
+    }
     this.props.onChange(null);
   }
 

package/widgets/launcher/styles.js

@@ -12,17 +12,14 @@ export default function styles(theme, props) {
     top: '0px',
     bottom: '0px',
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: 'column',
     background: background,
     overflow: 'hidden',
     transition: '0.5s ease-in-out',
   };
 
   const title = {
-    position: 'absolute',
-    left: '0px',
-    right: '0px',
-    top: '5%',
+    margin: '20px 0px 0px 0px ',
     display: 'flex',
     flexDirection: 'row',
     textTransform: 'uppercase',
@@ -30,12 +27,13 @@ export default function styles(theme, props) {
   };
 
   const rockets = {
+    flexGrow: 1,
+    padding: '10px 10px 0px 10px',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
-    alignSelf: 'center',
-    margin: 'auto',
-    paddingTop: '5%',
+    flexWrap: 'wrap',
+    overflowY: 'auto',
   };
 
   return {

package/widgets/launcher/widget.js

@@ -36,7 +36,7 @@ export default class Launcher extends Widget {
     return (
       <Rocket
         key={index}
-        size={this.props.rocketSize || '200px'}
+        size="200px"
         textColor={this.props.rocketTextColor || '#fff'}
         shadow={this.props.rocketShadow || 'none'}
         iconShadow={this.props.rocketIconShadow || 'none'}

package/widgets/launcher-blob/styles.js

@@ -36,6 +36,7 @@ export default function styles(theme, props) {
     transformOrigin: '50% 50%',
     animation: `${duration} ease-in-out infinite ${direction}`,
     animationName: keyframesBlob,
+    pointerEvents: 'none',
   };
 
   const launcherWave = {
@@ -49,6 +50,7 @@ export default function styles(theme, props) {
     animation: `${duration} ease-in-out infinite ${direction}`,
     animationDirection: 'alternate',
     animationName: keyframesWave,
+    pointerEvents: 'none',
   };
 
   return {

package/widgets/rocket/styles.js

@@ -40,7 +40,7 @@ export default function styles(theme, props) {
   const rr1 = px(s / 20);
   const rr2 = px(s / 5);
   const m = px(s / 20);
-  const hm = px(s / 5);
+  const mb = px(s / 1.8);
 
   const rs1 = {
     none: px(0),
@@ -78,17 +78,14 @@ export default function styles(theme, props) {
     'flexDirection': 'column',
     'justifyContent': 'center',
     'alignSelf': 'center',
-    'margin': `0px ${m}`,
+    'margin': `0px ${m} ${mb} ${m}`,
     'transformOrigin': 'bottom',
     'transition': disabled
       ? null
       : 'background 0.5s ease-in-out, margin 0.5s ease-in-out, transform 0.5s ease-in-out, opacity 0.5s ease-in-out',
-    ':hover': {
-      margin: hover ? `0px ${hm}` : null,
-      transform: hover ? 'scale(1.3)' : null,
-    },
     ':hover .box-hover': {
       background: hover ? backgroundHover : null,
+      transform: hover ? 'scale(1.05)' : null,
     },
     ':hover .gear-hover': {
       transition: 'cubic-bezier(0.37, 3.43, 0.55, 1) 0.4s',
@@ -106,6 +103,8 @@ export default function styles(theme, props) {
     borderRadius: kind === 'toy' ? rr2 : rr1,
     boxShadow: shadow ? `0px ${rs1} ${rs2} ${rs3} rgba(0,0,0,${rs4})` : null,
     background: background,
+    cursor: disabled ? null : 'pointer',
+    transition: disabled ? null : 'transform 0.2s ease-in-out',
   };
 
   const icon = {
@@ -118,8 +117,13 @@ export default function styles(theme, props) {
   };
 
   const glyph = {
-    ...icon,
+    position: 'absolute',
+    top: px(s * 0.15),
+    left: '0px',
+    right: '0px',
+    height: px(s * 0.5),
     display: 'flex',
+    opacity: disabled ? 0.4 : 1,
   };
 
   const iconSvg = {
@@ -192,7 +196,7 @@ export default function styles(theme, props) {
     transform: 'scale(0.5)',
   };
 
-  let transition, animation, animationName;
+  let transition, additionnalAnimation, additionnalAnimationName;
   if (additionalAnimation === 'parkinson') {
     const keyframes = {
       '0%': {transform: 'translate(0%, 0%) rotate(0deg)'},
@@ -217,8 +221,8 @@ export default function styles(theme, props) {
       '95%': {transform: 'translate(1%, 0.2%) rotate(0.5deg)'},
       '100%': {transform: 'translate(-0.5%, -0.6%) rotate(0deg)'},
     };
-    animation = '1s ease-in-out infinite reverse';
-    animationName = keyframes;
+    additionnalAnimation = '1s ease-in-out infinite reverse';
+    additionnalAnimationName = keyframes;
   } else if (additionalAnimation === 'zoom') {
     const keyframes = {
       '0%': {transform: 'scale(1)'},
@@ -226,8 +230,8 @@ export default function styles(theme, props) {
       '100%': {transform: 'scale(1)'},
     };
     transition = '0.1 ease-out';
-    animation = '0.6s ease-in-out infinite';
-    animationName = keyframes;
+    additionnalAnimation = '0.6s ease-in-out infinite';
+    additionnalAnimationName = keyframes;
   } else if (additionalAnimation === 'shift') {
     const keyframes = {
       '0%': {transform: 'translateX(0%)'},
@@ -237,8 +241,8 @@ export default function styles(theme, props) {
       '100%': {transform: 'translateX(0%)'},
     };
     transition = '0.1 ease-out';
-    animation = '0.4s ease-in-out infinite';
-    animationName = keyframes;
+    additionnalAnimation = '0.4s ease-in-out infinite';
+    additionnalAnimationName = keyframes;
   } else if (additionalAnimation === 'dancing') {
     const keyframes = {
       '0%': {transform: 'rotate(4deg) translate(0%, 0%)'},
@@ -254,8 +258,8 @@ export default function styles(theme, props) {
       '100%': {transform: 'rotate(4deg) translate(0%, 0%)'},
     };
     transition = '0.3 ease-out';
-    animation = '1.2s ease-in-out infinite reverse';
-    animationName = keyframes;
+    additionnalAnimation = '1.2s ease-in-out infinite reverse';
+    additionnalAnimationName = keyframes;
   }
 
   const additional = {
@@ -272,10 +276,11 @@ export default function styles(theme, props) {
     'flexDirection': 'row',
     'justifyContent': 'center',
     'alignSelf': 'center',
+    'cursor': disabled ? null : 'pointer',
     'transition': transition,
     ':hover': {
-      animation,
-      animationName,
+      animation: additionnalAnimation,
+      animationName: additionnalAnimationName,
     },
   };
 

package/widgets/rocket/widget.js

@@ -50,6 +50,7 @@ export default class Rocket extends Widget {
           glyphSize={glyphSize}
           justify="center"
           glyphPosition="center"
+          cursor="inherit"
         />
       </div>
     );
@@ -119,6 +120,7 @@ export default class Rocket extends Widget {
             grow="1"
             fontSize={fontSize}
             justify="center"
+            cursor="inherit"
           />
         </div>
       </>
@@ -159,6 +161,7 @@ export default class Rocket extends Widget {
           glyphSize={glyphSize}
           justify="center"
           glyphPosition="center"
+          cursor="inherit"
         />
       </div>
     );
@@ -174,6 +177,7 @@ export default class Rocket extends Widget {
           fontSize={fontSize}
           justify="center"
           wrap="no"
+          cursor="inherit"
         />
       </div>
     );
@@ -189,15 +193,12 @@ export default class Rocket extends Widget {
           fontSize={fontSize}
           justify="center"
           wrap="no"
+          cursor="inherit"
         />
       </div>
     );
   }
 
-  renderBox() {
-    return <div className={`box-hover ${this.styles.classNames.box}`} />;
-  }
-
   render() {
     return (
       <div
@@ -205,11 +206,12 @@ export default class Rocket extends Widget {
         onClick={this.props.onClick}
       >
         {this.renderAdditional()}
-        {this.renderBox()}
         {this.renderIcon()}
-        {this.renderGlyph()}
-        {this.renderTitle()}
-        {this.renderSubtitle()}
+        <div className={`box-hover ${this.styles.classNames.box}`}>
+          {this.renderGlyph()}
+          {this.renderTitle()}
+          {this.renderSubtitle()}
+        </div>
         {this.renderGauge()}
         {this.renderOverflow()}
         {this.renderCrossed()}

package/widgets/state-monitor/widget.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Widget from 'goblin-laboratory/widgets/widget';
+import Form from 'goblin-laboratory/widgets/form';
 import * as styles from './styles';
 import Tree from 'goblin-gadgets/widgets/tree/widget';
 import Label from 'goblin-gadgets/widgets/label/widget';
@@ -8,6 +9,23 @@ import T from 't';
 
 /******************************************************************************/
 
+function onCopyToClipboard(text) {
+  Form.copyTextToClipboard(text);
+}
+
+function renderCopyButton(text) {
+  return (
+    <Button
+      glyph="solid/copy"
+      tooltip={T('Copy to clipboard')}
+      width="32px"
+      height="32px"
+      border="none"
+      onClick={() => onCopyToClipboard(text)}
+    />
+  );
+}
+
 function getRows(state, parentKey) {
   const rows = [];
 
@@ -26,7 +44,9 @@ function getRows(state, parentKey) {
     } else if (typeof value === 'object') {
       row.rows = getRows(value, id);
     } else {
-      row.value = value.toString();
+      const text = value.toString();
+      row.value = text;
+      row.copy = () => renderCopyButton(text);
     }
 
     rows.push(row);
@@ -137,6 +157,10 @@ class StateMonitor extends Widget {
           textAlign: 'left',
           indent: 'space',
         },
+        {
+          name: 'copy',
+          width: '32px',
+        },
       ],
       rows: [],
     };

package/widgets/tree-cell/widget.js

@@ -14,6 +14,7 @@ export default class TreeCell extends Widget {
     this.styles = styles;
 
     this.onMouseDown = this.onMouseDown.bind(this);
+    this.onClick = this.onClick.bind(this);
     this.onDoubleClick = this.onDoubleClick.bind(this);
   }
 
@@ -24,6 +25,13 @@ export default class TreeCell extends Widget {
     }
   }
 
+  onClick() {
+    const x = this.props.onClick;
+    if (x) {
+      x(this.props.rowId);
+    }
+  }
+
   onDoubleClick() {
     const x = this.props.onDoubleClick;
     if (x) {
@@ -31,7 +39,7 @@ export default class TreeCell extends Widget {
     }
   }
 
-  render() {
+  renderLabel() {
     let glyph = null;
     let glyphColor = null;
     let text = null;
@@ -66,6 +74,27 @@ export default class TreeCell extends Widget {
       </div>
     );
   }
+
+  // Table accept a function in text, to render a specific component.
+  renderFunction() {
+    return (
+      <div
+        key={this.props.index}
+        className={this.styles.classNames.cell}
+        onClick={this.onClick}
+      >
+        {this.props.text()}
+      </div>
+    );
+  }
+
+  render() {
+    if (typeof this.props.text === 'function') {
+      return this.renderFunction();
+    } else {
+      return this.renderLabel();
+    }
+  }
 }
 
 /******************************************************************************/