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;
}
.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-weight: bold;
line-height: 20px;
}
.charcount {
cursor: default;
.exceed {
color: red;
}
.in-reply-to .well {
@ -454,14 +484,14 @@ li.load-more {
}
.status-field textarea {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.draft-visibilities .btn {
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.draft-attachments-field {
@ -523,7 +553,8 @@ li.load-more {
width: 100%;
height: 100%;
display: block;
content: 'Attach a media';
font-family: "Glyphicons Halflings";
content: "\e046";
border-radius: 4px;
}

88
src/View/Draft.elm
View File

@ -172,20 +172,9 @@ draftView ({ draft, currentUser } as model) =
[ currentUserView currentUser
, draftReplyToView draft
, Html.form [ class "form", onSubmit SubmitDraft ]
[ div [ class "form-group checkbox" ]
[ label []
[ input
[ type_ "checkbox"
, onCheck <| DraftEvent << ToggleSpoiler
, checked hasSpoiler
]
[]
, text " Add a Content Warning"
]
]
, if hasSpoiler then
[ if hasSpoiler then
div [ class "form-group" ]
[ label [ for "spoiler" ] [ text "Visible part" ]
[ label [ for "spoiler" ] [ text "Content Warning (visible part)" ]
, textarea
[ id "spoiler"
, class "form-control"
@ -199,14 +188,12 @@ draftView ({ draft, currentUser } as model) =
]
else
text ""
, visibilitySelector draft
, div [ class "form-group status-field" ]
[ label [ for "status" ]
[ text <|
if hasSpoiler then
"Hidden part"
[ if hasSpoiler then
label [ for "status" ] [ text "Hidden part" ]
else
"Status"
]
text ""
, let
dec =
(Decode.map
@ -254,16 +241,30 @@ draftView ({ draft, currentUser } as model) =
[]
, autoMenu
]
, visibilitySelector draft
, fileUploadField draft
, Common.justifiedButtonGroup "draft-actions"
, draftAttachments draft.attachments
, div [ class "draft-actions" ]
[ div [ class "draft-actions-btns" ]
[ Common.justifiedButtonGroup ""
[ button
[ type_ "button"
, class "btn btn-default"
, class "btn btn-default btn-clear"
, 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 <|
@ -277,28 +278,31 @@ draftView ({ draft, currentUser } as model) =
, onClick <| DraftEvent (UpdateSensitive (not draft.sensitive))
]
[ text "NSFW" ]
, div
[ class <|
if limitExceeded then
"btn btn-danger charcount active"
else
"btn btn-default charcount active"
, fileUploadField draft
]
]
, if limitExceeded then
div
[ class "draft-actions-charcount text-center exceed" ]
[ text <| toString (500 - charCount) ]
else
div
[ class "draft-actions-charcount text-center" ]
[ text <| toString charCount ]
, button
[ type_ "submit"
, class "btn btn-warning"
, class "draft-actions-submit btn btn-warning btn-toot"
, disabled limitExceeded
]
[ text "Toot!" ]
[ text "Toot" ]
]
]
]
]
fileUploadField : Draft -> Html Msg
fileUploadField draft =
draftAttachments : List Attachment -> Html Msg
draftAttachments attachments =
let
attachmentPreview attachment =
li
@ -316,17 +320,22 @@ fileUploadField draft =
[ text "×" ]
]
in
div [ class "draft-attachments-field form-group" ]
[ if List.length draft.attachments > 0 then
div [ class "draft-attachments-field" ]
[ if List.length attachments > 0 then
ul [ class "draft-attachments" ] <|
List.map attachmentPreview draft.attachments
List.map attachmentPreview attachments
else
text ""
, if draft.mediaUploading then
]
fileUploadField : Draft -> Html Msg
fileUploadField draft =
if draft.mediaUploading then
button [ class "btn btn-default btn-loading", disabled True ]
[ text "Uploading media..." ]
[ Common.icon "time" ]
else if List.length draft.attachments < 4 then
label [ class "form-control draft-attachment-input-label" ]
label [ class "btn btn-default draft-attachment-input-label" ]
[ input
[ type_ "file"
, id "draft-attachment"
@ -337,4 +346,3 @@ fileUploadField draft =
]
else
text ""
]