diff --git a/content/examples/shortcodes/code-tabs/en.md b/content/examples/shortcodes/code-tabs/en.md index 337d759fa..409ece1f4 100644 --- a/content/examples/shortcodes/code-tabs/en.md +++ b/content/examples/shortcodes/code-tabs/en.md @@ -29,7 +29,7 @@ languages: name: Norwegian {{}} -{{}} +{{}} languages: - tag: en name: English @@ -68,7 +68,7 @@ languages: name: Norwegian {{< /code-tab >}} -{{< code-tab name="data.yaml" language="yaml" linenos="true" area="bottom-left" >}} +{{< code-tab name="data.yaml" language="yaml" linenos="true" area="bottom-left" fileIcon="false" >}} languages: - tag: en name: English @@ -125,6 +125,9 @@ codeToCopy Make sure it's base64 encoded when you pass something to this attribute. You can also set it to false to hide the copy button. +fileIcon +: optional - Showing file icon. Can be true or false. By default the value is true. + ## Examples of usage of different area's ### 2 tabs in top-left (1 column) diff --git a/hugo/assets/scss/components/tabs-nav.scss b/hugo/assets/scss/components/tabs-nav.scss index 5f74cb421..c36dc18d4 100644 --- a/hugo/assets/scss/components/tabs-nav.scss +++ b/hugo/assets/scss/components/tabs-nav.scss @@ -8,17 +8,16 @@ border-bottom: 1px solid var(--tabs-nav-border, transparentize($c-blue--darker, .9)); display: flex; - overflow: hidden; &__tabs { display: flex; - overflow-x: auto; padding: 0 $p-gutter; scroll-behavior: smooth; scrollbar-width: none; } &__item { + display: flex; flex: 0 0 auto; padding-right: 1.75rem; @@ -27,10 +26,24 @@ } } + &__copy { + height: 36px; + position: relative; + width: 1rem; + + &:focus, + &:hover { + .icon { + fill: $c-blue--light; + } + } + } + &__tab { background-color: var(--tab-background, $c-white); color: var(--tab-color, $c-blue--darker); - display: block; + display: flex; + gap: 4px; height: var(--tab-height, 52px); line-height: var(--tab-height, 52px); position: relative; @@ -62,7 +75,7 @@ background-color: var(--tab-background-active, $c-white); color: var(--tab-color-active, $c-blue--darker); font-weight: $weight-bold; - pointer-events: none; + pointer-events: auto; &::after { background-color: var(--tab-border-color-active, $c-yellow); @@ -123,6 +136,38 @@ width: 24px; } + &__message { + @include style-text-small; + + background-color: $c-grey-blue; + border-radius: $b-radius; + color: $c-blue--darker; + display: block; + left: -10px; + margin-right: 0.75rem; + padding: 4px 8px; + position: absolute; + top: 48px; + width: fit-content; + z-index: 1; + + &::before { + border-color: transparent transparent $c-grey-blue; + border-style: solid; + border-width: 0 10px 10px; + bottom: 100%; + content: ''; + height: 0; + left: 8px; + position: absolute; + width: 0; + } + + &.is-hidden { + display: none; + } + } + &--prev { margin-left: #{-$p-gutter}; } diff --git a/hugo/assets/svg/ui/file.svg b/hugo/assets/svg/ui/file.svg new file mode 100644 index 000000000..152ea29cc --- /dev/null +++ b/hugo/assets/svg/ui/file.svg @@ -0,0 +1,3 @@ + + + diff --git a/hugo/assets/ts/widgets/copy.ts b/hugo/assets/ts/widgets/copy.ts index e37b02c02..e980751c2 100644 --- a/hugo/assets/ts/widgets/copy.ts +++ b/hugo/assets/ts/widgets/copy.ts @@ -40,13 +40,13 @@ export class Copy extends BaseWidget { navigator.clipboard.writeText(content).then(() => { requestAnimationFrame(() => { - messageElement.classList.remove('is-hidden'); - messageElement.setAttribute('aria-hidden', 'false'); + messageElement?.classList.remove('is-hidden'); + messageElement?.setAttribute('aria-hidden', 'false'); this.copyButton.classList.add('is-success'); setTimeout(() => { - messageElement.classList.add('is-hidden'); - messageElement.setAttribute('aria-hidden', 'true'); + messageElement?.classList.add('is-hidden'); + messageElement?.setAttribute('aria-hidden', 'true'); this.copyButton.classList.remove('is-success'); }, 1000); }); diff --git a/hugo/content/en/examples/shortcodes/code-tabs/index.md b/hugo/content/en/examples/shortcodes/code-tabs/index.md index 337d759fa..409ece1f4 100644 --- a/hugo/content/en/examples/shortcodes/code-tabs/index.md +++ b/hugo/content/en/examples/shortcodes/code-tabs/index.md @@ -29,7 +29,7 @@ languages: name: Norwegian {{}} -{{}} +{{}} languages: - tag: en name: English @@ -68,7 +68,7 @@ languages: name: Norwegian {{< /code-tab >}} -{{< code-tab name="data.yaml" language="yaml" linenos="true" area="bottom-left" >}} +{{< code-tab name="data.yaml" language="yaml" linenos="true" area="bottom-left" fileIcon="false" >}} languages: - tag: en name: English @@ -125,6 +125,9 @@ codeToCopy Make sure it's base64 encoded when you pass something to this attribute. You can also set it to false to hide the copy button. +fileIcon +: optional - Showing file icon. Can be true or false. By default the value is true. + ## Examples of usage of different area's ### 2 tabs in top-left (1 column) diff --git a/hugo/i18n/en.toml b/hugo/i18n/en.toml index 0fb18c8d7..52e94a7fb 100644 --- a/hugo/i18n/en.toml +++ b/hugo/i18n/en.toml @@ -129,6 +129,8 @@ other = "Go to the website" # Copy button [copy_title] other = "Copy code" +[copy_filename] +other = "Copy filename" [copy_message] other = "Copied!" diff --git a/hugo/layouts/partials/tabs.html b/hugo/layouts/partials/tabs.html index 28350a8a6..2f341ba70 100644 --- a/hugo/layouts/partials/tabs.html +++ b/hugo/layouts/partials/tabs.html @@ -20,7 +20,18 @@ data-tab-item="{{ .name | urlize }}" data-tab-group="{{ $groupId }}" class="tabs-nav__tab{{ if ne .type "default" }} tabs-nav__tab--{{ .type}}{{ end}}{{ cond (eq $idx 0) " is-active" ""}}" - >{{ .name }} + {{- if and (eq .type "default") (eq .fileIcon true) -}} data-copy{{- end -}} + > + {{- if and (eq .type "default") (eq .fileIcon true) -}} + + {{- partial "icon.html" (dict "class" "" "icon" "file") -}} + + + {{- end -}} + {{ .name }} + {{- end -}} @@ -37,7 +48,18 @@ data-tab-item="{{ .name | urlize }}" data-tab-group="{{ $groupId }}" class="tabs-nav__tab{{ if ne .type "default" }} tabs-nav__tab--{{ .type}}{{ end}}" - >{{ .name }} + {{- if and (eq .type "default") (eq .fileIcon true) -}} data-copy{{- end -}} + > + {{- if and (eq .type "default") (eq .fileIcon true) -}} + + {{- end -}} + {{ .name }} + {{- end -}} {{- end -}} diff --git a/hugo/layouts/shortcodes/code-tab.html b/hugo/layouts/shortcodes/code-tab.html index ec8770441..d7732f5e8 100644 --- a/hugo/layouts/shortcodes/code-tab.html +++ b/hugo/layouts/shortcodes/code-tab.html @@ -4,6 +4,7 @@ {{ $language := .Get "language" | default "" }} {{ $codeToCopy := .Get "codetocopy" }} {{ $type := .Get "type" | default "default" }} + {{ $fileIcon := .Get "fileIcon" | default true }} {{ $lineos := .Get "linenos" | default "false" }} {{ $groupId := .Get "groupId" | default "default" }} {{ $arrayName := printf "tabs-%s" $area }} @@ -19,6 +20,7 @@ "area" $area "language" $language "type" $type + "fileIcon" $fileIcon "groupId" $groupId "content" $content ) }} diff --git a/hugo/static/img/ui.svg b/hugo/static/img/ui.svg index 2514161e7..26c21a765 100644 --- a/hugo/static/img/ui.svg +++ b/hugo/static/img/ui.svg @@ -40,6 +40,8 @@ + + @@ -70,11 +72,9 @@ - - - + @@ -90,4 +90,4 @@ - + \ No newline at end of file