Improve tooltips and show fly out menu #203
Conversation
| Workspace.ChangePerspectiveToNamespace fqn -> | ||
| fqn | ||
| |> Perspective.toNamespacePerspective model.env.perspective | ||
| |> replacePerspective model |
There was a problem hiding this comment.
Supporting changing the perspective from things like the workspace.
| Tooltip.tooltip (viewAtCurrentSectionLevel triggerContent) (viewAtCurrentSectionLevel tooltipContent) |> Tooltip.withArrow Tooltip.TopLeft |> Tooltip.view | ||
| Tooltip.tooltip | ||
| (viewAtCurrentSectionLevel triggerContent) | ||
| (Tooltip.Rich (viewAtCurrentSectionLevel tooltipContent)) |
There was a problem hiding this comment.
Tooltips has a very specific content setting now; Text, Rich, or Menu.
| @@ -585,7 +594,7 @@ view refToMsg toggleFoldMsg docFoldToggles document = | |||
| span [ class "source rich embed-inline" ] [ UI.inlineCode [] (viewSyntax syntax) ] | |||
|
|
|||
| Join docs -> | |||
| span [] (List.map viewAtCurrentSectionLevel (mergeWords docs)) | |||
| span [ class "join" ] (List.map viewAtCurrentSectionLevel (mergeWords docs)) | |||
There was a problem hiding this comment.
Helped with debugging docs.
| viewAtCurrentSectionLevel d | ||
|
|
||
| ds -> | ||
| span [ class "span" ] (List.map viewAtCurrentSectionLevel (mergeWords ds)) |
There was a problem hiding this comment.
Sometimes there's just a span around a single element and it's not really doing much. In the case of tooltips there was a span around a section and it was making styling that very specific case annoying. (Section has top and bottom margin which shouldn't be visible in tooltips).
|
|
||
| else | ||
| "latest" :: NEL.toList (FQN.segments fqn) | ||
|
|
||
| ByNamespace (Absolute hash) fqn -> | ||
| if includeNamespacesSuffix then | ||
| [ Hash.toUrlString hash, "namespaces" ] ++ NEL.toList (FQN.segments fqn) ++ [ "-" ] | ||
| [ Hash.toUrlString hash, "namespaces" ] ++ NEL.toList (FQN.segments fqn) ++ [ namespaceSuffix ] |
There was a problem hiding this comment.
These were just straight up bugs around the namespace suffix in the url. It was still "-" and it was even placed wrong the in the path...
| buttonIcon : msg -> I.Icon msg -> Button msg | ||
| buttonIcon msg icon_ = | ||
| icon : msg -> I.Icon msg -> Button msg | ||
| icon msg icon_ = |
| [] | ||
| [ path [ fill "currentColor", d "M7.47142 1.74148C7.47142 1.48259 7.26155 1.27273 7.00267 1.27273C6.74378 1.27273 6.53392 1.48259 6.53392 1.74148L6.53392 7.67486C6.53392 7.89758 6.26463 8.00912 6.10714 7.85163L4.16035 5.90484C3.97947 5.72396 3.68592 5.72492 3.50623 5.90697C3.3282 6.08735 3.32915 6.37762 3.50836 6.55683L6.64951 9.69798C6.84462 9.89309 7.1609 9.89326 7.35622 9.69837L10.4967 6.5649C10.68 6.38198 10.6792 6.08473 10.4949 5.90279C10.3122 5.72244 10.0181 5.72362 9.83691 5.90543L7.89847 7.85C7.7411 8.00788 7.47142 7.89642 7.47142 7.67351L7.47142 1.74148Z" ] [] | ||
| , rect [ fill "currentColor", Attrs.x "3", y "11", width "8", height "1", rx "0.5" ] [] | ||
| ] |
There was a problem hiding this comment.
Bunch of new icons, only intoFolder is used right now, but the others are coming soon.
| = Above | ||
| | Below | ||
| | LeftOf | ||
| | RightOf |
There was a problem hiding this comment.
Separated arrow and position for a somewhat cleaner API.
| div [ class "tooltip", class (arrowToClass arrow) ] [ content ] | ||
| -- The tooltip includes a small bridge (made with padding) above | ||
| -- the bubble to allow the user to hover into the tooltip and click | ||
| -- links etc. |
There was a problem hiding this comment.
This "bridge" work fixed a bug where people couldn't click links inside tooltips; especially exercised in docs.
| | OpenReference Reference Reference | ||
| | UpdateZoom Reference Zoom | ||
| | ToggleDocFold Reference Doc.FoldId | ||
| | ChangePerspectiveToNamespace FQN |
There was a problem hiding this comment.
Since I was needing to add a handler for changing perspective, I decided to refactor this to be a Msg from WorkspaceItem instead of its view function taking in 5 callbacks.
| @@ -174,106 +173,6 @@ | |||
| opacity: 1; | |||
| } | |||
|
|
|||
| /* -- Codebase Tree -------------------------------------------------------- */ | |||
|
|
|||
| .codebase-tree .namespace-tree { | |||
Add a menu to Tooltip that shows on hover (likely later to be refactored into an ActionMenu instead) and use it a menu to change the current perspective to an enclosing namespace from an open definition.
Overview
Add a menu to Tooltip that shows on hover (likely later to be refactored
into an ActionMenu instead) and use it a menu to change the current
perspective to an enclosing namespace from an open definition.
Interesting/controversial decisions
As I finished this I realized a separate
ActionMenucomponent would be better than using a tooltip.It should behave more like a dropdown that is triggered on click. I decided to tackle that later since realizing this also revealed a UX issue with the whole "info line" off a definition (the title of a row + the items like hash, other names and the namespace) in that it's not clear without trying to hover or click which interaction is supposed to be used.
We'll have to revisit that shortly.