search

marianokit / magento-w2p

Automatically exported from code.google.com/p/magento-w2p
0 stars 0 forks source link

Field highlighter #169

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
Template details XML includes info on shape positioning inside the preview.
Highlight the shapes as fields come in focus. The exact nature of the
highlighting should be in the CSS. Not sure what it should look like. A red
border will do for now. We need to have more styling options possible.

Use these 2 templates for testing:
http://magento.zetaprints.com/?page=templatexml;TemplateID=E1F8E255-0565-4D26-A5
2B-1B29D8B8454F

http://realestate.zetaprints.com/?page=template-xml;TemplateID=252E2BBB-A1EA-4BF
5-BECB-3641874487CD

The HTML pages have MAP and the XML has Shapes/Shape. Name / title
correspond to the field name. It doesn't differentiate between image and
text fields of the same name yet.

This is a stepping stone to moving/editing images in the context of a preview.

Original issue reported on code.google.com by zetapri...@gmail.com on 5 Apr 2010 at 11:18

GoogleCodeExporter commented 8 years ago 
Demo feedback:
1. remove the highlighter if the input field looses focus.
2. retain the highlighter in the large preview

Original comment by zetapri...@gmail.com on 6 Apr 2010 at 10:39

GoogleCodeExporter commented 8 years ago 
Can't get it work on chrome

Original comment by k.safro...@gmail.com on 6 Apr 2010 at 11:18

GoogleCodeExporter commented 8 years ago 
Please consider, if possible, to move all issue related JS code to separate 
file for 
easier ZP sync

Original comment by k.safro...@gmail.com on 6 Apr 2010 at 12:24

GoogleCodeExporter commented 8 years ago 
Sure, I split code into different functions and we can move them to separate 
file.

Original comment by Anatoly....@gmail.com on 7 Apr 2010 at 3:41

GoogleCodeExporter commented 8 years ago

Original comment by Anatoly....@gmail.com on 9 Apr 2010 at 3:33

GoogleCodeExporter commented 8 years ago 
Test it on magedev.

Original comment by Anatoly....@gmail.com on 9 Apr 2010 at 6:53

GoogleCodeExporter commented 8 years ago 
1.All fields in the template are separated with a dotted outline by default
(dotted_outline.png). These borders do not turn on/off. The are there all the 
time,
even after "Updating the preview".
2. Text fields are highlighted while the field is being edited - when I click 
in the
text field to start imputing text. Image fields, on the other hand, are 
highlighted
on a simple mouse hover.
3. Text fields that are made from more text frames joined together by the 
"Linked
text frames" feature, only have the last text frame highlighted. These are 
templates
that have two text frames (ex. Text.1 and Text.2) connected to make a single 
input
field. Try it here:
http://www.zetaprints.com/magedev/index.php/email-signatures/image-options.html
The "Large text" field is actually two text frames in the template, each one 
for a
separate line (one for "fight against" and the other one for "global warming"). 
If
you click on the field, only the second text frame (global warming) gets 
highlighted.

Highlight design mockup coming up.

Original comment by agur...@gmail.com on 11 Apr 2010 at 8:17

Attachments:

GoogleCodeExporter commented 8 years ago 
Let's try a double border (D1.png). If we have a double, contrasted border, the 
field
highlight will be visible for all templates. A simple (1px) border might be
un-noticable when the background of the template is of similar color (ex. red
highlight frame on a template with red background).
Having a double border (red outline over a white outline) makes the highlight 
more
universal. If the template background is dark (ex. red) the users sees the white
border. If the template background is light (white) the users notices the red 
border.

Original comment by agur...@gmail.com on 11 Apr 2010 at 9:25

Attachments:

GoogleCodeExporter commented 8 years ago

Original comment by Anatoly....@gmail.com on 12 Apr 2010 at 3:32

GoogleCodeExporter commented 8 years ago 
Test it on magedev.

Original comment by Anatoly....@gmail.com on 13 Apr 2010 at 8:34

GoogleCodeExporter commented 8 years ago 
Templates that have a background image stretching throughout the entire page 
overlap
other fields.
http://www.zetaprints.com/magedev/index.php/email-signatures/image-options.html
The text fields are impossible to select since the background image covers the 
whole
page and clicking anywhere opens the image field.

Original comment by agur...@gmail.com on 13 Apr 2010 at 6:09

GoogleCodeExporter commented 8 years ago 
Shapes are placed in the same order as they placed in template details XML.

Original comment by Anatoly....@gmail.com on 13 Apr 2010 at 6:24

GoogleCodeExporter commented 8 years ago

Original comment by zetapri...@gmail.com on 18 Apr 2010 at 8:46

GoogleCodeExporter commented 8 years ago

Original comment by Anatoly....@gmail.com on 22 Apr 2010 at 5:13

GoogleCodeExporter commented 8 years ago 
Did you move the test site for this feature? I don't see a field highlighter at 
all
on /magedev/.

Original comment by agur...@gmail.com on 25 Apr 2010 at 9:54

GoogleCodeExporter commented 8 years ago 
Select zpinpredtheme in category or product editor where you want to enable 
shapes.
Sorry, forgot to mention it.

Original comment by Anatoly....@gmail.com on 25 Apr 2010 at 10:20

GoogleCodeExporter commented 8 years ago 
http://www.zetaprints.com/magedev/index.php/email-signatures/image-options.html
In the input form on the right side, hovering the mouse over an image field
highlights it in the preview image while hovering the mouse over a text field 
does not.
We need to make it same for both. Either they are highlighted on mouse hover or 
on
click (editing).

Original comment by agur...@gmail.com on 25 Apr 2010 at 11:03

GoogleCodeExporter commented 8 years ago 
Field highlighter does not work in IE. Variable parts do show up on mouse hover 
but
only all of them. If I hover the mouse over a variable part, I see all variables
highlighted the same way - dotted border (ie_highlighter.png), the specific 
variable
field is not highlighted with the solid border.
Once I click on a variable field, I get the large image preview, no input 
fields are
opened and highlighter is no longer visible.
Try it here in IE:
http://www.zetaprints.com/magedev/index.php/realestate-signs/fsbo-signs/multipag
e-testing-02.html

Original comment by agur...@gmail.com on 25 Apr 2010 at 11:18

Attachments:

GoogleCodeExporter commented 8 years ago

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

GoogleCodeExporter commented 8 years ago 
Fixed. Test it on magedev.

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

GoogleCodeExporter commented 8 years ago 
Open
http://www.zetaprints.com/magedev/index.php/realestate-signs/fsbo-signs/multipag
e-testing-02.html
and click on a variable field in the preview image. This will pop-up the full 
size
view and the input form for the clicked field. Right after that, click 
somewhere else
on the large preview. Highlighter disappears.

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

GoogleCodeExporter commented 8 years ago

Original comment by zetapri...@gmail.com on 4 May 2010 at 10:10

GoogleCodeExporter commented 8 years ago 
The bug was fixed. Please, test it on mageimage

Original comment by Anatoly....@gmail.com on 6 May 2010 at 5:21

GoogleCodeExporter commented 8 years ago 
The last bug is fixed. Tested with FF and IE.

Posted separate highlighter issues that involve the field coordinates.

Original comment by agur...@gmail.com on 6 May 2010 at 8:45

GoogleCodeExporter commented 8 years ago

Original comment by zetapri...@gmail.com on 7 May 2010 at 12:17