topbar: allow text for button 739

exampleSite/content/basics/migration/_index.en.md

@@ -22,6 +22,8 @@ This document shows you what's new in the latest release and flags it with one o
 
 - {{% badge color="fuchsia" icon="fab fa-hackerrank" title=" " %}}0.112.4{{% /badge %}} This release requires a newer Hugo version.
 
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} The topbar button received a way to add text next to the icon. For this, the original `title` option was renamed to `hint` while the new `title` option is now displayed next to the icon.
+
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} The light themes have a bit more contrast for content text and headings. Also the syntaxhighlighting was changed to the more colorful MonokaiLight. This brings the syntaxhighlightning in sync with the corresponding dark theme variants, which are using Monokai. If you dislike this, you can create your own color variant file as [described here](basics/branding#modify-shipped-variants).
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} You now can configure additional options for every theme variant in your `hugo.toml`. This allows for optional [advanced functionality](basics/branding#theme-variant-advanced). You don't need to change anything as the old configuration options will still work (but may generate warnings now).

exampleSite/content/basics/topbar/_index.en.md

@@ -111,12 +111,13 @@ For displaying an area in the button's overlay, see [Area-Button](#area-button).
 | **page**              | _<empty>_ | Mandatory reference to the page. |
 | **class**             | _<empty>_ | Mandatory unique class name for this button. Displaying two buttons with the same value for **class** is undefined. |
 | **href**              | _&lt;empty&gt;_ | Either the destination URL for the button or JavaScript code to be executed on click.<br><br>- if starting with `javascript:` all following text will be executed in your browser<br>- every other string will be interpreted as URL<br>- if empty the button will be displayed in disabled state regardless of its **content** |
-| **icon**              | _&lt;empty&gt;_ | Mandatory [Font Awesome icon name](shortcodes/icon#finding-an-icon). |
+| **icon**              | _&lt;empty&gt;_ | [Font Awesome icon name](shortcodes/icon#finding-an-icon). |
 | **onempty**           | `disable`       | Defines what to do with the button if **href** is not empty but the content overlay is empty:<br><br>- `disable`: The button is displayed in disabled state.<br>- `hide`: The button is removed. |
 | **onwidths**          | `show`          | The action, that should be executed if the site is displayed in the given width:<br><br>- `show`: The button is displayed in its given area<br>- `hide`: The button is removed.<br>- `area-XXX`: The button is moved from its given area into the area `XXX`. |
 | **onwidthm**          | `show`          | See above. |
 | **onwidthl**          | `show`          | See above. |
-| **title**             | _&lt;empty&gt;_ | Arbitrary text for title, displayed in the tooltip. |
+| **hint**              | _&lt;empty&gt;_ | Arbitrary text displayed in the tooltip. |
+| **title**             | _&lt;empty&gt;_ | Arbitrary text for the button. |
 | **content**           | _&lt;empty&gt;_ | Arbitrary HTML to put into the content overlay. This parameter may be empty. In this case no overlay will be generated. |
 
 ### Area-Button
@@ -131,12 +132,13 @@ Call this from your own button templates if you want to implement a button with
 |-----------------------|-----------------|-------------|
 | **page**              | _&lt;empty&gt;_ | Mandatory reference to the page. |
 | **area**              | _&lt;empty&gt;_ | Mandatory unique area name for this area. Displaying two areas with the same value for **area** is undefined. |
-| **icon**              | _&lt;empty&gt;_ | Mandatory [Font Awesome icon name](shortcodes/icon#finding-an-icon). |
+| **icon**              | _&lt;empty&gt;_ | [Font Awesome icon name](shortcodes/icon#finding-an-icon). |
 | **onempty**           | `disable`       | Defines what to do with the button if the content overlay is empty:<br><br>- `disable`: The button is displayed in disabled state.<br>- `hide`: The button is removed. |
 | **onwidths**          | `show`          | The action, that should be executed if the site is displayed in the given width:<br><br>- `show`: The button is displayed in its given area<br>- `hide`: The button is removed.<br>- `area-XXX`: The button is moved from its given area into the area `XXX`. |
 | **onwidthm**          | `show`          | See above. |
 | **onwidthl**          | `show`          | See above. |
-| **title**             | _&lt;empty&gt;_ | Arbitrary text for title, displayed in the tooltip. |
+| **hint**              | _&lt;empty&gt;_ | Arbitrary text displayed in the tooltip. |
+| **title**             | _&lt;empty&gt;_ | Arbitrary text for the button. |
 
 ### Predefined Buttons
 

layouts/partials/topbar/button/edit.html

@@ -14,7 +14,7 @@
 			"onwidths" $onwidths
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
-			"title" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page"))
+			"hint" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page"))
 		)}}
 	{{- end }}
 {{- end }}

layouts/partials/topbar/button/more.html

@@ -10,5 +10,5 @@
 	"onwidths" $onwidths
 	"onwidthm" $onwidthm
 	"onwidthl" $onwidthl
-	"title" (printf "%s" (T "More-action"))
+	"hint" (printf "%s" (T "More-action"))
 )}}

layouts/partials/topbar/button/next.html

@@ -32,7 +32,7 @@
 			"onwidths" $onwidths
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
-			"title" (printf "%s (%s)" ($next | default .).Title ($endarrow | safeHTML))
+			"hint" (printf "%s (%s)" ($next | default .).Title ($endarrow | safeHTML))
 		)}}
 	{{- end }}
 {{- end }}

layouts/partials/topbar/button/prev.html

@@ -35,7 +35,7 @@
 			"onwidths" $onwidths
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
-			"title" (printf "%s (%s)" ($prev | default .).Title ($startarrow | safeHTML))
+			"hint" (printf "%s (%s)" ($prev | default .).Title ($startarrow | safeHTML))
 		)}}
 	{{- end }}
 {{- end }}

layouts/partials/topbar/button/print.html

@@ -14,7 +14,7 @@
 			"onwidths" $onwidths
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
-			"title" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter"))
+			"hint" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter"))
 		)}}
 	{{- end }}
 {{- end }}

layouts/partials/topbar/button/sidebar.html

@@ -10,6 +10,6 @@
 		"onwidths" $onwidths
 		"onwidthm" $onwidthm
 		"onwidthl" $onwidthl
-		"title" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle"))
+		"hint" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle"))
 	)}}
 {{- end }}

layouts/partials/topbar/button/toc.html

@@ -22,8 +22,9 @@
 			"onwidths" $onwidths
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
-			"title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
+			"hint" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
 			"content" $content
+			"title" "Klaus"
 		)}}
 	{{- end }}
 {{- end }}

layouts/partials/topbar/func/area-button.html

@@ -1,5 +1,6 @@
 {{- $area := .area }}
 {{- $icon := .icon }}
+{{- $hint := .hint }}
 {{- $title := .title }}
 {{- $onempty := cond (isset . "onempty") .onempty "disable" }}
 {{- $onwidths := cond (isset . "onwidths") .onwidths "show" }}
@@ -20,6 +21,7 @@
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
 			"title" $title
+			"hint" $hint
 			"content" $content
 		)}}
 	{{- end }}

layouts/partials/topbar/func/button.html

@@ -22,25 +22,28 @@
   {{- end }}
 {{- end }}
 {{- $title := (trim .title " ") | default "" }}
+{{- $hint := (trim .hint " ") | default "" }}
 {{- $icon := (trim .icon " ") | default "" }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}
 {{- $content := .content }}
             <div class="topbar-button {{ $class }}" data-content-empty="{{ $onempty }}" data-width-s="{{ $onwidths }}" data-width-m="{{ $onwidthm }}" data-width-l="{{ $onwidthl }}">
-{{- if $isDisabled }}
+{{- if $isDisabled -}}
               <span class="topbar-control">
-{{- else if $isButton }}
+{{- else if $isButton -}}
-              <button class="topbar-control"{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}">
+              <button class="topbar-control"{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $hint }}">
-{{- else }}
+{{- else -}}
-              <a class="topbar-control"{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}">
+              <a class="topbar-control"{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $hint }}">
 {{- end }}
-                <i class="{{ $icon }}"></i>
+{{- if and $icon }}<i class="{{ $icon }}"></i>{{ end }}
-{{- if $isDisabled }}
+{{- if and $icon $title }} {{ end }}
+{{- $title | safeHTML }}
+{{- if $isDisabled -}}
               </span>
-{{- else if $isButton }}
+{{- else if $isButton -}}
               </button>
-{{- else }}
+{{- else -}}
               </a>
 {{- end }}
 {{- if $content }}