Make OS X like interface based on GNOME Shell

Following my recommendations you can build your own interface, e.g. OS X like, keeping the best of current GNOME Shell features — it’s stunning client-side decorations and wonderful interface design.

Screenshot from 2015-10-31 19-12-50On this screenshot you see Flat Plat theme, Moka Icons in Dock and transparent top bar which is not like OS X, but saving screen space and looking better. Of course there is no problem to make it similar to OS X.

This includes the following steps:

  1. disabling GNOME Panel;
  2. creating Dock;
  3. creating top panel;
  4. tweaks.

Making dock

It’s necessary to use Cairo Dock, the most powerful dock in linux family,  at least for the creation of a top panel. For the main panel you can choose any other dock (Plank, etc.) or use dock from GNOME Dash. I believe GNOME Dock and Cairo are more preferrable.

Install Cairo Dock:

sudo apt-get install cairo-dock

Move GNOME dock from dash to bottom of the screen with Dash to dock extension: https://extensions.gnome.org/extension/307/dash-to-dock/

Disable top panel

By disabling top panel you don’t loose GNOME Dash/Overview, which you can still launch by keybindings.Screenshot from 2015-10-29 18-12-41

Screenshot from 2015-10-29 18-04-19Disable panel using this command:

dbus-send --session --type=method_call --dest=org.gnome.Shell /org/gnome/Shell org.gnome.Shell.Eval string:'Main.panel.actor.show();'

For automatic disabling you need to create an autostart item. GNOME Panel doesn’t start immediately, so, you need to create script with delay, like this:

#!/bin/bash
sleep 15
dbus-send --session --type=method_call --dest=org.gnome.Shell /org/gnome/Shell org.gnome.Shell.Eval string:'Main.panel.actor.hide();'

Open «gnome-session-properties» and add new item. Don’t forget about adding Cairo Dock as well.

If you don’t have gnome-session-properties utility, create .desktop file in ~/.config/autostart and add Cairo Dock with Gnome Tweak tool.Screenshot from 2015-10-29 16-50-24Screenshot from 2015-10-31 19-16-11

Create new top panel instead of GNOME’s

In Cairo Dock you must create the second panel, or set up the main panel with the following properties and elements. Offset and alignment not equal to 0 or 1 because window bars becomes untouchable in the top edge of screen. It’s a bug.Screenshot from 2015-10-31 18-52-39 Screenshot from 2015-10-31 18-52-42As you see, my settings are not similar to OS X top bar. All elements are moved to the right side, the panel is fully transparent and it overlays the windows bar. I reach economy of screen space with this settings, and in my opinion it is better than Apple scheme. But you can set up this panel like OS X, no problem. There are a lot of themes for Cairo Dock for it.

Necessary tweaks

The first tweak is moving icons to top bar in GNOME Shell using Topicons extension (https://extensions.gnome.org/extension/495/topicons/). In fact, only Dropbox moved there, others like Skype, multiload-indicator or gtk-reshift then appeared in Cairo-Dock. This means, that you will lost some indicators. I didn’t dig into the solution yet.

The second problem is a loss of Network indicator. Currently I replace it with Cairo Dock Wi-fi indicator, which shows only signal strength. To configure network settings and connections you can use next custom indicator.

«Status indicator» are a custom Cairo Dock launcher, which opens standard GNOME network/battery/log menu. Just insert command above and select «Don’t link the launcher with its window».

dbus-send --session --type=method_call --dest=org.gnome.Shell /org/gnome/Shell org.gnome.Shell.Eval string:'Main.panel.statusArea.aggregateMenu.menu.open();'

Screenshot from 2015-10-31 18-49-00

And what you will get:

Screenshot from 2015-10-31 18-50-47Last loss is Ubuntu keyboard indicator (which is probably needed for you, if you are like me, illiterate non-english speaker from a far country :). I configured Cairo Dock Keyboard indicator similar to Ubuntu icons with svg black backgroud image and Fira Sans font.

Screenshot from 2015-10-29 16-58-26Of course, don’t forget to configure buttons in dconf-editor the way you prefer — org.gnome.desktop.wm.preferences, button layout.

Screenshot from 2015-10-29 18-00-11This is all you need to create your own desktop environment based on GNOME Shell and its stunning interface without GNOME Panel.

Реклама