mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-22 12:54:06 +02:00
Code Releases Activity

feat(frontend): タイトルバーを表示できるように

Browse Source
This commit is contained in:
syuilo
2025-04-29 09:43:15 +09:00
parent 2e91cd6d45
commit d6ae4c980b
11 changed files with 213 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/ui/_common_/common.vue
View File

@@ -413,7 +413,7 @@ if ($i) {
#devTicker {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 2147483647;
color: #ff0;

1
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View File

@@ -121,6 +121,7 @@ function more() {
display: inline-block;
width: 38px;
aspect-ratio: 1;
border-radius: 8px;
}
.bottom {

22
packages/frontend/src/ui/_common_/navbar.vue
View File

@@ -7,7 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
<div :class="$style.body">
<div :class="$style.top">
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon" style="viewTransitionName: navbar-serverIcon;"/>
</button>
@@ -183,12 +182,9 @@ function menuEdit() {
}
.body {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
position: relative;
width: var(--nav-icon-only-width);
height: 100dvh;
height: 100%;
box-sizing: border-box;
overflow: auto;
overflow-x: clip;
@@ -303,18 +299,6 @@ function menuEdit() {
backdrop-filter: var(--MI-blur, blur(8px));
}
.banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
}
.instance {
position: relative;
display: block;
@@ -335,6 +319,7 @@ function menuEdit() {
display: inline-block;
width: 38px;
aspect-ratio: 1;
border-radius: 8px;
}
.bottom {
@@ -559,6 +544,7 @@ function menuEdit() {
display: inline-block;
width: 30px;
aspect-ratio: 1;
border-radius: 8px;
}
.bottom {

87
packages/frontend/src/ui/_common_/titlebar.vue Normal file
View File

@@ -0,0 +1,87 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.root">
<div :class="$style.title">
<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
<span :class="$style.instanceTitle">{{ instance.name ?? host }}</span>
</div>
<div :class="$style.controls">
<span :class="$style.left">
<button v-if="canBack" class="_button" :class="$style.button" @click="goBack"><i class="ti ti-arrow-left"></i></button>
</span>
<span :class="$style.right">
</span>
</div>
</div>
</template>
<script lang="ts" setup>
import { host } from '@@/js/config.js';
import { ref } from 'vue';
import { instance } from '@/instance.js';
import { prefer } from '@/preferences.js';
const canBack = ref(true);
function goBack() {
window.history.back();
}
</script>
<style lang="scss" module>
.root {
--height: 36px;
background: var(--MI_THEME-navBg);
height: var(--height);
font-size: 90%;
}
.title {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: var(--height);
}
.controls {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
height: var(--height);
}
.instanceIcon {
display: inline-block;
width: 20px;
aspect-ratio: 1;
border-radius: 5px;
margin-right: 8px;
}
.instanceTitle {
display: inline-block;
}
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
.button {
display: inline-block;
height: var(--height);
aspect-ratio: 1;
}
</style>