search

amitmodak89 / magento-w2p

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

Combo box #461

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
Implement combobox functionality on dropdowns that have "-" as one of the 
values in the list.

The hyphen won't show in the selection and the dropdown will be editable.

Lots of plugins around to do this. Let's pick the most supported and most 
usable one.

Discuss the choice first.
Adding another dependency is just adding more hassles down the track, so better 
be careful what we pick.

Original issue reported on code.google.com by zetapri...@gmail.com on 16 Feb 2011 at 12:27

GoogleCodeExporter commented 8 years ago

Original comment by zetapri...@gmail.com on 16 Feb 2011 at 12:27

GoogleCodeExporter commented 8 years ago 
Which dropdowns?

Original comment by jamb...@gmail.com on 16 Feb 2011 at 7:17

GoogleCodeExporter commented 8 years ago 
I believe there is combobox functionality in jQuery UI package.
I know that w2p usses UI but I don't know if it is the complete version of it.

Original comment by jamb...@gmail.com on 16 Feb 2011 at 7:40

GoogleCodeExporter commented 8 years ago 
Do they have a demo?

Original comment by zetapri...@gmail.com on 16 Feb 2011 at 8:02

GoogleCodeExporter commented 8 years ago 
May be this one here: http://jqueryui.com/demos/autocomplete/#combobox

Original comment by jamb...@gmail.com on 16 Feb 2011 at 8:43

GoogleCodeExporter commented 8 years ago 
Let's use this template for testing

http://realestate.zetaprints.com/?page=template;TemplateID=99FE4D75-C4A4-4BBD-AD
B9-725D7AE6C07A

We may need to use longer values for testing to see if breaks the layout.

Original comment by zetapri...@gmail.com on 16 Feb 2011 at 9:04

GoogleCodeExporter commented 8 years ago 
The dropdown stays a standard browser dropdown if there is no -.
Otherwise, hide the hyphen from the list and use a combobox.

Original comment by zetapri...@gmail.com on 16 Feb 2011 at 9:08

GoogleCodeExporter commented 8 years ago 
result can be seen here:
http://ec2-174-129-95-130.compute-1.amazonaws.com/magedev/index.php/default/test
/t-shirt-01.html

Changes to code are here: 
http://code.google.com/p/magento-w2p/source/detail?r=1370

User can click on arrow btn to get all options, or can start typing an option 
and get auto-completion for it, or enter entirely different value, which will 
be persisted in the list until user leaves the page. Regardless of whether user 
has chosen an option or typed new one the value that is seen in the textbox is 
sent to ZetaPrints server and preview results are correct.

Original comment by jamb...@gmail.com on 16 Feb 2011 at 7:38

GoogleCodeExporter commented 8 years ago 
Works for me.

Needs better styling.
Can you make the box and the arrow of the same height?

Also, what about the class names?
We probably need to include something in our CSS and update our documentation 
with the list of classes/IDs. It adds up more work for any theme customization. 
We'd better do most of it in our CSS.

Original comment by zetapri...@gmail.com on 16 Feb 2011 at 8:33

GoogleCodeExporter commented 8 years ago 
I guess it will be enough to say in the doco that all customisation is in 
zptheme/css/combobox.css + a link to the file in SVN once it's merged.

Got to be fixed first.

Is there any chance we can unify the styles with mage so that no custom changes 
will be needed for the combobox separately?

Original comment by zetapri...@gmail.com on 16 Feb 2011 at 8:43

GoogleCodeExporter commented 8 years ago 
Why do we need all this files?

* zptheme/jquery/base/jquery.ui.accordion.min.css
* zptheme/jquery/base/jquery.ui.datepicker.min.css
* zptheme/jquery/base/jquery.ui.dialog.min.css
* zptheme/jquery/base/jquery.ui.progressbar.min.css
* zptheme/jquery/base/jquery.ui.resizable.min.css
* zptheme/jquery/base/jquery.ui.selectable.min.css
* zptheme/jquery/base/jquery.ui.slider.min.css
* zptheme/jquery/base/jquery.ui.tabs.min.css

Do we use accordion or datepicker or progressbar or anything else from the 
list? I think we don't.

Why do we need all this UI's CSS framework to make our own style for combobox? 
I think we don't. Mockups + a bit of css - that's all we need.

Put all code to existing JS and CSS files (personalization-form.js and 
zp-style.css)

Here is my recommends for logic. Decide to use combobox or dropdown in xslt and 
remove - option there. Mark input tags for comboboх with special class. Select 
them by class in JS.

Original comment by Anatoly....@gmail.com on 17 Feb 2011 at 7:34

GoogleCodeExporter commented 8 years ago 
Leave combobox.js file.

Original comment by Anatoly....@gmail.com on 17 Feb 2011 at 7:43

GoogleCodeExporter commented 8 years ago 
heh. good point :)

Original comment by zetapri...@gmail.com on 17 Feb 2011 at 8:22

GoogleCodeExporter commented 8 years ago 
The combobox uses jquery ui, the quickest opton for it to have any decent look 
quickly was to use a theme. Whenever any mock-ups are available then it could 
be styled separately, until then it will have to be as it is.

I agree that dash option is not good, and I have asked Max about other options 
- you are competent about zetaprints template - make a suggestion. I would 
prefer a class to be set for any select that needs to be changed.

Mixing js files in one for development is bad idea, all functionality should be 
separate. Combobox is coupled with jquery not with w2p, so if you decide to use 
it in another project you can (especially if we get rid of dash thing).
If there are concerns about number of js fils requests, then we should use 
minifying tool but for production releases only.

Original comment by jamb...@gmail.com on 17 Feb 2011 at 10:21

GoogleCodeExporter commented 8 years ago 
A dash is just a clue that comes from ZP.
Handle it in XSLT or in JS. Up to you.
Did I miss something here?

Original comment by zetapri...@gmail.com on 17 Feb 2011 at 11:34

GoogleCodeExporter commented 8 years ago 
How about the case that someone actually wants the dash? It is just plain text 
option.
Is there no way to add an attribute to the xml being sent?

Original comment by jamb...@gmail.com on 17 Feb 2011 at 11:43

GoogleCodeExporter commented 8 years ago 
> Mixing js files in one for development is bad idea, all functionality should
> be separate.

Yes, leave combobox.js, but please move code which applies combobox to 
personalization-form.js

Original comment by Anatoly....@gmail.com on 18 Feb 2011 at 3:53

GoogleCodeExporter commented 8 years ago 
OK, is there any chance that the dash can be removed before select is added to 
page, and that we add a class to the select to flag it as combobox?

Original comment by jamb...@gmail.com on 18 Feb 2011 at 7:57

GoogleCodeExporter commented 8 years ago 
No. We don't have any code that modifies values of select after xslt is applied.

Original comment by Anatoly....@gmail.com on 18 Feb 2011 at 9:06

GoogleCodeExporter commented 8 years ago 
[deleted comment]
GoogleCodeExporter commented 8 years ago 
Mockup (combo_box_D1-1.png) open for discussion. Do not implement until we're 
sure about the looks.

Original comment by agur...@gmail.com on 18 Feb 2011 at 12:27

Attachments:

GoogleCodeExporter commented 8 years ago 
Hm. There is nothing in there to tell me it is editable.
Suggestions?

Original comment by zetapri...@gmail.com on 19 Feb 2011 at 3:34

GoogleCodeExporter commented 8 years ago 
Maybe just select text of default value?

Original comment by Anatoly....@gmail.com on 19 Feb 2011 at 4:36

GoogleCodeExporter commented 8 years ago 
Maybe just add a tooltip?

"Select from the list or enter new value"
Not sure this one is clear enough.
Use it if you can't think of better wording.

Original comment by zetapri...@gmail.com on 19 Feb 2011 at 4:52

GoogleCodeExporter commented 8 years ago 
As I know text is selected by default then control supposes editing or the user 
clicks on control.

Tooltips are used for hints from template details.

Original comment by Anatoly....@gmail.com on 19 Feb 2011 at 6:03

GoogleCodeExporter commented 8 years ago 
Are you sure tooltips are already in use?

Can we include the prompt in the dropdown then?

"Select or enter a value"
Should be short enough.
Show it in italic and maybe separate by a line.

Maybe make a mockup if this sounds right?

Original comment by zetapri...@gmail.com on 19 Feb 2011 at 9:45

GoogleCodeExporter commented 8 years ago 
Tooltip, title like - "Pick an option or enter your own."
Item option will be more complicated and will have to modify the code.
Currently all items are taken from the dropdown. And whatever is picked in the 
menu is set as selected in dropdown (to be send with form data later)
Even if tooltips are used on other controls - so what?

Original comment by jamb...@gmail.com on 19 Feb 2011 at 10:00

GoogleCodeExporter commented 8 years ago 
Tooltip is the way to go if it's available.

Original comment by zetapri...@gmail.com on 19 Feb 2011 at 10:18

GoogleCodeExporter commented 8 years ago 
> Are you sure tooltips are already in use?

Title attribute is filled with value from hint attr.
See 
http://code.google.com/p/magento-w2p/source/browse/trunk/app/code/local/ZetaPrin
ts/Zpapi/Model/common-templates.xslt

Also, we show tooltips with qtip JS lib.

> Even if tooltips are used on other controls - so what?
Can you explain it a bit?

> And whatever is picked in the menu is set as selected in dropdown
> (to be send with form data later)

What is happened if I input text instead picking smth?

Original comment by Anatoly....@gmail.com on 19 Feb 2011 at 10:28

GoogleCodeExporter commented 8 years ago 
Oh. How about merging the tooltip if it's already in use? Append dropdown hint 
at end of the hint from ZP.

Deal?

Original comment by zetapri...@gmail.com on 19 Feb 2011 at 10:35

GoogleCodeExporter commented 8 years ago 
Yep

Original comment by Anatoly....@gmail.com on 19 Feb 2011 at 10:38

GoogleCodeExporter commented 8 years ago 
What is set on the select is pretty much irrelevant, the select is hidden 
anyway. We can put whatever title we want to the input. Also goes for tooltips 
- if we already use library for that great - just add another tootip for the 
combobox.

Original comment by jamb...@gmail.com on 19 Feb 2011 at 10:43

GoogleCodeExporter commented 8 years ago 
Sure, decide on text and post it here.

Original comment by jamb...@gmail.com on 19 Feb 2011 at 10:48

GoogleCodeExporter commented 8 years ago 
> What is set on the select is pretty much irrelevant

It's not irrelevant. It must be showed.

The goal is to preserve existing tooltip text.

Original comment by Anatoly....@gmail.com on 19 Feb 2011 at 10:48

GoogleCodeExporter commented 8 years ago 
True. Whatever. Just merge them. Enough fighting :)
The screenshots are OK by me. Go ahead if you are OK with them too.

Does 

"Select or enter a value"

sound right to you?

Original comment by zetapri...@gmail.com on 19 Feb 2011 at 10:51

GoogleCodeExporter commented 8 years ago 
For me it is irrelevant, until this moment no one mentioned that it has any 
need to be there.
Text is fine.

Original comment by jamb...@gmail.com on 19 Feb 2011 at 10:58

GoogleCodeExporter commented 8 years ago 
Tooltip is in place. The dropdown used in the example product does not have 
title so only (Select or enter a value) is shown. If there is a title it would 
be above this line and with a bit bigger font.
http://ec2-174-129-95-130.compute-1.amazonaws.com/magedev/index.php/default/test
/t-shirt-01.html

If we agree on design, I need sprites and color values for borders and such if 
possible.
I also think that getting the design right will take me some more time.

Original comment by jamb...@gmail.com on 21 Feb 2011 at 8:39

GoogleCodeExporter commented 8 years ago 
Diff for tooltip feature:
http://code.google.com/p/magento-w2p/source/diff?spec=svn1391&r=1391&format=side
&path=/branches/w2p_petar/skin/frontend/default/zptheme/js/combobox.js

Original comment by jamb...@gmail.com on 21 Feb 2011 at 8:42

GoogleCodeExporter commented 8 years ago 
I still need sprites here.

Original comment by jamb...@gmail.com on 1 Mar 2011 at 9:34

GoogleCodeExporter commented 8 years ago 
Not sure what kind of sprites you need so I uploaded 2 variations
- with the background (combo_full_sprite.png)
- arrows only (combo_sprite.png)

color info is in combo_box_D1-1-info.png

Original comment by agur...@gmail.com on 1 Mar 2011 at 1:44

Attachments:

GoogleCodeExporter commented 8 years ago 
No need for input field border color. We use M. styles. Use only styles for 
button.

Original comment by Anatoly....@gmail.com on 1 Mar 2011 at 5:01

GoogleCodeExporter commented 8 years ago 
2 problems 
1. Arrow directions - why there are arrows pointing up? There is no such 
functionality in default select element. And is quite hard to implement with 
this widget.
2. Opera has a bug which prevents button to be displayed within the input field.

Check styling here: 
http://ec2-174-129-95-130.compute-1.amazonaws.com/magedev/index.php/default/test
/t-shirt-01.html

Original comment by jamb...@gmail.com on 1 Mar 2011 at 6:01

GoogleCodeExporter commented 8 years ago 
1. Forget about arrow directions, then. Usually, drop-down menus don't have 
those anyway and it's not worth it.

2. We have to figure out a solution for Opera, I'm afraid.

Just remove the rounded corners on the dropdown it self.

Original comment by agur...@gmail.com on 1 Mar 2011 at 6:10

GoogleCodeExporter commented 8 years ago 
OK, I will fight it tomorrow, done for today.

Original comment by jamb...@gmail.com on 1 Mar 2011 at 6:12

GoogleCodeExporter commented 8 years ago 
I have done my best to achieve uniform look across browsers.

Original comment by jamb...@gmail.com on 2 Mar 2011 at 10:32

GoogleCodeExporter commented 8 years ago 
can we have a diff, please?

this is to be tested on /magedev/, right? same product? or is it part of the 
alpha30 release?

Original comment by agur...@gmail.com on 2 Mar 2011 at 6:43

GoogleCodeExporter commented 8 years ago 
Can't be part of aplha30 release. It's in the branch (I guess) and needs to be 
merged.

Looks OK to me.

Original comment by zetapri...@gmail.com on 2 Mar 2011 at 10:18

GoogleCodeExporter commented 8 years ago 
What about lifting popped-up panel 1px up? Or remove top border from the panel?

Original comment by Anatoly....@gmail.com on 3 Mar 2011 at 5:41

GoogleCodeExporter commented 8 years ago 
Also, long text goes behind the button. Add right padding for the input and 
decrease width of the input by the value of the padding.

Original comment by Anatoly....@gmail.com on 3 Mar 2011 at 5:49

GoogleCodeExporter commented 8 years ago 
Made changes that Anatoly suggested. Test link is still the same.
Diffs:
http://code.google.com/p/magento-w2p/source/diff?spec=svn1415&old=1410&r=1415&fo
rmat=side&path=%2Fbranches%2Fw2p_petar%2Fskin%2Ffrontend%2Fdefault%2Fzptheme%2Fc
ss%2Fcombobox.css
http://code.google.com/p/magento-w2p/source/diff?spec=svn1410&r=1410&format=side
&path=/branches/w2p_petar/skin/frontend/default/zptheme/images/combo_sprite.gif
http://code.google.com/p/magento-w2p/source/diff?spec=svn1410&r=1410&format=side
&path=/branches/w2p_petar/skin/frontend/default/zptheme/js/combobox.js

Original comment by jamb...@gmail.com on 3 Mar 2011 at 10:16