[Phpmyadmin-devel] Create table dialog

[Michal Čihař]

Hi

Dne Sat, 25 Jun 2011 14:07:56 +0200
Tyron Madlener <tyronx at 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
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 836 bytes
Desc: not available
URL: <http://lists.phpmyadmin.net/pipermail/developers/attachments/20110627/6f251364/attachment.sig>