Skip to content

Commit

Permalink
fix: ロールで名前が隠れないようにする
Browse files Browse the repository at this point in the history
  • Loading branch information
@nacika-ins
nacika-ins committed May 21, 2024
1 parent 119101c commit 93d55ad
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 61 deletions.
1 change: 1 addition & 0 deletions packages/backend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"type": "module",
"scripts": {
"dev": "npx nodemon --watch src --watch ../../built/_vite_ -e 'js,ts,json' --exec 'npm run build && npm run start'",
"dev:frontend-only": "npx nodemon --watch src --watch ../../built/_vite_ -e 'js,ts,json' --exec 'npm run build && npm run start'",
"livereload": "npx livereload ./ -e 'start-time'",
"build:start": "npm run build && npm run start",
"start": "node --experimental-json-modules --experimental-specifier-resolution=node ./built/boot/index.js",
Expand Down
204 changes: 143 additions & 61 deletions packages/frontend/src/components/MkNoteHeader.vue
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,179 @@
<template>
<header :class="$style.root">
<MkA v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
<div :class="$style.username"><MkAcct :user="note.user"/></div>
<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
<img v-for="role in note.user.badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl"/>
</div>
<div :class="$style.info">
<MkA :to="notePage(note)">
<MkTime :time="note.createdAt"/>
</MkA>
<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
</span>
<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-world-off"></i></span>
<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
</div>
</header>
<header :class="$style.root">
<MkA v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
<MkUserName :user="note.user" />
</MkA>
<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
<div :class="$style.username">
<MkAcct :user="note.user" />
</div>
<div
v-if="note.user.badgeRoles"
:class="[$style.badgeRoles, note.user.badgeRoles.length >= 3 ? $style.badgeRolesStack : null]"
>
<template v-if="note.user.badgeRoles.length < 3">
<template v-for="role in note.user.badgeRoles" :key="role.id">
<img v-if="role.iconUrl" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl" />
</template>
</template>
<template v-else>
<!-- 3つ以上で重ねて表示させる -->
<div :class="$style.badgeRolesStackInner">
<template v-for="role in note.user.badgeRoles" :key="role.id">
<img
v-if="role.iconUrl"
v-tooltip="role.name"
:class="[$style.badgeRole, $style.badgeRoleStack]"
:src="role.iconUrl"
/>
</template>
</div>
</template>
</div>
<div :class="$style.info">
<MkA :to="notePage(note)">
<MkTime :time="note.createdAt" />
</MkA>
<span
v-if="note.visibility !== 'public'"
style="margin-left: 0.5em"
:title="i18n.ts._visibility[note.visibility]"
>
<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
</span>
<span v-if="note.localOnly" style="margin-left: 0.5em" :title="i18n.ts._visibility['disableFederation']"
><i class="ti ti-world-off"></i
></span>
<span v-if="note.channel" style="margin-left: 0.5em" :title="note.channel.name"
><i class="ti ti-device-tv"></i
></span>
</div>
</header>
</template>

<script lang="ts" setup>
import { } from 'vue';
import {} from 'vue';
import * as misskey from 'misskey-js';
import { i18n } from '@/i18n';
import { notePage } from '@/filters/note';
import { userPage } from '@/filters/user';
defineProps<{
note: misskey.entities.Note;
pinned?: boolean;
note: misskey.entities.Note;
pinned?: boolean;
}>();
</script>

<style lang="scss" module>
.root {
display: flex;
align-items: baseline;
white-space: nowrap;
display: flex;
align-items: baseline;
white-space: nowrap;
align-items: center;
}
.name {
flex-shrink: 1;
display: block;
margin: 0 .5em 0 0;
padding: 0;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-decoration: none;
text-overflow: ellipsis;
&:hover {
text-decoration: underline;
}
flex-shrink: 1;
display: block;
margin: 0 0.5em 0 0;
padding: 0;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-decoration: none;
text-overflow: ellipsis;
&:hover {
text-decoration: underline;
}
}
.isBot {
flex-shrink: 0;
align-self: center;
margin: 0 .5em 0 0;
padding: 1px 6px;
font-size: 80%;
border: solid 0.5px var(--divider);
border-radius: 3px;
flex-shrink: 0;
align-self: center;
margin: 0 0.5em 0 0;
padding: 1px 6px;
font-size: 80%;
border: solid 0.5px var(--divider);
border-radius: 3px;
}
.username {
flex-shrink: 9999999;
margin: 0 .5em 0 0;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 9999999;
margin: 0 0.5em 0 0;
overflow: hidden;
text-overflow: ellipsis;
}
.info {
flex-shrink: 0;
margin-left: auto;
font-size: 0.9em;
flex-shrink: 0;
margin-left: auto;
font-size: 0.9em;
}
.badgeRoles {
margin: 0 .5em 0 0;
margin: 0 0.5em 0 0;
}
.badgeRolesStack {
position: relative;
margin: 0 0.5em 0 0;
width: auto;
@media (max-width: 600px) {
& {
max-width: 170px;
}
}
@media (max-width: 390px) {
& {
max-width: 100px;
}
}
}
.badgeRolesStackInner {
display: flex;
overflow-x: auto;
width: 100%;
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none;
scrollbar-width: none;
@media (max-width: 600px) {
&::after {
content: '';
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 60px;
height: 20px;
right: -1px;
position: absolute;
z-index: 9999999;
margin-left: auto;
top: -1px;
background: linear-gradient(to right, #fff0 0, #19241f96 40%, #19241f 70%);
}
}
}
.badgeRole {
height: 1.3em;
vertical-align: -20%;
height: 1.3em;
vertical-align: -20%;
& + .badgeRole {
margin-left: 0.2em;
}
}
& + .badgeRole {
margin-left: 0.2em;
}
.badgeRoleStack:last-child {
margin-right: 2em;
}
</style>

0 comments on commit 93d55ad

Please sign in to comment.