bling/docs/widgets/task_preview.md

153 lines
5.7 KiB
Markdown

## 🔍 Task Preview <!-- {docsify-ignore} -->
This is a popup widget that will show a preview of the specified client. It intends to mimic the small popup when hovering over an application icon on Windows.
![](https://user-images.githubusercontent.com/33443763/124705653-d7b98b80-deaa-11eb-8091-42bbe62365be.png)
*image by [javacafe](https://github.com/JavaCafe01)*
### Usage
To enable:
```lua
bling.widget.task_preview.enable {
x = 20, -- The x-coord of the popup
y = 20, -- The y-coord of the popup
height = 200, -- The height of the popup
width = 200, -- The width of the popup
placement_fn = function(c) -- Place the widget using awful.placement (this overrides x & y)
awful.placement.bottom(c, {
margins = {
bottom = 30
}
})
end
}
```
To allow for more customization, there is also a `widget_structure` property (as seen in some default awesome widgets) which is optional. An example is as follows:
```lua
bling.widget.task_preview.enable {
x = 20, -- The x-coord of the popup
y = 20, -- The y-coord of the popup
height = 200, -- The height of the popup
width = 200, -- The width of the popup
placement_fn = function(c) -- Place the widget using awful.placement (this overrides x & y)
awful.placement.bottom(c, {
margins = {
bottom = 30
}
})
end,
-- Your widget will automatically conform to the given size due to a constraint container.
widget_structure = {
{
{
{
id = 'icon_role',
widget = awful.widget.clienticon, -- The client icon
},
{
id = 'name_role', -- The client name / title
widget = wibox.widget.textbox,
},
layout = wibox.layout.flex.horizontal
},
widget = wibox.container.margin,
margins = 5
},
{
id = 'image_role', -- The client preview
resize = true,
valign = 'center',
halign = 'center',
widget = wibox.widget.imagebox,
},
layout = wibox.layout.fixed.vertical
}
}
```
Here are the signals available:
```lua
-- bling::task_preview::visibility -- first line is the signal
-- s (screen) -- indented lines are function parameters
-- v (boolean)
-- c (client)
```
By default, the widget is not visible. You must implement when it will update and when it will show.
### Example Implementation
We can trigger the widget to show the specific client when hovering over it in the tasklist. The code shown below is the example icon only tasklist from the [AwesomeWM docs](https://awesomewm.org/doc/api/classes/awful.widget.tasklist.html). We are going to toggle the widget through the tasklist's `create_callback` (bling addons are commented).
```lua
s.mytasklist = awful.widget.tasklist {
screen = s,
filter = awful.widget.tasklist.filter.currenttags,
buttons = tasklist_buttons,
layout = {
spacing_widget = {
{
forced_width = 5,
forced_height = 24,
thickness = 1,
color = '#777777',
widget = wibox.widget.separator
},
valign = 'center',
halign = 'center',
widget = wibox.container.place,
},
spacing = 1,
layout = wibox.layout.fixed.horizontal
},
-- Notice that there is *NO* wibox.wibox prefix, it is a template,
-- not a widget instance.
widget_template = {
{
wibox.widget.base.make_widget(),
forced_height = 5,
id = 'background_role',
widget = wibox.container.background,
},
{
{
id = 'clienticon',
widget = awful.widget.clienticon,
},
margins = 5,
widget = wibox.container.margin
},
nil,
create_callback = function(self, c, index, objects) --luacheck: no unused args
self:get_children_by_id('clienticon')[1].client = c
-- BLING: Toggle the popup on hover and disable it off hover
self:connect_signal('mouse::enter', function()
awesome.emit_signal("bling::task_preview::visibility", s,
true, c)
end)
self:connect_signal('mouse::leave', function()
awesome.emit_signal("bling::task_preview::visibility", s,
false, c)
end)
end,
layout = wibox.layout.align.vertical,
},
}
```
### Theme Variables
```lua
theme.task_preview_widget_border_radius = 0 -- Border radius of the widget (With AA)
theme.task_preview_widget_bg = "#000000" -- The bg color of the widget
theme.task_preview_widget_border_color = "#ffffff" -- The border color of the widget
theme.task_preview_widget_border_width = 3 -- The border width of the widget
theme.task_preview_widget_margin = 0 -- The margin of the widget
```
NOTE: I recommend to only use the widget border radius theme variable when not using shadows with a compositor, as anti-aliased rounding with the outer widgets made with AwesomeWM rely on the actual bg being transparent. If you want rounding with shadows on the widget, use a compositor like [jonaburg's fork](https://github.com/jonaburg/picom).