Improve copy syntax container

unisonweb · Jan 8, 2025 · 288136e · 288136e
1 parent cb2f5e5
commit 288136e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 38 deletions.
diff --git a/src/Code/Definition/Doc.elm b/src/Code/Definition/Doc.elm
@@ -390,25 +390,30 @@ toString sep doc =
             ""
 
 
+viewCopySyntaxButton : String -> Html msg
+viewCopySyntaxButton toCopy =
+    CopyOnClick.view
+        toCopy
+        (div [ class "button small outlined content-icon" ]
+            [ Icon.view Icon.clipboard ]
+        )
+        (Icon.view Icon.checkmark)
+
+
 view : SyntaxConfig msg -> (FoldId -> msg) -> DocFoldToggles -> Doc -> Html msg
 view syntaxConfig toggleFoldMsg docFoldToggles document =
     let
         viewSignature =
             Source.viewTermSignature (SourceViewConfig.rich syntaxConfig)
 
         viewCopyable toCopy content =
-            div []
+            div [ class "copyable-source" ]
                 [ content
-                , CopyOnClick.view
-                    toCopy
-                    (div [ class "button small outlined content-icon" ]
-                        [ Icon.view Icon.clipboard ]
-                    )
-                    (Icon.view Icon.checkmark)
+                , viewCopySyntaxButton toCopy
                 ]
 
-        viewCopyableSyntax syntax =
-            viewCopyable (Syntax.toString syntax) (viewSyntax syntax)
+        viewCopyableSyntax syntax content =
+            viewCopyable (Syntax.toString syntax) content
 
         viewSyntax =
             Syntax.view syntaxConfig
@@ -644,7 +649,9 @@ view syntaxConfig toggleFoldMsg docFoldToggles document =
                                                 [ UI.codeBlock [] (viewSyntax summary) ]
 
                                             else
-                                                [ UI.codeBlock [] (viewCopyableSyntax details) ]
+                                                [ UI.codeBlock [] (viewSyntax details)
+                                                , viewCopySyntaxButton (Syntax.toString details)
+                                                ]
                                     in
                                     case source of
                                         Builtin summary ->
@@ -679,9 +686,11 @@ view syntaxConfig toggleFoldMsg docFoldToggles document =
                                 ]
 
                         ExampleBlock syntax ->
-                            div [ class "source rich example" ]
-                                [ UI.codeBlock [] (viewCopyableSyntax syntax)
-                                ]
+                            viewCopyableSyntax syntax
+                                (div [ class "source rich example" ]
+                                    [ UI.codeBlock [] (viewSyntax syntax)
+                                    ]
+                                )
 
                         Link syntax ->
                             UI.inlineCode [ class "rich source" ]
@@ -705,16 +714,18 @@ view syntaxConfig toggleFoldMsg docFoldToggles document =
                                 (viewSignature signature)
 
                         Eval source result ->
-                            div
-                                [ class "eval" ]
-                                [ div [ class "source rich" ]
-                                    [ UI.codeBlock [] (viewCopyableSyntax source)
-                                    ]
-                                , div [ class "result" ] [ div [ class "result-indicator" ] [ Icon.view Icon.arrowDown ] ]
-                                , div [ class "source rich" ]
-                                    [ UI.codeBlock [] (viewSyntax result)
+                            viewCopyableSyntax source
+                                (div
+                                    [ class "eval" ]
+                                    [ div [ class "source rich" ]
+                                        [ UI.codeBlock [] (viewSyntax source)
+                                        ]
+                                    , div [ class "result" ] [ div [ class "result-indicator" ] [ Icon.view Icon.arrowDown ] ]
+                                    , div [ class "source rich" ]
+                                        [ UI.codeBlock [] (viewSyntax result)
+                                        ]
                                     ]
-                                ]
+                                )
 
                         EvalInline source result ->
                             span [ class "source rich eval-inline" ]
@@ -727,9 +738,11 @@ view syntaxConfig toggleFoldMsg docFoldToggles document =
                                 ]
 
                         Embed syntax ->
-                            div [ class "source rich embed" ]
-                                [ UI.codeBlock [] (viewCopyableSyntax syntax)
-                                ]
+                            viewCopyableSyntax syntax
+                                (div [ class "source rich embed" ]
+                                    [ UI.codeBlock [] (viewSyntax syntax)
+                                    ]
+                                )
 
                         EmbedInline syntax ->
                             span [ class "source rich embed-inline" ]

diff --git a/src/css/code/definition-doc.css b/src/css/code/definition-doc.css
@@ -51,23 +51,19 @@
   white-space: pre-line;
 }
 
-.definition-doc .source {
-  position: relative;
-  max-width: var(--c-width_doc_source);
-}
-
-.definition-doc .source.code code,
-.definition-doc .sources .source code,
-.definition-doc .folded-sources .source code,
-.definition-doc .source.example code,
-.definition-doc .eval .source code,
-.definition-doc .source.signatures .signature code {
+.definition-doc .source.code,
+.definition-doc .sources .source,
+.definition-doc .folded-sources .source,
+.definition-doc .source.example,
+.definition-doc .eval .source,
+.definition-doc .source.signatures .signature {
   padding: 0.5rem 0.75rem;
   background: var(--color-doc-source-bg);
   border-radius: var(--border-radius-base);
   scrollbar-width: auto;
   scrollbar-color: var(--u-color_scrollbar) var(--u-color_scrollbar-track);
   overflow: auto;
+  max-width: var(--c-width_doc_source);
 }
 
 /* We don't want margin on .eval .source since its 2 very close source blocks */
@@ -120,6 +116,10 @@
   flex: 1;
 }
 
+.definition-doc .copyable-source {
+  position: relative;
+}
+
 .definition-doc .copy-on-click {
   position: absolute;
   top: 0.75rem;
@@ -129,11 +129,11 @@
   display: none;
 }
 
-.definition-doc .source:hover .copy-on-click {
+.definition-doc .copyable-source:hover .copy-on-click {
   display: block;
 }
 
-.definition-doc .source .copy-on-click .copy-on-click_success {
+.definition-doc .copy-on-click .copy-on-click_success {
   position: absolute;
   top: 0;
   right: 0;
@@ -403,6 +403,7 @@
   margin-bottom: 1rem;
   display: flex;
   flex-direction: row;
+  position: relative;
 }
 
 .definition-doc .folded .folded-content {