Extenders: now 400% more pretty.

I haven’t blogged in way too much time, sorry for that. This however doesn’t mean that I didn’t make any progression with extenders. You might have seen the screencast about extenders in the commit-digest of a couple of weeks ago. While not much features have been added since, I have applied quite some polish. Not only in the form of bugfixes, but also in the form of a fresh new look, designed by Pinheiro. Implementing the c++ part of this look wasn’t at all trivial, but since about a week it is available in trunk/. A little screenshot for those of you who don’t run trunk as their primary desktop.

now 400% more pretty.

Extenders: now 400% more pretty.

Shown is a couple of notifications by plasma’s new and improved systray, which got the extendified notification applet merged in. It is really great to see extenders being adopted by other developers and appearing in all kinds of applet. At the moment, extenders are used by libplasmaclock (which means all plasma clocks include a detachable calendar), system tray for notifications, kuiserver applet and battery applet. If everything goes according to plan, the kuiserver applet will also be merged into the system tray before 4.2. And all this is just the start, since 4.2 will be the first release to include extenders. These are exciting times! :)

I’m curious to see how other themes look with extenders, once the theme maintainers add the required svg’s for extenders: extender-dragger and extender-background. If you maintain a plasma theme and need some more info on the svg’s to include, don’t hesistate to ask me.

About these ads

44 Responses to “Extenders: now 400% more pretty.”

  1. Nuno Pinheiro Says:

    YOU ROCK!

  2. Dan Leinir Turthra Jensen Says:

    In that video, i see a potential usability hazard… The pause button, when clicked, turns into a stop button rather than a resume button… So, with a slightly dodgy mouse (i’ve had one of those and got by with it for around half a year or so before really getting tired of it), you end up clicking pause, and then the mouse clicks stop for you. So… swap the order of those two buttons and you should be all good :)

    Other than that, however, it really looks swish! i can’t help thinking Slicker when i see this stuff going on ;)

  3. Vide Says:

    And to be 500% more sexy, please remove the “close” button (it looks horrible and wastes space) and put a X image just like any other notification system out there (growl, gnome, windows etc). Anyway, great work, it looks really beautiful now :)

  4. Flavio Says:

    Good work! Hope the style is not final, because it is, well, ugly. Take a look at the “competitors” http://growl.info/screenshots.php

  5. tbscope Says:

    The title bar of each extender doesn’t look good.
    It makes each extender look very busy. In my opinion it would be better without the border around the title.

    For me it distracts my eyes from the text.

  6. mutlu Says:

    @ pinda:
    Awesome! Beautiful! :)
    This is _the_ plasma feature I have been most excited about since the time when plasma was only mockups.

    Truly great work!

    @ Flavio: you must be kidding! The Growl notifications are basically equivalent to the old notification system of KDE3 (well, and 4), only with slightly prettier artwork. You seem to totally misunderstand what this is all about. If you don’t like Oxygen, just use some other theme!

  7. Flyser Says:

    Just remove the close button completely and close the notification if you click on it

  8. rscheepmaker Says:

    @Dan: you’re right about that, thanks for bringing that usability issue to my attention.

    @Vide: in case of close that would be possible. The notification spec however only includes names for custom action and no icons. For example, a kopete notification includes the actions ‘chat’ and ‘ignore’. These would still be buttons containing text.

  9. rscheepmaker Says:

    @Flavio: I disagree. The current style fits well in the default plasma theme. Of course, it’s all themable, so other themes could create an entirely different look for them. This doesn’t mean the current look is definetly ‘final’… there still might be some smaller tweaks applied, however this is a good indication of what extenders will look like in 4.2.

    @tbscope: You should also realize, it’s not only a title, it’s a drag bar that can be used to detach extender items, so I think there should be a clear distinction between this interface element, and the actual contents of the item. But of course: it’s all themable.

  10. autocrat Says:

    Will it be possible to have smaller-sized icons? I like my notifications to take up only as much space as they need; and the large icons do not appeal to me, plus are a source of wasted screen realestate, imho.

    Great work!

  11. Kishore Says:

    Looks beautiful! I look forward to the 4.2 release.

    Questions: How do these extenders behave when space is constrained? Do they stack one covering the other and providing some kind “next” “previous” notification buttons? Can the notifications be then given some “boundaries” for automatic display?

    I am thinking about plasma on mobile devices and a case where there are say, two notifications “3 missed calls” and “5 new messages” but there is not enough place to sho them both because notifications are only to appear in the area between say, clock and a panel. Place is sufficient only to show one notification. I am currently playing around with the FreeRunner and am exited about the possibility of running plasma as the home screen for the device!

  12. Andre Says:

    Hey, great work! I’m really looking forward to extenders.
    A small nitpick: On your screenshot, the alignment seems to be a bit off. The exclamation mark icon isn’t aligned vertically, the text isn’t aligned with neither the title bar, nor the icon, the main text should perhaps go to the center (it should be tried out at least, but I could understand the current alignment in that case), and the ‘close’ seems to be too high in the button. I think it’s very important for the appearance that the alignment is corrected. Did you try out a white outline instead of a solid colored button? It might look better with just the white outline and a black background with white text.
    Greetings
    André

  13. tribe Says:

    Nice work, looks sweet :)

    Just one suggestion related to autrocrat’s size of icons: make the icon size depending on the text length. So if we have just one tiny like the icon will be small size, but if the text has 2 lines or more then increase the icon size.

    Easy to say, hard to code i guess, but a suggestion anyway :)

    Bye

  14. rscheepmaker Says:

    @Kishore: grouping for extenders is a feature that I have planned for 4.3. Untill then, the notifications will grow out of the screen. I might however adjust the size of the notifications depending on how much text there is to save some space.

    @Andre: I agree, there are still some small tweaks required to make the look perfect. Lucky enough there’s still some time before 4.2 is released.

  15. Nikos Says:

    Nice job ! I agree that the default theme does not look ugly, but it seems the artwork is “too much” for each notification. Maybe it could keep the current look as a whole but present each notification in a more minimal style.

  16. twilightomni Says:

    Very excited about the notification system. Glad to see the systray finally looks brilliant, really looking forward to KDE 4.2.

  17. 13K Says:

    Hi, your work is great. My only critic is that you kept everything too tight. I mean you can keep more space between the elements. Take a look at this mockup to see what I mean http://img180.imageshack.us/img180/4492/plasmoidspart2re2.jpg

  18. twilightomni Says:

    What about other applets that use libnotify? Will they be covered by the extender notifications?

    I’m thinking of Fedora in particular, which uses the GTK versions of NetworkManager and PackageKit in their KDE 4 distribution (not out of spite, but because they’re just more stable than the Qt counterparts right now). It would be nice if libnotify balloons were also caught by Plasma somehow; would greatly increase the cohesiveness of the desktop experience.

  19. litb Says:

    really nice! just want to tell one thing: i think the titlebar should mimic the look of the Oxygen titlebar style in kwin. i for one didnt notice from the screenshot that you could drag it. If it looked like a “real” titlebar, that would be immediately visible to the user.

    And, please keep it that tight. I don’t like much space around those things. Better tell the Oxygen people to make the Oxygen menu style tighter too :p It has way too much space between each row. But that indeed is another story…
    thumbs up!

  20. M A Says:

    Thank you very much pinda and pinheiro!!

    Question: do they disappear after some seconds or do we have to click each and every one of them?

    About the looks:
    The looks are great and fits with plasma (still needs to be perfected though), however:
    1) a +1 push in the font size won’t hurt

    2) The title is crowded with the border – a suggestion is to make the title bold and remove the border

    3) The close button does not look good ..
    you can remove it and close with a click on the notification itself .. or you can implement the ‘X’ solution (however may be somewhat old-fashioned though) .. or at least leave the close button but make it prettier (i.e. transparent background or even borderless, border on hover etc. etc.)

    Just some suggestions for the looks.

    Cheers

  21. Quintesse Says:

    Just curious, but I imagine that a new mail notification (for example) would disappear automatically after a certain amount of time? So what does it mean if you drag it to some other place on your desktop before that? What does that do? Let’s put it like this: I can understand some extenders, but what’s the use of (draggable) extenders for notifications? (Maybe there isn’t one and you are just using a generic system, that would be okay as an answer too)

  22. jstaniek Says:

    Really, this is not very clean design to me. These are tooltip-like boxes, so why to have them so bloated?

  23. Aurélien Says:

    Looks promising!

    I was just wondering how it would behave with a vertical panel?

  24. Michael "Galago" Howell Says:

    @twilightomni: The Plasmoid implements the same specification as the libnotify (see galago-project.org). Very coolly, KNotify supports Galago, so other notifiers (for example, the one used be GNOME) that implement Galago will be used by any KNotify-based applications.

  25. parena Says:

    Looking good! This will be a very important feature that’s missing in 4.1. I do think the application icon in the notification is much too big, though. 32×32 should be the max, I think, compared to your system tray that is. And: yay, no messed up background behind systray icons!!!

    Anyway, really happy to see all this progress going on. Thanks for all the hard work you folks are doing.

  26. Javi Says:

    Would it be hard to make only the top one with the round border, so the others remains more integrated into the extender?

  27. Michael Says:

    Thanks a lot for all the work you guys have done. You spend a lot of time to improve the desktop experience and I really appreciate that. The only thing which could be improved is indeed the design of the extenderns. IMHO they need a lot of valuable space on the screen and the overlapping boxes with the big icons are surely a matter of taste. It would be great if you could think about the “default” design once again (maybe there is a simpler way of presentation). But apart from that two thumbs up!! :-)

    take care,
    Michael

  28. Top Posts « WordPress.com Says:

    […] Extenders: now 400% more pretty. I haven’t blogged in way too much time, sorry for that. This however doesn’t mean that I didn’t make […] […]

  29. Aaron Says:

    The extenders are absolutely gorgeous. My brother (who uses KDE3 but doesn’t know it) was looking over my shoulder and said everything fit together really well. You know you’re doing something right when people who normally never notice things like panels and notifications are realizing how great it looks. My only comments are that the notifications are registered as actual windows in the alt+tab switcher (box switch, at least) and that gets pretty frustrating. When I see a kopete notification I don’t click on it, I just alt+tab to kopete but instead it switches to the notifications, not the chat window. Also, I use a different plasma theme than Oxygen and when more than notification appears at once, the first one is in the theme I’m using, but any subsequent ones that are on screen at the same time use the standard Oxygen theme. But those are small nitpicks on an otherwise _wonderful_ system.

  30. Jason Stubbs Says:

    @vide

    I also agree that the close button should be an X button (and in a different position) but just wanted to get all the functionality working first. Do we have an X images in the plasma theme at this stage? I don’t think it’d be impossible to get done before the deadline for 4.2…

    @Flyser

    I considered click-to-close, but it doesn’t sit well with notifications that have actions.

    @rscheepmaker

    Even with the notifications that contain actions, I’m not sure it’d be a bad idea to provide a X close button. Only problem is that it could cause a leak in the application that’s waiting on an action to be executed…

  31. Vide Says:

    @Jason: great to hear you think too that X it’s better suited than a longer “close” that moreover have to be translated qand localized (RTL or more verbose languages come to my mind as clear issues).
    And about click-to-close… think a moment… how many actions are you going to implement in these notification?
    The more probable answer is… two.
    (1) Do something (related to context)
    (2) Close/ack notification.

    So, I think again that growl implementation is the best here. “X” (when hovered) to close/ack, click on the rest (larger area) to do the default (1) action or if there isn’t (1), (2)

  32. Flavio Says:

    @mutlu
    Take a look at the last one in the growl screenshots: “The Smoke Notification”: simplicity is beauty. The Oxygen one is way too cluttered to be a good DEFAULT theme. The typical use-another-theme reply is so silly, we’re talking about the DEFAULT here. It has to be simple and elegant, current Oxygen is a bit over-the-top. Oxygen is a good pimp-you-desktop theme, not a good DEFAULT.

  33. rscheepmaker Says:

    @M A: “Question: do they disappear after some seconds or do we have to click each and every one of them?”

    Depends on the notification, most of them don’t, some of them (for example when someone starts a chat with you when you’re using kopete) do. The application that generates the notification can choose.

    @Quintesse: Just curious, but I imagine that a new mail notification (for example) would disappear automatically after a certain amount of time? So what does it mean if you drag it to some other place on your desktop before that?

    Items that are detached don’t automatically disappear anymore, since the user detaching it kind of implies he’s interested in the notification. So if you get a notification that you want to respond to, after you finished what you’re working on, you can detach it so you’ll remember to take action. In practice it remains to be seen how useful it is for most notifications, but we now have this possibility through extenders, so let’s use it for as many applets as possible, and discover for which the detaching works well, and for which it doesn’t. We’re doing things here that aren’t done before…

    @Aurélien: “I was just wondering how it would behave with a vertical panel?”

    The bottom and top borders of the dialog are both drawn, the side that is connected to the panel isn’t. This might receive some changes yet.

    @Jason: “Even with the notifications that contain actions, I’m not sure it’d be a bad idea to provide a X close button. Only problem is that it could cause a leak in the application that’s waiting on an action to be executed…”

    yeah, and personally I don’t like leaks. We can use the X button for notifications that don’t have any actions associated, and will time out after some time, but for example the kopete chat notifications (chat/ignore) can’t be just deleted with an X button. I think the real solution would be to expand the notification spec with the possibility to name icons for actions or something like that.

    @Vide: “So, I think again that growl implementation is the best here. “X” (when hovered) to close/ack, click on the rest (larger area) to do the default (1) action or if there isn’t (1), (2)”

    well, the problem is, besides what Jason mentions, that the spec allows for more then just 2 actions. Also, application are free to name their actions whatever they want, so your proposal is just not the way to go considering the current galago spec.

    What a overwhelming amount of response do you get when working on such a visible part of the desktop. Thanks for all the appreciation and constructive feedback. To all the people that don’t like current style: it will receive some small tweaks (yes, I do take the comments about margins, font sizes and proper alignment seriously), but besides that this will basically be the look that extenders will have in 4.2 with the oxygen theme. If you don’t like it, you can use another theme.

    @Flavio: About the entire ‘oxygen shouldn’t be the default theme’ argument: it’s design, it’s very subjective. Oxygen has a clear vision on how to make your desktop look, it fits well together, and the rest is a matter of taste. You don’t like it there are dozens of other themes you can use.

  34. Flavio Says:

    @ rscheepmaker
    > it fits well together
    together with what?

    > is a matter of taste
    Go tell companies around the world that spend billions in design and UI research.

    > there are dozens of other themes you can use
    probably I didn’t used the capitalized DEFAULT word enough times in my previous comment.

  35. rscheepmaker Says:

    @Flavio: “together with what?”
    together with the rest of the default plasma theme. extender-background is even a copy of the standard applet background in this theme, and the drag handle element is also used in other places, like the background of the plasma tabbar widget. The default plasma theme has a consistent style.

    “Go tell companies around the world that spend billions in design and UI research.”
    And still not everybody likes the end result. Simply because it’s a matter of taste, Of course you can spend a lot of money and hopefully come up with a design that at least a majority of the people likes. (or spend a lot of money and come up with something that’s still extremely ugly, like the default windows xp theme or those old school hideously colored imacs) But a design that everybody loves is just not possible, and that’s why we have support for theming in plasma.

    “probably I didn’t used the capitalized DEFAULT word enough times in my previous comment.”
    On the contrary. It’s just that this is a non issue. KDE provides a default theme, oxygen, which is consistent, has a clear vision, and a large, motivated team of designers to maintain it. In my opinion (well, I know a lot of people who think this way) it looks quite sexy, but that’s besides the point. We deliver a decent default that is maintained through the life cycle of KDE4. I’m interested to know why you think your opinion on what a good default theme should look like is worth more then all those people (mainly volunteers) who actually put a LOT of time in oxygen.
    Besides, even distro’s can choose to change the defaults…. openSuse default to aya for example. I really don’t see the problem you’re making from a non issue.

  36. Jamboarder Says:

    @Flavio:
    > The Oxygen one is way too cluttered to be a good DEFAULT theme.
    ^^^ Subjective: hence it is a “matter of taste” ^^^

    > current Oxygen is a bit over-the-top
    ^^^ Subjective: hence it is a “matter of taste” ^^^

    > Oxygen is a good pimp-you-desktop theme, not a good DEFAULT.
    ^^^ Subjective: hence it is a “matter of taste” ^^^

    How much companies spend on design an UI research has no bearing on the fact that whether *you* think it looks “good” or “beautiful” is subjective: a matter of taste.

    Many users are convinced that the Oxygen theme (Icons, widget style and plasma desktop theme) looks “good”, is “beautiful” and works very well as the “DEFAULT” theme. For those that don’t, here are the most constructive options I can think of:
    1. Provide useful feedback that goes beyond “over-the-top” and “good for pimp-your-desktop”.
    2. Choose an existing theme that matches your ideas of what DEFAULT should look like.
    3. Make a new theme that matches your ideas of what DEFAULT should look like.

    Everybody happy…

    Of course, if you’re unwilling or unable to do any of the above then, unfortunately, you’ll have to use what’s available or, if what’s available is abortive to using KDE, use a different DE or OS. Everybody sad… but, unfortunately, no different than any other FOSS or proprietary software project.

    peace

  37. Karper Says:

    I’m surprised no one mentioned a very interesting solution that could be applied to notifications that the source applications do not close; I’m talking about implementing a time-out bar of 30 seconds or more (or better, let the users choose!) on the notifications. If this sounds like deja vu, it is! Amarok (1) had that for all this time! The timeout bar freezes on mouseover and unfreezes once the mouse is moved off.

    This could be a great solution to clear up a lot of notifications that get left behind.

    The default look is quite beautiful. Keep up the good work!

  38. Jan Zijlstra Says:

    Ziet er bruut uit Rob! Lekker zo laten.

  39. rscheepmaker Says:

    @Karper: well, as part of the galago spec, applications can specify a timeout for their notifications, and I think we should just use what applications specify as timeout. Which can mean it doesn’t automatically close, but in my experience, notifications that don’t expire do that for a good reason. But I like the idea of showing a time out bar for notifications that do time out. This would be something for 4.3, but it’s certainly a feature I’ll consider implementing.

    @Jan: dat was ik zeker van plan. :)

  40. gadnio Says:

    Hi,
    I like the idea very much. I have some minor comment to make:

    The string ‘Notification from’ is placed on all the notifications and (assuming this will be the most used notification platform) I think there is no need of it (we will all know the balloon is for notifications, so there is no need to remind that every time.) Just having the application name in the title is enough.

  41. Danni Coy Says:

    The contents of the notification are up to the individual apps right. This might be off topic but it would be cool if mail was coming from somebody in your address book to show the picture of said person from the address book (as the Icon) and mention who the mail was from in the notification.

  42. DanaKil Says:

    Hi :)

    just a small question : is the popup still completely opaque when desktop compositing is activated ? Do you think it is possible/usable to click in a popup (in the background, not on a button or on the title bar) and the click can “pass through” the popup and activate the window behind the popup ?

    I like popups but they are a little bit annoying when they appears and covers something that I’m reading (especially annoying with a small screens)

    oh… and great work, thanks

  43. rscheepmaker Says:

    @gadnio: I think having the ‘Natification from’ is clearer: kuiserver will also be merged into the system tray, so it can also show file transfers, so it’s not automatically a notification.

    @Danni: Something like that is certainly possible. This is however something that needs to be done in kmail.

    @DanaKil: With the current default plasma theme it is opaque, but themes could also make extenders translucent if they wish. The clicking through idea is a good idea, and I’ll add it to my todo.

  44. Mathias Brito Says:

    Please add a way to close all the notifications, maybe click with the middle mouse button! :-) sorry if someone already post a comment asking the same thing i had no time to read all the comments…

    Hugs for all…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: