Keep other options on screen

Author: hojberg

src/Hypercontextual/BankingDemo.elm

@@ -242,51 +242,50 @@ viewContactMethod selectedIds method =
 viewSelectedAccounts : Set String -> Html Msg
 viewSelectedAccounts selectedIds =
     let
-        selectedAccounts =
-            accounts
-                |> List.filter (\a -> Set.member a.id selectedIds)
-
-        viewSelectedAccount account =
+        viewAccountWithSelection account =
             let
                 accountContent =
                     div []
                         [ div [ class "balance" ] [ text account.balance ]
                         , div [ class "account-type subdued" ] [ text account.accountType ]
                         ]
+
+                isSelected =
+                    Set.member account.id selectedIds
             in
             Tile.tile account.name accountContent
-                |> Tile.select
+                |> Tile.when isSelected Tile.select
                 |> Tile.disabled
                 |> Tile.view
     in
     ChatDemo.viewEntry
         [ div [ class "options" ]
-            (List.map viewSelectedAccount selectedAccounts)
+            (List.map viewAccountWithSelection accounts)
         ]
 
 
 viewSelectedMethods : Set String -> Html Msg
 viewSelectedMethods selectedIds =
     let
-        selectedMethods =
-            contactMethods
-                |> List.filter (\m -> Set.member m.id selectedIds)
-
-        viewSelectedMethod method =
+        viewMethodWithSelection method =
             let
                 methodContent =
                     div []
                         [ div [ class "value" ] [ text method.value ]
                         ]
+
+                isSelected =
+                    Set.member method.id selectedIds
             in
             Tile.tile method.methodType methodContent
-                |> Tile.select
+                |> Tile.when method.isDefault (Tile.withBadge "Default")
+                |> Tile.when isSelected Tile.select
                 |> Tile.disabled
                 |> Tile.view
     in
     ChatDemo.viewEntry
         [ div [ class "options" ]
-            (List.map viewSelectedMethod selectedMethods)
+            (List.map viewMethodWithSelection contactMethods)
         ]
 
 

src/Hypercontextual/OrderDemo.elm

@@ -256,19 +256,27 @@ viewAddress selectedAddressId addr =
 
 
 viewSelectedAddress : Address -> Html Msg
-viewSelectedAddress addr =
+viewSelectedAddress selectedAddr =
     let
-        addressContent =
-            div []
-                [ div [ class "phone" ] [ text addr.phone ]
-                , div [ class "address subdued" ] [ text addr.address ]
-                ]
+        viewAddressWithSelection addr =
+            let
+                addressContent =
+                    div []
+                        [ div [ class "phone" ] [ text addr.phone ]
+                        , div [ class "address subdued" ] [ text addr.address ]
+                        ]
+
+                isSelected =
+                    addr.id == selectedAddr.id
+            in
+            Tile.tile addr.name addressContent
+                |> Tile.when addr.isDefault (Tile.withBadge "Default")
+                |> Tile.when isSelected Tile.select
+                |> Tile.disabled
+                |> Tile.view
     in
     ChatDemo.viewEntry
-        [ Tile.tile addr.name addressContent
-            |> Tile.select
-            |> Tile.disabled
-            |> Tile.view
+        [ div [ class "options" ] (List.map viewAddressWithSelection addresses)
         ]
 
 
@@ -319,19 +327,25 @@ viewAddressUpdated address =
 
 
 viewSelectedOrder : Order -> Html Msg
-viewSelectedOrder order =
+viewSelectedOrder selectedOrder =
     let
-        itemsContent =
-            div [ class "items" ]
-                (List.map viewItem order.items)
+        viewOrderWithSelection order =
+            let
+                itemsContent =
+                    div [ class "items" ]
+                        (List.map viewItem order.items)
+
+                isSelected =
+                    order.id == selectedOrder.id
+            in
+            Tile.tile order.id itemsContent
+                |> Tile.withBadge order.status
+                |> Tile.when isSelected Tile.select
+                |> Tile.disabled
+                |> Tile.view
     in
     ChatDemo.viewEntry
-        [ Tile.tile order.id itemsContent
-            |> Tile.withBadge order.status
-            |> Tile.select
-            |> Tile.disabled
-            |> Tile.view
-        ]
+        [ div [ class "options" ] (List.map viewOrderWithSelection orders) ]
 
 
 view : Model -> Html Msg

src/_layouts/hypercontextual.webc

@@ -183,7 +183,7 @@
 
     position: relative;
     width: 28rem;
-    height: 32rem;
+    height: 36rem;
     display: flex;
     flex-shrink: 0;
     flex-direction: column;