flewkey/tooty
1
0
Fork 0
Code Releases Activity

Improve toot compose form.

Browse Source
This commit is contained in:
Nicolas Perriault 2017-05-18 23:47:01 +02:00
parent 6f09a341e4
commit f2ec5416ba
No known key found for this signature in database
GPG Key ID: DA5E4C83904F7A2A
2 changed files with 120 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
public/style.css
View File

@ -407,14 +407,44 @@ li.load-more {
clear: both; clear: both;
} }
.btn-nsfw { .draft-actions {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-content: stretch;
align-items: flex-start;
}
.draft-actions-btns {
flex: 1 1 auto;
width: 60%;
}
.draft-actions-charcount {
flex: 1 1 auto;
width: 15%;
padding: 0 12px;
line-height: 38px;
}
.draft-actions-submit {
flex: 1 1 auto;
width: 25%;
font-weight: bold;
}
.draft-actions .btn {
padding: 8px 2px;
}
.btn-clear, .btn-nsfw, .btn-cw, .charcount {
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
} }
.charcount { .exceed {
cursor: default; color: red;
} }
.in-reply-to .well { .in-reply-to .well {
@ -454,14 +484,14 @@ li.load-more {
} }
.status-field textarea { .status-field textarea {
border-bottom-left-radius: 0; border-top-left-radius: 0;
border-bottom-right-radius: 0; border-top-right-radius: 0;
} }
.draft-visibilities .btn { .draft-visibilities .btn {
border-top: 0; border-bottom: 0;
border-top-left-radius: 0; border-bottom-left-radius: 0;
border-top-right-radius: 0; border-bottom-right-radius: 0;
} }
.draft-attachments-field { .draft-attachments-field {
@ -523,7 +553,8 @@ li.load-more {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
content: 'Attach a media'; font-family: "Glyphicons Halflings";
content: "\e046";
border-radius: 4px; border-radius: 4px;
} }

152
src/View/Draft.elm
View File

@ -172,20 +172,9 @@ draftView ({ draft, currentUser } as model) =
[ currentUserView currentUser [ currentUserView currentUser
, draftReplyToView draft , draftReplyToView draft
, Html.form [ class "form", onSubmit SubmitDraft ] , Html.form [ class "form", onSubmit SubmitDraft ]
[ div [ class "form-group checkbox" ] [ if hasSpoiler then
[ label []
[ input
[ type_ "checkbox"
, onCheck <| DraftEvent << ToggleSpoiler
, checked hasSpoiler
]
[]
, text " Add a Content Warning"
]
]
, if hasSpoiler then
div [ class "form-group" ] div [ class "form-group" ]
[ label [ for "spoiler" ] [ text "Visible part" ] [ label [ for "spoiler" ] [ text "Content Warning (visible part)" ]
, textarea , textarea
[ id "spoiler" [ id "spoiler"
, class "form-control" , class "form-control"
@ -199,14 +188,12 @@ draftView ({ draft, currentUser } as model) =
] ]
else else
text "" text ""
, visibilitySelector draft
, div [ class "form-group status-field" ] , div [ class "form-group status-field" ]
[ label [ for "status" ] [ if hasSpoiler then
[ text <| label [ for "status" ] [ text "Hidden part" ]
if hasSpoiler then else
"Hidden part" text ""
else
"Status"
]
, let , let
dec = dec =
(Decode.map (Decode.map
@ -254,51 +241,68 @@ draftView ({ draft, currentUser } as model) =
[] []
, autoMenu , autoMenu
] ]
, visibilitySelector draft , draftAttachments draft.attachments
, fileUploadField draft , div [ class "draft-actions" ]
, Common.justifiedButtonGroup "draft-actions" [ div [ class "draft-actions-btns" ]
[ button [ Common.justifiedButtonGroup ""
[ type_ "button" [ button
, class "btn btn-default" [ type_ "button"
, title "Clear this draft" , class "btn btn-default btn-clear"
, onClick (DraftEvent ClearDraft) , title "Clear this draft"
, onClick (DraftEvent ClearDraft)
]
[ Common.icon "trash" ]
, button
[ type_ "button"
, class <|
"btn btn-default btn-cw "
++ (if hasSpoiler then
"btn-primary active"
else
""
)
, title "Add a Content Warning"
, onClick <| DraftEvent (ToggleSpoiler (not hasSpoiler))
]
[ text "CW" ]
, button
[ type_ "button"
, class <|
"btn btn-default btn-nsfw "
++ (if draft.sensitive then
"btn-primary active"
else
""
)
, title "Mark this post as Not Safe For Work (sensitive content)"
, onClick <| DraftEvent (UpdateSensitive (not draft.sensitive))
]
[ text "NSFW" ]
, fileUploadField draft
]
] ]
[ Common.icon "trash" ] , if limitExceeded then
, button div
[ type_ "button" [ class "draft-actions-charcount text-center exceed" ]
, class <| [ text <| toString (500 - charCount) ]
"btn btn-default btn-nsfw " else
++ (if draft.sensitive then div
"btn-primary active" [ class "draft-actions-charcount text-center" ]
else [ text <| toString charCount ]
""
)
, title "Mark this post as Not Safe For Work (sensitive content)"
, onClick <| DraftEvent (UpdateSensitive (not draft.sensitive))
]
[ text "NSFW" ]
, div
[ class <|
if limitExceeded then
"btn btn-danger charcount active"
else
"btn btn-default charcount active"
]
[ text <| toString charCount ]
, button , button
[ type_ "submit" [ type_ "submit"
, class "btn btn-warning" , class "draft-actions-submit btn btn-warning btn-toot"
, disabled limitExceeded , disabled limitExceeded
] ]
[ text "Toot!" ] [ text "Toot" ]
] ]
] ]
] ]
] ]
fileUploadField : Draft -> Html Msg draftAttachments : List Attachment -> Html Msg
fileUploadField draft = draftAttachments attachments =
let let
attachmentPreview attachment = attachmentPreview attachment =
li li
@ -316,25 +320,29 @@ fileUploadField draft =
[ text "×" ] [ text "×" ]
] ]
in in
div [ class "draft-attachments-field form-group" ] div [ class "draft-attachments-field" ]
[ if List.length draft.attachments > 0 then [ if List.length attachments > 0 then
ul [ class "draft-attachments" ] <| ul [ class "draft-attachments" ] <|
List.map attachmentPreview draft.attachments List.map attachmentPreview attachments
else
text ""
, if draft.mediaUploading then
button [ class "btn btn-default btn-loading", disabled True ]
[ text "Uploading media..." ]
else if List.length draft.attachments < 4 then
label [ class "form-control draft-attachment-input-label" ]
[ input
[ type_ "file"
, id "draft-attachment"
, on "change" (Decode.succeed <| DraftEvent (UploadMedia "draft-attachment"))
]
[]
, text ""
]
else else
text "" text ""
] ]
fileUploadField : Draft -> Html Msg
fileUploadField draft =
if draft.mediaUploading then
button [ class "btn btn-default btn-loading", disabled True ]
[ Common.icon "time" ]
else if List.length draft.attachments < 4 then
label [ class "btn btn-default draft-attachment-input-label" ]
[ input
[ type_ "file"
, id "draft-attachment"
, on "change" (Decode.succeed <| DraftEvent (UploadMedia "draft-attachment"))
]
[]
, text ""
]
else
text ""