design categories as dropdown

nfdi4plants · Feb 11, 2022 · 6fd26a4 · 6fd26a4
1 parent 5fadb18
commit 6fd26a4
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 22 deletions.
diff --git a/paket.dependencies b/paket.dependencies
@@ -2,6 +2,7 @@ source https://api.nuget.org/v3/index.json
 framework: net5.0
 storage: none
 
+nuget Fable.FontAwesome.Free 2.1.0
 nuget Fable.Remoting.Giraffe
 nuget Feliz.Bulma.Checkradio
 nuget FSharp.Core 5.0.2

diff --git a/paket.lock b/paket.lock
@@ -55,6 +55,13 @@ NUGET
       Fable.Elmish (>= 3.0)
       Fable.React (>= 5.1)
       FSharp.Core (>= 4.6.2)
+    Fable.FontAwesome (2.0)
+      Fable.Core (>= 3.0)
+      Fable.React (>= 5.1)
+    Fable.FontAwesome.Free (2.1)
+      Fable.Core (>= 3.0)
+      Fable.FontAwesome (>= 2.0)
+      Fable.React (>= 5.1)
     Fable.Mocha (2.11)
       Fable.Core (>= 3.0)
       FSharp.Core (>= 4.7)

diff --git a/src/Client/HelpdeskMain.fs b/src/Client/HelpdeskMain.fs
@@ -8,11 +8,87 @@ open IssueTypes
 open Feliz
 open Feliz.Bulma
 
+module ButtonDropdown =
+
+    let subcategories (model:Model) (block: IssueTypes.IssueCategory) =
+        let subcategories = block.subcategories
+        Html.div [
+            prop.className "nested-dropdown"
+            prop.children [
+                for subC in subcategories do
+                    let subCText =
+                       match subC with
+                       | IssueSubcategory.RDM rdm -> rdm.toString
+                       | _ -> ""
+                    yield Html.div subCText
+            ]
+        ]
+
+    let createDropdownItem (model:Model) (dispatch:Msg -> unit) (block: IssueTypes.IssueCategory)  =
+        Bulma.dropdownItem.a [
+            prop.style [style.paddingRight(length.rem 1)]
+            prop.children [      
+                Html.span [
+                    prop.style [
+                        style.display.flex
+                        style.flexGrow 1
+                        style.alignItems.center
+                    ]
+                    prop.children [
+                        Html.span [
+                            prop.style [style.marginRight(length.rem 1.5)]
+                            prop.text block.toString
+                        ]
+                        /// 'Other' has no subcategory
+                        if block <> IssueCategory.Other then
+                            Html.i [
+                                prop.style [
+                                    style.custom("margin-left","auto")
+                                ]
+                                prop.className "fa-solid fa-angle-right"
+                            ]
+                    ]
+                ]
+                subcategories model IssueCategory.RDM
+            ]
+        ]
+
+    let createDropdown (model:Model) (dispatch:Msg -> unit) =
+        Bulma.control.div [
+            Bulma.dropdown [
+                if model.DropdownIsActive then Bulma.dropdown.isActive
+                prop.children [
+                    Bulma.dropdownTrigger [
+                        Bulma.button.a [
+                            prop.onClick (fun e -> e.stopPropagation(); dispatch ToggleIssueCategoryDropdown)
+                            prop.children [
+                                Html.span [
+                                    prop.style [style.marginRight (length.px 5)]
+                                    prop.text ("please select")
+                                ]
+                                Html.i [ prop.className "fa-solid fa-angle-down" ]
+                            ]
+                        ]
+                    ]
+                    Bulma.dropdownMenu [
+                        Bulma.dropdownContent [
+                            createDropdownItem model dispatch IssueCategory.RDM
+                            createDropdownItem model dispatch IssueCategory.Infrastructure
+                            createDropdownItem model dispatch IssueCategory.Metadata
+                            createDropdownItem model dispatch IssueCategory.Tools
+                            createDropdownItem model dispatch IssueCategory.Workflows
+                            Bulma.dropdownDivider []
+                            createDropdownItem model dispatch IssueCategory.Other
+                        ]
+                    ]
+                ]
+            ]
+        ]
 
 let header =
     Bulma.content [
         prop.style [
-            style.backgroundColor "whitesmoke"
+            style.backgroundColor NFDIColors.lightgray
             style.padding (length.rem 1, length.rem 2)
         ]
         prop.children [
@@ -86,7 +162,7 @@ let requestTypeElement =
         ]
     ]
 
-let titleInputElement =
+let titleInputElement model dispatch =
     Bulma.content [
         Bulma.box [
             Bulma.label [
@@ -99,12 +175,8 @@ let titleInputElement =
             Bulma.field.div [
                 field.hasAddons
                 prop.children [
-                    Bulma.control.p [
-                        Bulma.button.button [
-                            button.isStatic
-                            prop.text "[Question]"
-                        ]
-                    ]
+                    /// This is the dropdown button menu
+                    ButtonDropdown.createDropdown model dispatch
                     Bulma.control.p [
                         control.isExpanded
                         prop.children [
@@ -180,9 +252,13 @@ let subcategoryDropdown =
 
 let mainElement (model: Model) (dispatch: Msg -> unit) =
     Bulma.container [
-        header
-        requestTypeElement
-        titleInputElement
-        descriptionElement
-        categoryCheckradiosElement
+        prop.style [
+            //style.backgroundColor "whitesmoke"
+        ]
+        prop.children [
+            header
+            requestTypeElement
+            titleInputElement model dispatch
+            descriptionElement
+        ]
     ]
diff --git a/src/Client/Index.fs b/src/Client/Index.fs
@@ -7,7 +7,7 @@ open Shared
 open State
 
 let init () : Model * Cmd<Msg> =
-    let model = { Todos = []; Input = "" }
+    let model = { Todos = []; Input = ""; FormModel = FormModel.init(); DropdownIsActive = false }
 
     let cmd =
         Cmd.OfAsync.perform todosApi.getTodos () GotTodos
@@ -29,6 +29,11 @@ let update (msg: Msg) (model: Model) : Model * Cmd<Msg> =
         { model with
               Todos = model.Todos @ [ todo ] },
         Cmd.none
+    | ToggleIssueCategoryDropdown ->
+        { model with
+            DropdownIsActive = not model.DropdownIsActive },
+        Cmd.none
+
 
 open Feliz
 open Feliz.Bulma

diff --git a/src/Client/State.fs b/src/Client/State.fs
@@ -6,13 +6,24 @@ open Shared
 
 type FormModel = {
     IssueType : IssueTypes.IssueType
-    IssueCategories : IssueTypes.IssueCategory
-    IssueSubcategory : IssueTypes.IssueSubcategory
-}
+    IssueCategory : IssueTypes.IssueCategory option
+    IssueSubcategory : IssueTypes.IssueSubcategory option
+} with
+    static member init() = {
+        IssueType           = IssueTypes.Question
+        IssueCategory       = None
+        IssueSubcategory    = None
+    }
 
-type Model = { Todos: Todo list; Input: string }
+type Model = {
+    DropdownIsActive: bool
+    FormModel: FormModel
+    Todos: Todo list;
+    Input: string
+}
 
 type Msg =
+    | ToggleIssueCategoryDropdown
     | GotTodos of Todo list
     | SetInput of string
     | AddTodo

diff --git a/src/Client/index.html b/src/Client/index.html
@@ -4,9 +4,9 @@
     <title>SAFE Template</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/png" href="/favicon.png"/>
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>
 <body>
     <div id="elmish-app"></div>

diff --git a/src/Client/paket.references b/src/Client/paket.references
@@ -8,4 +8,5 @@ Fable.Remoting.Client
 Feliz
 Feliz.Bulma
 Fulma
-Feliz.Bulma.Checkradio
+Feliz.Bulma.Checkradio
+Fable.FontAwesome.Free
diff --git a/src/Client/style.scss b/src/Client/style.scss
@@ -672,11 +672,44 @@ body {
 }
 
 .details-card p{
-    font-size: 1.5 em !important;
+    font-size: 1.5em !important;
     margin-bottom: 0.5em!important;
 }
 
 .card-container {
     max-width: 70%;
     margin: 0 auto;
+}
+
+.dropdown-item .nested-dropdown {
+    display: none;
+    position: absolute;
+    left: 100%;
+    background-color: white;
+    border-radius: 4px;
+    box-shadow: 0 0.5em 1em -0.125em rgb(0 0 0 / 10%), 0 0px 0 1px rgb(0 0 0 / 2%);
+    /*padding: 0.5rem 0px;*/
+    margin: 0px 1px
+}
+
+.dropdown-content .dropdown-item:nth-child(n+4) .nested-dropdown {
+    bottom: 0;
+}
+
+.dropdown-content .dropdown-item:nth-child(-n+3) .nested-dropdown {
+    top: 0;
+}
+
+
+.dropdown-item:hover .nested-dropdown {
+    display: block
+}
+
+.nested-dropdown div {
+    font-size: 0.875rem;
+    padding: 0.375rem 1rem
+}
+
+.nested-dropdown div:hover {
+    background-color: whitesmoke
 }