Move attachment tabs into a menu

If multiple attachments are present, the tab menu doesn't show all. So
if there is more than one attachment they can be selected from a menu.
This commit is contained in:
Eike Kettner 2020-09-26 01:11:56 +02:00
parent ca05b3c195
commit e831d7bdd7
5 changed files with 179 additions and 7 deletions

View File

@ -0,0 +1,158 @@
module Comp.ItemDetail.AttachmentTabMenu exposing (view)
import Api.Model.Attachment exposing (Attachment)
import Comp.ItemDetail.Model exposing (Model, Msg(..))
import Comp.SentMails
import Html exposing (Html, a, div, i, text)
import Html.Attributes exposing (class, classList, href, title)
import Html.Events exposing (onClick)
import Html5.DragDrop as DD
import Util.List
import Util.Maybe
import Util.String
view : Model -> Html Msg
view model =
div [ class "ui top attached tabular menu" ]
(activeAttach model
:: selectMenu model
++ sentMailsTab model
)
activeAttach : Model -> Html Msg
activeAttach model =
let
attachM =
Util.Maybe.or
[ Util.List.get model.item.attachments model.visibleAttach
|> Maybe.map (Tuple.pair model.visibleAttach)
, List.head model.item.attachments
|> Maybe.map (Tuple.pair 0)
]
visible =
not model.sentMailsOpen
in
case attachM of
Just ( pos, attach ) ->
a
([ classList
[ ( "active", visible )
, ( "item", True )
]
, title (Maybe.withDefault "No Name" attach.name)
, href "#"
]
++ (if visible then
[]
else
[ onClick (SetActiveAttachment pos) ]
)
)
[ Maybe.map (Util.String.ellipsis 30) attach.name
|> Maybe.withDefault "No Name"
|> text
, a
[ classList
[ ( "right-tab-icon-link", True )
, ( "invisible hidden", not visible )
]
, href "#"
, onClick (EditAttachNameStart attach.id)
]
[ i [ class "grey edit link icon" ] []
]
]
Nothing ->
div [] []
selectMenu : Model -> List (Html Msg)
selectMenu model =
case model.item.attachments of
[] ->
[]
[ _ ] ->
[]
_ ->
[ a
[ class "ui dropdown item"
, href "#"
, onClick ToggleAttachMenu
]
[ i
[ classList
[ ( "large ellipsis icon", True )
, ( "horizontal", not model.attachMenuOpen )
, ( "vertical", model.attachMenuOpen )
]
]
[]
, div
[ classList
[ ( "menu transition", True )
, ( "visible", model.attachMenuOpen )
, ( "hidden", not model.attachMenuOpen )
]
]
(List.indexedMap (menuItem model) model.item.attachments)
]
]
menuItem : Model -> Int -> Attachment -> Html Msg
menuItem model pos attach =
let
highlight el =
let
dropId =
DD.getDropId model.attachDD
dragId =
DD.getDragId model.attachDD
enable =
Just el.id == dropId && dropId /= dragId
in
[ ( "current-drop-target", enable )
]
in
a
([ classList <|
[ ( "item", True )
]
++ highlight attach
, href "#"
, onClick (SetActiveAttachment pos)
]
++ DD.draggable AttachDDMsg attach.id
++ DD.droppable AttachDDMsg attach.id
)
[ Maybe.map (Util.String.ellipsis 60) attach.name
|> Maybe.withDefault "No Name"
|> text
]
sentMailsTab : Model -> List (Html Msg)
sentMailsTab model =
if Comp.SentMails.isEmpty model.sentMails then
[]
else
[ div
[ classList
[ ( "right item", True )
, ( "active", model.sentMailsOpen )
]
, onClick ToggleSentMails
]
[ text "E-Mails"
]
]

View File

@ -47,6 +47,7 @@ import Util.Tag
type alias Model =
{ item : ItemDetail
, visibleAttach : Int
, attachMenuOpen : Bool
, menuOpen : Bool
, tagModel : Comp.Dropdown.Model Tag
, directionModel : Comp.Dropdown.Model Direction
@ -115,6 +116,7 @@ emptyModel : Model
emptyModel =
{ item = Api.Model.ItemDetail.empty
, visibleAttach = 0
, attachMenuOpen = False
, menuOpen = False
, tagModel =
Util.Tag.makeDropdownModel
@ -269,6 +271,7 @@ type Msg
| SaveNameResp (Result Http.Error BasicResult)
| UpdateThrottle
| KeyInputMsg Comp.KeyInput.Msg
| ToggleAttachMenu
type SaveNameState

View File

@ -758,7 +758,7 @@ update key flags inav settings msg model =
noSub ( { model | sentMails = sm }, Cmd.none )
ToggleSentMails ->
noSub ( { model | sentMailsOpen = not model.sentMailsOpen, visibleAttach = -1 }, Cmd.none )
noSub ( { model | sentMailsOpen = not model.sentMailsOpen }, Cmd.none )
SentMailsResp (Ok list) ->
let
@ -1266,6 +1266,9 @@ update key flags inav settings msg model =
-- field and requires to activate the throttle
withSub ( model_, Cmd.none )
ToggleAttachMenu ->
noSub ( { model | attachMenuOpen = not model.attachMenuOpen }, Cmd.none )
--- Helper

View File

@ -6,6 +6,7 @@ import Comp.DatePicker
import Comp.DetailEdit
import Comp.Dropdown
import Comp.Dropzone
import Comp.ItemDetail.AttachmentTabMenu
import Comp.ItemDetail.Model exposing (Model, Msg(..), NotesField(..), SaveNameState(..))
import Comp.ItemMail
import Comp.KeyInput
@ -302,15 +303,22 @@ renderNotes model =
attachmentVisible : Model -> Int -> Bool
attachmentVisible model pos =
if model.visibleAttach >= List.length model.item.attachments then
pos == 0
not model.sentMailsOpen
&& (if model.visibleAttach >= List.length model.item.attachments then
pos == 0
else
model.visibleAttach == pos
else
model.visibleAttach == pos
)
renderAttachmentsTabMenu : Model -> Html Msg
renderAttachmentsTabMenu model =
Comp.ItemDetail.AttachmentTabMenu.view model
renderAttachmentsTabMenuOld : Model -> Html Msg
renderAttachmentsTabMenuOld model =
let
mailTab =
if Comp.SentMails.isEmpty model.sentMails then

View File

@ -170,8 +170,8 @@ textarea.markdown-editor {
background: rgba(240,248,255,0.4);
}
.default-layout .ui.menu .item.current-drop-target, .header.current-drop-target, .item.current-drop-target {
background: rgba(0,0,0,0.2);
.default-layout .ui.dropdown .menu .item.current-drop-target, .header.current-drop-target, .item.current-drop-target {
background: rgba(0,0,0,0.2) !important;
}
.default-layout .search-menu {