Update to new FontAwesome version, add semantic Icon layer for consis…

…tency.
Lattyware · May 30, 2022 · a6035da · a6035da
1 parent 08a61e6
commit a6035da
Show file tree

Hide file tree

Showing 43 changed files with 728 additions and 319 deletions.
diff --git a/client/elm.json b/client/elm.json
@@ -21,7 +21,7 @@
             "elm-community/list-extra": "8.5.2",
             "elm-community/random-extra": "3.2.0",
             "fapian/elm-html-aria": "1.4.0",
-            "lattyware/elm-fontawesome": "5.0.0",
+            "lattyware/elm-fontawesome": "6.0.0",
             "lattyware/elm-json-diff": "1.0.2",
             "myrho/elm-round": "1.0.4",
             "norpan/elm-html5-drag-drop": "3.1.4",

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -22,7 +22,7 @@
     "> 0.2%"
   ],
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@material/card": "^14.0.0",
     "@material/mwc-button": "^0.26.1",
     "@material/mwc-fab": "^0.26.1",

diff --git a/client/src/elm/MassiveDecks/Card/Call/Editor.elm b/client/src/elm/MassiveDecks/Card/Call/Editor.elm
@@ -5,9 +5,8 @@ module MassiveDecks.Card.Call.Editor exposing
     , view
     )
 
-import FontAwesome.Icon as Icon
+import FontAwesome as Icon
 import FontAwesome.Layering as Icon
-import FontAwesome.Solid as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -19,6 +18,7 @@ import MassiveDecks.Card.Parts as Parts exposing (Parts)
 import MassiveDecks.Card.Parts.Part as Part
 import MassiveDecks.Components.Form as Form
 import MassiveDecks.Components.Form.Message as Message
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Strings as Strings exposing (MdString)
 import MassiveDecks.Strings.Languages as Lang
@@ -134,8 +134,8 @@ view wrap shared { parts, selected, error } =
 
         inlineControls =
             Html.p []
-                [ Button.view shared Button.Outlined Strings.AddText Strings.AddText (Icon.plus |> Icon.viewIcon) [ addAction (Parts.Text "..." Part.NoStyle) |> HtmlE.onClick ]
-                , Button.view shared Button.Outlined Strings.AddSlot Strings.AddSlot (Icon.plus |> Icon.viewIcon) [ addSlot |> HtmlE.onClick ]
+                [ Button.view shared Button.Outlined Strings.AddText Strings.AddText (Icon.add |> Icon.view) [ addAction (Parts.Text "..." Part.NoStyle) |> HtmlE.onClick ]
+                , Button.view shared Button.Outlined Strings.AddSlot Strings.AddSlot (Icon.add |> Icon.view) [ addSlot |> HtmlE.onClick ]
                 ]
 
         selectedPart =
@@ -180,7 +180,7 @@ view wrap shared { parts, selected, error } =
                     Html.nothing
 
         viewError e =
-            Message.errorWithFix e [ { description = Strings.AddSlot, icon = Icon.plus, action = addSlot } ]
+            Message.errorWithFix e [ { description = Strings.AddSlot, icon = Icon.add, action = addSlot } ]
                 |> Message.view shared
     in
     Html.div [ HtmlA.class "call-editor" ]
@@ -243,17 +243,17 @@ controls wrap shared max selected =
             index |> Maybe.andThen (\i -> Move i by |> wrap |> Maybe.justIf (test i))
 
         generalControls =
-            [ IconButton.view shared Strings.Remove (Icon.minus |> Icon.present |> NeList.just) (index |> Maybe.map (Remove >> wrap))
-            , IconButton.view shared Strings.MoveLeft (Icon.arrowLeft |> Icon.present |> NeList.just) (move -1 ((<) 0))
-            , IconButton.view shared Strings.MoveRight (Icon.arrowRight |> Icon.present |> NeList.just) (move 1 ((>) max))
+            [ IconButton.view shared Strings.Remove (Icon.remove |> NeList.just) (index |> Maybe.map (Remove >> wrap))
+            , IconButton.view shared Strings.MoveLeft (Icon.left |> NeList.just) (move -1 ((<) 0))
+            , IconButton.view shared Strings.MoveRight (Icon.right |> NeList.just) (move 1 ((>) max))
             ]
 
         setIfDifferent old updated new =
             index |> Maybe.andThen (\i -> Set i (updated new) |> wrap |> Maybe.justIf (old /= new))
 
         styleControls setStyle =
-            [ IconButton.view shared Strings.Normal (Icon.font |> Icon.present |> NeList.just) (setStyle Part.NoStyle)
-            , IconButton.view shared Strings.Emphasise (Icon.italic |> Icon.present |> NeList.just) (setStyle Part.Em)
+            [ IconButton.view shared Strings.Normal (Icon.normalText |> NeList.just) (setStyle Part.NoStyle)
+            , IconButton.view shared Strings.Emphasise (Icon.italicText |> NeList.just) (setStyle Part.Em)
             ]
 
         transformControls setTransform =

diff --git a/client/src/elm/MassiveDecks/Card/Source/BuiltIn.elm b/client/src/elm/MassiveDecks/Card/Source/BuiltIn.elm
@@ -3,8 +3,7 @@ module MassiveDecks.Card.Source.BuiltIn exposing
     , methods
     )
 
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html as Html exposing (Html)
 import Html.Attributes as HtmlA
 import MassiveDecks.Card.Source.BuiltIn.Model exposing (..)
@@ -122,7 +121,7 @@ editor selected shared existing update _ _ =
                     , icon = Nothing
                     , primary = [ Html.text name ]
                     , secondary = Just secondary
-                    , meta = Icon.check |> Icon.viewIcon |> Maybe.justIf (existing |> List.any matches)
+                    , meta = Icon.accept |> Icon.view |> Maybe.justIf (existing |> List.any matches)
                     }
             in
             Html.div [ HtmlA.class "primary" ]
@@ -189,4 +188,4 @@ tooltip id renderTooltip =
 
 logo : () -> Maybe (Html msg)
 logo () =
-    Icon.massiveDecks |> Icon.viewIcon |> Just
+    Icon.massiveDecks |> Icon.view |> Just
diff --git a/client/src/elm/MassiveDecks/Card/Source/JsonAgainstHumanity.elm b/client/src/elm/MassiveDecks/Card/Source/JsonAgainstHumanity.elm
@@ -3,15 +3,15 @@ module MassiveDecks.Card.Source.JsonAgainstHumanity exposing
     , methods
     )
 
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html as Html exposing (Html)
 import Html.Attributes as HtmlA
 import List.Extra as List
 import MassiveDecks.Card.Source.JsonAgainstHumanity.Model exposing (..)
 import MassiveDecks.Card.Source.Methods as Source
 import MassiveDecks.Card.Source.Model as Source
 import MassiveDecks.Components.Form.Message as Message exposing (Message)
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Pages.Lobby.Configure.Decks.Model exposing (DeckOrError)
 import MassiveDecks.Strings as Strings exposing (MdString)
@@ -107,7 +107,7 @@ editor selected shared existing update _ _ =
                     , icon = Nothing
                     , primary = [ Html.text d.name ]
                     , secondary = Nothing
-                    , meta = Icon.check |> Icon.viewIcon |> Maybe.justIf (existing |> List.any matches)
+                    , meta = Icon.accept |> Icon.view |> Maybe.justIf (existing |> List.any matches)
                     }
             in
             Html.span [ HtmlA.id "json-against-humanity-editor", HtmlA.class "primary" ]
@@ -151,4 +151,4 @@ tooltip givenId tooltipRender =
 
 logo : () -> Maybe (Html msg)
 logo () =
-    Icon.code |> Icon.viewIcon |> Just
+    Icon.jsonAgainstHumanity |> Icon.view |> Just
diff --git a/client/src/elm/MassiveDecks/Card/Source/ManyDecks.elm b/client/src/elm/MassiveDecks/Card/Source/ManyDecks.elm
@@ -3,8 +3,7 @@ module MassiveDecks.Card.Source.ManyDecks exposing
     , methods
     )
 
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html as Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Events as HtmlE
@@ -13,6 +12,7 @@ import MassiveDecks.Card.Source.ManyDecks.Model exposing (..)
 import MassiveDecks.Card.Source.Methods as Source
 import MassiveDecks.Card.Source.Model as Source
 import MassiveDecks.Components.Form.Message as Message exposing (Message)
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Pages.Lobby.Configure.Decks.Model exposing (DeckOrError)
 import MassiveDecks.Strings as Strings exposing (MdString)
@@ -127,7 +127,7 @@ tooltip dc tooltipRender =
 
         content =
             [ Html.p [ HtmlA.class "source-id" ]
-                [ logoInternal
+                [ Icon.manyDecks |> Icon.view
                 , Html.div [ HtmlA.class "many-decks-deck-code" ] [ dc |> toString |> Html.text ]
                 ]
             ]
@@ -137,9 +137,4 @@ tooltip dc tooltipRender =
 
 logo : () -> Maybe (Html msg)
 logo () =
-    logoInternal |> Just
-
-
-logoInternal : Html msg
-logoInternal =
-    Icon.boxOpen |> Icon.viewIcon
+    Icon.manyDecks |> Icon.view |> Just
diff --git a/client/src/elm/MassiveDecks/Components/Form/Message.elm b/client/src/elm/MassiveDecks/Components/Form/Message.elm
@@ -12,11 +12,11 @@ module MassiveDecks.Components.Form.Message exposing
     , warning
     )
 
+import FontAwesome as Icon exposing (Icon)
 import FontAwesome.Attributes as Icon
-import FontAwesome.Icon as Icon exposing (Icon)
-import FontAwesome.Solid as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Model exposing (..)
 import MassiveDecks.Models.MdError as MdError exposing (MdError)
 import MassiveDecks.Strings exposing (MdString)
@@ -28,7 +28,7 @@ import Svg.Attributes as Svg
 
 type alias Fix msg =
     { description : MdString
-    , icon : Icon
+    , icon : Icon Icon.WithoutId
     , action : msg
     }
 
@@ -120,21 +120,21 @@ internalMessage shared { severity, description, fixes } =
         ( class, icon ) =
             case severity of
                 Info ->
-                    ( "info", Icon.infoCircle )
+                    ( "info", Icon.info )
 
                 Warning ->
-                    ( "warning", Icon.exclamationTriangle )
+                    ( "warning", Icon.warning )
 
                 Error ->
-                    ( "inline-error", Icon.exclamationCircle )
+                    ( "inline-error", Icon.bug )
     in
     Html.span [ HtmlA.class class ]
-        [ Icon.viewStyled [ Icon.fw, Svg.class "message-type-icon" ] icon
+        [ icon |> Icon.styled [ Icon.fw, Svg.class "message-type-icon" ] |> Icon.view
         , Html.span [] [ description |> Lang.html shared ]
         , Html.ul [ HtmlA.class "fixes" ] (fixes |> List.map (viewFix shared))
         ]
 
 
 viewFix : Shared -> Fix msg -> Html msg
 viewFix shared { icon, description, action } =
-    Html.li [] [ IconButton.view shared description (icon |> Icon.present |> NeList.just) (Just action) ]
+    Html.li [] [ IconButton.view shared description (icon |> NeList.just) (Just action) ]
diff --git a/client/src/elm/MassiveDecks/Components/Menu.elm b/client/src/elm/MassiveDecks/Components/Menu.elm
@@ -6,7 +6,7 @@ module MassiveDecks.Components.Menu exposing
     , view
     )
 
-import FontAwesome.Icon exposing (Icon)
+import FontAwesome as Icon exposing (Icon)
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import Html.Attributes.Aria as HtmlA
@@ -45,14 +45,14 @@ open isOpen =
 
 {-| Convenience function for a menu button.
 -}
-button : Icon -> MdString -> MdString -> Maybe msg -> Part msg
+button : Icon Icon.WithoutId -> MdString -> MdString -> Maybe msg -> Part msg
 button icon text description action =
     Button (Item icon text description) action
 
 
 {-| Convenience function for a menu link.
 -}
-link : Icon -> MdString -> MdString -> Maybe String -> Part msg
+link : Icon Icon.WithoutId -> MdString -> MdString -> Maybe String -> Part msg
 link icon text description href =
     Link (Item icon text description) href
 

diff --git a/client/src/elm/MassiveDecks/Components/Menu/Model.elm b/client/src/elm/MassiveDecks/Components/Menu/Model.elm
@@ -6,7 +6,7 @@ module MassiveDecks.Components.Menu.Model exposing
     , State(..)
     )
 
-import FontAwesome.Icon exposing (Icon)
+import FontAwesome as Icon exposing (Icon)
 import MassiveDecks.Strings exposing (MdString)
 
 
@@ -28,7 +28,7 @@ type Part msg
 {-| A menu item
 -}
 type alias Item =
-    { icon : Icon
+    { icon : Icon Icon.WithoutId
     , text : MdString
     , description : MdString
     }

diff --git a/client/src/elm/MassiveDecks/Error/Overlay.elm b/client/src/elm/MassiveDecks/Error/Overlay.elm
@@ -1,12 +1,12 @@
 module MassiveDecks.Error.Overlay exposing (init, update, view)
 
-import FontAwesome.Icon as Icon
-import FontAwesome.Solid as Icon
+import FontAwesome as Icon
 import Html exposing (Html)
 import Html.Attributes as HtmlA
 import MassiveDecks.Error as Error
 import MassiveDecks.Error.Messages exposing (..)
 import MassiveDecks.Error.Model as Error
+import MassiveDecks.Icon as Icon
 import MassiveDecks.Messages as Global
 import MassiveDecks.Model exposing (Shared)
 import MassiveDecks.Pages.Route exposing (Route)
@@ -32,11 +32,11 @@ view shared route model =
             [ Html.div [ HtmlA.class "actions" ]
                 [ IconButton.view shared
                     Strings.Close
-                    (Icon.times |> Icon.present |> NeList.just)
+                    (Icon.close |> NeList.just)
                     (Clear |> Global.ErrorMsg |> Just)
                 , IconButton.view shared
                     Strings.Refresh
-                    (Icon.redo |> Icon.present |> NeList.just)
+                    (Icon.redo |> NeList.just)
                     (Just Global.Refresh)
                 ]
             , Card.view [ HtmlA.class "help" ]