graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 01:53:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2020-11-29 11:25:43 +09:00
parent 4eab9b4354
commit 9bf5dc67f5
8 changed files with 365 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
locales/ja-JP.yml
View file

@ -650,6 +650,7 @@ pageLikedCount: "Pageにいいねされた数"
reversiCount: "リバーシの対局数" reversiCount: "リバーシの対局数"
contact: "連絡先" contact: "連絡先"
useSystemFont: "システムのデフォルトのフォントを使う" useSystemFont: "システムのデフォルトのフォントを使う"
clips: "クリップ"
_aboutMisskey: _aboutMisskey:
about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。" about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"

6
src/client/pages/user/index.vue
View file

@ -508,12 +508,17 @@ export default defineComponent({
} }
.ftskorzw.narrow { .ftskorzw.narrow {
max-width: 100vw;
box-sizing: border-box;
overflow: hidden;
> .punished { > .punished {
font-size: 0.8em; font-size: 0.8em;
padding: 16px; padding: 16px;
} }
> .profile { > .profile {
> .main { > .main {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -678,6 +683,7 @@ export default defineComponent({
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0;
} }
} }

1
src/client/pages/welcome.entrance.block.vue
View file

@ -136,6 +136,7 @@ export default defineComponent({
> div { > div {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
background: var(--bg);
} }
} }
</style> </style>

11
src/client/scripts/get-user-menu.ts
View file

@ -7,9 +7,10 @@ import getAcct from '../../misc/acct/render';
import * as os from '@/os'; import * as os from '@/os';
import { store, userActions } from '@/store'; import { store, userActions } from '@/store';
import { router } from '@/router'; import { router } from '@/router';
import { popout } from './popout';
export function getUserMenu(user) { export function getUserMenu(user) {
const meId = store.getters.isSignedIn ? store.state.i.id : null;
async function pushList() { async function pushList() {
const t = i18n.global.t('selectList'); // なぜか後で参照すると null になるので最初にメモリに確保しておく const t = i18n.global.t('selectList'); // なぜか後で参照すると null になるので最初にメモリに確保しておく
const lists = await os.api('users/lists/list'); const lists = await os.api('users/lists/list');
@ -130,7 +131,7 @@ export function getUserMenu(user) {
action: () => { action: () => {
os.post({ specified: user }); os.post({ specified: user });
} }
}, store.state.i.id != user.id ? { }, meId != user.id ? {
type: 'link', type: 'link',
icon: faComments, icon: faComments,
text: i18n.global.t('startMessaging'), text: i18n.global.t('startMessaging'),
@ -139,13 +140,13 @@ export function getUserMenu(user) {
icon: faListUl, icon: faListUl,
text: i18n.global.t('addToList'), text: i18n.global.t('addToList'),
action: pushList action: pushList
}, store.state.i.id != user.id ? { }, meId != user.id ? {
icon: faUsers, icon: faUsers,
text: i18n.global.t('inviteToGroup'), text: i18n.global.t('inviteToGroup'),
action: inviteGroup action: inviteGroup
} : undefined] as any; } : undefined] as any;
if (store.getters.isSignedIn && store.state.i.id != user.id) { if (store.getters.isSignedIn && meId != user.id) {
menu = menu.concat([null, { menu = menu.concat([null, {
icon: user.isMuted ? faEye : faEyeSlash, icon: user.isMuted ? faEye : faEyeSlash,
text: user.isMuted ? i18n.global.t('unmute') : i18n.global.t('mute'), text: user.isMuted ? i18n.global.t('unmute') : i18n.global.t('mute'),
@ -175,7 +176,7 @@ export function getUserMenu(user) {
} }
} }
if (store.getters.isSignedIn && store.state.i.id === user.id) { if (store.getters.isSignedIn && meId === user.id) {
menu = menu.concat([null, { menu = menu.concat([null, {
icon: faPencilAlt, icon: faPencilAlt,
text: i18n.global.t('editProfile'), text: i18n.global.t('editProfile'),

1
src/client/themes/_dark.json5
View file

@ -76,5 +76,6 @@
X13: 'rgba(255, 255, 255, 0.15)', X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg', X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel', X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
}, },
} }

1
src/client/themes/_light.json5
View file

@ -76,5 +76,6 @@
X13: 'rgba(0, 0, 0, 0.15)', X13: 'rgba(0, 0, 0, 0.15)',
X14: ':alpha<0.5<@navBg', X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel', X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
}, },
} }

252
src/client/ui/visitor/b.vue
View file

@ -4,7 +4,7 @@
<div :style="{ backgroundImage: `url(${ $store.state.instance.meta.backgroundImageUrl })` }"> <div :style="{ backgroundImage: `url(${ $store.state.instance.meta.backgroundImageUrl })` }">
<div class="fade"></div> <div class="fade"></div>
<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1> <h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
<div class="about _panel" v-if="meta"> <div class="about" v-if="meta">
<div class="desc" v-html="meta.description || $t('introMisskey')"></div> <div class="desc" v-html="meta.description || $t('introMisskey')"></div>
</div> </div>
<div class="action"> <div class="action">
@ -28,14 +28,35 @@
<div class="main"> <div class="main">
<div v-if="narrow" class="banner" :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }"> <div v-if="narrow" class="banner" :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1> <h1 v-if="meta">
<MkA to="/" class="link"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></MkA>
</h1>
<template v-if="$route.path === '/'">
<div class="about" v-if="meta">
<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
</div>
<div class="action">
<button class="_buttonPrimary" @click="signup()">{{ $t('signup') }}</button>
<button class="_button" @click="signin()">{{ $t('login') }}</button>
</div>
<div class="announcements panel">
<header>{{ $t('announcements') }}</header>
<MkPagination :pagination="announcements" #default="{items}" class="list">
<section class="item" v-for="(announcement, i) in items" :key="announcement.id">
<div class="title">{{ announcement.title }}</div>
<div class="content">
<Mfm :text="announcement.text"/>
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
</div>
</section>
</MkPagination>
</div>
</template>
</div> </div>
<div class="contents" ref="contents" :class="{ wallpaper }"> <div class="contents" :class="{ wallpaper }">
<header class="header" ref="header" v-show="$route.path !== '/'"> <XHeader class="header" :info="pageInfo"/>
<XHeader :info="pageInfo"/> <main>
</header>
<main ref="main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition"> <transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
<component :is="Component" :ref="changePage"/> <component :is="Component" :ref="changePage"/>
@ -48,6 +69,27 @@
</div> </div>
</div> </div>
</div> </div>
<transition name="tray-back">
<div class="menu-back _modalBg"
v-if="showMenu"
@click="showMenu = false"
@touchstart.passive="showMenu = false"
></div>
</transition>
<transition name="tray">
<div v-if="showMenu" class="menu">
<MkA to="/" class="link" active-class="active"><Fa :icon="faHome" class="icon"/>{{ $t('home') }}</MkA>
<MkA to="/explore" class="link" active-class="active"><Fa :icon="faHashtag" class="icon"/>{{ $t('explore') }}</MkA>
<MkA to="/featured" class="link" active-class="active"><Fa :icon="faFireAlt" class="icon"/>{{ $t('featured') }}</MkA>
<MkA to="/channels" class="link" active-class="active"><Fa :icon="faSatelliteDish" class="icon"/>{{ $t('channel') }}</MkA>
<div class="action">
<button class="_buttonPrimary" @click="signup()">{{ $t('signup') }}</button>
<button class="_button" @click="signin()">{{ $t('login') }}</button>
</div>
</div>
</transition>
</div> </div>
</template> </template>
@ -61,7 +103,7 @@ import MkPagination from '@/components/ui/pagination.vue';
import XSigninDialog from '@/components/signin-dialog.vue'; import XSigninDialog from '@/components/signin-dialog.vue';
import XSignupDialog from '@/components/signup-dialog.vue'; import XSignupDialog from '@/components/signup-dialog.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import XHeader from '../_common_/header.vue'; import XHeader from './header.vue';
const DESKTOP_THRESHOLD = 1100; const DESKTOP_THRESHOLD = 1100;
@ -79,6 +121,7 @@ export default defineComponent({
pageKey: 0, pageKey: 0,
pageInfo: null, pageInfo: null,
meta: null, meta: null,
showMenu: false,
narrow: window.innerWidth < 1280, narrow: window.innerWidth < 1280,
announcements: { announcements: {
endpoint: 'announcements', endpoint: 'announcements',
@ -159,6 +202,28 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tray-enter-active,
.tray-leave-active {
opacity: 1;
transform: translateX(0);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.tray-enter-from,
.tray-leave-active {
opacity: 0;
transform: translateX(-240px);
}
.tray-back-enter-active,
.tray-back-leave-active {
opacity: 1;
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.tray-back-enter-from,
.tray-back-leave-active {
opacity: 0;
}
.mk-app { .mk-app {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
@ -217,6 +282,8 @@ export default defineComponent({
padding: 24px; padding: 24px;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
text-shadow: 0 0 8px black;
color: #fff;
} }
> .action { > .action {
@ -272,30 +339,9 @@ export default defineComponent({
> .main { > .main {
flex: 1; flex: 1;
> header {
position: relative;
z-index: 1;
background: var(--panel);
padding: 0 32px;
text-align: left;
overflow: auto;
white-space: nowrap;
> .link {
display: inline-block;
line-height: 60px;
padding: 0 0.7em;
&.MkA-active {
box-shadow: 0 -2px 0 0 var(--accent) inset;
}
}
}
> .banner { > .banner {
position: relative; position: relative;
width: 100%; width: 100%;
height: 200px;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -311,15 +357,90 @@ export default defineComponent({
} }
> h1 { > h1 {
position: relative;
z-index: 2;
margin: 0; margin: 0;
padding: 32px; padding: 32px;
text-align: center; text-align: center;
color: #fff; color: #fff;
text-shadow: 0 0 8px #000; text-shadow: 0 0 8px #000;
> .logo { > .link {
vertical-align: bottom; display: block;
max-height: 150px;
> ::v-deep(.logo) {
vertical-align: bottom;
max-height: 100px;
}
}
}
> .panel {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.5);
border-radius: var(--radius);
&, * {
color: #fff !important;
}
}
> .about {
display: block;
margin: 0 0 16px 0;
padding: 0 16px 24px 16px;
text-align: center;
box-sizing: border-box;
text-shadow: 0 0 8px black;
color: #fff;
}
> .action {
padding: 0 64px;
> button {
display: block;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
border-radius: 999px;
&._button {
background: var(--panel);
}
&:first-child {
margin-bottom: 16px;
}
}
}
> .announcements {
margin: 64px 64px 16px 64px;
text-align: left;
> header {
padding: 12px 16px;
border-bottom: solid 1px rgba(255, 255, 255, 0.5);
}
> .list {
max-height: 300px;
overflow: auto;
> .item {
padding: 12px 16px;
& + .item {
border-top: solid 1px rgba(255, 255, 255, 0.5);
}
> .title {
font-weight: bold;
}
}
} }
} }
} }
@ -328,21 +449,6 @@ export default defineComponent({
position: relative; position: relative;
z-index: 1; z-index: 1;
> .header {
position: sticky;
top: 0;
left: 0;
z-index: 1000;
height: 60px;
width: 100%;
line-height: 60px;
text-align: center;
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
background-color: var(--header);
border-bottom: 1px solid var(--divider);
}
> .powered-by { > .powered-by {
padding: 28px; padding: 28px;
font-size: 14px; font-size: 14px;
@ -357,8 +463,54 @@ export default defineComponent({
} }
} }
} }
> .menu-back {
position: fixed;
z-index: 1001;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
> .menu {
position: fixed;
z-index: 1001;
top: 0;
left: 0;
width: 240px;
height: 100vh;
background: var(--panel);
> .link {
display: block;
padding: 16px;
> .icon {
margin-right: 1em;
}
}
> .action {
padding: 16px;
> button {
display: block;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
border-radius: 999px;
&._button {
background: var(--panel);
}
&:first-child {
margin-bottom: 16px;
}
}
}
}
} }
</style> </style>
<style lang="scss">
</style>

235
src/client/ui/visitor/header.vue
View file

@ -1,31 +1,47 @@
<template> <template>
<div class="sqxihjet"> <div class="sqxihjet">
<div class="content"> <div class="wide" v-if="narrow === false">
<MkA to="/" class="link" active-class="active">{{ $t('home') }}</MkA> <div class="content">
<MkA to="/explore" class="link" active-class="active">{{ $t('explore') }}</MkA> <MkA to="/" class="link" active-class="active"><Fa :icon="faHome" class="icon"/>{{ $t('home') }}</MkA>
<MkA to="/featured" class="link" active-class="active">{{ $t('featured') }}</MkA> <MkA to="/explore" class="link" active-class="active"><Fa :icon="faHashtag" class="icon"/>{{ $t('explore') }}</MkA>
<MkA to="/channels" class="link" active-class="active">{{ $t('channel') }}</MkA> <MkA to="/featured" class="link" active-class="active"><Fa :icon="faFireAlt" class="icon"/>{{ $t('featured') }}</MkA>
<div class="page link" v-if="info"> <MkA to="/channels" class="link" active-class="active"><Fa :icon="faSatelliteDish" class="icon"/>{{ $t('channel') }}</MkA>
<div class="title"> <div class="page active link" v-if="info">
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/> <div class="title">
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/> <Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
<span v-if="info.title" class="text">{{ info.title }}</span> <MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/> <span v-if="info.title" class="text">{{ info.title }}</span>
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
</div>
<button class="_button action" v-if="info.action" @click.stop="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
</div>
<div class="right">
<button class="_button search" @click="search()"><Fa :icon="faSearch" class="icon"/><span>{{ $t('search') }}</span></button>
<button class="_buttonPrimary signup" @click="signup()">{{ $t('signup') }}</button>
<button class="_button login" @click="signin()">{{ $t('login') }}</button>
</div> </div>
<button class="_button action" v-if="info.action" @click.stop="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
</div> </div>
<div class="right"> </div>
<button class="_button search" @click="search()"><Fa :icon="faSearch" class="icon"/><span>{{ $t('search') }}</span></button> <div class="narrow" v-else-if="narrow === true">
<button class="_buttonPrimary signup" @click="signup()">{{ $t('signup') }}</button> <button class="menu _button" @click="$parent.showMenu = true">
<button class="_button login" @click="signin()">{{ $t('login') }}</button> <Fa :icon="faBars" class="icon"/>
</button>
<div class="title" v-if="info">
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
<span v-if="info.title" class="text">{{ info.title }}</span>
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
</div> </div>
<button class="action _button" v-if="info && info.action" @click.stop="info.action.handler">
<Fa :icon="info.action.icon" :key="info.action.icon" class="icon"/>
</button>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { faSearch } from '@fortawesome/free-solid-svg-icons'; import { faSearch, faHome, faFireAlt, faHashtag, faSatelliteDish, faBars } from '@fortawesome/free-solid-svg-icons';
import XSigninDialog from '@/components/signin-dialog.vue'; import XSigninDialog from '@/components/signin-dialog.vue';
import XSignupDialog from '@/components/signup-dialog.vue'; import XSignupDialog from '@/components/signup-dialog.vue';
import * as os from '@/os'; import * as os from '@/os';
@ -40,10 +56,16 @@ export default defineComponent({
data() { data() {
return { return {
faSearch narrow: null,
showMenu: false,
faSearch, faHome, faFireAlt, faHashtag, faSatelliteDish, faBars,
}; };
}, },
mounted() {
this.narrow = this.$el.clientWidth < 1300;
},
methods: { methods: {
signin() { signin() {
os.popup(XSigninDialog, { os.popup(XSigninDialog, {
@ -65,105 +87,142 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.sqxihjet { .sqxihjet {
$height: 60px; $height: 60px;
position: sticky;
top: 0;
left: 0;
z-index: 1000;
line-height: $height; line-height: $height;
background: var(--panel); -webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
background-color: var(--X16);
> .content { > .wide {
max-width: 1400px; > .content {
margin: 0 auto; max-width: 1400px;
display: flex; margin: 0 auto;
align-items: center; display: flex;
align-items: center;
> .link { > .link {
display: inline-block; $line: 3px;
padding: 0 16px;
line-height: $height - 4px;
border-top: solid 2px transparent;
border-bottom: solid 2px transparent;
&.page {
border-bottom-color: var(--accent);
}
}
> .page {
> .title {
display: inline-block; display: inline-block;
vertical-align: bottom; padding: 0 16px;
white-space: nowrap; line-height: $height - ($line * 2);
overflow: hidden; border-top: solid $line transparent;
text-overflow: ellipsis; border-bottom: solid $line transparent;
position: relative;
> .indicator { > .icon {
position: absolute; margin-right: 0.5em;
top: initial;
right: 8px;
top: 8px;
color: var(--indicator);
font-size: 12px;
animation: blink 1s infinite;
} }
> .icon + .text { &.page {
margin-left: 8px; border-bottom-color: var(--accent);
} }
}
> .avatar { > .page {
$size: 32px; > .title {
display: inline-block; display: inline-block;
width: $size; vertical-align: bottom;
height: $size; white-space: nowrap;
vertical-align: middle; overflow: hidden;
margin-right: 8px; text-overflow: ellipsis;
pointer-events: none; position: relative;
}
&._button { > .icon + .text {
&:hover { margin-left: 8px;
}
> .avatar {
$size: 32px;
display: inline-block;
width: $size;
height: $size;
vertical-align: middle;
margin-right: 8px;
pointer-events: none;
}
&._button {
&:hover {
color: var(--fgHighlighted);
}
}
&.selected {
box-shadow: 0 -2px 0 0 var(--accent) inset;
color: var(--fgHighlighted); color: var(--fgHighlighted);
} }
} }
&.selected { > .action {
box-shadow: 0 -2px 0 0 var(--accent) inset; padding: 0 0 0 16px;
color: var(--fgHighlighted);
} }
} }
> .action { > .right {
padding: 0 0 0 16px; margin-left: auto;
}
}
> .right { > .search {
margin-left: auto; background: var(--bg);
border-radius: 999px;
width: 230px;
line-height: $height - 20px;
margin-right: 16px;
text-align: left;
> .search { > * {
background: var(--bg); opacity: 0.7;
border-radius: 999px; }
width: 230px;
line-height: $height - 20px;
margin-right: 16px;
text-align: left;
> * { > .icon {
opacity: 0.7; padding: 0 16px;
}
} }
> .icon { > .signup {
border-radius: 999px;
padding: 0 24px;
line-height: $height - 20px;
}
> .login {
padding: 0 16px; padding: 0 16px;
} }
} }
}
}
> .signup { > .narrow {
border-radius: 999px; display: flex;
padding: 0 24px;
line-height: $height - 20px; > .menu,
> .action {
width: $height;
height: $height;
font-size: 20px;
}
> .title {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
text-align: center;
> .icon + .text {
margin-left: 8px;
} }
> .login { > .avatar {
padding: 0 16px; $size: 32px;
display: inline-block;
width: $size;
height: $size;
vertical-align: middle;
margin-right: 8px;
pointer-events: none;
} }
} }
} }