Merge pull request 'Display author's replies first, fixes, other stuff' (#10194) from Freeplay/calckey:notes into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10194
This commit is contained in:
Kainoa Kanter 2023-05-25 03:51:34 +00:00
commit 991788dcce
8 changed files with 59 additions and 56 deletions

View File

@ -31,7 +31,7 @@ html
meta(name='theme-color-orig' content= themeColor || '#31748f') meta(name='theme-color-orig' content= themeColor || '#31748f')
meta(property='twitter:card' content='summary') meta(property='twitter:card' content='summary')
meta(property='og:site_name' content= instanceName || 'Calckey') meta(property='og:site_name' content= instanceName || 'Calckey')
meta(name='viewport' content='width=device-width, initial-scale=1') meta(name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no')
link(rel='icon' href= icon || `/favicon.ico?${ timestamp }`) link(rel='icon' href= icon || `/favicon.ico?${ timestamp }`)
link(rel='apple-touch-icon' href= icon || `/apple-touch-icon.png?${ timestamp }`) link(rel='apple-touch-icon' href= icon || `/apple-touch-icon.png?${ timestamp }`)
link(rel='manifest' href='/manifest.json') link(rel='manifest' href='/manifest.json')

View File

@ -401,20 +401,20 @@ function onContextmenu(ev: MouseEvent): void {
os.pageWindow(notePage(appearNote)); os.pageWindow(notePage(appearNote));
}, },
}, },
{ notePage(appearNote) != location.pathname ? {
icon: "ph-arrows-out-simple ph-bold ph-lg", icon: "ph-arrows-out-simple ph-bold ph-lg",
text: i18n.ts.showInPage, text: i18n.ts.showInPage,
action: () => { action: () => {
router.push(notePage(appearNote), "forcePage"); router.push(notePage(appearNote), "forcePage");
}, },
}, } : undefined,
null, null,
{ {
type: "a",
icon: "ph-arrow-square-out ph-bold ph-lg", icon: "ph-arrow-square-out ph-bold ph-lg",
text: i18n.ts.openInNewTab, text: i18n.ts.openInNewTab,
action: () => { href: notePage(appearNote),
window.open(notePage(appearNote), "_blank"); target: "_blank",
},
}, },
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: "ph-link-simple ph-bold ph-lg",
@ -423,6 +423,13 @@ function onContextmenu(ev: MouseEvent): void {
copyToClipboard(`${url}${notePage(appearNote)}`); copyToClipboard(`${url}${notePage(appearNote)}`);
}, },
}, },
note.user.host != null ? {
type: "a",
icon: "ph-arrow-square-up-right ph-bold ph-lg",
text: i18n.ts.showOnRemote,
href: note.url ?? note.uri ?? "",
target: "_blank",
} : undefined,
], ],
ev ev
); );

View File

@ -82,7 +82,7 @@
:key="note.id" :key="note.id"
:note="note" :note="note"
class="reply" class="reply"
:conversation="directQuotes" :conversation="replies"
:detailedView="true" :detailedView="true"
/> />
<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" /> <MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
@ -357,6 +357,12 @@ os.api("notes/children", {
limit: 30, limit: 30,
depth: 12, depth: 12,
}).then((res) => { }).then((res) => {
res = res.reduce((acc, note) => {
if (note.userId == appearNote.userId) {
return [...acc, note];
}
return [note, ...acc];
}, []);
replies.value = res; replies.value = res;
directReplies = res directReplies = res
.filter((note) => note.replyId === appearNote.id) .filter((note) => note.replyId === appearNote.id)
@ -620,9 +626,6 @@ onUnmounted(() => {
} }
} }
&.max-width_500px {
font-size: 0.9em;
}
&.max-width_450px { &.max-width_450px {
> .reply-to:first-child { > .reply-to:first-child {
padding-top: 14px; padding-top: 14px;

View File

@ -337,7 +337,7 @@ function onContextmenu(ev: MouseEvent): void {
} else { } else {
os.contextMenu( os.contextMenu(
[ [
{ {
type: "label", type: "label",
text: notePage(appearNote), text: notePage(appearNote),
}, },
@ -348,20 +348,20 @@ function onContextmenu(ev: MouseEvent): void {
os.pageWindow(notePage(appearNote)); os.pageWindow(notePage(appearNote));
}, },
}, },
{ notePage(appearNote) != location.pathname ? {
icon: "ph-arrows-out-simple ph-bold ph-lg", icon: "ph-arrows-out-simple ph-bold ph-lg",
text: i18n.ts.showInPage, text: i18n.ts.showInPage,
action: () => { action: () => {
router.push(notePage(appearNote), "forcePage"); router.push(notePage(appearNote), "forcePage");
}, },
}, } : undefined,
null, null,
{ {
type: "a",
icon: "ph-arrow-square-out ph-bold ph-lg", icon: "ph-arrow-square-out ph-bold ph-lg",
text: i18n.ts.openInNewTab, text: i18n.ts.openInNewTab,
action: () => { href: notePage(appearNote),
window.open(notePage(appearNote), "_blank"); target: "_blank",
},
}, },
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: "ph-link-simple ph-bold ph-lg",
@ -370,6 +370,13 @@ function onContextmenu(ev: MouseEvent): void {
copyToClipboard(`${url}${notePage(appearNote)}`); copyToClipboard(`${url}${notePage(appearNote)}`);
}, },
}, },
note.user.host != null ? {
type: "a",
icon: "ph-arrow-square-up-right ph-bold ph-lg",
text: i18n.ts.showOnRemote,
href: note.url ?? note.uri ?? "",
target: "_blank",
} : undefined,
], ],
ev ev
); );

View File

@ -305,7 +305,10 @@ onUnmounted(() => {
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
@media (max-width: 500px) { @media (max-width: 500px) {
padding-inline: 12p; padding-inline: 16px;
&.tabs > .buttons > :deep(.follow-button > span) {
display: none;
}
} }
@media (max-width: 700px) { @media (max-width: 700px) {
> .left { > .left {
@ -432,8 +435,6 @@ onUnmounted(() => {
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
flex-shrink: 0; flex-shrink: 0;
margin-right: 1rem;
> .avatar { > .avatar {
$size: 32px; $size: 32px;
display: inline-block; display: inline-block;

View File

@ -104,17 +104,6 @@ import { getAccountFromId } from "@/scripts/get-account-from-id";
}); });
//#endregion //#endregion
// If mobile, insert the viewport meta tag
if (["smartphone", "tablet"].includes(deviceKind)) {
const viewport = document.getElementsByName("viewport").item(0);
viewport.setAttribute(
"content",
`${viewport.getAttribute(
"content",
)}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`,
);
}
//#region Set lang attr //#region Set lang attr
const html = document.documentElement; const html = document.documentElement;
html.setAttribute("lang", lang); html.setAttribute("lang", lang);
@ -311,12 +300,11 @@ import { getAccountFromId } from "@/scripts/get-account-from-id";
if (ColdDeviceStorage.get("syncDeviceDarkMode")) { if (ColdDeviceStorage.get("syncDeviceDarkMode")) {
defaultStore.set("darkMode", isDeviceDarkmode()); defaultStore.set("darkMode", isDeviceDarkmode());
} }
window.matchMedia("(prefers-color-scheme: dark)").onchange = (mql) => {
window.matchMedia("(prefers-color-scheme: dark)").addListener((mql) => {
if (ColdDeviceStorage.get("syncDeviceDarkMode")) { if (ColdDeviceStorage.get("syncDeviceDarkMode")) {
defaultStore.set("darkMode", mql.matches); defaultStore.set("darkMode", mql.matches);
} }
}); };
//#endregion //#endregion
fetchInstanceMetaPromise.then(() => { fetchInstanceMetaPromise.then(() => {

View File

@ -162,12 +162,12 @@ definePageMetadata(
computed(() => computed(() =>
note note
? { ? {
title: i18n.t("noteOf", { user: note.user.name }), title: i18n.t("noteOf", { user: note.user.name || note.user.username }),
subtitle: new Date(note.createdAt).toLocaleString(), subtitle: new Date(note.createdAt).toLocaleString(),
avatar: note.user, avatar: note.user,
path: `/notes/${note.id}`, path: `/notes/${note.id}`,
share: { share: {
title: i18n.t("noteOf", { user: note.user.name }), title: i18n.t("noteOf", { user: note.user.name || note.user.username }),
text: note.text, text: note.text,
}, },
} }

View File

@ -15,10 +15,7 @@
:style="{ background: pageMetadata?.value?.bg }" :style="{ background: pageMetadata?.value?.bg }"
@contextmenu.stop="onContextmenu" @contextmenu.stop="onContextmenu"
> >
<div :class="$style.content"> <RouterView />
<RouterView />
</div>
<div :class="$style.spacer"></div>
</main> </main>
</MkStickyContainer> </MkStickyContainer>
@ -173,6 +170,7 @@ import type { PageMetadata } from "@/scripts/page-metadata";
import { instanceName, ui } from "@/config"; import { instanceName, ui } from "@/config";
import { StickySidebar } from "@/scripts/sticky-sidebar"; import { StickySidebar } from "@/scripts/sticky-sidebar";
import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue"; import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
import XSidebar from "@/ui/_common_/navbar.vue";
import * as os from "@/os"; import * as os from "@/os";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { navbarItemDef } from "@/navbar"; import { navbarItemDef } from "@/navbar";
@ -186,7 +184,6 @@ import {
import { deviceKind } from "@/scripts/device-kind"; import { deviceKind } from "@/scripts/device-kind";
const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue")); const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue"));
const XSidebar = defineAsyncComponent(() => import("@/ui/_common_/navbar.vue"));
const XStatusBars = defineAsyncComponent( const XStatusBars = defineAsyncComponent(
() => import("@/ui/_common_/statusbars.vue") () => import("@/ui/_common_/statusbars.vue")
); );
@ -462,6 +459,11 @@ console.log(mainRouter.currentRoute.value.name);
&.isMobile { &.isMobile {
--stickyBottom: 6rem; --stickyBottom: 6rem;
} }
&:not(.isMobile) {
> .contents {
border-right: .5px solid var(--divider);
}
}
&.wallpaper { &.wallpaper {
background: var(--wallpaperOverlay); background: var(--wallpaperOverlay);
} }
@ -470,6 +472,10 @@ console.log(mainRouter.currentRoute.value.name);
justify-content: center; justify-content: center;
&:not(.isMobile) { &:not(.isMobile) {
--navBg: transparent; --navBg: transparent;
> .contents {
border-inline: .5px solid var(--divider);
margin-inline: -1px;
}
} }
> :deep(.sidebar:not(.iconOnly)) { > :deep(.sidebar:not(.iconOnly)) {
@ -545,18 +551,19 @@ console.log(mainRouter.currentRoute.value.name);
} }
} }
> .sidebar {
border-right: solid 0.5px var(--divider);
}
> .contents { > .contents {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
$widgets-hide-threshold: 1090px;
@media (max-width: $widgets-hide-threshold) {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
}
} }
> .widgets { > .widgets {
padding: 0 var(--margin); padding: 0 var(--margin);
border-left: solid 0.5px var(--divider); width: 300px;
box-sizing: content-box;
@media (max-width: $widgets-hide-threshold) { @media (max-width: $widgets-hide-threshold) {
display: none; display: none;
@ -732,14 +739,4 @@ console.log(mainRouter.currentRoute.value.name);
top: 0; top: 0;
left: 0; left: 0;
} }
.spacer {
$widgets-hide-threshold: 1090px;
height: calc(env(safe-area-inset-bottom, 0px) + 96px);
@media (min-width: ($widgets-hide-threshold + 1px)) {
display: none;
}
}
</style> </style>