Skip to content

Commit

Permalink
refactor(style): make native style opt-in
Browse files Browse the repository at this point in the history
  • Loading branch information
@U-cauda-elongata
U-cauda-elongata committed Sep 25, 2024
1 parent cfc5b03 commit 81e7ca9
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 34 deletions.
39 changes: 9 additions & 30 deletions src/Main.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -989,7 +989,6 @@ view model =
in
button
[ class "hamburger"
, class "unstyle"
, classList [ ( "filter-active", Filter.isActive model.filter ) ]
, ariaLabelledby <| iconId
, ariaDescribedby hamburgerDescriptionId
Expand Down Expand Up @@ -1058,12 +1057,11 @@ hamburgerDescriptionId =
viewDrawer : Translations -> Bool -> Mode -> List String -> Filter -> Html Msg
viewDrawer translations expanded mode searchSuggestions filter =
menu
[ class "drawer-menu", class "unstyle" ]
[ class "drawer-menu" ]
[ li []
[ button
[ id hamburgerLabelButtonId
, class "drawer-item"
, class "unstyle"
, ariaLabel <| T.expandMenu translations
, ariaDescribedby hamburgerDescriptionId
, ariaPressed <| expanded
Expand All @@ -1087,7 +1085,6 @@ viewDrawer translations expanded mode searchSuggestions filter =
button
[ class "drawer-item"
, class "filter-clear-button"
, class "unstyle"
, title labelText
, disabled <| not <| Filter.isActive filter
, onClick ClearFilter
Expand Down Expand Up @@ -1116,7 +1113,6 @@ viewDrawer translations expanded mode searchSuggestions filter =
[ id aboutButtonId
, class "drawer-item"
, class "about-button"
, class "unstyle"
, title labelText
, ariaControls aboutDialogId
, ariaExpanded <|
Expand Down Expand Up @@ -1192,7 +1188,7 @@ viewSearch translations suggestions q =
viewFeedFilter : Translations -> List Feed -> Html Msg
viewFeedFilter translations feeds =
li [ class "feed-filter" ]
[ ul [ ariaLabel <| T.feedFilterLabel translations ]
[ ul [ class "native", ariaLabel <| T.feedFilterLabel translations ]
(feeds
|> List.indexedMap
(\i feed ->
Expand All @@ -1204,7 +1200,6 @@ viewFeedFilter translations feeds =
[ button
[ class "drawer-item"
, class "filter-button"
, class "unstyle"
, role "switch"
, title feed.preset.title
, onClick <| ToggleFeedFilter i
Expand Down Expand Up @@ -1319,7 +1314,6 @@ viewMain env now activePopup pendingFeed filter events =
-- focusable in order to make it keyboard-navigable.
[ button
[ class "load-more-feed-button"
, class "unstyle"
, ariaLabel <| T.loadMoreLabel env.translations
, onClick <| GetFeed url
]
Expand All @@ -1333,7 +1327,6 @@ viewMain env now activePopup pendingFeed filter events =
Retry url ->
[ button
[ class "load-more-feed-button"
, class "unstyle"
, ariaLabel <| T.retryLoadingLabel env.translations
, onClick <| RetryGetFeed url
]
Expand Down Expand Up @@ -1398,7 +1391,7 @@ viewKeyedDateSection env now activePopup filter date items =
xs ->
[ viewDate, text <| ": " ++ String.join ", " xs ]
]
, Keyed.ul [ class "timeline", class "unstyle" ]
, Keyed.ul [ class "timeline" ]
(items
|> List.map
(\item ->
Expand All @@ -1424,7 +1417,7 @@ viewKeyedDateSection env now activePopup filter date items =
section [ id nowSectionId, class "ongoing", tabindex -1 ]
[ header [ class "now" ]
[ h2 [] <| T.ongoingCustom env.translations text viewTime ]
, Keyed.ul [ class "timeline", class "unstyle" ]
, Keyed.ul [ class "timeline" ]
(ongoing_items
|> List.map
(\( feed, event ) ->
Expand Down Expand Up @@ -1627,7 +1620,7 @@ viewEvent env now filter popupExpanded feed event =
ariaDescribedby descriptionId
]
(div [ class "event-padding" ] [ div [ lang env.lang ] viewTimeInfo, eventHeader ]
:: ul [ class "event-members" ]
:: ul [ class "event-members", class "native" ]
(viewEventMember True feed :: (members |> List.map (viewEventMember False)))
:: div [ id descriptionId, lang env.lang, hidden True ] description
:: (if env.features.copy || env.features.share then
Expand Down Expand Up @@ -1659,7 +1652,6 @@ viewEventPopup env expanded event =
[ class "popup-container", lang env.lang ]
[ button
[ class "popup-toggle"
, class "unstyle"
, ariaHaspopup "menu"
, ariaControls popupId
, ariaExpanded expanded
Expand All @@ -1679,7 +1671,7 @@ viewEventPopup env expanded event =
[ text "…" ]
, div [ class "popup-backdrop" ]
[ menu
[ id popupId, class "popup", class "unstyle", ariaLabel shareLabel ]
[ id popupId, class "popup", ariaLabel shareLabel ]
-- TODO: Add icons to the list items too.
(let
firstId =
Expand All @@ -1693,9 +1685,7 @@ viewEventPopup env expanded event =
[ button
(let
attrs =
[ class "unstyle"
, onClick <| Share event.name event.link
]
[ onClick <| Share event.name event.link ]
in
if env.features.copy then
attrs
Expand All @@ -1716,7 +1706,6 @@ viewEventPopup env expanded event =
li []
[ button
[ id firstId
, class "unstyle"
, onClick <|
Copy
(event.link
Expand All @@ -1729,8 +1718,7 @@ viewEventPopup env expanded event =
:: -- "Copy timestamp"
li []
[ button
[ class "unstyle"
, onClick <|
[ onClick <|
Copy <|
String.fromInt
(Time.posixToMillis event.time // 1000)
Expand Down Expand Up @@ -1776,7 +1764,6 @@ viewErrorLog : Translations -> List Error -> Html Msg
viewErrorLog translations errors =
ul
[ class "error-log"
, class "unstyle"
, role "log"
, ariaLive "assertive"
, ariaLabel <| TError.error translations
Expand All @@ -1798,7 +1785,6 @@ viewError translations errIdx err =
, text <| ">: " ++ httpErrorToString e
, button
[ class "dismiss-error"
, class "unstyle"
, onClick <| RetryGetTranslations lang errIdx
]
[ text "Retry" ]
Expand All @@ -1816,7 +1802,6 @@ viewError translations errIdx err =
(text <| httpErrorToString e)
++ [ button
[ class "dismiss-error"
, class "unstyle"
, onClick <| DismissError errIdx
]
[ text <| TError.dismiss translations ]
Expand Down Expand Up @@ -1881,7 +1866,6 @@ viewAboutDialog translations mode copying =
[ button
[ class "dialog-title-bar-button"
, class "modal-back-button"
, class "unstyle"
, disabled <| mode == About AboutMain
, ariaLabel <| T.goBackTo translations titleText
, onClick AboutBackToMain
Expand All @@ -1898,7 +1882,6 @@ viewAboutDialog translations mode copying =
, button
[ id aboutCloseButtonId
, class "dialog-title-bar-button"
, class "unstyle"
, ariaLabel <| T.closeDialog translations
, onClick <| SetMode None
]
Expand All @@ -1912,15 +1895,13 @@ viewAboutDialog translations mode copying =
]
, button
[ class "modal-backdrop-button"
, class "unstyle"
, hidden <| mode == About AboutMain
, ariaLabel <| T.goBackTo translations <| TAbout.title translations
, onClick AboutBackToMain
]
[ Icon.backButton ]
, button
[ class "modal-backdrop-button"
, class "unstyle"
, ariaLabel <| T.srCloseDialog translations
, onClick <| SetMode None
]
Expand Down Expand Up @@ -1976,7 +1957,7 @@ viewAboutDialogCopying copying attrs =
div (class "copying-error" :: attrs)
[ h3 [] [ text "Error" ]
, p [] [ text <| httpErrorToString err ]
, button [ onClick AboutRetryGetCopying ] [ text "Retry" ]
, button [ class "native", onClick AboutRetryGetCopying ] [ text "Retry" ]
]


Expand Down Expand Up @@ -2010,7 +1991,6 @@ viewHelpDialog translations mode =
, button
[ id helpCloseButtonId
, class "dialog-title-bar-button"
, class "unstyle"
, ariaLabel <| T.closeDialog translations
, onClick <| SetMode None
]
Expand Down Expand Up @@ -2040,7 +2020,6 @@ viewHelpDialog translations mode =
]
, button
[ class "modal-backdrop-button"
, class "unstyle"
, ariaLabel <| T.srCloseDialog translations
, onClick <| SetMode None
]
Expand Down
8 changes: 4 additions & 4 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,17 +63,17 @@ li {
display: block;
}

/* Sometimes we want to use the default style, and sometimes not.
* Use the `unstyle` class to opt out of the default style in such cases. */
.unstyle:where(button) {
/* We don't want the default style in most cases, but sometimes we need it.
* Use the `native` class to opt in the default style when needed. */
button:where(:not(.native)) {
appearance: none;
border: none;
color: inherit;
background: none;
font-family: inherit;
}

.unstyle:where(menu, ol, ul) {
menu:where(:not(.native)), ol:where(:not(.native)), ul:where(:not(.native)) {
margin: initial;
padding: initial;
}
Expand Down

0 comments on commit 81e7ca9

Please sign in to comment.