Add Floating Menu

.gitignore

@@ -1,3 +1,4 @@
 node_modules
+dist
 *.log
 .idea

package.json

@@ -8,7 +8,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "prepublish": ". ./.scripts/prepublish.sh",
+    "prepublish": "sh ./.scripts/prepublish.sh",
     "lint": "eslint src",
     "lintfix": "eslint src --fix",
     "testonly": "mocha --require .scripts/mocha_runner src/**/__tests__/**/*.js",

src/libs/key_events.js

@@ -10,6 +10,8 @@ export const features = {
   PREV_STORY: 7,
   SEARCH: 8,
   DOWN_PANEL_IN_RIGHT: 9,
+  NEXT_KIND: 10,
+  PREV_KIND: 11,
 };
 
 export function isModifierPressed(e) {

src/libs/menu_positions.js

@@ -0,0 +1,6 @@
+export const boxPositions = {
+  BOTTOM_LEFT: 'BOTTOM_LEFT',
+  BOTTOM_RIGHT: 'BOTTOM_RIGHT',
+  TOP_LEFT: 'TOP_LEFT',
+  TOP_RIGHT: 'TOP_RIGHT',
+};

src/modules/api/actions/api.js

@@ -24,6 +24,21 @@ export function jumpToStory(storyKinds, selectedKind, selectedStory, direction)
   };
 }
 
+function jumpToKind(storyKinds, selectedKind, selectedStory, direction) {
+  const currentIndex = storyKinds.findIndex(({ kind }) => (kind === selectedKind));
+  if (currentIndex === -1) return selectedKind;
+
+  const jumpedStoryKind = storyKinds[currentIndex + direction];
+
+  const jumpedKind = jumpedStoryKind ? jumpedStoryKind.kind : selectedKind;
+  const jumpedStory = jumpedStoryKind ? jumpedStoryKind.stories[0] : selectedStory;
+
+  return {
+    selectedKind: jumpedKind,
+    selectedStory: jumpedStory,
+  };
+}
+
 export function ensureKind(storyKinds, selectedKind) {
   if (!storyKinds) return selectedKind;
 
@@ -77,6 +92,20 @@ export default {
     });
   },
 
+  jumpToKind({ clientStore }, direction) {
+    clientStore.update((state) => {
+      let {
+        selectedKind,
+        selectedStory,
+      } = jumpToKind(state.stories, state.selectedKind, state.selectedStory, direction);
+
+      selectedKind = ensureKind(state.stories, selectedKind);
+      selectedStory = ensureStory(state.stories, selectedKind, selectedStory);
+
+      return { selectedKind, selectedStory };
+    });
+  },
+
   setOptions({ clientStore }, options) {
     clientStore.update((state) => {
       const newOptions = pick(options, Object.keys(state.uiOptions));

src/modules/shortcuts/actions/shortcuts.js

@@ -29,6 +29,12 @@ export default {
       case features.PREV_STORY:
         apiActions.api.jumpToStory(context, -1);
         break;
+      case features.NEXT_KIND:
+        apiActions.api.jumpToKind(context, 1);
+        break;
+      case features.PREV_KIND:
+        apiActions.api.jumpToKind(context, -1);
+        break;
       default:
         clientStore.update((state) => {
           const newOptions = keyEventToOptions(state.shortcutOptions, event);

src/modules/ui/components/floating_menu/floating_block.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { colorScheme, floating } from '../theme';
+import { boxPositions } from '../../../../libs/menu_positions';
+
+const rootStyle = {
+  position: 'absolute',
+
+  backgroundColor: colorScheme.block,
+  borderRadius: '4px 4px 0px 0px',
+  paddingBottom: 2,
+  ...floating,
+};
+
+function getPosition(pos) {
+  switch (pos) {
+    case boxPositions.BOTTOM_RIGHT:
+      return {
+        right: 10,
+        bottom: 20,
+      };
+    case boxPositions.TOP_LEFT:
+      return {
+        left: 10,
+        top: 20,
+      };
+    case boxPositions.TOP_RIGHT:
+      return {
+        right: 10,
+        top: 20,
+      };
+    default:
+      return {
+        left: 10,
+        bottom: 20,
+      };
+  }
+}
+
+const FloatingBlock = ({ position, children }) => (
+  <div style={{ ...rootStyle, ...getPosition(position) }}>
+    {children}
+  </div>
+);
+
+FloatingBlock.propTypes = {
+  position: React.PropTypes.string,
+  children: React.PropTypes.element,
+};
+
+export default FloatingBlock;

src/modules/ui/components/floating_menu/floating_menu.js

@@ -0,0 +1,236 @@
+import React from 'react';
+import { features } from '../../../../libs/key_events';
+import { colorScheme, baseFonts } from '../theme';
+import svg from './svg_package';
+
+const TRANSITION = '500ms ease 0ms';
+
+const rootStyle = {
+  ...baseFonts,
+  fontSize: 12,
+  backgroundColor: colorScheme.block,
+  paddingTop: 4,
+  maxWidth: 400,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  transition: `height ${TRANSITION}`,
+};
+
+
+function getOptionsList(shortcutOptions, platform) {
+  // manage two separate shortcut keys for
+  // 'mac' & other (windows, linux) platforms
+  const isMac = (platform && platform.indexOf('mac') !== -1);
+  const keyTemplate = isMac ? ['⌘ ⇧ ', '⌃ ⇧ '] : ['Ctrl + Shift + '];
+  const getKeys = (key) => keyTemplate.map(val => val.concat(key)).join(' / ');
+
+  const OptionsList = [
+    {
+      name: 'Fullscreen Mode',
+      keys: getKeys('F'),
+      event: features.FULLSCREEN,
+      value: shortcutOptions.goFullScreen,
+    },
+    {
+      name: 'Addons Panel',
+      keys: getKeys('D'),
+      event: features.DOWN_PANEL,
+      value: shortcutOptions.showDownPanel,
+    },
+    {
+      name: 'Stories Panel',
+      keys: getKeys('L'),
+      event: features.LEFT_PANEL,
+      value: shortcutOptions.showLeftPanel,
+    },
+    {
+      name: 'Addons Panel on the right',
+      keys: getKeys('J'),
+      event: features.DOWN_PANEL_IN_RIGHT,
+      value: shortcutOptions.downPanelInRight,
+    },
+    {
+      name: 'Search Box',
+      keys: getKeys('P'),
+      event: features.SEARCH,
+      value: shortcutOptions.showSearchBox,
+    },
+  ];
+  return OptionsList;
+}
+
+class FloatingMenu extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      collapsed: true,
+      short: false,
+    };
+
+    this.hadnleMenu = this.hadnleMenu.bind(this);
+  }
+
+  handleOption(event) {
+    return () => {
+      this.props.emulShortcuts(event);
+    };
+  }
+
+  hadnleMenu() {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
+  renderOptions() {
+    const itemStyle = {
+      cursor: 'pointer',
+      userSelect: 'none',
+      backgroundColor: colorScheme.canvasAlt,
+      margin: 4,
+      marginBottom: 1,
+      marginTop: 1,
+      padding: 1,
+      paddingRight: 8,
+      paddingLeft: 4,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    };
+
+    const iconStyle = {
+      width: 18,
+      opacity: colorScheme.iconsOpacity,
+      marginRight: 8,
+    };
+
+    const blockStyle = {
+      overflowY: 'hidden',
+      backgroundColor: colorScheme.layoutAlt,
+    };
+
+    const option = (val, key) => (
+        <div
+          key={key}
+          style={itemStyle}
+          onClick={this.handleOption(val.event)}
+          title={val.keys}
+        >
+         <img
+           style={iconStyle}
+           src={val.value ? svg.checked_box : svg.unchecked_box}
+           alt="checked_box"
+         />
+         <span>{`${val.name}`}</span>
+        </div>
+    );
+
+
+    return (
+      <div style={blockStyle}>
+        {<div style={{ ...itemStyle, height: 1 }} />}
+        {getOptionsList(this.props.shortcutOptions).map(
+          (val, ind) => option(val, ind)
+        )}
+        {<div style={{ ...itemStyle, height: 20 }} />}
+      </div>
+    );
+  }
+
+  renderNavigation() {
+    const blockStyle = {
+      background: colorScheme.block,
+      height: 22,
+      paddingLeft: 6,
+      display: 'flex',
+      justifyContent: 'space-between',
+    };
+
+    const btnsStyle = {
+      display: 'flex',
+      justifyContent: 'space-between',
+      marginRight: 8,
+    };
+
+    const iconStyle = {
+      width: 22,
+      margin: '0px 6px',
+      opacity: colorScheme.iconsOpacity,
+      cursor: 'pointer',
+    };
+
+    const menuStyle = {
+      ...iconStyle,
+      margin: 0,
+      transition: `transform ${TRANSITION}`,
+      transform: this.state.collapsed ? 'rotate(0.75turn)' : '',
+    };
+
+    return (
+      <div>
+        <div style={blockStyle}>
+         <img
+           style={menuStyle}
+           src={svg.menu}
+           alt="menu" title="toggle menu"
+           onClick={this.hadnleMenu}
+         />
+
+         <div style={btnsStyle}>
+           <div onClick={this.handleOption(features.PREV_KIND)}>
+             <img
+               style={iconStyle}
+               src={svg.fast_rewind}
+               alt="previous" title="previous story group"
+             />
+           </div>
+           <div onClick={this.handleOption(features.PREV_STORY)}>
+             <img
+               style={iconStyle}
+               src={svg.skip_previous}
+               alt="previous" title="previous story"
+             />
+           </div>
+           <div onClick={this.handleOption(features.NEXT_STORY)}>
+             <img
+               style={iconStyle}
+               src={svg.skip_next}
+               alt="next" title="next story"
+             />
+           </div>
+           <div onClick={this.handleOption(features.NEXT_KIND)}>
+             <img
+               style={iconStyle}
+               src={svg.fast_forward}
+               alt="next" title="next story group"
+             />
+           </div>
+         </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const blockStyle = {
+      ...rootStyle,
+      height: this.state.collapsed ? 22 : 136,
+    };
+
+    return (
+      <div style={blockStyle}>
+        {this.renderOptions()}
+        {this.renderNavigation()}
+      </div>
+    );
+  }
+}
+
+FloatingMenu.propTypes = {
+  selectedKind: React.PropTypes.string,
+  selectedStory: React.PropTypes.string,
+  shortcutOptions: React.PropTypes.object,
+  emulShortcuts: React.PropTypes.func,
+};
+
+export default FloatingMenu;

src/modules/ui/components/floating_menu/index.js

@@ -0,0 +1 @@
+export FloatingMenu from './floating_menu';