Skip to content

Commit b6cf6bc

Browse files
RaushenRaushen
committed
Popover appearance
1 parent 7bb7dc7 commit b6cf6bc

File tree

4 files changed

+74
-130
lines changed

4 files changed

+74
-130
lines changed

‎apps/demos/Demos/DataGrid/AIColumn/jQuery/index.js‎

Lines changed: 37 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,41 @@ $(() => {
4444
},
4545
});
4646

47+
const popoverContentTemplate = function (vehicle) {
48+
const {
49+
Source,
50+
LicenseName,
51+
Author,
52+
Edits,
53+
} = vehicle;
54+
const sourceLink = `https://${Source}`;
55+
return $('<div>').append(
56+
$('<p>')
57+
.append($('<b>').text('Image licensed under: '))
58+
.append($('<span>').text(LicenseName)),
59+
$('<p>')
60+
.append($('<b>').text('Author: '))
61+
.append($('<span>').text(Author)),
62+
$('<p>')
63+
.append($('<b>').text('Source link: '))
64+
.append(
65+
$('<a>', {
66+
href: sourceLink,
67+
target: '_blank',
68+
})
69+
.text(sourceLink),
70+
),
71+
$('<p>')
72+
.append($('<b>').text('Edits: '))
73+
.append($('<span>').text(Edits)),
74+
);
75+
};
76+
4777
const createTrademarkTemplate = (vehicle) => {
4878
const {
4979
ID,
5080
Name,
5181
TrademarkName,
52-
LicenseName,
53-
Author,
54-
Source,
55-
Edits,
5682
} = vehicle;
5783
const trademarkWrapper = $('<div>').addClass('trademark__wrapper');
5884
const imgWrapper = $('<div>').addClass('trademark__img-wrapper');
@@ -63,52 +89,19 @@ $(() => {
6389
});
6490

6591
const popoverId = `popover-${ID}`;
66-
const popoverWrapper = $('<div>');
67-
68-
const licenseTitle = $('<div>')
69-
.addClass('license-info__title')
70-
.text('License Information');
71-
72-
const licenseContent = $('<div>')
73-
.addClass('license-info__content');
74-
75-
const imageParagraph = $('<p>')
76-
.append($('<strong>').text('Image: '))
77-
.append(`${TrademarkName} ${Name}`);
78-
79-
const licenseParagraph = $('<p>')
80-
.append($('<strong>').text('Image licensed under: '))
81-
.append(LicenseName);
82-
83-
const authorParagraph = $('<p>')
84-
.append($('<strong>').text('Author: '))
85-
.append(Author);
86-
87-
const sourceLink = `https://${Source}`;
88-
const sourceParagraph = $('<p>')
89-
.append($('<strong>').text('Source link: '))
90-
.append(
91-
$('<a>', {
92-
href: sourceLink,
93-
target: '_blank',
94-
}).text(sourceLink),
95-
);
96-
97-
const editsParagraph = $('<p>')
98-
.append($('<strong>').text('Edits: '))
99-
.append(Edits);
100-
101-
licenseContent.append(imageParagraph, licenseParagraph, authorParagraph, sourceParagraph, editsParagraph);
102-
popoverWrapper.append(licenseTitle, licenseContent);
103-
10492
img.attr('data-popover-target', popoverId);
10593

10694
const popover = $('<div>').attr('id', popoverId).dxPopover({
10795
target: `[data-popover-target="${popoverId}"]`,
10896
showEvent: 'mouseenter',
109-
hideEvent: 'mouseleave',
97+
hideEvent: {
98+
name: 'mouseleave',
99+
delay: 1000,
100+
},
110101
position: 'top',
111-
contentTemplate: () => popoverWrapper,
102+
showTitle: true,
103+
title: 'License Information',
104+
contentTemplate: () => popoverContentTemplate(vehicle),
112105
});
113106

114107
imgWrapper.append(img, popover);

‎apps/demos/Demos/DataGrid/AIColumn/jQuery/styles.css‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -51,24 +51,3 @@ div.dx-datagrid .ai__cell {
5151
border-radius: 24px;
5252
background-color: var(--dx-color-separator);
5353
}
54-
55-
.license-info__title {
56-
font-size: 14px;
57-
font-weight: 600;
58-
margin-bottom: 8px;
59-
color: #333;
60-
border-bottom: 1px solid #E0E0E0;
61-
padding-bottom: 6px;
62-
}
63-
64-
.license-info__content p {
65-
margin: 4px 0;
66-
font-size: 12px;
67-
line-height: 1.4;
68-
color: #666;
69-
}
70-
71-
.license-info__content strong {
72-
color: #333;
73-
font-weight: 500;
74-
}

‎apps/demos/Demos/TreeList/AIColumn/jQuery/index.js‎

Lines changed: 37 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,41 @@ $(() => {
6666
},
6767
});
6868

69+
const popoverContentTemplate = function (vehicle) {
70+
const {
71+
Source,
72+
LicenseName,
73+
Author,
74+
Edits,
75+
} = vehicle;
76+
const sourceLink = `https://${Source}`;
77+
return $('<div>').append(
78+
$('<p>')
79+
.append($('<b>').text('Image licensed under: '))
80+
.append($('<span>').text(LicenseName)),
81+
$('<p>')
82+
.append($('<b>').text('Author: '))
83+
.append($('<span>').text(Author)),
84+
$('<p>')
85+
.append($('<b>').text('Source link: '))
86+
.append(
87+
$('<a>', {
88+
href: sourceLink,
89+
target: '_blank',
90+
})
91+
.text(sourceLink),
92+
),
93+
$('<p>')
94+
.append($('<b>').text('Edits: '))
95+
.append($('<span>').text(Edits)),
96+
);
97+
};
98+
6999
const createTrademarkTemplate = (vehicle) => {
70100
const {
71101
ID,
72102
Name,
73103
TrademarkName,
74-
LicenseName,
75-
Author,
76-
Source,
77-
Edits,
78104
Manufacturer,
79105
} = vehicle;
80106

@@ -95,52 +121,19 @@ $(() => {
95121
});
96122

97123
const popoverId = `popover-${ID}`;
98-
const popoverWrapper = $('<div>');
99-
100-
const licenseTitle = $('<div>')
101-
.addClass('license-info__title')
102-
.text('License Information');
103-
104-
const licenseContent = $('<div>')
105-
.addClass('license-info__content');
106-
107-
const imageParagraph = $('<p>')
108-
.append($('<strong>').text('Image: '))
109-
.append(`${TrademarkName} ${Name}`);
110-
111-
const licenseParagraph = $('<p>')
112-
.append($('<strong>').text('Image licensed under: '))
113-
.append(LicenseName);
114-
115-
const authorParagraph = $('<p>')
116-
.append($('<strong>').text('Author: '))
117-
.append(Author);
118-
119-
const sourceLink = `https://${Source}`;
120-
const sourceParagraph = $('<p>')
121-
.append($('<strong>').text('Source link: '))
122-
.append(
123-
$('<a>', {
124-
href: sourceLink,
125-
target: '_blank',
126-
}).text(sourceLink),
127-
);
128-
129-
const editsParagraph = $('<p>')
130-
.append($('<strong>').text('Edits: '))
131-
.append(Edits);
132-
133-
licenseContent.append(imageParagraph, licenseParagraph, authorParagraph, sourceParagraph, editsParagraph);
134-
popoverWrapper.append(licenseTitle, licenseContent);
135-
136124
img.attr('data-popover-target', popoverId);
137125

138126
const popover = $('<div>').attr('id', popoverId).dxPopover({
139127
target: `[data-popover-target="${popoverId}"]`,
140128
showEvent: 'mouseenter',
141-
hideEvent: 'mouseleave',
129+
hideEvent: {
130+
name: 'mouseleave',
131+
delay: 1000,
132+
},
142133
position: 'top',
143-
contentTemplate: () => popoverWrapper,
134+
showTitle: true,
135+
title: 'License Information',
136+
contentTemplate: () => popoverContentTemplate(vehicle),
144137
});
145138

146139
imgWrapper.append(img, popover);

‎apps/demos/Demos/TreeList/AIColumn/jQuery/styles.css‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -51,24 +51,3 @@ div.dx-datagrid .ai__cell {
5151
border-radius: 24px;
5252
background-color: var(--dx-color-separator);
5353
}
54-
55-
.license-info__title {
56-
font-size: 14px;
57-
font-weight: 600;
58-
margin-bottom: 8px;
59-
color: #333;
60-
border-bottom: 1px solid #E0E0E0;
61-
padding-bottom: 6px;
62-
}
63-
64-
.license-info__content p {
65-
margin: 4px 0;
66-
font-size: 12px;
67-
line-height: 1.4;
68-
color: #666;
69-
}
70-
71-
.license-info__content strong {
72-
color: #333;
73-
font-weight: 500;
74-
}

0 commit comments

Comments
 (0)