Skip to content

Commit

Permalink
web: switch dashboard cli icons to svg
Browse files Browse the repository at this point in the history 
#2405
  • Loading branch information
Jamie Klassen committed Dec 31, 2018
1 parent 24f3c9f commit 551181e
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 76 deletions.
23 changes: 0 additions & 23 deletions web/assets/css/production.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,33 +42,10 @@
padding-left: 7px;
}

.display-in-middle .cli-downloads li {
margin: 0.5em;
border: 1px solid white;
padding-left: 0;

&:hover {
background: #242424;
}
}

.cli-downloads a {
text-decoration: none;
}

.display-in-middle .cli-downloads a {
display: inline-block;
padding: 2em;

.fa-apple {
padding: 0 0.07em;
}

.fa-linux {
padding: 0 0.03em;
}
}

.lower-right-info {
position: fixed;
bottom: 1em;
Expand Down
100 changes: 72 additions & 28 deletions web/elm/src/Dashboard/Footer.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ tick : Model r -> Model r
tick model =
if model.hideFooterCounter > 4 then
{ model | hideFooter = True }

else
{ model | hideFooterCounter = model.hideFooterCounter + 1 }

Expand All @@ -52,8 +53,10 @@ view : Model r -> List (Html Msg)
view model =
if model.showHelp then
[ keyboardHelp ]

else if not model.hideFooter then
[ infoBar model ]

else
[]

Expand Down Expand Up @@ -121,6 +124,7 @@ legend :
legend model =
if hideLegend model then
[]

else
[ Html.div
[ id "legend"
Expand Down Expand Up @@ -189,17 +193,18 @@ toggleView highDensity =
route =
if highDensity then
Routes.dashboardRoute

else
Routes.dashboardHdRoute
in
Html.a
[ style Styles.highDensityToggle
, href route
, attribute "aria-label" "Toggle high-density view"
]
[ Html.div [ style <| Styles.highDensityIcon highDensity ] []
, Html.text "high-density"
]
Html.a
[ style Styles.highDensityToggle
, href route
, attribute "aria-label" "Toggle high-density view"
]
[ Html.div [ style <| Styles.highDensityIcon highDensity ] []
, Html.text "high-density"
]


legendSeparator : ScreenSize.ScreenSize -> List (Html Msg)
Expand All @@ -222,25 +227,64 @@ legendSeparator screenSize =


cliIcon : Cli.Cli -> Maybe Cli.Cli -> Html Msg
cliIcon cli hoveredCliIcon =
let
( cliName, ariaText, icon ) =
case cli of
Cli.OSX ->
( "osx", "OS X", "apple" )
cliIcon cli =
case cli of
Cli.OSX ->
cliIconOSX

Cli.Windows ->
( "windows", "Windows", "windows" )
Cli.Windows ->
cliIconWindows

Cli.Linux ->
( "linux", "Linux", "linux" )
in
Html.a
[ href (Cli.downloadUrl "amd64" cliName)
, attribute "aria-label" <| "Download " ++ ariaText ++ " CLI"
, style <| Styles.infoCliIcon (hoveredCliIcon == Just cli)
, id <| "cli-" ++ cliName
, onMouseEnter <| CliHover <| Just cli
, onMouseLeave <| CliHover Nothing
]
[ Html.i [ class <| "fa fa-" ++ icon ] [] ]
Cli.Linux ->
cliIconLinux


cliIconOSX : Maybe Cli.Cli -> Html Msg
cliIconOSX hoveredCliIcon =
Html.a
[ href (Cli.downloadUrl "amd64" "osx")
, attribute "aria-label" <| "Download OS X CLI"
, style <|
Styles.infoCliIcon
{ hovered = hoveredCliIcon == Just Cli.OSX
, image = "apple"
}
, id <| "cli-osx"
, onMouseEnter <| CliHover <| Just Cli.OSX
, onMouseLeave <| CliHover Nothing
]
[]


cliIconWindows : Maybe Cli.Cli -> Html Msg
cliIconWindows hoveredCliIcon =
Html.a
[ href (Cli.downloadUrl "amd64" "windows")
, attribute "aria-label" <| "Download Windows CLI"
, style <|
Styles.infoCliIcon
{ hovered = hoveredCliIcon == Just Cli.Windows
, image = "windows"
}
, id <| "cli-windows"
, onMouseEnter <| CliHover <| Just Cli.Windows
, onMouseLeave <| CliHover Nothing
]
[]


cliIconLinux : Maybe Cli.Cli -> Html Msg
cliIconLinux hoveredCliIcon =
Html.a
[ href (Cli.downloadUrl "amd64" "linux")
, attribute "aria-label" <| "Download Linux CLI"
, style <|
Styles.infoCliIcon
{ hovered = hoveredCliIcon == Just Cli.Linux
, image = "linux"
}
, id <| "cli-linux"
, onMouseEnter <| CliHover <| Just Cli.Linux
, onMouseLeave <| CliHover Nothing
]
[]
17 changes: 11 additions & 6 deletions web/elm/src/Dashboard/Styles.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,16 +413,21 @@ infoItem =
]


infoCliIcon : Bool -> List ( String, String )
infoCliIcon hovered =
infoCliIcon : { hovered : Bool, image : String } -> List ( String, String )
infoCliIcon { hovered, image } =
[ ( "margin-right", "10px" )
, ( "font-size", "1.2em" )
, ( "color"
, ( "width", "20px" )
, ( "height", "20px" )
, ( "background-image", "url(/public/images/" ++ image ++ "_logo.svg)" )
, ( "background-repeat", "no-repeat" )
, ( "background-position", "50% 50%" )
, ( "background-size", "contain" )
, ( "opacity"
, if hovered then
Colors.cliIconHover
"1"

else
Colors.bottomBarText
"0.5"
)
]

Expand Down
69 changes: 50 additions & 19 deletions web/elm/tests/DashboardTests.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2502,16 +2502,11 @@ all =
|> Query.index -1
|> Query.children [ tag "a" ]
in
[ test "font size is slightly larger" <|
[ test "icons are grey" <|
\_ ->
cliIcons
|> Query.each
(Query.has [ style [ ( "font-size", "1.2em" ) ] ])
, test "icons are grey" <|
\_ ->
cliIcons
|> Query.each
(Query.has [ style [ ( "color", menuGrey ) ] ])
(Query.has [ style [ ( "opacity", "0.5" ) ] ])
, test "icons have descriptive ARIA labels" <|
\_ ->
cliIcons
Expand Down Expand Up @@ -2551,19 +2546,31 @@ all =
, unhoveredSelector =
{ description = "grey apple icon"
, selector =
[ style [ ( "color", menuGrey ) ]
, containing [ tag "i", class "fa-apple" ]
[ style
[ ( "opacity", "0.5" )
, ( "background-size", "contain" )
]
]
++ iconSelector
{ image = "apple_logo.svg"
, size = "20px"
}
}
, updateFunc = \msg -> Dashboard.update msg >> Tuple.first
, mouseEnterMsg = Msgs.CliHover <| Just Cli.OSX
, mouseLeaveMsg = Msgs.CliHover Nothing
, hoveredSelector =
{ description = "white apple icon"
, selector =
[ style [ ( "color", white ) ]
, containing [ tag "i", class "fa-apple" ]
[ style
[ ( "opacity", "1" )
, ( "background-size", "contain" )
]
]
++ iconSelector
{ image = "apple_logo.svg"
, size = "20px"
}
}
}
, defineHoverBehaviour
Expand All @@ -2578,19 +2585,31 @@ all =
, unhoveredSelector =
{ description = "grey windows icon"
, selector =
[ style [ ( "color", menuGrey ) ]
, containing [ tag "i", class "fa-windows" ]
[ style
[ ( "opacity", "0.5" )
, ( "background-size", "contain" )
]
]
++ iconSelector
{ image = "windows_logo.svg"
, size = "20px"
}
}
, updateFunc = \msg -> Dashboard.update msg >> Tuple.first
, mouseEnterMsg = Msgs.CliHover <| Just Cli.Windows
, mouseLeaveMsg = Msgs.CliHover Nothing
, hoveredSelector =
{ description = "white windows icon"
, selector =
[ style [ ( "color", white ) ]
, containing [ tag "i", class "fa-windows" ]
[ style
[ ( "opacity", "1" )
, ( "background-size", "contain" )
]
]
++ iconSelector
{ image = "windows_logo.svg"
, size = "20px"
}
}
}
, defineHoverBehaviour
Expand All @@ -2605,19 +2624,31 @@ all =
, unhoveredSelector =
{ description = "grey linux icon"
, selector =
[ style [ ( "color", menuGrey ) ]
, containing [ tag "i", class "fa-linux" ]
[ style
[ ( "opacity", "0.5" )
, ( "background-size", "contain" )
]
]
++ iconSelector
{ image = "linux_logo.svg"
, size = "20px"
}
}
, updateFunc = \msg -> Dashboard.update msg >> Tuple.first
, mouseEnterMsg = Msgs.CliHover <| Just Cli.Linux
, mouseLeaveMsg = Msgs.CliHover Nothing
, hoveredSelector =
{ description = "white linux icon"
, selector =
[ style [ ( "color", white ) ]
, containing [ tag "i", class "fa-linux" ]
[ style
[ ( "opacity", "1" )
, ( "background-size", "contain" )
]
]
++ iconSelector
{ image = "linux_logo.svg"
, size = "20px"
}
}
}
]
Expand Down

0 comments on commit 551181e

Please sign in to comment.