Merge pull request #203 from unisonweb/flyout-menu

Improve tooltips and show fly out menu
unisonweb · Aug 20, 2021 · 55d38b3 · 55d38b3
2 parents 08d1616 + 4faa0dc
commit 55d38b3
Show file tree

Hide file tree

Showing 16 changed files with 560 additions and 360 deletions.
diff --git a/src/App.elm b/src/App.elm
@@ -120,19 +120,7 @@ update msg ({ env } as model) =
             ( { model | route = Route.fromUrl env.basePath url }, Cmd.none )
 
         ChangePerspective perspective ->
-            let
-                newEnv =
-                    { env | perspective = perspective }
-
-                ( codebaseTree, codebaseTreeCmd ) =
-                    CodebaseTree.init newEnv
-
-                changeRouteCmd =
-                    Route.replacePerspective model.navKey (Perspective.toParams perspective) model.route
-            in
-            ( { model | env = newEnv, codebaseTree = codebaseTree }
-            , Cmd.batch [ Cmd.map CodebaseTreeMsg codebaseTreeCmd, changeRouteCmd ]
-            )
+            replacePerspective model perspective
 
         Keydown event ->
             keydown model event
@@ -228,6 +216,23 @@ openDefinition model ref =
     ( model3, Cmd.batch [ cmd, Cmd.map WorkspaceMsg wCmd ] )
 
 
+replacePerspective : Model -> Perspective -> ( Model, Cmd Msg )
+replacePerspective ({ env } as model) perspective =
+    let
+        newEnv =
+            { env | perspective = perspective }
+
+        ( codebaseTree, codebaseTreeCmd ) =
+            CodebaseTree.init newEnv
+
+        changeRouteCmd =
+            Route.replacePerspective model.navKey (Perspective.toParams perspective) model.route
+    in
+    ( { model | env = newEnv, codebaseTree = codebaseTree }
+    , Cmd.batch [ Cmd.map CodebaseTreeMsg codebaseTreeCmd, changeRouteCmd ]
+    )
+
+
 handleWorkspaceOutMsg : Model -> Workspace.OutMsg -> ( Model, Cmd Msg )
 handleWorkspaceOutMsg model out =
     case out of
@@ -243,6 +248,11 @@ handleWorkspaceOutMsg model out =
         Workspace.Emptied ->
             ( model, Route.navigateToCurrentPerspective model.navKey model.route )
 
+        Workspace.ChangePerspectiveToNamespace fqn ->
+            fqn
+                |> Perspective.toNamespacePerspective model.env.perspective
+                |> replacePerspective model
+
 
 keydown : Model -> KeyboardEvent -> ( Model, Cmd Msg )
 keydown model keyboardEvent =
@@ -370,9 +380,9 @@ viewPerspective env =
 
                 back =
                     Tooltip.tooltip
-                        (Button.buttonIcon (ChangePerspective (Codebase codebaseHash)) Icon.arrowLeftUp |> Button.small |> Button.view)
-                        (text ("You're currently viewing a subset of " ++ context ++ " (" ++ fqnText ++ "), click to view everything."))
-                        |> Tooltip.withArrow Tooltip.TopRight
+                        (Button.icon (ChangePerspective (Codebase codebaseHash)) Icon.arrowLeftUp |> Button.small |> Button.view)
+                        (Tooltip.Text ("You're currently viewing a subset of " ++ context ++ " (" ++ fqnText ++ "), click to view everything."))
+                        |> Tooltip.withArrow Tooltip.End
                         |> Tooltip.view
             in
             header

diff --git a/src/Definition/Doc.elm b/src/Definition/Doc.elm
@@ -375,7 +375,11 @@ view refToMsg toggleFoldMsg docFoldToggles document =
                     hr [] []
 
                 Tooltip triggerContent tooltipContent ->
-                    Tooltip.tooltip (viewAtCurrentSectionLevel triggerContent) (viewAtCurrentSectionLevel tooltipContent) |> Tooltip.withArrow Tooltip.TopLeft |> Tooltip.view
+                    Tooltip.tooltip
+                        (viewAtCurrentSectionLevel triggerContent)
+                        (Tooltip.Rich (viewAtCurrentSectionLevel tooltipContent))
+                        |> Tooltip.withArrow Tooltip.Start
+                        |> Tooltip.view
 
                 Aside d ->
                     aside [] [ viewAtCurrentSectionLevel d ]
@@ -435,7 +439,12 @@ view refToMsg toggleFoldMsg docFoldToggles document =
                         )
 
                 Span docs ->
-                    span [] (List.map viewAtCurrentSectionLevel (mergeWords docs))
+                    case docs of
+                        [ d ] ->
+                            viewAtCurrentSectionLevel d
+
+                        ds ->
+                            span [ class "span" ] (List.map viewAtCurrentSectionLevel (mergeWords ds))
 
                 BulletedList items ->
                     let
@@ -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))
 
                 UntitledSection docs ->
                     section [] (List.map (viewSectionContent viewAtCurrentSectionLevel) docs)

diff --git a/src/Perspective.elm b/src/Perspective.elm
@@ -10,6 +10,11 @@ type Perspective
     | Namespace { codebaseHash : Hash, fqn : FQN }
 
 
+toNamespacePerspective : Perspective -> FQN -> Perspective
+toNamespacePerspective perspective fqn_ =
+    Namespace { codebaseHash = codebaseHash perspective, fqn = fqn_ }
+
+
 codebaseHash : Perspective -> Hash
 codebaseHash perspective =
     case perspective of

diff --git a/src/Route.elm b/src/Route.elm
@@ -160,6 +160,10 @@ toUrlString route =
                 HashQualified fqn h ->
                     NEL.toList (FQN.toUrlSegments fqn) ++ [ Hash.toUrlString h ]
 
+        namespaceSuffix =
+            ";"
+
+        -- used to mark the end of a namespace FQN
         perspectiveParamsToPath pp includeNamespacesSuffix =
             case pp of
                 ByCodebase Relative ->
@@ -170,14 +174,14 @@ toUrlString route =
 
                 ByNamespace Relative fqn ->
                     if includeNamespacesSuffix then
-                        "latest" :: "-" :: NEL.toList (FQN.segments fqn)
+                        "latest" :: NEL.toList (FQN.segments fqn) ++ [ namespaceSuffix ]
 
                     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 ]
 
                     else
                         [ Hash.toUrlString hash, "namespaces" ] ++ NEL.toList (FQN.segments fqn)

diff --git a/src/UI/Button.elm b/src/UI/Button.elm
@@ -3,10 +3,10 @@ module UI.Button exposing
     , Size(..)
     , Type(..)
     , button
-    , buttonIcon
-    , buttonIconThenLabel
     , danger
     , default
+    , icon
+    , iconThenLabel
     , large
     , link
     , linkIcon
@@ -59,17 +59,17 @@ button clickMsg label =
     }
 
 
-buttonIcon : msg -> I.Icon msg -> Button msg
-buttonIcon msg icon_ =
+icon : msg -> I.Icon msg -> Button msg
+icon msg icon_ =
     { action = OnClick msg
     , content = Icon icon_
     , type_ = Default
     , size = Medium
     }
 
 
-buttonIconThenLabel : msg -> I.Icon msg -> String -> Button msg
-buttonIconThenLabel msg icon_ label =
+iconThenLabel : msg -> I.Icon msg -> String -> Button msg
+iconThenLabel msg icon_ label =
     { action = OnClick msg
     , content = IconThenLabel icon_ label
     , type_ = Default

diff --git a/src/UI/Icon.elm b/src/UI/Icon.elm
@@ -247,6 +247,16 @@ folderOutlined =
         [ path [ fill "currentColor", fillRule "evenodd", d "M2 2C1.44772 2 1 2.44772 1 3V11.5C1 12.0523 1.44772 12.5 2 12.5H12C12.5523 12.5 13 12.0523 13 11.5V4.5C13 3.94772 12.5523 3.5 12 3.5H7.83333C7.61696 3.5 7.40643 3.42982 7.23333 3.3L5.76667 2.2C5.59357 2.07018 5.38304 2 5.16667 2H4.5H2ZM2.5 4.5C2.22386 4.5 2 4.72386 2 5V11C2 11.2761 2.22386 11.5 2.5 11.5H11.5C11.7761 11.5 12 11.2761 12 11V5C12 4.72386 11.7761 4.5 11.5 4.5H2.5Z" ] [] ]
 
 
+intoFolder : Icon msg
+intoFolder =
+    Icon
+        "into-folder"
+        []
+        [ path [ fill "currentColor", d "M0.46875 7.35795C0.209867 7.35795 0 7.56782 0 7.8267V7.8267C0 8.08559 0.209867 8.29545 0.46875 8.29545H5.40213C5.62485 8.29545 5.7364 8.56474 5.5789 8.72223L4.63211 9.66903C4.45124 9.8499 4.45219 10.1435 4.63425 10.3231V10.3231C4.81462 10.5012 5.10489 10.5002 5.2841 10.321L7.42539 8.17972C7.62044 7.98467 7.62068 7.6685 7.42592 7.47315L5.29195 5.33273C5.10918 5.1494 4.81202 5.15013 4.63015 5.33436V5.33436C4.4498 5.51705 4.45112 5.81118 4.6331 5.99224L5.57631 6.93073C5.73441 7.08804 5.62301 7.35795 5.39998 7.35795H0.46875Z" ] []
+        , path [ fill "currentColor", d "M2.5 12H12.5C12.7761 12 13 11.7761 13 11.5V4C13 3.72386 12.7761 3.5 12.5 3.5H7.83333C7.40059 3.5 6.97953 3.35964 6.63333 3.1L5.43333 2.2C5.26024 2.07018 5.0497 2 4.83333 2H2.5C2.22386 2 2 2.22386 2 2.5L2 5C2 5.27614 1.77614 5.5 1.5 5.5C1.22386 5.5 1 5.27614 1 5V2C1 1.44772 1.44772 1 2 1H5.16667C5.38304 1 5.59357 1.07018 5.76667 1.2L7.23333 2.3C7.40643 2.42982 7.61696 2.5 7.83333 2.5H13C13.5523 2.5 14 2.94772 14 3.5V12C14 12.5523 13.5523 13 13 13H2C1.44772 13 1 12.5523 1 12V10.5C1 10.2239 1.22386 10 1.5 10C1.77614 10 2 10.2239 2 10.5L2 11.5C2 11.7761 2.22386 12 2.5 12Z" ] []
+        ]
+
+
 hash : Icon msg
 hash =
     Icon
@@ -278,6 +288,16 @@ dot =
     Icon "dot" [] [ circle [ fill "currentColor", cx "7", cy "7", r "2" ] [] ]
 
 
+dots : Icon msg
+dots =
+    Icon "dots"
+        []
+        [ circle [ fill "currentColor", cx "11", cy "7", r "1" ] []
+        , circle [ fill "currentColor", cx "7", cy "7", r "1" ] []
+        , circle [ fill "currentColor", cx "3", cy "7", r "1" ] []
+        ]
+
+
 dash : Icon msg
 dash =
     Icon "dash" [] [ rect [ fill "currentColor", Attrs.x "3", y "5", width "8", height "4", rx "2" ] [] ]
@@ -288,6 +308,15 @@ github =
     Icon "github" [] [ path [ fill "currentColor", fillRule "evenodd", d "M6.99945 1C3.68664 1 1 3.68627 1 7.00019C1 9.6511 2.71902 11.8998 5.10326 12.6932C5.40345 12.7484 5.51285 12.5632 5.51285 12.404C5.51285 12.2619 5.50769 11.8843 5.50474 11.3837C3.83581 11.7462 3.48368 10.5793 3.48368 10.5793C3.21075 9.88609 2.81736 9.70156 2.81736 9.70156C2.2726 9.32954 2.85862 9.3369 2.85862 9.3369C3.46085 9.37926 3.77761 9.95534 3.77761 9.95534C4.3128 10.8721 5.18208 10.6073 5.5239 10.4537C5.57841 10.0662 5.73348 9.80174 5.90475 9.65183C4.57248 9.50045 3.1717 8.98551 3.1717 6.68636C3.1717 6.03146 3.4056 5.49553 3.7894 5.07637C3.72752 4.92462 3.52162 4.31428 3.84833 3.48847C3.84833 3.48847 4.35185 3.32714 5.49811 4.10359C5.97658 3.97026 6.49004 3.90396 7.00018 3.90138C7.50996 3.90396 8.02305 3.97026 8.50226 4.10359C9.64778 3.32714 10.1506 3.48847 10.1506 3.48847C10.478 4.31428 10.2721 4.92462 10.2106 5.07637C10.5951 5.49553 10.8272 6.03146 10.8272 6.68636C10.8272 8.99141 9.4242 9.4986 8.08788 9.64704C8.30299 9.83232 8.49489 10.1984 8.49489 10.7583C8.49489 11.5602 8.48752 12.2073 8.48752 12.404C8.48752 12.5646 8.59581 12.7514 8.90006 12.6928C11.2825 11.8976 13 9.65036 13 7.00019C13 3.68627 10.3134 1 6.99945 1Z" ] [] ]
 
 
+download : Icon msg
+download =
+    Icon "download"
+        []
+        [ 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" ] []
+        ]
+
+
 list : Icon msg
 list =
     Icon "list"