Rename drag-zone -> drop-zone

This commit is contained in:
Mattias Granlund 2023-07-10 15:16:50 +02:00
parent 3971484faf
commit a907693985
5 changed files with 13 additions and 19 deletions

View File

@ -319,19 +319,19 @@ input[type='checkbox'].large {
/* drag & drop */
.drag-zone-hover * {
.drop-zone-hover * {
@apply pointer-events-none;
}
.drag-zone-marker {
.drop-zone-marker {
@apply border-green-450 bg-green-200 dark:bg-green-470;
}
.drag-zone-active.drag-zone-hover .drag-zone-marker {
.drop-zone-active.drop-zone-hover .drop-zone-marker {
@apply border-green-500 bg-green-300 dark:bg-green-460;
}
.drag-zone-active .no-changes,
.drag-zone-active .call-to-action {
.drop-zone-active .no-changes,
.drop-zone-active .call-to-action {
@apply hidden;
}
.drag-zone-active .drag-zone-marker {
.drop-zone-active .drop-zone-marker {
@apply block;
}

View File

@ -89,9 +89,3 @@
{/each}
<NewBranchDropZone {branchController} />
</div>
<style lang="postcss">
:global(.drag-zone-hover *) {
@apply pointer-events-none;
}
</style>

View File

@ -38,7 +38,7 @@
let popupMenu: PopupMenu;
let meatballButton: HTMLButtonElement;
const hoverClass = 'drag-zone-hover';
const hoverClass = 'drop-zone-hover';
const dzType = 'text/hunk';
function updateBranchOwnership() {
@ -128,7 +128,7 @@
class:w-full={maximized}
class:w-96={!maximized}
class="flex max-h-full min-w-[24rem] max-w-[120ch] shrink-0 cursor-grabbing snap-center flex-col overflow-y-auto bg-light-200 py-2 px-3 transition-width dark:bg-dark-1000 dark:text-dark-100"
use:dzHighlight={{ type: dzType, hover: hoverClass, active: 'drag-zone-active' }}
use:dzHighlight={{ type: dzType, hover: hoverClass, active: 'drop-zone-active' }}
on:dragstart
on:dragend
on:drop|stopPropagation={(e) => {
@ -213,7 +213,7 @@
>
</div>
<div class="flex flex-shrink flex-col gap-y-2">
<div class="drag-zone-marker hidden rounded-lg border p-6">
<div class="drop-zone-marker hidden rounded-lg border p-6">
Drop here to add to virtual branch
</div>
{#each files as file (file.id)}

View File

@ -24,7 +24,7 @@
id="new-branch-dz"
class="h-42 ml-4 mt-16 flex w-[22.5rem] shrink-0 justify-center text-center text-light-800 dark:text-dark-100"
bind:this={dropZone}
use:dzHighlight={{ type: 'text/hunk', hover: 'drag-zone-hover', active: 'drag-zone-active' }}
use:dzHighlight={{ type: 'text/hunk', hover: 'drop-zone-hover', active: 'drop-zone-active' }}
on:drop|stopPropagation={(e) => {
if (!e.dataTransfer) {
return;
@ -42,7 +42,7 @@
>
</div>
</div>
<div class="drag-zone-marker hidden flex-grow rounded-lg border border-green-450 p-8">
<div class="drop-zone-marker hidden flex-grow rounded-lg border border-green-450 p-8">
<div class="flex flex-col items-center gap-y-3 self-center p-2">
<p>Drop here to add to virtual branch</p>
</div>

View File

@ -7,8 +7,8 @@ export interface DzOptions {
}
const defaultOptions: DzOptions = {
hover: 'drag-zone-hover',
active: 'drag-zone-active',
hover: 'drop-zone-hover',
active: 'drop-zone-active',
type: 'default'
};