tokono.ma
A music player that connects to your cloud/distributed storage.
1module Themes.Sunrise.ContextMenu exposing (view)
2
3import Chunky exposing (..)
4import Conditional exposing (..)
5import ContextMenu exposing (..)
6import Html exposing (Html, text)
7import Html.Attributes exposing (style)
8import Html.Events exposing (custom)
9import Json.Decode
10import Material.Icons.Types exposing (Coloring(..))
11import UI.Types as UI exposing (Msg)
12
13
14
15-- 🗺
16
17
18view : Float -> Maybe (ContextMenu Msg) -> Html Msg
19view viewportWidth m =
20 case m of
21 Just (ContextMenu items coordinates) ->
22 let
23 ( height, width ) =
24 ( 250, 170 )
25
26 left =
27 coordinates.x
28 |> max (width / 2 + 12)
29 |> min (viewportWidth - width / 2 - 12)
30
31 top =
32 coordinates.y
33 |> max (height / 2 + 12)
34 in
35 brick
36 [ style "left" (String.fromFloat left ++ "px")
37 , style "top" (String.fromFloat top ++ "px")
38
39 --
40 , style "min-width" "170px"
41 ]
42 [ "absolute"
43 , "bg-white"
44 , "leading-loose"
45 , "opacity-95"
46 , "overflow-hidden"
47 , "-translate-x-1/2"
48 , "-translate-y-1/2"
49 , "rounded"
50 , "shadow-md"
51 , "select-none"
52 , "text-almost-sm"
53 , "transform"
54 , "z-50"
55
56 -- Dark mode
57 ------------
58 , "dark:bg-darkest-hour"
59 , "dark:border"
60 , "dark:border-base00"
61 ]
62 (List.map
63 (\item ->
64 case item of
65 Item i ->
66 itemView i
67
68 Divider ->
69 -- NOTE: Not needed at the moment
70 nothing
71 )
72 items
73 )
74
75 Nothing ->
76 nothing
77
78
79itemView : ContextMenu.ItemProperties Msg -> Html Msg
80itemView { icon, label, msg, active } =
81 brick
82 [ custom
83 "tap"
84 (Json.Decode.succeed
85 { message = UI.MsgViaContextMenu msg
86 , stopPropagation = True
87 , preventDefault = True
88 }
89 )
90 ]
91 [ "border-b"
92 , "cursor-pointer"
93 , "pl-4"
94 , "pr-8"
95 , "py-3"
96 , "truncate"
97
98 --
99 , "last:border-transparent"
100
101 --
102 , ifThenElse active "antialiased" "subpixel-antialiased"
103 , ifThenElse active "border-transparent" "border-gray-200"
104 , ifThenElse active "bg-base00" "bg-transparent"
105 , ifThenElse active "text-white" "text-inherit"
106 , ifThenElse active "font-semibold" "font-normal"
107
108 -- Dark mode
109 ------------
110 , "dark:border-base00"
111
112 --
113 , ifThenElse active "dark:bg-base07" "dark:bg-transparent"
114 , ifThenElse active "dark:text-darkest-hour" "dark:text-inherit"
115 ]
116 [ inline
117 [ "align-middle"
118 , "inline-block"
119 , "leading-0"
120 ]
121 [ icon 14 Inherit ]
122 , inline
123 [ "align-middle"
124 , "inline-block"
125 , "leading-0"
126 , "ml-2"
127 , "pl-1"
128 , "relative"
129 ]
130 [ text label ]
131 ]