HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Merge pull request 'Fix z-index's, better clipping in notes' (#10185) from Freeplay/calckey:notes into develop

Browse source 
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10185
This commit is contained in:
Kainoa Kanter 2023-05-24 01:00:50 +00:00
commit 147e5e42c2
9 changed files with 104 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/client/src/components/MkMention.vue
View file

@ -5,7 +5,6 @@
class="akbvjaqn"
:class="{ isMe }"
:to="url"
:style="{ background: bgCss }"
@click.stop
>
<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
@ -37,7 +36,6 @@
<script lang="ts" setup>
import { toUnicode } from "punycode";
import {} from "vue";
import tinycolor from "tinycolor2";
import { host as localHost } from "@/config";
import { $i } from "@/account";
@ -58,17 +56,11 @@ const isMe =
`@${props.username}@${toUnicode(props.host)}` ===
`@${$i.username}@${toUnicode(localHost)}`.toLowerCase();
const bg = tinycolor(
getComputedStyle(document.documentElement).getPropertyValue(
isMe ? "--mentionMe" : "--mention"
)
);
bg.setAlpha(0.1);
const bgCss = bg.toRgbString();
</script>
<style lang="scss" scoped>
.akbvjaqn {
position: relative;
display: inline-block;
padding: 2px 8px 2px 2px;
margin-block: 2px;
@ -78,8 +70,18 @@ const bgCss = bg.toRgbString();
text-overflow: ellipsis;
color: var(--mention);
&::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--mention);
opacity: 0.1;
z-index: -1;
}
&.isMe {
color: var(--mentionMe);
--mention: var(--mentionMe);
}
> .icon {

34
packages/client/src/components/MkNote.vue
View file

@ -575,6 +575,8 @@ defineExpose({
}
.note-context {
position: relative;
z-index: 2;
padding: 0 32px 0 32px;
display: flex;
&:first-child {
@ -587,6 +589,8 @@ defineExpose({
line-height: 28px;
}
> .line {
position: relative;
z-index: 2;
width: var(--avatarSize);
display: flex;
margin-right: 14px;
@ -655,9 +659,15 @@ defineExpose({
}
> .article {
overflow: hidden;
padding: 4px 32px 10px;
cursor: pointer;
&:first-child, &:nth-child(2) {
margin-top: -100px;
padding-top: 104px;
}
@media (pointer: coarse) {
cursor: default;
}
@ -721,7 +731,8 @@ defineExpose({
flex-wrap: wrap;
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
margin-top: 0.4em;
> .button {
> :deep(.button) {
position: relative;
margin: 0;
padding: 8px;
opacity: 0.7;
@ -730,9 +741,27 @@ defineExpose({
width: max-content;
min-width: max-content;
pointer-events: all;
height: auto;
transition: opacity 0.2s;
&::before {
content: "";
position: absolute;
inset: 0;
bottom: 2px;
background: var(--panel);
z-index: -1;
transition: background .2s;
}
&:first-of-type {
margin-left: -0.5em;
&::before {
border-radius: 100px 0 0 100px;
}
}
&:last-of-type {
&::before {
border-radius: 0 100px 100px 0;
}
}
&:hover {
color: var(--fgHighlighted);
@ -778,6 +807,9 @@ defineExpose({
}
> .article {
padding: 4px 16px 8px;
&:first-child, &:nth-child(2) {
padding-top: 104px;
}
> .main > .header-container > .avatar {
margin-right: 10px;
// top: calc(14px + var(--stickyTop, 0px));

1
packages/client/src/components/MkNoteDetailed.vue
View file

@ -595,6 +595,7 @@ onUnmounted(() => {
}
&:hover,
&:focus-within {
--panel: var(--panelHighlight);
&::before {
opacity: 1;
}

50
packages/client/src/components/MkNoteSub.vue
View file

@ -395,7 +395,8 @@ function noteClick(e) {
flex-wrap: wrap;
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
> .button {
> :deep(.button) {
position: relative;
margin: 0;
padding: 8px;
opacity: 0.7;
@ -404,9 +405,27 @@ function noteClick(e) {
width: max-content;
min-width: max-content;
pointer-events: all;
height: auto;
transition: opacity 0.2s;
&::before {
content: "";
position: absolute;
inset: 0;
bottom: 2px;
background: var(--panel);
z-index: -1;
transition: background .2s;
}
&:first-of-type {
margin-left: -0.5em;
&::before {
border-radius: 100px 0 0 100px;
}
}
&:last-of-type {
&::before {
border-radius: 0 100px 100px 0;
}
}
&:hover {
color: var(--fgHighlighted);
@ -425,9 +444,24 @@ function noteClick(e) {
}
}
}
&:first-child > .main > .body {
margin-top: -200px;
padding-top: 200px;
&.reply > .main {
margin-inline: -200px;
padding-inline: 200px;
&::before {
inset-inline: 176px !important;
}
}
&.reply, &.reply-to {
> .main > .body {
margin-right: -24px;
padding-right: 24px;
margin-top: -12px;
padding-top: 12px;
margin-left: calc(0px - var(--avatarSize) - 32px);
padding-left: calc(var(--avatarSize) + 32px);
border-radius: var(--radius);
}
}
&.reply {
--avatarSize: 38px;
@ -451,6 +485,8 @@ function noteClick(e) {
padding-block: 10px;
font-weight: 600;
> .line {
position: relative;
z-index: 2;
flex-grow: 0 !important;
margin-top: -10px !important;
margin-bottom: 10px !important;
@ -520,6 +556,7 @@ function noteClick(e) {
}
.line {
position: relative;
z-index: 2;
width: var(--avatarSize);
display: flex;
flex-grow: 1;
@ -562,6 +599,7 @@ function noteClick(e) {
position: relative;
> .line {
position: absolute;
z-index: 2;
left: 0;
top: 0;
&::after {
@ -635,6 +673,10 @@ function noteClick(e) {
> .main > .avatar-container {
margin-right: 10px;
}
&:first-child > .main > .body {
margin-top: -20px;
padding-top: 22px;
}
}
}

17
packages/client/src/components/MkRenoteButton.vue
View file

@ -3,7 +3,7 @@
v-if="canRenote"
ref="buttonRef"
v-tooltip.noDelay.bottom="i18n.ts.renote"
class="eddddedb _button canRenote"
class="button _button canRenote"
@click="renote(false, $event)"
>
<i class="ph-repeat ph-bold ph-lg"></i>
@ -248,25 +248,12 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
</script>
<style lang="scss" scoped>
.eddddedb {
display: inline-block;
height: 32px;
margin: 2px;
padding: 0 6px;
border-radius: 4px;
.button {
&:not(.canRenote) {
cursor: default;
}
&.renoted {
background: var(--accent);
}
> .count {
display: inline;
margin-left: 8px;
opacity: 0.7;
}
}
</style>

11
packages/client/src/components/MkStarButton.vue
View file

@ -1,7 +1,7 @@
<template>
<button
v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
class="skdfgljsdkf _button"
class="button _button"
@click="star($event)"
>
<svg
@ -70,12 +70,3 @@ function star(ev?: MouseEvent): void {
}
}
</script>
<style lang="scss" scoped>
.skdfgljsdkf {
display: inline-block;
height: 32px;
margin: 2px;
padding: 0 6px;
}
</style>

15
packages/client/src/components/MkStarButtonNoEmoji.vue
View file

@ -1,7 +1,7 @@
<template>
<button
v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
class="_button"
class="button _button"
:class="$style.root"
ref="buttonRef"
@click="toggleStar($event)"
@ -110,13 +110,6 @@ useTooltip(buttonRef, async (showing) => {
</script>
<style lang="scss" module>
.root {
display: inline-block;
height: 32px;
margin: 2px;
padding: 0 6px;
}
.yellow {
color: var(--warn);
}
@ -124,10 +117,4 @@ useTooltip(buttonRef, async (showing) => {
.red {
color: var(--error);
}
.count {
display: inline;
margin: 0 0 0 8px;
opacity: 0.7;
}
</style>

4
packages/client/src/components/MkSubNoteContent.vue
View file

@ -243,6 +243,10 @@ function focusFooter(ev) {
</script>
<style lang="scss" scoped>
:deep(a) {
position: relative;
z-index: 2;
}
.reply-icon {
display: inline-block;
border-radius: 6px;

5
packages/client/src/components/global/MkPageHeader.vue
View file

@ -518,6 +518,9 @@ onUnmounted(() => {
transparent
);
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
&.collapse {
--width: 38px;
@ -541,7 +544,7 @@ onUnmounted(() => {
opacity: 0.7;
overflow: hidden;
transition: color 0.2s, opacity 0.2s, width 0.2s, min-width 0.2s;
--width: max-content;
--width: 38px;
&:hover {
opacity: 1;