dzhavat / css-flexbox-cheatsheet

VS Code extension that lets you open a CSS Flexbox cheatsheet directly in the editor.
https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet
MIT License
101 stars 12 forks source link

Idea: Add Property Picker #24

Open COD3BREAK3R opened 3 years ago

COD3BREAK3R commented 3 years ago

I want the extension would have the ability to insert the selected properties directly in code. Would be great. Thanks

PD: The same characteristic in a version of CSS Grid extension

dzhavat commented 3 years ago

That's an interesting idea. Thanks for sharing it.

It's absolutely possible. Can this also be achieved by having a way to easily copy a property from the cheatsheet? (It can then be pasted in the code). Or do you see it more as directly inserting a property in the code?

COD3BREAK3R commented 3 years ago

For example:

When double click in the property is automatically inserted inside the block of ccs properties where is the cursor, analyzes for missing properties to work correctly the code pasted and if missing are added the necesary properties.

For example if missing display: flex; in the actually block of css properties when double click for insert flex-direction: row; is added automatically before display: flex; and then flex-direction: row;

I hope explained well my idea

dzhavat commented 3 years ago

I understand what you mean. There are some things that will be easier than others like inserting properties into the code on click.

The analyzing part however is more difficult. I can already see some challenges in cases when an element has both class-a and class-b on it. If class-a already specifies display: flex, then there's no need to add it to class-b as well, etc.

I can at least implement the click-to-copy / click-to-insert part. I believe this will be a nice addition.

COD3BREAK3R commented 3 years ago

Yes, copy function it's nice