Merge pull request #3114 from thelounge/xpaw/sortable-fixes
Change styling when dragging channels.
This commit is contained in:
commit
dde3465cfa
@ -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
|
||||||
|
@ -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) {
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user