Synnefo

Με αυτό θα προχωρήσουμε; Υπάρχει το mockup;

Έχω ανεβάσει τα mockup για την αισθητική ανανέωση του wizard που συζητούσαμε εδώ και καιρό, για να κλείσει και αυτό το ticket. Στην λειτουργικότητα δεν αλλάζει απολύτως τίποτα.

step 1 : web_layout_0.0.10-wizard-1.png
step 2 : web_layout_0.0.10-wizard-2.png
step 3 : web_layout_0.0.10-wizard-3.png

Έγινε ένα πρώτο πέρασμα στο 94adeabb

Καταλαβαίνω ότι είναι ακόμη υπό κατασκευή, απλώς να συνεισφέρω ότι εκτός κάποιων προβλημάτων με την εμφάνιση δεν παίζει καθόλου σε Opera, δεν εμφανίζονται τα κουμπιά κάτω. Δεδομένου του #341, είναι σημαντικό ο νέος κώδικας να φτιάχνεται και με το βλέμμα σε cross-browser compatibility, δεδομένου ότι τελικά όλα θα πρέπει να παίζουν στους υποστηριζόμενους browsers.

Γενικά έχουμε πετύχει την ανανέωση που χρειάζεται. Τα χρώματα είναι ακριβώς όπως πρέπει. Να σημειώσω ότι τον wizard τον βλέπω με firefox4 σε debian. Οι αλλαγές που χρειάζονται για να έρθουμε όσο πιο κοντά γίνεται στο mockup είναι οι εξής:

• Γενικά και για τα 3 steps:
  1. Στην πάνω γκρι μπάρα: να μεγαλώσουν ελάχιστα τα νούμερα και να εφάπτονται στο κάτω μέρος της γκρι μπάρας, έτσι ώστε η γκρι μπάρα να μη φαίνεται κάτω από τα νούμερα (το λευκό να γίνεται blend με το λευκό του background, όπως στο mockup).
  2. Στην πάνω γκρι μπάρα: να στοιχιστούν στο κέντρο όσον αφορά στον κάθετο άξονα τα "Image", "Flavor", "Name". Τώρα είναι πιο κάτω από τη μέση.
  3. Στην πάνω γκρι μπάρα: To "Image" να έρθει πιο κοντά στο "1".
  4. Στην πάνω γκρι μπάρα: Όσον αφορά στην οριζόντια στοίχιση, η απόσταση από την αρχή της μπάρας μέχρι την αρχή του "1" είναι καλή και ας μείνει έτσι. Πρέπει να γίνει ίδια και η απόσταση μεταξύ του τέλους του "Name" και του τέλους της μπάρας. Μετά στοιχίζεται στη μέση (μεταξύ του τέλους του "Image" και την αρχή του "3") όλο το "2 Flavor".
  5. Τα input boxes να γίνουν flat χωρίς εσωτερική σκιά και αν γίνεται κάθε φορά που είναι active, το border τους να γίνεται μπλε (ίδιο με το μπλε των active "Image", "Flavor", "Name").

• Για το step 1:
  1. To κουμπί "system images" να μην κάνει wrap. Ας γίνει λίγο μεγαλύτερου width αν χρειάζεται. Το height να γίνει ίδιο με του "your images". Tελικά τα δύο κουμπιά να έχουν ίδιο width και ίδιο height.
  2. Κατά το hover πάνω από το "your images" νομίζω είναι καλύτερο το κουμπί να γίνεται ένα τόνο πιο σκούρο και όχι πιο ανοιχτό, γιατί σε μένα τουλάχιστον γίνεται ίδιο με το background.
  3. Tα radio buttons να στοιχιστούν στη μέση κάθε περιοχής όσον αφορά στον κάθετο άξονα. Αυτή τη στιγμή είναι πάνω από τη μέση.
  4. Δίπλα από το νούμερο του size του image να φαίνεται η μονάδα μέτρησης "MB".
  5. Όταν έχει επιλεγεί ένα radio button τότε να μένει σταθερό το hoverbox visible πάνω από αυτή την επιλογή, και να παίζει μόνο στις υπόλοιπες.
  6. Η απόσταση των "Cancel", "Next" buttons από το κάτω κάτω μέρος του wizard να γίνει ίδια με αυτή που υπάρχει στα step2 και step3. Γενικά ο χώρος μεταξύ της τελευταίας λεπτής γκρι μπάρας και του κάτω μέρους του wizard πρέπει να μένει σταθερός και στα 3 steps (όπως συμβαίνει αυτή τη στιγμή στο 2 και 3).

• Για το step 2:
  1. Tα "small", "medium", "large", "custom" να στοιχιστούν στη μέση (ώς προς τον κάθετο άξονα) της γκρι μπάρας που είναι μέσα, όπως είναι στοιχισμένα και τα radio buttons.
  2. Όταν πατάω πάνω στη λέξη "small/medium/large/custom" επιλέγεται το αντίστοιχο flavor, κουνούνται σωστά οι μπάρες και γίνεται λευκή η αντίστοιχη επιλογή (σωστά), αλλά το radio button δεν αλλάζει στην επιλογή που έκανα click. Παραμένει στην προηγούμενη. Όταν κάνω click πάνω στα radio buttons και όχι στις λέξεις όλα γίνονται σωστά.
  3. Προτείνω να έχουμε ένα απαλό hover (να αλλάζει ελάχιστα το font color) πάνω από τις λέξεις "small/medium/large/custom" από τη στιγμή που μπορούμε να κάνουμε click και πάνω σε αυτές και να γίνει η αλλαγή.
  4. Να στοιχιστεί αριστερά και δεξιά το κουτί που δείχνει την τιμή των credits με τα παραπάνω 3 κουτιά. Τώρα φεύγει λίγο αριστερά.
  5. Η λέξη "Back" στο button να στοιχιστεί αριστερά στο κουτί, αντίστοιχα με την δεξιά στοίχιση του "Next".

• Για το step 3:
  1. Να στοιχιστούν στη μέση του γκρι κουτιού (στον κάθετο άξονα) οι πληροφορίες. Τώρα είναι πάνω από τη μέση.
  2. Το "Back" να στοιχιστεί αριστερά στο κουτί όπως πρέπει να γίνει και στο step 2.
  3. Το "Create VM" να στοιχιστεί στη μέση του κουτιού, όπως είναι το αρχικό "Cancel" στο step 1.
  4. To χρώμα του κουτιού του "Create VM" να γίνει πορτοκαλί (με λίγο πιο ανοιχτό hover).

ενσωματώθηκαν και οι διορθώσεις στο afa2ebd2

Έκανα ένα update του wizard με διορθώσεις στη εμφάνιση σύμφωνα με το σχόλιο 16 στο cf93419a

Λοιπόν, ώς προς την εμφάνιση είμαστε ΟΚ.

2 Προβλήματα:

1. Τα input boxes στο step 2 αλλάζουν μέγεθος μόλις πειράξεις τις μπάρες. Πρέπει να μένουν σταθερά, όπως πριν
2. Το σημαντικό: Τα πάντα σπάνε αν κάνεις τα εξής:
α. Ανοίγεις τον wizard
b. Πατάς "Next" για να σε πάει στο step 2
c. Πατάς 3 φορές (ή παραπάνω) το keyboard "tab" (σε πηγαίνει στο step 3 και σβήνουν όλες οι ενδείξεις στην πάνω μπάρα).
d. Πατάς 1 φορά "Back" (σε πάει στο step 2).
e. Πατάς keyboard "tab" (σπάνε τα πάντα).

Μόλις σπάσουν τα πάντα δεν επανέρχεται ούτε με απλό refresh της σελίδας. Θέλει Shift+Reload

Λύθηκε το πρόβλημα με το tab και επανέφερα το border για τα text boxes σε inset στο f87e79a4

Με το tab δεν κρασάρει πλέον, αλλά άμα πατήσεις tab στο step 3 για κάποιο λόγο σβήνει η ένδειξη "3 Νame" πάνω στη μπάρα (γίνεται γκρι ίδια με τις "1 Image", "2 Flavor").
Επίσης τα input boxes συνεχίζουν να αλλάζουν μέγεθος μόλις κουνάς τους sliders. (και σε firefox4 και σε chrome)

Τώρα τα input boxes πρέπει να ναι οκ.

Για το ζήτημα του tab, υπάρχει το εξής πρόβλημα: Στο κομίτ που έκανα ( 1508a5ab ), τσεκάρω αν βρισκόμαστε στην 3η σελίδα του wizard οπότε το tab σε αυτήν την περίπτωση δεν κάνει τίποτα. Το jquery.scrollable όμως έχει ένα bug, όπου αν κάνεις back, το index της σελίδας δε μειώνεται (είτε το κάνει μέσω του back button, είτε με το πίσω βέλος στο πληκτρολόγιο). Αυτό έχει σαν αποτέλεσμα αν κάνεις back το tab να σταματάει να δουλεύει αφού η getIndex() επιστρέφει πάντοτε 2 από κει και πέρα. Θα το δω λίγο και αύριο, έχω μια ιδέα ακόμα να δοκιμάσω. Διαφορετικά ή θα πρέπει να απενεργοποιήσουμε το tab και η πλοήγηση στον wizard να γίνεται με τα βέλη, είτε να το αφήσουμε όπως τώρα όπου αν κάποιος επιστρέψει με κλικ και ξαναπατήσει tab, δεν θα παίζει).

Σε firefox4 τα input boxes των sliders συνεχίζουν να μεγαλώνουν και να μικραίνουν όταν κουνάς τους sliders!
Γιατί συμβαίνει τώρα αυτό και δεν μπορεί να διορθωθεί; Στον προηγούμενο wizard δεν το είχαμε αντιμετωπίσει αυτό το πρόβλημα.

Κάνε μία προσπάθεια και με το tab να δούμε τι θα κάνουμε, γιατί πρέπει να κλείσει οπωσδήποτε αυτό το ticket σήμερα.

Επίσης, ο wizard δεν πρέπει να σε αφήνει να κάνεις create VM αν το name είναι κενό.

Μετά το 5d3c8f3f ο wizard δεν επιτρέπει κενά ονόματα στη δημιουργία του VM.

Στο 29f0a240 λύθηκε και το πρόβλημα με το tab στην 3η σελίδα.

Ναι, το είχα διορθώσει αυτό (τουλάχιστον) σε όπερα 11.10 σε Ubuntu. Έκανα κι ένα μικρό fix στο 8d1ed85c γιατί λόγω των διαφορετικών margins που χρησιμοποιεί ο opera στους horizontal rulers τα κουμπιά ήταν (σε όλα τα pages το ίδιο όμως) χαμηλότερα απ ότι σε firefox/webkit.

ok, αφού λες ότι έχει διορθωθεί και σε όπερα το κλείνω

Μιχάλη, μου κάνει εντύπωση που λες ότι παίζει σε opera 11.10 σε ubuntu γιατί εγώ το τρέχω σε opera 11.10 σε debian και οι αποστάσεις των "Cancel/Next" του step 3 είναι διαφορετικές από αυτές των step 1 και 2. Στο step 3 είναι οι σωστές. Στα 1,2 η απόσταση από το τέλος του λευκού background είναι πιο μικρή.

Εδώ εγώ βλέπω ένα pixel διαφορά στην κατακόρυφη θέση των κουμπιών. Στα βήματα 2,3 η θέση είναι η ίδια.

Δοκίμασα να το διορθώσω αλλά εάν το διορθώσω στον opera, σπάει σε firefox και chrome. Θα έλεγα να το αφήσουμε έτσι, ο opera είναι λίγoτερο δημοφιλής και τέτοιες απειροελάχιστες διαφορές δεν είναι κρίσιμες.

Δεν ξέρω αν άλλαξε κάτι πάντως και γώ τώρα το βλέπω με ελάχιστη διαφορά. Το κλείνω