deblan-mirror/thelounge
deblan-mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2024-06-03 06:12:22 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #3082 from thelounge/astorije/parted-channel

Browse source 
Display a broken link icon and red text color when not joined on a channel
This commit is contained in:
Pavel Djundik 2019-02-26 19:18:54 +02:00 committed by GitHub
parent 6f2a919d13 e173b84fdb
commit 6f70ce9e15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/components/Channel.vue
View file

@ -9,6 +9,12 @@
:class="{ highlight: channel.highlight }" :class="{ highlight: channel.highlight }"
class="badge">{{ channel.unread | roundBadgeNumber }}</span> class="badge">{{ channel.unread | roundBadgeNumber }}</span>
<template v-if="channel.type === 'channel'"> <template v-if="channel.type === 'channel'">
<span
v-if="channel.state === 0"
class="parted-channel-tooltip tooltipped tooltipped-w"
aria-label="Not currently joined">
<span class="parted-channel-icon" />
</span>
<span <span
class="close-tooltip tooltipped tooltipped-w" class="close-tooltip tooltipped tooltipped-w"
aria-label="Leave"> aria-label="Leave">

2
client/components/ChannelWrapper.vue
View file

@ -4,7 +4,7 @@
:class="[ :class="[
channel.type, channel.type,
{ active: activeChannel && channel === activeChannel.channel }, { active: activeChannel && channel === activeChannel.channel },
{ 'channel-is-parted': channel.type === 'channel' && channel.state === 0 } { 'parted-channel': channel.type === 'channel' && channel.state === 0 }
]" ]"
:aria-label="getAriaLabel()" :aria-label="getAriaLabel()"
:title="getAriaLabel()" :title="getAriaLabel()"

18
client/css/style.css
View file

@ -279,6 +279,7 @@ kbd {
#image-viewer .next-image-btn::before, #image-viewer .next-image-btn::before,
#sidebar .not-secure-icon::before, #sidebar .not-secure-icon::before,
#sidebar .not-connected-icon::before, #sidebar .not-connected-icon::before,
#sidebar .parted-channel-icon::before,
#sidebar .collapse-network-icon::before { #sidebar .collapse-network-icon::before {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; /* Can't have font-size inherit on line above, so need to override */ font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
@ -307,7 +308,8 @@ kbd {
content: "\f071"; /* https://fontawesome.com/icons/exclamation-triangle?style=solid */ content: "\f071"; /* https://fontawesome.com/icons/exclamation-triangle?style=solid */
} }
#sidebar .not-connected-icon::before { #sidebar .not-connected-icon::before,
#sidebar .parted-channel-icon::before {
content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */ content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */
} }
@ -662,7 +664,6 @@ background on hover (unless active) */
#sidebar .not-connected-tooltip, #sidebar .not-connected-tooltip,
#sidebar .not-secure-tooltip { #sidebar .not-secure-tooltip {
display: none; display: none;
margin: 0 8px;
} }
#sidebar .not-connected .not-connected-tooltip, #sidebar .not-connected .not-connected-tooltip,
@ -675,6 +676,12 @@ background on hover (unless active) */
display: none; display: none;
} }
#sidebar .not-connected-tooltip,
#sidebar .not-secure-tooltip,
#sidebar .parted-channel-tooltip {
margin: 0 8px;
}
#sidebar .not-secure .chan.lobby { #sidebar .not-secure .chan.lobby {
color: #f39c12; color: #f39c12;
} }
@ -684,12 +691,15 @@ background on hover (unless active) */
color: #f8c572; color: #f8c572;
} }
#sidebar .not-connected .chan.lobby { #sidebar .not-connected .chan.lobby,
#sidebar .parted-channel {
color: #e74c3c; color: #e74c3c;
} }
#sidebar .not-connected .chan.lobby .lobby-wrap:hover, #sidebar .not-connected .chan.lobby .lobby-wrap:hover,
#sidebar .not-connected .chan.lobby.active { #sidebar .not-connected .chan.lobby.active,
#sidebar .parted-channel:hover,
#sidebar .parted-channel.active {
color: #f1978e; color: #f1978e;
} }