renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: redesign top bar mask

Browse Source
This commit is contained in:
Hakadao
2023-11-08 23:29:35 +08:00
parent a5bab3f06c
commit 74fc7749ff
2 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Topbar/Topbar.vue
View File

@@ -4,10 +4,12 @@ import { onMounted, watch } from 'vue'
import type { UnReadDm, UnReadMessage, UserInfo } from './types'
import { updateInterval } from './notify'
import { getUserID } from '~/utils/main'
import { settings } from '~/logic'
interface Props {
showSearchBar?: boolean
showLogo?: boolean
mask?: boolean
}
const props = withDefaults(defineProps<Props>(), {
@@ -200,6 +202,26 @@ async function getTopbarNewMomentsCount() {
p="lg:x-20 md:x-16 x-14"
h="70px"
>
<!-- Top bar mask -->
<div
v-if="mask"
pos="absolute top-0 left-0" w-full h-70px backdrop="blur-10px" filter-blur-8px
pointer-events-none
style="mask-image: linear-gradient(to bottom, black 70%, transparent);"
/>
<Transition name="fade">
<div
v-if="mask"
pos="absolute top-0 left-0" w-full h-80px
pointer-events-none opacity-80
:style="{
background: `linear-gradient(to bottom, ${settings.wallpaper
|| settings.useSearchPageModeOnHomePage && settings.searchPageWallpaper && settings.individuallySetSearchPageWallpaper
? 'rgba(0,0,0,.6)' : 'var(--bew-bg)'}, transparent)`
}"
/>
</Transition>
<div w="2xl:380px xl:280px" shrink-0>
<div
z-1 relative w-fit

4
src/contentScripts/views/App.vue
View File

@@ -284,12 +284,14 @@ provide('activatedPage', activatedPage)
pos="top-0 left-0" z="99 hover:999" w-full
:style="{ position: isTopbarFixed ? 'fixed' : 'absolute' }"
:show-search-bar="!isSearchPage"
:mask="showTopbarMask"
/>
<Topbar
v-else-if="settings.isShowTopbar && isHomePage"
:show-search-bar="showTopbarMask && settings.useSearchPageModeOnHomePage || (!settings.useSearchPageModeOnHomePage && activatedPage !== AppPage.Search || activatedPage !== AppPage.Home && activatedPage !== AppPage.Search)"
:show-logo="showTopbarMask && settings.useSearchPageModeOnHomePage || (!settings.useSearchPageModeOnHomePage || activatedPage !== AppPage.Home)"
pos="fixed top-0 left-0" z-99 w-full
:mask="showTopbarMask"
pos="fixed top-0 left-0" z="99 hover:999" w-full
/>
</Transition>
</div>