hugo: added select-and-copy filenames in code tabs

- Added small file icon (select-and-copy) prefix for filenames in code-tabs - Added select-and-copy button for copying filename - code-tab - Added file icon to ui.svg - Updated code-tabs shortcode example page Fixes: cue-lang/cue#2935 Closes #469 as merged as of commit 90b21c7e. Preview-Path: /examples/shortcodes/code-tabs/ Signed-off-by: juanstelling <[email protected]> Change-Id: Ib9546da4f36c7ea8eec3fd8ba62dde852f1ee6b6 Dispatch-Trailer: {"type":"trybot","CL":1200531,"patchset":2,"ref":"refs/changes/31/1200531/2","targetBranch":"master"}
cue-lang · Sep 3, 2024 · d17d82d · d17d82d
1 parent 6ccc4f0
commit d17d82d
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 18 deletions.
diff --git a/content/examples/shortcodes/code-tabs/en.md b/content/examples/shortcodes/code-tabs/en.md
@@ -29,7 +29,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
@@ -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
@@ -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
diff --git 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
@@ -29,7 +29,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
@@ -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
@@ -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
@@ -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 }}</button>
+                {{- if and (eq .type "default") (eq .fileIcon true) -}} data-copy{{- end -}}
+            >
+                {{- if and (eq .type "default") (eq .fileIcon true) -}}
+                    <span title="{{ T "copy_filename" }}" class="tabs-nav__copy"  data-copy-button data-copy-type="text" data-copy-value="{{ .name }}">
+                        {{- partial "icon.html" (dict "class" "" "icon" "file") -}}
+                        <span class="tabs-nav__message is-hidden" data-copy-message aria-hidden="true">
+                            {{ T "copy_message" }}
+                        </span>
+                    </span>
+                {{- end -}}
+                {{ .name }}
+            </button>
         </li>
     {{- end -}}
 </ul>
@@ -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 }}</div>
+                {{- if and (eq .type "default") (eq .fileIcon true) -}} data-copy{{- end -}}
+            >
+                {{- if and (eq .type "default") (eq .fileIcon true) -}}
+                    <button title="{{ T "copy_filename" }}" class="tabs-nav__copy" data-copy-button data-copy-type="text" data-copy-value="{{ .name }}">
+                        {{- partial "icon.html" (dict "class" "" "icon" "file") -}}
+                        <span class="tabs-nav__message is-hidden" data-copy-message aria-hidden="true">
+                            {{ T "copy_message" }}
+                        </span>
+                    </button>
+                {{- end -}}
+                {{ .name }}
+            </div>
         </div>
     {{- end -}}
 {{- end -}}

diff --git 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