Skip to content

Commit

Permalink
Merge pull request kiwiirc#1252 from kiwiirc/serverheader
Browse files Browse the repository at this point in the history 
Activity counters on network name header
  • Loading branch information
@prawnsalad
prawnsalad authored Mar 15, 2020
2 parents 65389e8 + b6bbff7 commit f53d71a
Show file tree
Hide file tree
Showing 7 changed files with 120 additions and 110 deletions.
15 changes: 1 addition & 14 deletions src/components/StateBrowser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,17 +251,15 @@ export default {
}
.kiwi-statebrowser-network .kiwi-statebrowser-network-header {
float: left;
width: 100%;
line-height: 45px;
text-align: left;
position: relative;
display: flex;
}
.kiwi-statebrowser-network .kiwi-statebrowser-network-header a {
text-align: left;
padding: 0 0 0 10px;
width: 100%;
font-size: 1em;
font-weight: 600;
}
Expand Down Expand Up @@ -296,7 +294,6 @@ export default {
width: 100%;
border-top: none;
box-sizing: border-box;
margin: 1em 0;
}
.kiwi-statebrowser-newchannel a {
Expand Down Expand Up @@ -437,16 +434,6 @@ export default {
border-color: green;
}
.kiwi-statebrowser-channel-label-transition-enter-active,
.kiwi-statebrowser-channel-label-transition-leave-active {
transition: opacity 0.1s;
}
.kiwi-statebrowser-channel-label-transition-enter,
.kiwi-statebrowser-channel-label-transition-leave-active {
opacity: 0;
}
.kiwi-statebrowser-newchannel-inputwrap--focus {
opacity: 1;
}
Expand Down
192 changes: 112 additions & 80 deletions src/components/StateBrowserNetwork.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,24 @@
<div class="kiwi-statebrowser-network-header">
<a
class="kiwi-statebrowser-network-name u-link"
@click="setActiveBuffer(network.serverBuffer())"
@click="setActiveBuffer(serverBuffer)"
>
{{ network.name }}
</a>
<div class="kiwi-network-name-hover-icon">
<i class="fa fa-ellipsis-h" aria-hidden="true"/>
<div class="kiwi-statebrowser-buffer-actions">
<div class="kiwi-statebrowser-channel-labels">
<div
v-if="serverBuffer.flags.unread && showMessageCounts(serverBuffer)"
:class="[
serverBuffer.flags.highlight ?
'kiwi-statebrowser-channel-label--highlight' :
''
]"
class="kiwi-statebrowser-channel-label"
>
{{ serverBuffer.flags.unread > 999 ? "999+": serverBuffer.flags.unread }}
</div>
</div>
</div>
<div class="kiwi-network-name-options">
<div
Expand All @@ -20,20 +32,6 @@
>
<i :class="[collapsed?'fa-plus-square-o':'fa-minus-square-o']" class="fa" />
</div>
<div
:class="{ active: channel_add_display == true }"
class="kiwi-network-name-option kiwi-network-name-option-channel"
@click="toggleAddChannel()"
>
<i class="fa fa-plus" aria-hidden="true"/>
</div>
<div
:class="{ active: channel_filter_display == true }"
class="kiwi-network-name-option kiwi-network-name-option-chanfilter"
@click="toggleFilterChannel()"
>
<i class="fa fa-search" aria-hidden="true"/>
</div>
</div>
</div>

Expand All @@ -44,6 +42,7 @@
:placeholder="$t('filter_channels')"
type="text"
@blur="onChannelFilterInputBlur"
@keyup.esc="closeFilterChannel"
>
<p>
<a @click="closeFilterChannel(); showNetworkChannels(network)">
Expand Down Expand Up @@ -106,6 +105,26 @@
</transition>

<div class="kiwi-statebrowser-channels">
<div
v-if="network.state === 'connected'"
class="kiwi-statebrowser-channels-options"
>
<div
:class="{ active: channel_add_display == true }"
class="kiwi-statebrowser-channels-option"
@click="toggleAddChannel()"
>
<i class="fa fa-plus" aria-hidden="true"/>
</div>
<div
:class="{ active: channel_filter_display == true }"
class="kiwi-statebrowser-channels-option"
@click="onSearchChannelClick"
>
<i class="fa fa-search" aria-hidden="true"/>
</div>
</div>

<div
v-for="buffer in filteredBuffers"
:key="buffer.name"
Expand All @@ -122,8 +141,8 @@
:network="network" :user="network.userByName(buffer.name)"
/>{{ buffer.name }}
</div>
<div class="kiwi-statebrowser-channel-labels">
<transition name="kiwi-statebrowser-channel-label-transition">
<div class="kiwi-statebrowser-buffer-actions">
<div class="kiwi-statebrowser-channel-labels">
<div
v-if="buffer.flags.unread && showMessageCounts(buffer)"
:class="[
Expand All @@ -135,11 +154,11 @@
>
{{ buffer.flags.unread > 999 ? "999+": buffer.flags.unread }}
</div>
</transition>
</div>
</div>

<div class="kiwi-statebrowser-channel-leave" @click="closeBuffer(buffer)">
<i class="fa fa-times" aria-hidden="true"/>
<div class="kiwi-statebrowser-channel-leave" @click="closeBuffer(buffer)">
<i class="fa fa-times" aria-hidden="true"/>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -174,6 +193,9 @@ export default {
};
},
computed: {
serverBuffer() {
return this.network.serverBuffer();
},
isActiveNetwork: function isActiveNetwork() {
return state.getActiveNetwork() === this.network;
},
Expand Down Expand Up @@ -250,15 +272,12 @@ export default {
});
},
onChannelFilterInputBlur() {
// If nothing was entered into the input box, hide it just to clean up the UI
if (!this.channel_filter) {
// Hacky, but if we remove the channel filter UI at this blur event and the user
// clicked a link in this filter UI, then the click event will not hit the target
// link as it has been removed before the event reaches it.
setTimeout(() => {
this.closeFilterChannel();
}, 200);
}
// Hacky, but if we remove the channel filter UI at this blur event and the user
// clicked a link in this filter UI, then the click event will not hit the target
// link as it has been removed before the event reaches it.
setTimeout(() => {
this.closeFilterChannel();
}, 200);
},
closeBuffer(buffer) {
state.removeBuffer(buffer);
Expand Down Expand Up @@ -289,6 +308,15 @@ export default {
showNetworkChannels(network) {
network.showServerBuffer('channels');
},
onSearchChannelClick() {
// If we have no other buffers than the server buffer, take them straight
// to the channel list for searching
if (this.network.buffers.length > 1) {
this.toggleFilterChannel();
} else {
this.network.showServerBuffer('channels');
}
},
toggleAddChannel() {
this.channel_add_display = !this.channel_add_display;
this.channel_filter_display = false;
Expand Down Expand Up @@ -343,17 +371,6 @@ export default {
box-sizing: border-box;
}
.kiwi-network-name-hover-icon {
position: absolute;
right: 0;
top: 0;
height: 45px;
z-index: 2;
width: 45px;
text-align: center;
line-height: 45px;
}
.kiwi-network-name-options {
position: absolute;
top: 0;
Expand Down Expand Up @@ -391,6 +408,24 @@ export default {
font-size: 0.9em;
}
.kiwi-statebrowser-channels-options {
text-align: left;
}
.kiwi-statebrowser-channels-option {
display: inline-block;
width: 35px;
line-height: 35px;
text-align: center;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
}
.kiwi-statebrowser-channels-option:hover {
opacity: 1;
}
/* During DOM entering and leaving */
.kiwi-statebrowser-network-status-transition-enter-active,
.kiwi-statebrowser-network-status-transition-leave-active {
Expand Down Expand Up @@ -420,71 +455,68 @@ export default {
transition: padding 0.1s, border 0.1s;
}
/* Contains the labels and close icons */
.kiwi-statebrowser-buffer-actions {
flex: 0;
}
.kiwi-statebrowser-channel-labels {
position: absolute;
right: 0;
text-align: right;
z-index: 0;
top: 0;
transition: opacity 0.2s;
height: 100%;
line-height: 1em;
display: flex;
box-sizing: border-box;
}
.kiwi-statebrowser-channel-label {
display: inline-block;
padding: 0 10px;
line-height: 30px;
height: 30px;
margin: 0;
margin: 5px;
font-weight: 600;
box-sizing: border-box;
text-align: center;
width: 50px;
border-radius: 0;
}
.kiwi-statebrowser-channel-label:hover {
opacity: 1;
}
border-radius: 4px;
.kiwi-statebrowser-channel-label-transition-enter-active,
.kiwi-statebrowser-channel-label-transition-leave-active {
transition: opacity 0.1s;
/* Vertical+horizontaly center align text */
display: flex;
text-align: center;
align-items: center;
}
.kiwi-statebrowser-channel-label-transition-enter,
.kiwi-statebrowser-channel-label-transition-leave-active {
opacity: 0;
.kiwi-statebrowser-network-header .kiwi-statebrowser-channel-label {
margin: 10px;
}
.kiwi-statebrowser-channel-leave {
float: right;
opacity: 0;
width: 50px;
width: 38px; /* Visualy the same width as a single digit label */
cursor: pointer;
margin-right: 0;
transition: opacity 0.2s;
z-index: 10;
display: none;
}
.kiwi-statebrowser-channel-active .kiwi-statebrowser-channel-leave {
opacity: 1;
/* Hovering over the buffer name should show the close icon, but hide labels */
.kiwi-statebrowser-channel .kiwi-statebrowser-channel-labels,
.kiwi-statebrowser-channel:hover .kiwi-statebrowser-channel-leave {
/* display: inline-block; */
}
.kiwi-statebrowser-channel:hover .kiwi-statebrowser-channel-settings,
.kiwi-statebrowser-channel:hover .kiwi-statebrowser-channel-leave {
opacity: 1;
display: block;
}
.kiwi-statebrowser-channel:hover .kiwi-statebrowser-channel-labels {
opacity: 0;
display: none;
}
/* An active buffer should always show the close icon */
.kiwi-statebrowser-channel-active .kiwi-statebrowser-channel-leave {
display: block;
}
.kiwi-statebrowser-channel-active .kiwi-statebrowser-channel-labels {
display: none;
}
/* Add channel input */
.kiwi-statebrowser-newchannel-inputwrap {
float: left;
width: 100%;
position: relative;
border-radius: 3px;
opacity: 1;
transition: opacity 0.3s;
background: none;
Expand Down
6 changes: 6 additions & 0 deletions src/libs/InputHandler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,8 @@ inputCommands.notice = function inputCommandMsg(event, command, line) {
};
inputCommands.dice = function inputCommandDice(event, command, line) {
// /dice 100

event.handled = true;
let buffer = this.state.getActiveBuffer();
let network = this.state.getActiveNetwork();

Expand Down Expand Up @@ -774,6 +776,8 @@ inputCommands.names = function inputCommandNames(event, command, line) {
};

inputCommands.inject = function inputCommandInject(event, command, line) {
event.handled = true;

let network = this.state.getActiveNetwork();
let connection = network.ircClient.connection;
connection.addReadBuffer(line);
Expand Down Expand Up @@ -888,9 +892,11 @@ inputCommands.server = function inputCommandServer(event, command, line) {
};

inputCommands.beep = function inputCommandBeep(event, command, line) {
event.handled = true;
this.state.$emit('audio.bleep');
};

inputCommands.notify = function inputCommandNotify(event, command, line) {
event.handled = true;
this.state.$emit('notification.show', line);
};
2 changes: 1 addition & 1 deletion src/libs/state.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -543,7 +543,7 @@ const state = new Vue({

// Increment the unread counter if this buffer is not active
let includeAsActivity = false;
let typesForActivty = ['privmsg', 'action', 'notice'];
let typesForActivty = ['privmsg', 'action', 'notice', 'wallops'];
if (buffer.setting('traffic_as_activity') && message.type === 'traffic') {
typesForActivty.push('traffic');
}
Expand Down
Loading

0 comments on commit f53d71a

Please sign in to comment.