1
0
Fork 0

Add initial support for alt text

The input doesn't actually work right now, but it's a step in the right
direction.
master
Ryan Fox 2 months ago
parent d57bbfe67f
commit da97f690b1
Signed by: flewkey
GPG Key ID: 94F56ADFD848851E

@ -688,12 +688,20 @@ form.search {
.draft-attachment-entry {
display: table-cell;
width: 25%;
height: 60px;
height: 125px;
}
.draft-attachment-entry input {
height: 2em;
width: 100%;
background: rgba(255,255,255,0.5);
color: #000;
border: none;
}
.draft-attachment-entry a {
display: block;
height: 60px;
height: 100%;
opacity: 0;
background: transparent;
font-size: 45px;
@ -938,11 +946,30 @@ input.form-control[type=file] {
animation-duration: 0.1s;
}
div.viewer-content {
display: flex;
flex-flow: column;
}
audio.viewer-content {
min-height: 0;
width: 75%;
}
.viewer-content img {
max-height: 100%;
max-width: 100%;
overflow: hidden;
object-fit: contain;
}
.viewer-content .alt-text {
text-align: center;
font-size: large;
margin: 1em auto 0 auto;
max-width: 1080px;
}
@keyframes zoom {
from { transform: scale(.9) }
to { transform: scale(1) }

@ -30,6 +30,7 @@ module Mastodon.ApiUrl
, block
, unblock
, uploadMedia
, updateMedia
, streaming
, search
)
@ -209,3 +210,8 @@ streaming =
uploadMedia : String
uploadMedia =
apiPrefix ++ "/media"
updateMedia : String -> String
updateMedia id =
apiPrefix ++ "/media/" ++ id

@ -155,6 +155,7 @@ attachmentDecoder =
|> Pipe.optional "remote_url" Decode.string ""
|> Pipe.optional "preview_url" Decode.string ""
|> Pipe.optional "text_url" (Decode.nullable Decode.string) Nothing
|> Pipe.optional "description" (Decode.nullable Decode.string) Nothing
contextDecoder : Decode.Decoder Context

@ -161,6 +161,7 @@ type alias Attachment =
, remote_url : String
, preview_url : String
, text_url : Maybe String
, description : Maybe String
}

@ -6,6 +6,7 @@ port module Ports
, saveClients
, setStatus
, uploadMedia
, updateMedia
, notify
, uploadSuccess
, uploadError
@ -32,6 +33,9 @@ port scrollIntoView : String -> Cmd msg
port uploadMedia : { id : String, url : String, token : String } -> Cmd msg
port updateMedia : { id : String, url : String, token : String, description : String } -> Cmd msg
port notify : { title : String, icon : String, body : String, clickUrl : String } -> Cmd msg

@ -22,6 +22,7 @@ type DraftMsg
| SelectAccount String
| SetAutoState Autocomplete.Msg
| ToggleSpoiler Bool
| UpdateAltText String String
| UpdateInputInformation InputInformation
| UpdateSensitive Bool
| UpdateSpoiler String

@ -101,6 +101,17 @@ update draftMsg currentUser ({ draft } as model) =
in
{ model | draft = newDraft } ! []
UpdateAltText id altText ->
{ model | draft = { draft | attachments =
draft.attachments |> List.map
(\a ->
if a.id == id then
{ a | description = Just altText }
else
a
)
} } ! []
UpdateSensitive sensitive ->
{ model | draft = { draft | sensitive = sensitive } } ! []

@ -312,7 +312,12 @@ draftAttachments attachments =
[ href ""
, onClickWithPreventAndStop <| DraftEvent (RemoveMedia attachment.id)
]
[ text "×" ]
[ text "×" ],
input
[ type_ "field"
, placeholder "Alt text",
onInput <| DraftEvent << (UpdateAltText attachment.id)]
[]
]
in
div [ class "draft-attachments-field" ]

@ -25,6 +25,8 @@ viewerView ({ attachments, attachment } as viewer) =
, onClickWithPreventAndStop event
]
[ text label ]
altText = Maybe.withDefault "No description. 😢" attachment.description
in
div
[ class "viewer"
@ -35,7 +37,10 @@ viewerView ({ attachments, attachment } as viewer) =
, navLink "" "prev" prev <| ViewerEvent NextAttachment
, case attachment.type_ of
"image" ->
img [ class "viewer-content", src attachment.url ] []
div [ class "viewer-content" ] [
img [ src attachment.url, alt altText, title altText ] [],
span [ class "alt-text" ] [ text altText ]
]
"audio" ->
audio

Loading…
Cancel
Save