Temp online plugins, local content body scroller

This commit is contained in:
Jiiks 2018-11-28 09:22:29 +02:00
parent a8f686eb61
commit 12b291cf0b
3 changed files with 57 additions and 14 deletions

View File

@ -1,6 +1,13 @@
.bd-pluginsview,
.bd-themesview {
.bd-onlinePh {
.bd-localPh {
.bd-scroller {
padding: 0 20px 0 0;
}
}
.bd-onlinePh,
.bd-localPh {
display: flex;
flex-direction: column;
margin: 10px 0;
@ -25,7 +32,6 @@
.bd-scroller {
padding: 0 20px 0 0;
}
}
h3 {

View File

@ -9,7 +9,7 @@
*/
<template>
<SettingsWrapper headertext="Plugins">
<SettingsWrapper headertext="Plugins" :noscroller="true">
<div class="bd-tabbar" slot="header">
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Installed</h3>
@ -22,12 +22,26 @@
</div>
<div class="bd-flex bd-flexCol bd-pluginsview">
<div v-if="local" class="bd-flex bd-flexGrow bd-flexCol bd-pluginsContainer bd-localPlugins">
<PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :data-plugin-id="plugin.id" @toggle-plugin="togglePlugin(plugin)" @reload-plugin="reloadPlugin(plugin)" @delete-plugin="unload => deletePlugin(plugin, unload)" @show-settings="dont_clone => showSettings(plugin, dont_clone)" />
<div v-if="local" class="bd-flex bd-flexGrow bd-flexCol bd-pluginsContainer bd-localPlugins bd-localPh">
<ScrollerWrap>
<PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :data-plugin-id="plugin.id" @toggle-plugin="togglePlugin(plugin)" @reload-plugin="reloadPlugin(plugin)" @delete-plugin="unload => deletePlugin(plugin, unload)" @show-settings="dont_clone => showSettings(plugin, dont_clone)" />
</ScrollerWrap>
</div>
<div v-if="!local" class="bd-onlinePh">
<h3>Coming Soon</h3>
<a href="https://v2.betterdiscord.net/plugins" target="_new">Website Browser</a>
<div v-else class="bd-onlinePh">
<div class="bd-onlinePhHeader">
<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 />
</div>
<div v-if="loadingOnline" class="bd-spinnerContainer">
<div class="bd-spinner7" />
</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="plugin.id" :item="plugin" />
<div v-if="loadingMore" class="bd-spinnerContainer">
<div class="bd-spinner7" />
</div>
</ScrollerWrap>
</div>
</div>
</SettingsWrapper>
@ -38,7 +52,7 @@
import { PluginManager } from 'modules';
import { Modals } from 'ui';
import { ClientLogger as Logger } from 'common';
import { MiRefresh } from '../common';
import { MiRefresh, ScrollerWrap } from '../common';
import SettingsWrapper from './SettingsWrapper.vue';
import PluginCard from './PluginCard.vue';
import RefreshBtn from '../common/RefreshBtn.vue';
@ -48,12 +62,15 @@
return {
PluginManager,
local: true,
localPlugins: PluginManager.localPlugins
localPlugins: PluginManager.localPlugins,
onlinePlugins: null,
loadingOnline: false,
loadingMore: false
};
},
components: {
SettingsWrapper, PluginCard,
MiRefresh,
MiRefresh, ScrollerWrap,
RefreshBtn
},
methods: {
@ -96,6 +113,24 @@
return Modals.contentSettings(plugin, null, {
dont_clone
});
},
searchInput(e) {
if (this.loadingOnline || this.loadingMore) return;
this.refreshOnline();
},
async scrollend(e) {
// TODO
return;
if (this.loadingOnline || this.loadingMore) return;
this.loadingMore = true;
try {
const getPlugins = await BdWebApi.plugins.get();
this.onlinePlugins.docs = [...this.onlinePlugins.docs, ...getPlugins.docs];
} catch (err) {
Logger.err('PluginsView', err);
} finally {
this.loadingMore = false;
}
}
}
}

View File

@ -22,10 +22,12 @@
</div>
<div class="bd-flex bd-flexCol bd-themesview">
<div v-if="local" class="bd-flex bd-flexGrow bd-flexCol bd-themesContainer bd-localThemes">
<ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :data-theme-id="theme.id" @toggle-theme="toggleTheme(theme)" @reload-theme="reload => reloadTheme(theme, reload)" @show-settings="dont_clone => showSettings(theme, dont_clone)" @delete-theme="unload => deleteTheme(theme, unload)" />
<div v-if="local" class="bd-flex bd-flexGrow bd-flexCol bd-themesContainer bd-localPh">
<ScrollerWrap>
<ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :data-theme-id="theme.id" @toggle-theme="toggleTheme(theme)" @reload-theme="reload => reloadTheme(theme, reload)" @show-settings="dont_clone => showSettings(theme, dont_clone)" @delete-theme="unload => deleteTheme(theme, unload)" />
</ScrollerWrap>
</div>
<div v-if="!local" class="bd-onlinePh">
<div v-else class="bd-onlinePh">
<div class="bd-onlinePhHeader">
<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 />