Add side card filter

This commit is contained in:
the1812 2019-10-30 11:00:22 +08:00
parent bee15d2bfc
commit aa4d0dd596
10 changed files with 170 additions and 60 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -53,9 +53,9 @@
"expand-description.min.js": "A56857AD6B1C9F431B233D188E857D30DD5A2EB644986DE32A21280B1B7BC7A7",
"favorites-redirect.min.js": "70D6ECCE0402AA76387D2A3288C1148C60CC88D5378B7A2BDC813F3F78E4EE84",
"feeds-apis.min.js": "ED1FFDEBC22680C5089F9D30CF667535FB99881C96A969DB47BC70BF095A99E8",
"feeds-filter-card.vue.min.js": "5922DD76080D5DD57C860018749BD3D82530DDBD537DBFB5D540D10C03645775",
"feeds-filter-card.vue.min.js": "3A7F8F402EA46E43B718506329814953C9E358A8AF94088D4E5745D48296D80B",
"feeds-filter.min.js": "10557E498B8BADA3C1C03E8C1DCD6FB24DBA2DA27A5A03BD861054F7E2989D46",
"filter-type-switch.vue.min.js": "86F40D40C2464A56A2A0D32A0B94860DD376D1FE7850836B4CE37B767312BBE7",
"filter-type-switch.vue.min.js": "E06B00EF48F3CCFACC82B858A266CE0DF48F8332C5900B3AD579330D4C6D3125",
"fix-fullscreen.min.js": "C0628A7CABB4421FCBD7663700EF9965C96F6D79979B9F7523A9F9B0B009C8B6",
"fold-comment.min.css": "74DF4566EB80AD7078E65E8B68633E05FC41D3B4E47A20D6E415E8A743F35378",
"fold-comment.min.js": "B149A9A8EA03DCB39BC4FF59591BE9D8E7BA45B2049A545F9611251EBE85FEA9",

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
(()=>{return(e,t)=>{const i=`<div class=filter-type-switch><label :class={disabled}><span class=name :class={disabled}>{{type.name}}</span><input type=checkbox v-model=disabled><icon class=disabled type=mdi icon=cancel v-if=disabled></icon><icon type=mdi icon=check v-else></icon></label></div>`;t.applyStyleFromText(`.filter-type-switch label{cursor:pointer;margin:0;padding:4px 8px;border-radius:4px;background-color:#0001;display:flex;align-items:center;justify-content:space-between;border:1px solid transparent}.filter-type-switch label .name{font-size:12px}.filter-type-switch label .disabled{color:var(--theme-color)!important}.filter-type-switch label:hover{background-color:#0002}.filter-type-switch label.disabled{border-color:var(--theme-color)}.filter-type-switch label input{display:none}.filter-type-switch label .be-icon{font-size:16px}`,"filter-type-switch-style");return{export:Object.assign({template:i},{components:{Icon:()=>t.importAsync("icon.vue")},props:["name","type"],methods:{setFilter(t,i=true){document.body.classList[t?"add":"remove"](`feeds-filter-block-${this.name}`);if(!i){return}if(t){e.feedsFilterTypes.push(this.type.id)}else{const t=e.feedsFilterTypes.indexOf(this.type.id);if(t!==-1){e.feedsFilterTypes.splice(t,1)}}e.feedsFilterTypes=e.feedsFilterTypes}},data(){const t=e.feedsFilterTypes.includes(this.type.id);this.setFilter(t,false);return{disabled:t}},watch:{disabled(e){this.setFilter(e)}}})}}})();
(()=>{return(e,s)=>{const i=`<div class="filter-type-switch feeds-filter-swtich"><label :class={disabled}><span class=name :class={disabled}>{{type.name}}</span><input type=checkbox v-model=disabled><icon class=disabled type=mdi icon=cancel v-if=disabled></icon><icon type=mdi icon=check v-else></icon></label></div>`;return{export:Object.assign({template:i},{components:{Icon:()=>s.importAsync("icon.vue")},props:["name","type"],methods:{setFilter(s,i=true){document.body.classList[s?"add":"remove"](`feeds-filter-block-${this.name}`);if(!i){return}if(s){e.feedsFilterTypes.push(this.type.id)}else{const s=e.feedsFilterTypes.indexOf(this.type.id);if(s!==-1){e.feedsFilterTypes.splice(s,1)}}e.feedsFilterTypes=e.feedsFilterTypes}},data(){const s=e.feedsFilterTypes.includes(this.type.id);this.setFilter(s,false);return{disabled:s}},watch:{disabled(e){this.setFilter(e)}}})}}})();

View File

@ -21,11 +21,53 @@
/>
<icon title="添加" type="mdi" icon="plus" @click.native="addPattern(newPattern)"></icon>
</div>
<h2>侧边栏</h2>
<div class="filter-side-card">
<div
class="filter-side-card-switch feeds-filter-swtich"
v-for="[id, type] of Object.entries(allSideCards)"
:key="id"
@click="toggleBlockSide(id)"
>
<label :class="{disabled: sideDisabled(id)}">
<span class="name" :class="{disabled: sideDisabled(id)}">{{type.displayName}}</span>
<icon class="disabled" type="mdi" icon="cancel"></icon>
<icon type="mdi" icon="check"></icon>
</label>
</div>
</div>
</div>
</template>
<script lang="ts">
import { FeedsCard, FeedsCardType } from '../feeds-apis'
interface SideCardType {
className: string
displayName: string
}
const sideCards: { [id: number]: SideCardType } = {
0: {
className: 'profile',
displayName: '个人资料'
},
1: {
className: 'following-tags',
displayName: '关注的话题'
},
2: {
className: 'notice',
displayName: '公告栏'
},
3: {
className: 'live',
displayName: '正在直播'
},
4: {
className: 'trending-tags',
displayName: '热门话题'
}
}
const sideBlock = 'feeds-filter-side-block-'
export default {
components: {
FilterTypeSwitch: () => import('./filter-type-switch.vue'),
@ -43,8 +85,10 @@ export default {
return settings.feedsFilterPatterns.some(pattern => {
const upNameMatch = pattern.match(/(.+) up:([^ ]+)/)
if (upNameMatch) {
return testPattern(upNameMatch[1], card.text) &&
return (
testPattern(upNameMatch[1], card.text) &&
testPattern(upNameMatch[2], card.username)
)
}
return testPattern(pattern, card.text)
})
@ -66,6 +110,29 @@ export default {
this.patterns.push(pattern)
}
this.newPattern = ''
},
updateBlockSide() {
Object.entries(sideCards).forEach(([id, type]) => {
const name = sideBlock + type.className
document.body.classList[
this.blockSideCards.includes(id) ? 'add' : 'remove'
](name)
})
},
toggleBlockSide(id: number) {
const index = this.blockSideCards.indexOf(id)
const type = sideCards[id]
if (index !== -1) {
this.blockSideCards.splice(index, 1)
document.body.classList.remove(sideBlock + type.className)
} else {
this.blockSideCards.push(id)
document.body.classList.add(sideBlock + type.className)
}
settings.feedsFilterSideCards = this.blockSideCards
},
sideDisabled(id: number) {
return this.blockSideCards.includes(id)
}
},
watch: {
@ -83,10 +150,13 @@ export default {
allTypes: [] as [string, FeedsCardType][],
patterns: [...settings.feedsFilterPatterns],
newPattern: '',
feedsCardsManager: null
feedsCardsManager: null,
allSideCards: sideCards,
blockSideCards: [...settings.feedsFilterSideCards]
}
},
async mounted() {
this.updateBlockSide()
const tabBar = await SpinQuery.select('.feed-card .tab-bar')
if (!tabBar) {
console.error('tabBar not found')
@ -137,6 +207,37 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
display: none !important;
}
}
$side-block: 'feeds-filter-side-block';
.left-panel > *,
.right-panel > * {
margin: 0 !important;
margin-bottom: 8px !important;
}
&.#{$side-block}-profile {
.left-panel .user-wrapper {
display: none !important;
}
}
&.#{$side-block}-following-tags {
.left-panel .tag-panel {
display: none !important;
}
}
&.#{$side-block}-notice {
.right-panel .notice-panel {
display: none !important;
}
}
&.#{$side-block}-live {
.right-panel .live-panel {
display: none !important;
}
}
&.#{$side-block}-trending-tags {
.right-panel .tag-panel {
display: none !important;
}
}
.feed-card .card.pattern-block {
display: none !important;
}
@ -147,7 +248,6 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
padding: 12px 16px;
float: left;
border-radius: 4px;
margin-top: 8px;
box-sizing: border-box;
display: none;
flex-direction: column;
@ -175,17 +275,61 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
margin: 0;
margin-bottom: 8px;
}
.feeds-filter-swtich {
&:not(:last-child) {
margin-bottom: 4px;
}
label {
cursor: pointer;
margin: 0;
padding: 4px 8px;
border-radius: 4px;
background-color: #0001;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid transparent;
.name {
font-size: 12px;
}
.disabled {
color: var(--theme-color) !important;
}
&:hover {
background-color: #0002;
}
input {
display: none;
}
.be-icon {
font-size: 16px;
&.disabled {
display: none;
}
}
&.disabled {
border-color: var(--theme-color);
.be-icon {
display: none;
&.disabled {
display: block;
}
}
}
}
}
.filter-type-switch {
flex: 0 0 49%;
}
.filter-side-card-switch {
flex: 0 0 100%;
}
.filter-types {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 18px;
.filter-type-switch {
flex: 0 0 49%;
&:not(:last-child) {
margin-bottom: 4px;
}
}
}
.filter-patterns {
&:not(:empty) {
@ -211,6 +355,7 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
.add-pattern {
display: flex;
align-items: center;
margin-bottom: 18px;
input {
color: inherit;
background-color: transparent;

View File

@ -1,5 +1,5 @@
<template>
<div class="filter-type-switch">
<div class="filter-type-switch feeds-filter-swtich">
<label :class="{disabled}">
<span class="name" :class="{disabled}">{{type.name}}</span>
<input type="checkbox" v-model="disabled" />
@ -47,39 +47,4 @@ export default {
}
}
}
</script>
<style lang="scss">
.filter-type-switch {
label {
cursor: pointer;
margin: 0;
padding: 4px 8px;
border-radius: 4px;
background-color: #0001;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid transparent;
.name {
font-size: 12px;
}
.disabled {
color: var(--theme-color) !important;
}
&:hover {
background-color: #0002;
}
&.disabled {
border-color: var(--theme-color);
}
input {
display: none;
}
.be-icon {
font-size: 16px;
}
}
}
</style>
</script>