In-preview edits: filled in fields

[GoogleCodeExporter]

We need to highlight fields that have values differently than fields that
have not.

Option 1: use different color
Option 2: use different opacity/fill
Option 3: suggestions?

Original issue reported on code.google.com by zetapri...@gmail.com on 29 Apr 2010 at 3:19

• Blocked on: #212

[GoogleCodeExporter]

Original comment by zetapri...@gmail.com on 29 Apr 2010 at 3:29

• Added labels: Features-X

[GoogleCodeExporter]

Atanas, could you please prepare 1px image for fields higligting. (See Option 
2).

Original comment by Anatoly....@gmail.com on 2 May 2010 at 4:14

[GoogleCodeExporter]

Will this one help?
#myElement {
    opacity: .4; /* other browsers */
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6,
IE7, and IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in
IE8 only */
}

Original comment by zetapri...@gmail.com on 2 May 2010 at 7:09

[GoogleCodeExporter]

Will this do?

Original comment by agur...@gmail.com on 3 May 2010 at 3:57

Attachments:

• highlighter_overlay.png

[GoogleCodeExporter]

We can't use opacity, because it applies for borders, too

Original comment by Anatoly....@gmail.com on 4 May 2010 at 3:37

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Correction: highlight the field as filled in even if there is a value in it 
from the
cache.

Original comment by zetapri...@gmail.com on 6 May 2010 at 8:51

[GoogleCodeExporter]

Original comment by Anatoly....@gmail.com on 6 May 2010 at 3:44

• Changed state: Finished

[GoogleCodeExporter]

Test it on mageimage or magedev.

Original comment by Anatoly....@gmail.com on 12 May 2010 at 7:33

• Changed state: ToTest

[GoogleCodeExporter]

Tested it here:
http://www.zetaprints.com/mageimage/index.php/realestate-signs/remax-signs/remax
-vertical-sign-02-3-photos-18-x-24.html

#1 Images uploaded don't highlight the field, the field only gets highlighted 
if I
select an image from my images library by hand. Ex:
Go here:
http://www.zetaprints.com/mageimage/index.php/realestate-signs/remax-signs/remax
-vertical-sign-02-3-photos-18-x-24.html
Click on a image field in the form or through the in-preview personalizator and
upload an image
Close the field as soon as you see your image in "My images"
Hover the mouse, the field is not highlighted. Even if I regenerate the 
preview, the
same image field (with the uploaded image) is not highlighted as a edited field.

#2 Text fields should get highlighted as soon as text is being entered. The way 
it is
now, I enter text in the text fox of the right side form and I have to click on
another text field and then hover to see the field highlighted. Maybe we should 
make
it highlight as soon as a character is entered to the field? This way it will 
baheve
the same as the image fields which get highlighted when an image is picked.

#3 The highlight overlay doesn't appear the same in different browsers. In IE, 
it is
hardly noticeable (highlighted_hover_IE.png) compared to FF 
(highlighted_hover.png)

Original comment by agur...@gmail.com on 12 May 2010 at 12:11

• Changed state: MoreWork

Attachments:

• highlighted_hover_IE.png
• highlighted_hover.png

[GoogleCodeExporter]

Original comment by zetapri...@gmail.com on 13 May 2010 at 1:31

• Added labels: Unit-1
• Removed labels: Unit-0.5

[GoogleCodeExporter]

I Tested #3 in IE8 and didn't see any problems. Is it IE7 or IE6 problem?

Original comment by Anatoly....@gmail.com on 14 May 2010 at 9:30

[GoogleCodeExporter]

Problem #1 is fixed. Test it on mageimage.

Original comment by Anatoly....@gmail.com on 14 May 2010 at 10:37

• Changed state: ToTest

[GoogleCodeExporter]

Problem #1 Test OK
Problem #3 I also tested this in IE8, you must see a difference. While FF shows 
the
highlighted field far more clearly, IE8 shows only a subtle color overlay in the
top-left corner (ie_highlighter.png) and it is hardly noticeable.

Original comment by agur...@gmail.com on 14 May 2010 at 2:32

• Changed state: MoreWork

Attachments:

• ie_highlighter.png

[GoogleCodeExporter]

Actually, IE8 shows the mask as a gradient from top-left corner. It's the same 
for
text and image fields.

Original comment by zetapri...@gmail.com on 14 May 2010 at 8:42

[GoogleCodeExporter]

I don't see gradient effect in IE8. Will provide screenshots.

Original comment by Anatoly....@gmail.com on 16 May 2010 at 4:05

[GoogleCodeExporter]

Original comment by zetapri...@gmail.com on 17 May 2010 at 8:20

[GoogleCodeExporter]

Problem #2 is fixed. Test it on mageimage.

Original comment by Anatoly....@gmail.com on 18 May 2010 at 7:20

• Changed state: ToTest

[GoogleCodeExporter]

Problem #2 - Test OK. 
Tested it in FF, IE and Chrome.

Problem #3 - Pending

Original comment by agur...@gmail.com on 18 May 2010 at 9:22

• Changed state: MoreWork

[GoogleCodeExporter]

Original comment by agur...@gmail.com on 18 May 2010 at 10:15

• Changed state: TestOK

[GoogleCodeExporter]

Original comment by zetapri...@gmail.com on 20 May 2010 at 6:07

• Changed state: Docos

[GoogleCodeExporter]

Added a screenshot and explanation of the feature in this post:
http://www.zetaprints.com/magento-web-to-print/magento-interactive-personalizati
on

Original comment by agur...@gmail.com on 1 Jun 2010 at 3:31

• Changed state: Finished
• Added labels: Features-V
• Removed labels: Features-X

[GoogleCodeExporter]

Original comment by zetapri...@gmail.com on 1 Jun 2010 at 11:13

• Changed state: Done