Add close search button

This commit is contained in:
Nachtalb 2021-04-30 01:49:49 +02:00
parent 115d970604
commit bb41871873
No known key found for this signature in database
GPG key ID: E48DF13C07055D92
3 changed files with 16 additions and 2 deletions

View file

@ -21,6 +21,12 @@
> >
<span class="topic">{{ $route.query.q }}</span> <span class="topic">{{ $route.query.q }}</span>
<MessageSearchForm :network="network" :channel="channel" /> <MessageSearchForm :network="network" :channel="channel" />
<button
class="close"
aria-label="Close search window"
title="Close search window"
@click="closeSearch"
/>
</div> </div>
<div class="chat-content"> <div class="chat-content">
<div ref="chat" class="chat" tabindex="-1"> <div ref="chat" class="chat" tabindex="-1">
@ -174,6 +180,9 @@ export default {
setActiveChannel() { setActiveChannel() {
this.$store.commit("activeChannel", this.chan); this.$store.commit("activeChannel", this.chan);
}, },
closeSearch() {
this.$root.switchToChannel(this.channel);
},
shouldDisplayDateMarker(message, id) { shouldDisplayDateMarker(message, id) {
const previousMessage = this.messages[id - 1]; const previousMessage = this.messages[id - 1];

View file

@ -284,6 +284,7 @@ p {
#viewport .lt::before, #viewport .lt::before,
#viewport .rt::before, #viewport .rt::before,
#chat button.mentions::before, #chat button.mentions::before,
#chat button.close::before,
#chat button.menu::before, #chat button.menu::before,
#chat button.search::before, #chat button.search::before,
.channel-list-item::before, .channel-list-item::before,
@ -344,6 +345,7 @@ p {
#chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ } #chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ }
#chat button.mentions::before { content: "\f1fa"; /* https://fontawesome.com/icons/at?style=solid */ } #chat button.mentions::before { content: "\f1fa"; /* https://fontawesome.com/icons/at?style=solid */ }
#chat button.search::before { content: "\f002"; /* https://fontawesome.com/icons/search?style=solid */ } #chat button.search::before { content: "\f002"; /* https://fontawesome.com/icons/search?style=solid */ }
#chat button.close::before { content: "\f00d"; /* https://fontawesome.com/icons/times?style=solid */ }
.context-menu-join::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ } .context-menu-join::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
.context-menu-user::before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ } .context-menu-user::before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
@ -578,7 +580,8 @@ p {
#viewport .rt, #viewport .rt,
#chat button.mentions, #chat button.mentions,
#chat button.search, #chat button.search,
#chat button.menu { #chat button.menu,
#chat button.close {
color: #607992; color: #607992;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
@ -593,7 +596,8 @@ p {
#viewport .rt::before, #viewport .rt::before,
#chat button.mentions::before, #chat button.mentions::before,
#chat button.search::before, #chat button.search::before,
#chat button.menu::before { #chat button.menu::before,
#chat button.close::before {
width: 36px; width: 36px;
line-height: 36px; /* Fix alignment in Microsoft Edge */ line-height: 36px; /* Fix alignment in Microsoft Edge */
} }

View file

@ -114,6 +114,7 @@ body {
#viewport .rt, #viewport .rt,
#chat button.mentions, #chat button.mentions,
#chat button.menu, #chat button.menu,
#chat button.close,
#form #submit { #form #submit {
color: #b7c5d1; color: #b7c5d1;
} }