From 3ba9b8bf3bcb1c6999881d8acd8df5f27b0fec10 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Fri, 30 Aug 2019 11:42:46 +0900 Subject: [PATCH] Improved post UI --- arn/Likeable.go | 8 ++++++- mixins/Postable.pixy | 41 +++++++++++++++++++----------------- pages/activity/activity.pixy | 2 +- pages/post/post.pixy | 5 +++-- pages/post/post.scarlet | 6 ------ styles/post.scarlet | 31 +++++++++++++++++++-------- 6 files changed, 55 insertions(+), 38 deletions(-) delete mode 100644 pages/post/post.scarlet diff --git a/arn/Likeable.go b/arn/Likeable.go index c362b6cd..9548bd82 100644 --- a/arn/Likeable.go +++ b/arn/Likeable.go @@ -35,13 +35,19 @@ func LikeAction() *api.Action { return errors.New("Drafts need to be published before they can be liked") } - likeable := obj.(Likeable) user := GetUserFromContext(ctx) if user == nil { return errors.New("Not logged in") } + postable, isPostable := obj.(Postable) + + if isPostable && postable.Creator().ID == user.ID { + return errors.New("You can't like your own posts") + } + + likeable := obj.(Likeable) likeable.Like(user.ID) // Call OnLike if the object implements it diff --git a/mixins/Postable.pixy b/mixins/Postable.pixy index 9e79ffd3..508d3430 100644 --- a/mixins/Postable.pixy +++ b/mixins/Postable.pixy @@ -4,11 +4,11 @@ component Postable(post arn.Postable, user *arn.User, includeReplies bool, showP .post-author Avatar(post.Creator()) - .post-content(data-highlight=post.Creator().ID == highlightAuthorID) + .post-box(data-highlight=post.Creator().ID == highlightAuthorID) .post-header - .post-creator + .post-header-info a(href=post.Creator().Link())= post.Creator().Nick - + if showParent if post.GetParentType() == "User" if post.GetParentID() != post.Creator().ID @@ -17,35 +17,23 @@ component Postable(post arn.Postable, user *arn.User, includeReplies bool, showP else if post.GetParentType() != "" span in a(href=post.Parent().Link())= post.Parent().TitleByUser(user) - - if user == nil || user.ID == post.Creator().ID - //- Don't display a like icon. - else if post.LikedBy(user.ID) - button.post-action.post-likes.tip.action(id="unlike-" + post.GetID(), aria-label="Unlike", data-action="unlike", data-trigger="click") - RawIcon("heart") - else - button.post-action.post-likes.tip.action(id="like-" + post.GetID(), aria-label="Like", data-action="like", data-trigger="click") - RawIcon("heart-o") if user != nil - button.post-action.tip.action(data-post-id=post.GetID(), aria-label="Reply", data-action="reply", data-trigger="click") - RawIcon("reply") - if user.ID == post.Creator().ID - button.post-action.tip.action(data-action="editPost", data-trigger="click", data-id=post.GetID(), aria-label="Edit") + button.post-action.post-header-action.tip.action(data-action="editPost", data-trigger="click", data-id=post.GetID(), aria-label="Edit") RawIcon("pencil") if post.TypeName() != "Thread" if user != nil && (user.Role == "admin" || user.Role == "editor") - button.post-action.tip.action(data-action="deletePost", data-trigger="click", data-id=post.GetID(), aria-label="Delete") + button.post-action.post-header-action.tip.action(data-action="deletePost", data-trigger="click", data-id=post.GetID(), aria-label="Delete") RawIcon("trash") - a.post-action.tip(href=post.Link(), aria-label="Link") + a.post-action.post-header-action.tip(href=post.Link(), aria-label="Link") RawIcon("link") .post-date.utc-date(data-date=post.GetCreated()) - div(id="render-" + post.GetID())!= post.HTML() + .post-content(id="render-" + post.GetID())!= post.HTML() if user != nil && user.ID == post.Creator().ID .post-edit-interface @@ -63,6 +51,21 @@ component Postable(post arn.Postable, user *arn.User, includeReplies bool, showP Icon("close") span Cancel + .post-toolbar + if user != nil + button.post-action.post-toolbar-action.tip.action(data-post-id=post.GetID(), aria-label="Reply", data-action="reply", data-trigger="click") + Icon("reply") + span= post.CountPosts() + + if user != nil && post.LikedBy(user.ID) + button.post-action.post-toolbar-action.tip.action(id="unlike-" + post.GetID(), aria-label="Unlike", data-action="unlike", data-trigger="click", data-like="true") + Icon("heart") + span= post.CountLikes() + else + button.post-action.post-toolbar-action.tip.action(id="like-" + post.GetID(), aria-label="Like", data-action="like", data-trigger="click", data-like="false") + Icon("heart-o") + span= post.CountLikes() + .replies(id="replies-" + post.GetID()) if includeReplies each reply in post.Posts() diff --git a/pages/activity/activity.pixy b/pages/activity/activity.pixy index 86a95a83..dbc5d830 100644 --- a/pages/activity/activity.pixy +++ b/pages/activity/activity.pixy @@ -36,7 +36,7 @@ component Activity(activity arn.Activity, user *arn.User) //- Avatar(activity.Creator()) //- .post-content //- .post-header - //- .post-creator + //- .post-header-info //- a(href=activity.Creator().Link())= activity.Creator().Nick //- if activity.TypeName() == "ActivityCreate" diff --git a/pages/post/post.pixy b/pages/post/post.pixy index 079fff25..b6552211 100644 --- a/pages/post/post.pixy +++ b/pages/post/post.pixy @@ -4,6 +4,7 @@ component Post(post *arn.Post, user *arn.User) Postable(post, user, true, true, "") if user != nil && user.Role == "admin" - .side-note-container.mountable - a.side-note.tip(href=post.Link() + "/edit", aria-label="Admin Edit") + .buttons + a.button.mountable(href=post.Link() + "/edit") Icon("edit") + span Edit (admin) diff --git a/pages/post/post.scarlet b/pages/post/post.scarlet deleted file mode 100644 index 940d41ff..00000000 --- a/pages/post/post.scarlet +++ /dev/null @@ -1,6 +0,0 @@ -.side-note-container - horizontal - justify-content flex-end - -.side-note - font-size 0.9rem \ No newline at end of file diff --git a/styles/post.scarlet b/styles/post.scarlet index af655eb3..836e4f23 100644 --- a/styles/post.scarlet +++ b/styles/post.scarlet @@ -10,8 +10,9 @@ post-content-padding-y = 0.75rem horizontal horizontal-line-bottom -.post-creator +.post-header-info flex 1 + clip-long-text .post-action display flex @@ -20,23 +21,26 @@ post-content-padding-y = 0.75rem background none padding 0 height auto - margin-right 0.5rem - opacity 0 color hsla(text-color-h, text-color-s, text-color-l, 0.5) :hover color link-hover-color background none +.post-header-action + opacity 0 + margin-right 0.5rem + .post-date color hsla(text-color-h, text-color-s, text-color-l, 0.5) white-space nowrap -.post-content +.post-box ui-element flex-grow 1 padding 0.75rem 1rem position relative + overflow hidden h1, h2, h3 font-weight bold @@ -60,9 +64,22 @@ post-content-padding-y = 0.75rem object-fit cover :hover - .post-action + .post-header-action opacity 1 +.post-toolbar + horizontal + justify-content flex-end + margin-top typography-margin + padding-top typography-margin + border-top 1px solid reverse-light-color + +.post-toolbar-action + margin-left 1rem + + [data-like="true"] + color hsla(0, 90%, 50%, 1) + .new-post-actions justify-content flex-end opacity 0 @@ -82,10 +99,6 @@ post-content-padding-y = 0.75rem button pointer-events all -.post-likes - color hsla(text-color-h, text-color-s, text-color-l, 0.4) - margin-right 0.4em - .post-edit-interface vertical