@capillarytech/creatives-library 9.0.12 → 9.0.13-alpha.1
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/package.json +1 -1
- package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberCarouselPreviewCards.js +132 -0
- package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js +108 -15
- package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +141 -1
- package/v2Components/CommonTestAndPreview/UnifiedPreview/_viberCarouselPreviewCards.scss +132 -0
- package/v2Components/CommonTestAndPreview/index.js +244 -26
- package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/ViberPreviewContent.test.js +364 -0
- package/v2Containers/Templates/_templates.scss +83 -0
- package/v2Containers/Templates/index.js +90 -10
- package/v2Containers/Viber/constants.js +21 -0
- package/v2Containers/Viber/index.js +719 -49
- package/v2Containers/Viber/index.scss +175 -0
- package/v2Containers/Viber/messages.js +121 -0
- package/v2Containers/Viber/tests/index.test.js +80 -0
package/package.json
CHANGED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import CapRow from '@capillarytech/cap-ui-library/CapRow';
|
|
4
|
+
import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
|
|
5
|
+
import CapImage from '@capillarytech/cap-ui-library/CapImage';
|
|
6
|
+
|
|
7
|
+
const getTrimmedText = (value = '') => (value ?? '').trim();
|
|
8
|
+
const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
|
|
9
|
+
|
|
10
|
+
const getCarouselButtonsWithTitles = (card) => (
|
|
11
|
+
(card?.buttons ?? []).filter((button) => hasTrimmedText(button?.title)).slice(0, 2)
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
const getCarouselButtonSlotCount = (cards = []) => {
|
|
15
|
+
const buttonCounts = cards.map((card) => getCarouselButtonsWithTitles(card).length);
|
|
16
|
+
return Math.min(2, Math.max(0, ...buttonCounts, 0));
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const ViberCarouselPreviewCards = ({ cards = [] }) => {
|
|
20
|
+
const previewCards = Array.isArray(cards) && cards.length ? cards : [{}];
|
|
21
|
+
const carouselButtonSlotCount = useMemo(
|
|
22
|
+
() => getCarouselButtonSlotCount(previewCards),
|
|
23
|
+
[previewCards],
|
|
24
|
+
);
|
|
25
|
+
const carouselTitleRefs = useRef([]);
|
|
26
|
+
const [carouselTitleLineCount, setCarouselTitleLineCount] = useState(1);
|
|
27
|
+
|
|
28
|
+
carouselTitleRefs.current = previewCards.map(() => null);
|
|
29
|
+
|
|
30
|
+
useLayoutEffect(() => {
|
|
31
|
+
let maxLines = 1;
|
|
32
|
+
carouselTitleRefs.current.forEach((node) => {
|
|
33
|
+
if (!node) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
const { lineHeight } = window.getComputedStyle(node);
|
|
37
|
+
const parsedLineHeight = parseFloat(lineHeight) || 18;
|
|
38
|
+
const lines = Math.min(2, Math.max(1, Math.round(node.scrollHeight / parsedLineHeight)));
|
|
39
|
+
if (lines > maxLines) {
|
|
40
|
+
maxLines = lines;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
setCarouselTitleLineCount((prev) => (prev === maxLines ? prev : maxLines));
|
|
44
|
+
}, [previewCards]);
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<CapRow type="flex" noWrap className="viber-carousel-preview-scroll">
|
|
48
|
+
{previewCards.map((card, index) => {
|
|
49
|
+
const cardButtons = getCarouselButtonsWithTitles(card);
|
|
50
|
+
const titleLineClass = `viber-carousel-preview-text-wrap--${carouselTitleLineCount}-line`;
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<CapRow type="flex-column" className="viber-carousel-preview-card" key={`viber-carousel-preview-card-${index}`}>
|
|
54
|
+
{hasTrimmedText(card?.mediaUrl) ? (
|
|
55
|
+
<CapImage
|
|
56
|
+
src={card?.mediaUrl}
|
|
57
|
+
className="viber-carousel-preview-image"
|
|
58
|
+
alt="Viber carousel card"
|
|
59
|
+
/>
|
|
60
|
+
) : (
|
|
61
|
+
<CapRow className="viber-carousel-preview-image-placeholder" />
|
|
62
|
+
)}
|
|
63
|
+
<CapRow className="viber-carousel-preview-card-body">
|
|
64
|
+
<CapRow className={`viber-carousel-preview-text-wrap ${titleLineClass}`}>
|
|
65
|
+
{hasTrimmedText(card?.text) ? (
|
|
66
|
+
<CapRow
|
|
67
|
+
className="viber-carousel-preview-text-inner"
|
|
68
|
+
ref={(node) => {
|
|
69
|
+
carouselTitleRefs.current[index] = node;
|
|
70
|
+
}}
|
|
71
|
+
>
|
|
72
|
+
<CapLabel type="label15" className="viber-carousel-preview-text">
|
|
73
|
+
{card?.text}
|
|
74
|
+
</CapLabel>
|
|
75
|
+
</CapRow>
|
|
76
|
+
) : (
|
|
77
|
+
<CapLabel type="label15" className="viber-carousel-preview-text-placeholder" />
|
|
78
|
+
)}
|
|
79
|
+
</CapRow>
|
|
80
|
+
{carouselButtonSlotCount > 0 && (
|
|
81
|
+
<CapRow className="viber-carousel-preview-buttons">
|
|
82
|
+
{Array.from({ length: carouselButtonSlotCount }).map((_, btnIndex) => {
|
|
83
|
+
const cardButton = cardButtons[btnIndex];
|
|
84
|
+
const trimmedCardButtonTitle = cardButton
|
|
85
|
+
? getTrimmedText(cardButton?.title)
|
|
86
|
+
: '';
|
|
87
|
+
|
|
88
|
+
if (!trimmedCardButtonTitle) {
|
|
89
|
+
return (
|
|
90
|
+
<CapRow
|
|
91
|
+
className="viber-carousel-preview-button viber-carousel-preview-button-placeholder"
|
|
92
|
+
key={`viber-carousel-preview-btn-placeholder-${index}-${btnIndex}`}
|
|
93
|
+
aria-hidden="true"
|
|
94
|
+
/>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<CapLabel
|
|
100
|
+
className={`viber-carousel-preview-button ${btnIndex === 1 ? 'viber-carousel-preview-button-secondary' : ''}`}
|
|
101
|
+
key={`viber-carousel-preview-btn-${index}-${btnIndex}-${trimmedCardButtonTitle}`}
|
|
102
|
+
>
|
|
103
|
+
{trimmedCardButtonTitle}
|
|
104
|
+
</CapLabel>
|
|
105
|
+
);
|
|
106
|
+
})}
|
|
107
|
+
</CapRow>
|
|
108
|
+
)}
|
|
109
|
+
</CapRow>
|
|
110
|
+
</CapRow>
|
|
111
|
+
);
|
|
112
|
+
})}
|
|
113
|
+
</CapRow>
|
|
114
|
+
);
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
ViberCarouselPreviewCards.propTypes = {
|
|
118
|
+
cards: PropTypes.arrayOf(PropTypes.shape({
|
|
119
|
+
text: PropTypes.string,
|
|
120
|
+
mediaUrl: PropTypes.string,
|
|
121
|
+
buttons: PropTypes.arrayOf(PropTypes.shape({
|
|
122
|
+
title: PropTypes.string,
|
|
123
|
+
action: PropTypes.string,
|
|
124
|
+
})),
|
|
125
|
+
})),
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
ViberCarouselPreviewCards.defaultProps = {
|
|
129
|
+
cards: [],
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
export default ViberCarouselPreviewCards;
|
|
@@ -14,14 +14,25 @@ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
|
|
|
14
14
|
import CapImage from '@capillarytech/cap-ui-library/CapImage';
|
|
15
15
|
import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
|
|
16
16
|
import CapRow from '@capillarytech/cap-ui-library/CapRow';
|
|
17
|
-
import {
|
|
17
|
+
import {
|
|
18
|
+
ANDROID,
|
|
19
|
+
IOS,
|
|
20
|
+
ANDROID_DEVICE_NAME,
|
|
21
|
+
IOS_DEVICE_NAME,
|
|
22
|
+
VIBER_ACCOUNT_NAME,
|
|
23
|
+
MEDIA_TYPE_CAROUSEL,
|
|
24
|
+
} from '../constants';
|
|
18
25
|
import messages from '../messages';
|
|
19
26
|
import videoPlay from '../../../assets/videoPlay.svg';
|
|
27
|
+
import ViberCarouselPreviewCards from './ViberCarouselPreviewCards';
|
|
20
28
|
|
|
21
29
|
// Import device mockup images (same as SMS)
|
|
22
30
|
const smsMobileAndroid = require('../../../assets/Android.png');
|
|
23
31
|
const smsMobileIos = require('../../../assets/iOS.png');
|
|
24
32
|
|
|
33
|
+
const getTrimmedText = (value = '') => (value ?? '').trim();
|
|
34
|
+
const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
|
|
35
|
+
|
|
25
36
|
const ViberPreviewContent = ({
|
|
26
37
|
content,
|
|
27
38
|
device,
|
|
@@ -43,7 +54,35 @@ const ViberPreviewContent = ({
|
|
|
43
54
|
imageURL = '',
|
|
44
55
|
videoParams = {},
|
|
45
56
|
buttonText = '',
|
|
57
|
+
type = '',
|
|
58
|
+
cards = [],
|
|
59
|
+
showCarouselEditorPreview = false,
|
|
46
60
|
} = viberContent;
|
|
61
|
+
const hasCarouselContent = type === MEDIA_TYPE_CAROUSEL;
|
|
62
|
+
|
|
63
|
+
const cardHasMeaningfulContent = (card) => {
|
|
64
|
+
if (!card || typeof card !== 'object') return false;
|
|
65
|
+
return (
|
|
66
|
+
hasTrimmedText(card?.text) ||
|
|
67
|
+
hasTrimmedText(card?.mediaUrl) ||
|
|
68
|
+
(card.buttons ?? []).some(button => hasTrimmedText(button?.title))
|
|
69
|
+
);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
const hasMeaningfulCarousel =
|
|
73
|
+
hasCarouselContent &&
|
|
74
|
+
Array.isArray(cards) &&
|
|
75
|
+
cards.length > 0 &&
|
|
76
|
+
cards.some(cardHasMeaningfulContent);
|
|
77
|
+
|
|
78
|
+
const showCarouselInPreview =
|
|
79
|
+
hasCarouselContent && (Boolean(showCarouselEditorPreview) || hasMeaningfulCarousel);
|
|
80
|
+
|
|
81
|
+
const previewCarouselCards =
|
|
82
|
+
hasCarouselContent && Array.isArray(cards) && cards.length ? cards : hasCarouselContent ? [{}] : [];
|
|
83
|
+
|
|
84
|
+
const trimmedMessageContent = getTrimmedText(messageContent);
|
|
85
|
+
const trimmedButtonText = getTrimmedText(buttonText);
|
|
47
86
|
|
|
48
87
|
// Get account name (first letter for icon)
|
|
49
88
|
const accountIcon = (accountName || brandName || 'V')[0]?.toUpperCase();
|
|
@@ -99,8 +138,15 @@ const ViberPreviewContent = ({
|
|
|
99
138
|
);
|
|
100
139
|
}
|
|
101
140
|
|
|
102
|
-
// Check if there's any content to display
|
|
103
|
-
const hasContent =
|
|
141
|
+
// Check if there's any content to display (whitespace-only strings do not count)
|
|
142
|
+
const hasContent = Boolean(
|
|
143
|
+
trimmedMessageContent
|
|
144
|
+
|| hasTrimmedText(imageURL)
|
|
145
|
+
|| videoParams?.viberVideoSrc
|
|
146
|
+
|| trimmedButtonText
|
|
147
|
+
|| hasMeaningfulCarousel
|
|
148
|
+
|| (hasCarouselContent && showCarouselEditorPreview)
|
|
149
|
+
);
|
|
104
150
|
|
|
105
151
|
// Render normal Viber preview
|
|
106
152
|
return (
|
|
@@ -125,23 +171,34 @@ const ViberPreviewContent = ({
|
|
|
125
171
|
|
|
126
172
|
{/* Viber Message Container */}
|
|
127
173
|
{hasContent && (
|
|
128
|
-
<CapRow className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
|
|
174
|
+
<CapRow className={`viber-message-container ${showCarouselInPreview ? 'viber-message-container-carousel' : ''} ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
|
|
129
175
|
{/* Brand Name Display (from TemplatePreview line 1136) */}
|
|
130
|
-
<CapRow
|
|
176
|
+
<CapRow
|
|
177
|
+
type="flex"
|
|
178
|
+
align="middle"
|
|
179
|
+
fullWidth={showCarouselInPreview}
|
|
180
|
+
className={`msg-container viber-preview ${showCarouselInPreview ? 'viber-preview-carousel' : ''}`}
|
|
181
|
+
>
|
|
131
182
|
{/* Account Icon (from TemplatePreview line 1146-1160) */}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
183
|
+
{!hasCarouselContent && (
|
|
184
|
+
<CapRow type="flex" className="viber-account-icon">
|
|
185
|
+
{accountIcon}
|
|
186
|
+
</CapRow>
|
|
187
|
+
)}
|
|
135
188
|
|
|
136
189
|
{/* Message Bubble (from TemplatePreview line 1161-1223) */}
|
|
137
|
-
<CapRow
|
|
190
|
+
<CapRow
|
|
191
|
+
useLegacy
|
|
192
|
+
fullWidth={showCarouselInPreview}
|
|
193
|
+
className={`message-pop align-left viber-message-pop ${showCarouselInPreview ? 'viber-message-pop-carousel' : ''}`}
|
|
194
|
+
>
|
|
138
195
|
{/* Text Viber preview */}
|
|
139
|
-
{
|
|
196
|
+
{trimmedMessageContent && !hasCarouselContent && (
|
|
140
197
|
<CapLabel type="label15" className="viber-message-text">{messageContent}</CapLabel>
|
|
141
198
|
)}
|
|
142
199
|
|
|
143
200
|
{/* Image Viber preview */}
|
|
144
|
-
{imageURL && (
|
|
201
|
+
{hasTrimmedText(imageURL) && (
|
|
145
202
|
<CapImage
|
|
146
203
|
src={imageURL}
|
|
147
204
|
className="viber-image-preview"
|
|
@@ -171,16 +228,42 @@ const ViberPreviewContent = ({
|
|
|
171
228
|
)}
|
|
172
229
|
|
|
173
230
|
{/* Button Viber preview */}
|
|
174
|
-
{
|
|
231
|
+
{trimmedButtonText && (
|
|
175
232
|
<CapLabel className="viber-button-base">
|
|
176
233
|
<p className="viber-button-card-text">
|
|
177
234
|
{buttonText}
|
|
178
235
|
</p>
|
|
179
236
|
</CapLabel>
|
|
180
237
|
)}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
238
|
+
{/* Carousel Viber preview */}
|
|
239
|
+
{showCarouselInPreview && (
|
|
240
|
+
<CapRow type="flex-column" fullWidth className="viber-carousel-preview">
|
|
241
|
+
<CapRow type="flex-column" className="viber-carousel-message-pop">
|
|
242
|
+
{trimmedMessageContent ? (
|
|
243
|
+
<CapLabel
|
|
244
|
+
type="label15"
|
|
245
|
+
className="message-pop-item align-left viber-message-text viber-carousel-message-box-text"
|
|
246
|
+
>
|
|
247
|
+
{messageContent}
|
|
248
|
+
</CapLabel>
|
|
249
|
+
) : (
|
|
250
|
+
<CapRow className="viber-carousel-message-box-placeholder" />
|
|
251
|
+
)}
|
|
252
|
+
<CapLabel type="label1" className="viber-carousel-message-timestamp">
|
|
253
|
+
{timestamp}
|
|
254
|
+
</CapLabel>
|
|
255
|
+
</CapRow>
|
|
256
|
+
|
|
257
|
+
<CapRow type="flex-column" fullWidth className="viber-carousel-cards-pop">
|
|
258
|
+
<ViberCarouselPreviewCards cards={previewCarouselCards} />
|
|
259
|
+
</CapRow>
|
|
260
|
+
</CapRow>
|
|
261
|
+
)}
|
|
262
|
+
{!showCarouselInPreview && (
|
|
263
|
+
<CapLabel type="label1" className="viber-timestamp">
|
|
264
|
+
{timestamp}
|
|
265
|
+
</CapLabel>
|
|
266
|
+
)}
|
|
184
267
|
<CapRow useLegacy className="empty-placeholder" />
|
|
185
268
|
</CapRow>
|
|
186
269
|
|
|
@@ -214,6 +297,16 @@ ViberPreviewContent.propTypes = {
|
|
|
214
297
|
viberVideoPreviewImg: PropTypes.string,
|
|
215
298
|
}),
|
|
216
299
|
buttonText: PropTypes.string,
|
|
300
|
+
type: PropTypes.string,
|
|
301
|
+
cards: PropTypes.arrayOf(PropTypes.shape({
|
|
302
|
+
text: PropTypes.string,
|
|
303
|
+
mediaUrl: PropTypes.string,
|
|
304
|
+
buttons: PropTypes.arrayOf(PropTypes.shape({
|
|
305
|
+
title: PropTypes.string,
|
|
306
|
+
action: PropTypes.string,
|
|
307
|
+
})),
|
|
308
|
+
})),
|
|
309
|
+
showCarouselEditorPreview: PropTypes.bool,
|
|
217
310
|
}),
|
|
218
311
|
}),
|
|
219
312
|
device: PropTypes.oneOf([ANDROID, IOS]),
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@import '~@capillarytech/cap-ui-library/styles/_variables';
|
|
2
|
+
@import './_viberCarouselPreviewCards.scss';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* UnifiedPreview Styles
|
|
@@ -574,6 +575,8 @@
|
|
|
574
575
|
height: calc(100% - 4.5rem);
|
|
575
576
|
display: flex;
|
|
576
577
|
flex-direction: column;
|
|
578
|
+
overflow: hidden;
|
|
579
|
+
box-sizing: border-box;
|
|
577
580
|
|
|
578
581
|
&.sms-content-overlay-android {
|
|
579
582
|
height: calc(100% - 3.8rem);
|
|
@@ -752,9 +755,13 @@
|
|
|
752
755
|
|
|
753
756
|
.viber-content-overlay {
|
|
754
757
|
top: 3.2rem;
|
|
755
|
-
|
|
758
|
+
overflow: hidden;
|
|
759
|
+
|
|
760
|
+
.sms-navigation-bar.viber-navigation-bar {
|
|
761
|
+
width: calc(100% - #{$CAP_SPACE_06} - #{$CAP_SPACE_08});
|
|
756
762
|
margin-left: $CAP_SPACE_06;
|
|
757
763
|
margin-right: $CAP_SPACE_08;
|
|
764
|
+
box-sizing: border-box;
|
|
758
765
|
}
|
|
759
766
|
}
|
|
760
767
|
|
|
@@ -2110,12 +2117,21 @@
|
|
|
2110
2117
|
// Body content follows TemplatePreview Viber structure
|
|
2111
2118
|
.sms-content-overlay {
|
|
2112
2119
|
&.viber-preview {
|
|
2120
|
+
overflow: hidden;
|
|
2121
|
+
|
|
2113
2122
|
// Viber message container
|
|
2114
2123
|
.viber-message-container {
|
|
2115
2124
|
position: relative;
|
|
2116
2125
|
flex: 1;
|
|
2117
2126
|
display: flex;
|
|
2118
2127
|
flex-direction: column;
|
|
2128
|
+
overflow-x: hidden;
|
|
2129
|
+
overflow-y: auto;
|
|
2130
|
+
-webkit-overflow-scrolling: touch;
|
|
2131
|
+
min-width: 0;
|
|
2132
|
+
max-width: 100%;
|
|
2133
|
+
box-sizing: border-box;
|
|
2134
|
+
width: calc(100% - #{$CAP_SPACE_06} - #{$CAP_SPACE_08});
|
|
2119
2135
|
padding: 0 $CAP_SPACE_16;
|
|
2120
2136
|
background-color: #ffffff;
|
|
2121
2137
|
margin-left: $CAP_SPACE_06;
|
|
@@ -2123,6 +2139,20 @@
|
|
|
2123
2139
|
border-bottom-left-radius: 2.6rem;
|
|
2124
2140
|
border-bottom-right-radius: 2.6rem;
|
|
2125
2141
|
|
|
2142
|
+
&.viber-message-container-carousel {
|
|
2143
|
+
padding-left: $CAP_SPACE_08;
|
|
2144
|
+
padding-right: $CAP_SPACE_08;
|
|
2145
|
+
width: calc(100% - #{$CAP_SPACE_04} - #{$CAP_SPACE_04});
|
|
2146
|
+
margin-left: $CAP_SPACE_04;
|
|
2147
|
+
margin-right: $CAP_SPACE_04;
|
|
2148
|
+
|
|
2149
|
+
> .ant-row,
|
|
2150
|
+
.ant-row.msg-container.viber-preview-carousel {
|
|
2151
|
+
margin-left: 0;
|
|
2152
|
+
margin-right: 0;
|
|
2153
|
+
}
|
|
2154
|
+
}
|
|
2155
|
+
|
|
2126
2156
|
// Brand name display (from TemplatePreview line 1136)
|
|
2127
2157
|
.viber-brand-name {
|
|
2128
2158
|
position: absolute;
|
|
@@ -2144,6 +2174,16 @@
|
|
|
2144
2174
|
flex-direction: row;
|
|
2145
2175
|
align-items: start;
|
|
2146
2176
|
|
|
2177
|
+
&.viber-preview-carousel {
|
|
2178
|
+
width: 100%;
|
|
2179
|
+
max-width: 100%;
|
|
2180
|
+
margin-left: 0;
|
|
2181
|
+
margin-right: 0;
|
|
2182
|
+
max-height: 100%;
|
|
2183
|
+
min-width: 0;
|
|
2184
|
+
box-sizing: border-box;
|
|
2185
|
+
}
|
|
2186
|
+
|
|
2147
2187
|
// Account icon (from TemplatePreview line 1146-1160)
|
|
2148
2188
|
.viber-account-icon {
|
|
2149
2189
|
width: $CAP_SPACE_20;
|
|
@@ -2168,6 +2208,22 @@
|
|
|
2168
2208
|
border-radius: $CAP_SPACE_04;
|
|
2169
2209
|
padding: $CAP_SPACE_04;
|
|
2170
2210
|
|
|
2211
|
+
&.viber-message-pop-carousel {
|
|
2212
|
+
width: 100%;
|
|
2213
|
+
max-width: 100%;
|
|
2214
|
+
min-width: 0;
|
|
2215
|
+
left: 0;
|
|
2216
|
+
margin-top: 0;
|
|
2217
|
+
padding: 0;
|
|
2218
|
+
background: transparent;
|
|
2219
|
+
display: flex;
|
|
2220
|
+
flex-direction: column;
|
|
2221
|
+
align-items: flex-start;
|
|
2222
|
+
gap: $CAP_SPACE_06;
|
|
2223
|
+
overflow: hidden;
|
|
2224
|
+
box-sizing: border-box;
|
|
2225
|
+
}
|
|
2226
|
+
|
|
2171
2227
|
// Text Viber preview (from TemplatePreview line 1166-1174)
|
|
2172
2228
|
.viber-message-text {
|
|
2173
2229
|
margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
|
|
@@ -2238,6 +2294,85 @@
|
|
|
2238
2294
|
}
|
|
2239
2295
|
}
|
|
2240
2296
|
|
|
2297
|
+
.viber-carousel-preview {
|
|
2298
|
+
width: 100%;
|
|
2299
|
+
max-width: 100%;
|
|
2300
|
+
min-width: 0;
|
|
2301
|
+
display: flex;
|
|
2302
|
+
flex-direction: column;
|
|
2303
|
+
align-items: flex-start;
|
|
2304
|
+
gap: $CAP_SPACE_06;
|
|
2305
|
+
overflow: hidden;
|
|
2306
|
+
box-sizing: border-box;
|
|
2307
|
+
}
|
|
2308
|
+
|
|
2309
|
+
.viber-carousel-message-pop,
|
|
2310
|
+
.viber-carousel-cards-pop {
|
|
2311
|
+
width: 100%;
|
|
2312
|
+
max-width: 100%;
|
|
2313
|
+
min-width: 0;
|
|
2314
|
+
background: $CAP_G08;
|
|
2315
|
+
border-radius: $CAP_SPACE_06;
|
|
2316
|
+
padding: $CAP_SPACE_08;
|
|
2317
|
+
box-sizing: border-box;
|
|
2318
|
+
}
|
|
2319
|
+
|
|
2320
|
+
.viber-carousel-message-pop {
|
|
2321
|
+
margin-top: 0;
|
|
2322
|
+
width: 85%;
|
|
2323
|
+
border-radius: 0 $CAP_SPACE_06 $CAP_SPACE_06 $CAP_SPACE_06;
|
|
2324
|
+
display: flex;
|
|
2325
|
+
flex-direction: column;
|
|
2326
|
+
overflow: hidden;
|
|
2327
|
+
}
|
|
2328
|
+
|
|
2329
|
+
.viber-carousel-cards-pop {
|
|
2330
|
+
margin-top: 0;
|
|
2331
|
+
width: 100%;
|
|
2332
|
+
background: transparent;
|
|
2333
|
+
border: none;
|
|
2334
|
+
border-radius: 0;
|
|
2335
|
+
padding: 0;
|
|
2336
|
+
overflow: hidden;
|
|
2337
|
+
}
|
|
2338
|
+
|
|
2339
|
+
.viber-carousel-message-box {
|
|
2340
|
+
width: 100%;
|
|
2341
|
+
min-height: 2.25rem;
|
|
2342
|
+
height: auto;
|
|
2343
|
+
border-radius: $CAP_SPACE_04;
|
|
2344
|
+
background: transparent;
|
|
2345
|
+
padding: 0 $CAP_SPACE_08;
|
|
2346
|
+
display: flex;
|
|
2347
|
+
align-items: center;
|
|
2348
|
+
}
|
|
2349
|
+
|
|
2350
|
+
.viber-carousel-message-box-text {
|
|
2351
|
+
color: $CAP_G01;
|
|
2352
|
+
margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
|
|
2353
|
+
white-space: normal;
|
|
2354
|
+
word-break: break-word;
|
|
2355
|
+
overflow-wrap: break-word;
|
|
2356
|
+
overflow: hidden;
|
|
2357
|
+
max-width: 100%;
|
|
2358
|
+
box-sizing: border-box;
|
|
2359
|
+
}
|
|
2360
|
+
|
|
2361
|
+
.viber-carousel-message-box-placeholder {
|
|
2362
|
+
width: 100%;
|
|
2363
|
+
height: 0.875rem;
|
|
2364
|
+
border-radius: $CAP_SPACE_04;
|
|
2365
|
+
background: $CAP_G07;
|
|
2366
|
+
}
|
|
2367
|
+
|
|
2368
|
+
.viber-carousel-message-timestamp,
|
|
2369
|
+
.viber-carousel-cards-timestamp {
|
|
2370
|
+
display: block;
|
|
2371
|
+
text-align: right;
|
|
2372
|
+
margin-top: $CAP_SPACE_06;
|
|
2373
|
+
color: $CAP_G04;
|
|
2374
|
+
}
|
|
2375
|
+
|
|
2241
2376
|
.empty-placeholder {
|
|
2242
2377
|
height: $CAP_SPACE_08;
|
|
2243
2378
|
}
|
|
@@ -2251,6 +2386,11 @@
|
|
|
2251
2386
|
.viber-message-container-ios {
|
|
2252
2387
|
margin-left: 1rem;
|
|
2253
2388
|
margin-right: 1rem;
|
|
2389
|
+
|
|
2390
|
+
&.viber-message-container-carousel {
|
|
2391
|
+
margin-left: $CAP_SPACE_04;
|
|
2392
|
+
margin-right: $CAP_SPACE_04;
|
|
2393
|
+
}
|
|
2254
2394
|
}
|
|
2255
2395
|
}
|
|
2256
2396
|
}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
// Shared Viber carousel card row (Test & Preview device preview)
|
|
2
|
+
.viber-carousel-preview-scroll {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: row;
|
|
5
|
+
flex-wrap: nowrap;
|
|
6
|
+
align-items: stretch;
|
|
7
|
+
width: 100%;
|
|
8
|
+
max-width: 100%;
|
|
9
|
+
min-width: 0;
|
|
10
|
+
overflow-x: auto;
|
|
11
|
+
overflow-y: hidden;
|
|
12
|
+
padding-right: $CAP_SPACE_12;
|
|
13
|
+
scrollbar-width: none;
|
|
14
|
+
-webkit-overflow-scrolling: touch;
|
|
15
|
+
|
|
16
|
+
&::-webkit-scrollbar {
|
|
17
|
+
display: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.viber-carousel-preview-card {
|
|
21
|
+
flex: 0 0 68%;
|
|
22
|
+
min-width: 80%;
|
|
23
|
+
margin-right: $CAP_SPACE_08;
|
|
24
|
+
background: $CAP_G09;
|
|
25
|
+
border: 1px solid $CAP_G07;
|
|
26
|
+
border-radius: $CAP_SPACE_12;
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
align-self: stretch;
|
|
31
|
+
|
|
32
|
+
&:last-child {
|
|
33
|
+
margin-right: 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.viber-carousel-preview-card-body {
|
|
37
|
+
flex: 1;
|
|
38
|
+
padding: $CAP_SPACE_08;
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
min-height: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.viber-carousel-preview-text-wrap {
|
|
45
|
+
flex-shrink: 0;
|
|
46
|
+
width: 100%;
|
|
47
|
+
|
|
48
|
+
&--1-line {
|
|
49
|
+
min-height: 1.3em;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&--2-line {
|
|
53
|
+
min-height: 2.6em;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.viber-carousel-preview-text-inner {
|
|
58
|
+
width: 100%;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.viber-carousel-preview-buttons {
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
gap: $CAP_SPACE_06;
|
|
65
|
+
margin-top: auto;
|
|
66
|
+
width: 100%;
|
|
67
|
+
flex-shrink: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.viber-carousel-preview-image {
|
|
71
|
+
width: 100%;
|
|
72
|
+
height: 10rem;
|
|
73
|
+
object-fit: cover;
|
|
74
|
+
border-radius: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.viber-carousel-preview-image-placeholder {
|
|
78
|
+
width: 100%;
|
|
79
|
+
height: 10rem;
|
|
80
|
+
border-radius: 0;
|
|
81
|
+
background: $CAP_G07;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.viber-carousel-preview-text {
|
|
85
|
+
color: $CAP_G01;
|
|
86
|
+
line-height: 1.3;
|
|
87
|
+
white-space: normal;
|
|
88
|
+
word-break: break-word;
|
|
89
|
+
display: block;
|
|
90
|
+
width: 100%;
|
|
91
|
+
margin: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.viber-carousel-preview-text-placeholder {
|
|
95
|
+
width: 100%;
|
|
96
|
+
height: 0.875rem;
|
|
97
|
+
border-radius: $CAP_SPACE_04;
|
|
98
|
+
background: $CAP_G07;
|
|
99
|
+
min-height: 0.875rem;
|
|
100
|
+
display: block;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.viber-carousel-preview-button {
|
|
104
|
+
color: $CAP_WHITE;
|
|
105
|
+
background: $CAP_PURPLE01;
|
|
106
|
+
border-radius: $CAP_SPACE_12;
|
|
107
|
+
text-align: center;
|
|
108
|
+
width: 100%;
|
|
109
|
+
display: flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
justify-content: center;
|
|
112
|
+
min-height: 1.5rem;
|
|
113
|
+
padding: $CAP_SPACE_06 $CAP_SPACE_08;
|
|
114
|
+
white-space: normal;
|
|
115
|
+
box-sizing: border-box;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.viber-carousel-preview-button-placeholder {
|
|
119
|
+
visibility: hidden;
|
|
120
|
+
pointer-events: none;
|
|
121
|
+
padding: 0;
|
|
122
|
+
background: transparent;
|
|
123
|
+
border: none;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.viber-carousel-preview-button-secondary {
|
|
127
|
+
color: $CAP_PURPLE01;
|
|
128
|
+
background: transparent;
|
|
129
|
+
border: none;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|