Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Heart icon resized #286

Merged
merged 2 commits into from
Aug 7, 2024
Merged

Fix: Heart icon resized #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a40ff7b
Fix: Heart icon resized
prakash-bhatt-yral Aug 2, 2024
535ad1e
Fix: Heart icon was getting cropped and size was being updated while …
prakash-bhatt-yral Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions ssr/public/img/heart-icon-liked.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ssr/public/img/heart-icon-white.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 37 additions & 27 deletions ssr/src/page/post_view/overlay.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,11 @@ fn LikeAndAuthCanLoader(post: PostDetails) -> impl IntoView {
let likes = create_rw_signal(post.likes);

let liked = create_rw_signal(None::<bool>);
let icon_class = Signal::derive(move || {
let icon_name = Signal::derive(move || {
if liked().unwrap_or_default() {
Some(TextProp::from("fill-primary-600"))
"/img/heart-icon-liked.svg"
} else {
None
}
});
let icon_style = Signal::derive(move || {
if liked().unwrap_or_default() {
Some(TextProp::from("filter: drop-shadow(2px 0 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(0 -2px 0 white);"))
} else {
None
"/img/heart-icon-white.svg"
}
});

Expand Down Expand Up @@ -98,10 +91,9 @@ fn LikeAndAuthCanLoader(post: PostDetails) -> impl IntoView {
<div class="relative flex flex-col gap-1 items-center">
<button
on:click=move |_| like_toggle.dispatch(())
class="drop-shadow-lg"
disabled=move || liking() || liked.with(|l| l.is_none())
>
<Icon class=icon_class style=icon_style icon=icondata::AiHeartFilled/>
<img src=icon_name style="width: 1em; height: 1em;"/>
</button>
<span class="absolute -bottom-5 text-sm md:text-md">{likes}</span>
</div>
Expand Down Expand Up @@ -189,30 +181,30 @@ pub fn VideoDetailsOverlay(post: PostDetails) -> impl IntoView {
href=profile_url
class="w-10 md:w-12 h-10 md:h-12 overflow-clip rounded-full border-white border-2"
>
<img class="h-full w-full object-cover" src=post.propic_url/>
<img class="h-full w-full object-cover" src=post.propic_url />
</a>
<div class="flex flex-col w-7/12">
<span class="text-md md:text-lg font-bold truncate">
{post.display_name}
</span>
<span class="flex flex-row gap-1 items-center text-sm md:text-md">
<Icon icon=icondata::AiEyeOutlined/>
<Icon icon=icondata::AiEyeOutlined />
{post.views}
</span>
</div>
</div>
<ExpandableText description=post.description/>
<ExpandableText description=post.description />
</div>
<div class="flex flex-col gap-8 pb-10 items-end w-3/12 text-4xl">
<button on:click=move |_| show_report.set(true)>
<Icon class="drop-shadow-lg" icon=icondata::TbMessageReport/>
<Icon class="drop-shadow-lg" icon=icondata::TbMessageReport />
</button>
<a href="/refer-earn">
<Icon class="drop-shadow-lg" icon=icondata::AiGiftFilled/>
<Icon class="drop-shadow-lg" icon=icondata::AiGiftFilled />
</a>
<LikeAndAuthCanLoader post=post_c/>
<LikeAndAuthCanLoader post=post_c />
<button on:click=move |_| share()>
<Icon class="drop-shadow-lg" icon=icondata::RiSendPlaneBusinessFill/>
<Icon class="drop-shadow-lg" icon=icondata::RiSendPlaneBusinessFill />
</button>
</div>
</div>
Expand All @@ -224,7 +216,7 @@ pub fn VideoDetailsOverlay(post: PostDetails) -> impl IntoView {
{video_url}
</p>
<button on:click=move |_| click_copy(video_url())>
<Icon class="text-xl" icon=icondata::FaCopyRegular/>
<Icon class="text-xl" icon=icondata::FaCopyRegular />
</button>
</div>
</div>
Expand All @@ -242,15 +234,33 @@ pub fn VideoDetailsOverlay(post: PostDetails) -> impl IntoView {
<span class="text-lg">Report Post</span>
<span class="text-lg">Please select a reason:</span>
<div class="max-w-full text-md text-black">
<select class="p-2 w-full block rounded-lg text-sm" on:change=move |ev| {
<select
class="p-2 w-full block rounded-lg text-sm"
on:change=move |ev| {
let new_value = event_target_value(&ev);
set_report_option(new_value);
}>
<SelectOption value=report_option is=format!("{}",ReportOption::Nudity.as_str())/>
<SelectOption value=report_option is=format!("{}",ReportOption::Violence.as_str())/>
<SelectOption value=report_option is=format!("{}",ReportOption::Offensive.as_str())/>
<SelectOption value=report_option is=format!("{}",ReportOption::Spam.as_str())/>
<SelectOption value=report_option is=format!("{}",ReportOption::Other.as_str())/>
}
>
<SelectOption
value=report_option
is=format!("{}", ReportOption::Nudity.as_str())
/>
<SelectOption
value=report_option
is=format!("{}", ReportOption::Violence.as_str())
/>
<SelectOption
value=report_option
is=format!("{}", ReportOption::Offensive.as_str())
/>
<SelectOption
value=report_option
is=format!("{}", ReportOption::Spam.as_str())
/>
<SelectOption
value=report_option
is=format!("{}", ReportOption::Other.as_str())
/>
</select>
</div>
<button on:click=move |_| click_report.dispatch(())>
Expand Down
Loading