Widget To Display Messages ("For" And "From") With LGI (Lua + GTK)

custom.css

/**
 * This code is part the MoonZaphire project <https://github.com/diazvictor/MoonZaphire/>
 * @date 20.02.2021 04:12:56 -04
 **/

list.message-box {
    padding-left: 10px;
    padding-right: 10px;
}

list.message-box row.message-for {
    margin-top: 10px;
    margin-left: 100px;
}

list.message-box row.message-for box.message {
    background-color: #1E90FF;
    padding: 10px;
    border-radius: 10px 10px 0px 10px;
    border-bottom: 2px solid #1E5EFF;
}

list.message-box row.message-for box.message>label {
    color: #F1F1F1;
}

list.message-box row.message-for box.message>label selection {
    background-color: rgba(0, 0, 0, 0.24);
}

list.message-box row.message-for box.message box.reply {
    border-left: 2px solid rgba(0, 0, 0, 0.15);
    padding-left: 5px;
}

list.message-box row.message-for box.message box.reply label.title {
    font-weight: 500;
}

list.message-box row.message-for box.message box.reply label.title,
list.message-box row.message-for box.message box.reply label {
    color: #F1F1F1;
}

list.message-box row.message-for label.time {
    color: #2B2B2B;
    font-weight: 500;
    margin-top: 5px;
}

list.message-box row.message-from {
    margin-top: 10px;
    margin-right: 100px;
}

list.message-box row.message-from box>label.title {
    color: #2B2B2B;
    font-weight: 500;
    margin-left: 36px;
    margin-bottom: 8px;
}

list.message-box row.message-from box image.avatar {
    margin-right: 5px;
}

list.message-box row.message-from box box.message {
    min-width: 50px;
    background-color: rgba(0, 0, 0, 0.08);
    padding: 10px;
    border-radius: 10px 10px 10px 0px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

list.message-box row.message-from box box.message>label {
    color: #2B2B2B;
}

list.message-box row.message-from box box.message>label selection {
    background-color: rgba(30, 144, 255, 0.24);
}

list.message-box row.message-from box box.message box.reply {
    border-left: 2px solid rgba(0, 0, 0, 0.15);
    padding-left: 5px;
}

list.message-box row.message-from box box.message box.reply label.title {
    font-weight: 500;
}

list.message-box row.message-from box box.message box.reply label.title,
list.message-box row.message-from box box.message box.reply label {
    color: #2B2B2B;
}

list.message-box row.message-from box>label.time {
    color: #2B2B2B;
    font-weight: 500;
    margin-top: 5px;
}

WidgetMessages.lua

--[[
 These widgets are used in the MoonZaphire project <https://github.com/diazvictor/MoonZaphire/>
 @date 20.02.2021 04:12:56 -04
]]

-- I require the LGI libraries
local lgi = require('lgi')
local Gtk = lgi.require('Gtk', '3.0')
local GLib = lgi.require('GLib', '2.0')

-- With this variable I show the number of messages
local i = 0

--- I create the main window
local window = Gtk.Window {
	title = 'Widget to display different types of messages',
	width = 400,
	height = 400,
	window_position = Gtk.WindowPosition.CENTER,
	{
		Gtk.Box {
			id = 'box',
			visible = true,
			can_focus = false,
			orientation = Gtk.Orientation.VERTICAL,
			{
				Gtk.Box {
					id = 'box',
					visible = true,
					can_focus = false,
					orientation = Gtk.Orientation.HORIZONTAL,
					{
						Gtk.Button {
							visible = true,
							can_focus = true,
							label = 'Add a message "From"',
							on_clicked = function ()
								add_message('from')
							end
						},
						expand = true,
						fill = true,
						position = 0
					},
					{
						Gtk.Button {
							visible = true,
							can_focus = true,
							label = 'Add a message "For"',
							on_clicked = function ()
								add_message('for')
							end
						},
						expand = true,
						fill = true,
						position = 1
					}
				}
			},
			{
				Gtk.ScrolledWindow {
					id = 'scroll',
					visible = true,
					{
						Gtk.ListBox {
							id = 'message_box',
							visible = true
						}
					}
				},
				expand = true,
				fill = true,
				position = 2
			}
		}
	},
	on_destroy = function()
		Gtk.main_quit()
	end
}

local styles = Gtk.CssProvider()
styles:load_from_path(
	'custom.css'
)
window:get_style_context().add_provider_for_screen(
	window:get_screen(window),
	styles,
	Gtk.STYLE_PROVIDER_PRIORITY_USER
)
window.child.message_box:get_style_context():add_class('message-box')

-- This function adds a message to the message box.
-- @param str string: The type of message. e.g. "for" or "from".
-- @return boolean true or false and an error message
-- @usage: add_message('from')
function add_message(str)
	local str, message = str or nil
	i = i + 1
	if not str then
		return false, 'You must define a message type.'
	end
	if (str == 'for') then
		message = Gtk.ListBoxRow {
			visible = true,
			activatable = false,
			selectable = false,
			Gtk.Box {
				visible = true,
				can_focus = false,
				halign = Gtk.Align.END,
				orientation = Gtk.Orientation.VERTICAL,
				{
					Gtk.Box {
						id = 'message',
						visible = true,
						can_focus = false,
						orientation = Gtk.Orientation.HORIZONTAL,
						Gtk.Label {
							visible = true,
							label = 'MESSAGE #' .. i
						}
					},
					expand = false,
					fill = true,
					position = 0
				},
				{
					Gtk.Label {
						id = 'time',
						visible = true,
						halign = Gtk.Align.END,
						label = os.date('%H:%M:%S')
					},
					expand = false,
					fill = true,
					position = 1
				},
			}
		}
		-- I add the css styles
		message:get_style_context():add_class('message-for')
	elseif (str == 'from') then
		message = Gtk.ListBoxRow {
			visible = true,
			activatable = false,
			selectable = false,
			Gtk.Box {
				visible = true,
				can_focus = false,
				halign = Gtk.Align.START,
				orientation = Gtk.Orientation.VERTICAL,
				{
					Gtk.Label {
						id = 'author',
						visible = true,
						halign = Gtk.Align.START,
						label = 'AUTHOR'
					},
					expand = false,
					fill = true,
					position = 0
				},
				{
					Gtk.Box {
						visible = true,
						can_focus = false,
						orientation = Gtk.Orientation.HORIZONTAL,
						{
							Gtk.Image {
								id = 'avatar',
								visible = true,
								valign = Gtk.Align.END,
								icon_name = 'avatar-default-symbolic',
								icon_size = 5
							}
						},
						{
							Gtk.Box {
								id = 'message',
								visible = true,
								can_focus = false,
								orientation = Gtk.Orientation.HORIZONTAL,
								Gtk.Label {
									visible = true,
									label = 'MESSAGE #' .. i
								}
							}
						}
					},
					expand = false,
					fill = true,
					position = 1
				},
				{
					Gtk.Label {
						id = 'time',
						visible = true,
						halign = Gtk.Align.END,
						label = os.date('%H:%M:%S')
					},
					expand = false,
					fill = true,
					position = 2
				},
			}
		}
		-- I add the css styles
		message:get_style_context():add_class('message-from')
		message.child.author:get_style_context():add_class('title')
		message.child.avatar:get_style_context():add_class('icon')
		message.child.avatar:get_style_context():add_class('avatar')
	else
		return false, 'The available types are: "For" and "From".'
	end
	-- I add the css styles
	message.child.message:get_style_context():add_class('message')
	message.child.time:get_style_context():add_class('time')

	-- add the "message" widget to the message box
	window.child.message_box:add(message)
	return true
end

window:show_all()
Gtk.main()

Usage

Go to the instructions for use

Screenshot