diff --git a/share.py b/share.py index d84c114..a386dfd 100755 --- a/share.py +++ b/share.py @@ -342,7 +342,8 @@ def build_html(self, path, dirs, files): builder.append('.container{height: 100%; display: flex; flex-direction: column; padding: 0 8px; overflow-wrap: break-word;}') builder.append('.header{display: flex; justify-content: space-between; padding: 8px 0; font-size: x-large;}') builder.append('hr{width: 100%;}') - builder.append('.main{flex: auto; display: flex; flex-direction: column; padding: 16px 0;}') + builder.append('.main{flex: auto; padding: 16px 0;}') + builder.append('.content{width: 100%; height: 100%;}') builder.append('.list-item{display: flex; justify-content: space-between; padding: 2px 0; word-break: break-all;}') builder.append('.list-item:nth-child(even){background-color: #f8f8f8;}') builder.append('.item-left{display: flex}') @@ -355,7 +356,8 @@ def build_html(self, path, dirs, files): builder.append('a:hover{color: #ff5500;}') if self._upload: builder.append('.upload{background-color: #76797b; border-color: #76797b; color: white; border-radius: 16px;}') - builder.append('.upload:hover, .dragging{background-color: #565e64; border-color: #565e64;}') + builder.append('.upload:hover{background-color: #565e64; border-color: #565e64;}') + builder.append('.dragging{border: 4px dashed #cccccc; border-radius: 4px;}') builder.append('button{cursor: pointer; border: 1px solid #cccccc; color: #333333; background-color: white; border-radius: 4px;}') builder.append('button:hover{background-color: #e6e6e6;}') builder.append('button:disabled{opacity: .65; pointer-events: none; user-select: none;}') @@ -381,8 +383,10 @@ def build_html(self, path, dirs, files): builder.append(' document.getElementById("upload").setAttribute("disabled", "");') builder.append(' document.getElementById("form").submit();') builder.append('}') + builder.append('let drag_counter = 0;') builder.append('function on_dragenter(e){') builder.append(' e.preventDefault();') + builder.append(' drag_counter++;') builder.append(' e.currentTarget.classList.add("dragging");') builder.append('}') builder.append('function on_dragover(e){') @@ -390,10 +394,14 @@ def build_html(self, path, dirs, files): builder.append('}') builder.append('function on_dragleave(e){') builder.append(' e.preventDefault();') - builder.append(' e.currentTarget.classList.remove("dragging");') + builder.append(' drag_counter--;') + builder.append(' if (drag_counter === 0) {') + builder.append(' e.currentTarget.classList.remove("dragging");') + builder.append(' }') builder.append('}') builder.append('function on_drop(e){') builder.append(' e.preventDefault();') + builder.append(' drag_counter = 0;') builder.append(' e.currentTarget.classList.remove("dragging");') builder.append(' if (e.dataTransfer.files.length == 0) {return;}') builder.append(' document.getElementById("file").files = e.dataTransfer.files;') @@ -407,10 +415,11 @@ def build_html(self, path, dirs, files): if self._upload: builder.append('let upload = document.getElementById("upload");') builder.append('upload.onclick = on_upload_click;') - builder.append('upload.ondragenter = on_dragenter;') - builder.append('upload.ondragover = on_dragover;') - builder.append('upload.ondragleave = on_dragleave;') - builder.append('upload.ondrop = on_drop;') + builder.append('let content = document.getElementById("content");') + builder.append('content.ondragenter = on_dragenter;') + builder.append('content.ondragover = on_dragover;') + builder.append('content.ondragleave = on_dragleave;') + builder.append('content.ondrop = on_drop;') builder.append('let file = document.getElementById("file");') builder.append('file.onchange = on_upload;') builder.append('}') @@ -436,7 +445,8 @@ def build_html(self, path, dirs, files): builder.append('') builder.append('
') builder.append('
') - builder.append('