goblin-gadgets 3.2.2 → 3.2.3

package/widgets/guild-user-logo/styles.js

@@ -1,114 +1,114 @@
-import {ColorHelpers} from 'goblin-theme';
-import {Unit} from 'goblin-theme';
-import GuildHelpers from '../guild-user-logo/guild-helpers';
-
-/******************************************************************************/
-
-export const propNames = [
-  'size',
-  'color',
-  'shape',
-  'initials',
-  'pseudo',
-  'firstName',
-  'lastName',
-  'onClick',
-];
-
-export default function styles(theme, props) {
-  let {
-    size = '50px',
-    color,
-    shape,
-    initials,
-    pseudo,
-    firstName,
-    lastName,
-    onClick,
-  } = props;
-
-  initials = GuildHelpers.getLogoInitials(
-    initials,
-    pseudo,
-    firstName,
-    lastName
-  );
-  color = GuildHelpers.getLogoColor(color);
-  shape = GuildHelpers.getLogoShape(shape);
-
-  const guildUserLogo = {
-    'position': 'relative',
-    'width': size,
-    'height': size,
-    'display': 'flex',
-    'flexDirection': 'column',
-    'justifyContent': 'center',
-    'alignItems': 'center',
-    'cursor': onClick ? 'pointer' : null,
-    'transition': theme.transitions.hover,
-    ':hover': {
-      transform: onClick ? 'scale(1.1)' : null,
-    },
-  };
-
-  const glyph = {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: ColorHelpers.getMarkColor(theme, color),
-    fontSize: size,
-  };
-
-  const top =
-    {
-      triangle: Unit.multiply(size, 0.3),
-      heart: Unit.multiply(size, -0.1),
-      star: Unit.multiply(size, 0.1),
-    }[shape] || 0;
-
-  const fontFactor =
-    {
-      1: 0.6,
-      2: 0.5,
-      3: 0.3,
-    }[initials.length] || 0.3;
-
-  const text = {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top,
-    bottom: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: 'white',
-    fontSize: Unit.multiply(size, fontFactor),
-    textShadow:
-      '-1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, -1px 0px 0px #000, 0px 0px 0px #000, 1px 0px 0px #000, -1px 1px 0px #000, 0px 1px 0px #000, 1px 1px 0px #000',
-  };
-
-  const photo = {
-    margin: '0px',
-    width: '100%',
-    transition: theme.transitions.hover,
-  };
-
-  /******************************************************************************/
-
-  return {
-    guildUserLogo,
-    glyph,
-    text,
-    photo,
-  };
-}
-
-/******************************************************************************/
+import {ColorHelpers} from 'goblin-theme';
+import {Unit} from 'goblin-theme';
+import GuildHelpers from '../guild-user-logo/guild-helpers';
+
+/******************************************************************************/
+
+export const propNames = [
+  'size',
+  'color',
+  'shape',
+  'initials',
+  'pseudo',
+  'firstName',
+  'lastName',
+  'onClick',
+];
+
+export default function styles(theme, props) {
+  let {
+    size = '50px',
+    color,
+    shape,
+    initials,
+    pseudo,
+    firstName,
+    lastName,
+    onClick,
+  } = props;
+
+  initials = GuildHelpers.getLogoInitials(
+    initials,
+    pseudo,
+    firstName,
+    lastName
+  );
+  color = GuildHelpers.getLogoColor(color);
+  shape = GuildHelpers.getLogoShape(shape);
+
+  const guildUserLogo = {
+    'position': 'relative',
+    'width': size,
+    'height': size,
+    'display': 'flex',
+    'flexDirection': 'column',
+    'justifyContent': 'center',
+    'alignItems': 'center',
+    'cursor': onClick ? 'pointer' : null,
+    'transition': theme.transitions.hover,
+    ':hover': {
+      transform: onClick ? 'scale(1.1)' : null,
+    },
+  };
+
+  const glyph = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: ColorHelpers.getMarkColor(theme, color),
+    fontSize: size,
+  };
+
+  const top =
+    {
+      triangle: Unit.multiply(size, 0.3),
+      heart: Unit.multiply(size, -0.1),
+      star: Unit.multiply(size, 0.1),
+    }[shape] || 0;
+
+  const fontFactor =
+    {
+      1: 0.6,
+      2: 0.5,
+      3: 0.3,
+    }[initials.length] || 0.3;
+
+  const text = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top,
+    bottom: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'white',
+    fontSize: Unit.multiply(size, fontFactor),
+    textShadow:
+      '-1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, -1px 0px 0px #000, 0px 0px 0px #000, 1px 0px 0px #000, -1px 1px 0px #000, 0px 1px 0px #000, 1px 1px 0px #000',
+  };
+
+  const photo = {
+    margin: '0px',
+    width: '100%',
+    transition: theme.transitions.hover,
+  };
+
+  /******************************************************************************/
+
+  return {
+    guildUserLogo,
+    glyph,
+    text,
+    photo,
+  };
+}
+
+/******************************************************************************/

package/widgets/guild-user-logo/widget.js

@@ -1,81 +1,81 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import props from './props';
-import scenarios from './scenarios';
-import {registerWidget} from 'goblin-gadgets/widgets/widget-doc/widget-list';
-import * as styles from './styles';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import GuildHelpers from '../guild-user-logo/guild-helpers';
-import {TranslatableDiv} from 'goblin-nabu/widgets/helpers/element-helpers';
-
-/******************************************************************************/
-
-export default class GuildUserLogo extends Widget {
-  constructor() {
-    super(...arguments);
-    this.styles = styles;
-  }
-
-  renderGlyph() {
-    const glyph = GuildHelpers.getLogoShape(this.props.shape);
-    return (
-      <div className={this.styles.classNames.glyph}>
-        <FontAwesomeIcon icon={['fas', glyph]} />
-      </div>
-    );
-  }
-
-  renderInitials() {
-    const i = GuildHelpers.getLogoInitials(
-      this.props.initials,
-      this.props.pseudo,
-      this.props.firstName,
-      this.props.lastName
-    );
-
-    return <div className={this.styles.classNames.text}>{i}</div>;
-  }
-
-  renderLogo() {
-    return (
-      <TranslatableDiv
-        className={this.styles.classNames.guildUserLogo}
-        title={this.props.tooltip}
-        onClick={this.props.onClick ? this.props.onClick : null}
-        workitemId={this.context.desktopId}
-      >
-        {this.renderGlyph()}
-        {this.renderInitials()}
-      </TranslatableDiv>
-    );
-  }
-
-  renderUri() {
-    return (
-      <TranslatableDiv
-        className={this.styles.classNames.guildUserLogo}
-        title={this.props.tooltip}
-        onClick={this.props.onClick ? this.props.onClick : null}
-        workitemId={this.context.desktopId}
-      >
-        <img
-          className={this.styles.classNames.photo}
-          src={this.props.uri}
-          alt="gravatar"
-        />
-      </TranslatableDiv>
-    );
-  }
-
-  render() {
-    if (this.props.uri) {
-      return this.renderUri();
-    } else {
-      return this.renderLogo();
-    }
-  }
-}
-
-/******************************************************************************/
-
-registerWidget(GuildUserLogo, props, scenarios);
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import props from './props';
+import scenarios from './scenarios';
+import {registerWidget} from 'goblin-gadgets/widgets/widget-doc/widget-list';
+import * as styles from './styles';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import GuildHelpers from '../guild-user-logo/guild-helpers';
+import {TranslatableDiv} from 'goblin-nabu/widgets/helpers/element-helpers';
+
+/******************************************************************************/
+
+export default class GuildUserLogo extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  renderGlyph() {
+    const glyph = GuildHelpers.getLogoShape(this.props.shape);
+    return (
+      <div className={this.styles.classNames.glyph}>
+        <FontAwesomeIcon icon={['fas', glyph]} />
+      </div>
+    );
+  }
+
+  renderInitials() {
+    const i = GuildHelpers.getLogoInitials(
+      this.props.initials,
+      this.props.pseudo,
+      this.props.firstName,
+      this.props.lastName
+    );
+
+    return <div className={this.styles.classNames.text}>{i}</div>;
+  }
+
+  renderLogo() {
+    return (
+      <TranslatableDiv
+        className={this.styles.classNames.guildUserLogo}
+        title={this.props.tooltip}
+        onClick={this.props.onClick ? this.props.onClick : null}
+        workitemId={this.context.desktopId}
+      >
+        {this.renderGlyph()}
+        {this.renderInitials()}
+      </TranslatableDiv>
+    );
+  }
+
+  renderUri() {
+    return (
+      <TranslatableDiv
+        className={this.styles.classNames.guildUserLogo}
+        title={this.props.tooltip}
+        onClick={this.props.onClick ? this.props.onClick : null}
+        workitemId={this.context.desktopId}
+      >
+        <img
+          className={this.styles.classNames.photo}
+          src={this.props.uri}
+          alt="gravatar"
+        />
+      </TranslatableDiv>
+    );
+  }
+
+  render() {
+    if (this.props.uri) {
+      return this.renderUri();
+    } else {
+      return this.renderLogo();
+    }
+  }
+}
+
+/******************************************************************************/
+
+registerWidget(GuildUserLogo, props, scenarios);

package/widgets/guild-user-profile/props.js

@@ -1,73 +1,73 @@
-import {types} from 'goblin-gadgets/types/types.js';
-
-export default [
-  // Perso.
-  {
-    name: 'initials',
-    group: 'perso',
-    type: types.string,
-  },
-  {
-    name: 'pseudo',
-    group: 'perso',
-    type: types.string,
-  },
-  {
-    name: 'firstName',
-    group: 'perso',
-    type: types.string,
-  },
-  {
-    name: 'lastName',
-    group: 'perso',
-    type: types.string,
-  },
-
-  // Logo.
-  {
-    name: 'logoShape',
-    group: 'logo',
-    type: types.enum([
-      'circle',
-      'hexagon',
-      'square',
-      'triangle',
-      'certificate',
-      'star',
-      'heart',
-    ]),
-  },
-  {
-    name: 'logoColor',
-    group: 'logo',
-    type: types.color,
-  },
-
-  // Layout.
-  {
-    name: 'width',
-    group: 'layout',
-    type: types.pixel,
-    min: 0,
-    max: 1000,
-  },
-  {
-    name: 'height',
-    group: 'layout',
-    type: types.pixel,
-    min: 0,
-    max: 1000,
-  },
-  {
-    name: 'grow',
-    group: 'layout',
-    type: types.grow,
-  },
-
-  // Function.
-  {
-    name: 'onClose',
-    group: 'function',
-    type: types.function,
-  },
-];
+import {types} from 'goblin-gadgets/types/types.js';
+
+export default [
+  // Perso.
+  {
+    name: 'initials',
+    group: 'perso',
+    type: types.string,
+  },
+  {
+    name: 'pseudo',
+    group: 'perso',
+    type: types.string,
+  },
+  {
+    name: 'firstName',
+    group: 'perso',
+    type: types.string,
+  },
+  {
+    name: 'lastName',
+    group: 'perso',
+    type: types.string,
+  },
+
+  // Logo.
+  {
+    name: 'logoShape',
+    group: 'logo',
+    type: types.enum([
+      'circle',
+      'hexagon',
+      'square',
+      'triangle',
+      'certificate',
+      'star',
+      'heart',
+    ]),
+  },
+  {
+    name: 'logoColor',
+    group: 'logo',
+    type: types.color,
+  },
+
+  // Layout.
+  {
+    name: 'width',
+    group: 'layout',
+    type: types.pixel,
+    min: 0,
+    max: 1000,
+  },
+  {
+    name: 'height',
+    group: 'layout',
+    type: types.pixel,
+    min: 0,
+    max: 1000,
+  },
+  {
+    name: 'grow',
+    group: 'layout',
+    type: types.grow,
+  },
+
+  // Function.
+  {
+    name: 'onClose',
+    group: 'function',
+    type: types.function,
+  },
+];

package/widgets/guild-user-profile/scenarios.js

@@ -1,54 +1,54 @@
-export default [
-  {
-    name: 'default',
-    props: {
-      initials: 'JDN',
-      pseudo: 'Prof',
-      firstName: 'Jean-Daniel',
-      lastName: 'Nicoud',
-      logoColor: '#4e73ff',
-      logoShape: 'triangle',
-      width: '800px',
-      height: '600px',
-    },
-  },
-  {
-    name: 'name',
-    props: {
-      initials: '',
-      pseudo: '',
-      firstName: 'Jean',
-      lastName: 'Christen',
-      logoColor: '#7abd24',
-      logoShape: 'star',
-      width: '800px',
-      height: '600px',
-    },
-  },
-  {
-    name: 'lastName',
-    props: {
-      initials: '',
-      pseudo: '',
-      firstName: '',
-      lastName: 'Dupond',
-      width: '800px',
-      height: '600px',
-    },
-  },
-  {
-    name: 'pseudo',
-    props: {
-      initials: '',
-      pseudo: 'blupi',
-      firstName: '',
-      lastName: '',
-      width: '800px',
-      height: '600px',
-    },
-  },
-  {
-    name: 'empty',
-    props: {},
-  },
-];
+export default [
+  {
+    name: 'default',
+    props: {
+      initials: 'JDN',
+      pseudo: 'Prof',
+      firstName: 'Jean-Daniel',
+      lastName: 'Nicoud',
+      logoColor: '#4e73ff',
+      logoShape: 'triangle',
+      width: '800px',
+      height: '600px',
+    },
+  },
+  {
+    name: 'name',
+    props: {
+      initials: '',
+      pseudo: '',
+      firstName: 'Jean',
+      lastName: 'Christen',
+      logoColor: '#7abd24',
+      logoShape: 'star',
+      width: '800px',
+      height: '600px',
+    },
+  },
+  {
+    name: 'lastName',
+    props: {
+      initials: '',
+      pseudo: '',
+      firstName: '',
+      lastName: 'Dupond',
+      width: '800px',
+      height: '600px',
+    },
+  },
+  {
+    name: 'pseudo',
+    props: {
+      initials: '',
+      pseudo: 'blupi',
+      firstName: '',
+      lastName: '',
+      width: '800px',
+      height: '600px',
+    },
+  },
+  {
+    name: 'empty',
+    props: {},
+  },
+];