Merge pull request finos#1095 from bekand/ui-changes

fix input width and Enum capitalisation problems
AttilaMihaly · Aug 25, 2023 · 50bdb76 · 50bdb76
2 parents 524b437 + f8b4031
commit 50bdb76
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/src/Morphir/Visual/Components/DecisionTable.elm b/src/Morphir/Visual/Components/DecisionTable.elm
@@ -22,6 +22,7 @@ import Morphir.Visual.Common exposing (nameToText)
 import Morphir.Visual.Config exposing (Config, HighlightState(..), VisualState)
 import Morphir.Visual.EnrichedValue exposing (EnrichedValue)
 import Morphir.Visual.Theme exposing (mediumPadding)
+import Morphir.IR.Name exposing (toHumanWordsTitle)
 
 
 
@@ -179,11 +180,11 @@ getCaseFromIndex config head viewValue highlightState rule =
                     let
                         parsedMatches : List (Element msg)
                         parsedMatches =
-                            List.map (getCaseFromIndex config head viewValue highlightState << Just << toTypedPattern) (matches |> Debug.log "matches")
+                            List.map (getCaseFromIndex config head viewValue highlightState << Just << toTypedPattern) (matches)
 
                         --enclose in parentheses for nested constructors
                     in
-                    row [ width fill, Background.color result, mediumPadding config.state.theme |> padding ] (List.concat [ [ text "(", text (nameToText (getLocalName fQName)) ], List.intersperse (text ",") parsedMatches, [ text ")" ] ])
+                    row [ width fill, Background.color result, mediumPadding config.state.theme |> padding ] (List.concat [ [ text "(", text ((toHumanWordsTitle >> String.join " ") (getLocalName fQName)) ], List.intersperse (text ",") parsedMatches, [ text ")" ] ])
 
                 Value.AsPattern _ (Value.WildcardPattern _) name ->
                     el [ Background.color result, mediumPadding config.state.theme |> padding ] (text (nameToText name))

diff --git a/src/Morphir/Visual/Components/InputComponent.elm b/src/Morphir/Visual/Components/InputComponent.elm
@@ -1,12 +1,13 @@
 module Morphir.Visual.Components.InputComponent exposing (textInput, searchInput, checkBox, multiLine)
 
-import Element exposing (Element, below, el, moveDown, padding, paddingXY, rgb, text)
+import Element exposing (Element, below, el, moveDown, padding, paddingXY, rgb, text, fill, minimum, maximum, width)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 import Element.Input
 import Morphir.Visual.Theme as Theme exposing (Theme)
 import Element exposing (rgba)
+import Morphir.Visual.Theme exposing (scaled)
 
 
 type alias TextInputConfig msg =

diff --git a/src/Morphir/Visual/ValueEditor.elm b/src/Morphir/Visual/ValueEditor.elm
@@ -60,6 +60,9 @@ import Element
         , table
         , text
         , width
+        , minimum
+        , maximum
+        , shrink
         )
 import Element.Background as Background
 import Element.Border as Border
@@ -71,7 +74,7 @@ import Morphir.IR.Distribution as Distribution exposing (Distribution)
 import Morphir.IR.FQName exposing (FQName)
 import Morphir.IR.Literal exposing (Literal(..))
 import Morphir.IR.Name as Name exposing (Name)
-import Morphir.IR.Path as Path exposing (Path)
+import Morphir.IR.Path as Path
 import Morphir.IR.SDK.Basics as Basics
 import Morphir.IR.SDK.Char as Basics
 import Morphir.IR.SDK.Decimal as Decimal
@@ -88,7 +91,7 @@ import Morphir.Visual.Components.DatePickerComponent as DatePicker
 import Morphir.Visual.Components.FieldList as FieldList
 import Morphir.Visual.Components.InputComponent as InputComponent
 import Morphir.Visual.Components.Picklist as Picklist
-import Morphir.Visual.Theme exposing (Theme)
+import Morphir.Visual.Theme exposing (Theme, scaled)
 import Svg
 import Svg.Attributes
 
@@ -580,7 +583,7 @@ view theme ir valueType updateEditorState editorState =
     let
         baseStyle : List (Element.Attribute msg)
         baseStyle =
-            [ width <| Element.fillPortion 3
+            [ width (fill |> minimum (scaled 12 theme) |> maximum (scaled 20 theme))
             , height fill
             , Events.onLoseFocus
                 (updateEditorState (initEditorState ir valueType editorState.lastValidValue))
@@ -693,7 +696,7 @@ view theme ir valueType updateEditorState editorState =
                     editorState.errorState
                 , if editorState.defaultValueCheckbox.show then
                     InputComponent.checkBox theme
-                        [ center ]
+                        [ center, width shrink ]
                         { label = Input.labelRight (labelStyle ++ [ Background.color <| rgba 0 0 0 0 ]) (text "empty (\"\")")
                         , checked = editorState.defaultValueCheckbox.checked
                         , onChange =
@@ -743,8 +746,7 @@ view theme ir valueType updateEditorState editorState =
                                 (\( fieldName, ( fieldType, fieldEditorState ) ) ->
                                     ( fieldName
                                     , el
-                                        [ width fill
-                                        , height fill
+                                        [ height fill
                                         , centerY
                                         ]
                                         (view theme
@@ -1050,7 +1052,7 @@ view theme ir valueType updateEditorState editorState =
                                     { header =
                                         el [ width fill, height fill, paddingXY 10 5, Font.bold, Background.color (rgb 1 1 1) ]
                                             (el [ width fill, center ] (text (columnName |> Name.toHumanWords |> String.join " ")))
-                                    , width = fill
+                                    , width = shrink
                                     , view =
                                         \( rowIndex, rowEditorStates ) ->
                                             let
@@ -1080,6 +1082,7 @@ view theme ir valueType updateEditorState editorState =
                                             el
                                                 [ width fill
                                                 , height fill
+                                                , padding 1
                                                 , Background.color (rgb 1 1 1)
                                                 , inFront (addButton (emptyRowEditors :: cellEditorStates))
                                                 , if rowIndex == List.length cellEditorStates - 1 then