Skip to content

Commit 2d0a50a

Browse files
eythaanneythaann
committed
fix(weg): sorting and sizing
1 parent c14c74f commit 2d0a50a

7 files changed

Lines changed: 162 additions & 82 deletions

File tree

‎changelog.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@
2929
- twm window not being moved when there is a fullscreen app on target monitor.
3030
- native taskbar autohide being disabled on settings save.
3131
- icon editor missing translations.
32+
- dock drag and sorting not working properly.
33+
- dock full size not working on vertical mode.
3234

3335
## [2.7.4]
3436

‎src/static/themes/default/styles/weg.css‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,21 +49,11 @@
4949

5050
.weg-separator {
5151
.horizontal & {
52-
&.weg-separator-1 {
53-
border-left: 1px solid var(--color-gray-500);
54-
}
55-
&.weg-separator-2 {
56-
border-right: 1px solid var(--color-gray-500);
57-
}
52+
border-left: 1px solid var(--slu-std-fg-muted-color);
5853
}
5954

6055
.vertical & {
61-
&.weg-separator-1 {
62-
border-top: 1px solid var(--color-gray-500);
63-
}
64-
&.weg-separator-2 {
65-
border-bottom: 1px solid var(--color-gray-500);
66-
}
56+
border-top: 1px solid var(--slu-std-fg-muted-color);
6757
}
6858
}
6959

‎src/ui/svelte/fancy-toolbar/styles/global.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ body {
5252
margin: var(--config-margin);
5353
overflow: hidden;
5454

55-
display: flex;
56-
justify-content: space-between;
55+
display: grid;
56+
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
5757
align-items: center;
5858

5959
figure,
@@ -73,8 +73,6 @@ body {
7373
}
7474

7575
.ft-bar-left {
76-
max-width: 50%;
77-
width: 50%;
7876
overflow: hidden;
7977
justify-content: flex-start;
8078
}
@@ -85,8 +83,6 @@ body {
8583
}
8684

8785
.ft-bar-right {
88-
max-width: 50%;
89-
width: 50%;
9086
overflow: hidden;
9187
justify-content: flex-end;
9288
}

‎src/ui/svelte/weg/components/Dock.svelte‎

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,27 @@
99
import { move } from "@dnd-kit/helpers";
1010
import { BackgroundByLayers } from "libs/ui/svelte/components/BackgroundByLayers";
1111
import { t } from "../i18n/index.ts";
12-
import { dockState } from "../state/items.svelte.ts";
12+
import {
13+
dockState,
14+
HARDCODED_SEPARATOR_LEFT,
15+
HARDCODED_SEPARATOR_RIGHT,
16+
} from "../state/items.svelte.ts";
1317
import { settingsState } from "../state/settings.svelte.ts";
1418
import { systemState } from "../state/system.svelte.ts";
1519
import { interactables, getWindowsForItem } from "../state/windows.svelte.ts";
1620
import { dockShouldBeHidden, setDockIsDraggingItem } from "../state/hidden.svelte.ts";
1721
import { getSeelenWegMenu } from "../dockMenu.ts";
1822
import { DND_PLUGINS, DND_SENSORS } from "libs/ui/dnd.ts";
19-
import DraggableItem from "./DraggableItem.svelte";
23+
import type { SwItem } from "../types.ts";
24+
import DockItemsGroup from "./DockItemsGroup.svelte";
2025
import WegItemSwitch from "./WegItemSwitch.svelte";
2126
2227
const settings = $derived(settingsState.value as any);
2328
const isHorizontal = $derived(
2429
settings?.position === "Top" || settings?.position === "Bottom",
2530
);
2631
27-
const visibleItems = $derived.by(() => {
32+
function isItemVisible(item: SwItem): boolean {
2833
const pinnedVisibility = settings?.pinnedItemsVisibility as WegPinnedItemsVisibility;
2934
const temporalVisibility = settings?.temporalItemsVisibility as WegTemporalItemsVisibility;
3035
const monitor = systemState.currentMonitor;
@@ -38,21 +43,48 @@
3843
? interactables.value.filter((w) => w.monitor === monitor.id)
3944
: interactables.value;
4045
41-
return dockState.items.filter((item) => {
42-
if (item.type !== "AppOrFile") {
43-
return showPinned;
44-
}
45-
if (item.pinned && showPinned) {
46-
return true;
47-
}
48-
return getWindowsForItem(item as any, windows).length > 0;
49-
});
46+
if (item.type !== "AppOrFile") {
47+
return showPinned;
48+
}
49+
if (item.pinned && showPinned) {
50+
return true;
51+
}
52+
return getWindowsForItem(item as any, windows).length > 0;
53+
}
54+
55+
// splits the flat items array (left..., left-separator, center..., right-separator, ...right)
56+
// into their three groups, same as the toolbar does
57+
const groupedItems = $derived.by(() => {
58+
const items = dockState.items;
59+
const idx1 = items.findIndex((i) => i.id === HARDCODED_SEPARATOR_LEFT.id);
60+
const idx2 = items.findIndex((i) => i.id === HARDCODED_SEPARATOR_RIGHT.id);
61+
return {
62+
left: items.slice(0, idx1),
63+
center: items.slice(idx1, idx2 + 1),
64+
right: items.slice(idx2 + 1),
65+
};
5066
});
5167
68+
const visibleGroupedItems = $derived.by(() => ({
69+
left: groupedItems.left.filter(isItemVisible),
70+
center: groupedItems.center.filter(isItemVisible),
71+
right: groupedItems.right.filter(isItemVisible),
72+
}));
73+
5274
const isEmpty = $derived(
53-
visibleItems.filter((c) => c.type !== "Separator").length === 0,
75+
[
76+
...visibleGroupedItems.left,
77+
...visibleGroupedItems.center,
78+
...visibleGroupedItems.right,
79+
].filter((c) => c.type !== "Separator").length === 0,
5480
);
5581
82+
const itemIndexById = $derived.by(() => {
83+
const map = new Map<string, number>();
84+
dockState.items.forEach((item, i) => map.set(item.id, i));
85+
return map;
86+
});
87+
5688
function onContextMenu() {
5789
const alignX = settingsState.popupAlignX;
5890
const alignY = settingsState.popupAlignY;
@@ -100,17 +132,15 @@
100132
{#if isEmpty}
101133
<span class="weg-empty-state-label">{$t("weg.empty")}</span>
102134
{:else}
103-
{#each visibleItems as item, index (item.id)}
104-
<DraggableItem {item} {index}>
105-
<WegItemSwitch {item} />
106-
</DraggableItem>
107-
{/each}
135+
<DockItemsGroup id="left" items={visibleGroupedItems.left} {itemIndexById} />
136+
<DockItemsGroup id="center" items={visibleGroupedItems.center} {itemIndexById} />
137+
<DockItemsGroup id="right" items={visibleGroupedItems.right} {itemIndexById} />
108138
{/if}
109139
</div>
110140

111141
<DragOverlay>
112142
{#snippet children(source)}
113-
{@const overlayItem = visibleItems.find((c) => c.id === source.id)}
143+
{@const overlayItem = dockState.items.find((c) => c.id === source.id)}
114144
{#if overlayItem}
115145
<WegItemSwitch item={overlayItem} isOverlay={true} />
116146
{/if}

‎src/ui/svelte/weg/components/DockItemsGroup.svelte‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import type { SwItem } from "../types.ts";
3+
import DraggableItem from "./DraggableItem.svelte";
4+
import WegItemSwitch from "./WegItemSwitch.svelte";
5+
6+
interface Props {
7+
id: string;
8+
items: SwItem[];
9+
itemIndexById: Map<string, number>;
10+
}
11+
12+
let { id, items, itemIndexById }: Props = $props();
13+
</script>
14+
15+
<div class="weg-items-{id}" data-empty={items.length === 0}>
16+
{#each items as item (item.id)}
17+
<DraggableItem {item} index={itemIndexById.get(item.id) ?? 0}>
18+
<WegItemSwitch {item} />
19+
</DraggableItem>
20+
{/each}
21+
</div>

‎src/ui/svelte/weg/components/items/Separator.svelte‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,22 @@
1414
const visible = $derived(settingsState.value?.visibleSeparators);
1515
</script>
1616

17-
<div
18-
class="weg-separator"
19-
class:weg-separator-1={isSeparator1}
20-
class:weg-separator-2={isSeparator2}
21-
class:visible
22-
></div>
17+
<div class="weg-separator" class:visible={visible && !isSeparator1 && !isSeparator2}></div>
18+
19+
<style>
20+
.weg-separator {
21+
opacity: 0;
22+
23+
:global(.vertical) & {
24+
width: var(--config-item-size);
25+
}
26+
27+
:global(.horizontal) & {
28+
height: var(--config-item-size);
29+
}
30+
31+
&.visible {
32+
opacity: 1;
33+
}
34+
}
35+
</style>

‎src/ui/svelte/weg/styles/global.css‎

Lines changed: 67 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -77,84 +77,112 @@ body {
7777

7878
max-width: var(--weg-max-taskbar-width);
7979
max-height: var(--weg-max-taskbar-height);
80+
height: 100%;
8081

8182
padding: var(--config-padding);
8283

8384
.weg-items {
8485
display: flex;
85-
gap: var(--config-space-between-items);
86+
min-width: 100%;
87+
width: max-content;
8688
}
87-
}
8889

89-
&[data-size="full-width"] {
90-
.weg-item-drag-container:has(.weg-separator) {
91-
flex: 1;
90+
.weg-items-left,
91+
.weg-items-center,
92+
.weg-items-right {
93+
flex: 1 0 0px;
94+
display: flex;
95+
gap: var(--config-space-between-items);
9296
}
9397
}
9498

9599
&.horizontal {
96100
&[data-size="full-width"] {
97101
width: var(--weg-max-taskbar-width);
102+
103+
.weg-items-left {
104+
justify-content: flex-start;
105+
}
106+
107+
.weg-items-right {
108+
justify-content: flex-end;
109+
}
110+
111+
.weg-items-center {
112+
justify-content: center;
113+
}
98114
}
99115

100116
.weg-items {
101117
flex-direction: row;
102118
min-width: 100%;
103119
width: max-content;
120+
height: var(--config-item-size);
121+
}
122+
123+
.weg-items-left,
124+
.weg-items-center,
125+
.weg-items-right {
126+
flex-direction: row;
127+
}
128+
129+
.weg-items-container:has(.weg-items-left[data-empty="true"]) {
130+
.weg-item-drag-container:first-child:has(.weg-separator) {
131+
margin-right: calc(var(--config-space-between-items) * -1);
132+
}
133+
}
134+
135+
.weg-items-container:has(.weg-items-right[data-empty="true"]) {
136+
.weg-item-drag-container:last-child:has(.weg-separator) {
137+
margin-left: calc(var(--config-space-between-items) * -1);
138+
}
104139
}
105140
}
106141

107142
&.vertical {
108143
&[data-size="full-width"] {
109144
height: var(--weg-max-taskbar-height);
145+
146+
.weg-items-left {
147+
justify-content: flex-start;
148+
}
149+
150+
.weg-items-right {
151+
justify-content: flex-end;
152+
}
153+
154+
.weg-items-center {
155+
justify-content: center;
156+
}
110157
}
111158

112159
.weg-items {
113160
flex-direction: column;
114161
min-height: 100%;
115162
height: max-content;
163+
width: var(--config-item-size);
116164
}
117-
}
118-
119-
&:has(.weg-item-drag-container.dragging) {
120-
pointer-events: none;
121-
}
122-
}
123-
124-
.weg-separator {
125-
opacity: 0;
126-
127-
.vertical & {
128-
width: var(--config-item-size);
129-
}
130165

131-
.horizontal & {
132-
height: var(--config-item-size);
133-
}
134-
135-
.weg-item-drag-container:not(:first-child):not(:last-child) > & {
136-
&.visible {
137-
opacity: 1;
166+
.weg-items-left,
167+
.weg-items-center,
168+
.weg-items-right {
169+
flex-direction: column;
138170
}
139-
}
140171

141-
.weg-item-drag-container:first-child > & {
142-
.vertical & {
143-
margin-top: calc(var(--config-space-between-items) * -1);
172+
.weg-items-container:has(.weg-items-left[data-empty="true"]) {
173+
.weg-item-drag-container:first-child:has(.weg-separator) {
174+
margin-bottom: calc(var(--config-space-between-items) * -1);
175+
}
144176
}
145177

146-
.horizontal & {
147-
margin-left: calc(var(--config-space-between-items) * -1);
178+
.weg-items-container:has(.weg-items-right[data-empty="true"]) {
179+
.weg-item-drag-container:last-child:has(.weg-separator) {
180+
margin-top: calc(var(--config-space-between-items) * -1);
181+
}
148182
}
149183
}
150184

151-
.weg-item-drag-container:last-child > & {
152-
.vertical & {
153-
margin-bottom: calc(var(--config-space-between-items) * -1);
154-
}
155-
156-
.horizontal & {
157-
margin-right: calc(var(--config-space-between-items) * -1);
158-
}
185+
&:has(.weg-item-drag-container.dragging) {
186+
pointer-events: none;
159187
}
160188
}

0 commit comments

Comments
 (0)