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

Fix up sorting channel styling

Browse Source
This commit is contained in:
Pavel Djundik 2019-03-19 15:11:44 +02:00
parent 5723be00c7
commit f9459ee1c3
3 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/ChannelWrapper.vue
View File

@ -2,6 +2,7 @@
<div <div
v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby' || (activeChannel && channel === activeChannel.channel)" v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby' || (activeChannel && channel === activeChannel.channel)"
:class="[ :class="[
'chan',
channel.type, channel.type,
{ active: activeChannel && channel === activeChannel.channel }, { active: activeChannel && channel === activeChannel.channel },
{ 'parted-channel': channel.type === 'channel' && channel.state === 0 } { 'parted-channel': channel.type === 'channel' && channel.state === 0 }
@ -13,7 +14,6 @@
:data-name="channel.name" :data-name="channel.name"
:aria-controls="'#chan-' + channel.id" :aria-controls="'#chan-' + channel.id"
:aria-selected="activeChannel && channel === activeChannel.channel" :aria-selected="activeChannel && channel === activeChannel.channel"
class="chan"
role="tab" role="tab"
> >
<slot <slot

17
client/components/NetworkList.vue
View File

@ -8,7 +8,12 @@
<Draggable <Draggable
v-else v-else
:list="networks" :list="networks"
:options="{ handle: '.lobby', draggable: '.network', ghostClass: 'network-placeholder', disabled: isSortingEnabled }" :disabled="isSortingEnabled"
handle=".lobby"
draggable=".network"
ghost-class="ui-sortable-ghost"
drag-class="ui-sortable-dragged"
group="networks"
class="networks" class="networks"
@change="onNetworkSort" @change="onNetworkSort"
@start="onDragStart" @start="onDragStart"
@ -42,7 +47,11 @@
/> />
<Draggable <Draggable
:options="{ draggable: '.chan', ghostClass: 'chan-placeholder', disabled: isSortingEnabled }" draggable=".chan"
ghost-class="ui-sortable-ghost"
drag-class="ui-sortable-dragged"
:group="network.uuid"
:disabled="isSortingEnabled"
:list="network.channels" :list="network.channels"
class="channels" class="channels"
@change="onChannelSort" @change="onChannelSort"
@ -92,10 +101,10 @@ export default {
}, },
methods: { methods: {
onDragStart(e) { onDragStart(e) {
e.target.classList.add("ui-sortable-helper"); e.target.classList.add("ui-sortable-active");
}, },
onDragEnd(e) { onDragEnd(e) {
e.target.classList.remove("ui-sortable-helper"); e.target.classList.remove("ui-sortable-active");
}, },
onNetworkSort(e) { onNetworkSort(e) {
if (!e.moved) { if (!e.moved) {

46
client/css/style.css
View File

@ -582,6 +582,9 @@ kbd {
} }
#sidebar .chan { #sidebar .chan {
display: flex;
padding: 8px 14px;
position: relative;
cursor: pointer; cursor: pointer;
} }
@ -606,19 +609,31 @@ background on hover (unless active) */
} }
/* Remove background on hovered/active channel when sorting/drag-and-dropping */ /* Remove background on hovered/active channel when sorting/drag-and-dropping */
#sidebar .ui-sortable-helper .chan.active, /* Networks */ #sidebar .chan.ui-sortable-dragged,
#sidebar .ui-sortable-helper .chan:hover, #sidebar .ui-sortable-dragged .chan,
#sidebar .chan.ui-sortable-helper.active, /* Channels */ #sidebar .ui-sortable-active .chan:hover,
#sidebar .chan.ui-sortable-helper:hover { #sidebar .ui-sortable-active .chan.active {
background-color: transparent; background: transparent;
}
#sidebar .ui-sortable-ghost::after {
background: var(--body-bg-color);
border: 1px dashed #99a2b4;
border-radius: 6px;
content: " ";
display: block;
position: absolute;
left: 10px;
top: 0;
bottom: 0;
right: 10px;
} }
#sidebar .networks { #sidebar .networks {
padding-top: 5px; padding-top: 5px;
} }
#sidebar .network, #sidebar .network {
#sidebar .network-placeholder {
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;
touch-action: pan-y; touch-action: pan-y;
@ -631,23 +646,6 @@ background on hover (unless active) */
text-align: center; text-align: center;
} }
#sidebar .chan,
#sidebar .chan-placeholder {
display: flex;
padding: 8px 14px;
}
#sidebar .network-placeholder,
#sidebar .chan-placeholder {
border: 1px dashed #99a2b4;
border-radius: 6px;
margin: -1px;
}
#sidebar .network-placeholder {
margin-bottom: 29px;
}
#sidebar .chan.lobby { #sidebar .chan.lobby {
color: #84ce88; color: #84ce88;
font-size: 15px; font-size: 15px;