material-shell
Tools
TypeScript
A modern desktop interface for Linux extending GNOME Shell.
Providing a unique, simple, productivity-oriented, innovative and automated mouse and keyboard workflow which aims to be faster and easier to use and creates a great user experience.
Powered by its unique spatial model, its modern material design interface, its tiling engine and its persistability.
Get notified about updates and join us at
<p>
<a rel="nofollow noopener" target="_blank" href="#workflow">Workflow</a> •<br /> <a rel="nofollow noopener" target="_blank" href="#hotkeys">Hotkeys</a> •<br /> <a rel="nofollow noopener" target="_blank" href="#installation">Installation</a> •<br /> <a rel="nofollow noopener" target="_blank" href="#uninstallation-">Uninstallation</a> •<br /> <a rel="nofollow noopener" target="_blank" href="#history">History</a> •<br /> <a rel="nofollow noopener" target="_blank" href="#crypto-funding">Support</a>
</p>
<p>
<a rel="nofollow noopener" target="_blank" href="https://get.trbu.app"></p>
<p>
</a>
</p>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-workflow" class="anchor" aria-hidden="true" href="#workflow"></a>Workflow
</h1>
<p>
Created to <strong>simplify</strong> navigation and <strong>reduce</strong> the need to <strong>manipulate</strong> windows in order to <strong>improve productivity</strong>. It’s meant to be 100% <strong>predictable</strong> and bring the benefits of tools coveted by professionals to everyone.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-spatial-model" class="anchor" aria-hidden="true" href="#spatial-model"></a>Spatial Model
</h2>
<p>
This is the <strong>core</strong> of the <strong>workflow</strong> and what everything is built around and in our case it’s one of the simplest: <strong>a Grid</strong>
</p>
<p>
</p>
<p>
A <strong>Workspace</strong> is an applications container that can be <strong>visualized as a row</strong> and <strong>applications as cells</strong>.<br /> Every <strong>new application</strong> is <strong>automatically positioned</strong> inside this grid at the end of its workspace row and every <strong>new workspaces</strong> are <strong>appended at the bottom</strong> which is very <strong>predictable</strong> and <strong>always sorted automatically</strong>.<br /> This allows us to provide <strong>intuitive navigation</strong> by moving the screen around a larger context. Navigating <strong>up</strong> and <strong>down</strong> will change the current workspace and navigating <strong>left</strong> and <strong>right</strong> changes the current window(s) on screen.<br /> You can organize your applications by use cases as <strong>activities</strong> or by applications type as <strong>categories</strong>.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-interface" class="anchor" aria-hidden="true" href="#interface"></a>Interface
</h2>
<p>
Designed to represent the <strong>state</strong> of the <strong>workflow</strong> and provide <strong>navigation</strong> capabilities for both a <strong>mouse</strong> and a <strong>touchscreen</strong>.
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-layout" class="anchor" aria-hidden="true" href="#layout"></a>Layout
</h3>
<p>
The interface is divided in <strong>two parts</strong>:<br /> In the <strong>left panel</strong> everything pertains to the <strong>system</strong>: workspaces state, current system status, notifications, etc.<br /> On the <strong>right</strong> of the left panel everything pertains to the <strong>active workspace</strong>: the windows on the workspace’s row, the layout switcher, and the windows themselves.
</p>
<p>
</p>
<p>
The two most important components are the <strong>system panel</strong> (on the left) and the <strong>workspace panel</strong> (on the top).
</p>
<h4 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-system-panel" class="anchor" aria-hidden="true" href="#system-panel"></a>System panel
</h4>
<p>
The system panel is the main component of the left side of the interface. It consists of:
</p>
<ul dir="auto">
<li>
<strong>Workspace list and switcher</strong>: This component lists all the workspaces available and the currently selected one. It allows us to navigate to a specific workspace by clicking on its icon.
</li>
<li>
<strong>System tray</strong>: This component lists all the information about the system, e.g. network status, bluetooth connectivity, volume, battery, and notification icons.
</li>
</ul>
<h4 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-workspace-panel" class="anchor" aria-hidden="true" href="#workspace-panel"></a>Workspace panel
</h4>
<p>
The workspace panel is the main component of the right side of the interface. It consists of:
</p>
<ul dir="auto">
<li>
<strong>App switcher</strong>: This component lists all the application windows opened in the current workspace’s row and the currently focused one. It allows us to navigate to a specific window within the row by selecting its item.
</li>
<li>
<strong>Layout switcher</strong>: This component displays the current layout of the workspace and can be clicked to switch to the next available layout.
</li>
</ul>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-design" class="anchor" aria-hidden="true" href="#design"></a>Design
</h3>
<p>
Made by following the <strong><a rel="nofollow noopener" target="_blank" href="https://material.io">Material Design guidelines</a></strong> – a solid baseline that allows us to provide an <strong>aesthetically pleasing</strong> and <strong>highly accessible</strong> interface.
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-themes" class="anchor" aria-hidden="true" href="#themes"></a>Themes
</h3>
<p>
You can choose between 3 different themes:
</p>
<ul dir="auto">
<li>
Dark
</li>
<li>
Light
</li>
<li>
Primary (Colorful one)
</li>
</ul>
<p>
And there is also a <strong>blurry</strong> version available for the more fancy ones !
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-tiling-engine" class="anchor" aria-hidden="true" href="#tiling-engine"></a>Tiling engine
</h2>
<p>
It’s the <strong>tool</strong> that <strong>automatically organize</strong> the application’s <strong>window</strong> for you in a <strong>predictable</strong> and mutually <strong>non-overlapping</strong> disposition.
</p>
<p>
</p>
<p>
<strong>Choose</strong> at <strong>any time</strong> which tiling layout suit the most for your need:
</p>
<ul dir="auto">
<li>
<strong>Maximize</strong>: Single window at a time
</li>
<li>
<strong>Split</strong>: 2 windows side by side
</li>
<li>
<strong>Simple</strong>: All windows evenly split and stacked along horizontal or vertical axis (useful for ultra wide monitor)
</li>
<li>
<strong>Half</strong>: One master window on the left then others windows stacked to the right
</li>
<li>
<strong>Grid</strong>: All windows displayed as a grid
</li>
</ul>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-persistence" class="anchor" aria-hidden="true" href="#persistence"></a>Persistence
</h2>
<p>
The <strong>best way</strong> to <strong>configure</strong> the desktop layout is to <strong>not</strong> have to <strong>do it</strong>.<br /> Material Shell <strong>keeps track</strong> of every <strong>decision</strong> relative to the desktop layout: where are windows, in which workspaces, and in which order.<br /> This allows <strong>configuration</strong> of the layouts <strong>on the go</strong> while using it.<br /> When opening a <strong>new session</strong> Material Shell will <strong>restore every window</strong> previously present with a “<strong>window placeholder</strong> which allows you to reopen any of the previous windows easily at the same spot you like to have them.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-hotkeys" class="anchor" aria-hidden="true" href="#hotkeys"></a>Hotkeys
</h2>
<p>
Some hotkeys might already be used by GNOME Shell – please check your keybindings first.
</p>
<h4 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-desktop-navigation" class="anchor" aria-hidden="true" href="#desktop-navigation"></a>Desktop navigation
</h4>
<ul dir="auto">
<li>
<code>Super+W</code> Navigate to the upper workspace/category.
</li>
<li>
<code>Super+S</code> Navigate to the lower workspace/category.
</li>
<li>
<code>Super+A</code> Focus the window at the left of the current window.
</li>
<li>
<code>Super+D</code> Focus the window at the right of the current window.
</li>
<li>
<code>Super+1</code>, <code>Super+2</code> … <code>Super+0</code> Navigate to specific workspace
</li>
</ul>
<h4 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-window-manipulation" class="anchor" aria-hidden="true" href="#window-manipulation"></a>Window manipulation
</h4>
<ul dir="auto">
<li>
<code>Super+Q</code> Kill the current window focused.
</li>
<li>
<code>Super+[MouseDrag]</code> Move window around.
</li>
<li>
<code>Super+Shift+A</code> Move the current window to the left.
</li>
<li>
<code>Super+Shift+D</code> Move the current window to the right.
</li>
<li>
<code>Super+Shift+W</code> Move the current window to the upper workspace.
</li>
<li>
<code>Super+Shift+S</code> Move the current window to the lower workspace.
</li>
</ul>
<h4 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-extra-hotkeys" class="anchor" aria-hidden="true" href="#extra-hotkeys"></a>Extra Hotkeys
</h4>
<ul dir="auto">
<li>
<code>Super+Space</code> Cycle the tiling layout of the current workspace.
</li>
<li>
<code>Super+Escape</code> Toggle the UI of Material-shell, like a Zen mode.
</li>
</ul>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-installation" class="anchor" aria-hidden="true" href="#installation"></a>Installation
</h1>
<h4 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-get-it-in-two-clicks" class="anchor" aria-hidden="true" href="#get-it-in-two-clicks"></a>Get it in two clicks
</h4>
<ul dir="auto">
<li>
Navigate to <a rel="nofollow noopener" target="_blank" href="https://extensions.gnome.org/extension/3357/material-shell/">extensions.gnome.org</a>
</li>
<li>
Switch the toggle ON
</li>
</ul>
<h4 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-get-the-most-up-to-date-version-with-git" class="anchor" aria-hidden="true" href="#get-the-most-up-to-date-version-with-git"></a>Get the most up to date version with Git
</h4>
<ol dir="auto">
<li>
Check your GNOME Shell version as we only support <strong>gnome-shell >= 40.0</strong>
</li>
<li>
Download the extension. Depending on your distribution, there are several ways to acquire it:
</li>
</ol>
<p>
Install via<br /> Command
</p>
<p>
extensions.gnome.org<br /> Navigate to <a rel="nofollow noopener" target="_blank" href="https://extensions.gnome.org/extension/3357/material-shell/">extensions.gnome.org</a> && switch the toggle ON
</p>
<p>
source<br /> <code>git clone https://github.com/material-shell/material-shell.git && cd material-shell && make install</code>
</p>
<p>
(We appreciate package maintainers! If you would like to make a package available for your distro please submit a PR so it can be added here!)
</p>
<ol start="3" dir="auto">
<li>
Reload GNOME Shell:
</li>
</ol>
<ul dir="auto">
<li>
On X.org: Hit <code>Alt+F2</code> and type the command <code>r</code>
</li>
<li>
On Wayland: Log out and back in
</li>
</ul>
<ol start="4" dir="auto">
<li>
Open <code>gnome-tweaks</code> and activate the <code>Material Shell</code> extension <strong>OR</strong> enable it using
</li>
</ol>
<pre>gnome-extensions enable material-shell@papyelgringo</pre>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-recommended-additional-configuration" class="anchor" aria-hidden="true" href="#recommended-additional-configuration"></a>Recommended Additional Configuration
</h2>
<ul dir="auto">
<li>
GTK and GNOME Shell theme: <a rel="nofollow noopener" target="_blank" href="https://gitlab.com/tista500/plata-theme">Plata Theme</a>
</li>
<li>
Icon theme: Tela Icon Theme
</li>
</ul>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-reset-material-shell" class="anchor" aria-hidden="true" href="#reset-material-shell"></a>Reset Material Shell
</h1>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-reset-the-material-shell-persistent-state" class="anchor" aria-hidden="true" href="#reset-the-material-shell-persistent-state"></a>Reset the Material Shell persistent state
</h3>
<p>
If you have some weird behavior or a degradation over time, it can be a good idea to try to reset the Material Shell state.
</p>
<ol dir="auto">
<li>
Open Looking Glass tool by pressing <code>Alt + F2</code> and type <code>lg</code>
</li>
<li>
Copy and paste the command <code>global.set_persistent_state('material-shell-state',new GLib.Variant('s', '{}'));</code>
</li>
<li>
Reload the shell
</li>
</ol>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-reset-the-material-shell-settings" class="anchor" aria-hidden="true" href="#reset-the-material-shell-settings"></a>Reset the Material Shell settings
</h3>
<p>
If you want to discard all the changes of Material Shell settings and reset to default (Including keybindings)
</p>
<ol dir="auto">
<li>
Open a terminal and copy/paste <code>dconf reset -f /org/gnome/shell/extensions/materialshell/</code>
</li>
</ol>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-uninstallation-" class="anchor" aria-hidden="true" href="#uninstallation-"></a>Uninstallation 😢<br />
</h1>
<p>
We’re sad to see you go. Before you uninstall, leave us some feedback by opening an issue – it will be very helpful in improving Material Shell.
</p>
<ol dir="auto">
<li>
Open <code>gnome-tweaks</code> and disable the <code>Material Shell</code> extension <strong>OR</strong> disable it using
</li>
</ol>
<pre>gnome-extensions disable material-shell@papyelgringo</pre>
<ol start="2" dir="auto">
<li>
Delete the extension directory.
</li>
</ol>
<pre>rm -rf ~/.local/share/gnome-shell/extensions/material-shell@papyelgringo</pre>
<p>
if you miss the minimize and maximize button on windows titlebar you can restore them with
</p>
<pre>/usr/bin/gsettings set org.gnome.desktop.wm.preferences button-layout :minimize,maximize,close</pre>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-history" class="anchor" aria-hidden="true" href="#history"></a>History
</h1>
<p>
The project is based on my earlier work on Material Awesome.
</p>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-crypto-funding" class="anchor" aria-hidden="true" href="#crypto-funding"></a>Crypto Funding
</h1>
<p>
If you interested in funding the project throught crypto feel free to use:<br /> <strong>Bitcoin</strong> <code>395nVybx6h6CC4sWgGGcvCDxwLvGMFhfiA</code><br /> <strong>Ethereum</strong> <code>0x45360f24f03f2a8a964f7c083815336912cba837</code><br /> <strong>Monero</strong> <code>82YGUymQLZ3cWPw2kEfjTphjUJLCN3M2eX3dPxRhrBeKSoUUoj4TEHAGToPoZA8AfhSGEKa9FdZjmGKAMSBxcrgHQMRZu3v</code>
</p>