improve syntax hovers and doc underlines

unisonweb · Jul 25, 2024 · 9014d66 · 9014d66
1 parent 54f4941
commit 9014d66
Show file tree

Hide file tree

Showing 6 changed files with 689 additions and 52 deletions.
diff --git a/src/Code/Definition/Doc.elm b/src/Code/Definition/Doc.elm
@@ -465,10 +465,12 @@ view linkedCfg toggleFoldMsg docFoldToggles document =
                     hr [ class "divider" ] []
 
                 Tooltip triggerContent tooltipContent ->
-                    Tooltip.tooltip
-                        (Tooltip.rich (viewAtCurrentSectionLevel tooltipContent))
-                        |> Tooltip.withArrow Tooltip.Start
-                        |> Tooltip.view (viewAtCurrentSectionLevel triggerContent)
+                    span [ class "doc-tooltip" ]
+                        [ Tooltip.tooltip
+                            (Tooltip.rich (viewAtCurrentSectionLevel tooltipContent))
+                            |> Tooltip.withArrow Tooltip.Start
+                            |> Tooltip.view (viewAtCurrentSectionLevel triggerContent)
+                        ]
 
                 Aside d ->
                     span [ class "doc_aside-anchor" ]

diff --git a/src/Code/Syntax/SyntaxSegment.elm b/src/Code/Syntax/SyntaxSegment.elm
@@ -259,62 +259,86 @@ view linked ((SyntaxSegment sType sText) as segment) =
         className =
             syntaxTypeToClassName sType
 
-        content =
+        content view_ =
             if String.contains "->" sText then
-                span [ class "arrow" ] [ text sText ]
+                view_ (span [ class "arrow" ] [ text sText ])
 
             else if isFQN then
-                viewFQN (FQN.fromString sText)
+                view_ (viewFQN (FQN.fromString sText))
+
+            else if sText /= " " && (String.startsWith " " sText || String.endsWith " " sText) then
+                -- If the text is not the empty string and is either prefixed
+                -- or suffixed with a space, we want that to not be part of a
+                -- hover background, so it gets separate to another dom node.
+                -- This results in cleaner looking hovers and tooltip
+                -- positionings
+                if String.startsWith " " sText && String.endsWith " " sText then
+                    span [] [ text " ", view_ (text (String.trim sText)), text " " ]
+
+                else if String.startsWith " " sText then
+                    span [] [ text " ", view_ (text (String.trim sText)) ]
+
+                else
+                    span [] [ view_ (text (String.trim sText)), text " " ]
 
             else
-                text sText
+                view_ (text sText)
     in
     case ( linked, ref ) of
         ( Linked click, Just r ) ->
-            Click.view
-                [ class className ]
-                [ content ]
-                (click r)
+            content
+                (\c ->
+                    Click.view
+                        [ class className ]
+                        [ c ]
+                        (click r)
+                )
 
         ( LinkedWithTooltip l, Just r ) ->
-            let
-                content_ =
-                    case l.tooltip.toTooltip r of
-                        Just t ->
-                            Tooltip.view content t
-
-                        Nothing ->
-                            content
-            in
-            Click.view
-                [ class className
-                , onMouseEnter (l.tooltip.toHoverStart r)
-                , onMouseLeave (l.tooltip.toHoverEnd r)
-                ]
-                [ content_ ]
-                (l.toClick r)
-
-        _ ->
-            case helpForSegment segment of
-                Just help ->
+            content
+                (\c ->
                     let
-                        tooltip =
-                            Tooltip.rich help
-                                |> Tooltip.tooltip
-                                |> Tooltip.withArrow Tooltip.Start
-                                |> Tooltip.withPosition Tooltip.Below
+                        content_ =
+                            case l.tooltip.toTooltip r of
+                                Just t ->
+                                    Tooltip.view c t
+
+                                Nothing ->
+                                    c
                     in
-                    Tooltip.view
-                        (span
-                            [ class "syntax-help", class className ]
-                            [ content ]
-                        )
-                        tooltip
+                    Click.view
+                        [ class className
+                        , onMouseEnter (l.tooltip.toHoverStart r)
+                        , onMouseLeave (l.tooltip.toHoverEnd r)
+                        ]
+                        [ content_ ]
+                        (l.toClick r)
+                )
 
-                _ ->
-                    span
-                        [ class className ]
-                        [ content ]
+        _ ->
+            content
+                (\c ->
+                    case helpForSegment segment of
+                        Just help ->
+                            let
+                                tooltip =
+                                    Tooltip.rich help
+                                        |> Tooltip.tooltip
+                                        |> Tooltip.withArrow Tooltip.Start
+                                        |> Tooltip.withPosition Tooltip.Below
+                            in
+                            Tooltip.view
+                                (span
+                                    [ class "syntax-help", class className ]
+                                    [ c ]
+                                )
+                                tooltip
+
+                        _ ->
+                            span
+                                [ class className ]
+                                [ c ]
+                )
 
 
 helpForSegment : SyntaxSegment -> Maybe (Html msg)

diff --git a/src/css/code/definition-doc.css b/src/css/code/definition-doc.css
@@ -240,7 +240,7 @@
   margin: 1.5rem 0;
 }
 
-.definition-doc :not(code) .tooltip-trigger {
+.definition-doc .doc-tooltip .tooltip-trigger {
   text-decoration: underline dotted var(--color-doc-subtle-text);
   text-underline-offset: 2px;
   /* Other tooltip styling is handled by elements/tooltip */

diff --git a/src/css/code/syntax.css b/src/css/code/syntax.css
@@ -18,8 +18,8 @@ code {
 
 code a {
   display: inline-block;
-  padding: 0 0.25rem;
-  margin: 0 -0.25rem;
+  padding: 0 0.125rem;
+  margin: 0 -0.125rem;
   border-radius: var(--border-radius-base);
   line-height: 1.4;
 }
@@ -37,8 +37,19 @@ code a:active .tooltip-trigger.tooltip_show .tooltip {
   display: none;
 }
 
+.syntax-help:hover {
+  color: var(--color-orange-1) !important;
+  cursor: help;
+  display: inline-block;
+  padding: 0 0.125rem;
+  margin: 0 -0.125rem;
+  border-radius: var(--border-radius-base);
+  line-height: 1.4;
+  background: var(--color-orange-5);
+}
+
 .tooltip-trigger:has(> .syntax-help) .tooltip {
-  margin-left: -0.5rem;
+  margin-left: -1rem;
 }
 
 .tooltip-trigger:has(> .syntax-help) .tooltip code {