mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-29 08:21:20 +00:00
Add hover state to note buttons
This commit is contained in:
parent
89784cc8f7
commit
618ed2f6f1
@ -15,6 +15,7 @@
|
|||||||
- [x] Add new thread view
|
- [x] Add new thread view
|
||||||
- [x] Removed profile popover, click on a person's name to find mute and follow buttons
|
- [x] Removed profile popover, click on a person's name to find mute and follow buttons
|
||||||
- [x] Add configurable imgproxy url
|
- [x] Add configurable imgproxy url
|
||||||
|
- [x] Show hover state on icon buttons
|
||||||
|
|
||||||
# 0.2.35
|
# 0.2.35
|
||||||
|
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
# Current
|
# Current
|
||||||
|
|
||||||
|
- [ ] Put profile image on top right with a profile-related menu
|
||||||
- [ ] Re-work note media
|
- [ ] Re-work note media
|
||||||
- [ ] Add webcam image/video capture
|
- [ ] Add webcam image/video capture
|
||||||
- [ ] Show list of media that can be viewed/removed below post
|
- [ ] Show list of media that can be viewed/removed below post
|
||||||
@ -22,6 +23,7 @@
|
|||||||
|
|
||||||
# Core
|
# Core
|
||||||
|
|
||||||
|
- [ ] Put chat in window
|
||||||
- [ ] Private groups
|
- [ ] Private groups
|
||||||
- [ ] Superfollow?
|
- [ ] Superfollow?
|
||||||
- [ ] Make joined status interoperable, and persistent across logins
|
- [ ] Make joined status interoperable, and persistent across logins
|
||||||
|
@ -115,7 +115,7 @@
|
|||||||
"pointer-events-none opacity-50": disableActions,
|
"pointer-events-none opacity-50": disableActions,
|
||||||
})}
|
})}
|
||||||
on:click={reply.start}>
|
on:click={reply.start}>
|
||||||
<i class="fa fa-reply cursor-pointer" />
|
<i class="fa fa-reply cursor-pointer transition-transform hover:scale-110" />
|
||||||
{$repliesCount}
|
{$repliesCount}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@ -125,7 +125,7 @@
|
|||||||
})}
|
})}
|
||||||
on:click={() => (like ? deleteReaction(like) : react("+"))}>
|
on:click={() => (like ? deleteReaction(like) : react("+"))}>
|
||||||
<i
|
<i
|
||||||
class={cx("fa fa-heart cursor-pointer", {
|
class={cx("fa fa-heart cursor-pointer transition-transform hover:scale-110", {
|
||||||
"fa-beat fa-beat-custom": like,
|
"fa-beat fa-beat-custom": like,
|
||||||
})} />
|
})} />
|
||||||
{$likesCount}
|
{$likesCount}
|
||||||
@ -137,7 +137,7 @@
|
|||||||
"text-accent": zap,
|
"text-accent": zap,
|
||||||
})}
|
})}
|
||||||
on:click={startZap}>
|
on:click={startZap}>
|
||||||
<i class="fa fa-bolt cursor-pointer" />
|
<i class="fa fa-bolt cursor-pointer transition-transform hover:scale-110" />
|
||||||
{formatSats($zapsTotal)}
|
{formatSats($zapsTotal)}
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -4,19 +4,13 @@
|
|||||||
import {Directory, user} from "src/app/engine"
|
import {Directory, user} from "src/app/engine"
|
||||||
|
|
||||||
export let pubkey
|
export let pubkey
|
||||||
export let inert = false
|
|
||||||
|
|
||||||
const profile = Directory.profiles.key(pubkey).derived(defaultTo({pubkey}))
|
const profile = Directory.profiles.key(pubkey).derived(defaultTo({pubkey}))
|
||||||
const following = user.followsSet.derived(s => s.has(pubkey))
|
const following = user.followsSet.derived(s => s.has(pubkey))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div class={cx("flex items-center gap-2", $$props.class)}>
|
||||||
class={cx("flex items-center gap-2 group/PersonName", $$props.class)}>
|
<span>{Directory.displayProfile($profile)}</span>
|
||||||
<span class={cx({
|
|
||||||
"duration-600 transition-all border-b border-solid border-transparent group-hover/PersonName:border-gray-3": !inert,
|
|
||||||
})}>
|
|
||||||
{Directory.displayProfile($profile)}
|
|
||||||
</span>
|
|
||||||
{#if $following}
|
{#if $following}
|
||||||
<i class="fa fa-user-check text-xs text-accent" />
|
<i class="fa fa-user-check text-xs text-accent" />
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -24,7 +24,7 @@
|
|||||||
<Anchor on:click={inert ? null : showDetail} class="flex gap-4">
|
<Anchor on:click={inert ? null : showDetail} class="flex gap-4">
|
||||||
<PersonCircle size={14} {pubkey} />
|
<PersonCircle size={14} {pubkey} />
|
||||||
<div class="mr-16 flex flex-grow flex-col gap-1">
|
<div class="mr-16 flex flex-grow flex-col gap-1">
|
||||||
<PersonName inert class="text-lg" {pubkey} />
|
<PersonName class="text-lg" {pubkey} />
|
||||||
<PersonHandle {pubkey} />
|
<PersonHandle {pubkey} />
|
||||||
</div>
|
</div>
|
||||||
</Anchor>
|
</Anchor>
|
||||||
|
@ -52,7 +52,7 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
$: picture = Settings.imgproxy($channel.picture, {w: 48, h: 48})
|
$: picture = Settings.imgproxy($channel.picture, {w: 96, h: 96})
|
||||||
|
|
||||||
document.title = $channel.name || "Coracle Chat"
|
document.title = $channel.name || "Coracle Chat"
|
||||||
</script>
|
</script>
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
const enter = () => navigate(`/chat/${nip19.noteEncode(channel.id)}`)
|
const enter = () => navigate(`/chat/${nip19.noteEncode(channel.id)}`)
|
||||||
const join = () => user.joinChannel(channel.id)
|
const join = () => user.joinChannel(channel.id)
|
||||||
const leave = () => user.leaveChannel(channel.id)
|
const leave = () => user.leaveChannel(channel.id)
|
||||||
const picture = Settings.imgproxy(channel.picture, {w: 56, h: 56})
|
const picture = Settings.imgproxy(channel.picture, {w: 112, h: 112})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
@ -55,7 +55,7 @@
|
|||||||
<div class="flex flex-grow flex-col gap-4">
|
<div class="flex flex-grow flex-col gap-4">
|
||||||
<div class="flex items-start justify-between gap-4">
|
<div class="flex items-start justify-between gap-4">
|
||||||
<div class="flex flex-grow flex-col gap-2">
|
<div class="flex flex-grow flex-col gap-2">
|
||||||
<PersonName inert class="text-2xl" {pubkey} />
|
<PersonName class="text-2xl" {pubkey} />
|
||||||
<PersonHandle {pubkey} />
|
<PersonHandle {pubkey} />
|
||||||
</div>
|
</div>
|
||||||
<PersonActions {pubkey} />
|
<PersonActions {pubkey} />
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
export let src: string
|
export let src: string
|
||||||
export let size = 4
|
export let size = 4
|
||||||
|
|
||||||
const url = Settings.imgproxy(src, {w: size * 4, h: size * 4})
|
const url = Settings.imgproxy(src, {w: size * 20, h: size * 20})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
Loading…
Reference in New Issue
Block a user