Feature #673
Μπάρα για το info expansion
Status: | Closed | Start date: | 06/10/2011 | |
---|---|---|---|---|
Priority: | Medium | Due date: | ||
Assignee: | Christos Psaltis | % Done: | 0% |
|
Category: | Cyclades UI | Spent time: | - | |
Target version: | v0.5 |
Description
Όπως φαίνεται και στο #669 φεύγει το "show:disks/networks..." απ'το icon view και μπαίνει μία μπάρα αντίστοιχη με του menu για το expansion. Για τη v0.5 θα έχει μόνο το info. H μπάρα έχει background color ίδιο με το hoverbox όταν το hoverbox δεν βρίσκεται πάνω και ελάχιστα πιο σκούρα όταν το είναι πάνω στο hoverbox.
Όπως φαίνεται και εδώ:
https://code.grnet.gr/attachments/download/191/web_layout_0.1.1-expand_info.png
όταν ο χρήστης πατήσει πάνω σε μία επιλογή (μόνο το info για τώρα) αυτή γίνεται πιο σκούρα και ανοίγει το expansion box. Tαυτόχρονα το βελάκι γυρνάει προς τα πάνω για να καταλάβει ο χρήστης ότι από κει κλείνει το expansion
Τέλος μπαίνει ένα background πίσω από τις πληφορορίες όταν αυτές γίνουν expand όπως φαίνεται στο παραπάνω mockup. Το χρώμα του background είναι ίδιο με το background της μπάρας (δηλαδή λίγο πιο σκούρο από το hoverbox).
Οι δύο οριζόντιες γραμμές πάνω και κάτω φεύγουν
Related issues
History
#1 Updated by Vangelis Koukis almost 13 years ago
- Target version set to v0.5
#2 Updated by Christos Psaltis almost 13 years ago
- Status changed from Assigned to Feedback
Κάποιες διευκρινήσεις σε αυτό:
1. οι δύο οριζόντιες γκρι γραμμές φεύγουν εντελώς από το template;
2. το background του panel με τις πληροφορίες που πέφτει, μένει σε αυτό το χρώμα ακόμα και όταν ο χρήστης δεν κάνει hover πάνω του;
#3 Updated by Christos Psaltis almost 13 years ago
Μια ακόμη διευκρίνηση εδώ:
Το κουμπί info παίρνει συνολικά 3 χρώματα;
Εάν ανοιχτό στην αρχή, ένα λίγο πιο σκούρο όταν κάνεις hover σε κάποιο μηχάνημα και ένα ακόμα πιο σκούρο όταν το πατήσεις για να πέσουν οι πληροφορίες από κάτω. Στην τελευταία περίπτωση μάλιστα αλλάζει μόνο το background της λέξης info και όχι αυτό με του βέλους.
Εάν ο χρήστης απομακρυνθεί από το μηχάνημα, τότε πρέπει να φύγει το ανοιχτό μπλε στο hover του, αλλά να μείνει το σκούρο χρώμα στο panel που έχει πέσει και στο background της λέξης info.
Σωστά;
#4 Updated by Constantinos Venetsanopoulos almost 13 years ago
- Status changed from Feedback to Assigned
Όλα σωστά. Μόνο για το τελευταίο, όταν φύγει ο χρήστης σε άλλο μηχάνημα, μάλλον πρέπει να μείνει και το κουτί του hover για να φαίνεται σε ποιο μηχάνημα ανήκουν οι πληροφορίες που έχουν γίνει expand.
#5 Updated by Christos Psaltis almost 13 years ago
Φοβάμαι ότι σε αυτήν την περίπτωση ο χρήστης θα μπερδεύεται μεταξύ των μηχανημάτων που κάνει hover και αυτών που έχει ανοίξει ήδη.
Ίσως εάν αφήναμε μπλε χρώματα μόνο στο hover και ποτέ άλλοτε να ήταν καλύτερα. Πώς σου φαίνεται;
#6 Updated by Constantinos Venetsanopoulos almost 13 years ago
Κάνε τότε το background ακόμη πιο ανοιχτό από το hoverbox. Ίσα ίσα να φαίνεται. Πάντως να μην υπάρχει καθόλου δεν είναι καλή ιδέα γιατί και πριν μπέρδευε πάρα πολύ.
#7 Updated by Christos Psaltis almost 13 years ago
καλύτερο αυτό, θα το κάνω έτσι και βλέπουμε αργότερα εάν θέλει κάποια αλλαγή η παλέτα
#8 Updated by Christos Psaltis almost 13 years ago
Αυτό έχει γίνει και νομίζω ότι φαίνεται καλά.
Μερικές σημειώσεις για την παλέτα, προσπάθησα να κρατήσω τα χρώματα κοινά παντού για να χρησιμοποιήσω όσο το δυνατόν λιγότερα. Πιο συγκεκριμένα έχω χρησιμοποιήσει:
machine:hover -> #A1C8DB (όταν κάνεις hover σε ένα μηχάνημα)
machine.light-background -> #aed2e3 (όταν ανοίξεις το info pane και απομακρύνει το mouse από το μηχάνημα)
info-header -> #A1C8DB (όλο το κουμπί, label+βέλος, όταν το βλέπεις κλειστό και χωρίς κανένα hover)
info-header:hover -> #84b7d0 (όλο το κουμπί, label+βέλος, όταν κάνεις hover σε ένα μηχάνημα)
info-label:click -> #5CA1C0 (μόνο η λέξη info όταν κάνεις κλίκ στο κοπυμπί για να ανοίξει το pane)
metadata-container -> #84b7d0 (το περιεχόμενο του pane)
separators -> #5CA1C0 (οι γραμμές μεταξύ μηχανών και μεταξύ των στηλών του info pane)
Το #A1C8DB το χρησιμοποιώ και στην μπάρα του κεντρικού μενού (machines, disks, networks).
Εάν δεν είσαι ευχαριστημένος με κάποιο από αυτά, πρότεινε την εναλλακτική σου με βάση τα παραπάνω.
Το βασικό θέμα είναι ότι λόγω της διαφάνειας και του degrade background τα ίδια χρώματα, φαίνονται με διαφορετικό τρόπο αναλόγως σε πιο σημείο της οθόνης εμφανίζονται. Αυτό δεν μπορούμε να το αποφύγουμε με τίποτα και σε κάποιον βαθμό αλλοιώνει τα χρώματα που έχουν επιλεγεί.
Το αφήνω ανοιχτό γιατί πρέπει να γίνουν μερικές διορθώσεις στο κουμπί info.
#9 Updated by Christos Psaltis almost 13 years ago
- Status changed from Assigned to Feedback
Έγιναν και οι τελευταίες διορθώσεις στο CSS του info button.
#10 Updated by Constantinos Venetsanopoulos over 12 years ago
- Status changed from Feedback to Closed
Είναι ok, το κλείνω
#11 Updated by Constantinos Venetsanopoulos over 12 years ago
- Status changed from Closed to Assigned
Το ξανανοίγω, γιατί καλό είναι μιας και φτιάχτηκε και παίζει πολύ καλά το expansion στο icon view και στο single view να ενσωματωθούν οι αλλαγές και στο networks tab το οποίο βλέπω ότι έχει μείνει όπως ήταν. Η ίδια δηλαδή μπάρα να μπει στο "machines" και στο "firewall". To "IPs" φεύγει έτσι κ αλλιώς
#12 Updated by Christos Psaltis over 12 years ago
- Status changed from Assigned to Feedback
Αυτό έχει ολοκληρωθεί μαζί με ένα σύνολο από μικρές επεμβάσεις ώστε τα δίκτυα να μοιαζουν πιο πολύ με το icon view. To μόνο που μένει είναι θα οριστούν τα χρώματα για ένα σύνολο από hover, clicks κλπ. Δυστυχώς δεν μπορούσα να χρησιμοποιήσω την ίδια παλέττα με το icon view, γιατί εδώ έχουμε μεγαλύτερο βάθος από drop-down panels.
#13 Updated by Constantinos Venetsanopoulos over 12 years ago
- Status changed from Feedback to Assigned
Να μικρύνουν λίγο τα εικονίδια των private networks για να γίνει ίσο με το internet.
Να κατέβει ελάχιστα το name του private network για να ευθυγραμμιστεί με το state.
Το destroy μένει πορτοκαλί ακόμα και αν ακυρωθεί το confirmation box
#14 Updated by Constantinos Venetsanopoulos over 12 years ago
- Status changed from Assigned to Closed
ok, closed