Update online plugin/theme views to match local content views

This commit is contained in:
Samuel Elliott 2019-03-14 11:40:44 +00:00
parent 8667f153c5
commit 7765d44787
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
11 changed files with 64 additions and 64 deletions

View File

@ -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;
}

View File

@ -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;

View File

@ -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 {

View File

@ -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);

View File

@ -1,6 +1,7 @@
.bd-scrollerWrap {
display: flex;
width: 100%;
flex-grow: 1;
.bd-scroller {
@include scrollbar;

View File

@ -17,19 +17,14 @@
flex-direction: column;
flex-grow: 1;
> .bd-scrollerWrap {
flex-grow: 1;
> .bd-scroller {
> .bd-scrollerWrap > .bd-scroller {
overflow-y: scroll;
}
}
.bd-settings & {
.platform-darwin & { // sass-lint:disable-line class-name-format
.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 {
outline: 0;

View File

@ -34,9 +34,11 @@
<div class="bd-spinner7" />
</div>
<div class="bd-searchHint">{{searchHint}}</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" @keydown.enter="searchInput" @keyup.stop :value="onlinePlugins.filters.sterm" />
<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" />
<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;

View File

@ -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 {}
},

View File

@ -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
}

View File

@ -34,9 +34,11 @@
<div class="bd-spinner7" />
</div>
<div class="bd-searchHint">{{searchHint}}</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" @keydown.enter="searchInput" @keyup.stop :value="onlineThemes.filters.sterm"/>
<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"/>
<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;

View File

@ -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);
}
}
}