Skip to content

Commit c049163

Browse files
McShelbyMcShelby
committed
clipboard: use button implementation for inline buttons - finally #1165 
1 parent f69a085 commit c049163

File tree

15 files changed

+58
-37
lines changed

15 files changed

+58
-37
lines changed

‎assets/css/theme-neon.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ body #R-homelinks li.active > :is(a, span) {
245245
}
246246

247247
body .badge,
248-
body .btn:not(.noborder),
248+
body .btn:not(.noborder):not(.inline-copy-to-clipboard-button),
249249
body .box:not(.cstyle.transparent) {
250250
box-shadow:
251251
0 0 1px rgba(255, 255, 255, 1),
@@ -255,8 +255,8 @@ body .box:not(.cstyle.transparent) {
255255
}
256256

257257
body .badge > .badge-content,
258-
body .btn.cstyle:not(.link):not(.action),
259-
body .btn.cstyle:not(.link):not(.action) > *,
258+
body .btn.cstyle:not(.link):not(.action):not(.inline),
259+
body .btn.cstyle:not(.link):not(.action):not(.inline) > *,
260260
body .box:not(.cstyle.transparent) > .box-label {
261261
text-shadow:
262262
0 0 1px rgba(255, 255, 255, 1),
@@ -267,7 +267,7 @@ body .box:not(.cstyle.transparent) > .box-label {
267267

268268
body .tab-panel-cstyle:not(.transparent),
269269
body .badge.cstyle:not(.transparent),
270-
body .btn.cstyle:not(.link):not(.action) {
270+
body .btn.cstyle:not(.link):not(.action):not(.inline) {
271271
--VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color);
272272
}
273273

‎assets/css/theme.css‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1385,33 +1385,31 @@ span.copy-to-clipboard {
13851385

13861386
code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after {
13871387
display: inline-block;
1388-
width: calc(1.333em + var(--bpx1) * 0.125em);
1388+
width: calc(1.375em - var(--bpx1) * 0.125em);
13891389
content: '';
13901390
}
13911391

1392-
.inline-copy-to-clipboard-button {
1393-
background-color: var(--INTERNAL-CODE-INLINE-BG-color);
1394-
border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
1395-
border-inline-start-style: solid;
1396-
border-inline-start-width: 1px;
1397-
color: var(--INTERNAL-CODE-INLINE-color);
1398-
cursor: pointer;
1399-
display: inline;
1392+
.inline-copy-to-clipboard-button.btn.cstyle {
14001393
font: initial;
14011394
font-size: 0.934375em;
1402-
margin-inline-start: calc(-1 * (1.333em + var(--bpx1) * 0.125em));
1395+
margin-inline-start: calc(-1 * (1.375em - var(--bpx1) * 0.125em));
14031396
position: relative;
14041397
z-index: 10;
14051398
}
1406-
.inline-copy-to-clipboard-button:hover {
1407-
background-color: var(--INTERNAL-CODE-INLINE-color);
1408-
color: var(--INTERNAL-CODE-INLINE-BG-color);
1399+
1400+
.inline-copy-to-clipboard-button.btn.cstyle > * {
1401+
border-start-start-radius: 0;
1402+
border-start-end-radius: 0.125em;
1403+
border-end-start-radius: 0;
1404+
border-end-end-radius: 0.125em;
1405+
border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
1406+
padding: 0;
14091407
}
14101408

1411-
.inline-copy-to-clipboard-button > i {
1409+
.inline-copy-to-clipboard-button.btn.cstyle > * > i {
14121410
font-size: 0.859625em;
1413-
padding-left: 0.333em;
1414-
padding-right: 0.333em;
1411+
line-height: 1.375em;
1412+
width: 1.375em;
14151413
}
14161414

14171415
.actionbar {

‎assets/js/theme.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -750,10 +750,12 @@ function initCodeClipboard() {
750750
actionbar.appendChild(wrapper);
751751
insertElement = actionbar;
752752
} else {
753-
// Simple button for inline buttons (unchanged)
754-
button.innerHTML = '<i class="far fa-copy"></i>';
755-
button.classList.add('inline-copy-to-clipboard-button');
756-
insertElement = button;
753+
// Wrap in btn structure for inline buttons
754+
button.innerHTML = '<i class="fa-fw far fa-copy"></i>';
755+
wrapper = document.createElement('span');
756+
wrapper.classList.add('btn', 'cstyle', 'inline-copy-to-clipboard-button', 'inline', 'notitle', 'interactive');
757+
wrapper.appendChild(button);
758+
insertElement = wrapper;
757759
}
758760
}
759761
if (inTable) {
@@ -791,16 +793,16 @@ function initCodeClipboard() {
791793
}
792794
}
793795

794-
var buttons = document.querySelectorAll('.block-copy-to-clipboard-button button, .inline-copy-to-clipboard-button');
796+
var buttons = document.querySelectorAll('.block-copy-to-clipboard-button button, .inline-copy-to-clipboard-button button');
795797
buttons.forEach(function (button) {
796798
button.addEventListener('click', function () {
797799
this.blur();
798800
if (!navigator.clipboard?.writeText) {
799801
showToast(window.T_Browser_unsupported_feature);
800802
return;
801803
}
802-
// For block buttons, get the actionbar's previous sibling; for inline, use trigger's previous sibling
803-
var codeElement = this.closest('.actionbar') ? this.closest('.actionbar').previousElementSibling : this.previousElementSibling;
804+
// For block buttons, get the actionbar's previous sibling; for inline, use wrapper's previous sibling
805+
var codeElement = this.closest('.actionbar') ? this.closest('.actionbar').previousElementSibling : this.parentElement.previousElementSibling;
804806
if (!codeElement) {
805807
return;
806808
}

‎docs/content/configuration/customization/taxonomy.en.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,6 @@ To display your custom taxonomy terms, add this to your page (usually in `layout
4949
| **page** | _&lt;empty&gt;_ | Mandatory reference to the page. |
5050
| **taxonomy** | _&lt;empty&gt;_ | The plural name of the taxonomy to display as used in your front matter. |
5151
| **class** | _&lt;empty&gt;_ | Additional CSS classes set on the outermost generated HTML element.<br><br>If set to `tags` you will get the visuals for displaying the _tags_ taxonomy, otherwise it will be a simple list of links as for the _categories_ taxonomy. |
52-
| **style** | `primary` | The style scheme used if **class** is `tags`.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`, `link`, `action` |
52+
| **style** | `primary` | The style scheme used if **class** is `tags`.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`, `link`, `action`, `inline` |
5353
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used if **class** is `tags`. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
5454
| **icon** | _&lt;empty&gt;_ | An optional [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the list. |

‎docs/content/introduction/releasenotes/8/3.en.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,6 @@ weight = -3
2929

3030
- {{% badge style="new" %}}New{{% /badge %}} The buttons in the topbar, for the heading anchors, copying code and the reset Mermaid zoom were visually improved.
3131

32+
Additionally there is a new style [`inline`](shortcodes/button#by-special-color), displaying items in the style of the code inline copy-to-clipboard buttons.
33+
3234
- {{% badge style="new" %}}New{{% /badge %}} The tooltips shown when copying code and links, and resetting the Mermaid zoom were revamped into toast that appear at the bottom of the page.

‎docs/content/shortcodes/attachments/index.en.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ While the examples are using shortcodes with named parameter you are free to als
5757

5858
| Name | Default | Notes |
5959
|-------------|-----------------|-------------|
60-
| **style** | `transparent` | The style scheme used for the box.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`, `link`, `action`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
60+
| **style** | `transparent` | The style scheme used for the box.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`, `link`, `action`, `inline`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
6161
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
6262
| **title** | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: `Attachments`<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
6363
| **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: `paperclip`<br><br>If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) |

‎docs/content/shortcodes/badge/_index.en.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ The `badge` shortcode displays colorful markers in your text with optional icons
6565

6666
| Name | Default | Notes |
6767
|-----------------------|-----------------|-------------|
68-
| **style** | `default` | The style scheme used for the badge.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`, `link`, `action`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
68+
| **style** | `default` | The style scheme used for the badge.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`, `link`, `action`, `inline`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
6969
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
7070
| **title** | see notes | Arbitrary text for the badge title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
7171
| **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
@@ -133,13 +133,15 @@ The `badge` shortcode displays colorful markers in your text with optional icons
133133
{{%/* badge style="code" icon="palette" title="Color" %}}Code{{% /badge */%}}
134134
{{%/* badge style="link" icon="palette" title="Color" %}}Link{{% /badge */%}}
135135
{{%/* badge style="action" icon="palette" title="Color" %}}Action{{% /badge */%}}
136+
{{%/* badge style="inline" icon="palette" title="Color" %}}Inline{{% /badge */%}}
136137
````
137138

138139
{{% badge style="default" icon="palette" title="Color" %}}Default{{% /badge %}}
139140
{{% badge style="transparent" icon="palette" title="Color" %}}Transparent{{% /badge %}}
140141
{{% badge style="code" icon="palette" title="Color" %}}Code{{% /badge %}}
141142
{{% badge style="link" icon="palette" title="Color" %}}Link{{% /badge %}}
142143
{{% badge style="action" icon="palette" title="Color" %}}Action{{% /badge %}}
144+
{{% badge style="inline" icon="palette" title="Color" %}}Inline{{% /badge %}}
143145

144146
### Variants
145147

‎docs/content/shortcodes/button/_index.en.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ The `button` shortcode displays a clickable button with adjustable color, title
4848
| **type** | see notes | The [button type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) if **href** is JavaScript. Otherwise the parameter is not used. If the parameter is not given it defaults to `button`. |
4949
| **borderless** | `false` | When `true`, no border will be shown around the button. |
5050
| **hint** | _&lt;empty&gt;_ | Tooltip for the button. |
51-
| **style** | `transparent` | The style scheme used for the button.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`, `link`, `action`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
51+
| **style** | `transparent` | The style scheme used for the button.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`, `link`, `action`, `inline`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
5252
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
5353
| **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
5454
| **iconposition** | `left` | Places the icon to the `left` or `right` of the title. |
@@ -117,37 +117,43 @@ The `button` shortcode displays a clickable button with adjustable color, title
117117
{{%/* button href="https://gohugo.io/" style="code" %}}Open Link{{% /button */%}}
118118
{{%/* button href="https://gohugo.io/" style="link" %}}Open Link{{% /button */%}}
119119
{{%/* button href="https://gohugo.io/" style="action" %}}Open Link{{% /button */%}}
120+
{{%/* button href="https://gohugo.io/" style="inline" %}}Open Link{{% /button */%}}
120121

121122
{{%/* button href="javascript:alert('Some JavaScript')" style="default" %}}Run JavaScript{{% /button */%}}
122123
{{%/* button href="javascript:alert('Some JavaScript')" style="transparent" %}}Run JavaScript{{% /button */%}}
123124
{{%/* button href="javascript:alert('Some JavaScript')" style="code" %}}Run JavaScript{{% /button */%}}
124125
{{%/* button href="javascript:alert('Some JavaScript')" style="link" %}}Run JavaScript{{% /button */%}}
125126
{{%/* button href="javascript:alert('Some JavaScript')" style="action" %}}Run JavaScript{{% /button */%}}
127+
{{%/* button href="javascript:alert('Some JavaScript')" style="inline" %}}Run JavaScript{{% /button */%}}
126128

127129
{{%/* button style="default" %}}Fake Button{{% /button */%}}
128130
{{%/* button style="transparent" %}}Fake Button{{% /button */%}}
129131
{{%/* button style="code" %}}Fake Button{{% /button */%}}
130132
{{%/* button style="link" %}}Fake Button{{% /button */%}}
131133
{{%/* button style="action" %}}Fake Button{{% /button */%}}
134+
{{%/* button style="inline" %}}Fake Button{{% /button */%}}
132135
````
133136

134137
{{% button href="https://gohugo.io/" style="default" %}}Open Link{{% /button %}}
135138
{{% button href="https://gohugo.io/" style="transparent" %}}Open Link{{% /button %}}
136139
{{% button href="https://gohugo.io/" style="code" %}}Open Link{{% /button %}}
137140
{{% button href="https://gohugo.io/" style="link" %}}Open Link{{% /button %}}
138141
{{% button href="https://gohugo.io/" style="action" %}}Open Link{{% /button %}}
142+
{{% button href="https://gohugo.io/" style="inline" %}}Open Link{{% /button %}}
139143

140144
{{% button href="javascript:alert('Some JavaScript')" style="default" %}}Run JavaScript{{% /button %}}
141145
{{% button href="javascript:alert('Some JavaScript')" style="transparent" %}}Run JavaScript{{% /button %}}
142146
{{% button href="javascript:alert('Some JavaScript')" style="code" %}}Run JavaScript{{% /button %}}
143147
{{% button href="javascript:alert('Some JavaScript')" style="link" %}}Run JavaScript{{% /button %}}
144148
{{% button href="javascript:alert('Some JavaScript')" style="action" %}}Run JavaScript{{% /button %}}
149+
{{% button href="javascript:alert('Some JavaScript')" style="inline" %}}Run JavaScript{{% /button %}}
145150

146151
{{% button style="default" %}}Fake Button{{% /button %}}
147152
{{% button style="transparent" %}}Fake Button{{% /button %}}
148153
{{% button style="code" %}}Fake Button{{% /button %}}
149154
{{% button style="link" %}}Fake Button{{% /button %}}
150155
{{% button style="action" %}}Fake Button{{% /button %}}
156+
{{% button style="inline" %}}Fake Button{{% /button %}}
151157

152158
### Icon
153159

‎docs/content/shortcodes/icon/_index.en.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome
6565
| Name | Position | Default | Notes |
6666
|-----------------------|----------|-----------------|-------------|
6767
| **icon** | 1 | _&lt;empty&gt;_ | [Font Awesome icon name](#finding-an-icon) to be displayed. It will be displayed in the text color of its according context. |
68-
| **style** | 2 | _&lt;empty&gt;_ | The style scheme used for the icon.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`, `link`, `action`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
68+
| **style** | 2 | _&lt;empty&gt;_ | The style scheme used for the icon.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`, `link`, `action`, `inline`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
6969
| **color** | | _&lt;empty&gt;_ | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color<br><br> |
7070

7171
### Finding an icon
@@ -184,10 +184,12 @@ To use these native HTML elements in your Markdown, add this in your `hugo.toml`
184184
{{%/* icon style="code" icon="palette" */%}}
185185
{{%/* icon style="link" icon="palette" */%}}
186186
{{%/* icon style="action" icon="palette" */%}}
187+
{{%/* icon style="inline" icon="palette" */%}}
187188
````
188189

189190
{{% icon style="default" icon="palette" %}}
190191
{{% icon style="transparent" icon="palette" %}}
191192
{{% icon style="code" icon="palette" %}}
192193
{{% icon style="link" icon="palette" %}}
193194
{{% icon style="action" icon="palette" %}}
195+
{{% icon style="inline" icon="palette" %}}

0 commit comments

Comments
 (0)