Use Pango to render F-keys prefixes for menues (better on high-DPI screens)

context.lua

@@ -127,7 +127,7 @@ local function setup_drawable(data)
   set_map.height = function(value)
     local margins = data.margins
     local need_update = (internal.w.height ~= (value + margins.top + margins.bottom))
-    internal.w.height = value + margins.top + margins.bottom
+    internal.w.height = (value + margins.top + margins.bottom) or 1
     if need_update then
       data.style(data)
       internal.set_position(data)

layout/vertical.lua

@@ -108,6 +108,7 @@ function module:setup_item(data,item,args)
   --Event handling
   item.widget:connect_signal("mouse::enter", function() item.selected = true end)
   item.widget:connect_signal("mouse::leave", function() item.selected = false end)
+  item.widget:connect_signal("widget::updated", function() item._internal.has_changed = true end)
   data._internal.layout:add(item)
 
   --Be sure to always hide sub menus, even when data.visible is set manually

widgets/fkey.lua

@@ -1,30 +1,77 @@
 local setmetatable = setmetatable
-local print = print
-local color = require("gears.color")
-local cairo     = require( "lgi"              ).cairo
-local wibox = require("wibox")
-
-local beautiful    = require( "beautiful"    )
+local print        = print
+local color        = require( "gears.color" )
+local cairo        = require( "lgi"         ).cairo
+local pango        = require( "lgi"         ).Pango
+local pangocairo   = require( "lgi"         ).PangoCairo
+local wibox        = require( "wibox"       )
+local beautiful    = require( "beautiful"   )
 
 local module = {}
 
+local keys = {}
+
+local pango_l,pango_crx,max_width,m_h = nil,nil,0,0
+local function create_pango()
+  pango_crx = pangocairo.font_map_get_default():create_context()
+  pango_l = pango.Layout.new(pango_crx)
+  local desc = pango.FontDescription()
+  desc:set_family("Verdana")
+  desc:set_weight(pango.Weight.BOLD)
+  desc:set_size((m_h-8) * pango.SCALE)
+  pango_l:set_font_description(desc)
+  pango_l.text = "F88"
+  max_width = pango_l:get_pixel_extents().width + m_h + 4
+end
+
 local function new(data,item)
   local pref = wibox.widget.textbox()
   pref.draw = function(self,w, cr, width, height)
-    cr:set_source(color(beautiful.fg_normal))
-    cr:arc((height-4)/2 + 2, (height-4)/2 + 2, (height-4)/2,0,2*math.pi)
-    cr:arc(width - (height-4)/2 - 2, (height-4)/2 + 2, (height-4)/2,0,2*math.pi)
-    cr:rectangle((height-4)/2+2,2,width - (height),(height-4))
-    cr:fill()
-    cr:select_font_face("Verdana", cairo.FontSlant.NORMAL, cairo.FontWeight.BOLD)
-    cr:set_font_size(height-6)
-    cr:move_to(height/2,height-4)
-    cr:set_source(color(beautiful.bg_normal))
-    local text = (item._internal.f_key and item._internal.f_key <= 12) and ("F"..(item._internal.f_key)) or "---"
-    cr:show_text(text)
+    local key = item._internal.f_key
+    if m_h == 0 then
+      m_h = height
+      pref:emit_signal("widget::updated")
+      create_pango()
+      keys = {}
+    end
+    if key and key > 12 and keys[0] then
+      cr:set_source_surface(keys[0])
+      cr:paint()
+    elseif not keys[key] then
+      if not pango_l then
+        m_h = height
+        create_pango()
+      end
+      local img = cairo.ImageSurface(cairo.Format.ARGB32, max_width,beautiful.menu_height)
+      local cr2 = cairo.Context(img)
+      cr2:set_source(color(beautiful.fg_normal))
+      cr2:arc((height-4)/2 + 2, (height-4)/2 + 2, (height-4)/2,0,2*math.pi)
+      cr2:arc(max_width - (height-4)/2 - 2, (height-4)/2 + 2, (height-4)/2,0,2*math.pi)
+      cr2:rectangle((height-4)/2+2,2,max_width - (height),(height-4))
+      cr2:fill()
+      cr2:select_font_face("Verdana", cairo.FontSlant.NORMAL, cairo.FontWeight.BOLD)
+      cr2:set_font_size(height-6)
+      cr2:move_to(height/2 + 2,1)
+      cr2:set_source(color(beautiful.bg_normal))
+      local text = (key and key <= 12) and ("F"..(key)) or " ---"
+      pango_l.text = text
+      cr2:show_layout(pango_l)
+      if key > 12 then
+        keys[0] = img
+      else
+        keys[key] = img
+      end
+    end
+    if key and key > 12 and keys[0] then
+      cr:set_source_surface(keys[0])
+      cr:paint()
+    else
+      cr:set_source_surface(keys[key])
+      cr:paint()
+    end
   end
-  pref.fit = function(...)
-    return 35,data.item_height
+  pref.fit = function(self,width,height)
+    return max_width,data.item_height
   end
   pref:set_markup("<span fgcolor='".. beautiful.bg_normal .."'><tt><b>F11</b></tt></span>")
   return pref