Add initial support for alt text
The input doesn't actually work right now, but it's a step in the right direction.
This commit is contained in:
parent
d57bbfe67f
commit
da97f690b1
|
@ -688,12 +688,20 @@ form.search {
|
||||||
.draft-attachment-entry {
|
.draft-attachment-entry {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
width: 25%;
|
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 {
|
.draft-attachment-entry a {
|
||||||
display: block;
|
display: block;
|
||||||
height: 60px;
|
height: 100%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font-size: 45px;
|
font-size: 45px;
|
||||||
|
@ -938,11 +946,30 @@ input.form-control[type=file] {
|
||||||
animation-duration: 0.1s;
|
animation-duration: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.viewer-content {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
|
||||||
audio.viewer-content {
|
audio.viewer-content {
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
width: 75%;
|
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 {
|
@keyframes zoom {
|
||||||
from { transform: scale(.9) }
|
from { transform: scale(.9) }
|
||||||
to { transform: scale(1) }
|
to { transform: scale(1) }
|
||||||
|
|
|
@ -30,6 +30,7 @@ module Mastodon.ApiUrl
|
||||||
, block
|
, block
|
||||||
, unblock
|
, unblock
|
||||||
, uploadMedia
|
, uploadMedia
|
||||||
|
, updateMedia
|
||||||
, streaming
|
, streaming
|
||||||
, search
|
, search
|
||||||
)
|
)
|
||||||
|
@ -209,3 +210,8 @@ streaming =
|
||||||
uploadMedia : String
|
uploadMedia : String
|
||||||
uploadMedia =
|
uploadMedia =
|
||||||
apiPrefix ++ "/media"
|
apiPrefix ++ "/media"
|
||||||
|
|
||||||
|
|
||||||
|
updateMedia : String -> String
|
||||||
|
updateMedia id =
|
||||||
|
apiPrefix ++ "/media/" ++ id
|
||||||
|
|
|
@ -155,6 +155,7 @@ attachmentDecoder =
|
||||||
|> Pipe.optional "remote_url" Decode.string ""
|
|> Pipe.optional "remote_url" Decode.string ""
|
||||||
|> Pipe.optional "preview_url" Decode.string ""
|
|> Pipe.optional "preview_url" Decode.string ""
|
||||||
|> Pipe.optional "text_url" (Decode.nullable Decode.string) Nothing
|
|> Pipe.optional "text_url" (Decode.nullable Decode.string) Nothing
|
||||||
|
|> Pipe.optional "description" (Decode.nullable Decode.string) Nothing
|
||||||
|
|
||||||
|
|
||||||
contextDecoder : Decode.Decoder Context
|
contextDecoder : Decode.Decoder Context
|
||||||
|
|
|
@ -161,6 +161,7 @@ type alias Attachment =
|
||||||
, remote_url : String
|
, remote_url : String
|
||||||
, preview_url : String
|
, preview_url : String
|
||||||
, text_url : Maybe String
|
, text_url : Maybe String
|
||||||
|
, description : Maybe String
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -6,6 +6,7 @@ port module Ports
|
||||||
, saveClients
|
, saveClients
|
||||||
, setStatus
|
, setStatus
|
||||||
, uploadMedia
|
, uploadMedia
|
||||||
|
, updateMedia
|
||||||
, notify
|
, notify
|
||||||
, uploadSuccess
|
, uploadSuccess
|
||||||
, uploadError
|
, uploadError
|
||||||
|
@ -32,6 +33,9 @@ port scrollIntoView : String -> Cmd msg
|
||||||
port uploadMedia : { id : String, url : String, token : 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
|
port notify : { title : String, icon : String, body : String, clickUrl : String } -> Cmd msg
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -22,6 +22,7 @@ type DraftMsg
|
||||||
| SelectAccount String
|
| SelectAccount String
|
||||||
| SetAutoState Autocomplete.Msg
|
| SetAutoState Autocomplete.Msg
|
||||||
| ToggleSpoiler Bool
|
| ToggleSpoiler Bool
|
||||||
|
| UpdateAltText String String
|
||||||
| UpdateInputInformation InputInformation
|
| UpdateInputInformation InputInformation
|
||||||
| UpdateSensitive Bool
|
| UpdateSensitive Bool
|
||||||
| UpdateSpoiler String
|
| UpdateSpoiler String
|
||||||
|
|
|
@ -101,6 +101,17 @@ update draftMsg currentUser ({ draft } as model) =
|
||||||
in
|
in
|
||||||
{ model | draft = newDraft } ! []
|
{ 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 ->
|
UpdateSensitive sensitive ->
|
||||||
{ model | draft = { draft | sensitive = sensitive } } ! []
|
{ model | draft = { draft | sensitive = sensitive } } ! []
|
||||||
|
|
||||||
|
|
|
@ -312,7 +312,12 @@ draftAttachments attachments =
|
||||||
[ href ""
|
[ href ""
|
||||||
, onClickWithPreventAndStop <| DraftEvent (RemoveMedia attachment.id)
|
, onClickWithPreventAndStop <| DraftEvent (RemoveMedia attachment.id)
|
||||||
]
|
]
|
||||||
[ text "×" ]
|
[ text "×" ],
|
||||||
|
input
|
||||||
|
[ type_ "field"
|
||||||
|
, placeholder "Alt text",
|
||||||
|
onInput <| DraftEvent << (UpdateAltText attachment.id)]
|
||||||
|
[]
|
||||||
]
|
]
|
||||||
in
|
in
|
||||||
div [ class "draft-attachments-field" ]
|
div [ class "draft-attachments-field" ]
|
||||||
|
|
|
@ -25,6 +25,8 @@ viewerView ({ attachments, attachment } as viewer) =
|
||||||
, onClickWithPreventAndStop event
|
, onClickWithPreventAndStop event
|
||||||
]
|
]
|
||||||
[ text label ]
|
[ text label ]
|
||||||
|
|
||||||
|
altText = Maybe.withDefault "No description. 😢" attachment.description
|
||||||
in
|
in
|
||||||
div
|
div
|
||||||
[ class "viewer"
|
[ class "viewer"
|
||||||
|
@ -35,7 +37,10 @@ viewerView ({ attachments, attachment } as viewer) =
|
||||||
, navLink "❮" "prev" prev <| ViewerEvent NextAttachment
|
, navLink "❮" "prev" prev <| ViewerEvent NextAttachment
|
||||||
, case attachment.type_ of
|
, case attachment.type_ of
|
||||||
"image" ->
|
"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" ->
|
||||||
audio
|
audio
|
||||||
|
|
Loading…
Reference in New Issue