labwc environment enables wlogout

Since abandoning Gnome, I have been using the labwc window manager, plus some other core desktop components, to create my own desktop environment. The advantage is that you can control everything yourself, but the disadvantage is that you have to build everything yourself. This process is a bit similar to the video on Douyin where I rub my car with my hands. It is quite enjoyable and at the same time it can deepen my understanding of what a desktop environment is.

To be honest, building your own desktop environment on Linux today is much better than 10 years ago, and it is not difficult. I personally think it is more interesting than using Gnome, KDE, Xfce, etc. directly.

I have written a series of articles on how to create a desktop environment for the core of labwc. Interested readers can check it out.

This article is a supplement to the logout interface. It is also very simple and direct, because there is not much information in the Chinese world, so a simple record will facilitate latecomers.

The so-called logout interface (logout menu) is a selection menu that pops up when you exit the desktop environment and enter different functional modes, such as shutting down, locking the screen, logging out, etc.

The default labwc configuration does not provide such a menu choice. When you accidentally click exit, you will directly exit the system and return to the login interface, which can be said to be very violent.

Therefore, after using it for a period of time, I personally feel that I must install wlogout, the protagonist of this article.

1. Install wlogout

Direct package management installation, the function of this kind of thing is not updated frequently.

1sudo apt install wlogout

Once installed, the command is ready.

1➜ ~ which wlogout
2/usr/bin/wlogout
3➜ ~ wlogout -v
41.1.1

To test the effect, you can directly run the wlogut command, and the pop-up interface is as shown below.

2. Change the menu configuration of labwc

In order to actually use wlogout, it must be embedded in the labwc menu.

The changes compared to the default configuration are as follows:

The simple explanation is to use the wlogout command to take over the Exit and Shutdown commands. When you select Exit or Poweroff in the system's right-click menu, the wlogout menu will pop up.

The advantage of this is that you will not exit the desktop environment immediately if you click incorrectly. After all, there is an extra layer of choices, and the probability of making an error is reduced by one level.

3. wlogout beautification

Please see the relevant configuration

  1➜ ~ tree .config/wlogout/
  2.config/wlogout/
  3├── icons
  4│ ├── hibernate.svg
  5│ ├── lock.svg
  6│ ├── logout.svg
  7│ ├── reboot.svg
  8│ ├── shutdown.svg
  9│ └── suspend.svg
 10├── layout
 11└── style.css
 12
 132 directories, 8 files
 14➜ ~ cat .config/wlogout/layout
 15{
 16     "label" : "lock",
 17     "action" : "swaylock",
 18     "text" : "Lock",
 19     "keybind" : "l"
 20}
 21{
 22     "label" : "hibernate",
 23     "action" : "systemctl hibernate",
 24     "text" : "Hibernate",
 25     "keybind" : "h"
 26}
 27{
 28     "label" : "logout",
 29     "action" : "loginctl terminate-user $USER",
 30     "text" : "Logout",
 31     "keybind" : "e"
 32}
 33{
 34     "label" : "shutdown",
 35     "action" : "systemctl poweroff",
 36     "text" : "Shutdown",
 37     "keybind" : "s"
 38}
 39{
 40     "label" : "suspend",
 41     "action" : "systemctl suspend",
 42     "text" : "Suspend",
 43     "keybind" : "u"
 44}
 45{
 46     "label" : "reboot",
 47     "action" : "systemctl reboot",
 48     "text" : "Reboot",
 49     "keybind" : "r"
 50}
 51➜ ~ cat .config/wlogout/style.css
 52* {
 53   background-image: none;
 54}
 55window {
 56   background-color: rgba(0, 0, 0, 0.4);
 57}
 58button {
 59   color: #ffffff;
 60   background-color: #1e222a;
 61   border-style: solid;
 62   border-color: #33ccfe;
 63   border-width: 2px;
 64   border-radius: 3%;
 65   background-repeat: no-repeat;
 66   background-position: center;
 67   background-size: 25%;
 68   margin: 50px;
 69}
 70
 71button: focus,
 72button:active {
 73   background-color: #06b6d4;
 74   outline-style: none;
 75}
 76
 77button:hover {
 78   background-color: #353c4a;
 79}
 80
 81#lock {
 82   background-image: image(
 83     url("./icons/lock.svg"),
 84     url("/usr/share/wlogout/icons/lock.png"),
 85     url("/usr/local/share/wlogout/icons/lock.png")
 86   );
 87}
 88
 89#logout {
 90   background-image: image(
 91     url("./icons/logout.svg"),
 92     url("/usr/share/wlogout/icons/logout.png"),
 93     url("/usr/local/share/wlogout/icons/logout.png")
 94   );
 95}
 96
 97#suspend {
 98   background-image: image(
 99     url("./icons/suspend.svg"),
100     url("/usr/share/wlogout/icons/suspend.png"),
101     url("/usr/local/share/wlogout/icons/suspend.png")
102   );
103}
104
105#hibernate {
106   background-image: image(
107     url("./icons/hibernate.svg"),
108     url("/usr/share/wlogout/icons/hibernate.png"),
109     url("/usr/local/share/wlogout/icons/hibernate.png")
110   );
111}
112
113#shutdown {
114   background-image: image(
115     url("./icons/shutdown.svg"),
116     url("/usr/share/wlogout/icons/shutdown.png"),
117     url("/usr/local/share/wlogout/icons/shutdown.png")
118   );
119}
120
121#reboot {
122   background-image: image(
123     url("./icons/reboot.svg"),
124     url("/usr/share/wlogout/icons/reboot.png"),
125     url("/usr/local/share/wlogout/icons/reboot.png")
126   );
127}

The above configuration files are quite straightforward. They control icons, function block related, and various styles respectively. Basically, you can adjust them however you want.

Usually, I go to github to search for the xx theme keyword to customize a beautiful interface. What if the other party is a designer?

When writing this article, searching for wlogout theme only returned 2 results, the second one is good: https://github.com/DreamMaoMao/wlogout-theme

According to the other party's configuration, the effect after replacement is as follows:

The actual effect after using it on my machine is not good. The position of the text article is wrong and I am too lazy to take a screenshot. I guess I need to adjust the style.css file. CSS experts can use it to their fullest.