lipido / kargos

KDE Plasma port of GNOME Argos and OSX BitBar
GNU General Public License v3.0
126 stars 13 forks source link

Allow rich text formatting #40

Closed wsdfhjxc closed 3 years ago

wsdfhjxc commented 4 years ago

The plasmoid has built-in support for using Font Awesome's glyphs as icons, but I wanted to use glyphs from another font. In order to do it, I needed to use different font families for different parts of the text in a single line (the icon and the label). I couldn't get it to work, despite using Qt's supported HTML subset, which is even mentioned in the readme. It turned out that the text component doesn't have a "rich text" flag, and ignores style attributes like font-family or font-size as a result.

This PR sets the "rich text" flag on the text component. After that, it's possible to correctly display HTML-formatted output where different font families, sizes and spacing are used independently for different parts of the text in a single line.

Here is an example of how this can be utilized:

#!/bin/bash

icon=""
iconFont="FontAwesome"
iconSize="15px"
iconSpacing="5px"
label="Test"
labelFont="Noto Sans"
labelSize="12px"

output+="<td style='padding: 2px $iconSpacing 0 0; font-family: $iconFont; font-size: $iconSize'>$icon</td>"
output+="<td style='padding: 1px 0 0 0; font-family: $labelFont; font-size: $labelSize'>$label</td>"
echo "$output"

There is no need to put things into table cells, as the icon could be just wrapped in <span style='…'></span> container, while the label could be left as is. However, some font combinations might cause vertical alignment issues (see here). As Qt doesn't seem to have an equivalent of Pango's rise attribute for text formatting, I found that vertical padding applied on both table cells does the trick. The padding values (2px for the icon and 1px for the label) need to be tweaked for other font combinations.

shocklateboy92 commented 4 years ago

Hey, thanks for the PR! :smiling_face_with_three_hearts:.

I'm super busy at the moment, so it might be a couple of days before I can really take a look - hope that's okay. In the meantime, you've validated that this doesn't create any weird regressions right? It looks like you've set the "rich text" flag unconditionally.

Also, does this apply to the widget in collapsed mode only, or both the expanded and collapsed modes?

wsdfhjxc commented 4 years ago

I tested it with the example scripts available in the repository and in the README, and I didn't notice regressions.

This change affects the widget only in compacted mode. However, the "rich text" flag can be also set for the text component used in expanded mode, and from what I can observe, there are no regressions either. I can include that in the PR if it also makes sense.