Solus Design Concept - Panel and Preview design

[christiankaindl]

Last updated: 9. May 2016

What is this?

This is a concept that wants to show off some design ideas. This especially deals with the

• Panel and the
• Preview (which is not yet implemented)

I also will update this post, as needed, with more information.

What does this?

This design addresses several issues from the current one: Bug #4, #259, #278, (#270), #441 In addition to that all lengths used are whole numbers so there are no cluttered pixels(even on scale)

• Note that there is a live demo linked at the end.

  1. Panel (Taskbar)

I wanted something that is easily scale-able and does not introduce stupid calculations that have comma values(which is not good because you cannot display half a pixel) I came up with this(view it in full size):

Technically this allows to scale to everywhere if you see it as a ratio. But despite I (we) don't want comma values, it makes much more sense to scale it by whole factors

1.1 Spacing

Calculation

Because, especially for smaller panel sizes, the icons are a bit too small I came up with a small calculation: Take the margin size from the initial size(shown above) and multiply it with the factor you wanna scale(only whole numbers) and then subtract 2(px). See here:

39px

52px

65px

The current default panel size in Solus fits into this schema (39px).

1.2 Indicators

Indicators are these small dots or blobs which can be seen in the screenshots above. They indicate if and how many windows are open of an app:

• 1 blob, one window open
• 2 blobs, two windows open
• 3 blobs, three or more windows open
• blue line on top, this indicates whether an app is currently active. This app gets highlighted through a lighter background(and the blue line obviously). It looks the same on every app, no matter how many instances that are open. Besides of that it is only one active app at a time possible(Just as it is right now in Solus).

  2. Preview

Different to the panel, which has its core functionality already built in, the preview hasn't and was already discussed in bug #278. As I could have gone the standard way for this design, I didn't, not only because that it is different rather that I think it would be really pleasant to work with such. Nonetheless it is inspired by Googles Multitasking that they use in Android 5+

General dimensions are:

2.1 Thumbnails

These are the actual preview-windows you see on the screenshot above.

For these there are 7 positions which I call "breakpoints" and every breakpoint does have its own values (in px):

-----	BP 7 and beyond	BP 6	BP 5	BP 4	BP 3	BP 2	BP 1
Height	190	194	198	202	206	210	214
Width(16:10)	304	310	317	322	330	336	342
Left	20	30	60	150	300	500	800
Top	24	22	20	18	16	14	12

2.2 Quick action

Quick action is the option above the preview-windows and on the left side of the red "x" button. Right now it is "Launch new window" but it could be a different option or even two.

Demo

Because this is hard to imagine, I created a live demo with HTML, CSS and JavaScript. View live demo If you like the wallpapers, they can be used and downloaded from my repo. NOTE: The demo does currently only work with Firefox. Also it is not entirely bug free but if you find any bugs feel free to open an issue on the GitHub site

PS: You can scroll that preview list with the arrow keys :O

Disclaimer

This is for the Solus Operating System and should help the project. I am really thankful for any feedback and want to say THANK YOU ALL! :D

[christiankaindl]

Updated post above with preview images and preview dimensions.

[domsblog]

@Christian Kaindl

Wow nice work !!!👍

Thx :)

2016-05-09 12:02 GMT+02:00 Christian Kaindl notifications@github.com:

Updated post above with preview images and preview dimensions.

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/solus-project/budgie-desktop/issues/439#issuecomment-217824635

[image: --]

Dominik Schalling [image: https://]about.me/domsblog https://about.me/domsblog?promo=email_sig&utm_source=email_sig&utm_medium=email_sig&utm_campaign=external_links

[christiankaindl]

Thanks :D Feedback is appreciated.

[Redneckita]

I really really really like the concept! The preview of the windows is very nice and unique, and the animations between the white dots and the blue line are just awesome, you nailed the material design guidelines in every aspect :)

The only thing i could suggest is the middle mouse click to open a new window of the app, i miss that from docky and plank; Also scrolling previews with the mouse wheel could be handy. Anyway, great job! Hope to see it working soon

[ikeydoherty]

So, window previews aren't supported in Budgie, and I don't think it's something we'll ever support. It adds needless complexity and bloat to something that is relatively lightweight

[Redneckita]

Ok, good point. But what about a group of icons with window title preview? That way you can easily select more windows in a pinch (eg Steam or Nautilus); Also what about the "blob" idea? I like the way it looks

[christiankaindl]

@Redneckita thanks man! Great to hear that :) You're right middle-mouse-click is super handy. I will add it to the demo. And for the mouse wheel scroll: I wanted to do it so but just did not get it to work - That's why the arrow keys

@ikeydoherty The actual thing I wanted to achieve with this is to remove the unnesassary icon duplication (e.g. if you have several documents open) but this can also be achieved without window previews as well. I'll do something about that :)

[Redneckita]

@GrisuProjects maybe even a single column list with window titles could do the trick, though icons with text will be more cute to see, just my 2 cents! :)

[ikeydoherty]

The one element I would take on board would be the window grouping - but not the preview windows.

[mussel]

I agree with @GrisuProjects, the icon duplication is less than ideal. So i decided to give this a try and started implementing the window grouping feature. I managed to implement the logic for grouping and it seems to be working well. My implementation can be seen here: https://github.com/mussel/budgie-desktop/tree/grouping_same_app_icons

What I still have to do is to implement some sort of mechanism to choose between the opened windows of an application. Since @ikeydoherty is opposed to the idea of window preview (not that I would know how to do it ;P), I thought in doing just a simple drop-down list with the titles of the windows, like @Redneckita suggested. But I don't know if I should implement it with Menus or Popovers or maybe with something else. Does someone have any suggestions? So, if you guys could take a look at my implementation and give some early feedback, it would be much appreciated =].

DISCLAIMERS: I've never programmed in vala nor used Gtk, so chances are I might have made some pretty stupid mistakes.

[DanielPower]

@mussel Thanks so much for working on this! In my personal opinion, a vertical list of the window titles is the best way to do it.

Here is an example of how DockbarX does it: http://2.bp.blogspot.com/-iTEaulJGyPE/UVb8B3uGhFI/AAAAAAAAOxI/4HINtVsXZfI/s1600/dockbarx-xfce.png

While I would love to have window previews as well, I currently live without them because I don't want to use Compiz or Kwin, and those are the only window managers that have native support for window thumbnails. I could definitely live without it on Budgie.

[mussel]

Guys, sorry for the long delay. I was busy with Uni stuff last week.

I Finished the implementation of the basic functionality of grouping the windows of an application and the dropdown list for switching between them. If you guys want to try out the code and give me some feedback, it is in this branch: https://github.com/mussel/budgie-desktop/tree/icon-tasklist_refactoring

Some disclaimers:

1. I commented out some code related to spotify, so, for now, you cant pin it to the tasklist
2. Windows of an application with different name lengths will have their switch button (dropdown list) with different sizes. I dont know how to solve this. Some help would be greatly appreciated.
3. I implemented the Dropdown list using Gtk.Popover. So if you use the panel on the bottom, there might be some visual glitches.
4. Sometimes, when starting the tasklist applet, the Pinned Buttons were been created with a size smaller than their icons. Then if you passed the mouse over them, they would resize appropriately. I think I have solved this issue, but because the problem does not happen in a consistent basis it is hard for me to tell. So if anyone experiences this, tell me that I do I bit more digging into the issue.
5. The commit history is a mess. I will clean it in the following days.

[christiankaindl]

I installed it from your repository, with the instructions given by the readme. I also did a panel config reset.

I don't know how it is supposed to look, but I think it doesn't work here:

Am I doing something wrong @mussel?

PS: I am not on the unstable repository(if that is any important)

[mussel]

This is very strange. Did you run ./autogen.sh and make && make install from the branch: icon-tasklist_refactoring ?

Im not at home right now, but later today I will make a fresh install of Solus on VirtualBox to see if I run into this issue?

[ikeydoherty]

Any screenies? ^^

[christiankaindl]

@ikeydoherty I thought the same, sooo...

I spined up an Solus iso in Gnome Boxes and installed updates and the budgie from @mussel 's repo, aaaannnd:

...the issue is still there :( So no screenies from me

[mussel]

Here are two screenshots just to prove that Im not lying ahahaha

I'll try to find out wtf is going on. =]

[apolitech]

Nice work!

On Aug 28, 2016 20:24, "mussel" notifications@github.com wrote:

Here are two screenshots just to prove that Im not lying ahahaha

[image: screenshot from 2016-08-28 14 18 11] https://cloud.githubusercontent.com/assets/1262461/18035355/fceab4a2-6d2a-11e6-8857-5186a6bd261c.png [image: screenshot from 2016-08-28 14 19 02] https://cloud.githubusercontent.com/assets/1262461/18035356/ffc699a2-6d2a-11e6-8ed6-e9a473943e68.png

I'll try to find out wtf is going on. =]

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/solus-project/budgie-desktop/issues/439#issuecomment-242987210, or mute the thread https://github.com/notifications/unsubscribe-auth/AOLvxZ8nhhRkV1eDtg2eI3w3yHLkXAFNks5qkcRkgaJpZM4IZq-t .

[mussel]

So I only managed to reproduce this problem once. But then I went into the following directory: budgie-desktop/panel/applets/icon-tasklist and recompiled and installed the tasklist:

make && sudo make install
budgie-panel --replace 

And now it works .... And since I've done this, I have not been able to reproduce the original problem (????). Can someone check if this works for them?

[christiankaindl]

Nope, still doesn't work for me :/

[mussel]

Sorry @GrisuProjects, but I have not been able to reproduce this bug. I've tried in multiple fresh installs in both VirtualBox and on my laptop. By running the following commands after a new install, I always get the new icontasklist working:

# update the system
sudo eopkg up
# install budgie-desktop dependencies
sudo eopkg it glib2-devel libgtk-3-devel gtk-doc libpeas-devel gobject-introspection-devel util-linux-devel pulseaudio-devel libgnome-menus-devel libgnome-desktop-devel gnome-bluetooth-devel mutter-devel polkit-devel libwnck-devel upower-devel accountsservice-devel vala
sudo eopkg it -c system.devel

# cloning the repo
sudo eopkg install git
git clone https://github.com/mussel/budgie-desktop.git
cd budgie-desktop/
git checkout -b icon-tasklist_refactoring origin/icon-tasklist_refactoring
make && sudo make install 

# replacing the applet
budgie-panel --replace

Perhaps someone else could try to install my branch.

[ghost]

I'm not sure if this is the correct place to talk about design concepts generally, but one aspect of this design i would be strongly in favour of considering is simplifying the panel size down to a number of presets. I.e. Small, Medium, Large as opposed to pixel size. I think this would improve overall usability for the average user and potentially have other benefits for simplifying theming and/or panel layout (I know i've seen weird icon size issues when deviating from the defaults). For users that have a specific need to scale the panel with more granularity, they could perhaps still achieve this by editing the configuration database directly.

[christiankaindl]

Oh, it works beautifully now. See:

The problem was I did not change the git branch as you did, because I thought it already is the right one... but of course it is not :D And I think you missed the ./autogen.sh command before make && sudo make install

But it works really well and is super handy :+1:

Feedback wise I have three thoughts (actually four):

• The window that is currently in focus should be highlighted so it is distinguishable (just as in your screenshot)
• Somehow it has to be noticeable if there is more than one window open (in my 'mockup' this are the dots)
• There should a minimum width:

One last thought (that would only really work with left aligned text): Icons on the very left side of each text. This would be super awesome. Of course this should and could not work for every app but for example for Firefox it could display the favicons. For Nautilus it could display icons for the prebuilt folders like 'Downloads' or 'Pictures'. For apps where this is not possible or it does not make sense simply no icon is displayed.

Anyway, really cool stuff :3

[mussel]

@GrisuProjects thanks for the feedback, I really appreciate it. Regarding your suggestions:

1. I agree and the code to implement this feature is already in place. The highlighting in my screenshot was due to the window requesting attention. To indicate the currently selected window I was thinking in using a vertical blue bar in front of the window switch button. But I could do it differently depending on what the community wants.
2. Absolutely. I intended to do it but i don't know .sass and I have no idea how to change the theming of the applet. Perhaps someone else could give me a hand.
3. Yep. I will do that also.
4. I have no idea how I would do to get these icons.

So, right now I want to focus in getting the basic functionality merged. After the pull request is accepted, I will get working on these suggestions.

[DanielPower]

@mussel

4. You can get the window icon using 'xprop --id '. Of course, replacing with the window's id. xprop is part of Xorg, so it doesn't add any extra dependencies.

[kq01526]

@ikeydoherty wrote: So, window previews aren't supported in Budgie, and I don't think it's something we'll ever support. It adds needless complexity and bloat to something that is relatively lightweight

You say it's "needless", but a lot of users would not agree, as can be seen from:

https://github.com/budgie-desktop/budgie-desktop/issues/278 https://github.com/robint99/mate-dock-applet/issues/49

And millions of MS Windows users are used to it, those previews are actually useful.

[DanielPower]

I've been using Xfce4 for years, and have been wanting for a more modern desktop environment. I like Budgie, but the lack of window grouping is keeping me on Xfce with DockbarX.

Thank you @mussel for the window grouping, as that gets me a little closer, and may even make it worth switching. I've tried writing my own code to return window previews, but unfortunately most window managers just don't support it, and installing kwin on a gtk desktop causes too much conflict.

[mxaddict]

Hi Guys, I know this is an older thread, but is the budgie-panel in budgie-desktop 10.4 updated to have this feature?