Jaya Krishna Namburu c1c43213c3 fix: reset image url in inputs when users select a uploaded image after adding a remote url to the same. (#3512)
## Description
fixes
- when choosing an image after having a url, url is normally being
reset, so you don't have both, now I managed to have both
- Code area label should be Code

Regarding the 
- jump when switching between image and gradient.
This is a little tricky, to restrict from jumping. Thought about this
while implementing itself. But there is too much negative spacing for
gradients tab. We need to set `min-height`. Which is showing too much
empty spacing for background gradients in my opinion. Let me know, if
it's still fine and we can go ahead.
![Screen Recording 2024-06-07 at 10 32
08 AM](https://github.com/webstudio-is/webstudio/assets/11075561/8bb0f97a-e4c3-4495-822e-cb8b307b908b)

- shouldn't all properties land in the Code area? not just the url()?
This, i am not sure if its possible. Because, in every code-editing
areas. We are showing only the property value and not the key. In this
case, of we want to show multiple properties. Then we need to show
multiple key-value pairs. Like, `background-image: url, background-cli:
border-box` etc. With some additional parsing of these values.

## Steps for reproduction

1. Set a remote url for a background image, now use a uploaded image for
the same. The input-box need to be refreshed.

## 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

- [x] made a self-review

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
2024-06-07 11:32:32 +02:00
2024-05-28 14:15:55 +03:00
2023-03-02 11:05:44 +01:00
2024-05-28 14:15:55 +03:00
2023-09-06 21:43:29 +03:00
2024-02-18 11:36:30 +01:00

builder-screenshot

Webstudio is an Open Source Visual Development Platform for developers, designers, and cross-functional teams. You own the data, components, and infrastructure. You can use the hosted version or roll out your own.


Learning Resources

Social Media

Thanks

Lost Pixel

Thanks to Lost Pixel for providing the visual testing platform that helps us review UI changes and catch visual regressions.

Languages
TypeScript 98.9%
PLpgSQL 0.5%
CSS 0.3%
Shell 0.2%
JavaScript 0.1%