zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(skin): improvements to menu styles (#1725)

Browse Source
This commit is contained in:
Sam Potts
2026-06-30 11:32:09 +10:00
committed by GitHub
parent 9ab7adefb7
commit f3652bd90b
37 changed files with 727 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/minimal-skin.tailwind.ts
+1 -1
View File
@@ -109,7 +109,7 @@ function getTemplateHTML() {
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
${renderIcon('check', { class: cn(icon, menu.icon) })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
packages/html/src/define/audio/skin.tailwind.ts
+1 -1
View File
@@ -104,7 +104,7 @@ function getTemplateHTML() {
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
${renderIcon('check', { class: cn(icon, menu.icon) })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
packages/html/src/define/live-video/minimal-skin.tailwind.ts
+1 -1
View File
@@ -94,7 +94,7 @@ function getTemplateHTML() {
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
${renderIcon('check', { class: cn(icon, menu.icon) })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
packages/html/src/define/live-video/skin.tailwind.ts
+1 -1
View File
@@ -96,7 +96,7 @@ function getTemplateHTML() {
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
${renderIcon('check', { class: cn(icon, menu.icon) })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
packages/html/src/define/video/minimal-skin.tailwind.ts
+13 -13
View File
@@ -145,27 +145,27 @@ function getTemplateHTML() {
<media-menu-view class="${menu.rootView}">
<div class="${menu.group}">
<media-menu-item commandfor="settings-quality-menu" type="quality" data-setting="quality" class="${cn(menu.item, 'media-menu__item--submenu')}">
${renderIcon('switches', { class: icon })}
${renderIcon('switches', { class: cn(icon, menu.icon) })}
<span>Quality</span>
<span class="${menu.hint}">
<media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="${cn(menu.item, 'media-menu__item--submenu')}">
${renderIcon('speed', { class: icon })}
${renderIcon('speed', { class: cn(icon, menu.icon) })}
<span>Speed</span>
<span class="${menu.hint}">
<media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-captions-menu" type="captions" data-setting="captions" class="${cn(menu.item, 'media-menu__item--submenu')}">
${renderIcon('captions-off', { class: icon })}
${renderIcon('captions-off', { class: cn(icon, menu.icon) })}
<span>Captions</span>
<span class="${menu.hint}">
<media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
</span>
</media-menu-item>
</div>
@@ -173,7 +173,7 @@ function getTemplateHTML() {
<media-menu id="settings-quality-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
Quality
</media-menu-back>
<div class="${menu.separator}"></div>
@@ -184,9 +184,9 @@ function getTemplateHTML() {
<span data-part="label"></span>
<sup data-part="tier" class="${menu.tier}"></sup>
</span>
<span data-part="badge" class="${cn(badge, menu.badge)}"></span>
<span data-part="badge" class="${badge}"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
${renderIcon('check', { class: cn(icon, menu.icon) })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
@@ -195,7 +195,7 @@ function getTemplateHTML() {
<media-menu id="settings-speed-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
Speed
</media-menu-back>
<div class="${menu.separator}"></div>
@@ -204,7 +204,7 @@ function getTemplateHTML() {
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
${renderIcon('check', { class: cn(icon, menu.icon) })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
@@ -213,7 +213,7 @@ function getTemplateHTML() {
<media-menu id="settings-captions-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
Captions
</media-menu-back>
<div class="${menu.separator}"></div>
@@ -222,7 +222,7 @@ function getTemplateHTML() {
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
${renderIcon('check', { class: cn(icon, menu.icon) })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
packages/html/src/define/video/skin.tailwind.ts
+13 -13
View File
@@ -141,27 +141,27 @@ function getTemplateHTML() {
<media-menu-view class="${menu.rootView}">
<div class="${menu.group}">
<media-menu-item commandfor="settings-quality-menu" type="quality" data-setting="quality" class="${cn(menu.item, 'media-menu__item--submenu')}">
${renderIcon('switches', { class: icon })}
${renderIcon('switches', { class: cn(icon, menu.icon) })}
<span>Quality</span>
<span class="${menu.hint}">
<media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="${cn(menu.item, 'media-menu__item--submenu')}">
${renderIcon('speed', { class: icon })}
${renderIcon('speed', { class: cn(icon, menu.icon) })}
<span>Speed</span>
<span class="${menu.hint}">
<media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-captions-menu" type="captions" data-setting="captions" class="${cn(menu.item, 'media-menu__item--submenu')}">
${renderIcon('captions-off', { class: icon })}
${renderIcon('captions-off', { class: cn(icon, menu.icon) })}
<span>Captions</span>
<span class="${menu.hint}">
<media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
</span>
</media-menu-item>
</div>
@@ -169,7 +169,7 @@ function getTemplateHTML() {
<media-menu id="settings-quality-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
Quality
</media-menu-back>
<div class="${menu.separator}"></div>
@@ -180,9 +180,9 @@ function getTemplateHTML() {
<span data-part="label"></span>
<sup data-part="tier" class="${menu.tier}"></sup>
</span>
<span data-part="badge" class="${cn(badge, menu.badge)}"></span>
<span data-part="badge" class="${badge}"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
${renderIcon('check', { class: cn(icon, menu.icon) })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
@@ -191,7 +191,7 @@ function getTemplateHTML() {
<media-menu id="settings-speed-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
Speed
</media-menu-back>
<div class="${menu.separator}"></div>
@@ -200,7 +200,7 @@ function getTemplateHTML() {
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
${renderIcon('check', { class: cn(icon, menu.icon) })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
@@ -209,7 +209,7 @@ function getTemplateHTML() {
<media-menu id="settings-captions-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
Captions
</media-menu-back>
<div class="${menu.separator}"></div>
@@ -218,7 +218,7 @@ function getTemplateHTML() {
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
${renderIcon('check', { class: cn(icon, menu.icon) })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>