Feature #389

Τα standard, list και single view να αποκτήσουν εικονίδια

Added by Giorgos Gousios over 11 years ago. Updated over 11 years ago.

Status:Closed Start date:04/06/2011
Priority:High Due date:
Assignee:Christos Psaltis % Done:

60%

Category:Cyclades UI Spent time: -
Target version:v0.2

Description

Η μετάβαση από view σε view θα γίνεται με εικονίδια, όχι με κείμενο/link. Πρέπει να βρεθούν εικονίδια και να αντικαταστήσουν τα text links. Επιπρόσθετα, πρέπει να υπάρχει tooltip στο κάθε ένα: "Icon View, List View, Single View".

Associated revisions

Revision aa1e0cab
Added by Markos Gogoulos over 11 years ago

use icons for standard/single/list views on the ui

Refs #389

Revision 99e63a25
Added by Christos Psaltis over 11 years ago

Change icons for switching between views, Refs #389

History

#1 Updated by Christos Psaltis over 11 years ago

Τα εικονίδια αυτά θα μας τα στείλεις cven εσύ ή να βάλουμε κάποια εμείς;

#2 Updated by Constantinos Venetsanopoulos over 11 years ago

Θα στείλω εγώ

#3 Updated by Constantinos Venetsanopoulos over 11 years ago

  • Status changed from New to Assigned
  • Priority changed from Medium to High

Έχω ανεβάσει το αρχείο view_buttons.svg σε inkscape format το οποίο περιέχει όλους τους συνδυασμούς εικονιδίων και hover για τα icon/list/single views. Όπου είναι λευκό είναι transparent και φαίνεται το χρώμα της μπάρας από πίσω.
Τα νέα εικονίδια φαίνονται και στο mockup web_layout_0.0.10-10.png.

Οτιδήποτε χρειάζεστε μου λέτε. Ας αρχίσουμε να κοιτάμε και τα υπόλοιπα tickets σιγά σιγά για να είμαστε σίγουροι ότι θα προλάβουμε να κάνουμε σωστό merge Παρασκευή - Σάββατο.

Καλή δουλειά

#4 Updated by Constantinos Venetsanopoulos over 11 years ago

  • Assignee changed from Dimitris Moraitis to Markos Gogoulos

Μάρκο βλέπω ότι έχει γίνει commit (aa1e0ca) που αφορά αυτό το ticket.
Τα εικονίδια δεν φαίνονται σωστά.

1. Δεν ξέρω πως έχουν γίνει resize, αλλά έχει χαλάσει η ευκρίνειά τους.
2. Γιατί έχουν διαχωριστεί τα τρία εικονίδια; Τα εικονίδια πρέπει να είναι κολλητά όπως στο svg που έχω στείλει και όπως φαίνονται και στο mockup.

#5 Updated by Christos Psaltis over 11 years ago

Είναι δοκιμαστικό αυτό το commit, θα φτιαχτεί σωστά σήμερα. Ωστόσο μπορεί να χρειαστεί μια μικρή αλλαγή στον σχεδιασμό των εικονιδίων, του στυλ να βάλουμε λιγότερες γραμμές μέσα, για να φαίνονται πιο ευκρινώς. Θα κάνουμε καλύτερα resize και θα δούμε πώς θα φαίνονται.

#6 Updated by Christos Psaltis over 11 years ago

  • Status changed from Assigned to Feedback
  • Assignee changed from Markos Gogoulos to Christos Psaltis

Στο afe1974 βάλαμε τα εικονίδια στην καλύτερη έκδοση που γινόταν. Κάναμε πάρα πολύ editing για να τα φέρουμε σε κάποια εμφανίση και αξιοποιήσιμη μορφή. Το πρόβλημα ήταν στον τρόπο που αλλάζουν τα εικονίδια και στις διαστάσεις που πρέπει να έχουν. Εάν τα εικονίδια ξανασχεδιαστούν, τότε ακολουθήστε το στυλ των list-view.png, icon-view.png, single-view.png.

#7 Updated by Vangelis Koukis over 11 years ago

  • Status changed from Feedback to Assigned

Χρίστο, κάτι χάνω μάλλον. Ποιο είναι το πρόβλημα με τα εικονίδια; Εδώ https://code.grnet.gr/attachments/download/109/web_layout_0.0.10-10.png υπάρχουν
μια χαρά σε png, συγκεκριμένου μεγέθους. Δεδομένου ότι είναι διαθέσιμο το svg, και η προαναφερόμενη εικόνα έχει προκύψει από αυτό, γιατί δεν γίνεται να φαίνονται όμοια τα εικονίδια;

Θέλω να πω, και στον Firefox και στον Opera φαίνονται κομμένα και παραμορφωμένα, λες και έχουν φάει scaling στο 99%. Μπορείς να γίνεις λίγο πιο ακριβής; τι είναι αυτό που εμποδίζει να γίνουν με ακρίβεια rendered από το svg σε png συγκεκριμένου μεγέθους, π.χ. 35x35, δεν ξέρω, και μετά να φαίνονται ακριβώς 35x35 όταν βγαίνουν στην οθόνη μου ώστε να μην κόβονται και παραμορφώνονται οι γραμμές όπως τώρα;

#8 Updated by Christos Psaltis over 11 years ago

Κατ'αρχήν βεβαιώσου ότι βλέπεις τη σελίδα στο κανονικό της ζουμ. Στο mockup τα εικονίδια φαίνονται πιο blurry από ότι είναι τώρα. Το βασικό πρόβλημα είναι ότι όταν κάνεις export από svg, τότε λόγω του interpolation τα εικονίδια παραμορφώνονται.

Ένα επιπλέον θέμα που προέκυψε είναι η διάταξή τους σε αρχεία. Για να γλιτώσουμε τα πολλαπλά get εικόνων, χρησιμοποιήσαμε τελικά τη μέθοδο που πρότεινε ο Κωνσταντίνος. Φορτώνουμε μία φορά όλα τα εικονίδια, μία τριάδα για κάθε view, τα βάζουμε σαν background και στην συνέχεια περιστρέφουμε το background. Για να πετύχει αυτό έπρεπε να σημιουργηθούν εκ νέου bitmaps, όπως τα αρχεία που αναφέρω πιο πάνω.

Εάν θέλετε να βγαίνουν καλύτερα θα πρέπει να σχεδιαστούν εξ'αρχής σαν bitmap στις τελικές τους διαστάσεις, με διάφανο background.

#9 Updated by Constantinos Venetsanopoulos over 11 years ago

  • Status changed from Assigned to Resolved

Αφού δεν γίνεται κάτι καλύτερο αυτή τη στιγμή, τα αφήνουμε όπως είναι και ανάλογα με την εντύπωση που θα κάνουν στο demo θα προχωρήσουμε ανάλογα.

#10 Updated by Christos Psaltis over 11 years ago

Εδώ όντως τα εικονίδια δεν είναι καλά, αλλά εάν ακολουθηθούν τα όσα γράφω πιο πάνω θα βελτιωθούν σίγουρα. Επίσης για να γίνουν πιο ευκρινή θα χρειαστεί να γίνουν λιγότερο περίπλοκα, δηλαδή να έχουν λιγότερες γραμμές και τετραγωνάκια. Εδώ, για να θυμηθώ και την τοπογραφία, έχουμε να κάνουμε με ένα κλασσικό πρόβλημα γενίκευσης. Το εικονίδιο περιέχει πολύ πληροφορία σε σχέση με την κλίμακά του. Αν έχεις χρόνο δες το λίγο. Σε κάθε περίπτωση πάντως και εφόσον δεν αλλάξουν οι διαστάσεις των εικονιδίων μπορούμε απλά να τα αντικαταστήοσυμε με τα νέα.

#11 Updated by Vangelis Koukis over 11 years ago

Χρίστο, τα εικονίδια στο png mockup δεν ξέρω αν είναι blurry, και όπως καταλαβαίνεις δεν με πειράζει. Οι γραμμές φαίνονται όλες, είναι διακριτές, και τα κουτιά δεν είναι κομμένα. Από αυτό καταλαβαίνω ότι το πρόβλημα μετατροπής του svg σε png δεν υφίσταται: το συγκεκριμένο png (https://code.grnet.gr/attachments/download/109/web_layout_0.0.10-10.png) έχει σωστά τα εικονίδια.

Δεν νομίζω ότι έχει νόημα να εμπλακούμε σε συζήτηση για το antialiasing ή ο,τιδήποτε άλλο. Η ύπαρξη της εικόνας είναι η απόδειξη ότι η σωστή μετατροπή είναι εφικτή.

Ωστόσο, αν είναι να βοηθήσω την κατάσταση, δοκιμάστε να κάνετε export σε πολύ μεγαλύτερη εικόνα, και μετά να κάνετε resize [ναι, με antialising, ναι ας είναι "θολό"], μήπως αυτό αλλάξει κάτι.

#12 Updated by Christos Psaltis over 11 years ago

Δοκιμάσαμε αυτό που λες και αλλά. Ακόμα και αν εικονίδιο στο mock up ήταν μια χαρά όπως λές και πάλι δεν μπορούμε να το χρησιμοποιήσουμε χώρις παρα πολύ editing λόγω του τρόπου που γίνεται το ηοωερ κλπ. Είναι προφανές ότι έχουμε διαφορετική αντίληψη περί του προβλήματος οπότε ας τα πούμε καλύτερα από κοντά στο demo.

Vangelis Koukis wrote:

Χρίστο, τα εικονίδια στο png mockup δεν ξέρω αν είναι blurry, και όπως καταλαβαίνεις δεν με πειράζει. Οι γραμμές φαίνονται όλες, είναι διακριτές, και τα κουτιά δεν είναι κομμένα. Από αυτό καταλαβαίνω ότι το πρόβλημα μετατροπής του svg σε png δεν υφίσταται: το συγκεκριμένο png (https://code.grnet.gr/attachments/download/109/web_layout_0.0.10-10.png) έχει σωστά τα εικονίδια.

Δεν νομίζω ότι έχει νόημα να εμπλακούμε σε συζήτηση για το antialiasing ή ο,τιδήποτε άλλο. Η ύπαρξη της εικόνας είναι η απόδειξη ότι η σωστή μετατροπή είναι εφικτή.

Ωστόσο, αν είναι να βοηθήσω την κατάσταση, δοκιμάστε να κάνετε export σε πολύ μεγαλύτερη εικόνα, και μετά να κάνετε resize [ναι, με antialising, ναι ας είναι "θολό"], μήπως αυτό αλλάξει κάτι.

#13 Updated by Constantinos Venetsanopoulos over 11 years ago

  • Status changed from Resolved to Feedback

Σαν να μου φαίνεται ότι έγιναν αλλαγές εδώ. Υπάρχει κάποια εξέλιξη;

#14 Updated by Christos Psaltis over 11 years ago

  • % Done changed from 0 to 60

Αλλάξαμε λίγο το css, αλλά όχι τα εικονίδια. Καλύτερα να τα πούμε από κοντά για αυτό και να ανοίξει νέο ticket σε άλλο release. Μου φαίνεται αξιοπρεπές έτσι όπως είναι τώρα.

#15 Updated by Constantinos Venetsanopoulos over 11 years ago

  • Status changed from Feedback to Closed

Όντως, είναι αξιοπρεπές για τώρα. Το κλείνω και θα ανοίξει άλλο ticket για επόμενο release

Also available in: Atom PDF