Skip to content

Commit f0db130

Browse files
TemplarianTemplarian
committed
bug fixes
1 parent 92e23be commit f0db130

File tree

14 files changed

+254
-19
lines changed

14 files changed

+254
-19
lines changed

‎src/pg/menuItem/menuItem.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,4 +69,23 @@
6969

7070
[part=label]:focus-visible:not(:hover)::after {
7171
background: var(--pg-focus-background-color, rgb(79, 143, 249, 0.1));
72-
}
72+
}
73+
74+
75+
[part=label].more::after {
76+
position: absolute;
77+
translate: -0.5rem 0;
78+
right: 0;
79+
content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
80+
width: 1.5rem;
81+
height: 1.5rem;
82+
}
83+
84+
[part=label].more:active::after,
85+
[part=label].more:hover::after {
86+
content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
87+
}
88+
89+
[part=label].more:disabled::after {
90+
content: var(--pg-menu-item-disabled-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
91+
}

‎src/pg/menuItem/menuItem.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default class PgMenuItem extends HTMLElement {
1717
@Prop() label: string = '';
1818
@Prop() checked: boolean = false;
1919
@Prop() disabled: boolean = false;
20+
@Prop() items: any[] = [];
2021

2122
@Part() $label: HTMLButtonElement;
2223

‎src/pg/menuItemIcon/menuItemIcon.css‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,5 +74,27 @@
7474
}
7575

7676
[part=icon] {
77-
margin-inline-end: 0.25rem;
78-
}
77+
margin-inline-end: 0.5rem;
78+
}
79+
80+
[part=button].more [part=label]::after {
81+
content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
82+
width: 1.5rem;
83+
height: 1.5rem;
84+
vertical-align: middle;
85+
translate: 0.25rem 0;
86+
}
87+
88+
[part=button].more:active [part=label]::after,
89+
[part=button].more:hover [part=label]::after {
90+
content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
91+
}
92+
93+
[part=button].more:disabled [part=label]::after {
94+
content: var(--pg-menu-item-disabled-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
95+
}
96+
97+
[part=label] {
98+
display: flex;
99+
align-items: center;
100+
}

‎src/pg/menuItemIcon/menuItemIcon.ts‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, Prop, Part } from '@pictogrammers/element';
22

3+
import PgOverlaySubMenu from '../overlaySubMenu/overlaySubMenu'
34
import PgIcon from '../icon/icon';
45

56
import template from './menuItemIcon.html';
@@ -20,6 +21,7 @@ export default class PgMenuItemIcon extends HTMLElement {
2021
@Prop() label: string = '';
2122
@Prop() checked: boolean = false;
2223
@Prop() disabled: boolean = false;
24+
@Prop() items: any[] = [];
2325

2426
@Part() $icon: PgIcon;
2527
@Part() $button: HTMLButtonElement;
@@ -38,14 +40,28 @@ export default class PgMenuItemIcon extends HTMLElement {
3840
if (changes.checked) {
3941
this.$button.classList.toggle('checked', this.checked);
4042
}
43+
if (changes.items) {
44+
this.$button.classList.toggle('more', this.items.length > 0);
45+
}
4146
}
4247

4348
connectedCallback() {
44-
this.$button.addEventListener('click', () => {
45-
this.checked = true;
46-
this.dispatchEvent(new CustomEvent('select', {
47-
detail: { index: this.index }
48-
}));
49+
this.$button.addEventListener('click', async () => {
50+
if (this.items.length > 0) {
51+
//this.$button.getBoundingClientRect();
52+
const result = await PgOverlaySubMenu.open({
53+
source: this.$button,
54+
x: 0,
55+
y: 0,
56+
value: this.items[0],
57+
items: this.items
58+
});
59+
} else {
60+
this.checked = true;
61+
this.dispatchEvent(new CustomEvent('select', {
62+
detail: { index: this.index }
63+
}));
64+
}
4965
});
5066
this.$button.addEventListener('keydown', (e: KeyboardEvent) => {
5167
switch (e.key) {

‎src/pg/overlay/overlay.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@pictogrammers/element';
1+
import { Component, Prop } from '@pictogrammers/element';
22

33
const layers: Set<HTMLElement> = new Set();
44
const promises: Map<HTMLElement, (value: any) => void> = new Map();

‎src/pg/overlayContextMenu/__examples__/basic/basic.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<div class="example">
2+
<p>Options without radio check options</p>
23
<div part="area" tabindex="0">
34
Right Click or Context Menu Key
45
</div>

‎src/pg/overlayContextMenu/__examples__/basic/basic.ts‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import style from './basic.css';
99

1010
const IconFile = 'M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z';
1111
const IconFolder = 'M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z';
12+
const IconLeft = 'M3,3H21V5H3V3M3,7H15V9H3V7M3,11H21V13H3V11M3,15H15V17H3V15M3,19H21V21H3V19Z';
13+
const IconCenter = 'M3,3H21V5H3V3M7,7H17V9H7V7M3,11H21V13H3V11M7,15H17V17H7V15M3,19H21V21H3V19Z';
14+
const IconRight = 'M3,3H21V5H3V3M9,7H21V9H9V7M3,11H21V13H3V11M9,15H21V17H9V15M3,19H21V21H3V19Z';
1215

1316
@Component({
1417
selector: 'x-pg-overlay-context-menu-basic',
@@ -45,10 +48,29 @@ export default class XPgOverlayContextMenuBasic extends HTMLElement {
4548
type: PgMenuDivider
4649
},
4750
{
48-
label: 'More Items',
51+
label: 'Text Alignment',
4952
value: 'item3',
50-
icon: IconFile,
51-
type: PgMenuItemIcon
53+
icon: IconLeft,
54+
type: PgMenuItemIcon,
55+
items: [{
56+
label: 'Left',
57+
value: 'left',
58+
icon: IconLeft,
59+
type: PgMenuItemIcon,
60+
check: true
61+
}, {
62+
label: 'Center',
63+
value: 'center',
64+
icon: IconCenter,
65+
type: PgMenuItemIcon,
66+
check: false
67+
}, {
68+
label: 'Right',
69+
value: 'right',
70+
icon: IconRight,
71+
type: PgMenuItemIcon,
72+
check: false
73+
}]
5274
}];
5375
const result = await PgOverlayContextMenu.open({
5476
source: this.$area,

‎src/pg/overlayContextMenu/overlayContextMenu.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@
1212
top: anchor(top);
1313
left: anchor(left);
1414
min-width: 10rem;
15-
translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);
15+
margin: var(--pg-overlay-menu-_y, 0) 0 0 var(--pg-overlay-menu-_x, 0);
1616
}

‎src/pg/overlayContextMenu/overlayContextMenu.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ export default class PgOverlayContextMenu extends PgOverlay {
3737
}
3838

3939
connectedCallback() {
40-
console.log('connected');
4140
stack.pop()?.close();
4241
stack.push(this);
4342
stack2.push(this);
@@ -59,21 +58,30 @@ export default class PgOverlayContextMenu extends PgOverlay {
5958
this.$overlay.style.setProperty('--pg-overlay-menu-_y', `${y}px`);
6059
// Focus
6160
this.$menu.focus(0);
61+
// Should return focus
62+
this.#handleDown = this.#down.bind(this);
63+
document.addEventListener('pointerdown', this.#handleDown);
64+
}
65+
66+
#ignore = false;
67+
#handleDown;
68+
#down(e: MouseEvent) {
69+
this.#ignore = e.composedPath().includes(this.source as any);
6270
}
6371

6472
#toggle(e: ToggleEvent) {
6573
if (e.newState === 'closed') {
6674
this.close();
67-
console.log('open', stack2.length);
68-
if (stack2.length === 0) {
75+
if (stack2.length === 0 && this.#ignore) {
76+
console.log(e);
6977
this.source?.focus();
7078
}
7179
}
7280
}
7381

7482
disconnectedCallback() {
75-
console.log('disconnected');
7683
stack2.pop();
84+
document.removeEventListener('pointerdown', this.#handleDown);
7785
}
7886

7987
#handleSelect(e: any) {

‎src/pg/overlaySelectMenu/overlaySelectMenu.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
overflow: visible;
1111
--pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
1212
top: anchor(top);
13-
left: anchor(left);
13+
left: calc(anchor(right) + 0.25rem);
1414
min-width: calc(anchor-size(width) + calc(2 * var(--pg-menu-padding, 0.25rem)));
15-
translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);
15+
margin: var(--pg-overlay-menu-_y, 0) 0 0 var(--pg-overlay-menu-_x, 0);
1616
}

0 commit comments

Comments
 (0)