~vpzom/hitide

05c1e6e4db0c40f826d6cd35b1be767b0e3d6f1d — Colin Reeder 8 months ago 649d33c
Use icon for like buttons
A icons/res/upvote.svg => icons/res/upvote.svg +4 -0
@@ 0,0 1,4 @@
<?xml version="1.0"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" stroke="black">
	<path d="M 10 21 v -12 h -4 l 6 -6 l 6 6 h -4 v 12 z" />
</svg>

A icons/res/upvoted.svg => icons/res/upvoted.svg +4 -0
@@ 0,0 1,4 @@
<?xml version="1.0"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF8F00" stroke="#FF8F00">
	<path d="M 10 21 v -12 h -4 l 6 -6 l 6 6 h -4 v 12 z" />
</svg>

M icons/src/lib.rs => icons/src/lib.rs +3 -1
@@ 43,7 43,9 @@ macro_rules! icons {
icons! {
    NOTIFICATIONS => "notifications.svg",
    NOTIFICATIONS_SOME => "notifications-some.svg",
    PERSON => "person.svg"
    PERSON => "person.svg",
    UPVOTE => "upvote.svg",
    UPVOTED => "upvoted.svg"
}

pub use icons::*;

M res/lang/en.ftl => res/lang/en.ftl +0 -2
@@ 30,8 30,6 @@ follow_request_sent = Follow request sent!
follow_undo = Unfollow
home_follow_prompt1 = Why not
home_follow_prompt2 = follow some communities?
like = Like
like_undo = Unlike
liked_by = Liked by:
likes = Likes
local = Local

M res/lang/eo.ftl => res/lang/eo.ftl +0 -2
@@ 30,8 30,6 @@ follow_request_sent = Abonado peto senditas!
follow_undo = Ne plu aboni
home_follow_prompt1 = Kial ne
home_follow_prompt2 = aboni iujn komunumojn?
like = Ŝati
like_undo = Ne plu ŝati
liked_by = Ŝatata de:
likes = Ŝatantoj
local = Loka

M res/main.css => res/main.css +31 -0
@@ 77,6 77,37 @@ body {
	vertical-align: text-bottom;
}

.iconbutton {
	padding: 0;
}

.iconbutton > .icon {
	margin-left: -1em;
	margin-right: -1em;
}

.votebox {
	float: left;
	margin-right: .5em;
}

.comment > .content {
	display: inline-block;
}

.commentList {
	margin-top: .5em;
	list-style-type: none;
}

.commentList.topLevel {
	padding-left: 0;
}

form.inline {
	display: inline-block;
}

@media (max-width: 768px) {
	.communitySidebar {
		display: none; /* TODO still show this somewhere */

M src/components/mod.rs => src/components/mod.rs +50 -40
@@ 20,55 20,65 @@ pub fn Comment<'a>(
    lang: &'a crate::Translator,
) {
    render::rsx! {
        <li>
            <small>
                <cite><UserLink user={comment.author.as_ref()} /></cite>
                {" "}
                <TimeAgo since={chrono::DateTime::parse_from_rfc3339(&comment.created).unwrap()} lang />
            </small>
            <Content src={comment} />
            <div class={"actionList"}>
                {
                    if base_data.login.is_some() {
                        Some(render::rsx! {
                            <>
                                {
                                    if comment.your_vote.is_some() {
                                        render::rsx! {
                                            <form method={"POST"} action={format!("/comments/{}/unlike", comment.as_ref().id)}>
                                                <button type={"submit"}>{lang.tr("like_undo", None)}</button>
                                            </form>
                                        }
                                    } else {
                                        render::rsx! {
                                            <form method={"POST"} action={format!("/comments/{}/like", comment.as_ref().id)}>
                                                <button type={"submit"}>{lang.tr("like", None)}</button>
                                            </form>
                                        }
        <li class={"comment"}>
            {
                if base_data.login.is_some() {
                    Some(render::rsx! {
                        <div class={"votebox"}>
                            {
                                if comment.your_vote.is_some() {
                                    render::rsx! {
                                        <form method={"POST"} action={format!("/comments/{}/unlike", comment.as_ref().id)}>
                                            <button class={"iconbutton"} type={"submit"}>{hitide_icons::UPVOTED.img()}</button>
                                        </form>
                                    }
                                } else {
                                    render::rsx! {
                                        <form method={"POST"} action={format!("/comments/{}/like", comment.as_ref().id)}>
                                            <button class={"iconbutton"} type={"submit"}>{hitide_icons::UPVOTE.img()}</button>
                                        </form>
                                    }
                                }
                            }
                        </div>
                    })
                } else {
                    None
                }
            }
            <div class={"content"}>
                <small>
                    <cite><UserLink user={comment.author.as_ref()} /></cite>
                    {" "}
                    <TimeAgo since={chrono::DateTime::parse_from_rfc3339(&comment.created).unwrap()} lang />
                </small>
                <Content src={comment} />
                <div class={"actionList"}>
                    {
                        if base_data.login.is_some() {
                            Some(render::rsx! {
                                <a href={format!("/comments/{}", comment.as_ref().id)}>{lang.tr("reply", None)}</a>
                            </>
                        })
                    } else {
                        None
                            })
                        } else {
                            None
                        }
                    }
                }
                {
                    if author_is_me(&comment.author, &base_data.login) {
                        Some(render::rsx! {
                            <a href={format!("/comments/{}/delete", comment.as_ref().id)}>{lang.tr("delete", None)}</a>
                        })
                    } else {
                        None
                    {
                        if author_is_me(&comment.author, &base_data.login) {
                            Some(render::rsx! {
                                <a href={format!("/comments/{}/delete", comment.as_ref().id)}>{lang.tr("delete", None)}</a>
                            })
                        } else {
                            None
                        }
                    }
                }
                </div>
            </div>

            {
                if let Some(replies) = &comment.replies {
                        Some(render::rsx! {
                            <ul>
                            <ul class={"commentList"}>
                                {
                                    replies.iter().map(|reply| {
                                        render::rsx! {


@@ 509,7 519,7 @@ impl<'a> render::Render for NotificationItem<'a> {
    }
}

trait IconExt {
pub trait IconExt {
    fn img(&self) -> render::SimpleElement<()>;
}


M src/routes/mod.rs => src/routes/mod.rs +19 -19
@@ 3,8 3,8 @@ use std::borrow::Cow;
use std::sync::Arc;

use crate::components::{
    Comment, Content, HTPage, MaybeFillInput, MaybeFillTextArea, NotificationItem, PostItem,
    ThingItem, UserLink,
    Comment, Content, HTPage, IconExt, MaybeFillInput, MaybeFillTextArea, NotificationItem,
    PostItem, ThingItem, UserLink,
};
use crate::resp_types::{
    RespCommentInfo, RespInstanceInfo, RespNotification, RespPostCommentInfo, RespPostListPost,


@@ 232,21 232,6 @@ async fn page_comment_inner(
            }
            <p>
                {
                    if let Some(parent) = &comment.parent {
                        Some(render::rsx! {
                            <div>
                                <small><a href={format!("/comments/{}", parent.id)}>{"<- "}{lang.tr("to_parent", None)}</a></small>
                            </div>
                        })
                    } else {
                        None
                    }
                }
                <small><cite><UserLink user={comment.as_ref().author.as_ref()} /></cite>{":"}</small>
                <Content src={&comment} />
            </p>
            <div class={"actionList"}>
                {
                    if base_data.login.is_some() {
                        Some(render::rsx! {
                            <>


@@ 254,13 239,13 @@ async fn page_comment_inner(
                                    if comment.as_ref().your_vote.is_some() {
                                        render::rsx! {
                                            <form method={"POST"} action={format!("/comments/{}/unlike", comment.as_ref().as_ref().id)}>
                                                <button type={"submit"}>{lang.tr("like_undo", None)}</button>
                                                <button type={"submit"} class={"iconbutton"}>{hitide_icons::UPVOTED.img()}</button>
                                            </form>
                                        }
                                    } else {
                                        render::rsx! {
                                            <form method={"POST"} action={format!("/comments/{}/like", comment.as_ref().as_ref().id)}>
                                                <button type={"submit"}>{lang.tr("like", None)}</button>
                                                <button type={"submit"} class={"iconbutton"}>{hitide_icons::UPVOTE.img()}</button>
                                            </form>
                                        }
                                    }


@@ 272,6 257,21 @@ async fn page_comment_inner(
                    }
                }
                {
                    if let Some(parent) = &comment.parent {
                        Some(render::rsx! {
                            <div>
                                <small><a href={format!("/comments/{}", parent.id)}>{"<- "}{lang.tr("to_parent", None)}</a></small>
                            </div>
                        })
                    } else {
                        None
                    }
                }
                <small><cite><UserLink user={comment.as_ref().author.as_ref()} /></cite>{":"}</small>
                <Content src={&comment} />
            </p>
            <div class={"actionList"}>
                {
                    if author_is_me(&comment.as_ref().author, &base_data.login) {
                        Some(render::rsx! {
                            <a href={format!("/comments/{}/delete", comment.as_ref().as_ref().id)}>{lang.tr("delete", None)}</a>

M src/routes/posts.rs => src/routes/posts.rs +20 -14
@@ 2,7 2,7 @@ use super::{
    fetch_base_data, for_client, get_cookie_map_for_headers, get_cookie_map_for_req, html_response,
    res_to_error,
};
use crate::components::{Comment, CommunityLink, Content, HTPage, TimeAgo, UserLink};
use crate::components::{Comment, CommunityLink, Content, HTPage, IconExt, TimeAgo, UserLink};
use crate::resp_types::{JustUser, RespCommunityInfoMaybeYour, RespList, RespPostInfo};
use crate::util::author_is_me;
use std::sync::Arc;


@@ 79,30 79,36 @@ async fn page_post(
                }
            }
            <h1>{title}</h1>
            <p>
                <a href={format!("/posts/{}/likes", post_id)}>
                    <em>{lang.tr("score", Some(&fluent::fluent_args!["score" => post.score]))}</em>
                </a>
                {" "}
            <div>
                {
                    if base_data.login.is_some() {
                        Some(if post.your_vote.is_some() {
                            render::rsx! {
                                <form method={"POST"} action={format!("/posts/{}/unlike", post_id)}>
                                    <button type={"submit"}>{lang.tr("like_undo", None)}</button>
                                </form>
                                <>
                                    <form method={"POST"} action={format!("/posts/{}/unlike", post_id)} class={"inline"}>
                                        <button type={"submit"} class={"iconbutton"}>{hitide_icons::UPVOTED.img()}</button>
                                    </form>
                                    {" "}
                                </>
                            }
                        } else {
                            render::rsx! {
                                <form method={"POST"} action={format!("/posts/{}/like", post_id)}>
                                    <button type={"submit"}>{lang.tr("like", None)}</button>
                                </form>
                                <>
                                    <form method={"POST"} action={format!("/posts/{}/like", post_id)} class={"inline"}>
                                        <button type={"submit"} class={"iconbutton"}>{hitide_icons::UPVOTE.img()}</button>
                                    </form>
                                    {" "}
                                </>
                            }
                        })
                    } else {
                        None
                    }
                }
                <a href={format!("/posts/{}/likes", post_id)}>
                    <em>{lang.tr("score", Some(&fluent::fluent_args!["score" => post.score]))}</em>
                </a>
                {" "}
                {
                    if is_community_moderator {
                        Some(if post.approved {


@@ 122,7 128,7 @@ async fn page_post(
                        None
                    }
                }
            </p>
            </div>
            <p>
                {lang.tr("submitted", None)}
                {" "}<TimeAgo since={chrono::DateTime::parse_from_rfc3339(&post.as_ref().created)?} lang={&lang} />


@@ 167,7 173,7 @@ async fn page_post(
                        None
                    }
                }
                <ul>
                <ul class={"commentList topLevel"}>
                    {
                        post.comments.iter().map(|comment| {
                            render::rsx! {