Rewild Your Web
18
fork

Configure Feed

Select the types of activity you want to include in your feed.

system: use better markup for menus

Signed-off-by: webbeef <me@webbeef.org>

webbeef b31ee232 d90980c1

+74 -93
+5 -5
ui/system/context_menu.css
··· 12 12 z-index: var(--z-modal); 13 13 } 14 14 15 - .menu { 15 + menu { 16 16 position: absolute; 17 17 z-index: 1001; 18 18 } 19 19 20 - .menu-item .icon-slot { 20 + menu li .icon-slot { 21 21 width: 1em; 22 22 height: 1em; 23 23 display: flex; ··· 26 26 flex-shrink: 0; 27 27 } 28 28 29 - .menu-item.disabled { 29 + menu li.disabled { 30 30 opacity: 0.5; 31 31 cursor: default; 32 32 pointer-events: none; 33 33 } 34 34 35 - .menu-item lucide-icon { 35 + menu li lucide-icon { 36 36 width: 1em; 37 37 height: 1em; 38 38 } 39 39 40 40 /* Align check icon to the right */ 41 - .menu-item lucide-icon[name="check"] { 41 + menu li lucide-icon[name="check"] { 42 42 margin-left: auto; 43 43 }
+4 -5
ui/system/context_menu.js
··· 89 89 render() { 90 90 return html` 91 91 <div class="backdrop" @click=${this.handleBackdropClick}></div> 92 - <div class="menu" style="left: ${this.x}px; top: ${this.y}px;"> 92 + <menu style="left: ${this.x}px; top: ${this.y}px;"> 93 93 ${this.items.map( 94 94 (item) => html` 95 - <div 96 - class="menu-item ${item.disabled ? "disabled" : ""}" 95 + <li class="${item.disabled ? "disabled" : ""}" 97 96 @click=${() => this.handleItemClick(item)} 98 97 > 99 98 <span class="icon-slot"> ··· 105 104 ${item.checked 106 105 ? html`<lucide-icon name="check"></lucide-icon>` 107 106 : ""} 108 - </div> 107 + </li> 109 108 `, 110 109 )} 111 - </div> 110 + </menu> 112 111 `; 113 112 } 114 113 }
+11 -5
ui/system/menu_shared.css
··· 1 1 /* SPDX-License-Identifier: AGPL-3.0-or-later */ 2 2 3 - /* Shared menu styles used by webview-menu, context-menu and system-menu */ 3 + /* Shared menu styles used by webview-menu, context-menu, system-menu and select-control */ 4 4 5 - .menu { 5 + menu { 6 6 background: var(--bg-menu); 7 7 border-radius: var(--radius-sm); 8 8 box-shadow: 0 4px 12px var(--color-shadow-menu); ··· 10 10 overflow: hidden; 11 11 font-family: var(--font-family-base); 12 12 font-size: var(--font-size-menu); 13 + padding-left: 0; 13 14 } 14 15 15 - .menu-item { 16 + menu li { 16 17 display: flex; 17 18 align-items: center; 18 19 gap: var(--spacing-md); ··· 22 23 white-space: nowrap; 23 24 } 24 25 25 - .menu-separator { 26 + menu li.menu-separator { 27 + padding-top: 0; 28 + padding-bottom: 0; 29 + } 30 + 31 + menu li.menu-separator { 26 32 height: 1px; 27 33 background: var(--color-border); 28 34 margin: var(--spacing-xs); 29 35 } 30 36 31 - .menu-item:hover { 37 + menu li:hover { 32 38 background: var(--color-menu-item-hover); 33 39 } 34 40
+3 -2
ui/system/mobile_radial_menu.css
··· 30 30 opacity: 1; 31 31 } 32 32 33 - .menu { 33 + menu { 34 + padding-left: 0; 34 35 position: absolute; 35 36 width: 200px; 36 37 height: 200px; ··· 41 42 z-index: 2000; 42 43 } 43 44 44 - :host([open]) .menu { 45 + :host([open]) menu { 45 46 opacity: 1; 46 47 } 47 48
+6 -6
ui/system/mobile_radial_menu.js
··· 149 149 150 150 return html` 151 151 <div class="overlay" @click=${this.handleOverlayTap}></div> 152 - <div class="menu" style=${menuStyle}> 153 - <div class="center"> 152 + <menu style=${menuStyle}> 153 + <li class="center"> 154 154 <div class="center-dot"></div> 155 - </div> 155 + </li> 156 156 ${MobileRadialMenu.zones.map( 157 157 (zone) => html` 158 - <div 158 + <li 159 159 class="zone ${this.isZoneDisabled(zone) ? "disabled" : ""}" 160 160 data-zone=${zone.id} 161 161 @click=${(e) => this.handleZoneTap(zone, e)} 162 162 > 163 163 <lucide-icon name=${zone.icon}></lucide-icon> 164 - </div> 164 + </li> 165 165 ` 166 166 )} 167 - </div> 167 + </menu> 168 168 `; 169 169 } 170 170 }
+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
··· 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 }
+1 -1
ui/system/system_menu.css
··· 12 12 z-index: var(--z-modal); 13 13 } 14 14 15 - .menu { 15 + menu { 16 16 position: absolute; 17 17 top: 1em; 18 18 left: calc(var(--sidebar-width) / 2);
+18 -27
ui/system/system_menu.js
··· 46 46 render() { 47 47 return html` 48 48 <div class="backdrop" @click=${this.handleBackdropClick}></div> 49 - <div class="menu"> 50 - <div class="menu-item" @click=${() => this.handleItemClick("new-tab")}> 49 + <menu> 50 + <li @click=${() => this.handleItemClick("new-tab")}> 51 51 <lucide-icon name="plus"></lucide-icon> 52 52 <span>New View</span> 53 - </div> 54 - <div 55 - class="menu-item" 56 - @click=${() => this.handleItemClick("new-search")} 57 - > 53 + </li> 54 + <li @click=${() => this.handleItemClick("new-search")}> 58 55 <lucide-icon name="search"></lucide-icon> 59 56 <span>Floating Search</span> 60 - </div> 61 - <div 62 - class="menu-item" 63 - @click=${() => this.handleItemClick("new-window")} 64 - > 57 + </li> 58 + <li @click=${() => this.handleItemClick("new-window")}> 65 59 <lucide-icon name="app-window"></lucide-icon> 66 60 <span>New Window</span> 67 - </div> 68 - <div class="menu-separator"></div> 69 - <div class="menu-item" @click=${() => this.handleItemClick("overview")}> 61 + </li> 62 + <li class="menu-separator"></li> 63 + <li @click=${() => this.handleItemClick("overview")}> 70 64 <lucide-icon name="layout-grid"></lucide-icon> 71 65 <span>Overview</span> 72 - </div> 73 - <div class="menu-item" @click=${() => this.handleItemClick("settings")}> 66 + </li> 67 + <li @click=${() => this.handleItemClick("settings")}> 74 68 <lucide-icon name="settings"></lucide-icon> 75 69 <span>Settings</span> 76 - </div> 77 - <div class="menu-separator"></div> 78 - <div 79 - class="menu-item" 80 - @click=${() => this.handleItemClick("reload-ui")} 81 - > 70 + </li> 71 + <li class="menu-separator"></li> 72 + <li @click=${() => this.handleItemClick("reload-ui")}> 82 73 <lucide-icon name="refresh-cw"></lucide-icon> 83 74 <span>Reload UI</span> 84 - </div> 85 - <div class="menu-item" @click=${() => this.handleItemClick("quit")}> 75 + </li> 76 + <li @click=${() => this.handleItemClick("quit")}> 86 77 <lucide-icon name="power"></lucide-icon> 87 78 <span>Quit</span> 88 - </div> 89 - </div> 79 + </li> 80 + </menu> 90 81 `; 91 82 } 92 83 }
+1 -1
ui/system/webview_menu.css
··· 12 12 z-index: var(--z-modal); 13 13 } 14 14 15 - .menu { 15 + menu { 16 16 position: absolute; 17 17 z-index: 1001; 18 18 }
+17 -32
ui/system/webview_menu.js
··· 58 58 59 59 return html` 60 60 <div class="backdrop" @click=${this.handleBackdropClick}></div> 61 - <div class="menu" style="${menuStyle}"> 62 - <div 63 - class="menu-item" 64 - @click=${() => this.handleItemClick("split-horizontal")} 65 - > 61 + <menu style="${menuStyle}"> 62 + <li @click=${() => this.handleItemClick("split-horizontal")}> 66 63 <lucide-icon name="square-split-horizontal"></lucide-icon> 67 64 <span>Horizontal Split</span> 68 - </div> 69 - <div 70 - class="menu-item" 71 - @click=${() => this.handleItemClick("split-vertical")} 72 - > 65 + </li> 66 + <li @click=${() => this.handleItemClick("split-vertical")}> 73 67 <lucide-icon name="square-split-vertical"></lucide-icon> 74 68 <span>Vertical Split</span> 75 - </div> 76 - <div 77 - class="menu-item" 78 - @click=${() => this.handleItemClick("reduce-size")} 79 - > 69 + </li> 70 + <li @click=${() => this.handleItemClick("reduce-size")}> 80 71 <lucide-icon name="chevrons-right-left"></lucide-icon> 81 72 <span>Reduce Width</span> 82 - </div> 83 - <div 84 - class="menu-item" 85 - @click=${() => this.handleItemClick("increase-size")} 86 - > 73 + </li> 74 + <li @click=${() => this.handleItemClick("increase-size")}> 87 75 <lucide-icon name="chevrons-left-right"></lucide-icon> 88 76 <span>Increase Width</span> 89 - </div> 90 - <div class="menu-separator"></div> 91 - <div class="menu-item" @click=${() => this.handleItemClick("zoom-in")}> 77 + </li> 78 + <li class="menu-separator"></li> 79 + <li @click=${() => this.handleItemClick("zoom-in")}> 92 80 <lucide-icon name="zoom-in"></lucide-icon> 93 81 <span>Zoom In</span> 94 - </div> 95 - <div class="menu-item" @click=${() => this.handleItemClick("zoom-out")}> 82 + </li> 83 + <li @click=${() => this.handleItemClick("zoom-out")}> 96 84 <lucide-icon name="zoom-out"></lucide-icon> 97 85 <span>Zoom Out</span> 98 - </div> 99 - <div 100 - class="menu-item" 101 - @click=${() => this.handleItemClick("zoom-reset")} 102 - > 86 + </li> 87 + <li @click=${() => this.handleItemClick("zoom-reset")}> 103 88 <lucide-icon name="refresh-cw"></lucide-icon> 104 89 <span>Reset Zoom</span> 105 - </div> 106 - </div> 90 + </li> 91 + </menu> 107 92 `; 108 93 } 109 94 }