1module Build.Styles exposing
2    ( MetadataCellType(..)
3    , abortButton
4    , acrossStepSubHeaderLabel
5    , body
6    , buttonTooltip
7    , buttonTooltipArrow
8    , changedStepTooltip
9    , durationTooltip
10    , durationTooltipArrow
11    , errorLog
12    , header
13    , historyItem
14    , metadataCell
15    , metadataTable
16    , retryTabList
17    , stepHeader
18    , stepHeaderLabel
19    , stepStatusIcon
20    , tab
21    , triggerButton
22    )
23
24import Application.Styles
25import Build.Models exposing (StepHeaderType(..))
26import Build.StepTree.Models exposing (StepState(..))
27import Colors
28import Concourse.BuildStatus exposing (BuildStatus(..))
29import Dashboard.Styles exposing (striped)
30import Html
31import Html.Attributes exposing (style)
32import Views.Styles
33
34
35header : BuildStatus -> List (Html.Attribute msg)
36header status =
37    [ style "display" "flex"
38    , style "justify-content" "space-between"
39    , style "height" "60px"
40    , style "background" <|
41        case status of
42            BuildStatusStarted ->
43                Colors.startedFaded
44
45            BuildStatusPending ->
46                Colors.pending
47
48            BuildStatusSucceeded ->
49                Colors.success
50
51            BuildStatusFailed ->
52                Colors.failure
53
54            BuildStatusErrored ->
55                Colors.error
56
57            BuildStatusAborted ->
58                Colors.aborted
59    ]
60
61
62body : List (Html.Attribute msg)
63body =
64    [ style "overflow-y" "auto"
65    , style "outline" "none"
66    , style "position" "relative"
67    , style "-webkit-overflow-scrolling" "touch"
68    ]
69
70
71historyItem : BuildStatus -> Bool -> BuildStatus -> List (Html.Attribute msg)
72historyItem currentBuildStatus isCurrent status =
73    [ style "letter-spacing" "-1px"
74    , style "padding" "0 2px 0 2px"
75    , style "border-top" <| "1px solid " ++ Colors.buildStatusColor isCurrent currentBuildStatus
76    , style "border-right" <| "1px solid " ++ Colors.buildStatusColor False status
77    , style "opacity" <|
78        if isCurrent then
79            "1"
80
81        else
82            "0.8"
83    ]
84        ++ (case status of
85                BuildStatusStarted ->
86                    striped
87                        { pipelineRunningKeyframes = "pipeline-running"
88                        , thickColor = Colors.startedFaded
89                        , thinColor = Colors.started
90                        }
91
92                BuildStatusPending ->
93                    [ style "background" Colors.pending ]
94
95                BuildStatusSucceeded ->
96                    [ style "background" Colors.success ]
97
98                BuildStatusFailed ->
99                    [ style "background" Colors.failure ]
100
101                BuildStatusErrored ->
102                    [ style "background" Colors.error ]
103
104                BuildStatusAborted ->
105                    [ style "background" Colors.aborted ]
106           )
107
108
109triggerButton : Bool -> Bool -> BuildStatus -> List (Html.Attribute msg)
110triggerButton buttonDisabled hovered status =
111    [ style "cursor" <|
112        if buttonDisabled then
113            "default"
114
115        else
116            "pointer"
117    , style "position" "relative"
118    , style "background-color" <|
119        Colors.buildStatusColor (not hovered || buttonDisabled) status
120    ]
121        ++ button
122
123
124abortButton : Bool -> List (Html.Attribute msg)
125abortButton isHovered =
126    [ style "cursor" "pointer"
127    , style "background-color" <|
128        if isHovered then
129            Colors.failureFaded
130
131        else
132            Colors.failure
133    ]
134        ++ button
135
136
137button : List (Html.Attribute msg)
138button =
139    [ style "padding" "10px"
140    , style "outline" "none"
141    , style "margin" "0"
142    , style "border-width" "0 0 0 1px"
143    , style "border-color" Colors.background
144    , style "border-style" "solid"
145    ]
146
147
148buttonTooltipArrow : List (Html.Attribute msg)
149buttonTooltipArrow =
150    [ style "width" "0"
151    , style "height" "0"
152    , style "left" "50%"
153    , style "bottom" "0"
154    , style "margin-left" "-5px"
155    , style "border-bottom" <| "5px solid " ++ Colors.frame
156    , style "border-left" "5px solid transparent"
157    , style "border-right" "5px solid transparent"
158    , style "position" "absolute"
159    ]
160
161
162buttonTooltip : Int -> List (Html.Attribute msg)
163buttonTooltip width =
164    [ style "position" "absolute"
165    , style "right" "0"
166    , style "top" "100%"
167    , style "width" <| String.fromInt width ++ "px"
168    , style "color" Colors.text
169    , style "background-color" Colors.frame
170    , style "padding" "10px"
171    , style "text-align" "right"
172    , style "pointer-events" "none"
173    , style "z-index" "1"
174
175    -- ^ need a value greater than 0 (inherited from .fixed-header) since this
176    -- element is earlier in the document than the build tabs
177    ]
178        ++ Views.Styles.defaultFont
179
180
181stepHeader : StepState -> List (Html.Attribute msg)
182stepHeader state =
183    [ style "display" "flex"
184    , style "justify-content" "space-between"
185    , style "border" <|
186        "1px solid "
187            ++ (case state of
188                    StepStateFailed ->
189                        Colors.failure
190
191                    StepStateErrored ->
192                        Colors.error
193
194                    StepStatePending ->
195                        Colors.frame
196
197                    StepStateRunning ->
198                        Colors.started
199
200                    StepStateInterrupted ->
201                        Colors.frame
202
203                    StepStateCancelled ->
204                        Colors.frame
205
206                    StepStateSucceeded ->
207                        Colors.frame
208               )
209    ]
210
211
212stepHeaderLabel : StepHeaderType -> List (Html.Attribute msg)
213stepHeaderLabel headerType =
214    [ style "color" <|
215        case headerType of
216            StepHeaderGet True ->
217                Colors.started
218
219            StepHeaderSetPipeline True ->
220                Colors.started
221
222            _ ->
223                Colors.pending
224    , style "line-height" "28px"
225    , style "padding-left" "6px"
226    ]
227
228
229acrossStepSubHeaderLabel : List (Html.Attribute msg)
230acrossStepSubHeaderLabel =
231    [ style "line-height" "28px"
232    , style "padding-left" "6px"
233    ]
234
235
236stepStatusIcon : List (Html.Attribute msg)
237stepStatusIcon =
238    [ style "background-size" "14px 14px"
239    , style "position" "relative"
240    ]
241
242
243changedStepTooltip : List (Html.Attribute msg)
244changedStepTooltip =
245    [ style "background-color" Colors.tooltipBackground
246    , style "padding" "5px"
247    , style "z-index" "100"
248    , style "width" "fit-content"
249    , style "pointer-events" "none"
250    ]
251        ++ Application.Styles.disableInteraction
252
253
254durationTooltip : List (Html.Attribute msg)
255durationTooltip =
256    [ style "position" "absolute"
257    , style "right" "0"
258    , style "bottom" "100%"
259    , style "background-color" Colors.tooltipBackground
260    , style "padding" "5px"
261    , style "z-index" "100"
262    , style "pointer-events" "none"
263    ]
264        ++ Application.Styles.disableInteraction
265
266
267durationTooltipArrow : List (Html.Attribute msg)
268durationTooltipArrow =
269    [ style "width" "0"
270    , style "height" "0"
271    , style "left" "50%"
272    , style "top" "0px"
273    , style "margin-left" "-5px"
274    , style "border-top" <| "5px solid " ++ Colors.tooltipBackground
275    , style "border-left" "5px solid transparent"
276    , style "border-right" "5px solid transparent"
277    , style "position" "absolute"
278    ]
279
280
281errorLog : List (Html.Attribute msg)
282errorLog =
283    [ style "color" Colors.errorLog
284    , style "background-color" Colors.frame
285    , style "padding" "5px 10px"
286    ]
287
288
289tabList : List (Html.Attribute msg)
290tabList =
291    [ style "line-height" "26px"
292    , style "background-color" Colors.background
293    ]
294
295
296retryTabList : List (Html.Attribute msg)
297retryTabList =
298    style "font-size" "16px"
299        :: style "margin" "0"
300        :: tabList
301
302
303tab :
304    { isHovered : Bool, isCurrent : Bool, isStarted : Bool }
305    -> List (Html.Attribute msg)
306tab { isHovered, isCurrent, isStarted } =
307    [ style "display" "inline-block"
308    , style "position" "relative"
309    , style "padding" "0 5px"
310    , style "font-weight" Views.Styles.fontWeightDefault
311    , style "cursor" "pointer"
312    , style "color" Colors.retryTabText
313    , style "background-color" <|
314        if isHovered || isCurrent then
315            Colors.paginationHover
316
317        else
318            Colors.background
319    , style "opacity" <|
320        if isStarted then
321            "1"
322
323        else
324            "0.5"
325    ]
326
327
328type MetadataCellType
329    = Key
330    | Value
331
332
333metadataTable : List (Html.Attribute msg)
334metadataTable =
335    [ style "border-collapse" "collapse"
336    , style "margin-bottom" "5px"
337    ]
338
339
340metadataCell : MetadataCellType -> List (Html.Attribute msg)
341metadataCell cell =
342    case cell of
343        Key ->
344            [ style "text-align" "left"
345            , style "vertical-align" "top"
346            , style "background-color" "rgb(45,45,45)"
347            , style "border-bottom" "5px solid rgb(45,45,45)"
348            , style "padding" "5px"
349            ]
350
351        Value ->
352            [ style "text-align" "left"
353            , style "vertical-align" "top"
354            , style "background-color" "rgb(30,30,30)"
355            , style "border-bottom" "5px solid rgb(45,45,45)"
356            , style "padding" "5px"
357            ]
358