goblin-desktop 2.0.0 → 2.0.2

package/widgets/desktop-clock-clock/styles.js

@@ -1,56 +1,56 @@
-import {Unit} from 'goblin-theme';
-const px = Unit.toPx;
-const n = Unit.toValue;
-
-/******************************************************************************/
-
-export const propNames = ['size', 'showClock'];
-
-export default function styles(theme, props) {
-  const {size, showClock} = props;
-
-  const s = n(size);
-
-  const bh = n(theme.shapes.footerHeight);
-  const bw = theme.look.name === 'retro' ? 65 * 2 : bh * 3;
-
-  const cx = showClock ? 20 + s / 2 : bw / 2;
-  const cy = showClock ? bh + 20 + s / 2 : bh / 2;
-
-  const scale = showClock
-    ? 1
-    : theme.look.name === 'retro'
-    ? 50 / s
-    : (bh - 20) / s;
-
-  const desktopClockClock = {
-    position: 'fixed',
-    width: px(s),
-    height: px(s),
-    right: px(cx - s / 2),
-    bottom: px(cy - s / 2),
-    transform: `scale(${scale})`,
-    transition: '1s ease-out',
-  };
-
-  const desktopClockClockHidden = {
-    ...desktopClockClock,
-    right: px(-s * 0.9),
-    transition: '0.3s ease-out', // transition for hidden to bottom
-  };
-
-  const desktopClockClockFix = {
-    ...desktopClockClock,
-    pointerEvents: 'none',
-  };
-
-  /******************************************************************************/
-
-  return {
-    desktopClockClock,
-    desktopClockClockHidden,
-    desktopClockClockFix,
-  };
-}
-
-/******************************************************************************/
+import {Unit} from 'goblin-theme';
+const px = Unit.toPx;
+const n = Unit.toValue;
+
+/******************************************************************************/
+
+export const propNames = ['size', 'showClock'];
+
+export default function styles(theme, props) {
+  const {size, showClock} = props;
+
+  const s = n(size);
+
+  const bh = n(theme.shapes.footerHeight);
+  const bw = theme.look.name === 'retro' ? 65 * 2 : bh * 3;
+
+  const cx = showClock ? 20 + s / 2 : bw / 2;
+  const cy = showClock ? bh + 20 + s / 2 : bh / 2;
+
+  const scale = showClock
+    ? 1
+    : theme.look.name === 'retro'
+    ? 50 / s
+    : (bh - 20) / s;
+
+  const desktopClockClock = {
+    position: 'fixed',
+    width: px(s),
+    height: px(s),
+    right: px(cx - s / 2),
+    bottom: px(cy - s / 2),
+    transform: `scale(${scale})`,
+    transition: '1s ease-out',
+  };
+
+  const desktopClockClockHidden = {
+    ...desktopClockClock,
+    right: px(-s * 0.9),
+    transition: '0.3s ease-out', // transition for hidden to bottom
+  };
+
+  const desktopClockClockFix = {
+    ...desktopClockClock,
+    pointerEvents: 'none',
+  };
+
+  /******************************************************************************/
+
+  return {
+    desktopClockClock,
+    desktopClockClockHidden,
+    desktopClockClockFix,
+  };
+}
+
+/******************************************************************************/

package/widgets/desktop-clock-clock/widget.js

@@ -1,96 +1,96 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import * as styles from './styles';
-import AnalogClock from 'goblin-gadgets/widgets/analog-clock/widget';
-
-/******************************************************************************/
-
-export default class DesktopClockClock extends Widget {
-  constructor() {
-    super(...arguments);
-    this.styles = styles;
-
-    this.onMouseOver = this.onMouseOver.bind(this);
-
-    this.state = {
-      clockHidden: false,
-    };
-
-    this.lastSize = this.props.size;
-    this.lastLook = this.props.look;
-    this.lastShowClock = false;
-    this.lock = false;
-  }
-
-  //#region get/set
-  get clockHidden() {
-    return this.state.clockHidden;
-  }
-
-  set clockHidden(value) {
-    this.setState({
-      clockHidden: value,
-    });
-  }
-  //#endregion
-
-  doLock(delay) {
-    this.lock = true;
-    setTimeout(() => (this.lock = false), delay);
-  }
-
-  onMouseOver() {
-    if (!this.props.showClock || this.lock || this.props.mode === 'fix') {
-      return;
-    }
-
-    this.doLock(1000);
-    this.clockHidden = true;
-    setTimeout(() => (this.clockHidden = false), 2000);
-  }
-
-  render() {
-    let clockHidden = this.clockHidden && this.props.showClock;
-
-    if (
-      this.props.size !== this.lastSize ||
-      this.props.look !== this.lastLook ||
-      (this.props.showClock && !this.lastShowClock)
-    ) {
-      clockHidden = false;
-      this.lock = true;
-      setTimeout(() => (this.lock = false), 1000);
-    }
-
-    this.lastSize = this.props.size;
-    this.lastLook = this.props.look;
-    this.lastShowClock = this.props.showClock;
-
-    return (
-      <div
-        className={
-          this.props.mode === 'fix'
-            ? this.styles.classNames.desktopClockClockFix
-            : clockHidden
-            ? this.styles.classNames.desktopClockClockHidden
-            : this.styles.classNames.desktopClockClock
-        }
-        onClick={this.props.onClick}
-        onMouseOver={this.onMouseOver}
-      >
-        <AnalogClock
-          size={this.props.size}
-          look={this.props.look}
-          limit={this.props.showClock ? 1 : 3}
-          digitalTime={this.props.digital}
-          transition="1.0s ease-out"
-          mouseOver={this.props.mouseOver}
-          mouseOut={this.props.mouseOut}
-          serverTick={this.props.serverTick}
-        />
-      </div>
-    );
-  }
-}
-
-/******************************************************************************/
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles';
+import AnalogClock from 'goblin-gadgets/widgets/analog-clock/widget';
+
+/******************************************************************************/
+
+export default class DesktopClockClock extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+
+    this.onMouseOver = this.onMouseOver.bind(this);
+
+    this.state = {
+      clockHidden: false,
+    };
+
+    this.lastSize = this.props.size;
+    this.lastLook = this.props.look;
+    this.lastShowClock = false;
+    this.lock = false;
+  }
+
+  //#region get/set
+  get clockHidden() {
+    return this.state.clockHidden;
+  }
+
+  set clockHidden(value) {
+    this.setState({
+      clockHidden: value,
+    });
+  }
+  //#endregion
+
+  doLock(delay) {
+    this.lock = true;
+    setTimeout(() => (this.lock = false), delay);
+  }
+
+  onMouseOver() {
+    if (!this.props.showClock || this.lock || this.props.mode === 'fix') {
+      return;
+    }
+
+    this.doLock(1000);
+    this.clockHidden = true;
+    setTimeout(() => (this.clockHidden = false), 2000);
+  }
+
+  render() {
+    let clockHidden = this.clockHidden && this.props.showClock;
+
+    if (
+      this.props.size !== this.lastSize ||
+      this.props.look !== this.lastLook ||
+      (this.props.showClock && !this.lastShowClock)
+    ) {
+      clockHidden = false;
+      this.lock = true;
+      setTimeout(() => (this.lock = false), 1000);
+    }
+
+    this.lastSize = this.props.size;
+    this.lastLook = this.props.look;
+    this.lastShowClock = this.props.showClock;
+
+    return (
+      <div
+        className={
+          this.props.mode === 'fix'
+            ? this.styles.classNames.desktopClockClockFix
+            : clockHidden
+            ? this.styles.classNames.desktopClockClockHidden
+            : this.styles.classNames.desktopClockClock
+        }
+        onClick={this.props.onClick}
+        onMouseOver={this.onMouseOver}
+      >
+        <AnalogClock
+          size={this.props.size}
+          look={this.props.look}
+          limit={this.props.showClock ? 1 : 3}
+          digitalTime={this.props.digital}
+          transition="1.0s ease-out"
+          mouseOver={this.props.mouseOver}
+          mouseOut={this.props.mouseOut}
+          serverTick={this.props.serverTick}
+        />
+      </div>
+    );
+  }
+}
+
+/******************************************************************************/

package/widgets/desktop-clock-menu/styles.js

@@ -1,129 +1,129 @@
-import {Unit} from 'goblin-theme';
-import {ColorManipulator} from 'goblin-theme';
-
-/******************************************************************************/
-
-function getHatching(d, color1, color2) {
-  const dd = Unit.multiply(d, 2);
-  return `repeating-linear-gradient(-45deg, ${color1}, ${color1} ${d}, ${color2} 0px, ${color2} ${dd})`;
-}
-
-/******************************************************************************/
-
-export const propNames = ['right', 'bottom', 'looks', 'clockSize'];
-
-export default function styles(theme, props) {
-  const {right, bottom, looks, clockSize} = props;
-
-  const nx =
-    {
-      1: 1,
-      2: 2,
-      3: 3,
-      4: 4,
-      5: 5,
-      6: 3,
-      7: 4,
-      8: 4,
-      9: 5,
-      10: 5,
-      11: 5,
-      12: 4,
-    }[looks.length] || 5;
-
-  const size = Unit.multiply(clockSize, 1.3);
-  const m = '10px';
-
-  const fullScreen = {
-    visibility: 'visible',
-    position: 'fixed',
-    zIndex: 20,
-    top: '0px',
-    left: '0px',
-    width: '100%',
-    height: '100%',
-    userSelect: 'none',
-    cursor: 'default',
-    backgroundColor: 'rgba(0, 0, 0, 0.2)',
-  };
-
-  const desktopClockMenu = {
-    position: 'absolute',
-    right: right,
-    bottom: bottom,
-    padding: m,
-    width: Unit.multiply(size, nx),
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    backgroundColor: theme.palette.menuItemInactiveBackground,
-    boxShadow: '0px 0px 200px 50px black',
-  };
-
-  // Use + for dispatch the style to next brother (only one).
-  // Use ~ for dispatch the style to all the following brothers.
-  // Use nothing for dispatch the style to children.
-  const menuItem = {
-    'position': 'relative',
-    'width': size,
-    'height': size,
-    'backgroundColor': theme.palette.menuItemInactiveBackground,
-    ':hover .background-hover': {
-      opacity: 1,
-    },
-    ':hover .clock-hover': {
-      transform: 'scale(1.05)',
-    },
-  };
-
-  const menuItemSelected = {
-    ...menuItem,
-    backgroundColor: theme.palette.menuItemActiveBackground,
-  };
-
-  const hc1 = ColorManipulator.emphasize(
-    theme.palette.menuItemInactiveBackground,
-    0.1
-  );
-  const hc2 = ColorManipulator.emphasize(
-    theme.palette.menuItemInactiveBackground,
-    0.3
-  );
-
-  const background = {
-    position: 'absolute',
-    left: '0px',
-    right: '0px',
-    top: '0px',
-    bottom: '0px',
-    background: getHatching('20px', hc1, hc2),
-    opacity: 0,
-    transition: 'all 1.2s ease',
-  };
-
-  const clock = {
-    position: 'absolute',
-    left: '0px',
-    right: '0px',
-    top: '0px',
-    bottom: '0px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    transition: 'all 0.5s ease',
-  };
-
-  /******************************************************************************/
-
-  return {
-    fullScreen,
-    desktopClockMenu,
-
-    menuItem,
-    menuItemSelected,
-    background,
-    clock,
-  };
-}
-
-/******************************************************************************/
+import {Unit} from 'goblin-theme';
+import {ColorManipulator} from 'goblin-theme';
+
+/******************************************************************************/
+
+function getHatching(d, color1, color2) {
+  const dd = Unit.multiply(d, 2);
+  return `repeating-linear-gradient(-45deg, ${color1}, ${color1} ${d}, ${color2} 0px, ${color2} ${dd})`;
+}
+
+/******************************************************************************/
+
+export const propNames = ['right', 'bottom', 'looks', 'clockSize'];
+
+export default function styles(theme, props) {
+  const {right, bottom, looks, clockSize} = props;
+
+  const nx =
+    {
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+      6: 3,
+      7: 4,
+      8: 4,
+      9: 5,
+      10: 5,
+      11: 5,
+      12: 4,
+    }[looks.length] || 5;
+
+  const size = Unit.multiply(clockSize, 1.3);
+  const m = '10px';
+
+  const fullScreen = {
+    visibility: 'visible',
+    position: 'fixed',
+    zIndex: 20,
+    top: '0px',
+    left: '0px',
+    width: '100%',
+    height: '100%',
+    userSelect: 'none',
+    cursor: 'default',
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+  };
+
+  const desktopClockMenu = {
+    position: 'absolute',
+    right: right,
+    bottom: bottom,
+    padding: m,
+    width: Unit.multiply(size, nx),
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    backgroundColor: theme.palette.menuItemInactiveBackground,
+    boxShadow: '0px 0px 200px 50px black',
+  };
+
+  // Use + for dispatch the style to next brother (only one).
+  // Use ~ for dispatch the style to all the following brothers.
+  // Use nothing for dispatch the style to children.
+  const menuItem = {
+    'position': 'relative',
+    'width': size,
+    'height': size,
+    'backgroundColor': theme.palette.menuItemInactiveBackground,
+    ':hover .background-hover': {
+      opacity: 1,
+    },
+    ':hover .clock-hover': {
+      transform: 'scale(1.05)',
+    },
+  };
+
+  const menuItemSelected = {
+    ...menuItem,
+    backgroundColor: theme.palette.menuItemActiveBackground,
+  };
+
+  const hc1 = ColorManipulator.emphasize(
+    theme.palette.menuItemInactiveBackground,
+    0.1
+  );
+  const hc2 = ColorManipulator.emphasize(
+    theme.palette.menuItemInactiveBackground,
+    0.3
+  );
+
+  const background = {
+    position: 'absolute',
+    left: '0px',
+    right: '0px',
+    top: '0px',
+    bottom: '0px',
+    background: getHatching('20px', hc1, hc2),
+    opacity: 0,
+    transition: 'all 1.2s ease',
+  };
+
+  const clock = {
+    position: 'absolute',
+    left: '0px',
+    right: '0px',
+    top: '0px',
+    bottom: '0px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    transition: 'all 0.5s ease',
+  };
+
+  /******************************************************************************/
+
+  return {
+    fullScreen,
+    desktopClockMenu,
+
+    menuItem,
+    menuItemSelected,
+    background,
+    clock,
+  };
+}
+
+/******************************************************************************/