Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Advanced style panel mode #4816

Closed
22 tasks done
kof opened this issue Feb 1, 2025 · 1 comment
Closed
22 tasks done

Advanced style panel mode #4816

kof opened this issue Feb 1, 2025 · 1 comment
Assignees
@kof
Labels
area:styles Style Panel is the CSS panel on the right complexity:medium Up to 1 week of work prio:1 The most important thing to work on type:feat Features and enhancements

Comments

@kof
Copy link
Member

kof commented Feb 1, 2025 •
edited
Loading

  • As a beginner developer, by default I need to find every item in the style panel every time, so everything visible makes sense.
  • As an intermediate developer, I already know which properties are in which section, so I want to see sections collapsed to get faster to the right section without scrolling
  • As an advanced developer, I know every property by name, so I am faster using autocomplete interface than using visual controls

Todo

  • Add the dropdown selector
  • Store selected option using settings in local storage
  • Add accordion functionality
  • Add new layout for full-height advanced panel

Advanced panel improvements

  • show all properties in advanced mode

  • make the ui less busy by:

    1. only show label background on hover/focus
    2. let value go multiline like the natural flow would be, change on click into an input

  • group current token values first

  • easier way to add one property after another (enter/tab, see devtools)

  • make it clear when property is already added

  • logical grouping, e.g. all paddings belong together (maybe just an option to sort alphabetically)

  • "--" hint Hint for missing -- when writing CSS variable #4804

  • rename property name

  • autocomplete using css values

  • search: Add search to Advanced style panel #4805

  • menu for copy-paste

  • ability to select and copy

  • shortcut

  • bug Main: Not all advanced properties show #4874

  • ability to select shorthand like "margin" from autocomplete (after insertion it turns into long hands)

  • If I am setting shorthand I lose access to css var autocomplete e..g. border: 1px --

  • when adding property using shorthand, we add all sorts of default values that are noisy, e.g. adding border: red

    Image

  • fix input glitch
@kof kof added prio:1 The most important thing to work on area:styles Style Panel is the CSS panel on the right type:feat Features and enhancements complexity:medium Up to 1 week of work labels Feb 1, 2025
@kof kof mentioned this issue Feb 4, 2025
Merged
7 tasks
kof added a commit that referenced this issue Feb 4, 2025
@kof
experimental: Focus mode for style panel (#4827)
5ad5a71 
#4816

## Description

Still behind a flag, so on dev only, but now style panel is in accordion
mode. Switch will come next.

Testing:

In this mode only one section at a time will be open and Layout is the
initial one.

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
@kof kof self-assigned this Feb 4, 2025
@kof kof mentioned this issue Feb 5, 2025
Merged
7 tasks
kof added a commit that referenced this issue Feb 5, 2025
@kof
experimental: Style panel focus mode (#4835)
a8bfa4d 
#4816

## Description

- implements accordion pattern
- adds a dropdown switch

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
@kof kof mentioned this issue Feb 6, 2025
Merged
9 tasks
kof added a commit that referenced this issue Feb 6, 2025
@kof
experimental: Advanced style panel mode (#4840)
8aaa48e 
#4816

## Description

- [x] added switch
- [x] full-size advaned panel

## Steps for reproduction

1. click button
3. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
@kof kof mentioned this issue Feb 7, 2025
Merged
7 tasks
kof added a commit that referenced this issue Feb 8, 2025
@kof
experimental: Advanced panel sorting and grouping (#4842)
4c48c21 
#4816

## Description

1. We want to group entries by origin
2. We want to sort by alphabet

## Steps for reproduction

1. click button
3. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
@kof kof mentioned this issue Feb 8, 2025
Merged
12 tasks
@kof
Copy link
Member Author

kof commented Feb 8, 2025 •
edited
Loading

Maybe a grayish color for preset properties? Not sure if this makes it easier to differentiate

Image

@kof kof changed the title Style panel modes switch Advanced style panel mode Feb 9, 2025
@kof kof moved this to 🏗️ In Progress in 🚀 Roadmap Feb 9, 2025
@kof kof added this to 🚀 Roadmap Feb 9, 2025
kof added a commit that referenced this issue Feb 9, 2025
@kof
feat: Improved UX for adding multiple advanced style panel properties (…
1c08434 
…#4846)

#4816

## Description

- [x] recent proeprties section
- [x] enter or tab in the last value in recent to show adding input
again
- [x] close new adding property input on ESC
- [x] show in recent when user ads an existing property
- [x] handle multiple properties insertion

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
@kof kof mentioned this issue Feb 10, 2025
Merged
7 tasks
kof added a commit that referenced this issue Feb 10, 2025
@kof
experimental: Improve readability in advanced section (#4852)
d60d3c5 
#4816

## Description

Improved readability by:
1. indentation
2. setting gray color for preset properties
3. making colon bolder

<img width="258" alt="image"
src="https://github.com/user-attachments/assets/60528221-35f3-4782-986f-8656a9b6bffd"
/>


## Steps for reproduction

1. click button
4. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
@kof kof mentioned this issue Feb 11, 2025
Merged
7 tasks
kof added a commit that referenced this issue Feb 11, 2025
@kof
feat: Autocomplete values in advanced panel (#4854)
1e86e76 
#4816

## Description

- When adding a new property, you sometimes don't know the property
name, e.g. you know you want to "center" it but you don't remember if
its align-items, align-content or any other and you need to see the
list.
- Currently you can create a css variable "bla" and it will bypass
validation, now it will validate
- also try "color" esc autocomplete, enter
- or "color:red" esc autocomplete enter


Try typing "center"

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
@kof kof mentioned this issue Feb 14, 2025
Merged
7 tasks
kof added a commit that referenced this issue Feb 15, 2025
@kof
feat: Context menu for advanced style panel (#4876)
769b246 
#4816

## Description

1. right click in advanced 
2. copy all
3. copy one
4. paste
5. search now works for properties AND values
6. backspace in add styles input when its empty now also closes the
input same as esc

## Steps for reproduction

1. click button
7. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
@kof kof mentioned this issue Feb 18, 2025
Merged
9 tasks
kof added a commit that referenced this issue Feb 19, 2025
@kof
experimental: more advanced style panel feaures (#4890)
2593087 
Ref #4816
Closes #4874

## Description

- [x] Memorizing recent properties by instance, so that when user
switches between instances and comes back they are still in-place
- [x] alt+shift+a for advanced mode shorthand


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
istarkov pushed a commit that referenced this issue Feb 23, 2025
@kof @istarkov
experimental: more advanced style panel feaures (#4890)
5cf6f33 
Ref #4816
Closes #4874

## Description

- [x] Memorizing recent properties by instance, so that when user
switches between instances and comes back they are still in-place
- [x] alt+shift+a for advanced mode shorthand


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
@kof kof mentioned this issue Feb 25, 2025
Merged
7 tasks
kof added a commit that referenced this issue Feb 26, 2025
@kof
experimental: Shorthands autocomplete (#4898)
7b01153 
ref #4816

## Description

Shows shorthands in autocomplete when adding properties.

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
@kof kof closed this as completed Feb 28, 2025
@kof kof moved this from 🏗️ In Progress to 🌐 Released in 🚀 Roadmap Feb 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kof kof

Labels
area:styles Style Panel is the CSS panel on the right complexity:medium Up to 1 week of work prio:1 The most important thing to work on type:feat Features and enhancements
Projects
🚀 Roadmap
Status: 🌐 Released
Milestone
No milestone
Development

No branches or pull requests
1 participant
@kof