desktop-icons.svelte RawHistoryFolder

1<script lang="ts">
2    let { showChatRoom = $bindable(), showAuth = $bindable() } = $props();
3
4    function handleKeydown(event: KeyboardEvent, action: () => void) {
5        if (event.key === 'Enter' || event.key === ' ') {
6            event.preventDefault();
7            action();
8        }
9    }
10
11    function handleChatRoomClick() {
12        showChatRoom = true
13    }
14
15    function handleAuthClick() {
16        showAuth = true;
17    }
18</script>
19
20<div class="desktop-icons">
21    <div 
22        class="desktop-icon" 
23        ondblclick={handleChatRoomClick}
24        onkeydown={(e) => handleKeydown(e, handleChatRoomClick)}
25        role="button" 
26        tabindex="0"
27    >
28        <img src="/desktop/aim-desktop-icon.png" alt="Salon de discussion" />
29        <span class="icon-label">Pdr Aim</span>
30    </div>
31    
32    <div 
33        class="desktop-icon" 
34        ondblclick={handleAuthClick}
35        onkeydown={(e) => handleKeydown(e, handleAuthClick)}
36        role="button" 
37        tabindex="0"
38    >
39        <img src="/desktop/application-x-shellscript.png" alt="Connexion" />
40        <span class="icon-label">Connexion</span>
41    </div>
42</div>
43
44<style>
45    .desktop-icons {
46        position: fixed;
47        top: 20px;
48        left: 20px;
49        display: flex;
50        flex-direction: column;
51        gap: 20px;
52    }
53
54    .desktop-icon {
55        display: flex;
56        flex-direction: column;
57        align-items: center;
58        cursor: pointer;
59        width: 75px;
60        text-align: center;
61        padding: 8px;
62        border: 1px dotted transparent;
63        border-radius: 2px;
64        margin: 2px;
65    }
66
67    .desktop-icon:hover, .desktop-icon:focus {
68        background: rgba(49, 106, 197, 0.2);
69        border: 1px dotted rgba(255, 255, 255, 0.8);
70        outline: 1px solid rgba(49, 106, 197, 0.6);
71        outline-offset: -1px;
72    }
73
74    .desktop-icon:active {
75        background: rgba(49, 106, 197, 0.4);
76    }
77
78    .desktop-icon img {
79        width: 48px;
80        height: 48px;
81        margin-bottom: 5px;
82        pointer-events: none; /* Prevents image from interfering with hover */
83    }
84
85    .icon-label {
86        color: white;
87        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
88        font-size: 12px;
89        user-select: none;
90        pointer-events: none; /* Prevents text from interfering with hover */
91        max-width: 100%;
92        overflow-wrap: break-word;
93    }
94</style>