elm-format

src/Items/FlavorPicker.elm

@@ -1,33 +1,49 @@
 module Items.FlavorPicker exposing (..)
+
 {-| This module allows the user to pick whatever flavor they want to use.
 -}
 
 import Color exposing (Color)
 import Element exposing (Element)
+import Element.Events
 import Html.Attributes
+import Layout
 import Material.Icons
 import Theme exposing (Flavor(..))
-import Layout
+
-import Element.Events
+
 
 -- MODEL
-
 -- UPDATE
-
 -- VIEW
 
+
 view :
     { height : Int
     , flavor : Flavor
     , onClick : Flavor -> msg
     , themeIcon : Flavor -> Color
     , width : Int
-    } -> Element msg
+    }
+    -> Element msg
 view data =
     let
-        lightMode = data.flavor == Latte
+        lightMode =
-        icon = if lightMode then Material.Icons.dark_mode else Material.Icons.light_mode
+            data.flavor == Latte
-        newFlavor = if lightMode then Frappe else Latte
+
+        icon =
+            if lightMode then
+                Material.Icons.dark_mode
+
+            else
+                Material.Icons.light_mode
+
+        newFlavor =
+            if lightMode then
+                Frappe
+
+            else
+                Latte
     in
     Element.el
         [ Element.Events.onClick (data.onClick newFlavor)
@@ -40,4 +56,3 @@ view data =
             , width = data.width
             }
         )
-

src/Items/Introduction.elm

@@ -1,28 +1,35 @@
 module Items.Introduction exposing (..)
 
-
 import Color exposing (Color)
 import Element exposing (Element)
 import Element.Background
-import Widget.Material.Typography
 import Theme
+import Widget.Material.Typography
+
+
 
 -- MODEL
 
-type alias Model = ()
 
-type alias Msg = ()
+type alias Model =
+    ()
+
+
+type alias Msg =
+    ()
+
+
 
 -- UPDATE
-
 -- SUBSCRIPTIONS
-
 -- VIEW
 
+
 view :
     { colorBackground : Color
     , width : Int
-    } -> Element msg
+    }
+    -> Element msg
 view data =
     [ header "Martiplier"
     , text "Martiplier (short for Matrix Plier) is a unique client. It doesn't let you browse rooms and have chat conversations."
@@ -35,10 +42,14 @@ view data =
             , Element.width (Element.px data.width)
             ]
 
+
 header : String -> Element msg
 header =
-    Element.text >> Element.el Widget.Material.Typography.h1
+    Element.text
-        >> List.singleton >> Element.paragraph []
+        >> Element.el Widget.Material.Typography.h1
+        >> List.singleton
+        >> Element.paragraph []
+
 
 text : String -> Element msg
 text =

src/Items/ItemPicker.elm

@@ -1,26 +1,36 @@
 module Items.ItemPicker exposing (..)
 
-import Iddict exposing (Iddict)
+import Color exposing (Color)
 import Element exposing (Element)
+import Iddict exposing (Iddict)
 import Layout
 import Material.Icons
-import Color exposing (Color)
+
+
 
 -- MODEL
 
+
 type alias Model a =
     { hover : Maybe Int
     , items : Iddict a
     }
 
-type Msg = OnHover Int | OnHoverOut Int
+
+type Msg
+    = OnHover Int
+    | OnHoverOut Int
+
 
 init : Iddict a -> Model a
 init iddict =
     { hover = Nothing, items = iddict }
 
+
+
 -- UPDATE
 
+
 update : Msg -> Model a -> Model a
 update msg model =
     case msg of
@@ -30,19 +40,26 @@ update msg model =
         OnHoverOut i ->
             if model.hover == Just i then
                 { model | hover = Nothing }
+
             else
                 model
 
+
 updateContent : (Iddict a -> Iddict a) -> Model a -> Model a
 updateContent f model =
     { model | items = f model.items }
 
+
+
 -- VIEW
 
+
 {-| Extract the original data set out of the item picker.
 -}
 extract : Model a -> Iddict a
-extract = .items
+extract =
+    .items
+
 
 {-| Display the item picker. Note that the item should not be wider than 360px.
 -}
@@ -56,7 +73,8 @@ view :
     , onAddNew : Maybe msg
     , onClick : Int -> msg
     , width : Int
-    } -> Element msg
+    }
+    -> Element msg
 view data =
     Layout.sideList
         { color = data.colorMenu

src/Items/LoginView.elm

@@ -1,4 +1,5 @@
 module Items.LoginView exposing (..)
+
 {-| The Login screen allows the user to log in, as well as view a short display
 of what to expect from the Matrix client.
 -}
@@ -7,15 +8,18 @@ import Color exposing (Color)
 import Element exposing (Element)
 import Element.Background
 import Element.Border
+import Items.FlavorPicker as FlavorPicker
+import Layout
+import Material.Icons
 import Matrix
 import Matrix.Settings
 import Theme
-import Layout
+
-import Items.FlavorPicker as FlavorPicker
+
-import Material.Icons
 
 -- MODEL
 
+
 type alias Model =
     { accessToken : String
     , loginMethod : LoginMethod
@@ -23,16 +27,19 @@ type alias Model =
     , username : String
     }
 
+
 type Msg
     = SetAccessToken String
     | SetPassword String
     | SetUsername String
     | SwitchMethod LoginMethod
 
+
 type LoginMethod
     = AccessToken
     | Password
 
+
 init : Model
 init =
     { accessToken = ""
@@ -41,8 +48,11 @@ init =
     , username = ""
     }
 
+
+
 -- UPDATE
 
+
 update : Msg -> Model -> Model
 update msg model =
     case msg of
@@ -58,8 +68,11 @@ update msg model =
         SwitchMethod method ->
             { model | loginMethod = method }
 
+
+
 -- VIEW
 
+
 view :
     { colorBackground : Color
     , colorMain : Color
@@ -73,7 +86,8 @@ view :
     , onSubmit : Matrix.Vault -> msg
     , toMsg : Msg -> msg
     , width : Int
-    } -> Element msg
+    }
+    -> Element msg
 view data =
     [ viewLoginMethodPicker
         { color = data.colorMain
@@ -147,6 +161,7 @@ view data =
             , Element.width (Element.px data.width)
             ]
 
+
 toVault : Model -> Maybe Matrix.Vault
 toVault model =
     case model.loginMethod of
@@ -168,6 +183,7 @@ toVault model =
                     |> Matrix.fromUserId
                     |> Maybe.map (Matrix.Settings.setPassword model.password)
 
+
 viewLoginMethodPicker : { color : Color, loginMethod : LoginMethod, toMsg : LoginMethod -> msg } -> Element msg
 viewLoginMethodPicker data =
     Layout.tab
@@ -182,12 +198,12 @@ viewLoginMethodPicker data =
               }
             ]
         , onSelect =
-                (\i ->
+            \i ->
                 if i == 0 then
                     data.toMsg AccessToken
+
                 else
                     data.toMsg Password
-                )
         , selected =
             case data.loginMethod of
                 AccessToken ->

src/Items/VaultList.elm

@@ -1,39 +1,57 @@
 module Items.VaultList exposing (..)
-{-| # Vault list
+
+{-|
+
+
+# Vault list
 
 The vault list contains a list of stored vaults that can be picked from.
+
 -}
 
 import Iddict exposing (Iddict)
 import Matrix
 
+
+
 -- MODEL
 
-type alias Model = Iddict VaultBlock
+
+type alias Model =
+    Iddict VaultBlock
+
 
 type Msg
     = AddVault { name : String, vault : Matrix.Vault }
     | OnVaultUpdate Int Matrix.VaultUpdate
 
+
 type alias VaultBlock =
     { logs : List { channel : String, content : String }
     , name : String
     , vault : Matrix.Vault
     }
 
+
 init : Model
-init = Iddict.empty
+init =
+    Iddict.empty
+
+
 
 -- UPDATE
 
+
 addVault : { name : String, vault : Matrix.Vault } -> Model -> Model
 addVault =
     AddVault >> update
 
+
 insertVaultUpdate : Int -> Matrix.VaultUpdate -> Model -> Model
 insertVaultUpdate i vu =
     update (OnVaultUpdate i vu)
 
+
 update : Msg -> Model -> Model
 update msg model =
     case msg of
@@ -55,9 +73,11 @@ update msg model =
                 )
                 model
 
+
+
 -- VIEW
 
+
 getVault : Int -> Model -> Maybe Matrix.Vault
 getVault i model =
     Iddict.get i model |> Maybe.map .vault
-

src/Layout.elm

@@ -1,9 +1,12 @@
 module Layout exposing
-    ( tab, twoBlocks
+    ( twoBlocks
+    , tab, sideIconBar
     , iconAsElement, iconAsIcon
-    , containedButton, outlinedButton, textButton, sideList
+    , containedButton, outlinedButton, textButton
     , textInput, passwordInput
-    , loadingIndicator, itemWithSubtext
+    , itemWithSubtext
+    , sideList
+    , loadingIndicator
     )
 
 {-|
@@ -19,14 +22,17 @@ beautiful Material design Elm webpage.
 
 @docs twoBlocks
 
+
 ## Elements
 
-@docs tab
+@docs tab, sideIconBar
+
 
 ## Icons
 
 @docs iconAsElement, iconAsIcon
 
+
 ## Buttons
 
 @docs containedButton, outlinedButton, textButton
@@ -36,14 +42,17 @@ beautiful Material design Elm webpage.
 
 @docs textInput, passwordInput
 
+
 ## Items in a list
 
 @docs itemWithSubtext
 
+
 ## Lists
 
 @docs sideList
 
+
 ## Other elements
 
 @docs loadingIndicator
@@ -52,12 +61,13 @@ beautiful Material design Elm webpage.
 
 import Color exposing (Color)
 import Element exposing (Element)
+import Element.Events
 import Element.Input
+import Material.Icons.Types
 import Widget
 import Widget.Customize as Customize
 import Widget.Icon exposing (Icon)
 import Widget.Material as Material
-import Material.Icons.Types
 
 
 {-| A contained button representing the most important action of a group.
@@ -79,12 +89,14 @@ containedButton data =
         )
         { text = data.text, icon = data.icon, onPress = data.onPress }
 
+
 iconAsElement :
     { color : Color
     , height : Int
     , icon : Material.Icons.Types.Icon msg
     , width : Int
-    } -> Element msg
+    }
+    -> Element msg
 iconAsElement data =
     data.icon
         |> iconAsIcon
@@ -95,10 +107,12 @@ iconAsElement data =
             , Element.width (Element.px data.width)
             ]
 
+
 iconAsIcon : Material.Icons.Types.Icon msg -> Widget.Icon.Icon msg
 iconAsIcon =
     Widget.Icon.elmMaterialIcons Material.Icons.Types.Color
 
+
 {-| Multiline item
 -}
 itemWithSubtext :
@@ -123,6 +137,7 @@ itemWithSubtext data =
         , text = data.text
         }
 
+
 {-| Circular loading bar indicator
 -}
 loadingIndicator :
@@ -137,6 +152,7 @@ loadingIndicator data =
         )
         Nothing
 
+
 {-| An outlined button representing an important action within a group.
 -}
 outlinedButton :
@@ -154,6 +170,7 @@ outlinedButton data =
         )
         { text = data.text, icon = data.icon, onPress = data.onPress }
 
+
 {-| Show a password field
 -}
 passwordInput :
@@ -201,10 +218,48 @@ singlePalette { primary, onPrimary } =
         }
     }
 
+
+sideIconBar :
+    { colorBackground : Color
+    , colorText : Color
+    , height : Int
+    , items : List { icon : Widget.Icon.Icon msg, onPress : msg, text : String }
+    , width : Int
+    }
+    -> Element msg
+sideIconBar data =
+    let
+        buttonHeight =
+            round (toFloat data.width * 1.618)
+
+        iconSize =
+            data.width // 2
+    in
+    data.items
+        |> List.map
+            (\item ->
+                [ item.icon { size = iconSize, color = data.colorText }
+                , Element.paragraph [] [ Element.text item.text ]
+                ]
+                    |> Element.column [ Element.centerX, Element.centerY ]
+                    |> Element.el
+                        [ Element.Events.onClick item.onPress
+                        , Element.height (Element.px buttonHeight)
+                        , Element.width (Element.px data.width)
+                        ]
+            )
+        |> Element.column
+            [ Element.height (Element.px data.height)
+            , Element.scrollbarY
+            , Element.width (Element.px data.width)
+            ]
+
+
 sideList : { color : Color, items : List (Widget.Item msg), width : Int } -> Element msg
 sideList data =
     let
-        width px = Element.width (Element.px px)
+        width px =
+            Element.width (Element.px px)
     in
     Widget.itemList
         ({ primary = data.color, onPrimary = data.color }
@@ -215,6 +270,7 @@ sideList data =
         |> Element.el [ Element.centerX, width (Basics.min 360 data.width) ]
         |> Element.el [ width data.width ]
 
+
 {-| A tab selector that always has an item selected.
 -}
 tab :
@@ -285,6 +341,7 @@ textInput data =
         , onChange = data.onChange
         }
 
+
 {-| Two blocks either next to each other or below each other, depending on the
 screen shape.
 -}
@@ -293,13 +350,33 @@ twoBlocks :
     , el1 : { height : Int, width : Int } -> Element msg
     , el2 : { height : Int, width : Int } -> Element msg
     , width : Int
-    } -> Element msg
+    }
+    -> Element msg
 twoBlocks data =
     let
-        goesVertical = 2 * data.width <= 3 * data.height
+        goesVertical =
-        direction = if goesVertical then Element.column else Element.row
+            2 * data.width <= 3 * data.height
-        width = if goesVertical then data.width else data.width // 2
+
-        height = if goesVertical then data.height // 2 else data.height
+        direction =
+            if goesVertical then
+                Element.column
+
+            else
+                Element.row
+
+        width =
+            if goesVertical then
+                data.width
+
+            else
+                data.width // 2
+
+        height =
+            if goesVertical then
+                data.height // 2
+
+            else
+                data.height
     in
     direction
         [ Element.height (Element.px data.height)

src/Main.elm

@@ -5,14 +5,14 @@ import Browser.Dom
 import Browser.Events
 import Element exposing (Element)
 import Element.Background
+import Element.Font
+import Items.VaultList as VaultList
+import Matrix
+import Recursion
+import Screen.Vault as VaultScreen
+import Screen.Welcome as WelcomeScreen
 import Task
 import Theme
-import Items.VaultList as VaultList
-import Screen.Welcome as WelcomeScreen
-import Screen.Vault as VaultScreen
-import Element.Font
-import Recursion
-import Matrix
 
 
 main : Program () Model Msg
@@ -36,10 +36,12 @@ type alias Model =
     , width : Int
     }
 
+
 type Screen
     = ScreenWelcome WelcomeScreen.Model
     | ScreenVault Vaults Int VaultScreen.Model
 
+
 type Msg
     = OnScreenVault Int VaultScreen.Msg
     | OnScreenWelcome WelcomeScreen.Msg
@@ -49,7 +51,9 @@ type Msg
     | ScreenSize { height : Int, width : Int }
     | SetFlavor Theme.Flavor
 
-type alias Vaults = VaultList.Model
+
+type alias Vaults =
+    VaultList.Model
 
 
 init : () -> ( Model, Cmd Msg )
@@ -86,6 +90,7 @@ update msg model =
                                 ( { model | screen = ScreenVault welcomeMdl i newMdl }
                                 , Cmd.none
                                 )
+
                     else
                         ( model, Cmd.none )
 
@@ -114,6 +119,7 @@ update msg model =
                         ScreenVault _ j old ->
                             if i == j then
                                 ScreenVault vaults j old
+
                             else
                                 ScreenVault vaults i VaultScreen.init
               }
@@ -174,15 +180,27 @@ view model =
             |> List.singleton
     }
 
+
 viewScreen : Model -> Element Msg
 viewScreen model =
     let
-        colorBackground = Theme.base model.flavor
+        colorBackground =
-        colorBackground2 = Theme.mantle model.flavor
+            Theme.base model.flavor
-        colorMain = Theme.mauve model.flavor
+
-        colorSurface0 = Theme.surface0 model.flavor
+        colorBackground2 =
-        colorSurface1 = Theme.surface1 model.flavor
+            Theme.mantle model.flavor
-        colorText = Theme.text model.flavor
+
+        colorMain =
+            Theme.mauve model.flavor
+
+        colorSurface0 =
+            Theme.surface0 model.flavor
+
+        colorSurface1 =
+            Theme.surface1 model.flavor
+
+        colorText =
+            Theme.text model.flavor
     in
     Recursion.runRecursion
         (\screen ->
@@ -226,4 +244,3 @@ viewScreen model =
                         |> Recursion.base
         )
         model.screen
-

src/Screen/Vault.elm

@@ -4,25 +4,39 @@ import Color exposing (Color)
 import Element exposing (Element)
 import Matrix
 
+
+
 -- MODEL
 
-type alias Model = ()
 
-type alias Msg = ()
+type alias Model =
+    ()
+
+
+type alias Msg =
+    ()
+
 
 init : Model
-init = ()
+init =
+    ()
+
+
 
 -- UPDATE
 
+
 update : Msg -> Model -> Model
 update msg model =
     case msg of
         () ->
             model
 
+
+
 -- VIEW
 
+
 view :
     { colorBackground : Color
     , colorText : Color
@@ -32,7 +46,7 @@ view :
     , toMsg : Msg -> msg
     , vault : Matrix.Vault
     , width : Int
-    } -> Element msg
+    }
+    -> Element msg
 view data =
     Element.none
-

src/Screen/Welcome.elm

@@ -1,23 +1,27 @@
 module Screen.Welcome exposing (..)
 
 import Color exposing (Color)
+import Element exposing (Element)
 import Items.Introduction as Introduction
 import Items.ItemPicker as ItemPicker
-import Items.VaultList as VaultList
-import Matrix
 import Items.LoginView as LoginView
-import Element exposing (Element)
+import Items.VaultList as VaultList
 import Layout
+import Matrix
 import Matrix.Settings
 import Theme
 
+
+
 -- MODEL
 
+
 type alias Model =
     { login : Maybe LoginView.Model
     , vaults : ItemPicker.Model VaultList.VaultBlock
     }
 
+
 type Msg
     = OnAddNew
     | OnLogin LoginView.Msg
@@ -25,20 +29,25 @@ type Msg
     | OnVaultUpdate Int Matrix.VaultUpdate
     | OnVaults ItemPicker.Msg
 
+
 init : Model
 init =
     { login = Nothing -- Just LoginView.init
     , vaults = ItemPicker.init VaultList.init
     }
 
+
 fromVaults : VaultList.Model -> Model
 fromVaults items =
     { login = Nothing
     , vaults = ItemPicker.init items
     }
 
+
+
 -- UPDATE
 
+
 update : Msg -> Model -> Model
 update msg model =
     case msg of
@@ -59,12 +68,16 @@ update msg model =
         OnVaults m ->
             { model | vaults = ItemPicker.update m model.vaults }
 
+
 updateVault : Int -> Matrix.VaultUpdate -> Model -> Model
 updateVault i vu =
     update (OnVaultUpdate i vu)
 
+
+
 -- VIEW
 
+
 view :
     { colorBackground : Color
     , colorBackground2 : Color
@@ -79,10 +92,12 @@ view :
     , onSelectVault : VaultList.Model -> Int -> msg
     , toMsg : Msg -> msg
     , width : Int
-    } -> Element msg
+    }
+    -> Element msg
 view data =
     let
-        onSelectVault = data.onSelectVault (ItemPicker.extract data.model.vaults)
+        onSelectVault =
+            data.onSelectVault (ItemPicker.extract data.model.vaults)
     in
     case data.model.login of
         Just login ->
@@ -141,7 +156,8 @@ viewIntroduction :
     , onAddNew : Maybe msg
     , onSelectVault : Int -> msg
     , width : Int
-    } -> Element msg
+    }
+    -> Element msg
 viewIntroduction data =
     [ Introduction.view { colorBackground = data.colorBackground, width = data.width }
     , ItemPicker.view