x4js 1.4.32 → 1.4.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/colorpicker.d.ts +1 -0
- package/lib/colorpicker.js +21 -10
- package/lib/drawtext.d.ts +1 -0
- package/lib/drawtext.js +9 -3
- package/lib/panel.d.ts +1 -0
- package/lib/panel.js +1 -1
- package/lib/x4.css +5 -1
- package/package.json +1 -1
- package/src/alpha.jpg +0 -0
- package/src/colorpicker.ts +24 -11
- package/src/panel.ts +2 -1
- package/src/x4.less +8 -1
package/lib/colorpicker.d.ts
CHANGED
|
@@ -90,6 +90,7 @@ export interface ColorPickerEditorProps extends ColorPickerProps {
|
|
|
90
90
|
label?: string;
|
|
91
91
|
labelWidth?: number;
|
|
92
92
|
cust_colors?: Color[];
|
|
93
|
+
displayValue?: false;
|
|
93
94
|
change: EventCallback<EvChange>;
|
|
94
95
|
}
|
|
95
96
|
export declare class ColorPickerEditor extends HLayout<ColorPickerEditorProps, ColorPickerEventMap> {
|
package/lib/colorpicker.js
CHANGED
|
@@ -516,19 +516,30 @@ class ColorPickerEditor extends layout_1.HLayout {
|
|
|
516
516
|
flex: props.labelWidth < 0 ? -props.labelWidth : undefined,
|
|
517
517
|
width: props.labelWidth >= 0 ? props.labelWidth : undefined,
|
|
518
518
|
}) : null,
|
|
519
|
-
new
|
|
520
|
-
cls: 'value',
|
|
519
|
+
new component_1.Component({
|
|
521
520
|
flex: 1,
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
521
|
+
content: [
|
|
522
|
+
new label_1.Label({
|
|
523
|
+
cls: 'alpha @fit',
|
|
524
|
+
text: ''
|
|
525
|
+
}),
|
|
526
|
+
new label_1.Label({
|
|
527
|
+
cls: 'value @fit',
|
|
528
|
+
text: props.displayValue === false ? '' : color.toHex(),
|
|
529
|
+
style: {
|
|
530
|
+
backgroundColor: color.toString(),
|
|
531
|
+
color: tcolor
|
|
532
|
+
},
|
|
533
|
+
dom_events: {
|
|
534
|
+
click: () => this._showPicker()
|
|
535
|
+
}
|
|
536
|
+
})
|
|
537
|
+
],
|
|
530
538
|
})
|
|
531
539
|
]);
|
|
540
|
+
if (props.displayValue === false) {
|
|
541
|
+
this.setStyleValue('background-image', "url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg=='");
|
|
542
|
+
}
|
|
532
543
|
this._setTabIndex(props.tabIndex);
|
|
533
544
|
}
|
|
534
545
|
set value(color) {
|
package/lib/drawtext.d.ts
CHANGED
package/lib/drawtext.js
CHANGED
|
@@ -200,7 +200,8 @@ function drawText(ctx, input_Text, rc, drawStyle) {
|
|
|
200
200
|
break;
|
|
201
201
|
}
|
|
202
202
|
//print all lines of text
|
|
203
|
-
let idx = 1, yy = 0;
|
|
203
|
+
//let idx = 1, yy = 0;
|
|
204
|
+
let maxw = 0;
|
|
204
205
|
textarray.some(line => {
|
|
205
206
|
//console.log( idx++, yy );
|
|
206
207
|
line.space = spaceW;
|
|
@@ -208,6 +209,7 @@ function drawText(ctx, input_Text, rc, drawStyle) {
|
|
|
208
209
|
_justify(line, col_width, spaceW);
|
|
209
210
|
}
|
|
210
211
|
let x = col_left;
|
|
212
|
+
let cw = 0;
|
|
211
213
|
if (align == 1) {
|
|
212
214
|
x += col_width - line.width;
|
|
213
215
|
}
|
|
@@ -234,9 +236,13 @@ function drawText(ctx, input_Text, rc, drawStyle) {
|
|
|
234
236
|
ctx.stroke( );*/
|
|
235
237
|
ctx.fillText(w.text, x, y);
|
|
236
238
|
x += w.width + line.space;
|
|
239
|
+
cw += w.width + line.space;
|
|
237
240
|
});
|
|
238
241
|
y += lineHeight;
|
|
239
|
-
yy += lineHeight;
|
|
242
|
+
//yy += lineHeight;
|
|
243
|
+
if (maxw < cw) {
|
|
244
|
+
maxw = cw;
|
|
245
|
+
}
|
|
240
246
|
if (y > (rc.bottom + lineHeight)) {
|
|
241
247
|
y = col_top;
|
|
242
248
|
col_left += col_width + gap;
|
|
@@ -248,7 +254,7 @@ function drawText(ctx, input_Text, rc, drawStyle) {
|
|
|
248
254
|
ctx.restore();
|
|
249
255
|
//console.timeEnd( 'drawtext' );
|
|
250
256
|
// todo autogrow + multi-columns
|
|
251
|
-
return { height: (textarray.length + 0.3) * lineHeight };
|
|
257
|
+
return { width: maxw, height: (textarray.length + 0.3) * lineHeight };
|
|
252
258
|
}
|
|
253
259
|
exports.drawText = drawText;
|
|
254
260
|
// Calculate Height of the font
|
package/lib/panel.d.ts
CHANGED
|
@@ -34,6 +34,7 @@ export interface PanelProps<E extends ContainerEventMap = ContainerEventMap> ext
|
|
|
34
34
|
title: string;
|
|
35
35
|
gadgets?: Component[];
|
|
36
36
|
sens?: 'horizontal' | 'vertical';
|
|
37
|
+
bodyStyle?: any;
|
|
37
38
|
}
|
|
38
39
|
export declare class Panel<T extends PanelProps = PanelProps, E extends ContainerEventMap = ContainerEventMap> extends VLayout<T, E> {
|
|
39
40
|
private m_ui_title;
|
package/lib/panel.js
CHANGED
|
@@ -41,7 +41,7 @@ class Panel extends layout_1.VLayout {
|
|
|
41
41
|
const sens = props?.sens == 'horizontal' ? '@hlayout' : '@vlayout';
|
|
42
42
|
//todo: cannot be called twice do to content overload
|
|
43
43
|
this.m_ui_title = new label_1.Label({ cls: 'title', text: this.m_props.title });
|
|
44
|
-
this.m_ui_body = new component_1.Component({ cls: 'body ' + sens, content: this.m_props.content });
|
|
44
|
+
this.m_ui_body = new component_1.Component({ cls: 'body ' + sens, content: this.m_props.content, style: props.bodyStyle });
|
|
45
45
|
}
|
|
46
46
|
/** @ignore */
|
|
47
47
|
render() {
|
package/lib/x4.css
CHANGED
|
@@ -1433,6 +1433,10 @@ textarea::selection {
|
|
|
1433
1433
|
height: 16px;
|
|
1434
1434
|
border: 1px solid rgba(0, 0, 0, 0.4);
|
|
1435
1435
|
}
|
|
1436
|
+
.x-color-picker-editor .alpha {
|
|
1437
|
+
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==');
|
|
1438
|
+
padding: 4px;
|
|
1439
|
+
}
|
|
1436
1440
|
.x-color-picker .sel {
|
|
1437
1441
|
position: absolute;
|
|
1438
1442
|
left: 10px;
|
|
@@ -1504,7 +1508,7 @@ textarea::selection {
|
|
|
1504
1508
|
min-height: unset;
|
|
1505
1509
|
}
|
|
1506
1510
|
.x-color-picker .alpha {
|
|
1507
|
-
background-image: url('data:image/
|
|
1511
|
+
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==');
|
|
1508
1512
|
}
|
|
1509
1513
|
.x-color-picker .alpha .marker {
|
|
1510
1514
|
position: absolute;
|
package/package.json
CHANGED
package/src/alpha.jpg
ADDED
|
Binary file
|
package/src/colorpicker.ts
CHANGED
|
@@ -630,6 +630,7 @@ export interface ColorPickerEditorProps extends ColorPickerProps {
|
|
|
630
630
|
label?: string;
|
|
631
631
|
labelWidth?: number;
|
|
632
632
|
cust_colors?: Color[];
|
|
633
|
+
displayValue?: false,
|
|
633
634
|
|
|
634
635
|
change: EventCallback<EvChange>;
|
|
635
636
|
}
|
|
@@ -662,20 +663,32 @@ export class ColorPickerEditor extends HLayout<ColorPickerEditorProps, ColorPick
|
|
|
662
663
|
flex: props.labelWidth < 0 ? -props.labelWidth : undefined,
|
|
663
664
|
width: props.labelWidth >= 0 ? props.labelWidth : undefined,
|
|
664
665
|
}) : null,
|
|
665
|
-
new
|
|
666
|
-
cls: 'value',
|
|
666
|
+
new Component( {
|
|
667
667
|
flex: 1,
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
668
|
+
content: [
|
|
669
|
+
new Label({
|
|
670
|
+
cls: 'alpha @fit',
|
|
671
|
+
text: ''
|
|
672
|
+
}),
|
|
673
|
+
new Label({
|
|
674
|
+
cls: 'value @fit',
|
|
675
|
+
text: props.displayValue===false ? '' : color.toHex(),
|
|
676
|
+
style: {
|
|
677
|
+
backgroundColor: color.toString(),
|
|
678
|
+
color: tcolor
|
|
679
|
+
},
|
|
680
|
+
dom_events: {
|
|
681
|
+
click: () => this._showPicker()
|
|
682
|
+
}
|
|
683
|
+
})
|
|
684
|
+
],
|
|
685
|
+
} )
|
|
677
686
|
]);
|
|
678
687
|
|
|
688
|
+
if( props.displayValue===false ) {
|
|
689
|
+
this.setStyleValue( 'background-image', "url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIxMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS45LjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMDMtMjJUMTU6NTE6NDkrMDE6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Pn8+b7YAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRy0tCQRSHv7Qwyh5gRIsWEtZKwwyiNi2UXlAt1CCrjV5fgdrlXiOibdBWKIja9FrUX1DboHUQFEUQ7YLWRW0qbueqoESe4cz55jdzDjNnwBLOKFm93gvZXF4LTvid85EFp+0FK5204sURVXR1JjQepqZ93lNnxluPWav2uX+tOZ7QFahrFB5VVC0vPCk8vZZXTd4R7lDS0bjwmbBbkwsK35l6rMSvJqdK/G2yFg4GwNIu7ExVcayKlbSWFZaX48pmVpXyfcyX2BO5uZDEHvFudIJM4MfJFGMEGGKAEZmH8OCjX1bUyPcW82dZkVxFZpV1NJZJkSaPW9RVqZ6QmBQ9ISPDutn/v33Vk4O+UnW7HxqeDeO9F2zb8FMwjK8jw/g5BusTXOYq+SuHMPwheqGiuQ6gbRPOrypabBcutqDrUY1q0aJkFbckk/B2Ci0RcNxA02KpZ+V9Th4gvCFfdQ17+9An59uWfgF7Hmfv4QYbGAAAAAlwSFlzAAALEwAACxMBAJqcGAAAACdJREFUGJVjbGhoYEAC9fX1yFwmBryAptKM////R+Y3NjbSzW4C0gAo9QeQBmhTIwAAAABJRU5ErkJggg=='" );
|
|
690
|
+
}
|
|
691
|
+
|
|
679
692
|
this._setTabIndex(props.tabIndex);
|
|
680
693
|
}
|
|
681
694
|
|
package/src/panel.ts
CHANGED
|
@@ -41,6 +41,7 @@ export interface PanelProps<E extends ContainerEventMap = ContainerEventMap> ex
|
|
|
41
41
|
title: string;
|
|
42
42
|
gadgets?: Component[];
|
|
43
43
|
sens?: 'horizontal' | 'vertical'; // vertical by default
|
|
44
|
+
bodyStyle?: any;
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
export class Panel<T extends PanelProps = PanelProps, E extends ContainerEventMap = ContainerEventMap> extends VLayout<T,E> {
|
|
@@ -54,7 +55,7 @@ export class Panel<T extends PanelProps = PanelProps, E extends ContainerEventMa
|
|
|
54
55
|
|
|
55
56
|
//todo: cannot be called twice do to content overload
|
|
56
57
|
this.m_ui_title = new Label({cls: 'title', text: this.m_props.title});
|
|
57
|
-
this.m_ui_body = new Component( { cls: 'body '+sens, content: this.m_props.content } );
|
|
58
|
+
this.m_ui_body = new Component( { cls: 'body '+sens, content: this.m_props.content, style: props.bodyStyle } );
|
|
58
59
|
}
|
|
59
60
|
|
|
60
61
|
/** @ignore */
|
package/src/x4.less
CHANGED
|
@@ -1793,6 +1793,13 @@ textarea {
|
|
|
1793
1793
|
}
|
|
1794
1794
|
}
|
|
1795
1795
|
|
|
1796
|
+
.x-color-picker-editor {
|
|
1797
|
+
.alpha {
|
|
1798
|
+
background-image: url( 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==' );
|
|
1799
|
+
padding: 4px;
|
|
1800
|
+
}
|
|
1801
|
+
}
|
|
1802
|
+
|
|
1796
1803
|
.x-color-picker {
|
|
1797
1804
|
|
|
1798
1805
|
.sel {
|
|
@@ -1879,7 +1886,7 @@ textarea {
|
|
|
1879
1886
|
}
|
|
1880
1887
|
|
|
1881
1888
|
.alpha {
|
|
1882
|
-
background-image: url( 'data:image/
|
|
1889
|
+
background-image: url( 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QA6RXhpZgAATU0AKgAAAAgAA1EAAAQAAAABAAAAAFEBAAMAAAABAAEAAFEEAAEAAAAB/AAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9iK90orwugD//2Q==' );
|
|
1883
1890
|
|
|
1884
1891
|
.marker {
|
|
1885
1892
|
position: absolute;
|