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

Merge pull request #3114 from thelounge/xpaw/sortable-fixes

Browse Source 
Change styling when dragging channels.
This commit is contained in:
Pavel Djundik 2019-03-27 12:42:48 +02:00 committed by GitHub
commit dde3465cfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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
v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby' || (activeChannel && channel === activeChannel.channel)"
:class="[
'chan',
channel.type,
{ active: activeChannel && channel === activeChannel.channel },
{ 'parted-channel': channel.type === 'channel' && channel.state === 0 }
@ -13,7 +14,6 @@
:data-name="channel.name"
:aria-controls="'#chan-' + channel.id"
:aria-selected="activeChannel && channel === activeChannel.channel"
class="chan"
role="tab"
>
<slot

17
client/components/NetworkList.vue
View File

@ -8,7 +8,12 @@
<Draggable
v-else
: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"
@change="onNetworkSort"
@start="onDragStart"
@ -42,7 +47,11 @@
/>
<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"
class="channels"
@change="onChannelSort"
@ -92,10 +101,10 @@ export default {
},
methods: {
onDragStart(e) {
e.target.classList.add("ui-sortable-helper");
e.target.classList.add("ui-sortable-active");
},
onDragEnd(e) {
e.target.classList.remove("ui-sortable-helper");
e.target.classList.remove("ui-sortable-active");
},
onNetworkSort(e) {
if (!e.moved) {

46
client/css/style.css
View File

@ -582,6 +582,9 @@ kbd {
}
#sidebar .chan {
display: flex;
padding: 8px 14px;
position: relative;
cursor: pointer;
}
@ -606,19 +609,31 @@ background on hover (unless active) */
}
/* Remove background on hovered/active channel when sorting/drag-and-dropping */
#sidebar .ui-sortable-helper .chan.active, /* Networks */
#sidebar .ui-sortable-helper .chan:hover,
#sidebar .chan.ui-sortable-helper.active, /* Channels */
#sidebar .chan.ui-sortable-helper:hover {
background-color: transparent;
#sidebar .chan.ui-sortable-dragged,
#sidebar .ui-sortable-dragged .chan,
#sidebar .ui-sortable-active .chan:hover,
#sidebar .ui-sortable-active .chan.active {
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 {
padding-top: 5px;
}
#sidebar .network,
#sidebar .network-placeholder {
#sidebar .network {
position: relative;
margin-bottom: 20px;
touch-action: pan-y;
@ -631,23 +646,6 @@ background on hover (unless active) */
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 {
color: #84ce88;
font-size: 15px;