github.com/pf-qiu/concourse/v6@v6.7.3-0.20201207032516-1f455d73275f/web/elm/src/Resource/Styles.elm (about)

     1  module Resource.Styles exposing
     2      ( body
     3      , checkBarStatus
     4      , checkButton
     5      , checkButtonIcon
     6      , checkStatus
     7      , checkStatusIcon
     8      , commentBar
     9      , commentBarIconContainer
    10      , commentBarMessageIcon
    11      , commentSaveButton
    12      , commentText
    13      , commentTextArea
    14      , editButton
    15      , editSaveWrapper
    16      , enabledCheckbox
    17      , headerBar
    18      , headerHeight
    19      , headerLastCheckedSection
    20      , headerResourceName
    21      , pagination
    22      , pinBar
    23      , pinBarTooltip
    24      , pinBarViewVersion
    25      , pinButton
    26      , pinButtonTooltip
    27      , pinIcon
    28      , pinTools
    29      , versionHeader
    30      )
    31  
    32  import Assets
    33  import Colors
    34  import Html
    35  import Html.Attributes exposing (rows, style)
    36  import Pinned
    37  import Resource.Models as Models
    38  import Views.Styles
    39  
    40  
    41  headerHeight : Int
    42  headerHeight =
    43      60
    44  
    45  
    46  pinBar : Bool -> List (Html.Attribute msg)
    47  pinBar isPinned =
    48      let
    49          pinBarBorderColor =
    50              if isPinned then
    51                  Colors.pinned
    52  
    53              else
    54                  Colors.background
    55      in
    56      [ style "display" "flex"
    57      , style "align-items" "flex-start"
    58      , style "position" "relative"
    59      , style "background-color" Colors.pinTools
    60      , style "border" <| "1px solid" ++ pinBarBorderColor
    61      , style "flex" "1"
    62      ]
    63  
    64  
    65  pinIcon :
    66      { clickable : Bool
    67      , hover : Bool
    68      }
    69      -> List (Html.Attribute msg)
    70  pinIcon { clickable, hover } =
    71      let
    72          cursorType =
    73              if clickable then
    74                  "pointer"
    75  
    76              else
    77                  "default"
    78  
    79          backgroundColor =
    80              if hover then
    81                  Colors.pinIconHover
    82  
    83              else
    84                  "transparent"
    85      in
    86      [ style "margin" "4px 5px 5px 5px"
    87      , style "cursor" cursorType
    88      , style "background-color" backgroundColor
    89      , style "padding" "6px"
    90      , style "background-size" "contain"
    91      , style "background-origin" "content-box"
    92      , style "min-width" "14px"
    93      , style "min-height" "14px"
    94      ]
    95  
    96  
    97  pinBarTooltip : List (Html.Attribute msg)
    98  pinBarTooltip =
    99      [ style "position" "absolute"
   100      , style "top" "-10px"
   101      , style "left" "30px"
   102      , style "background-color" Colors.tooltipBackground
   103      , style "padding" "5px"
   104      , style "z-index" "2"
   105      ]
   106  
   107  
   108  pinTools : Bool -> List (Html.Attribute msg)
   109  pinTools isPinned =
   110      let
   111          pinToolsBorderColor =
   112              if isPinned then
   113                  Colors.pinned
   114  
   115              else
   116                  Colors.background
   117      in
   118      [ style "background-color" Colors.pinTools
   119      , style "min-height" "28px"
   120      , style "margin-bottom" "24px"
   121      , style "display" "flex"
   122      , style "align-items" "stretch"
   123      , style "border" <| "1px solid " ++ pinToolsBorderColor
   124      , style "box-sizing" "border-box"
   125      ]
   126  
   127  
   128  checkStatusIcon : List (Html.Attribute msg)
   129  checkStatusIcon =
   130      [ style "background-size" "14px 14px" ]
   131  
   132  
   133  enabledCheckbox :
   134      { a
   135          | enabled : Models.VersionEnabledState
   136          , pinState : Pinned.VersionPinState
   137      }
   138      -> List (Html.Attribute msg)
   139  enabledCheckbox { enabled, pinState } =
   140      [ style "margin-right" "5px"
   141      , style "width" "25px"
   142      , style "height" "25px"
   143      , style "background-repeat" "no-repeat"
   144      , style "background-position" "50% 50%"
   145      , style "cursor" "pointer"
   146      , style "border" <| "1px solid " ++ borderColor pinState
   147      , style "background-color" Colors.sectionHeader
   148      , style "background-image" <|
   149          Assets.backgroundImage <|
   150              case enabled of
   151                  Models.Enabled ->
   152                      Just Assets.CheckmarkIcon
   153  
   154                  Models.Changing ->
   155                      Nothing
   156  
   157                  Models.Disabled ->
   158                      Nothing
   159      ]
   160  
   161  
   162  pinButton : Pinned.VersionPinState -> List (Html.Attribute msg)
   163  pinButton pinState =
   164      [ style "background-color" Colors.sectionHeader
   165      , style "border" <| "1px solid " ++ borderColor pinState
   166      , style "margin-right" "5px"
   167      , style "width" "25px"
   168      , style "height" "25px"
   169      , style "background-repeat" "no-repeat"
   170      , style "background-position" "50% 50%"
   171      , style "position" "relative"
   172      , style "cursor" <|
   173          case pinState of
   174              Pinned.Enabled ->
   175                  "pointer"
   176  
   177              Pinned.PinnedDynamically ->
   178                  "pointer"
   179  
   180              Pinned.NotThePinnedVersion ->
   181                  "pointer"
   182  
   183              Pinned.PinnedStatically _ ->
   184                  "default"
   185  
   186              Pinned.Disabled ->
   187                  "default"
   188  
   189              Pinned.InTransition ->
   190                  "default"
   191      , style "background-image" <|
   192          Assets.backgroundImage <|
   193              case pinState of
   194                  Pinned.InTransition ->
   195                      Nothing
   196  
   197                  _ ->
   198                      Just Assets.PinIconWhite
   199      ]
   200  
   201  
   202  pinButtonTooltip : List (Html.Attribute msg)
   203  pinButtonTooltip =
   204      [ style "position" "absolute"
   205      , style "bottom" "25px"
   206      , style "background-color" Colors.tooltipBackground
   207      , style "z-index" "2"
   208      , style "padding" "5px"
   209      , style "width" "170px"
   210      ]
   211  
   212  
   213  versionHeader : Pinned.VersionPinState -> List (Html.Attribute msg)
   214  versionHeader pinnedState =
   215      [ style "background-color" Colors.sectionHeader
   216      , style "border" <| "1px solid " ++ borderColor pinnedState
   217      , style "padding-left" "10px"
   218      , style "cursor" "pointer"
   219      , style "flex-grow" "1"
   220      , style "display" "flex"
   221      , style "align-items" "center"
   222      ]
   223  
   224  
   225  pinBarViewVersion : List (Html.Attribute msg)
   226  pinBarViewVersion =
   227      [ style "margin" "8px 8px 8px 0" ]
   228  
   229  
   230  borderColor : Pinned.VersionPinState -> String
   231  borderColor pinnedState =
   232      case pinnedState of
   233          Pinned.PinnedStatically _ ->
   234              Colors.pinned
   235  
   236          Pinned.PinnedDynamically ->
   237              Colors.pinned
   238  
   239          _ ->
   240              Colors.sectionHeader
   241  
   242  
   243  commentBar : Bool -> List (Html.Attribute msg)
   244  commentBar isPinned =
   245      let
   246          commentBarBorderColor =
   247              if isPinned then
   248                  Colors.pinned
   249  
   250              else
   251                  Colors.background
   252      in
   253      [ style "background-color" Colors.pinTools
   254      , style "min-height" "25px"
   255      , style "display" "flex"
   256      , style "flex" "1"
   257      , style "border" <| "1px solid" ++ commentBarBorderColor
   258      ]
   259  
   260  
   261  commentBarMessageIcon : List (Html.Attribute msg)
   262  commentBarMessageIcon =
   263      [ style "background-size" "contain"
   264      , style "margin" "10px"
   265      , style "flex-shrink" "0"
   266      , style "background-origin" "content-box"
   267      ]
   268  
   269  
   270  commentTextArea : List (Html.Attribute msg)
   271  commentTextArea =
   272      [ style "box-sizing" "border-box"
   273      , style "flex-grow" "1"
   274      , style "resize" "none"
   275      , style "outline" "none"
   276      , style "border" "none"
   277      , style "color" Colors.text
   278      , style "background-color" "transparent"
   279      , style "max-height" "150px"
   280      , style "margin" "8px 0"
   281      , rows 1
   282      ]
   283          ++ Views.Styles.defaultFont
   284  
   285  
   286  commentText : List (Html.Attribute msg)
   287  commentText =
   288      [ style "flex-grow" "1"
   289      , style "margin" "0"
   290      , style "outline" "0"
   291      , style "padding" "8px 0"
   292      , style "max-height" "150px"
   293      , style "overflow-y" "scroll"
   294      ]
   295  
   296  
   297  commentSaveButton :
   298      { isHovered : Bool, commentChanged : Bool, pinCommentLoading : Bool }
   299      -> List (Html.Attribute msg)
   300  commentSaveButton { commentChanged, isHovered, pinCommentLoading } =
   301      [ style "border" <|
   302          "1px solid "
   303              ++ (if commentChanged && not pinCommentLoading then
   304                      Colors.white
   305  
   306                  else
   307                      Colors.buttonDisabledGrey
   308                 )
   309      , style "background-color" <|
   310          if isHovered && commentChanged && not pinCommentLoading then
   311              Colors.frame
   312  
   313          else
   314              "transparent"
   315      , style "color" <|
   316          if commentChanged && not pinCommentLoading then
   317              Colors.text
   318  
   319          else
   320              Colors.buttonDisabledGrey
   321      , style "padding" "5px 10px"
   322      , style "margin" "5px 5px 7px 7px"
   323      , style "outline" "none"
   324      , style "transition" "border 200ms ease, color 200ms ease"
   325      , style "cursor" <|
   326          if commentChanged && not pinCommentLoading then
   327              "pointer"
   328  
   329          else
   330              "default"
   331      ]
   332          ++ Views.Styles.defaultFont
   333  
   334  
   335  commentBarIconContainer : Bool -> List (Html.Attribute msg)
   336  commentBarIconContainer isEditing =
   337      [ style "display" "flex"
   338      , style "align-items" "flex-start"
   339      , style "flex-grow" "1"
   340      , style "background-color" <|
   341          if isEditing then
   342              Colors.pinned
   343  
   344          else
   345              Colors.pinTools
   346      ]
   347  
   348  
   349  editButton : Bool -> List (Html.Attribute msg)
   350  editButton isHovered =
   351      [ style "padding" "5px"
   352      , style "margin" "5px"
   353      , style "cursor" "pointer"
   354      , style "background-color" <|
   355          if isHovered then
   356              Colors.sectionHeader
   357  
   358          else
   359              Colors.pinTools
   360      , style "background-origin" "content-box"
   361      , style "background-size" "contain"
   362      ]
   363  
   364  
   365  editSaveWrapper : List (Html.Attribute msg)
   366  editSaveWrapper =
   367      [ style "width" "60px"
   368      , style "display" "flex"
   369      , style "justify-content" "flex-end"
   370      ]
   371  
   372  
   373  headerBar : List (Html.Attribute msg)
   374  headerBar =
   375      [ style "height" <| String.fromInt headerHeight ++ "px"
   376      , style "display" "flex"
   377      , style "align-items" "stretch"
   378      , style "background-color" Colors.secondaryTopBar
   379      ]
   380  
   381  
   382  headerResourceName : List (Html.Attribute msg)
   383  headerResourceName =
   384      [ style "margin-left" "18px"
   385      , style "display" "flex"
   386      , style "align-items" "center"
   387      , style "justify-content" "center"
   388      ]
   389  
   390  
   391  headerLastCheckedSection : List (Html.Attribute msg)
   392  headerLastCheckedSection =
   393      [ style "display" "flex"
   394      , style "align-items" "center"
   395      , style "justify-content" "center"
   396      , style "margin-left" "24px"
   397      ]
   398  
   399  
   400  body : List (Html.Attribute msg)
   401  body =
   402      [ style "padding" "10px"
   403      , style "overflow-y" "auto"
   404      , style "flex-grow" "1"
   405      ]
   406  
   407  
   408  pagination : List (Html.Attribute msg)
   409  pagination =
   410      [ style "display" "flex"
   411      , style "align-items" "stretch"
   412      , style "margin-left" "auto"
   413      ]
   414  
   415  
   416  checkStatus : List (Html.Attribute msg)
   417  checkStatus =
   418      [ style "display" "flex"
   419      , style "flex-direction" "column"
   420      , style "flex-grow" "1"
   421      ]
   422  
   423  
   424  checkBarStatus : List (Html.Attribute msg)
   425  checkBarStatus =
   426      [ style "display" "flex"
   427      , style "justify-content" "space-between"
   428      , style "align-items" "center"
   429      , style "flex-grow" "1"
   430      , style "height" "28px"
   431      , style "background" Colors.sectionHeader
   432      , style "padding-left" "6px"
   433      ]
   434  
   435  
   436  checkButton : Bool -> List (Html.Attribute msg)
   437  checkButton isClickable =
   438      [ style "height" "30px"
   439      , style "width" "30px"
   440      , style "background-color" Colors.sectionHeader
   441      , style "margin-right" "5px"
   442      , style "cursor" <|
   443          if isClickable then
   444              "pointer"
   445  
   446          else
   447              "default"
   448      ]
   449  
   450  
   451  checkButtonIcon : Bool -> List (Html.Attribute msg)
   452  checkButtonIcon isHighlighted =
   453      [ style "margin" "5px"
   454      , style "background-size" "contain"
   455      , style "opacity" <|
   456          if isHighlighted then
   457              "1"
   458  
   459          else
   460              "0.5"
   461      ]