oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

feat: チャンネルに色を設定できるように

Browse source
This commit is contained in:
syuilo 2023-05-02 09:36:40 +09:00
parent 0cbdbf24f1
commit d535ec21a2
11 changed files with 61 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

24
packages/frontend/src/components/MkNote.vue
View file

@ -12,6 +12,7 @@
<!--<div v-if="appearNote._prId_" class="tip"><i class="ti ti-speakerphone"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>-->
<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>-->
<div v-if="isRenote" :class="$style.renote">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
<MkAvatar :class="$style.renoteAvatar" :user="note.user" link preview/>
<i class="ti ti-repeat" style="margin-right: 4px;"></i>
<I18n :src="i18n.ts.renotedBy" tag="span" :class="$style.renoteText">
@ -40,6 +41,7 @@
<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
</div>
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
<div :class="$style.main">
<MkNoteHeader :class="$style.header" :note="appearNote" :mini="true"/>
@ -546,6 +548,7 @@ function showReactions(): void {
}
.renote {
position: relative;
display: flex;
align-items: center;
padding: 16px 32px 8px 32px;
@ -556,6 +559,10 @@ function showReactions(): void {
& + .article {
padding-top: 8px;
}
> .colorBar {
height: calc(100% - 6px);
}
}
.renoteAvatar {
@ -627,6 +634,16 @@ function showReactions(): void {
padding: 28px 32px;
}
.colorBar {
position: absolute;
top: 8px;
left: 8px;
width: 5px;
height: calc(100% - 16px);
border-radius: 999px;
pointer-events: none;
}
.avatar {
flex-shrink: 0;
display: block !important;
@ -842,6 +859,13 @@ function showReactions(): void {
}
}
}
.colorBar {
top: 6px;
left: 6px;
width: 4px;
height: calc(100% - 12px);
}
}
@container (max-width: 300px) {