Update online plugin/theme views to match local content views
This commit is contained in:
Samuel Elliott
parent
8667f153c5
commit
7765d44787
|
|
@ -262,7 +262,7 @@ export class ReactComponents {
|
|||
}
|
||||
|
||||
if (!component && filter) {
|
||||
Logger.log('ReactComponents', ['Found elements matching the query selector but no components passed the filter']);
|
||||
Logger.log('ReactComponents', ['Found elements matching the query selector but no components passed the filter', name, important, filter]);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
.bd-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid rgba(114, 118, 126, .3);
|
||||
min-height: 150px;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
.bd-pluginsview,
|
||||
.bd-themesview {
|
||||
.bd-localPh {
|
||||
.bd-scroller {
|
||||
padding: 0 20px 0 0;
|
||||
}
|
||||
}
|
||||
flex-grow: 1;
|
||||
|
||||
.bd-onlinePh,
|
||||
.bd-localPh {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px 0;
|
||||
flex-grow: 1;
|
||||
|
||||
> .bd-scrollerWrap > .bd-scroller {
|
||||
padding: 0 20px 0 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.bd-spinnerContainer {
|
||||
display: flex;
|
||||
|
|
@ -19,8 +20,9 @@
|
|||
|
||||
.bd-onlinePhHeader {
|
||||
display: flex;
|
||||
padding: 0 20px 0 10px;
|
||||
padding: 0 20px 0 0;
|
||||
min-height: 80px;
|
||||
margin-top: 20px;
|
||||
|
||||
.bd-flexRow {
|
||||
min-height: 40px;
|
||||
|
|
@ -81,16 +83,10 @@
|
|||
}
|
||||
|
||||
.bd-onlinePhBody {
|
||||
margin-top: 10px;
|
||||
|
||||
.bd-spinnerContainer {
|
||||
min-height: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bd-scroller {
|
||||
padding: 0 20px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.bd-remoteCard {
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
padding: 10px 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid rgba(114, 118, 126, .3);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.bd-scrollerWrap {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
|
||||
.bd-scroller {
|
||||
@include scrollbar;
|
||||
|
|
|
|||
|
|
@ -17,18 +17,13 @@
|
|||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
> .bd-scrollerWrap {
|
||||
flex-grow: 1;
|
||||
|
||||
> .bd-scroller {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
> .bd-scrollerWrap > .bd-scroller {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.bd-settings & {
|
||||
.platform-darwin & { // sass-lint:disable-line class-name-format
|
||||
padding-top: 22px;
|
||||
}
|
||||
.platform-darwin .bd-settings &.bd-settingswrapNoscroller, // sass-lint:disable-line class-name-format
|
||||
.platform-darwin .bd-settings & > .bd-scrollerWrap > .bd-scroller { // sass-lint:disable-line class-name-format
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.bd-settingswrapHeader {
|
||||
|
|
|
|||
|
|
@ -34,9 +34,11 @@
|
|||
<div class="bd-spinner7" />
|
||||
</div>
|
||||
<div class="bd-searchHint">{{searchHint}}</div>
|
||||
<div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlinePlugins && onlinePlugins.docs)}">
|
||||
<input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop :value="onlinePlugins.filters.sterm" />
|
||||
</div>
|
||||
<form @submit.prevent="refreshOnline">
|
||||
<div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlinePlugins && onlinePlugins.docs)}">
|
||||
<input type="text" class="bd-textInput" placeholder="Search" v-model="onlinePlugins.filters.sterm" :disabled="loadingOnline" @input="search" @keyup.stop/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="bd-flex bd-flexRow" v-if="onlinePlugins && onlinePlugins.docs && onlinePlugins.docs.length">
|
||||
<div class="bd-searchSort bd-flex bd-flexGrow">
|
||||
|
|
@ -49,11 +51,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollerWrap class="bd-onlinePhBody" v-if="!loadingOnline && onlinePlugins" :scrollend="scrollend">
|
||||
<RemoteCard v-if="onlinePlugins && onlinePlugins.docs" v-for="plugin in onlinePlugins.docs" :key="onlinePlugins.id" :item="plugin" :tagClicked="searchByTag" />
|
||||
<div class="bd-spinnerContainer">
|
||||
<div v-if="loadingMore" class="bd-spinner7" />
|
||||
</div>
|
||||
<ScrollerWrap class="bd-onlinePhBody" @scrollend="scrollend">
|
||||
<template v-if="!loadingOnline && onlinePlugins">
|
||||
<RemoteCard v-if="onlinePlugins && onlinePlugins.docs" v-for="plugin in onlinePlugins.docs" :key="onlinePlugins.id" :item="plugin" @tagclicked="searchByTag" />
|
||||
<div class="bd-spinnerContainer">
|
||||
<div v-if="loadingMore" class="bd-spinner7" />
|
||||
</div>
|
||||
</template>
|
||||
</ScrollerWrap>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,7 +98,8 @@
|
|||
},
|
||||
loadingOnline: false,
|
||||
loadingMore: false,
|
||||
searchHint: ''
|
||||
searchHint: '',
|
||||
searchTimeout: null
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -107,8 +112,9 @@
|
|||
showLocal() {
|
||||
this.local = true;
|
||||
},
|
||||
showOnline() {
|
||||
async showOnline() {
|
||||
this.local = false;
|
||||
if (!this.onlinePlugins.pagination.total) await this.refreshOnline();
|
||||
},
|
||||
async refreshLocal() {
|
||||
await this.PluginManager.refreshPlugins();
|
||||
|
|
@ -156,11 +162,6 @@
|
|||
dont_clone
|
||||
});
|
||||
},
|
||||
searchInput(e) {
|
||||
if (this.loadingOnline || this.loadingMore) return;
|
||||
this.onlinePlugins.filters.sterm = e.target.value;
|
||||
this.refreshOnline();
|
||||
},
|
||||
async scrollend(e) {
|
||||
if (this.onlinePlugins.pagination.page >= this.onlinePlugins.pagination.pages) return;
|
||||
if (this.loadingOnline || this.loadingMore) return;
|
||||
|
|
@ -193,6 +194,10 @@
|
|||
}
|
||||
this.refreshOnline();
|
||||
},
|
||||
async search() {
|
||||
clearTimeout(this.searchTimeout);
|
||||
this.searchTimeout = setTimeout(this.refreshOnline, 1000);
|
||||
},
|
||||
async searchByTag(tag) {
|
||||
if (this.loadingOnline || this.loadingMore) return;
|
||||
this.onlinePlugins.filters.sterm = tag;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<div class="bd-flexRow bd-flex bd-flexGrow">
|
||||
<div class="bd-flexGrow bd-remoteCardTags">
|
||||
<div v-for="(tag, index) in item.tags" class="bd-remoteCardTag">
|
||||
<div @click="tagClicked(tag)">{{tag}}</div><span v-if="index + 1 < item.tags.length">, </span>
|
||||
<div @click="$emit('tagclicked', tag)">{{tag}}</div><span v-if="index + 1 < item.tags.length">, </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-buttonGroup">
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
import { shell } from 'electron';
|
||||
|
||||
export default {
|
||||
props: ['item', 'tagClicked'],
|
||||
props: ['item'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-settingswrap">
|
||||
<div v-if="noscroller" class="bd-flex bd-flexCol">
|
||||
<div class="bd-settingswrap" :class="{'bd-settingswrapNoscroller': noscroller}">
|
||||
<div v-if="noscroller" class="bd-flex bd-flexCol bd-flexGrow">
|
||||
<div class="bd-settingswrapHeader">
|
||||
<span class="bd-settingswrapHeaderText">{{ headertext }}</span>
|
||||
<slot name="header" />
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<ScrollerWrap v-else :scrollend="scrollend">
|
||||
<ScrollerWrap v-else @scrollend="$emit('scrollend', $event)">
|
||||
<div class="bd-settingswrapHeader">
|
||||
<span class="bd-settingswrapHeaderText">{{ headertext }}</span>
|
||||
<slot name="header" />
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
import { ScrollerWrap } from '../common';
|
||||
|
||||
export default {
|
||||
props: ['headertext', 'scrollend', 'noscroller'],
|
||||
props: ['headertext', 'noscroller'],
|
||||
components: {
|
||||
ScrollerWrap
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,9 +34,11 @@
|
|||
<div class="bd-spinner7" />
|
||||
</div>
|
||||
<div class="bd-searchHint">{{searchHint}}</div>
|
||||
<div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
|
||||
<input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop :value="onlineThemes.filters.sterm"/>
|
||||
</div>
|
||||
<form @submit.prevent="refreshOnline">
|
||||
<div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
|
||||
<input type="text" class="bd-textInput" placeholder="Search" v-model="onlineThemes.filters.sterm" :disabled="loadingOnline" @input="search" @keyup.stop/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
|
||||
<div class="bd-searchSort bd-flex bd-flexGrow">
|
||||
|
|
@ -48,11 +50,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollerWrap class="bd-onlinePhBody" v-if="!loadingOnline && onlineThemes" :scrollend="scrollend">
|
||||
<RemoteCard v-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme" :tagClicked="searchByTag"/>
|
||||
<div class="bd-spinnerContainer">
|
||||
<div v-if="loadingMore" class="bd-spinner7"/>
|
||||
</div>
|
||||
<ScrollerWrap class="bd-onlinePhBody" @scrollend="scrollend">
|
||||
<template v-if="!loadingOnline && onlineThemes">
|
||||
<RemoteCard v-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme" @tagclicked="searchByTag"/>
|
||||
<div class="bd-spinnerContainer">
|
||||
<div v-if="loadingMore" class="bd-spinner7"/>
|
||||
</div>
|
||||
</template>
|
||||
</ScrollerWrap>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -93,7 +97,8 @@
|
|||
},
|
||||
loadingOnline: false,
|
||||
loadingMore: false,
|
||||
searchHint: ''
|
||||
searchHint: '',
|
||||
searchTimeout: null
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -108,6 +113,7 @@
|
|||
},
|
||||
async showOnline() {
|
||||
this.local = false;
|
||||
if (!this.onlineThemes.pagination.total) await this.refreshOnline();
|
||||
},
|
||||
async refreshLocal() {
|
||||
await this.ThemeManager.refreshThemes();
|
||||
|
|
@ -154,11 +160,6 @@
|
|||
dont_clone
|
||||
});
|
||||
},
|
||||
searchInput(e) {
|
||||
if (this.loadingOnline || this.loadingMore) return;
|
||||
this.onlineThemes.filters.sterm = e.target.value;
|
||||
this.refreshOnline();
|
||||
},
|
||||
async scrollend(e) {
|
||||
if (this.onlineThemes.pagination.page >= this.onlineThemes.pagination.pages) return;
|
||||
if (this.loadingOnline || this.loadingMore) return;
|
||||
|
|
@ -191,6 +192,10 @@
|
|||
}
|
||||
this.refreshOnline();
|
||||
},
|
||||
async search() {
|
||||
clearTimeout(this.searchTimeout);
|
||||
this.searchTimeout = setTimeout(this.refreshOnline, 1000);
|
||||
},
|
||||
async searchByTag(tag) {
|
||||
if (this.loadingOnline || this.loadingMore) return;
|
||||
this.onlineThemes.filters.sterm = tag;
|
||||
|
|
|
|||
|
|
@ -18,12 +18,11 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: ['dark', 'scrollend'],
|
||||
props: ['dark'],
|
||||
methods: {
|
||||
onscroll(e) {
|
||||
if (!this.scrollend) return;
|
||||
const { offsetHeight, scrollTop, scrollHeight } = e.target;
|
||||
if (offsetHeight + scrollTop >= scrollHeight) this.scrollend(e);
|
||||
if (offsetHeight + scrollTop >= scrollHeight) this.$emit('scrollend', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue