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

     1  module SideBar.Styles exposing
     2      ( Background(..)
     3      , FontWeight(..)
     4      , Opacity(..)
     5      , SidebarElementColor(..)
     6      , collapseIcon
     7      , column
     8      , hamburgerIcon
     9      , hamburgerMenu
    10      , iconGroup
    11      , opacityAttr
    12      , pipeline
    13      , pipelineFavorite
    14      , pipelineIcon
    15      , pipelineName
    16      , sectionHeader
    17      , sideBar
    18      , sideBarHandle
    19      , starPadding
    20      , starWidth
    21      , team
    22      , teamColorAttr
    23      , teamHeader
    24      , teamIcon
    25      , teamName
    26      , tooltip
    27      , tooltipArrowSize
    28      , tooltipBody
    29      , tooltipOffset
    30      )
    31  
    32  import Assets
    33  import Colors
    34  import Html
    35  import Html.Attributes as Attr exposing (style)
    36  import Views.Icon as Icon
    37  import Views.Styles
    38  
    39  
    40  starPadding : Float
    41  starPadding =
    42      10
    43  
    44  
    45  starWidth : Float
    46  starWidth =
    47      18
    48  
    49  
    50  tooltipArrowSize : Float
    51  tooltipArrowSize =
    52      15
    53  
    54  
    55  tooltipOffset : Float
    56  tooltipOffset =
    57      3
    58  
    59  
    60  sideBar : { r | width : Float } -> List (Html.Attribute msg)
    61  sideBar { width } =
    62      [ style "border-right" <| "1px solid " ++ Colors.border
    63      , style "background-color" Colors.sideBarBackground
    64      , style "width" <| String.fromFloat width ++ "px"
    65      , style "overflow-y" "auto"
    66      , style "height" "100%"
    67      , style "flex-shrink" "0"
    68      , style "box-sizing" "border-box"
    69      , style "padding-bottom" "10px"
    70      , style "-webkit-overflow-scrolling" "touch"
    71      , style "position" "relative"
    72      ]
    73  
    74  
    75  sideBarHandle : { r | width : Float } -> List (Html.Attribute msg)
    76  sideBarHandle { width } =
    77      [ style "position" "fixed"
    78      , style "width" "10px"
    79      , style "height" "100%"
    80      , style "top" "0"
    81      , style "left" <| String.fromFloat (width - 5) ++ "px"
    82      , style "z-index" "2"
    83      , style "cursor" "col-resize"
    84      ]
    85  
    86  
    87  column : List (Html.Attribute msg)
    88  column =
    89      [ style "display" "flex"
    90      , style "flex-direction" "column"
    91      ]
    92  
    93  
    94  sectionHeader : List (Html.Attribute msg)
    95  sectionHeader =
    96      [ style "font-size" "14px"
    97      , style "overflow" "hidden"
    98      , style "white-space" "nowrap"
    99      , style "text-overflow" "ellipsis"
   100      , style "padding" "15px 5px 5px 10px"
   101      , fontWeightAttr Bold
   102      ]
   103  
   104  
   105  teamHeader : { a | background : Background } -> List (Html.Attribute msg)
   106  teamHeader { background } =
   107      [ style "display" "flex"
   108      , style "cursor" "pointer"
   109      , style "align-items" "center"
   110      , backgroundAttr background
   111      ]
   112  
   113  
   114  iconGroup : List (Html.Attribute msg)
   115  iconGroup =
   116      [ style "width" "54px"
   117      , style "display" "flex"
   118      , style "align-items" "center"
   119      , style "justify-content" "space-between"
   120      , style "padding" "5px"
   121      , style "box-sizing" "border-box"
   122      , style "flex-shrink" "0"
   123      ]
   124  
   125  
   126  type Opacity
   127      = Dim
   128      | GreyedOut
   129      | Bright
   130  
   131  
   132  opacityAttr : Opacity -> Html.Attribute msg
   133  opacityAttr opacity =
   134      style "opacity" <|
   135          case opacity of
   136              Dim ->
   137                  "0.5"
   138  
   139              GreyedOut ->
   140                  "0.7"
   141  
   142              Bright ->
   143                  "1"
   144  
   145  
   146  type SidebarElementColor
   147      = Grey
   148      | LightGrey
   149      | White
   150  
   151  
   152  teamColorAttr : SidebarElementColor -> Html.Attribute msg
   153  teamColorAttr teamColor =
   154      style "color" <|
   155          case teamColor of
   156              White ->
   157                  Colors.white
   158  
   159              _ ->
   160                  Colors.sideBarTextBright
   161  
   162  
   163  pipelineColorAttr : SidebarElementColor -> Html.Attribute msg
   164  pipelineColorAttr pipelineColor =
   165      style "color" <|
   166          case pipelineColor of
   167              Grey ->
   168                  Colors.sideBarTextDim
   169  
   170              LightGrey ->
   171                  Colors.sideBarTextBright
   172  
   173              White ->
   174                  Colors.white
   175  
   176  
   177  teamIcon : Html.Html msg
   178  teamIcon =
   179      Icon.icon
   180          { sizePx = 18
   181          , image = Assets.PeopleIcon
   182          }
   183          [ style "margin-left" "8px"
   184          , style "background-size" "contain"
   185          , style "flex-shrink" "0"
   186          ]
   187  
   188  
   189  collapseIcon : { opacity : Opacity, asset : Assets.Asset } -> Html.Html msg
   190  collapseIcon { asset } =
   191      Icon.icon
   192          { sizePx = 10
   193          , image = asset
   194          }
   195          [ style "margin-left" "10px"
   196          , style "flex-shrink" "0"
   197          ]
   198  
   199  
   200  teamName :
   201      { a | teamColor : SidebarElementColor }
   202      -> List (Html.Attribute msg)
   203  teamName { teamColor } =
   204      [ style "font-size" "14px"
   205      , style "padding" "5px 2.5px"
   206      , style "margin-left" "5px"
   207      , style "white-space" "nowrap"
   208      , style "overflow" "hidden"
   209      , style "text-overflow" "ellipsis"
   210      , style "flex-grow" "1"
   211      , style "color" Colors.sideBarTextBright
   212      , teamColorAttr teamColor
   213      , fontWeightAttr Bold
   214      ]
   215  
   216  
   217  type Background
   218      = Dark
   219      | Light
   220      | Invisible
   221  
   222  
   223  backgroundAttr : Background -> Html.Attribute msg
   224  backgroundAttr background =
   225      style "background-color" <|
   226          case background of
   227              Dark ->
   228                  Colors.sideBarActive
   229  
   230              Light ->
   231                  Colors.sideBarHovered
   232  
   233              Invisible ->
   234                  "inherit"
   235  
   236  
   237  type FontWeight
   238      = Default
   239      | Bold
   240  
   241  
   242  fontWeightAttr : FontWeight -> Html.Attribute msg
   243  fontWeightAttr weight =
   244      style "font-weight" <|
   245          case weight of
   246              Default ->
   247                  Views.Styles.fontWeightLight
   248  
   249              Bold ->
   250                  Views.Styles.fontWeightBold
   251  
   252  
   253  pipelineName :
   254      { a | pipelineColor : SidebarElementColor, weight : FontWeight }
   255      -> List (Html.Attribute msg)
   256  pipelineName { pipelineColor, weight } =
   257      [ style "font-size" "14px"
   258      , style "white-space" "nowrap"
   259      , style "overflow" "hidden"
   260      , style "text-overflow" "ellipsis"
   261      , style "padding" "5px 2.5px"
   262      , style "margin-left" "5px"
   263      , style "flex-grow" "1"
   264      , pipelineColorAttr pipelineColor
   265      , fontWeightAttr weight
   266      ]
   267  
   268  
   269  hamburgerMenu :
   270      { isSideBarOpen : Bool, isClickable : Bool }
   271      -> List (Html.Attribute msg)
   272  hamburgerMenu { isSideBarOpen, isClickable } =
   273      [ style "border-right" <| "1px solid " ++ Colors.border
   274      , style "opacity" "1"
   275      , style "cursor" <|
   276          if isClickable then
   277              "pointer"
   278  
   279          else
   280              "default"
   281      , style "background-color" <|
   282          if isSideBarOpen then
   283              Colors.sideBarBackground
   284  
   285          else
   286              Colors.hamburgerClosedBackground
   287      ]
   288  
   289  
   290  hamburgerIcon : { isHovered : Bool, isActive : Bool } -> List (Html.Attribute msg)
   291  hamburgerIcon { isHovered, isActive } =
   292      [ style "opacity" <|
   293          if isActive || isHovered then
   294              "1"
   295  
   296          else
   297              "0.5"
   298      ]
   299  
   300  
   301  team : List (Html.Attribute msg)
   302  team =
   303      [ style "padding-top" "5px", style "line-height" "1.2" ] ++ column
   304  
   305  
   306  pipeline : { a | background : Background } -> List (Html.Attribute msg)
   307  pipeline { background } =
   308      [ style "display" "flex"
   309      , style "align-items" "center"
   310      , style "margin-top" "2px"
   311      , backgroundAttr background
   312      ]
   313  
   314  
   315  pipelineIcon : Assets.Asset -> List (Html.Attribute msg)
   316  pipelineIcon asset =
   317      [ style "background-image" <|
   318          Assets.backgroundImage <|
   319              Just asset
   320      , style "background-repeat" "no-repeat"
   321      , style "height" "18px"
   322      , style "width" "18px"
   323      , style "background-size" "contain"
   324      , style "background-position" "center"
   325      , style "margin-left" "28px"
   326      , style "flex-shrink" "0"
   327      ]
   328  
   329  
   330  pipelineFavorite : { filled : Bool, isBright : Bool } -> List (Html.Attribute msg)
   331  pipelineFavorite fav =
   332      [ style "background-image" <|
   333          Assets.backgroundImage <|
   334              Just <|
   335                  Assets.FavoritedToggleIcon
   336                      { isFavorited = fav.filled, isHovered = fav.isBright, isSideBar = True }
   337      , style "background-repeat" "no-repeat"
   338      , style "background-position" "50% 50%"
   339      , style "height" <| String.fromFloat starWidth ++ "px"
   340      , style "width" <| String.fromFloat starWidth ++ "px"
   341      , style "background-size" "contain"
   342      , style "background-origin" "content-box"
   343      , style "padding" <| "0 " ++ String.fromFloat starPadding ++ "px"
   344      , style "flex-shrink" "0"
   345      , style "cursor" "pointer"
   346      , Attr.attribute "aria-label" "Favorite Icon"
   347      ]
   348  
   349  
   350  tooltip : Float -> Float -> List (Html.Attribute msg)
   351  tooltip top left =
   352      [ style "position" "fixed"
   353      , style "left" <| String.fromFloat left ++ "px"
   354      , style "top" <| String.fromFloat top ++ "px"
   355      , style "margin-top" "-15px"
   356      , style "z-index" "1"
   357      , style "display" "flex"
   358      ]
   359  
   360  
   361  tooltipBody : List (Html.Attribute msg)
   362  tooltipBody =
   363      [ style "background-color" Colors.tooltipBackground
   364      , style "color" Colors.tooltipText
   365      , style "padding-right" "10px"
   366      , style "font-size" "12px"
   367      , style "display" "flex"
   368      , style "align-items" "center"
   369      , style "height" "30px"
   370      ]