Support side block

This commit is contained in:
the1812 2022-04-13 13:27:48 +08:00
parent 1a31a42a7a
commit 1719be93a7
5 changed files with 120 additions and 90 deletions

View File

@ -41,7 +41,7 @@
<div
v-for="[id, type] of Object.entries(allSideCards)"
:key="id"
class="filter-side-card-switch feeds-filter-swtich"
class="filter-side-card-switch feeds-filter-switch"
@click="toggleBlockSide(id)"
>
<label :class="{ disabled: sideDisabled(id) }">
@ -228,44 +228,12 @@ export default Vue.extend({
<style lang="scss">
@import "common";
@import "./side-block";
@import "./blocker";
body.enable-feeds-filter:not(.disable-feeds-filter) {
@each $name,
$value
in (
'repost': 1,
'textWithImages': 2,
'text': 4,
'video': 8,
'miniVideo': 16,
'column': 64,
'audio': 256,
'bangumi': 512,
'liveRecord': 2047,
'share': 2048
)
{
&:not(.by-type).feeds-filter-block-#{$name} {
.bili-dyn-list__item[data-type='#{$value}'],
.feed-card .card[data-type='#{$value}'] {
display: none !important;
}
}
}
@each $name in ('self-repost') {
&:not(.by-type).feeds-filter-block-#{$name} {
.bili-dyn-list__item[data-#{$name}],
.feed-card .card[data-#{$name}] {
display: none !important;
}
}
}
@include type-block();
@include side-block();
.bili-dyn-list__item.pattern-block,
.feed-card .card.pattern-block {
display: none !important;
}
@include pattern-block();
}
.feeds-filter {
background-color: white;

View File

@ -1,5 +1,5 @@
<template>
<div class="filter-type-switch feeds-filter-swtich">
<div class="filter-type-switch feeds-filter-switch">
<label :class="{ disabled }">
<span class="name" :class="{ disabled }">{{ type.name }}</span>
<input v-model="disabled" type="checkbox" />
@ -67,7 +67,7 @@ export default Vue.extend({
})
</script>
<style lang="scss">
.feeds-filter-swtich {
.feeds-filter-switch {
&:not(:last-child) {
margin-bottom: 4px;
}

View File

@ -0,0 +1,104 @@
@mixin type-block {
@each $name,
$value
in (
'repost': 1,
'textWithImages': 2,
'text': 4,
'video': 8,
'miniVideo': 16,
'column': 64,
'audio': 256,
'bangumi': 512,
'liveRecord': 2047,
'share': 2048
)
{
&:not(.by-type).feeds-filter-block-#{$name} {
.bili-dyn-list__item[data-type='#{$value}'],
.feed-card .card[data-type='#{$value}'] {
display: none !important;
}
}
}
@each $name in ('self-repost') {
&:not(.by-type).feeds-filter-block-#{$name} {
.bili-dyn-list__item[data-#{$name}],
.feed-card .card[data-#{$name}] {
display: none !important;
}
}
}
}
@mixin side-block {
$side-block: 'feeds-filter-side-block';
.left-panel,
.right-panel {
.scroll-content > * {
margin: 0 !important;
margin-bottom: 8px !important;
}
}
.left-panel {
> :not(:last-child) {
margin: 0 !important;
margin-bottom: 8px !important;
}
}
.left-panel .user-panel.f-left {
float: none !important;
}
.bili-dyn-home--member {
main section,
aside section {
margin-bottom: 0 !important;
> * {
margin-bottom: 8px !important;
}
}
}
&.#{$side-block}-profile {
.left-panel .user-wrapper,
.bili-dyn-my-info {
display: none !important;
}
}
&.#{$side-block}-following-tags {
.left-panel .tag-panel,
.right-panel .dyn-topic-panel,
.right-panel .new-topic-panel,
section .topic-panel {
display: none !important;
}
}
&.#{$side-block}-notice {
.right-panel .notice-panel,
.bili-dyn-banner {
display: none !important;
}
}
&.#{$side-block}-live {
.left-panel .live-panel,
.bili-dyn-live-users {
display: none !important;
}
}
&.#{$side-block}-trending-tags {
.right-panel .tag-panel,
.topic-panel {
display: none !important;
}
}
&.#{$side-block}-most-viewed {
.bili-dyn-up-list,
.card-list .most-viewed-panel {
display: none !important;
}
}
}
@mixin pattern-block {
.bili-dyn-list__item.pattern-block,
.feed-card .card.pattern-block {
display: none !important;
}
}

View File

@ -1,51 +0,0 @@
@mixin side-block {
$side-block: 'feeds-filter-side-block';
.left-panel,
.right-panel {
.scroll-content > * {
margin: 0 !important;
margin-bottom: 8px !important;
}
}
.left-panel {
> :not(:last-child) {
margin: 0 !important;
margin-bottom: 8px !important;
}
}
.left-panel .user-panel.f-left {
float: none !important;
}
&.#{$side-block}-profile {
.left-panel .user-wrapper {
display: none !important;
}
}
&.#{$side-block}-following-tags {
.left-panel .tag-panel,
.right-panel .dyn-topic-panel,
.right-panel .new-topic-panel {
display: none !important;
}
}
&.#{$side-block}-notice {
.right-panel .notice-panel {
display: none !important;
}
}
&.#{$side-block}-live {
.left-panel .live-panel {
display: none !important;
}
}
&.#{$side-block}-trending-tags {
.right-panel .tag-panel {
display: none !important;
}
}
&.#{$side-block}-most-viewed {
.card-list .most-viewed-panel {
display: none !important;
}
}
}

View File

@ -1,9 +1,18 @@
import { feedsCardsManager } from '@/components/feeds/api'
import { ComponentMetadata, ComponentOptions } from '@/components/types'
import { feedsFilterPlugin } from './plugin'
const entry = async () => {
const { select } = await import('@/core/spin-query')
const leftPanel = await select('.home-container .left-panel, .bili-dyn-home--member aside.left section:first-child')
let leftPanel: HTMLElement
if (feedsCardsManager.managerType === 'v2') {
const leftAside = await select('.bili-dyn-home--member aside.left')
const section = document.createElement('section')
leftAside.insertAdjacentElement('afterbegin', section)
leftPanel = section
} else {
leftPanel = await select('.home-container .left-panel')
}
if (leftPanel === null) {
return
}