Skip to content
This repository was archived by the owner on Jul 19, 2022. It is now read-only.

Improve tooltips and show fly out menu #203

Merged
merged 1 commit into from
Aug 20, 2021
Merged

Improve tooltips and show fly out menu #203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 26 additions & 16 deletions src/App.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Supporting changing the perspective from things like the workspace.



keydown : Model -> KeyboardEvent -> ( Model, Cmd Msg )
keydown model keyboardEvent =
Expand Down Expand Up @@ -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
Expand Down
15 changes: 12 additions & 3 deletions src/Definition/Doc.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tooltips has a very specific content setting now; Text, Rich, or Menu.

|> Tooltip.withArrow Tooltip.Start
|> Tooltip.view

Aside d ->
aside [] [ viewAtCurrentSectionLevel d ]
Expand Down Expand Up @@ -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))
Copy link
Member Author

@hojberg hojberg Aug 20, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).


BulletedList items ->
let
Expand Down Expand Up @@ -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))
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Helped with debugging docs.


UntitledSection docs ->
section [] (List.map (viewSectionContent viewAtCurrentSectionLevel) docs)
Expand Down
5 changes: 5 additions & 0 deletions src/Perspective.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 6 additions & 2 deletions src/Route.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ->
Expand All @@ -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 ]
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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...


else
[ Hash.toUrlString hash, "namespaces" ] ++ NEL.toList (FQN.segments fqn)
Expand Down
12 changes: 6 additions & 6 deletions src/UI/Button.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ module UI.Button exposing
, Size(..)
, Type(..)
, button
, buttonIcon
, buttonIconThenLabel
, danger
, default
, icon
, iconThenLabel
, large
, link
, linkIcon
Expand Down Expand Up @@ -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_ =
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simplify API.

{ 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
Expand Down
29 changes: 29 additions & 0 deletions src/UI/Icon.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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" ] [] ]
Expand All @@ -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" ] []
]
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bunch of new icons, only intoFolder is used right now, but the others are coming soon.



list : Icon msg
list =
Icon "list"
Expand Down
Loading