Hi
Dne Sat, 25 Jun 2011 14:07:56 +0200
Tyron Madlener <tyronx(a)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 :-).
--
Michal Čihař |
http://cihar.com |
http://blog.cihar.com