Evolution Cairo Coolness

Last week Rajeev added little cairo support to calendar. We managed to get a new look to calendar. We are working to polish Evolution in the next release (2.8) and a initial screenshot of calendar below

Lot more to be done. Thanks to cairo, the calendar looks a lot better.

111 thoughts on “Evolution Cairo Coolness”

  3. Hope this gradient will be removed (or at least reworked). Currently it looks annoying. No offense indented, but it really doesn’t look that good… 🙁

  6. Looks very smooth.

    I’m assuming this pulls all the colors from your calender, that does look pretty smooth.

    Of course, when all your desktop looks like candy AND is useful, tis going to rock.

  8. I like the idea of using cairo to polish Evolution, however the gradient is a bit too much. I personally think Outlook 2003’s white boxes with drop shadows is simple but effective.

  10. First off, it looks lovely. A refreshing update, however like others point out, it needs polishing (to be expected for something so young).

    The problem with glossy/shiny gradients for appointments has to do with the rest of the gnome interface. If the current GTK theme or the window manager theme has a certain kind of glossy (say top-lit) and the appointments have another (bottom- or front-lit) then you will have incongruous lighting.

    I suggest a more tango approach since it’s A) attractive and B) less likely to conflict visually with anything else. I’ve hacked up some example appointment boxes:

  12. Speaking of Evolution UI, is the UI split (into separate components) going to happen for 2.8?

  14. Gah, I hate to say this, but Idan’s approach looks much better than mine. :-/

  16. I worked up a little bit more real mockup, this one shows off several concepts:

    http://pixane.net/static/tango-evolution-2.png
    http://pixane.net/static/tango-evolution.svg

    The 4/3/2 px indicates the width of the solid-color bar extending the appointment border past the margin into the day’s gutter, similar to how it is today (aids the eye to find where appt’s start and end). One width should be picked, the impact of using larger ones is that the gutter may have to be made larger, which leaves less overall horizontal room for the real data, the appt text.

    The bottom of the first column shows one way of displaying overlapping appointments. More thought is needed about what exactly is the minimal set of information needed to be displayed for overlapping appts.

    Anyways, the recipie for the first column is a solid 3px “gutter bar”, then an 0.7 opaque gutter bar extending from the gutter out to where the overlapped appointment frame is, and an 0.7 appointment frame. The text is 100% alpha.

    The second column shows another way of handling it. The appt. gutter extenders stay solid, the frame and bg are 0.7 opacity, but the overlaid appt text stays 100% alpha.

    I also just realized that the text is huge and not pixel-aligned, hence fuzzy. But you get the drift. I included the svg above if you want to hack further in this stream of thought.

  21. zzz buy phentermine online with pay pal zzz http://buy-phentermine-online-with-pay-pal.html [URL=http://buy-phentermine-online-with-pay-pal.html]buy phentermine online with pay pal[/URL] buy phentermine online with pay pal
    zzz phentermine buy order zzz http://phentermine-buy-order.html [URL=http://phentermine-buy-order.html]phentermine buy order[/URL] phentermine buy order
    zzz buy phentermine in canada zzz http://buy-phentermine-in-canada.html [URL=http://buy-phentermine-in-canada.html]buy phentermine in canada[/URL] buy phentermine in canada
    zzz buy phentermine online com zzz http://buy-phentermine-online-com.html [URL=http://buy-phentermine-online-com.html]buy phentermine online com[/URL] buy phentermine online com
    zzz buy link online.netgoods.org phentermine zzz http://buy-link-onlinenetgoodsorg-phentermine.html [URL=http://buy-link-onlinenetgoodsorg-phentermine.html]buy link online.netgoods.org phentermine[/URL] buy link online.netgoods.org phentermine
    zzz buy discount phentermine zzz http://buy-discount-phentermine.html [URL=http://buy-discount-phentermine.html]buy discount phentermine[/URL] buy discount phentermine
    zzz buy generic online phentermine zzz http://buy-generic-online-phentermine.html [URL=http://buy-generic-online-phentermine.html]buy generic online phentermine[/URL] buy generic online phentermine
    zzz buy com link online phentermine spain zzz http://buy-com-link-online-phentermine-spain.html [URL=http://buy-com-link-online-phentermine-spain.html]buy com link online phentermine spain[/URL] buy com link online phentermine spain
    zzz order buy phentermine online zzz http://order-buy-phentermine-online.html [URL=http://order-buy-phentermine-online.html]order buy phentermine online[/URL] order buy phentermine online
    zzz buy entry phentermine this trackback url zzz http://buy-entry-phentermine-this-trackback-url.html [URL=http://buy-entry-phentermine-this-trackback-url.html]buy entry phentermine this trackback url[/URL] buy entry phentermine this trackback url
    zzz linkdomain buy phentermine online 1.com zzz http://linkdomain-buy-phentermine-online-1com.html [URL=http://linkdomain-buy-phentermine-online-1com.html]linkdomain buy phentermine online 1.com[/URL] linkdomain buy phentermine online 1.com
    zzz book buy com guest phentermine site ulysses zzz http://book-buy-com-guest-phentermine-site-ulysses.html [URL=http://book-buy-com-guest-phentermine-site-ulysses.html]book buy com guest phentermine site ulysses[/URL] book buy com guest phentermine site ulysses
    zzz buy cwiakalaart.com link online phentermine pix zzz http://buy-cwiakalaartcom-link-online-phentermine-pix.html [URL=http://buy-cwiakalaartcom-link-online-phentermine-pix.html]buy cwiakalaart.com link online phentermine pix[/URL] buy cwiakalaart.com link online phentermine pix
    zzz buy cheap online phentermine prescription zzz http://buy-cheap-online-phentermine-prescription.html [URL=http://buy-cheap-online-phentermine-prescription.html]buy cheap online phentermine prescription[/URL] buy cheap online phentermine prescription
    zzz adipex.html apill.snow.prohosting.com buy link phentermine zzz http://adipexhtml-apillsnowprohostingcom-buy-link-phentermine.html [URL=http://adipexhtml-apillsnowprohostingcom-buy-link-phentermine.html]adipex.html apill.snow.prohosting.com buy link phentermine[/URL] adipex.html apill.snow.prohosting.com buy link phentermine
    zzz cheapest place to buy phentermine online zzz http://cheapest-place-to-buy-phentermine-online.html [URL=http://cheapest-place-to-buy-phentermine-online.html]cheapest place to buy phentermine online[/URL] cheapest place to buy phentermine online
    zzz buy phentermine cash delivery zzz http://buy-phentermine-cash-delivery.html [URL=http://buy-phentermine-cash-delivery.html]buy phentermine cash delivery[/URL] buy phentermine cash delivery
    zzz buy buy buy cod cod online phentermine phentermine umaxppc zzz http://buy-buy-buy-cod-cod-online-phentermine-phentermine-umaxppc.html [URL=http://buy-buy-buy-cod-cod-online-phentermine-phentermine-umaxppc.html]buy buy buy cod cod online phentermine phentermine umaxppc[/URL] buy buy buy cod cod online phentermine phentermine umaxppc
    zzz buy online phentermine snap zzz http://buy-online-phentermine-snap.html [URL=http://buy-online-phentermine-snap.html]buy online phentermine snap[/URL] buy online phentermine snap
    zzz buy phentermine 37 zzz http://buy-phentermine-37.html [URL=http://buy-phentermine-37.html]buy phentermine 37[/URL] buy phentermine 37
    zzz buy phentermine sat delivery cod zzz http://buy-phentermine-sat-delivery-cod.html [URL=http://buy-phentermine-sat-delivery-cod.html]buy phentermine sat delivery cod[/URL] buy phentermine sat delivery cod
    zzz buy com online pharmacy phentermine zzz http://buy-com-online-pharmacy-phentermine.html [URL=http://buy-com-online-pharmacy-phentermine.html]buy com online pharmacy phentermine[/URL] buy com online pharmacy phentermine
    zzz buy buy phentermine zzz http://buy-buy-phentermine.html [URL=http://buy-buy-phentermine.html]buy buy phentermine[/URL] buy buy phentermine
    zzz phentermine diet pill buy duramine zzz http://phentermine-diet-pill-buy-duramine.html [URL=http://phentermine-diet-pill-buy-duramine.html]phentermine diet pill buy duramine[/URL] phentermine diet pill buy duramine
    zzz buy phentermine 37.5 zzz http://buy-phentermine-375.html [URL=http://buy-phentermine-375.html]buy phentermine 37.5[/URL] buy phentermine 37.5
    zzz add buy link phentermine zzz http://add-buy-link-phentermine.html [URL=http://add-buy-link-phentermine.html]add buy link phentermine[/URL] add buy link phentermine
    zzz buy phentermine on line zzz http://buy-phentermine-on-line.html [URL=http://buy-phentermine-on-line.html]buy phentermine on line[/URL] buy phentermine on line
    zzz buy phentermine online zzz http://buy-phentermine-online.html [URL=http://buy-phentermine-online.html]buy phentermine online[/URL] buy phentermine online
    zzz buy cheap phentermine choice zzz http://buy-cheap-phentermine-choice.html [URL=http://buy-cheap-phentermine-choice.html]buy cheap phentermine choice[/URL] buy cheap phentermine choice
    zzz where to buy phentermine online zzz http://where-to-buy-phentermine-online.html [URL=http://where-to-buy-phentermine-online.html]where to buy phentermine online[/URL] where to buy phentermine online
    zzz buy cod online phentermine zzz http://buy-cod-online-phentermine.html [URL=http://buy-cod-online-phentermine.html]buy cod online phentermine[/URL] buy cod online phentermine
    zzz buy card debit online phentermine zzz http://buy-card-debit-online-phentermine.html [URL=http://buy-card-debit-online-phentermine.html]buy card debit online phentermine[/URL] buy card debit online phentermine
    zzz 1 buy entry phentermine this trackback url zzz http://1-buy-entry-phentermine-this-trackback-url.html [URL=http://1-buy-entry-phentermine-this-trackback-url.html]1 buy entry phentermine this trackback url[/URL] 1 buy entry phentermine this trackback url
    zzz buy phentermine diet pill online.com zzz http://buy-phentermine-diet-pill-onlinecom.html [URL=http://buy-phentermine-diet-pill-onlinecom.html]buy phentermine diet pill online.com[/URL] buy phentermine diet pill online.com
    zzz buy phentermine prozac zzz http://buy-phentermine-prozac.html [URL=http://buy-phentermine-prozac.html]buy phentermine prozac[/URL] buy phentermine prozac
    zzz buy 37.5mg phentermine zzz http://buy-375mg-phentermine.html [URL=http://buy-375mg-phentermine.html]buy 37.5mg phentermine[/URL] buy 37.5mg phentermine
    zzz buy phentermine no prescription zzz http://buy-phentermine-no-prescription.html [URL=http://buy-phentermine-no-prescription.html]buy phentermine no prescription[/URL] buy phentermine no prescription
    zzz buy phentermine 37.5 mg zzz http://buy-phentermine-375-mg.html [URL=http://buy-phentermine-375-mg.html]buy phentermine 37.5 mg[/URL] buy phentermine 37.5 mg
    zzz buy link myblog.de phentermine zzz http://buy-link-myblogde-phentermine.html [URL=http://buy-link-myblogde-phentermine.html]buy link myblog.de phentermine[/URL] buy link myblog.de phentermine
    zzz buy cheap phentermine free fedex zzz http://buy-cheap-phentermine-free-fedex.html [URL=http://buy-cheap-phentermine-free-fedex.html]buy cheap phentermine free fedex[/URL] buy cheap phentermine free fedex
    zzz buy cheap eteamz.active.com link phentermine zzz http://buy-cheap-eteamzactivecom-link-phentermine.html [URL=http://buy-cheap-eteamzactivecom-link-phentermine.html]buy cheap eteamz.active.com link phentermine[/URL] buy cheap eteamz.active.com link phentermine
    zzz buy phentermine online prescription zzz http://buy-phentermine-online-prescription.html [URL=http://buy-phentermine-online-prescription.html]buy phentermine online prescription[/URL] buy phentermine online prescription
    zzz 8080 buy home.tiscali.cz link phentermine phentermineonline zzz http://8080-buy-hometiscalicz-link-phentermine-phentermineonline.html [URL=http://8080-buy-hometiscalicz-link-phentermine-phentermineonline.html]8080 buy home.tiscali.cz link phentermine phentermineonline[/URL] 8080 buy home.tiscali.cz link phentermine phentermineonline
    zzz buy fda approved phentermine cod zzz http://buy-fda-approved-phentermine-cod.html [URL=http://buy-fda-approved-phentermine-cod.html]buy fda approved phentermine cod[/URL] buy fda approved phentermine cod
    zzz buy phentermine onlinecom zzz http://buy-phentermine-onlinecom.html [URL=http://buy-phentermine-onlinecom.html]buy phentermine onlinecom[/URL] buy phentermine onlinecom
    zzz buy link online.getit.at phentermine zzz http://buy-link-onlinegetitat-phentermine.html [URL=http://buy-link-onlinegetitat-phentermine.html]buy link online.getit.at phentermine[/URL] buy link online.getit.at phentermine
    zzz buy cheap phentermine online zzz http://buy-cheap-phentermine-online.html [URL=http://buy-cheap-phentermine-online.html]buy cheap phentermine online[/URL] buy cheap phentermine online
    zzz a.be buy phentermine site zzz http://abe-buy-phentermine-site.html [URL=http://abe-buy-phentermine-site.html]a.be buy phentermine site[/URL] a.be buy phentermine site
    zzz book buy guest lee phentermine ru site zzz http://book-buy-guest-lee-phentermine-ru-site.html [URL=http://book-buy-guest-lee-phentermine-ru-site.html]book buy guest lee phentermine ru site[/URL] book buy guest lee phentermine ru site
    zzz book buy com guest phentermine sherri site zzz http://book-buy-com-guest-phentermine-sherri-site.html [URL=http://book-buy-com-guest-phentermine-sherri-site.html]book buy com guest phentermine sherri site[/URL] book buy com guest phentermine sherri site
    zzz am buy looking overseas phentermine zzz http://am-buy-looking-overseas-phentermine.html [URL=http://am-buy-looking-overseas-phentermine.html]am buy looking overseas phentermine[/URL] am buy looking overseas phentermine
    zzz buy echeck phentermine zzz http://buy-echeck-phentermine.html [URL=http://buy-echeck-phentermine.html]buy echeck phentermine[/URL] buy echeck phentermine
    zzz buy phentermine online pharmacy zzz http://buy-phentermine-online-pharmacy.html [URL=http://buy-phentermine-online-pharmacy.html]buy phentermine online pharmacy[/URL] buy phentermine online pharmacy

  24. I don’t think I’m up to pulling and building Evo from CVS myself, but I will take a stab at writing “almost real” pseudocode for rendering a single appointment in evolution so that my mockup would be easy to implement. I’ll post it here in the blog a little later today

  25. Caveat: I haven’t tested this at all, but it should show off the general idea. I also didn’t write anything for rendering gutter bars since they might have other drawing constraints (I think they also display free-busy time, etc…)

    OK, assuming:

    * double aTop, aRight, aLeft, aBottom, aHeight, aWidth is the dimensions and location of the appointment box to be drawn
    * double borderR, borderG, borderB are 0.0-1.0 doubles specifying the border’s color
    * double gradDarkR, gradDarkG, gradDarkB are 0.0-1.0 doubles specifying the gradient’s darker part (on the left)
    * double gradLightR, gradLightG, gradLightB are 0.0-1.0 doubles specifying the gradient’s lighter part (essentially the entire appt background).
    * double gradWidth indicates how far the gradient should extend into the appt box.
    * double alpha indicates the alpha transparency of the entire appointment box. 0.7 would make it 70% opaque.
    * cairo context ct

    Drawing an appointment looks like this:

    // Create and fill the gradient background of the box
    cairo_pattern_t *pat;
    pat = cairo_pattern_create_linear (aLeft, aTop, aLeft+gradWidth, aTop);
    cairo_pattern_add_color_stop_rgba (pat, 0, gradDarkR, gradDarkG, gradDarkB, alpha);
    cairo_pattern_add_color_stop_rgba (pat, 1, gradLightR, gradLightG, gradLightB, alpha);
    cairo_rectangle (ct, aTop+1, aLeft+1, aWidth-2, aHeight-2);
    cairo_set_source (ct, pat);
    cairo_fill (ct);
    cairo_pattern_destroy (pat);

    // draw emblems here, don’t forget to use 0.7 alpha!

    // stroke the inside of the box with 1px semitransparent white
    cairo_move_to (ct, aLeft+1, aTop+1);
    cairo_line_to (ct, aRight-1, aTop+1);
    cairo_line_to (ct, aRight-1, aBot-1);
    cairo_line_to (ct, aLeft+1, aBot-1);
    cairo_close_path (cr);
    cairo_set_source_rgba (ct, 1, 1, 1, 0.6 * alpha);
    cairo_stroke (cr);

    // stroke the outside of the box with 1px dark color
    // To give the “rounded” effect, leave off stroking the corners
    cairo_set_source_rgba (ct, borderR, borderG, borderB, alpha);

    cairo_move_to (ct, aLeft+1, aTop);
    cairo_line_to (ct, aRight-1, aTop);
    cairo_stroke (ct);

    cairo_move_to (ct, aRight, aTop+1);
    cairo_line_to (ct, aRight, aBot-1);
    cairo_stroke (ct);

    cairo_move_to (ct, aRight-1, aBot);
    cairo_line_to (ct, aLeft+1, aBot);
    cairo_stroke (ct);

    cairo_move_to (ct, aLeft, aBot-1);
    cairo_line_to (ct, aLeft, aTop+1);
    cairo_stroke (ct);

    // render the text here… Always use 100% alpha for the text.

  27. Idan, your mocks look really cool. This is proof-of-concept level code and Im planning to integrate it for next release

    A nice piece of screenshot 🙂

    We should expect most of these in 2.8 time frame.

Comments are closed.