Render edit-modals above the menu and not the whole page

This commit is contained in:
Eike Kettner 2020-08-06 23:38:55 +02:00
parent c4d48d8709
commit a8ea391715
6 changed files with 62 additions and 15 deletions

View File

@ -5,6 +5,7 @@ module Comp.ContactField exposing
, getContacts
, update
, view
, view1
)
import Api.Model.Contact exposing (Contact)
@ -81,9 +82,15 @@ update msg model =
Comp.Dropdown.getSelected model.kind
|> List.head
|> Maybe.map Data.ContactType.toString
|> Maybe.withDefault ""
in
( { model | items = Contact "" model.value kind :: model.items, value = "" }, Cmd.none )
case kind of
Just k ->
( { model | items = Contact "" model.value k :: model.items, value = "" }
, Cmd.none
)
Nothing ->
( model, Cmd.none )
Select contact ->
let
@ -100,12 +107,27 @@ update msg model =
view : UiSettings -> Model -> Html Msg
view settings model =
view1 settings False model
view1 : UiSettings -> Bool -> Model -> Html Msg
view1 settings compact model =
div []
[ div [ class "fields" ]
[ div [ class "four wide field" ]
[ div [ classList [ ( "fields", not compact ) ] ]
[ div
[ classList
[ ( "field", True )
, ( "four wide", not compact )
]
]
[ Html.map TypeMsg (Comp.Dropdown.view settings model.kind)
]
, div [ class "twelve wide field" ]
, div
[ classList
[ ( "twelve wide", not compact )
, ( "field", True )
]
]
[ div [ class "ui action input" ]
[ input
[ type_ "text"

View File

@ -416,13 +416,13 @@ viewIntern settings withButtons model =
Html.map TagMsg (Comp.TagForm.view tm)
PMR pm ->
Html.map PersonMsg (Comp.PersonForm.view settings pm)
Html.map PersonMsg (Comp.PersonForm.view1 settings True pm)
PMC pm ->
Html.map PersonMsg (Comp.PersonForm.view settings pm)
Html.map PersonMsg (Comp.PersonForm.view1 settings True pm)
OM om ->
Html.map OrgMsg (Comp.OrgForm.view settings om)
Html.map OrgMsg (Comp.OrgForm.view1 settings True om)
EM em ->
Html.map EquipMsg (Comp.EquipmentForm.view em)
@ -461,13 +461,18 @@ viewModal settings mm =
in
div
[ classList
[ ( "ui inverted modals page dimmer", True )
[ ( "ui inverted dimmer", True )
, ( "invisibe hidden", hidden )
, ( "active", not hidden )
]
, style "display" "flex !important"
]
[ div [ class "ui modal active" ]
[ div
[ classList
[ ( "ui modal keep-small", True )
, ( "active", not hidden )
]
]
[ div [ class "header" ]
[ Maybe.map .form mm
|> Maybe.map headIcon

View File

@ -37,8 +37,7 @@ import Util.Time
view : { prev : Maybe String, next : Maybe String } -> UiSettings -> Model -> Html Msg
view inav settings model =
div []
[ Html.map ModalEditMsg (Comp.DetailEdit.viewModal settings model.modalEdit)
, renderItemInfo settings model
[ renderItemInfo settings model
, renderDetailMenu inav model
, renderMailForm settings model
, renderAddFilesForm model
@ -684,7 +683,8 @@ renderTags settings model =
renderEditMenu : UiSettings -> Model -> List (Html Msg)
renderEditMenu settings model =
[ div [ class "ui segments" ]
[ Html.map ModalEditMsg (Comp.DetailEdit.viewModal settings model.modalEdit)
, div [ class "ui segments" ]
[ renderEditButtons model
, renderEditForm settings model
]

View File

@ -6,6 +6,7 @@ module Comp.OrgForm exposing
, isValid
, update
, view
, view1
)
import Api.Model.Organization exposing (Organization)
@ -109,6 +110,11 @@ update flags msg model =
view : UiSettings -> Model -> Html Msg
view settings model =
view1 settings False model
view1 : UiSettings -> Bool -> Model -> Html Msg
view1 settings compact model =
div [ class "ui form" ]
[ div
[ classList
@ -132,7 +138,7 @@ view settings model =
, h3 [ class "ui dividing header" ]
[ text "Contacts"
]
, Html.map ContactMsg (Comp.ContactField.view settings model.contactModel)
, Html.map ContactMsg (Comp.ContactField.view1 settings compact model.contactModel)
, h3 [ class "ui dividing header" ]
[ text "Notes"
]

View File

@ -6,6 +6,7 @@ module Comp.PersonForm exposing
, isValid
, update
, view
, view1
)
import Api.Model.Person exposing (Person)
@ -123,6 +124,11 @@ update flags msg model =
view : UiSettings -> Model -> Html Msg
view settings model =
view1 settings False model
view1 : UiSettings -> Bool -> Model -> Html Msg
view1 settings compact model =
div [ class "ui form" ]
[ div
[ classList
@ -157,7 +163,7 @@ view settings model =
, h3 [ class "ui dividing header" ]
[ text "Contacts"
]
, Html.map ContactMsg (Comp.ContactField.view settings model.contactModel)
, Html.map ContactMsg (Comp.ContactField.view1 settings compact model.contactModel)
, h3 [ class "ui dividing header" ]
[ text "Notes"
]

View File

@ -170,6 +170,14 @@ textarea.markdown-editor {
background: rgba(0,0,0,0.2);
}
@media only screen and (min-width: 992px) {
.ui.modal.keep-small {
width: inherit;
margin: 0 0 0 1rem;
}
}
label span.muted {
font-size: smaller;
color: rgba(0,0,0,0.6);