Add Floating Menu #69

usulpro · 2017-01-10T23:38:25Z

It implements #56

I moved all items from 'keyboard shortcuts' to menu wich avalibale in the left panel. And when the left panel is hidden it floats in the preview area. It also has buttons to browse through stories. It gives access to Storybook core functionalities both by a mouse and a touchscreen from normal and fullscreen view.

here is a demo page to check it on mobile device.

arunoda · 2017-01-11T00:26:56Z

This is great. Here's a list of common UI suggestions.

Add a way to show our existing keymap window. (Add a new section called Keyboard shortcuts in the menu)
I wanna see this on the top in the normal view: http://recordit.co/499hST1YVy
I am not a fan of the transition when opening the page. Shall we remove it or make it very speed.

arunoda · 2017-01-11T00:29:33Z

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

@@ -0,0 +1,165 @@
+/* eslint-disable */


Can't we get this via NPM?

It's just a bundle with svg images which I use in my menu. I have two reasons to put them into one file:

to don't bloat src with a bunch of image files

to don't add new dependency to project (I need here file-loader or base64-image-loader)

So I just prebuild it manually with base64-image-loader. Maybe it could be usefull later if you'll want to extend it with more images? But if you don't like such approach could you suggest the better way how to get this images?

arunoda · 2017-01-11T00:33:26Z

src/modules/ui/routes.js

  const root = (
    <div>
      <Layout
-        leftPanel={() => (<LeftPanel />)}
+        leftPanel={(menu) => (<LeftPanel floatingMenu={menu} />)}


I don't like getting the menu from a function. Since we define the floatingMenu inside here. Let's use it directly.

Ok I removed it from here

arunoda · 2017-01-11T01:16:55Z

@mnmtanish could you review this too?

thani-sh · 2017-01-11T01:36:03Z

Sure, I'll check it out today evening.

usulpro · 2017-01-11T18:33:31Z

I fixed it according your suggestion and updated demo page.

I added new menu item "Keyboard shortcuts". But the keymap window is visible only in normal view. How do you think is it Ok? (BTW did you noticed that if you hold mouse over any menu item, the tooltip with keyboard shortcut will be shown?) Another idea to show keyboard shortcuts may be to change menu item names to shortcuts when the mouse is over the "Keyboard shortcuts" menu item.
I moved it as you asked and make menu appearing from below (I'll rename 'Footer' to 'Menu' then)
I sped up transition to 100ms but if you still don't like it I can remove it complitely

thani-sh · 2017-01-22T15:02:35Z

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;


Shouldn't we return both selectedKind and selectedStory ?

sure! fixed :)

thani-sh · 2017-01-22T15:10:59Z

src/modules/ui/components/left_panel/header.js


 const linkStyle = {
  textDecoration: 'none',
 };

-const Header = ({ openShortcutsHelp, name, url }) => (
+const Header = ({/* openShortcutsHelp,*/ name, url }) => (


Just delete unused code, we can always git checkout if we need them again

Found some more below, check them too

thani-sh · 2017-01-22T15:14:11Z

.gitignore

@@ -1,3 +1,4 @@
 node_modules
+dist


Move this to a new PR, this one needs to be discussed more. Having dist on the repo sucks but we did it anyway so that storybook could be installed from the Github repo

Oh, no problem!
I just revert it and make npm run prepublish before pushing

usulpro · 2017-01-22T20:47:14Z

dist/libs/key_events.js

-  PREV_STORY: 7,
-  SEARCH: 8,
-  DOWN_PANEL_IN_RIGHT: 9
+  FULLSCREEN: 'FULLSCREEN',


I changed it to strings because it was hard to setup tests for that. Now all test passed so if it matters I can revert it if you want!?

usulpro · 2017-01-22T20:49:03Z

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

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


ESLint complains here. Should I disable it here?

usulpro · 2017-01-22T21:00:20Z

BTW don't you want to move 'text filter' also into this menu? (or add an item to hide it)
I can add this if you like it

usulpro · 2017-02-16T07:22:34Z

@arunoda, @mnmtanish!
Is it possible to merge this?

Typescript declaration updates

Provide storybook context to render

Ignore dist files

…ils-15.3.1 [email protected] untested ⚠️

ndelangen · 2017-04-15T14:25:55Z

Let's create a PR here: https://github.com/storybooks/storybook

usulpro added 5 commits January 9, 2017 23:31

windows support

166a9b5

Floating menu

b502611

menu position

2e34a7f

add jumpToKind

f299df1

enlarge buttons for touchscreens

8b29df3

arunoda reviewed Jan 11, 2017

View reviewed changes

update

0357364

thani-sh suggested changes Jan 22, 2017

View reviewed changes

usulpro added 2 commits January 23, 2017 00:07

update2

118d289

update2.tests

e42e331

usulpro commented Jan 22, 2017

View reviewed changes

ndelangen pushed a commit that referenced this pull request Apr 2, 2017

Merge pull request #69 from frederickfogerty/fred-update-ts-definitions

cfc7eaf

Typescript declaration updates

ndelangen pushed a commit that referenced this pull request Apr 2, 2017

Merge pull request #69 from storybooks/storybook-context

fba1264

Provide storybook context to render

ndelangen pushed a commit that referenced this pull request Apr 10, 2017

Merge pull request #69 from kadirahq/ignore-dist

f9f3526

Ignore dist files

ndelangen pushed a commit that referenced this pull request Apr 10, 2017

Merge pull request #69 from kadirahq/greenkeeper-react-addons-test-ut…

4c90a9d

…ils-15.3.1 [email protected] untested ⚠️

ndelangen closed this Apr 15, 2017

usulpro mentioned this pull request Apr 22, 2017

Enter Full Screen mode without a keyboard storybookjs/storybook#314

Closed

usulpro mentioned this pull request Apr 30, 2017

Feature: Menu with core functionalities storybookjs/storybook#981

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Floating Menu #69

Add Floating Menu #69

usulpro commented Jan 10, 2017

arunoda commented Jan 11, 2017 •

edited

Loading

arunoda Jan 11, 2017

usulpro Jan 11, 2017

arunoda Jan 11, 2017

usulpro Jan 11, 2017

arunoda commented Jan 11, 2017

thani-sh commented Jan 11, 2017

usulpro commented Jan 11, 2017 •

edited

Loading

thani-sh Jan 22, 2017

usulpro Jan 22, 2017

thani-sh Jan 22, 2017

thani-sh Jan 22, 2017

usulpro Jan 22, 2017

thani-sh Jan 22, 2017

usulpro Jan 22, 2017

usulpro Jan 22, 2017

usulpro Jan 22, 2017

usulpro commented Jan 22, 2017

usulpro commented Feb 16, 2017

ndelangen commented Apr 15, 2017

Add Floating Menu #69

Add Floating Menu #69

Conversation

usulpro commented Jan 10, 2017

arunoda commented Jan 11, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arunoda commented Jan 11, 2017

thani-sh commented Jan 11, 2017

usulpro commented Jan 11, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

usulpro commented Jan 22, 2017

usulpro commented Feb 16, 2017

ndelangen commented Apr 15, 2017

arunoda commented Jan 11, 2017 •

edited

Loading

usulpro commented Jan 11, 2017 •

edited

Loading