Allow the user to choose between 3 preview sizes

modules/webapp/src/main/elm/Comp/BasicSizeField.elm

@@ -0,0 +1,40 @@
+module Comp.BasicSizeField exposing (Msg, update, view)
+
+import Data.BasicSize exposing (BasicSize)
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (onCheck)
+
+
+type Msg
+    = Toggle BasicSize
+
+
+update : Msg -> Maybe BasicSize
+update msg =
+    case msg of
+        Toggle bs ->
+            Just bs
+
+
+view : String -> BasicSize -> Html Msg
+view labelTxt current =
+    div [ class "grouped fields" ]
+        (label [] [ text labelTxt ]
+            :: List.map (makeField current) Data.BasicSize.all
+        )
+
+
+makeField : BasicSize -> BasicSize -> Html Msg
+makeField current element =
+    div [ class "field" ]
+        [ div [ class "ui radio checkbox" ]
+            [ input
+                [ type_ "radio"
+                , checked (current == element)
+                , onCheck (\_ -> Toggle element)
+                ]
+                []
+            , label [] [ text (Data.BasicSize.label element) ]
+            ]
+        ]

modules/webapp/src/main/elm/Comp/ItemCardList.elm

@@ -239,6 +239,7 @@ viewItem cfg settings item =
                 [ img
                     [ class "preview-image"
                     , src (Api.itemPreviewURL item.id)
+                    , Data.UiSettings.cardPreviewSize settings
                     ]
                     []
                 ]

modules/webapp/src/main/elm/Comp/UiSettingsForm.elm

@@ -8,9 +8,11 @@ module Comp.UiSettingsForm exposing
 
 import Api
 import Api.Model.TagList exposing (TagList)
+import Comp.BasicSizeField
 import Comp.ColorTagger
 import Comp.FieldListSelect
 import Comp.IntField
+import Data.BasicSize exposing (BasicSize)
 import Data.Color exposing (Color)
 import Data.Fields exposing (Field)
 import Data.Flags exposing (Flags)
@@ -42,6 +44,7 @@ type alias Model =
     , itemDetailShortcuts : Bool
     , searchMenuVisible : Bool
     , editMenuVisible : Bool
+    , cardPreviewSize : BasicSize
     }
 
 
@@ -93,6 +96,7 @@ init flags settings =
       , itemDetailShortcuts = settings.itemDetailShortcuts
       , searchMenuVisible = settings.searchMenuVisible
       , editMenuVisible = settings.editMenuVisible
+      , cardPreviewSize = settings.cardPreviewSize
       }
     , Api.getTags flags "" GetTagsResp
     )
@@ -112,6 +116,7 @@ type Msg
     | ToggleItemDetailShortcuts
     | ToggleSearchMenuVisible
     | ToggleEditMenuVisible
+    | CardPreviewSizeMsg Comp.BasicSizeField.Msg
 
 
 
@@ -297,6 +302,23 @@ update sett msg model =
             , Just { sett | editMenuVisible = flag }
             )
 
+        CardPreviewSizeMsg lm ->
+            let
+                next =
+                    Comp.BasicSizeField.update lm
+                        |> Maybe.withDefault model.cardPreviewSize
+
+                newSettings =
+                    if next /= model.cardPreviewSize then
+                        Just { sett | cardPreviewSize = next }
+
+                    else
+                        Nothing
+            in
+            ( { model | cardPreviewSize = next }
+            , newSettings
+            )
+
 
 
 --- View
@@ -329,6 +351,9 @@ view flags _ model =
                 "field"
                 model.searchPageSizeModel
             )
+        , div [ class "ui dividing header" ]
+            [ text "Item Cards"
+            ]
         , Html.map NoteLengthMsg
             (Comp.IntField.viewWithInfo
                 ("Maximum size of the item notes to display in card view. Between 0 - "
@@ -339,6 +364,11 @@ view flags _ model =
                 "field"
                 model.searchNoteLengthModel
             )
+        , Html.map CardPreviewSizeMsg
+            (Comp.BasicSizeField.view
+                "Size of item preview"
+                model.cardPreviewSize
+            )
         , div [ class "ui dividing header" ]
             [ text "Search Menu" ]
         , div [ class "field" ]

modules/webapp/src/main/elm/Data/BasicSize.elm

@@ -0,0 +1,55 @@
+module Data.BasicSize exposing
+    ( BasicSize(..)
+    , all
+    , asString
+    , fromString
+    , label
+    )
+
+
+type BasicSize
+    = Small
+    | Medium
+    | Large
+
+
+all : List BasicSize
+all =
+    [ Small
+    , Medium
+    , Large
+    ]
+
+
+fromString : String -> Maybe BasicSize
+fromString str =
+    case String.toLower str of
+        "small" ->
+            Just Small
+
+        "medium" ->
+            Just Medium
+
+        "large" ->
+            Just Large
+
+        _ ->
+            Nothing
+
+
+asString : BasicSize -> String
+asString size =
+    label size |> String.toLower
+
+
+label : BasicSize -> String
+label size =
+    case size of
+        Small ->
+            "Small"
+
+        Medium ->
+            "Medium"
+
+        Large ->
+            "Large"

modules/webapp/src/main/elm/Data/UiSettings.elm

@@ -2,6 +2,7 @@ module Data.UiSettings exposing
     ( Pos(..)
     , StoredUiSettings
     , UiSettings
+    , cardPreviewSize
     , catColor
     , catColorString
     , defaults
@@ -17,9 +18,12 @@ module Data.UiSettings exposing
     )
 
 import Api.Model.Tag exposing (Tag)
+import Data.BasicSize exposing (BasicSize)
 import Data.Color exposing (Color)
 import Data.Fields exposing (Field)
 import Dict exposing (Dict)
+import Html exposing (Attribute)
+import Html.Attributes as HA
 
 
 {-| Settings for the web ui. All fields should be optional, since it
@@ -43,6 +47,7 @@ type alias StoredUiSettings =
     , itemDetailShortcuts : Bool
     , searchMenuVisible : Bool
     , editMenuVisible : Bool
+    , cardPreviewSize : Maybe String
     }
 
 
@@ -66,6 +71,7 @@ type alias UiSettings =
     , itemDetailShortcuts : Bool
     , searchMenuVisible : Bool
     , editMenuVisible : Bool
+    , cardPreviewSize : BasicSize
     }
 
 
@@ -111,6 +117,7 @@ defaults =
     , itemDetailShortcuts = False
     , searchMenuVisible = False
     , editMenuVisible = False
+    , cardPreviewSize = Data.BasicSize.Medium
     }
 
 
@@ -146,6 +153,10 @@ merge given fallback =
     , itemDetailShortcuts = given.itemDetailShortcuts
     , searchMenuVisible = given.searchMenuVisible
     , editMenuVisible = given.editMenuVisible
+    , cardPreviewSize =
+        given.cardPreviewSize
+            |> Maybe.andThen Data.BasicSize.fromString
+            |> Maybe.withDefault fallback.cardPreviewSize
     }
 
 
@@ -172,6 +183,10 @@ toStoredUiSettings settings =
     , itemDetailShortcuts = settings.itemDetailShortcuts
     , searchMenuVisible = settings.searchMenuVisible
     , editMenuVisible = settings.editMenuVisible
+    , cardPreviewSize =
+        settings.cardPreviewSize
+            |> Data.BasicSize.asString
+            |> Just
     }
 
 
@@ -209,6 +224,19 @@ fieldHidden settings field =
     fieldVisible settings field |> not
 
 
+cardPreviewSize : UiSettings -> Attribute msg
+cardPreviewSize settings =
+    case settings.cardPreviewSize of
+        Data.BasicSize.Small ->
+            HA.style "max-width" "80px"
+
+        Data.BasicSize.Medium ->
+            HA.style "max-width" "160px"
+
+        Data.BasicSize.Large ->
+            HA.style "max-width" "none"
+
+
 
 --- Helpers
 

modules/webapp/src/main/webjar/docspell.css

@@ -94,7 +94,6 @@
 }
 
 .default-layout img.preview-image {
-    max-width: 160px;
     margin-left: auto;
     margin-right: auto;
 }