forked from
me.webbeef.org/browser.html
Rewild Your Web
system: use better markup for menus
Signed-off-by: webbeef <me@webbeef.org>
+74
-93
+4
-4
ui/system/select_control.css
+4
-4
ui/system/select_control.css
···
25
25
background: transparent;
26
26
}
27
27
28
-
.menu {
28
+
menu {
29
29
position: absolute;
30
30
max-height: 300px;
31
31
overflow-y: auto;
32
32
}
33
33
34
-
.menu-item .icon-slot {
34
+
menu li .icon-slot {
35
35
width: 1em;
36
36
height: 1em;
37
37
display: flex;
···
40
40
flex-shrink: 0;
41
41
}
42
42
43
-
.menu-item.disabled {
43
+
menu li.disabled {
44
44
opacity: 0.5;
45
45
cursor: default;
46
46
pointer-events: none;
47
47
}
48
48
49
-
.menu-item.selected {
49
+
menu li.selected {
50
50
font-weight: var(--font-weight-bold);
51
51
}
52
52
+4
-5
ui/system/select_control.js
+4
-5
ui/system/select_control.js
···
111
111
112
112
const isSelected = index === this.selectedIndex;
113
113
renderedItems.push(html`
114
-
<div
115
-
class="menu-item ${option.disabled ? "disabled" : ""} ${isSelected
114
+
<li class="${option.disabled ? "disabled" : ""} ${isSelected
116
115
? "selected"
117
116
: ""}"
118
117
@click=${() => this.handleOptionClick(option, index)}
···
121
120
${isSelected ? html`<lucide-icon name="check"></lucide-icon>` : ""}
122
121
</span>
123
122
<span>${option.label}</span>
124
-
</div>
123
+
</li>
125
124
`);
126
125
});
127
126
128
127
return html`
129
128
<div class="backdrop" @click=${this.handleBackdropClick}></div>
130
-
<div class="menu" style="left: ${this.x}px; top: ${this.y}px;">
129
+
<menu style="left: ${this.x}px; top: ${this.y}px;">
131
130
${renderedItems}
132
-
</div>
131
+
</menu>
133
132
`;
134
133
}
135
134
}