Czech symbol buttons (#570) and fixed answer field editing (#174)

psfinaki · Oct 22, 2019 · 7afa260 · 7afa260
1 parent b0ccf1e
commit 7afa260
Show file tree

Hide file tree

Showing 7 changed files with 225 additions and 66 deletions.
diff --git a/src/Client/Client.fsproj b/src/Client/Client.fsproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
         <TargetFramework>netstandard2.0</TargetFramework>
     </PropertyGroup>
@@ -22,6 +22,9 @@
 		<Compile Include="widgets\Navbar\Types.fs" />
 		<Compile Include="widgets\Navbar\State.fs" />
 		<Compile Include="widgets\Navbar\View.fs" />
+		<Compile Include="widgets\ImprovedInput\Types.fs" />
+		<Compile Include="widgets\ImprovedInput\State.fs" />
+		<Compile Include="widgets\ImprovedInput\View.fs" />
 		<Compile Include="widgets\FilterBlock\Types.fs" />
 		<Compile Include="widgets\FilterBlock\State.fs" />
 		<Compile Include="widgets\FilterBlock\View.fs" />
@@ -43,4 +46,4 @@
       <ProjectReference Include="..\Core\Core.fsproj" />
     </ItemGroup>
     <Import Project="..\..\.paket\Paket.Restore.targets" />
-</Project>
+</Project> 
diff --git a/src/Client/scss/main.scss b/src/Client/scss/main.scss
@@ -171,6 +171,24 @@ body { width: 100%; }
 
 
     }
+
+    /* override Bulma's margin, we don't need it */
+    .columns:not(last-child) {
+        margin-bottom: 0 !important;
+    }
+
+    .symbol-buttons {
+        display: none; /* hidden on mobile */
+        flex-wrap: wrap;
+        button {
+            width: 30px;
+            height: 30px;
+            font-size: 15px;
+            font-weight: 500;
+            margin-right: 8px;
+            margin-bottom: 8px;
+        }
+    }
 
 }
 @media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@@ -214,6 +232,10 @@ body { width: 100%; }
         display: flex;
         justify-content: space-around;
     }
+
+    .symbol-buttons {
+        display: flex;
+    }
 }
 @media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
 @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

diff --git a/src/Client/widgets/FilterBlock/View.fs b/src/Client/widgets/FilterBlock/View.fs
@@ -3,6 +3,7 @@ module FilterBlock.View
 open Fable.Helpers.React
 open Fable.Helpers.React.Props
 open Fable.FontAwesome
+open Fulma
 
 open Types
 
@@ -11,9 +12,9 @@ let private filterBlockView isHidden dispatch children =
         [ 
           div [ ClassName "filter-block-header"; OnClick (fun _ -> dispatch ToggleBlock)] [
             Fa.i [ 
-                 Fa.Solid.AngleDown
-                 Fa.Size Fa.FaSmall] 
-                 [ ]
+                   Fa.Solid.AngleDown
+                   Fa.Size Fa.FaSmall] 
+                   [ ]
             span [ClassName "filter-block-text" ] [str "filters"]
           ]
           div [ClassName "filter-block-children"] children

diff --git a/src/Client/widgets/ImprovedInput/State.fs b/src/Client/widgets/ImprovedInput/State.fs
@@ -0,0 +1,32 @@
+module ImprovedInput.State
+
+open Elmish
+open Types
+open Fable.Core.JsInterop
+open Fable.Import.Browser
+
+let init inputId = { 
+    Value = "" 
+    CursorStart = 1
+    CursorEnd = 1
+    InputId = inputId
+}
+
+let update msg model =
+    match msg with
+    | ChangeInput e -> 
+        { model with Value = e.target?value; CursorStart = e.target?selectionStart; CursorEnd = e.target?selectionEnd}, Cmd.none
+    | SetInput s ->
+        { model with Value = s}, Cmd.none
+    | AddSymbol c ->
+        let input : HTMLInputElement = !!document.getElementById(model.InputId)
+        let cursorStart = int input.selectionStart
+        let cursorEnd = int input.selectionEnd
+        let startSection = model.Value.[0..cursorStart-1]
+        let endSection = model.Value.[cursorEnd..]
+        { model with Value = startSection + string c + endSection; CursorStart = cursorStart; CursorEnd = cursorEnd }, Cmd.none
+    | FocusInput ->
+        document.getElementById(model.InputId).focus()
+        model, Cmd.none
+    | Reset ->
+        init model.InputId, Cmd.none
diff --git a/src/Client/widgets/ImprovedInput/Types.fs b/src/Client/widgets/ImprovedInput/Types.fs
@@ -0,0 +1,16 @@
+module ImprovedInput.Types
+open Fable.Import.React
+
+type Model = { 
+    Value: string
+    CursorStart: int
+    CursorEnd: int
+    InputId: string
+}
+
+type Msg = 
+    | ChangeInput of FormEvent
+    | SetInput of string
+    | AddSymbol of char
+    | FocusInput
+    | Reset
diff --git a/src/Client/widgets/ImprovedInput/View.fs b/src/Client/widgets/ImprovedInput/View.fs
@@ -0,0 +1,34 @@
+module ImprovedInput.View
+
+open Fable.Import.React
+open Fable.Helpers.React
+open Fable.Helpers.React.Props
+open Fulma
+
+open Types
+
+type Props = {
+    InputSize: ISize
+    OnKeyDownHandler: KeyboardEvent -> unit
+    AutoCapitalize: string
+    AutoFocus: bool
+    AutoComplete: string
+}
+
+let inputView props model dispatch =
+    Input.text
+        [
+            Input.Id model.InputId
+            Input.Props [
+                OnChange (ChangeInput >> dispatch)
+                OnKeyDown props.OnKeyDownHandler
+                AutoCapitalize props.AutoCapitalize
+                AutoFocus props.AutoFocus
+                AutoComplete props.AutoComplete
+            ] 
+            Input.ValueOrDefault model.Value
+            Input.Size props.InputSize
+        ]
+
+let root props model dispatch =
+    inputView props model dispatch