Quick command popup for Components

Ideas
1

I love you've implemented Sublime style quick commands. I'd love one for Components with support to drag'n'drop. Xcode has this now and it works quite nicely.

Thank you!

2

Thank you for the suggestion! Can you give us an example/screenshot of exactly what you have in mind?

3

Here's the one in xcode. It's just like your Cmd+P command pallete, just it lists the components and lets you drag one into the editor...

Components popup in xcode

4

Xcode component popup

5

P.S. It needed be that fancy. Basically just a floating version of the existing compoents tab that one opens with a keyboard shortcut.

6

I'm trying to figure out how that would actually enhance anything since the Components list is already open at default in a panel. You would still have to find what you're looking for in the list same as on the side panel. Typically you see keyboard shortcuts made for things that are not already at your fingertips. What would be the benefit of a popup list for this?

7

Generally the less the mouse is required, the easier it is to use for experienced users. Maybe that's a developers perspective but from experience I know how much saving mouse/trackpad use also saves your wrists...

Right now you need to... 1) Move from the keyboard to the mouse (not necessarily but in all likelihood, you just typed something in somewhere, like a css class or some text) 2) Move the cursor to the search 3) Start typing the component name 4) Move the mouse to the entry (in the upper left of the screen) 5) Drag it to the destination

With a popup panel you would 1) Press a key combo 2) Start typing the component name 3) Press [Return] to have it placed adjacent to the current selected item OR .... drag'n'drop it.

You'd save 1-2 steps and if you used the mouse it'd be more in the center of the screen. The best thing is you wouldnt even need the mouse. You can already navigate up/down/sideways in the DOM tree, so combined with this, you could build up whole layouts with only the keyboard.

8

Thanks for the screenshot! I don't think we'll be adding this since we already have something similar with the "add" command in the palette. You can type "add navbar" as a command, hit Return and the component will be inserted. You can use complex expressions as well like "add div*3 > span" etc.

9

Oh man that's awesome. Even better! Thx!

Two other related requests then...

1) Ability for "Add..." to work with custom components 2) A shortcut key to place the cursor in the components search bar (saves a drag and a click)

Thanks again. Loving BSS...

10

Is there a way to add several adjacent elements? I was trying...

add div>div.dayofweek,div.date,div.month

But with no luck...?

11

Added my first button today using the command popup.....nice.

12

@harikaram, we added the ability to add sibling nodes in our latest release, you can do it like this:

add div>div.dayofweek+div.date+div.month

This will produce the following markup:

<div>
    <div class="dayofweek"></div>
    <div class="date"></div>
    <div class="month"></div>
</div>

Alternatively, you can use parentheses to group nodes together:

add (div>div.dayofweek)+div.date+div.month

This will result in:

<div>
    <div class="dayofweek"></div>
</div>
<div class="date"></div>
<div class="month"></div>

I hope this helps!