diff --git a/component-catalog-app/Examples/Tabs.elm b/component-catalog-app/Examples/Tabs.elm index 3f0d6667..241a16b1 100644 --- a/component-catalog-app/Examples/Tabs.elm +++ b/component-catalog-app/Examples/Tabs.elm @@ -113,7 +113,7 @@ example = allTabs { openTooltipId = model.openTooltip , withTooltips = settings.withTooltips - , fadeToPanelBackgroundColor = settings.fadeToPanelBackgroundColor + , pageBackgroundColor = settings.pageBackgroundColor } in [ ControlView.view @@ -139,7 +139,6 @@ example = , Maybe.map (\title -> moduleName ++ ".title " ++ Code.string title) settings.title , Maybe.map (\spacing -> moduleName ++ ".spacing " ++ String.fromFloat spacing) settings.customSpacing , Maybe.map (\color -> moduleName ++ ".pageBackgroundColor " ++ colorToCode color) settings.pageBackgroundColor - , Maybe.map (\color -> moduleName ++ ".fadeToPanelBackgroundColor " ++ colorToCode color) settings.fadeToPanelBackgroundColor , Maybe.map (\sticky -> case sticky of @@ -180,7 +179,17 @@ example = Css.backgroundColor (colorToCss color) ] ] - [ Tabs.view + [ case settings.pageBackgroundColor of + Nothing -> + Html.text "" + + Just _ -> + Message.view + [ Message.tip + , Message.plaintext "Container and tab panel background adjusted to match pageBackgroundColor. Note that the component won't do this for you automatically!" + , Message.css [ Css.marginBottom (Css.px 20) ] + ] + , Tabs.view { focusAndSelect = FocusAndSelectTab , selected = model.selected } @@ -189,7 +198,6 @@ example = , Maybe.map Tabs.title settings.title , Maybe.map Tabs.spacing settings.customSpacing , Maybe.map (Tabs.pageBackgroundColor << colorToCss) settings.pageBackgroundColor - , Maybe.map (Tabs.fadeToPanelBackgroundColor << colorToCss) settings.fadeToPanelBackgroundColor , Maybe.map (\stickiness -> case stickiness of @@ -211,7 +219,7 @@ example = allTabs : { openTooltipId : Maybe Int , withTooltips : Bool - , fadeToPanelBackgroundColor : Maybe Color + , pageBackgroundColor : Maybe Color } -> List ( String, Tab Int Msg ) allTabs config = @@ -222,7 +230,7 @@ allTabs config = buildTab : { openTooltipId : Maybe Int , withTooltips : Bool - , fadeToPanelBackgroundColor : Maybe Color + , pageBackgroundColor : Maybe Color } -> Int -> ( String, Tab Int Msg ) @@ -260,7 +268,7 @@ buildTab config id = ] , Tabs.build { id = id, idString = tabIdString } ([ Tabs.tabString tabName - , Tabs.panelHtml (panelContent config.fadeToPanelBackgroundColor id panelName) + , Tabs.panelHtml (panelContent config.pageBackgroundColor id panelName) ] ++ (if config.withTooltips then [ Tabs.withTooltip @@ -278,7 +286,7 @@ buildTab config id = panelContent : Maybe Color -> Int -> String -> Html.Html msg -panelContent fadeToPanelBackgroundColor_ id panelName = +panelContent pageBackgroundColor_ id panelName = let pangrams = -- cycle panels so that panel contents change when changing tabs @@ -299,30 +307,9 @@ panelContent fadeToPanelBackgroundColor_ id panelName = |> List.Extra.splitAt id |> (\( beforeSplit, afterSplit ) -> afterSplit ++ beforeSplit) in - Html.div - [ css - [ Css.padding2 (Css.px 20) (Css.px 10) - , case fadeToPanelBackgroundColor_ of - Nothing -> - Css.batch [] - - Just color -> - Css.backgroundColor (colorToCss color) - ] - ] + Html.div [ css [ Css.padding2 (Css.px 20) (Css.px 10) ] ] (List.concat - [ case fadeToPanelBackgroundColor_ of - Nothing -> - [] - - Just _ -> - [ Message.view - [ Message.tip - , Message.plaintext "Panel background adjusted to match fadeToPanelBackgroundColor attribute" - , Message.css [ Css.marginBottom (Css.px 20) ] - ] - ] - , List.map + [ List.map (\( title, content ) -> Panel.view [ Panel.header title @@ -356,7 +343,6 @@ type alias Settings = , customSpacing : Maybe Float , withTooltips : Bool , pageBackgroundColor : Maybe Color - , fadeToPanelBackgroundColor : Maybe Color , stickiness : Maybe Stickiness } @@ -412,7 +398,6 @@ initSettings = |> Control.field "customSpacing" (Control.maybe False (values String.fromFloat [ 2, 3, 4, 8, 16 ])) |> Control.field "withTooltips" (Control.bool True) |> Control.field "pageBackgroundColor" (Control.maybe False colorChoices) - |> Control.field "fadeToPanelBackgroundColor" (Control.maybe False colorChoices) |> Control.field "tabListSticky" (Control.maybe False (Control.choice diff --git a/src/Nri/Ui/Tabs/V8.elm b/src/Nri/Ui/Tabs/V8.elm index a97a2c32..d19a86d7 100644 --- a/src/Nri/Ui/Tabs/V8.elm +++ b/src/Nri/Ui/Tabs/V8.elm @@ -2,7 +2,6 @@ module Nri.Ui.Tabs.V8 exposing ( Attribute, title, spacing , Alignment(..), alignment , pageBackgroundColor - , fadeToPanelBackgroundColor , tabListSticky, TabListStickyConfig, tabListStickyCustom , view , Tab, TabAttribute, build @@ -24,7 +23,6 @@ module Nri.Ui.Tabs.V8 exposing @docs Attribute, title, spacing @docs Alignment, alignment @docs pageBackgroundColor -@docs fadeToPanelBackgroundColor @docs tabListSticky, TabListStickyConfig, tabListStickyCustom @docs view @@ -174,25 +172,22 @@ spacing spacing_ = Attribute (\config -> { config | spacing = Just spacing_ }) -{-| Tell this tab list about the background color of the page it lievs on. This -is mostly useful when setting up sticky headers, to prevent page content from -showing through the background. +{-| Tell this tab list about the background color of the page it lievs on. + +You may want to use this if, for example: + + - you are setting up sticky headers, to prevent page content from showing + through the background. + + - you are using tabs in a page that has non-white background, so the + background of the active tab fades into the panel below it. + -} pageBackgroundColor : Css.Color -> Attribute id msg pageBackgroundColor color = Attribute (\config -> { config | pageBackgroundColor = Just color }) -{-| The active tab will be white by default, which may look bad if the panel -below it doesn't have a white background. This attribute lets you make the -active tab's background fade from white (at the top) to the desired color (at -the bottom) to make it match the background of the current panel. --} -fadeToPanelBackgroundColor : Css.Color -> Attribute id msg -fadeToPanelBackgroundColor color = - Attribute (\config -> { config | fadeToPanelBackgroundColor = color }) - - {-| Make the tab list sticky. You probably want to set an explicit background color along with this! -} @@ -214,7 +209,6 @@ type alias Config = , alignment : Alignment , spacing : Maybe Float , pageBackgroundColor : Maybe Css.Color - , fadeToPanelBackgroundColor : Css.Color , tabListStickyConfig : Maybe TabListStickyConfig } @@ -225,7 +219,6 @@ defaultConfig = , alignment = Left , spacing = Nothing , pageBackgroundColor = Nothing - , fadeToPanelBackgroundColor = Colors.white , tabListStickyConfig = Nothing } @@ -276,7 +269,10 @@ view { focusAndSelect, selected } attrs tabs = { focusAndSelect = focusAndSelect , selected = selected , tabs = List.map (\(Tab t) -> t) tabs - , tabStyles = tabStyles config.spacing config.fadeToPanelBackgroundColor + , tabStyles = + tabStyles + config.spacing + (Maybe.withDefault Colors.white config.pageBackgroundColor) , tabListStyles = stylesTabsAligned config } in @@ -376,18 +372,18 @@ maybeStyle styler maybeValue = tabStyles : Maybe Float -> Css.Color -> Int -> Bool -> List Style -tabStyles customSpacing fadeToPanelBackgroundColor_ index isSelected = +tabStyles customSpacing pageBackgroundColor_ index isSelected = let stylesDynamic = if isSelected then [ Css.borderBottom (Css.px 1) , Css.borderBottomStyle Css.solid , Css.backgroundColor Colors.white - , Css.borderBottomColor fadeToPanelBackgroundColor_ + , Css.borderBottomColor pageBackgroundColor_ , Css.backgroundImage <| Css.linearGradient2 Css.toTop - (Css.stop2 (withAlpha 1 fadeToPanelBackgroundColor_) (Css.pct 0)) - (Css.stop2 (withAlpha 0 fadeToPanelBackgroundColor_) (Css.pct 100)) + (Css.stop2 (withAlpha 1 pageBackgroundColor_) (Css.pct 0)) + (Css.stop2 (withAlpha 0 pageBackgroundColor_) (Css.pct 100)) [] ]