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>
packages/html/src/ui/menu/menu-element.ts
+22 -9
View File
@@ -1,4 +1,4 @@
import { MenuCore, MenuDataAttrs, type MenuInput, POPUP_HOST_ATTR } from '@videojs/core';
import { MenuCore, MenuDataAttrs, type MenuInput, POPUP_HOST_ATTR, PopoverCSSVars } from '@videojs/core';
import {
applyElementProps,
applyStateDataAttrs,
@@ -262,15 +262,28 @@ export class MenuElement extends MediaElement {
const triggerRect = this.#currentTrigger?.getBoundingClientRect();
const boundaryRect = getPositioningBoundaryRect(boundaryElement);
const offsets = resolveOffsets(this);
if (supportsAnchorPositioning()) {
applyStyles(
this,
getAnchorPositionStyle(this.id, positionOptions, triggerRect, undefined, boundaryRect, offsets)
const anchorSupported = supportsAnchorPositioning();
const getNextStyle = () =>
getAnchorPositionStyle(
this.id,
positionOptions,
triggerRect,
anchorSupported ? undefined : getPopupPositionRect(this),
boundaryRect,
offsets
);
} else {
const selfRect = getPopupPositionRect(this);
applyStyles(this, getAnchorPositionStyle(this.id, positionOptions, triggerRect, selfRect, boundaryRect, offsets));
let nextStyle = getNextStyle();
if (anchorSupported) {
applyStyles(this, nextStyle);
}
const availableWidth = nextStyle[PopoverCSSVars.availableWidth];
syncMenuViewRoot(this, this.#navState.stack.length > 0, availableWidth ? { availableWidth } : undefined);
if (!anchorSupported) {
nextStyle = getNextStyle();
applyStyles(this, nextStyle);
}
this.#position.sync(this.#currentTrigger, boundaryElement);