added labels to numeric inputs (left label / unit label)

aardvark-platform · Feb 14, 2024 · c19c1a2 · c19c1a2
1 parent ee3e2f0
commit c19c1a2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/src/Aardvark.UI.Primitives/Primitives/SimplePrimitives.fs b/src/Aardvark.UI.Primitives/Primitives/SimplePrimitives.fs
@@ -47,10 +47,12 @@ module SimplePrimitives =
 
     type NumericConfig<'a> =
         {
-            min         : 'a
-            max         : 'a
-            smallStep   : 'a
-            largeStep   : 'a
+            min             : 'a
+            max             : 'a
+            smallStep       : 'a
+            largeStep       : 'a
+            leftLabel       : aval<string option>
+            unitLabel       : aval<string option>
         }
 
 
@@ -243,7 +245,7 @@ module SimplePrimitives =
 
             let myAtts =
                 AttributeMap.ofList [
-                    "class", AttributeValue.String "ui input"
+                    "class", AttributeValue.String "ui right labeled input"
                     onEvent' "data-event" [] (function (str :: _) -> str |> unpickle |> Option.toList |> Seq.map update | _ -> Seq.empty)
                 ]
 
@@ -263,6 +265,10 @@ module SimplePrimitives =
                 onBoot' ["valueCh", AVal.channel (AVal.map thing value)] boot (
                     Incremental.div (AttributeMap.union atts myAtts) (
                         alist {
+                            match! cfg.leftLabel with 
+                            | Some label -> yield  div [clazz "ui label"] [text label ]
+                            | None -> ()
+
                             yield
                                 input (att [
 
@@ -275,6 +281,10 @@ module SimplePrimitives =
                                     //attribute "data-numtype" (NumericConfigDefaults<'a>.NumType.ToString())
                                     attribute "pattern" pattern
                                 ])
+
+                            match! cfg.unitLabel with 
+                            | Some unitString -> yield div [clazz "ui basic label"] [text unitString ]
+                            | None -> ()
                         }
                     )
                 )
@@ -632,7 +642,7 @@ module SimplePrimitives =
         type NumericBuilder<'a>() =
 
             member inline x.Yield(()) =
-                (AttributeMap.empty, AVal.constant 0.0, { min = NumericConfigDefaults<'a>.MinValue; max = NumericConfigDefaults<'a>.MaxValue; smallStep = NumericConfigDefaults<'a>.SmallStep; largeStep = NumericConfigDefaults<'a>.LargeStep; }, (fun _ -> ()))
+                (AttributeMap.empty, AVal.constant 0.0, { min = NumericConfigDefaults<'a>.MinValue; max = NumericConfigDefaults<'a>.MaxValue; smallStep = NumericConfigDefaults<'a>.SmallStep; largeStep = NumericConfigDefaults<'a>.LargeStep; leftLabel = AVal.constant None; unitLabel = AVal.constant None}, (fun _ -> ()))
 
             [<CustomOperation("attributes")>]
             member inline x.Attributes((a,u,c,m), na) = (AttributeMap.union a (att na), u, c, m)
@@ -655,6 +665,11 @@ module SimplePrimitives =
             [<CustomOperation("max")>]
             member inline x.Max((a,v,cfg,m), s) = (a,v, { cfg with NumericConfig.max = s }, m)
 
+            [<CustomOperation("unitLabel")>]
+            member inline x.UnitLabel((a,v,cfg,m), s) = (a,v, { cfg with NumericConfig.unitLabel = s }, m)
+
+            [<CustomOperation("leftLabel")>]
+            member inline x.LeftLabel((a,v,cfg,m), s) = (a,v, { cfg with NumericConfig.leftLabel = s }, m)
 
             member inline x.Run((a,v,cfg,msg)) =
                 Incremental.numeric cfg a v msg

diff --git a/src/Examples (dotnetcore)/23 - Inputs/App.fs b/src/Examples (dotnetcore)/23 - Inputs/App.fs
@@ -126,48 +126,52 @@ let view (model : AdaptiveModel) =
             div [ clazz "item" ] [
                 description "Numeric (float)"
                 simplenumeric {
-                    attributes [clazz "ui inverted input"]
+                    attributes [clazz "large inverted"]
                     value model.value
                     update SetValue
                     step 0.1
                     largeStep 1.0
                     min 1.0
                     max 100.0
+                    leftLabel (AVal.constant (Some "Float"))
+                    unitLabel (AVal.constant (Some "large"))
                 }
                 //numeric { min = -1E15; max = 1E15; smallStep = 0.1; largeStep = 100.0 } [clazz "ui inverted input"] model.value SetValue
             ]
 
             div [ clazz "item" ] [
                 description "Numeric (integer)"
                 simplenumeric {
-                    attributes [clazz "ui inverted input"]
+                    attributes [clazz "inverted"]
                     value model.intValue
                     update SetInt
                     step 1
                     largeStep 5
                     min -100000
                     max 100000
+                    leftLabel (AVal.constant (Some "Integer"))
                 }
                 //numeric { min = 0; max = 10000; smallStep = 1; largeStep = 10 } [clazz "ui inverted input"] model.intValue SetInt
             ]
 
             div [ clazz "item" ] [
                 description "Numeric (decimal)"
                 simplenumeric {
-                    attributes [clazz "ui inverted input"]
+                    attributes [clazz "mini inverted"]
                     value model.decValue
                     update SetDecimal
                     step 1m
                     largeStep 5m
                     min -100000m
                     max 100000m
+                    unitLabel (AVal.constant (Some "mini"))
                 }
             ]
 
             div [ clazz "item" ] [
                 description "Numeric (unsigned integer)"
                 simplenumeric {
-                    attributes [clazz "ui inverted input"]
+                    attributes [clazz "inverted"]
                     value model.uintValue
                     update SetUInt
                     step 1u