Skip to content

Commit 6a70ace

Browse files
ProspectorProspector
authored
Updated ad placeholder graphics, update Modrinth App sidebar to mockup designs (#4584)
* Update ad placeholders to new green graphic * Remove rounded corners from app ad frame * Improve web ad placeholder styling * Revamp app sidebar to match mockups more closely, greatly improve friends UX, fix up context menus and typify shit * only show overflow on hover * lint * intl:extract * clean up the inline code in FriendsSection
1 parent e58456e commit 6a70ace

File tree

19 files changed

+743
-338
lines changed

19 files changed

+743
-338
lines changed

‎apps/app-frontend/src/App.vue‎

Lines changed: 41 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
ChangeSkinIcon,
55
CompassIcon,
66
DownloadIcon,
7+
ExternalIcon,
78
HomeIcon,
89
LeftArrowIcon,
910
LibraryIcon,
@@ -18,6 +19,7 @@ import {
1819
RestoreIcon,
1920
RightArrowIcon,
2021
SettingsIcon,
22+
UserIcon,
2123
WorldIcon,
2224
XIcon,
2325
} from '@modrinth/assets'
@@ -69,7 +71,7 @@ import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/he
6971
import { get_user } from '@/helpers/cache.js'
7072
import { command_listener, warning_listener } from '@/helpers/events.js'
7173
import { useFetch } from '@/helpers/fetch.js'
72-
import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.js'
74+
import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
7375
import { list } from '@/helpers/profile.js'
7476
import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
7577
import { get_opening_command, initialize_state } from '@/helpers/state'
@@ -817,29 +819,39 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
817819
>
818820
<SettingsIcon />
819821
</NavButton>
820-
<ButtonStyled v-if="credentials" type="transparent" circular>
821-
<OverflowMenu
822-
:options="[
823-
{
824-
id: 'sign-out',
825-
action: () => logOut(),
826-
color: 'danger',
827-
},
828-
]"
829-
direction="left"
830-
>
831-
<Avatar
832-
:src="credentials.user.avatar_url"
833-
:alt="credentials.user.username"
834-
size="32px"
835-
circle
836-
/>
837-
<template #sign-out> <LogOutIcon /> Sign out </template>
838-
</OverflowMenu>
839-
</ButtonStyled>
840-
<NavButton v-else v-tooltip.right="'Sign in'" :to="() => signIn()">
841-
<LogInIcon />
842-
<template #label>Sign in</template>
822+
<OverflowMenu
823+
v-if="credentials"
824+
v-tooltip.right="`Modrinth account`"
825+
class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast border-0 cursor-pointer"
826+
:options="[
827+
{
828+
id: 'view-profile',
829+
action: () => openUrl('https://modrinth.com/user/' + credentials.user.username),
830+
},
831+
{
832+
id: 'sign-out',
833+
action: () => logOut(),
834+
color: 'danger',
835+
},
836+
]"
837+
placement="right-end"
838+
>
839+
<Avatar :src="credentials.user.avatar_url" alt="" size="32px" circle />
840+
<template #view-profile>
841+
<UserIcon />
842+
<span class="inline-flex items-center gap-1">
843+
Signed in as
844+
<span class="inline-flex items-center gap-1 text-contrast font-semibold">
845+
<Avatar :src="credentials.user.avatar_url" alt="" size="20px" circle />
846+
{{ credentials.user.username }}
847+
</span>
848+
</span>
849+
<ExternalIcon />
850+
</template>
851+
<template #sign-out> <LogOutIcon /> Sign out </template>
852+
</OverflowMenu>
853+
<NavButton v-else v-tooltip.right="'Sign in to a Modrinth account'" :to="() => signIn()">
854+
<LogInIcon class="text-brand" />
843855
</NavButton>
844856
</div>
845857
<div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
@@ -979,19 +991,19 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
979991
<div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
980992
<div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
981993
<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
982-
<h3 class="text-lg m-0">Playing as</h3>
994+
<h3 class="text-base text-primary font-medium m-0">Playing as</h3>
983995
<suspense>
984996
<AccountsCard ref="accounts" mode="small" />
985997
</suspense>
986998
</div>
987-
<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
999+
<div class="py-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
9881000
<suspense>
9891001
<FriendsList :credentials="credentials" :sign-in="() => signIn()" />
9901002
</suspense>
9911003
</div>
992-
<div v-if="news && news.length > 0" class="pt-4 flex flex-col items-center">
993-
<h3 class="px-4 text-lg m-0 text-left w-full">News</h3>
994-
<div class="px-4 pt-2 space-y-4 flex flex-col items-center w-full">
1004+
<div v-if="news && news.length > 0" class="p-4 flex flex-col items-center">
1005+
<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">News</h3>
1006+
<div class="space-y-4 flex flex-col items-center w-full">
9951007
<NewsArticleCard
9961008
v-for="(item, index) in news"
9971009
:key="`news-${index}`"

‎apps/app-frontend/src/components/ui/ContextMenu.vue‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
</template>
2525

2626
<script setup>
27-
import { onBeforeUnmount, onMounted, ref } from 'vue'
27+
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
2828
2929
const emit = defineEmits(['menu-closed', 'option-clicked'])
3030
@@ -40,22 +40,27 @@ defineExpose({
4040
item.value = passedItem
4141
options.value = passedOptions
4242
43-
const menuWidth = contextMenu.value.clientWidth
44-
const menuHeight = contextMenu.value.clientHeight
43+
// show to get dimensions
44+
shown.value = true
4545
46-
if (menuWidth + event.pageX >= window.innerWidth) {
47-
left.value = event.pageX - menuWidth + 2 + 'px'
48-
} else {
49-
left.value = event.pageX - 2 + 'px'
50-
}
46+
// then, adjust position if overflowing
47+
nextTick(() => {
48+
const menuWidth = contextMenu.value?.clientWidth || 200
49+
const menuHeight = contextMenu.value?.clientHeight || 100
50+
const minFromEdge = 10
5151
52-
if (menuHeight + event.pageY >= window.innerHeight) {
53-
top.value = event.pageY - menuHeight + 2 + 'px'
54-
} else {
55-
top.value = event.pageY - 2 + 'px'
56-
}
52+
if (event.pageX + menuWidth + minFromEdge >= window.innerWidth) {
53+
left.value = Math.max(minFromEdge, event.pageX - menuWidth - minFromEdge) + 'px'
54+
} else {
55+
left.value = event.pageX + minFromEdge + 'px'
56+
}
5757
58-
shown.value = true
58+
if (event.pageY + menuHeight + minFromEdge >= window.innerHeight) {
59+
top.value = Math.max(minFromEdge, event.pageY - menuHeight - minFromEdge) + 'px'
60+
} else {
61+
top.value = event.pageY + minFromEdge + 'px'
62+
}
63+
})
5964
},
6065
})
6166

‎apps/app-frontend/src/components/ui/PromotionWrapper.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@ function updateAdPosition() {
3939
class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
4040
>
4141
<img
42-
src="https://cdn-raw.modrinth.com/medal-modrinth-servers-light.webp"
42+
src="https://cdn-raw.modrinth.com/medal-modrinth-servers-light-new.webp"
4343
alt="Host your next server with Modrinth Servers"
4444
class="hidden light-image rounded-[inherit]"
4545
/>
4646
<img
47-
src="https://cdn-raw.modrinth.com/medal-modrinth-servers-dark.webp"
47+
src="https://cdn-raw.modrinth.com/medal-modrinth-servers-dark-new.webp"
4848
alt="Host your next server with Modrinth Servers"
4949
class="dark-image rounded-[inherit]"
5050
/>

0 commit comments

Comments
 (0)