Hi
Dne Sat, 25 Jun 2011 14:07:56 +0200 Tyron Madlener tyronx@gmail.com napsal(a):
I don't know if its just me, but I see so many things gone wrong with this dialog.
Yes, it is. See also recent thread ("Is vertical mode useful?"), where I've posted several ideas how to improve create table dialog.
Some things I would change globally (taking the create table dialog as example) :
- Decrease the massive amounts of padding/margin of the jquery ui dialogs.
- I don't need a 40 pixel high title telling me that I'm currently
creating a table.
- Did you notice that there's is a 900 x 60 pixel (!) area that
only performs a single function: Containing the cancel button. This should be either drastically reduced in size or removed altogether (and put the cancel button inside the content)
It should also contain the submit button, but unfortunately it is not the case for most dialogs. This way you need to scroll down to be able to submit the form.
- Decrease those massive margins and paddings around input fields.
Those should be made big only where it actually improves the usability/readability. I would reduce the margin/padding from 6/4 to 2/2
I always found AJAX dialog having too small space for real content, but never found time to look at it.
And for the create table dialog:
- Display always in horizontal mode! Hardly any tables contain just 2 columns.
I agree.
- Start always with 4 fields
Makes sense (especially when any empty fields are ignored).
- Bug: You can actually open the dialog several times, cause the
enum/set editor to be in the background
Clearly a bug.
- Make all selects and text inputs way shorter. I'd reduce them by
~30% (selects as well!). The length/value field I would reduce by 50-70% or so.
You would not see ENUM/SET values in the short field...
- The null and A_I checkbox waste big amounts of space. I would put
them together in the form of " [ ] Null [ ] A_I " in a column called "Options"
I think column called NULL and A_I is more readable (again, see Adminer for how it looks).
- Remove the "Table name:" title, instead put 'Table name' into the
input field that disappears once the user focuses it
I don't think horizontal space would be a problem here, so I'd prefer to keep the title on single line with input box.
- Instead of "Add x tables [Go]" which does it's own ajax request I
would place a link "Add column" that adds one single column, but therefore adds it immediately (no ajax here!), allowing users to just spam click the link if they need a lot. Or alternatively use a select list that contains the numbers from 1 to 10 which adds columns immediately on the onchange event.
Definitely good idea. The original code is there from times we used almost none javascript and it's just wrapped by AJAX now.
- Display the input field for the default value only after "As
defined:" is selected, and also focus it automatically once its selected so the user can type immediately
Makes sense.
- Why do we have these footnotes at the bottom of the dialog when we
got PMA_showHint()? (Forgot to initialize them in js?)
Again, looks like a bug.
- For all the form fields below the columns: Remove all the gradient
backgrounds on the titles. What are they there for?
Probably caused by theming something else, in original theme this looks more consistent.
- In whatever way, put the Save and Cancel button side by side
Yes.
- The enum/set editor I find so bad, I don't even know how you could
improve that:
- If my table would be having 3 enums, I get 3 times this sentenced
thrown onto my screen causing the columns table to get even bigger.
- The dialog itself has a completely different style than everything
else in PMA and really badly implemented. Just some bugs: - Values for column "" - wheres the column name? - Why is "Go" a button and "Cancel" a link? - Single quotes are not escaped (put a ' into the value field) - Breaks if a user accidently enters a space - The background is grayed out, yet you can still interact with it (e.g. select text) - You can actually scroll away the content of the dialog by selecting text downwards - Visual bug: One can see all input fields disappear if you press ok/cancel
- Why not just a simple textfield where you let the user write one
value per line? I would build the enum/set like this: - if set/enum is selected and the user focuses on the input field, pop out a bigger textarea (that is placed like a datepicker) - let the user write one element per line - extend the textarea row height with every line written so the user doesn't have to scroll. (up to a certain limit of course, like 15-20 lines - also it should not force the to scroll the page) - with every line written or on lost focus, automatically parse the text and update the value field correctly formatted
Again, this looks like what Adminer does :-).