Xymorot/RenaiApp
Xymorot
/
RenaiApp
1
1
Fork 0
Code Issues Pull Requests Releases Activity

remove: delete Divide pattern until there is a clearer idea of the UI

This commit is contained in:
Xymorot 2019-08-01 22:32:44 +02:00
parent 3079c33d37
commit 6b1b995c9c
2 changed files with 1 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/App.svelte
View File

@ -1,5 +1,4 @@
<script>
import Divide from 'molecules/Divide.svelte';
import NhentaiLogin from 'polymers/NhentaiLogin.svelte';
</script>
@ -45,19 +44,5 @@
</style>
<main>
<Divide>
<div slot="1">
<NhentaiLogin></NhentaiLogin>
</div>
<div slot="2">
<Divide mode="v">
<div slot="1">
<Divide></Divide>
</div>
<div slot="2">
<Divide></Divide>
</div>
</Divide>
</div>
</Divide>
</main>

130
src/renderer/components/2-molecules/Divide.svelte
View File

@ -1,130 +0,0 @@
<script>
import { onMount } from 'svelte/internal';
import { c, s } from 'services/utils';
export let mode = 'h';
export let basisFirst = 0.5;
export let basisSecond = 0.5;
export let minSize = 100;
let divide;
let dragging = false;
let size = 5;
let total = 0;
$: classes = c({
divide: true,
'divide--vertical': mode === 'v',
});
$: classesDivider = c({
divide__divider: true,
'divide__divider--vertical': mode === 'v',
});
$: style = s({
'--divide-size': `${size}px`,
'--divide-basis-first': `${basisFirst * 100}%`,
'--divide-basis-second': `${basisSecond * 100}%`,
'--divide-min-width': minSize > 0 && mode === 'h' ? `${minSize}px` : '0',
'--divide-min-height': minSize > 0 && mode === 'v' ? `${minSize}px` : '0',
});
function getTotal() {
return mode === 'h' ? divide.clientWidth : divide.clientHeight;
}
function handleMousedown(event) {
if (event.button === 0) {
dragging = true;
total = getTotal();
}
}
function handleMousemove(event) {
if (dragging) {
const dragPos =
mode === 'h' ? event.x - divide.getBoundingClientRect().x : event.y - divide.getBoundingClientRect().y;
basisFirst = dragPos / total;
basisSecond = 1 - basisFirst;
}
}
function handleMouseup() {
dragging = false;
}
function handleMouseenter(event) {
if (event.buttons !== 1) {
dragging = false;
}
}
</script>
<style>
.divide {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.divide__divider {
cursor: ew-resize;
width: var(--divide-size);
height: 100%;
background-color: var(--color-foreground);
}
.divide__divider:hover {
background-color: var(--color-foreground-light);
}
.divide__elem {
flex: 0 0 50%;
min-width: var(--divide-min-width);
max-width: calc(100% - var(--divide-size) - var(--divide-min-width));
min-height: var(--divide-min-height);
max-height: calc(100% - var(--divide-size) - var(--divide-min-height));
}
.divide__elem > :global(*) {
width: 100%;
height: 100%;
}
.divide__elem--first {
flex-basis: calc(var(--divide-basis-first) - var(--divide-size) / 2);
}
.divide__elem--second {
flex-basis: calc(var(--divide-basis-second) - var(--divide-size) / 2);
}
.divide--vertical {
flex-direction: column;
}
.divide__divider--vertical {
cursor: ns-resize;
width: 100%;
height: var(--divide-size);
}
</style>
<div
class="{classes}"
{style}
bind:this="{divide}"
on:mousemove|preventDefault="{handleMousemove}"
on:mouseup|preventDefault="{handleMouseup}"
on:mouseenter|preventDefault="{handleMouseenter}"
>
<div class="divide__elem divide__elem--first">
<slot name="1"></slot>
</div>
<div class="{classesDivider}" draggable="true" on:mousedown|preventDefault="{handleMousedown}"></div>
<div class="divide__elem divide__elem--second">
<slot name="2"></slot>
</div>
</div>