Merge branch 'develop' of codeberg.org:calckey/calckey into develop

This commit is contained in:
ThatOneCalculator 2023-05-23 18:01:50 -07:00
commit 41bfbf7df1
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
9 changed files with 104 additions and 55 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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