goblin-desktop 2.0.0 → 2.0.2

package/widgets/desktop-state-monitor/widget.js

@@ -1,123 +1,123 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-const T = require('goblin-nabu');
-import * as styles from './styles';
-import Button from 'goblin-gadgets/widgets/button/widget';
-import Checkbox from 'goblin-gadgets/widgets/checkbox/widget';
-import DialogResizable from 'goblin-gadgets/widgets/dialog-resizable/widget';
-import StateMonitor from 'goblin-gadgets/widgets/state-monitor/widget';
-import RetroPanel from 'goblin-gadgets/widgets/retro-panel/widget';
-import Frame from 'goblin-laboratory/widgets/frame/widget';
-import {ColorManipulator} from 'goblin-theme';
-
-/******************************************************************************/
-
-class DesktopStateMonitor extends Widget {
-  constructor() {
-    super(...arguments);
-    this.styles = styles;
-
-    this.onToggleStateMonitor = this.onToggleStateMonitor.bind(this);
-  }
-
-  onToggleStateMonitor() {
-    this.doAs('desktop', 'show-state-monitor', {show: !this.props.showed});
-  }
-
-  /******************************************************************************/
-
-  renderStateMonitor() {
-    if (!this.props.showed) {
-      return null;
-    }
-
-    return (
-      <Frame
-        labId={this.context.labId}
-        store={this.context.store}
-        currentTheme="matrix"
-        themeContext={this.props.themeContext}
-      >
-        <DialogResizable
-          id="goblin-desktop/state-monitor"
-          zIndex="20"
-          titleBarText="Radar ― Backend State Monitor"
-          minWidth="500px"
-          minHeight="300px"
-          width="1000px"
-          height="600px"
-          horizontal="0px"
-          vertical="0px"
-          drawChildrenWhileResizing={true}
-          onCloseDialog={this.onToggleStateMonitor}
-        >
-          <StateMonitor
-            id={this.props.id}
-            onClose={this.onToggleStateMonitor}
-          />
-        </DialogResizable>
-      </Frame>
-    );
-  }
-
-  renderButton() {
-    if (this.context.theme.look.name === 'retro') {
-      return (
-        <RetroPanel
-          position="relative"
-          height="54px"
-          kind="metal-plate"
-          margin="3px"
-          padding="0px 40px"
-          radius="12px"
-          flexDirection="row"
-          justifyContent="center"
-          alignItems="center"
-          fillColor={ColorManipulator.darken(
-            this.context.theme.palette.base,
-            0.5
-          )}
-        >
-          <Checkbox
-            backgroundBrigtness="dark"
-            checked={this.props.showed}
-            onChange={this.onToggleStateMonitor}
-          />
-        </RetroPanel>
-      );
-    } else {
-      return (
-        <Button
-          kind="button-footer"
-          width="120px"
-          glyph="light/radar"
-          glyphColor={this.props.showed ? '#0f0' : null}
-          text={T('State')}
-          onClick={this.onToggleStateMonitor}
-        />
-      );
-    }
-  }
-
-  render() {
-    return (
-      <div className={this.styles.classNames.desktopState}>
-        {this.renderButton()}
-        {this.renderStateMonitor()}
-      </div>
-    );
-  }
-}
-
-/******************************************************************************/
-
-export default Widget.connect((state, props) => {
-  const desktopState = state.get(`backend.${props.id}`);
-  const themeContext = state.get(`backend.${window.labId}.themeContext`);
-
-  return {
-    showed: desktopState.get('showStateMonitor'),
-    history: desktopState.get('stateMonitorHistory'),
-    themeContext,
-  };
-})(DesktopStateMonitor);
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+const T = require('goblin-nabu');
+import * as styles from './styles';
+import Button from 'goblin-gadgets/widgets/button/widget';
+import Checkbox from 'goblin-gadgets/widgets/checkbox/widget';
+import DialogResizable from 'goblin-gadgets/widgets/dialog-resizable/widget';
+import StateMonitor from 'goblin-gadgets/widgets/state-monitor/widget';
+import RetroPanel from 'goblin-gadgets/widgets/retro-panel/widget';
+import Frame from 'goblin-laboratory/widgets/frame/widget';
+import {ColorManipulator} from 'goblin-theme';
+
+/******************************************************************************/
+
+class DesktopStateMonitor extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+
+    this.onToggleStateMonitor = this.onToggleStateMonitor.bind(this);
+  }
+
+  onToggleStateMonitor() {
+    this.doAs('desktop', 'show-state-monitor', {show: !this.props.showed});
+  }
+
+  /******************************************************************************/
+
+  renderStateMonitor() {
+    if (!this.props.showed) {
+      return null;
+    }
+
+    return (
+      <Frame
+        labId={this.context.labId}
+        store={this.context.store}
+        currentTheme="matrix"
+        themeContext={this.props.themeContext}
+      >
+        <DialogResizable
+          id="goblin-desktop/state-monitor"
+          zIndex="20"
+          titleBarText="Radar ― Backend State Monitor"
+          minWidth="500px"
+          minHeight="300px"
+          width="1000px"
+          height="600px"
+          horizontal="0px"
+          vertical="0px"
+          drawChildrenWhileResizing={true}
+          onCloseDialog={this.onToggleStateMonitor}
+        >
+          <StateMonitor
+            id={this.props.id}
+            onClose={this.onToggleStateMonitor}
+          />
+        </DialogResizable>
+      </Frame>
+    );
+  }
+
+  renderButton() {
+    if (this.context.theme.look.name === 'retro') {
+      return (
+        <RetroPanel
+          position="relative"
+          height="54px"
+          kind="metal-plate"
+          margin="3px"
+          padding="0px 40px"
+          radius="12px"
+          flexDirection="row"
+          justifyContent="center"
+          alignItems="center"
+          fillColor={ColorManipulator.darken(
+            this.context.theme.palette.base,
+            0.5
+          )}
+        >
+          <Checkbox
+            backgroundBrigtness="dark"
+            checked={this.props.showed}
+            onChange={this.onToggleStateMonitor}
+          />
+        </RetroPanel>
+      );
+    } else {
+      return (
+        <Button
+          kind="button-footer"
+          width="120px"
+          glyph="light/radar"
+          glyphColor={this.props.showed ? '#0f0' : null}
+          text={T('State')}
+          onClick={this.onToggleStateMonitor}
+        />
+      );
+    }
+  }
+
+  render() {
+    return (
+      <div className={this.styles.classNames.desktopState}>
+        {this.renderButton()}
+        {this.renderStateMonitor()}
+      </div>
+    );
+  }
+}
+
+/******************************************************************************/
+
+export default Widget.connect((state, props) => {
+  const desktopState = state.get(`backend.${props.id}`);
+  const themeContext = state.get(`backend.${window.labId}.themeContext`);
+
+  return {
+    showed: desktopState.get('showStateMonitor'),
+    history: desktopState.get('stateMonitorHistory'),
+    themeContext,
+  };
+})(DesktopStateMonitor);

package/widgets/desktop-taskbar/widget.js

@@ -1,57 +1,57 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import T from 't';
-import Container from 'goblin-gadgets/widgets/container/widget';
-import Button from 'goblin-gadgets/widgets/button/widget';
-import Separator from 'goblin-gadgets/widgets/separator/widget';
-import Taskbar from 'goblin-desktop/widgets/taskbar/widget.js';
-/******************************************************************************/
-
-class DesktopTaskbar extends Widget {
-  constructor() {
-    super(...arguments);
-
-    this.onChangeMandate = this.onChangeMandate.bind(this);
-  }
-
-  onChangeMandate() {
-    this.doAs('taskbar', 'change-mandate');
-  }
-
-  render() {
-    return (
-      <Container kind="left-bar">
-        <Button
-          textTransform="none"
-          text={this.props.id.split('@')[1]}
-          glyph={this.props.loading ? 'solid/spinner' : 'light/cube'}
-          kind="task-logo"
-          busy={this.props.working}
-        />
-        <Container kind="task-bar">
-          <Taskbar id={`taskbar@${this.props.id}`} desktopId={this.props.id} />
-          <Separator kind="sajex" />
-        </Container>
-        <Button
-          kind="task-show-footer"
-          glyph="solid/chevron-right"
-          tooltip={T('Montre ou cache la barre de pied de page')}
-          onClick={this.props.onToggleFooter}
-        />
-      </Container>
-    );
-  }
-}
-export default Widget.connect((state, props) => {
-  const working = state.get(`backend.${props.id}.working`);
-  const content = state.get(`backend.${props.id}.note`);
-  const userSession = Widget.getUserSession(state);
-  const prototypeMode = userSession.get('prototypeMode');
-  if (prototypeMode && content === 'sfx=on') {
-    window.mainGain.connect(window.mainAudioCtx.destination);
-  } else {
-    window.mainGain.disconnect();
-  }
-  return {working};
-})(DesktopTaskbar);
-/******************************************************************************/
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import T from 't';
+import Container from 'goblin-gadgets/widgets/container/widget';
+import Button from 'goblin-gadgets/widgets/button/widget';
+import Separator from 'goblin-gadgets/widgets/separator/widget';
+import Taskbar from 'goblin-desktop/widgets/taskbar/widget.js';
+/******************************************************************************/
+
+class DesktopTaskbar extends Widget {
+  constructor() {
+    super(...arguments);
+
+    this.onChangeMandate = this.onChangeMandate.bind(this);
+  }
+
+  onChangeMandate() {
+    this.doAs('taskbar', 'change-mandate');
+  }
+
+  render() {
+    return (
+      <Container kind="left-bar">
+        <Button
+          textTransform="none"
+          text={this.props.id.split('@')[1]}
+          glyph={this.props.loading ? 'solid/spinner' : 'light/cube'}
+          kind="task-logo"
+          busy={this.props.working}
+        />
+        <Container kind="task-bar">
+          <Taskbar id={`taskbar@${this.props.id}`} desktopId={this.props.id} />
+          <Separator kind="sajex" />
+        </Container>
+        <Button
+          kind="task-show-footer"
+          glyph="solid/chevron-right"
+          tooltip={T('Montre ou cache la barre de pied de page')}
+          onClick={this.props.onToggleFooter}
+        />
+      </Container>
+    );
+  }
+}
+export default Widget.connect((state, props) => {
+  const working = state.get(`backend.${props.id}.working`);
+  const content = state.get(`backend.${props.id}.note`);
+  const userSession = Widget.getUserSession(state);
+  const prototypeMode = userSession.get('prototypeMode');
+  if (prototypeMode && content === 'sfx=on') {
+    window.mainGain.connect(window.mainAudioCtx.destination);
+  } else {
+    window.mainGain.disconnect();
+  }
+  return {working};
+})(DesktopTaskbar);
+/******************************************************************************/

package/widgets/desktop-themes-menu/widget.js

@@ -1,121 +1,121 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import T from 't';
-import MainTabMenu from 'goblin-desktop/widgets/main-tab-menu/widget';
-
-/******************************************************************************/
-
-function compareThemes(t1, t2) {
-  const s1 = t1.text;
-  const s2 = t2.text;
-
-  if (s1 < s2) {
-    return -1;
-  }
-  if (s1 > s2) {
-    return 1;
-  }
-  return 0;
-}
-
-function pushThemes(result, state, isEggs) {
-  const a = [];
-
-  for (const key of Array.from(state.keys())) {
-    const additionalInfo = {
-      glyph: 'solid/tint',
-    };
-    const meta = state.get(`${key}.meta`, null);
-    let egg = false;
-    let glyph = null;
-    let glyphColor = null;
-    if (meta) {
-      egg = meta.get('egg', false);
-      glyph = meta.get('glyph', null);
-      glyphColor = meta.get('glyphColor', null);
-    }
-    if (egg === isEggs) {
-      if (glyph) {
-        additionalInfo.glyph = glyph;
-      }
-      if (glyphColor) {
-        additionalInfo.glyphColor = glyphColor;
-      }
-      const displayName = state.get(`${key}.displayName`) || key;
-      a.push({text: displayName, value: key, ...additionalInfo});
-    }
-  }
-
-  a.sort((t1, t2) => compareThemes(t1, t2));
-
-  for (const item of a) {
-    result.push(item);
-  }
-}
-
-function getThemes(state, accessToEggsThemes) {
-  const result = [];
-
-  // Push standards themes.
-  pushThemes(result, state, false);
-
-  if (accessToEggsThemes) {
-    // Push horizontal separator...
-    result.push({separator: true, kind: 'menu-line'});
-    // ...then eggs themes.
-    pushThemes(result, state, true);
-  }
-
-  return result;
-}
-
-/******************************************************************************/
-
-class DesktopThemesMenuNC extends Widget {
-  constructor() {
-    super(...arguments);
-
-    this.onChangeTheme = this.onChangeTheme.bind(this);
-  }
-
-  onChangeTheme(name) {
-    this.doAs('desktop', 'change-theme', {name});
-  }
-
-  render() {
-    const {currentTheme, themes, accessToEggsThemes} = this.props;
-
-    const glyph = accessToEggsThemes ? 'regular/tint' : 'solid/tint';
-
-    return (
-      <MainTabMenu
-        glyph={glyph}
-        kind="main-tab-right"
-        horizontalShift="-10px"
-        tooltip={T('Choix du thème')}
-        items={themes}
-        currentItemValue={currentTheme}
-        onChange={this.onChangeTheme}
-      />
-    );
-  }
-}
-
-/******************************************************************************/
-
-const DesktopThemesMenu = Widget.connect((state) => {
-  const themeContext = state.get(`backend.${window.labId}.themeContext`);
-  const currentTheme = state.get(`backend.${window.labId}.theme`);
-
-  const userSession = Widget.getUserSession(state);
-  const accessToEggsThemes = userSession.get('accessToEggsThemes') || false;
-
-  const themes = getThemes(
-    state.get(`backend.theme-composer@${themeContext}.themes`),
-    accessToEggsThemes
-  );
-
-  return {themeContext, currentTheme, themes, accessToEggsThemes};
-})(DesktopThemesMenuNC);
-
-export default DesktopThemesMenu;
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import T from 't';
+import MainTabMenu from 'goblin-desktop/widgets/main-tab-menu/widget';
+
+/******************************************************************************/
+
+function compareThemes(t1, t2) {
+  const s1 = t1.text;
+  const s2 = t2.text;
+
+  if (s1 < s2) {
+    return -1;
+  }
+  if (s1 > s2) {
+    return 1;
+  }
+  return 0;
+}
+
+function pushThemes(result, state, isEggs) {
+  const a = [];
+
+  for (const key of Array.from(state.keys())) {
+    const additionalInfo = {
+      glyph: 'solid/tint',
+    };
+    const meta = state.get(`${key}.meta`, null);
+    let egg = false;
+    let glyph = null;
+    let glyphColor = null;
+    if (meta) {
+      egg = meta.get('egg', false);
+      glyph = meta.get('glyph', null);
+      glyphColor = meta.get('glyphColor', null);
+    }
+    if (egg === isEggs) {
+      if (glyph) {
+        additionalInfo.glyph = glyph;
+      }
+      if (glyphColor) {
+        additionalInfo.glyphColor = glyphColor;
+      }
+      const displayName = state.get(`${key}.displayName`) || key;
+      a.push({text: displayName, value: key, ...additionalInfo});
+    }
+  }
+
+  a.sort((t1, t2) => compareThemes(t1, t2));
+
+  for (const item of a) {
+    result.push(item);
+  }
+}
+
+function getThemes(state, accessToEggsThemes) {
+  const result = [];
+
+  // Push standards themes.
+  pushThemes(result, state, false);
+
+  if (accessToEggsThemes) {
+    // Push horizontal separator...
+    result.push({separator: true, kind: 'menu-line'});
+    // ...then eggs themes.
+    pushThemes(result, state, true);
+  }
+
+  return result;
+}
+
+/******************************************************************************/
+
+class DesktopThemesMenuNC extends Widget {
+  constructor() {
+    super(...arguments);
+
+    this.onChangeTheme = this.onChangeTheme.bind(this);
+  }
+
+  onChangeTheme(name) {
+    this.doAs('desktop', 'change-theme', {name});
+  }
+
+  render() {
+    const {currentTheme, themes, accessToEggsThemes} = this.props;
+
+    const glyph = accessToEggsThemes ? 'regular/tint' : 'solid/tint';
+
+    return (
+      <MainTabMenu
+        glyph={glyph}
+        kind="main-tab-right"
+        horizontalShift="-10px"
+        tooltip={T('Choix du thème')}
+        items={themes}
+        currentItemValue={currentTheme}
+        onChange={this.onChangeTheme}
+      />
+    );
+  }
+}
+
+/******************************************************************************/
+
+const DesktopThemesMenu = Widget.connect((state) => {
+  const themeContext = state.get(`backend.${window.labId}.themeContext`);
+  const currentTheme = state.get(`backend.${window.labId}.theme`);
+
+  const userSession = Widget.getUserSession(state);
+  const accessToEggsThemes = userSession.get('accessToEggsThemes') || false;
+
+  const themes = getThemes(
+    state.get(`backend.theme-composer@${themeContext}.themes`),
+    accessToEggsThemes
+  );
+
+  return {themeContext, currentTheme, themes, accessToEggsThemes};
+})(DesktopThemesMenuNC);
+
+export default DesktopThemesMenu;