supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix CSS styles, scroll to selected channel and improve bindings.

Browse Source 
Co-Authored-By: Pavel Djundik <xPaw@users.noreply.github.com>
This commit is contained in:
Richard Lewis 2020-01-22 18:42:31 +02:00
parent 606c62dc70
commit f5884957a5
3 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/components/App.vue
View File

@ -9,10 +9,6 @@
</div> </div>
</template> </template>
<style>
@import "../css/style.css";
</style>
<script> <script>
const constants = require("../js/constants"); const constants = require("../js/constants");
import Mousetrap from "mousetrap"; import Mousetrap from "mousetrap";

26
client/components/NetworkList.vue
View File

@ -2,7 +2,7 @@
<div v-if="networks.length === 0" class="empty"> <div v-if="networks.length === 0" class="empty">
You are not connected to any networks yet. You are not connected to any networks yet.
</div> </div>
<div v-else> <div v-else ref="networklist">
<div class="jump-to-input"> <div class="jump-to-input">
<input <input
ref="searchInput" ref="searchInput"
@ -23,11 +23,11 @@
/> />
</div> </div>
<div v-if="searchText" class="jump-to-results"> <div v-if="searchText" class="jump-to-results">
<div v-if="results.length" ref="results"> <div v-if="results.length">
<div <div
v-for="item in results" v-for="item in results"
:key="item.channel.id" :key="item.channel.id"
v-on="{mouseover: () => setActiveSearchItem(item.channel)}" @mouseenter="setActiveSearchItem(item.channel)"
@click.prevent="selectResult" @click.prevent="selectResult"
> >
<Channel <Channel
@ -127,7 +127,7 @@
margin: 0; margin: 0;
width: 100%; width: 100%;
border: 0; border: 0;
color: inherit; color: #fff;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
padding-right: 35px; padding-right: 35px;
} }
@ -299,21 +299,26 @@ export default {
}); });
}, },
toggleSearch(event) { toggleSearch(event) {
event.preventDefault(); // Do not handle this keybind in the chat input because
// it can be used to type letters with umlauts
if (event.target.tagName === "TEXTAREA") {
return true;
}
if (this.$refs.searchInput === document.activeElement) { if (this.$refs.searchInput === document.activeElement) {
this.closeSearch(); this.deactivateSearch();
return; return false;
} }
this.activateSearch(); this.activateSearch();
return false;
}, },
activateSearch() { activateSearch() {
if (this.$refs.searchInput === document.activeElement) { if (this.$refs.searchInput === document.activeElement) {
return; return;
} }
this.sidebarWasOpen = this.$store.state.sidebarOpen; this.sidebarWasClosed = this.$store.state.sidebarOpen ? false : true;
this.$store.commit("sidebarOpen", true); this.$store.commit("sidebarOpen", true);
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.searchInput.focus(); this.$refs.searchInput.focus();
@ -324,7 +329,7 @@ export default {
this.searchText = ""; this.searchText = "";
this.$refs.searchInput.blur(); this.$refs.searchInput.blur();
if (!this.sidebarWasOpen) { if (this.sidebarWasClosed) {
this.$store.commit("sidebarOpen", false); this.$store.commit("sidebarOpen", false);
} }
}, },
@ -349,6 +354,7 @@ export default {
this.$root.switchToChannel(this.activeSearchItem); this.$root.switchToChannel(this.activeSearchItem);
this.deactivateSearch(); this.deactivateSearch();
this.scrollToActive();
}, },
navigateResults(event, direction) { navigateResults(event, direction) {
// Prevent propagation to stop global keybind handler from capturing pagedown/pageup // Prevent propagation to stop global keybind handler from capturing pagedown/pageup
@ -395,7 +401,7 @@ export default {
scrollToActive() { scrollToActive() {
// Scroll the list if needed after the active class is applied // Scroll the list if needed after the active class is applied
this.$nextTick(() => { this.$nextTick(() => {
const el = this.$refs.results.querySelector(".active-result"); const el = this.$refs.networklist.querySelector(".channel-list-item.active");
if (el) { if (el) {
el.scrollIntoView({block: "nearest", inline: "nearest"}); el.scrollIntoView({block: "nearest", inline: "nearest"});

1
client/js/vue.js
View File

@ -2,6 +2,7 @@
const constants = require("./constants"); const constants = require("./constants");
import "../css/style.css";
import Vue from "vue"; import Vue from "vue";
import store from "./store"; import store from "./store";
import App from "../components/App.vue"; import App from "../components/App.vue";