NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2025-01-08 07:27:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

Begin supporting a different view for the sidenav on mobile

Browse Source
This commit is contained in:
Tessa Kelly 2023-03-28 12:22:07 -06:00
parent cfaa1cccf5
commit fa384163e4
1 changed files with 56 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/Nri/Ui/SideNav/V4.elm
View File

@ -291,47 +291,70 @@ viewOpenCloseButton sidenavId navLabel_ { isOpen, toggle, isTooltipOpen, toggleT
|> Svg.withCss [ Css.transform (rotate (deg 180)) ]
)
trigger tooltipAttributes =
trigger attributes =
ClickableSvg.button action
icon_
[ ClickableSvg.custom
([ ClickableSvg.custom
[ Aria.controls [ sidenavId ]
, Aria.expanded isOpen
]
, ClickableSvg.custom tooltipAttributes
, ClickableSvg.onClick (toggle (not isOpen))
, ClickableSvg.secondary
, ClickableSvg.withBorder
, ClickableSvg.iconForMobile (AnimatedIcon.mobileOpenClose isOpen)
]
in
Tooltip.view
{ trigger = trigger
, id = "open-close-sidebar-tooltip"
}
[ Tooltip.open isTooltipOpen
, Tooltip.onToggle toggleTooltip
, Tooltip.plaintext action
, Tooltip.smallPadding
, Tooltip.fitToContent
, if isOpen then
Tooltip.onLeft
, ClickableSvg.onClick (toggle (not isOpen))
, ClickableSvg.secondary
, ClickableSvg.withBorder
, ClickableSvg.iconForMobile (AnimatedIcon.mobileOpenClose isOpen)
]
++ attributes
)
else
Tooltip.onRight
, Tooltip.onRightForMobile
, Tooltip.containerCss
(if isOpen then
[ Css.Media.withMedia [ MediaQuery.notMobile ]
[ Css.position Css.absolute
, Css.top (Css.px 10)
, Css.right (Css.px 10)
nonMobileTooltipView =
Tooltip.view
{ trigger = \tooltipAttributes -> trigger [ ClickableSvg.custom tooltipAttributes ]
, id = "open-close-sidebar-tooltip"
}
[ Tooltip.open isTooltipOpen
, Tooltip.onToggle toggleTooltip
, Tooltip.plaintext action
, Tooltip.smallPadding
, Tooltip.fitToContent
, if isOpen then
Tooltip.onLeft
else
Tooltip.onRight
, Tooltip.containerCss
[ -- Hide the tooltip for mobile. We'll display static text instead
Css.Media.withMedia [ MediaQuery.mobile ]
[ Css.display Css.none ]
]
, Tooltip.containerCss
(if isOpen then
[ Css.Media.withMedia [ MediaQuery.notMobile ]
[ Css.position Css.absolute
, Css.top (Css.px 10)
, Css.right (Css.px 10)
]
]
else
[]
)
]
mobileButtonView =
div
[ Attributes.css
[ -- Hide the plain button/static text if not on the mobile view
Css.display Css.none
, Css.Media.withMedia [ MediaQuery.mobile ]
[ Css.display Css.block ]
]
]
else
[]
)
[ trigger []
]
in
div []
[ nonMobileTooltipView
, mobileButtonView
]