fix/ui: use dropdown instead of toolbar in nodedoc inner options.

Author: dtrckd

Diff for: src/Bulk/Bulma.elm

@@ -64,9 +64,9 @@ type alias DropdownData msg =
            OnToggleTargetFilter
            ""
            (div []
-                [ div [ class "dropdown-item button-light" ] [ A.icon1 "icon-edit-2" T.edit ]
+                [ div [ class "dropdown-item" ] [ A.icon1 "icon-edit-2" T.edit ]
                 , hr [ class "dropdown-divider" ] []
-                , div [ class "dropdown-item button-light" ] [ A.icon1 "icon-plus" T.addTensionColumn ]
+                , div [ class "dropdown-item" ] [ A.icon1 "icon-plus" T.addTensionColumn ]
                 ])
 
 -}

Diff for: src/Components/Board.elm

@@ -1176,6 +1176,7 @@ viewMediaTension cardid isHovered isEdited focus t =
                     div
                         [ class "tooltip has-tooltip-left has-tooltip-arrow"
                         , attribute "data-tooltip" (action2str tc.action)
+                        , style "left" "15px"
                         ]
                         [ A.icon0 (action2icon tc ++ " icon-sm") ]
 
@@ -1185,6 +1186,7 @@ viewMediaTension cardid isHovered isEdited focus t =
                             div
                                 [ class "tooltip has-tooltip-left has-tooltip-arrow"
                                 , attribute "data-tooltip" T.closedTension
+                                , style "left" "15px"
                                 ]
                                 [ A.icon ("icon-alert-circle icon-sm has-text-" ++ statusColor t.status) ]
 

Diff for: src/Components/Comments.elm

@@ -826,10 +826,10 @@ viewComment conf c form result highlightedCommentId userInput =
                                     ]
                                 , div [ id ("edit-ellipsis-" ++ c.id), class "dropdown-menu", attribute "role" "menu" ]
                                     [ div [ class "dropdown-content p-0" ] <|
-                                        [ div [ class "dropdown-item button-light", attribute "data-clipboard" reflink ] [ text "Copy link" ] ]
+                                        [ div [ class "dropdown-item", attribute "data-clipboard" reflink ] [ text "Copy link" ] ]
                                             ++ (if isAuthor then
                                                     [ hr [ class "dropdown-divider" ] []
-                                                    , div [ class "dropdown-item button-light", onClick (OnUpdateComment c) ] [ text T.edit ]
+                                                    , div [ class "dropdown-item", onClick (OnUpdateComment c) ] [ text T.edit ]
                                                     ]
 
                                                 else

Diff for: src/Components/NodeDoc.elm

@@ -536,6 +536,52 @@ viewToolbar mode data =
         ]
 
 
+viewToolbarDropdown : NodeView -> OrgaNodeData -> Html msg
+viewToolbarDropdown mode data =
+    let
+        tid =
+            withDefaultData "" data.tid_r
+
+        iconOpts =
+            ternary data.hasInnerToolbar "icon-xs" ""
+    in
+    div [ class "dropdown is-right has-text-weight-normal" ]
+        [ div [ class "dropdown-trigger is-w is-h" ]
+            [ div
+                [ class "ellipsis"
+                , attribute "aria-controls" "edit-ellipsis-card"
+                , attribute "aria-haspopup" "true"
+                ]
+                [ A.icon "icon-more-vertical icon-lg" ]
+            ]
+        , div [ id "edit-ellipsis-card", class "dropdown-menu", attribute "role" "menu" ]
+            [ div [ class "dropdown-content p-0" ] <|
+                [ div [ class "dropdown-item" ]
+                    [ a
+                        [ class "stealth-link"
+
+                        --, classList [ ( "is-active", mode == NodeEdit ) ]
+                        , href
+                            (Route.Tension_Dynamic_Dynamic_Action { param1 = data.focus.rootnameid, param2 = tid } |> toHref)
+                        ]
+                        [ A.icon1 ("icon-edit-2 " ++ iconOpts) T.edit ]
+                    ]
+                , hr [ class "dropdown-divider" ] []
+                , div [ class "dropdown-item" ]
+                    [ a
+                        [ class "stealth-link"
+
+                        --, classList [ ( "is-active", mode == NodeVersions ) ]
+                        , href
+                            ((Route.Tension_Dynamic_Dynamic_Action { param1 = data.focus.rootnameid, param2 = tid } |> toHref) ++ "?v=history")
+                        ]
+                        [ A.icon1 ("icon-history " ++ iconOpts) T.revisions ]
+                    ]
+                ]
+            ]
+        ]
+
+
 viewNodeStatus : Op msg -> Html msg
 viewNodeStatus op =
     case op.blob.pushedFlag of
@@ -717,7 +763,8 @@ viewAboutSection data op_m =
                   span [ class "is-name" ] [ unwrap "" .name data.node |> text ]
                 ]
             , if data.hasInnerToolbar && isSuccess data.tid_r && not (List.member (unwrap Nothing .role_type data.node) (List.map Just [ RoleType.Guest, RoleType.Owner, RoleType.Pending, RoleType.Retired ])) then
-                div [ class "level-right is-marginless is-small is-hidden-mobile" ] [ viewToolbar NoView data ]
+                div [ class "level-right is-marginless is-small is-hidden-mobile" ]
+                    [ viewToolbarDropdown NoView data ]
 
               else
                 Maybe.map