From 6fd26a47f409046bbe2554ceea5321c57b9accf8 Mon Sep 17 00:00:00 2001 From: Kevin F Date: Fri, 11 Feb 2022 10:50:54 +0100 Subject: [PATCH] design categories as dropdown --- paket.dependencies | 1 + paket.lock | 7 +++ src/Client/HelpdeskMain.fs | 102 +++++++++++++++++++++++++++++++----- src/Client/Index.fs | 7 ++- src/Client/State.fs | 19 +++++-- src/Client/index.html | 4 +- src/Client/paket.references | 3 +- src/Client/style.scss | 35 ++++++++++++- 8 files changed, 156 insertions(+), 22 deletions(-) diff --git a/paket.dependencies b/paket.dependencies index acf8ca5..6550c80 100644 --- 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 index d0419dc..53590d3 100644 --- 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 index 3d78417..8b1715a 100644 --- 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 + ] ] \ No newline at end of file diff --git a/src/Client/Index.fs b/src/Client/Index.fs index a62afcd..66b1017 100644 --- a/src/Client/Index.fs +++ b/src/Client/Index.fs @@ -7,7 +7,7 @@ open Shared open State let init () : Model * Cmd = - 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 = { 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 index 37d7943..56f5612 100644 --- 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 index 10e72cf..7fd0b33 100644 --- a/src/Client/index.html +++ b/src/Client/index.html @@ -4,9 +4,9 @@ SAFE Template - + - +
diff --git a/src/Client/paket.references b/src/Client/paket.references index e1f2e41..a7eceec 100644 --- a/src/Client/paket.references +++ b/src/Client/paket.references @@ -8,4 +8,5 @@ Fable.Remoting.Client Feliz Feliz.Bulma Fulma -Feliz.Bulma.Checkradio \ No newline at end of file +Feliz.Bulma.Checkradio +Fable.FontAwesome.Free \ No newline at end of file diff --git a/src/Client/style.scss b/src/Client/style.scss index 0b360c4..ce9749c 100644 --- 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 } \ No newline at end of file