mirror of
https://github.com/TheAnachronism/docspell.git
synced 2025-05-31 20:42:51 +00:00
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:
parent
ca05b3c195
commit
e831d7bdd7
@ -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"
|
||||
]
|
||||
]
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user