Re: Visual design for logout/login/lockscreen
On Thursday 05 June 2014, David Edmundson wrote: * I think is just fine using the default theme and swapping textcolors and backgroundcolors for the rectangles: to me it looks way better if even if is dark, the two buttons still look light/default Toolbuttons were the big problem with just hardcoding colours for text and background - if the icon is black you can't see it on the background - if the icon is also hardcoded to white, you can't see it when you do the mouseover Not sure if is safe enough to go with that for the release, but since it was a problem also for themes half dark/half light, like oxygen, and i always wanted to make the stylesheet thing a bit more flexible, i added a detail in Svg, svg.setColorGroup(Normal/Button/View) vill make the svg elements that had the class as TextColor or BackgroundColor take the ButtonTextColor or ButtonBackgroundColor having an image potentially colored differently. So in this kind of themes, icons on toolbuttons would go from white when the button is not visible to black when the button is visible. I also done a version of breeze (Breeze Complementary) that has dark backgrounds but light buttons and lineedits. This may be used for lock/logout/sddm. -- Marco Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On 08/04/14 11:58, Jens Reuterberg wrote: Well the issue is that we have to start being careful what gets crammed in and if too much is crammed in how to hide it away. The point is that too many options visible would be problematic since the main point of a login is to have a place to pick user and to write in passwords. I think that having the layout selection somewhere on the login screen is crucial as well. Actually not just the layout, but the layout *and* the variant. For some foreign users, this would be helpful to actually login. I'm glad that sddm finally provides that option. Actually, I think that in this case, there is a pragmatic solution. In [1], there is a language selector. This could be used to actually show a dialog where you can pick language, layout and possibly even the time zone without crowding the interface. But to make this choice more obvious, the button should show a flag like the keyboard selector usually does. We could cheat and use an advanced button - but thats not really a very elegant solution unless done carefully. Oh and I did a really messy wireframe animation for the fade-to-desktop/splash animation where we build on the login screen. Just as an example of way to integrate the two. https://www.dropbox.com/s/xt24ay5c444xzk2/test.mp4 I like how it opens to reveal the plasma session, but I don't like the effect before. For me that's just a bit too much animation. If you could do just the second one, I would like it more. ;-) It would be possible to use the login screen layout for this. On 05/04/14 00:32, Andrew Lake wrote: Hope this is helpful and please let me know if there are any questions, Andrew Lake I don't like the background, but that's just a matter of taste. I do like the layout, though. Two questions: - What about accessibility? - What about hidden users (meaning users that are not shown on the login screen but may still login)? Anyway, keep it up. This is certainly a good improvement over the past login screens. :-) Best Regards, Bernd [1] http://wstaw.org/m/2014/04/06/login_with_session_and_language.png ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Sat, Apr 5, 2014 at 12:32 AM, Andrew Lake jamboar...@gmail.com wrote: Hello, After reading Aaron's nearly year old blog entry again this week ( http://aseigo.blogspot.de/2013/05/visual-harmony-in-plasma-workspaces-2.html) , especially the following quote: ...the log out dialog still has things that look like little push buttons and it still has inexplicable picture on the left, despite now being written in QML and having all the power that implies. Plasma Workspaces 2 is our opportunity to improve these parts by harmonizing and modernizing them. The log out interface ought to look like it belongs with the lock screen; the log in screen ought to mesh with the splash screen... We have a couple people who can do this kind of work, but they have lots on their plate already. This is a great opportunity for someone with a flair for design to get involved... I put a little effort into identifying a visual design that might get us a little bit closer. I apologize that I don't have any idea what work may have already been put into this area, so please don't take my ignorance as a dismissal of any work that has already occurred. I also shared this design with other members of the Visual Design Group and there were no objections to offering these designs here. Anyway here goes: Login: http://wstaw.org/m/2014/04/05/login_mockup.png Logout: http://wstaw.org/m/2014/04/03/logout_mockup.png Unlock: http://wstaw.org/m/2014/04/05/unlock_mockup.png Shutdown: http://wstaw.org/m/2014/04/03/shutdown_mockup2_1.png We're happy to provide any visual assets required, which shouldn't be much. (We already have a few to choose from). I won't speak to architecture since that's your wheelhouse, but my assumption is that the UI layer could be handled by the same QML package with enough hooks for the various existing underlying functionality to use. I would like to have offered up a QML package with this, but it's early days yet for my QML familiarity (but getting better fast). :-) Hope this is helpful and please let me know if there are any questions, Andrew Lake Community designer in the KDE Visual Design Group ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel Hi, I've been trying to sort these out during this week, together with David. I've pushed a new Lock and Logout implementations following these mockups. They don't look like that yet but it's quite close and workable. The main issue being that we cannot hardcode a plasma theme from them, or maybe it's not an issue. Well, either way it would be interesting if somebody could take a look and see what it feels like, then maybe we can iterate it forward. Cheers! Aleix ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Thursday 05 June 2014, Aleix Pol wrote: Hi, I've been trying to sort these out during this week, together with David. I've pushed a new Lock and Logout implementations following these mockups. They don't look like that yet but it's quite close and workable. The main issue being that we cannot hardcode a plasma theme from them, or maybe it's not an issue. from c++ you can configure a different theme than the global desktop one (setUseGlobalSettings). for now it should be fine having normal breeze and some inverted colors, like the sddm theme tough (not sure how black buttons would work there, on the other hand we may want white icons Well, either way it would be interesting if somebody could take a look and see what it feels like, then maybe we can iterate it forward. I'll take a look at it now -- Marco Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Thu, Jun 5, 2014 at 9:47 AM, Aleix Pol aleix...@kde.org wrote: On Sat, Apr 5, 2014 at 12:32 AM, Andrew Lake jamboar...@gmail.com wrote: Hello, After reading Aaron's nearly year old blog entry again this week ( http://aseigo.blogspot.de/2013/05/visual-harmony-in-plasma-workspaces-2.html) , especially the following quote: ...the log out dialog still has things that look like little push buttons and it still has inexplicable picture on the left, despite now being written in QML and having all the power that implies. Plasma Workspaces 2 is our opportunity to improve these parts by harmonizing and modernizing them. The log out interface ought to look like it belongs with the lock screen; the log in screen ought to mesh with the splash screen... We have a couple people who can do this kind of work, but they have lots on their plate already. This is a great opportunity for someone with a flair for design to get involved... I put a little effort into identifying a visual design that might get us a little bit closer. I apologize that I don't have any idea what work may have already been put into this area, so please don't take my ignorance as a dismissal of any work that has already occurred. I also shared this design with other members of the Visual Design Group and there were no objections to offering these designs here. Anyway here goes: Login: http://wstaw.org/m/2014/04/05/login_mockup.png Logout: http://wstaw.org/m/2014/04/03/logout_mockup.png Unlock: http://wstaw.org/m/2014/04/05/unlock_mockup.png Shutdown: http://wstaw.org/m/2014/04/03/shutdown_mockup2_1.png We're happy to provide any visual assets required, which shouldn't be much. (We already have a few to choose from). I won't speak to architecture since that's your wheelhouse, but my assumption is that the UI layer could be handled by the same QML package with enough hooks for the various existing underlying functionality to use. I would like to have offered up a QML package with this, but it's early days yet for my QML familiarity (but getting better fast). :-) Hope this is helpful and please let me know if there are any questions, Andrew Lake Community designer in the KDE Visual Design Group ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel Hi, I've been trying to sort these out during this week, together with David. I've pushed a new Lock and Logout implementations following these mockups. They don't look like that yet but it's quite close and workable. The main issue being that we cannot hardcode a plasma theme from them, or maybe it's not an issue. Well, either way it would be interesting if somebody could take a look and see what it feels like, then maybe we can iterate it forward. Cheers! Aleix Exciting! I'll be sure to take a look as soon as I update my daily neon packages. Andrew ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Thursday 05 June 2014, Aleix Pol wrote: Hi, I've been trying to sort these out during this week, together with David. I've pushed a new Lock and Logout implementations following these mockups. They don't look like that yet but it's quite close and workable. The main issue being that we cannot hardcode a plasma theme from them, or maybe it's not an issue. Well, either way it would be interesting if somebody could take a look and see what it feels like, then maybe we can iterate it forward. I tried it, I think it's fine, I have just few observations/suggestions: * seems that sometimes the window (main qml view) is not correctly resized. Oddly tough the test program always resizes/places the window correctly * don't bother wit the background, I think on top of the fullscreen blur/darken effect is fine (in this case even better than a background that covers everything) * I think is just fine using the default theme and swapping textcolors and backgroundcolors for the rectangles: to me it looks way better if even if is dark, the two buttons still look light/default -- Marco Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
* I think is just fine using the default theme and swapping textcolors and backgroundcolors for the rectangles: to me it looks way better if even if is dark, the two buttons still look light/default Toolbuttons were the big problem with just hardcoding colours for text and background - if the icon is black you can't see it on the background - if the icon is also hardcoded to white, you can't see it when you do the mouseover - if you avoid using a toolbutton and load them as images hardcoded to white, you have no indication that it's a button, and it's bad to have some buttons behaving differently ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Thursday 05 June 2014, David Edmundson wrote: * I think is just fine using the default theme and swapping textcolors and backgroundcolors for the rectangles: to me it looks way better if even if is dark, the two buttons still look light/default Toolbuttons were the big problem with just hardcoding colours for text and background - if the icon is black you can't see it on the background - if the icon is also hardcoded to white, you can't see it when you do the mouseover - if you avoid using a toolbutton and load them as images hardcoded to white, you have no indication that it's a button, and it's bad to have some buttons behaving differently I tried making them explicitly visible, don't seem that bad http://wstaw.org/m/2014/06/05/plasma-desktopGg1731.png (only the test app, so no blur) mutually exclusive buttons on one side looks maybe a bit heavier but perhaps seems a bit more intuitive. and yeah, I want in the future to be able to ask Svg for a pixmap of an id with a different forced class, so toolbutton can animate between two colors in a case like this, but I would prefer doing it after release since if possible, is going to be a bit invasive -- Marco Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Thursday 05 June 2014, Marco Martin wrote: I tried it, I think it's fine, I have just few observations/suggestions: * seems that sometimes the window (main qml view) is not correctly resized. Oddly tough the test program always resizes/places the window correctly the resize issue seems to be fixed with (Martin will kill me for it) setFlags(Qt::BypassWindowManagerHint); on the main window -- Marco Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Thu, Jun 5, 2014 at 8:13 PM, Marco Martin notm...@gmail.com wrote: On Thursday 05 June 2014, David Edmundson wrote: * I think is just fine using the default theme and swapping textcolors and backgroundcolors for the rectangles: to me it looks way better if even if is dark, the two buttons still look light/default Toolbuttons were the big problem with just hardcoding colours for text and background - if the icon is black you can't see it on the background - if the icon is also hardcoded to white, you can't see it when you do the mouseover - if you avoid using a toolbutton and load them as images hardcoded to white, you have no indication that it's a button, and it's bad to have some buttons behaving differently I tried making them explicitly visible, don't seem that bad http://wstaw.org/m/2014/06/05/plasma-desktopGg1731.png (only the test app, so no blur) mutually exclusive buttons on one side looks maybe a bit heavier but perhaps seems a bit more intuitive. That works for me. I'll update login next week. David ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Thursday 05 June 2014, David Edmundson wrote: * I think is just fine using the default theme and swapping textcolors and backgroundcolors for the rectangles: to me it looks way better if even if is dark, the two buttons still look light/default Toolbuttons were the big problem with just hardcoding colours for text and background - if the icon is black you can't see it on the background - if the icon is also hardcoded to white, you can't see it when you do the mouseover - if you avoid using a toolbutton and load them as images hardcoded to white, you have no indication that it's a button, and it's bad to have some buttons behaving differently Another idea, is to use the standard dialog background/shadow, but disable left and right borders and maximize horizontally. and make it a a design pattern for things around like lockscreen prompt, alt+tab just an idea, to explore probably in future releases ;) -- Marco Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Thu, Jun 5, 2014 at 10:30 AM, Marco Martin wrote: * don't bother wit the background, I think on top of the fullscreen blur/darken effect is fine (in this case even better than a background that covers everything) Yes, I agree, that was the intention in the proposed visual design (and intention I poorly communicated, sorry). Andrew ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Thursday 05 June 2014, David Edmundson wrote: mutually exclusive buttons on one side looks maybe a bit heavier but perhaps seems a bit more intuitive. That works for me. I'll update login next week. I did a review request https://git.reviewboard.kde.org/r/118573/ so it can rest a while there a day still ;) -- Marco Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Sun, 06 Apr 2014 03:54:03 +0200, Andrew Lake jamboar...@gmail.com wrote: On Fri, Apr 4, 2014 at 4:37 PM, David Edmundson wrote: Awesome! That login theme in nice, and I like the idea of the visual consistency throughout. I'll have a go at implementing the login stuff on Monday, maybe the lock screen too as it'll be mostly copy paste. Yay! I have a few things that need adding to the login theme, maybe you can incorporate them in the mockup? - Session Choosing (KDE, Gnome, etc.) - Language selection (English, Deutsch) - Possibly keyboard layout selection Here we go: http://wstaw.org/m/2014/04/06/login_with_session_and_language.png So as I was trying to find a place for the session and language, I tried to come up a very rough information model for the visual design: http://wstaw.org/m/2014/04/06/visual_information_model.png The session and language items show status and also allow you to change them so I put them in that overlap area (status+action). (I also moved the battery info out of that area). Hopefully that provides enough info to figure out what else could go where. I also currently need all 4 power options, suspend, shutdown, reboot, hibernate. We're happy to supply to those visuals. Between Jens and myself, we'll have them for you in a few days. It would be ideal for me if in future in mockups from the SVG we can label which SVGs from the Plasma theme are being used where; and if there's anything new/custom. I think the main horizontal stripe is new? Oh yes, good idea. Perhaps just focus primarily on using the plasma theme colors first (inverted as discussed in my reply to Marco). Something as simple as that horizontal line shouldn't need much more than the theme color and the opacity setting. The plasma widget background should work for the user pic frames. Other visual assets like icons, I'm not sure where the best place for them is: plasma theme icons or system theme icons. Others are better equipped to make that decision than me. :-) We're happy to supply all the visual assets for this design though. Hope this helps, Andrew Hi, this theme looks just great! Really looking forward to be able to use it! :) I'd like to add a few points from the internal mechanics point of view: * Password prompts - there could be more than one at a time in some corner cases * Error and information messages - The authentication layer (PAM) sends some messages to the user occasionally (User not found and such) * Other dialogs - The user is presented with a password change dialog when his password has expired, I think the login screen should handle this too Other than this, as I'm not (at all) a user interface designer, so just consider these as my small ideas :). Also I'm not sure if this is the right place and time to discuss these: * Wouldn't it be logical to have the keyboard layout (or language?) selection on the left side of the dialog (to have it close to where the user will type). * Also, maybe, have the session selection somewhere close to the Login button (to indicate something along the lines of Log into ... by positioning them close)? Cheers, Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
Well the issue is that we have to start being careful what gets crammed in and if too much is crammed in how to hide it away. The point is that too many options visible would be problematic since the main point of a login is to have a place to pick user and to write in passwords. We could cheat and use an advanced button - but thats not really a very elegant solution unless done carefully. Oh and I did a really messy wireframe animation for the fade-to-desktop/splash animation where we build on the login screen. Just as an example of way to integrate the two. https://www.dropbox.com/s/xt24ay5c444xzk2/test.mp4 Hi, this theme looks just great! Really looking forward to be able to use it! :) I'd like to add a few points from the internal mechanics point of view: * Password prompts - there could be more than one at a time in some corner cases * Error and information messages - The authentication layer (PAM) sends some messages to the user occasionally (User not found and such) * Other dialogs - The user is presented with a password change dialog when his password has expired, I think the login screen should handle this too Other than this, as I'm not (at all) a user interface designer, so just consider these as my small ideas :). Also I'm not sure if this is the right place and time to discuss these: * Wouldn't it be logical to have the keyboard layout (or language?) selection on the left side of the dialog (to have it close to where the user will type). * Also, maybe, have the session selection somewhere close to the Login button (to indicate something along the lines of Log into ... by positioning them close)? Cheers, Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On 08.04.2014 11:58, Jens Reuterberg wrote: Well the issue is that we have to start being careful what gets crammed in and if too much is crammed in how to hide it away. The point is that too many options visible would be problematic since the main point of a login is to have a place to pick user and to write in passwords. We could cheat and use an advanced button - but thats not really a very elegant solution unless done carefully. Some login screens offer advanced options in relatively small buttons on the periphery (usually in some corner(s) of the screen). I think that works rather well because the focus of attention is on the center, so users won't even notice them unless they actively look for them (and then they're easier to find than if they're hidden behind some button). Oh and I did a really messy wireframe animation for the fade-to-desktop/splash animation where we build on the login screen. Just as an example of way to integrate the two. https://www.dropbox.com/s/xt24ay5c444xzk2/test.mp4 Wow! I don't know if that's technically possible without a new/modified KWin effect, but if it is (or the new/modified effect would be created), I'd love to have that transition! ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On 07.04.2014 17:20, David Edmundson wrote: On Mon, Apr 7, 2014 at 2:12 PM, Kai Uwe Broulik k...@privat.broulik.de wrote: Hi, What about QtGraphicalEffects ColorOverlay? I've been using it extensively for some time already to colorize white svg icons in my apps as needed. For the breeze theme that will work fine. However as soon as someone says I don't like the monocolour theme I'm going to make a multi coloured one we end up inverting their colours which will have some pretty weird effects. Stupid customisability. Here comes a question from someone who apparently hasn't understood the technical details yet: Which color theme does it adapt to anyway? It can't be the user's Plasma theme because it comes before login, so which is it? Where is it being set? ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
Well the slidey bit with the background might not be possible - the thing is that it would be awesome to have that as a bit of the animation, same as using the slidey bit in the beginning to load things before password was written in - because then the sensation would be that the desktop started directly. Say that there is some small loading X thing popping up after you write the password too and suddenly you'd make it feel as if it was all close to instant. Maybe? (this is way too technical to say for me btw - so I'm just shooting from the hip) How it would look when it logs in automatically I have no idea Wow! I don't know if that's technically possible without a new/modified KWin effect, but if it is (or the new/modified effect would be created), I'd love to have that transition! ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Saturday 05 April 2014, Andrew Lake wrote: Anyway here goes: Login: http://wstaw.org/m/2014/04/05/login_mockup.png Logout: http://wstaw.org/m/2014/04/03/logout_mockup.png Unlock: http://wstaw.org/m/2014/04/05/unlock_mockup.png Shutdown: http://wstaw.org/m/2014/04/03/shutdown_mockup2_1.png Now, the slightly less confortable aspect: planning ;) The first release is quite frozen at the moment, so i don't think trying the login and logout uis now would be safe. do we plan them for the next release? one i would do now, is the splashscreen, since it doesn't really have functionality, so less dangerous, and the current one is just too ancient -- Marco Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
I need to make a login screen based on Plasma 2 components regardless. I think it's worth going for. I started writing some QML up yesterday; but I have some problems with doing in the white text/icons on a dark background in a manner that doesn't horribly suck. David ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Monday 07 April 2014, David Edmundson wrote:
I need to make a login screen based on Plasma 2 components regardless.
I think it's worth going for.
I started writing some QML up yesterday; but I have some problems with
doing in the white text/icons on a dark background in a manner that
doesn't horribly suck.
text should work fine as long as is Label (buttons and lineedits should just
stay as they are)
so Label {
color: theme.backgroundColor
}
and that's it.
for icons, unfortunately thay need to have inverted color themselves, at least
at the moment
so it can be either:
* in icons the file login.svgz contains all the needed icon files, but they
are all inverted, therefore won't be possible to use them elsewhere
* or, there would be a single svg file for the whole login/logout thing, so it
contains more the stuff with inverted colors in one single file, also the
icons would be elements of that file (wouldn't be possible to use IconItem,
but a normalSvgItem would have to be used... who cares ;)
--
Marco Martin
___
Plasma-devel mailing list
Plasma-devel@kde.org
https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Mon, Apr 7, 2014 at 11:35 AM, Marco Martin notm...@gmail.com wrote:
On Monday 07 April 2014, David Edmundson wrote:
I need to make a login screen based on Plasma 2 components regardless.
I think it's worth going for.
I started writing some QML up yesterday; but I have some problems with
doing in the white text/icons on a dark background in a manner that
doesn't horribly suck.
text should work fine as long as is Label (buttons and lineedits should just
stay as they are)
so Label {
color: theme.backgroundColor
}
and that's it.
for icons, unfortunately thay need to have inverted color themselves, at least
at the moment
so it can be either:
* in icons the file login.svgz contains all the needed icon files, but they
are all inverted, therefore won't be possible to use them elsewhere
This would suck; for developers we'd have a random potluck of whether
an icon can be seen or not. Theme developers would also have to draw
to a somewhat arbitrary mix of colours.
* or, there would be a single svg file for the whole login/logout thing, so it
contains more the stuff with inverted colors in one single file, also the
icons would be elements of that file (wouldn't be possible to use IconItem,
but a normalSvgItem would have to be used... who cares ;)
I care a bit. For some we want to use ToolButton so it's clear it's a
clickable item - or we at least need to react on mouseover somehow.
Again, I can hardcode it, but we start to lose flexibility and will
have angry designers coming at us later in the future.
David
___
Plasma-devel mailing list
Plasma-devel@kde.org
https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
Yeah so as one of the angry designers coming here from the year 2042 - what
are the issues that hinders the SVG being colored in by the theme? I mean is
it a temporary issue or is it one that will be there forever and ever?
On Monday 07 April 2014 12.07.55 David Edmundson wrote:
On Mon, Apr 7, 2014 at 11:35 AM, Marco Martin notm...@gmail.com wrote:
On Monday 07 April 2014, David Edmundson wrote:
I need to make a login screen based on Plasma 2 components regardless.
I think it's worth going for.
I started writing some QML up yesterday; but I have some problems with
doing in the white text/icons on a dark background in a manner that
doesn't horribly suck.
text should work fine as long as is Label (buttons and lineedits should
just stay as they are)
so Label {
color: theme.backgroundColor
}
and that's it.
for icons, unfortunately thay need to have inverted color themselves, at
least at the moment
so it can be either:
* in icons the file login.svgz contains all the needed icon files, but
they
are all inverted, therefore won't be possible to use them elsewhere
This would suck; for developers we'd have a random potluck of whether
an icon can be seen or not. Theme developers would also have to draw
to a somewhat arbitrary mix of colours.
* or, there would be a single svg file for the whole login/logout thing,
so it contains more the stuff with inverted colors in one single file,
also the icons would be elements of that file (wouldn't be possible to
use IconItem, but a normalSvgItem would have to be used... who cares ;)
I care a bit. For some we want to use ToolButton so it's clear it's a
clickable item - or we at least need to react on mouseover somehow.
Again, I can hardcode it, but we start to lose flexibility and will
have angry designers coming at us later in the future.
David
___
Plasma-devel mailing list
Plasma-devel@kde.org
https://mail.kde.org/mailman/listinfo/plasma-devel
___
Plasma-devel mailing list
Plasma-devel@kde.org
https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Monday 07 April 2014, David Edmundson wrote: I care a bit. For some we want to use ToolButton so it's clear it's a clickable item - or we at least need to react on mouseover somehow. Again, I can hardcode it, but we start to lose flexibility and will have angry designers coming at us later in the future. To me the really ideal(tm) way would be: you can have a context for the theme, in which all the children from it will have a different theme object instance, with eventually different colors now, how to do this, i am not sure -- Marco Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
Hi,
What about QtGraphicalEffects ColorOverlay? I've been using it extensively for
some time already to colorize white svg icons in my apps as needed.
Cheers,
Kai Uwe
Am 07.04.2014 11:35 schrieb Marco Martin notm...@gmail.com:
On Monday 07 April 2014, David Edmundson wrote:
I need to make a login screen based on Plasma 2 components regardless.
I think it's worth going for.
I started writing some QML up yesterday; but I have some problems with
doing in the white text/icons on a dark background in a manner that
doesn't horribly suck.
text should work fine as long as is Label (buttons and lineedits should just
stay as they are)
so Label {
color: theme.backgroundColor
}
and that's it.
for icons, unfortunately thay need to have inverted color themselves, at
least
at the moment
so it can be either:
* in icons the file login.svgz contains all the needed icon files, but they
are all inverted, therefore won't be possible to use them elsewhere
* or, there would be a single svg file for the whole login/logout thing, so
it
contains more the stuff with inverted colors in one single file, also the
icons would be elements of that file (wouldn't be possible to use IconItem,
but a normalSvgItem would have to be used... who cares ;)
--
Marco Martin
___
Plasma-devel mailing list
Plasma-devel@kde.org
https://mail.kde.org/mailman/listinfo/plasma-devel
___
Plasma-devel mailing list
Plasma-devel@kde.org
https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Mon, Apr 7, 2014 at 2:12 PM, Kai Uwe Broulik k...@privat.broulik.de wrote: Hi, What about QtGraphicalEffects ColorOverlay? I've been using it extensively for some time already to colorize white svg icons in my apps as needed. For the breeze theme that will work fine. However as soon as someone says I don't like the monocolour theme I'm going to make a multi coloured one we end up inverting their colours which will have some pretty weird effects. Stupid customisability. ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
Is it possible to use the svg css to change the color of the login/logout/etc. icons like we're doing for the notifications? On Mon, Apr 7, 2014 at 8:20 AM, David Edmundson da...@davidedmundson.co.ukwrote: On Mon, Apr 7, 2014 at 2:12 PM, Kai Uwe Broulik k...@privat.broulik.de wrote: Hi, What about QtGraphicalEffects ColorOverlay? I've been using it extensively for some time already to colorize white svg icons in my apps as needed. For the breeze theme that will work fine. However as soon as someone says I don't like the monocolour theme I'm going to make a multi coloured one we end up inverting their colours which will have some pretty weird effects. Stupid customisability. ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Monday 07 April 2014, Andrew Lake wrote: Is it possible to use the svg css to change the color of the login/logout/etc. icons like we're doing for the notifications? the issue is that atm you can only say things like be the text color that is global for the theme tough, while in that case would be just a local modification, that is not possible at the moment. Actually, my wet dream would be to be able to change dinamically the class of the id per svg item in qml, so would be possible to do things like icons being colored to the selection blue on mouse over or things like that... still not sure how to do that tough :/ -- Marco Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Mon, Apr 7, 2014 at 12:07 PM, wrote: On Monday 07 April 2014, Andrew Lake wrote: Is it possible to use the svg css to change the color of the login/logout/etc. icons like we're doing for the notifications? the issue is that atm you can only say things like be the text color that is global for the theme tough, while in that case would be just a local modification, that is not possible at the moment. Ahh got it. Then yeah, for now, the simplest approach may be a new theme svg file containing the visual assets for unified login/logout/lockscreen visuals. The theme guidance for this file could be that foreground and background colors should be swapped since the assets are used in an inverted color environment. I delivered an initial batch of some mockup assets to David as separate svgs already, but it should be easy for me to package them up into one svg for the plasma theme. Actually, my wet dream would be to be able to change dinamically the class of the id per svg item in qml, so would be possible to do things like icons being colored to the selection blue on mouse over or things like that... still not sure how to do that tough :/ Yeah, something like that'd *really* be nice. Like parsable color or class switching parameters in an ImageProvider url that could replace element classes or even just temporarily change the colors in the svg:style css element for an svg file. Visual designers' dreams... :-) Andrew ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Sun, Apr 6, 2014 at 8:26 AM, Thomas Pfeiffer wrote: Btw: How did you decide which power options to always show and which to hide behind the dropdown? This is a delicate topic: There are good reasons for placing things like suspend and hibernate more prominently because they make sense from a technical perspective, while many users (pretty much all non- developers I know) seem to prefer shutdown. Easy, I didn't decide. :-) I've honestly heard somewhat credible reasons from both sides, so I tried to put together something that accommodates either showing all actions or moving some into an overflow menu. My own warm fuzzies say put suspend and hibernate in the overflow menu (sorta like we do today). Sometimes warm fuzzies are enough to make a decision, sometimes they're not. :-) Hope this helps, Andrew ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
When you say you need all power options in one go, what exactly are you referring to David? Could you be more specific? Is it that you want them all visually accessible from the same dialogue? I'm doing logout icons right now and some logout graphics - Andrew the blank faces in the login one - where are they from? On Saturday 05 April 2014 01.37.52 David Edmundson wrote: Awesome! That login theme in nice, and I like the idea of the visual consistency throughout. I'll have a go at implementing the login stuff on Monday, maybe the lock screen too as it'll be mostly copy paste. I have a few things that need adding to the login theme, maybe you can incorporate them in the mockup? - Session Choosing (KDE, Gnome, etc.) - Language selection (English, Deutsch) - Possibly keyboard layout selection I also currently need all 4 power options, suspend, shutdown, reboot, hibernate. Maybe they could be grouped into a menu from a button. It would be ideal for me if in future in mockups from the SVG we can label which SVGs from the Plasma theme are being used where; and if there's anything new/custom. I think the main horizontal stripe is new? David ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Friday 04 April 2014 15:32:25 Andrew Lake wrote: Anyway here goes: Login: http://wstaw.org/m/2014/04/05/login_mockup.png Logout: http://wstaw.org/m/2014/04/03/logout_mockup.png Unlock: http://wstaw.org/m/2014/04/05/unlock_mockup.png Shutdown: http://wstaw.org/m/2014/04/03/shutdown_mockup2_1.png I like them a lot :D only thing, (just to be the perfectionist pita :p) it's a bit difficult right now to keep it themed since it has inverted colors compared to the rest (white on black) so may have to be a bit more hardcoded colors around, eventually i would like a proper solution, but at first it may be a bit of a pain making it work correct with other themes than the default -- Marco Martin ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Sat, Apr 5, 2014 at 12:32 AM, Andrew Lake jamboar...@gmail.com wrote: Hello, After reading Aaron's nearly year old blog entry again this week (http://aseigo.blogspot.de/2013/05/visual-harmony-in-plasma-workspaces-2.html) , especially the following quote: ...the log out dialog still has things that look like little push buttons and it still has inexplicable picture on the left, despite now being written in QML and having all the power that implies. Plasma Workspaces 2 is our opportunity to improve these parts by harmonizing and modernizing them. The log out interface ought to look like it belongs with the lock screen; the log in screen ought to mesh with the splash screen... We have a couple people who can do this kind of work, but they have lots on their plate already. This is a great opportunity for someone with a flair for design to get involved... I put a little effort into identifying a visual design that might get us a little bit closer. I apologize that I don't have any idea what work may have already been put into this area, so please don't take my ignorance as a dismissal of any work that has already occurred. I also shared this design with other members of the Visual Design Group and there were no objections to offering these designs here. Anyway here goes: Login: http://wstaw.org/m/2014/04/05/login_mockup.png Logout: http://wstaw.org/m/2014/04/03/logout_mockup.png Unlock: http://wstaw.org/m/2014/04/05/unlock_mockup.png Shutdown: http://wstaw.org/m/2014/04/03/shutdown_mockup2_1.png We're happy to provide any visual assets required, which shouldn't be much. (We already have a few to choose from). I won't speak to architecture since that's your wheelhouse, but my assumption is that the UI layer could be handled by the same QML package with enough hooks for the various existing underlying functionality to use. I would like to have offered up a QML package with this, but it's early days yet for my QML familiarity (but getting better fast). :-) Hope this is helpful and please let me know if there are any questions, Andrew Lake Community designer in the KDE Visual Design Group That is a flat design i actually like :) The 3 buttons on the right (logout, shutdown and restart) look a bit weird though. Logout is fine, but shutdown and restart look too much alike. ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Sat, Apr 5, 2014 at 11:47 AM, Marco Martin wrote: I like them a lot :D only thing, (just to be the perfectionist pita :p) it's a bit difficult right now to keep it themed since it has inverted colors compared to the rest (white on black) so may have to be a bit more hardcoded colors around, eventually i would like a proper solution, but at first it may be a bit of a pain making it work correct with other themes than the default The mockup is using the theme colors, but inverted. It is using the theme background color (Cardboard Grey) for the foreground, and the text/foreground color (Shade Black) for the darker background areas. So by deliberately applying the theme colors inverted, not hardcoding them, it should still follow the theme. Convenience functions might eventually be useful to consistently invert the theme colors though. I can imagine lots of other instances where we'll likely be applying colors using this simple inversion from a visual design standpoint. Hope this helps, Andrew ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Sat, Apr 5, 2014 at 11:54 AM, Marco Martin wrote: On Saturday 05 April 2014 11:55:51 Jens Reuterberg wrote: When you say you need all power options in one go, what exactly are you referring to David? Could you be more specific? Is it that you want them all visually accessible from the same dialogue? is just that http://wstaw.org/m/2014/04/03/logout_mockup.png has only 3 actions (i guess those 3 icons are logout reboot, shutdown?) Oh no, there's nothing in the visual design that was intended to prevent showing more than three actions. There may be other reasons (not strictly related to the visual design) to not show all five of these specific actions (logout, reboot, shutdown, suspend, hibernate). But my own thought is I'm not sure we need to solve that right away. For now it might be enough consider perhaps an overflow menu button on the far right which pops a menu containing actions for which you don't want to show an icon. Sort of like this: http://wstaw.org/m/2014/04/06/shutdown_mockup_with_overflow.png Hope this helps, Andrew ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Sat, Apr 5, 2014 at 2:55 AM, Jens Reuterberg wrote: I'm doing logout icons right now and some logout graphics - Andrew the blank faces in the login one - where are they from? Oh those blank face icons were just placeholder icons Jens. The actual user account picture should be used in its place. Andrew ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Fri, Apr 4, 2014 at 4:37 PM, David Edmundson wrote: Awesome! That login theme in nice, and I like the idea of the visual consistency throughout. I'll have a go at implementing the login stuff on Monday, maybe the lock screen too as it'll be mostly copy paste. Yay! I have a few things that need adding to the login theme, maybe you can incorporate them in the mockup? - Session Choosing (KDE, Gnome, etc.) - Language selection (English, Deutsch) - Possibly keyboard layout selection Here we go: http://wstaw.org/m/2014/04/06/login_with_session_and_language.png So as I was trying to find a place for the session and language, I tried to come up a very rough information model for the visual design: http://wstaw.org/m/2014/04/06/visual_information_model.png The session and language items show status and also allow you to change them so I put them in that overlap area (status+action). (I also moved the battery info out of that area). Hopefully that provides enough info to figure out what else could go where. I also currently need all 4 power options, suspend, shutdown, reboot, hibernate. We're happy to supply to those visuals. Between Jens and myself, we'll have them for you in a few days. It would be ideal for me if in future in mockups from the SVG we can label which SVGs from the Plasma theme are being used where; and if there's anything new/custom. I think the main horizontal stripe is new? Oh yes, good idea. Perhaps just focus primarily on using the plasma theme colors first (inverted as discussed in my reply to Marco). Something as simple as that horizontal line shouldn't need much more than the theme color and the opacity setting. The plasma widget background should work for the user pic frames. Other visual assets like icons, I'm not sure where the best place for them is: plasma theme icons or system theme icons. Others are better equipped to make that decision than me. :-) We're happy to supply all the visual assets for this design though. Hope this helps, Andrew ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
On Sat, Apr 5, 2014 at 4:02 AM, Andrew Lake jamboar...@gmail.com wrote: Anyway here goes: Login: http://wstaw.org/m/2014/04/05/login_mockup.png Logout: http://wstaw.org/m/2014/04/03/logout_mockup.png Unlock: http://wstaw.org/m/2014/04/05/unlock_mockup.png Shutdown: http://wstaw.org/m/2014/04/03/shutdown_mockup2_1.png You are awesome.. period.. it looks awesome.. :D -- Bhushan Shah http://bhush9.github.io IRC Nick : bshah on Freenode ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Visual design for logout/login/lockscreen
Hello, After reading Aaron's nearly year old blog entry again this week ( http://aseigo.blogspot.de/2013/05/visual-harmony-in-plasma-workspaces-2.html) , especially the following quote: ...the log out dialog still has things that look like little push buttons and it still has inexplicable picture on the left, despite now being written in QML and having all the power that implies. Plasma Workspaces 2 is our opportunity to improve these parts by harmonizing and modernizing them. The log out interface ought to look like it belongs with the lock screen; the log in screen ought to mesh with the splash screen... We have a couple people who can do this kind of work, but they have lots on their plate already. This is a great opportunity for someone with a flair for design to get involved... I put a little effort into identifying a visual design that might get us a little bit closer. I apologize that I don't have any idea what work may have already been put into this area, so please don't take my ignorance as a dismissal of any work that has already occurred. I also shared this design with other members of the Visual Design Group and there were no objections to offering these designs here. Anyway here goes: Login: http://wstaw.org/m/2014/04/05/login_mockup.png Logout: http://wstaw.org/m/2014/04/03/logout_mockup.png Unlock: http://wstaw.org/m/2014/04/05/unlock_mockup.png Shutdown: http://wstaw.org/m/2014/04/03/shutdown_mockup2_1.png We're happy to provide any visual assets required, which shouldn't be much. (We already have a few to choose from). I won't speak to architecture since that's your wheelhouse, but my assumption is that the UI layer could be handled by the same QML package with enough hooks for the various existing underlying functionality to use. I would like to have offered up a QML package with this, but it's early days yet for my QML familiarity (but getting better fast). :-) Hope this is helpful and please let me know if there are any questions, Andrew Lake Community designer in the KDE Visual Design Group ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
Re: Visual design for logout/login/lockscreen
Awesome! That login theme in nice, and I like the idea of the visual consistency throughout. I'll have a go at implementing the login stuff on Monday, maybe the lock screen too as it'll be mostly copy paste. I have a few things that need adding to the login theme, maybe you can incorporate them in the mockup? - Session Choosing (KDE, Gnome, etc.) - Language selection (English, Deutsch) - Possibly keyboard layout selection I also currently need all 4 power options, suspend, shutdown, reboot, hibernate. Maybe they could be grouped into a menu from a button. It would be ideal for me if in future in mockups from the SVG we can label which SVGs from the Plasma theme are being used where; and if there's anything new/custom. I think the main horizontal stripe is new? David ___ Plasma-devel mailing list Plasma-devel@kde.org https://mail.kde.org/mailman/listinfo/plasma-devel
