Skip to content

Commit bd5bff6

Browse files
MartinCupelaMartinCupela
committed
fix: add styles for live location sharing
1 parent 572f66e commit bd5bff6

16 files changed

+319
-64
lines changed

‎src/v2/styles/AttachmentList/AttachmentList-layout.scss‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,56 @@
325325
}
326326
}
327327

328+
.str-chat__message-attachment-geolocation {
329+
margin: var(--str-chat__attachment-margin);
330+
min-width: 200px;
331+
332+
.str-chat__message-attachment-geolocation__placeholder {
333+
position: relative;
334+
display: flex;
335+
justify-content: center;
336+
align-items: center;
337+
padding: var(--str-chat__spacing-2);
338+
339+
.str-chat__message-geolocation__icon {
340+
height: calc(var(--str-chat__spacing-px) *150);
341+
}
342+
343+
.str-chat__message-attachment-geolocation__placeholder-link {
344+
position: absolute;
345+
inset-inline-end: 0.75rem;
346+
inset-block: 0.75rem;
347+
height: calc(var(--str-chat__spacing-px) * 20);
348+
width: calc(var(--str-chat__spacing-px) * 20);
349+
}
350+
}
351+
352+
.str-chat__message-attachment-geolocation__status {
353+
display: flex;
354+
justify-content: center;
355+
padding: 0.5rem 2rem;
356+
357+
.str-chat__message-attachment-geolocation__status--active {
358+
display: flex;
359+
flex-direction: column;
360+
align-items: center;
361+
gap: 0.375rem;
362+
363+
.str-chat__message-attachment-geolocation__stop-sharing-button {
364+
color: var(--str-chat__danger-color);
365+
}
366+
367+
.str-chat__message-attachment-geolocation__status--active-status {
368+
color: var(--str-chat__info-color);
369+
}
370+
371+
.str-chat__message-attachment-geolocation__status--active-until {
372+
text-transform: lowercase;
373+
}
374+
}
375+
}
376+
}
377+
328378
.str-chat__message-attachment-audio-widget {
329379
.str-chat__message-attachment-audio-widget--play-controls {
330380
@include utils.flex-row-center();

‎src/v2/styles/AttachmentList/AttachmentList-theme.scss‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,35 @@
141141
/* Box shadow applied to file attachments */
142142
--str-chat__file-attachment-box-shadow: none;
143143

144+
/* The border radius used for the borders of file attachments */
145+
--str-chat__geolocation-attachment-border-radius: calc(
146+
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
147+
);
148+
149+
/* The text/icon color of geolocation attachments */
150+
--str-chat__geolocation-attachment-color: var(--str-chat__text-color);
151+
152+
/* The text/icon color of geolocation attachments for low emphasis texts (for example file size) */
153+
--str-chat__geolocation-attachment-secondary-color: var(--str-chat__text-low-emphasis-color);
154+
155+
/* The background color of geolocation attachments */
156+
--str-chat__geolocation-attachment-background-color: var(--str-chat__secondary-background-color);
157+
158+
/* Top border of geolocation attachments */
159+
--str-chat__geolocation-attachment-border-block-start: none;
160+
161+
/* Bottom border of geolocation attachments */
162+
--str-chat__geolocation-attachment-border-block-end: none;
163+
164+
/* Left (right in RTL layout) border of geolocation attachments */
165+
--str-chat__geolocation-attachment-border-inline-start: none;
166+
167+
/* Right (left in RTL layout) border of geolocation attachments */
168+
--str-chat__geolocation-attachment-border-inline-end: none;
169+
170+
/* Box shadow applied to geolocation attachments */
171+
--str-chat__geolocation-attachment-box-shadow: none;
172+
144173
/* Border radius applied audio widget */
145174
--str-chat__audio-attachment-widget-border-radius: calc(
146175
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
@@ -325,6 +354,33 @@
325354
@include utils.component-layer-overrides('file-attachment');
326355
}
327356

357+
.str-chat__message-attachment-geolocation {
358+
@include utils.component-layer-overrides('geolocation-attachment');
359+
overflow: hidden;
360+
361+
.str-chat__message-attachment-geolocation__placeholder {
362+
.str-chat__message-attachment-geolocation__placeholder-link {
363+
color: currentColor;
364+
}
365+
}
366+
367+
.str-chat__message-attachment-geolocation__status {
368+
background-color: var(--str-chat__tertiary-surface-color);
369+
370+
.str-chat__message-attachment-geolocation__status--active {
371+
.str-chat__message-attachment-geolocation__stop-sharing-button {
372+
@include utils.button-reset;
373+
font: var(--str-chat__subtitle-medium-text);
374+
cursor: pointer;
375+
}
376+
377+
.str-chat__message-attachment-geolocation__status--active-until {
378+
font: var(--str-chat__caption-text);
379+
}
380+
}
381+
}
382+
}
383+
328384
.str-chat__message-attachment-unsupported {
329385
.str-chat__message-attachment-unsupported__title {
330386
font: var(--str-chat__subtitle-medium-text);

‎src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
}
4848
}
4949

50+
.str-chat__location-preview,
5051
.str-chat__attachment-preview-unsupported,
5152
.str-chat__attachment-preview-voice-recording,
5253
.str-chat__attachment-preview-file {
@@ -70,12 +71,14 @@
7071
justify-content: center;
7172

7273
.str-chat__attachment-preview-title,
74+
.str-chat__attachment-preview-subtitle,
7375
.str-chat__attachment-preview-file-name {
7476
@include utils.ellipsis-text;
7577
max-width: 100%;
7678
}
7779
}
7880

81+
.str-chat__location-preview-image,
7982
.str-chat__attachment-preview-file-icon {
8083
--str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
8184
--str-chat-icon-width: auto;

‎src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
}
108108
}
109109

110+
.str-chat__location-preview,
110111
.str-chat__attachment-preview-unsupported,
111112
.str-chat__attachment-preview-voice-recording,
112113
.str-chat__attachment-preview-file {
@@ -117,6 +118,10 @@
117118
font: var(--str-chat__subtitle-medium-text);
118119
}
119120

121+
.str-chat__attachment-preview-subtitle {
122+
font: var(--str-chat__caption-text);
123+
}
124+
120125
.str-chat__attachment-preview-file-download {
121126
--str-chat-icon-color: var(--str-chat__attachment-preview-download-icon-color);
122127
text-decoration: none;
@@ -142,6 +147,12 @@
142147
}
143148
}
144149

150+
.str-chat__location-preview {
151+
.str-chat__location-preview-image {
152+
color: var(--str-chat__active-primary-color);
153+
}
154+
}
155+
145156
.str-chat__attachment-preview-delete {
146157
--str-chat-icon-color: var(--str-chat__attachment-preview-close-icon-color);
147158

‎src/v2/styles/Dialog/Dialog-layout.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
display: flex;
2626
justify-content: flex-end;
2727
gap: 1.25rem;
28-
padding: 2.25rem 1.25rem 0;
28+
padding: 2.25rem 1.25rem;
2929

3030
.str-chat__dialog__controls-button {
3131
@include utils.button-reset;

‎src/v2/styles/Form/Form-layout.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,44 @@
66
.str-chat__form-field-error {
77
margin-left: 0.5rem;
88
}
9+
}
10+
11+
.str-chat__form__switch-field {
12+
width: 100%;
13+
padding: 1rem;
14+
15+
input[type='checkbox'] {
16+
display: none;
17+
}
18+
19+
label {
20+
display: flex;
21+
align-items: center;
22+
justify-content: space-between;
23+
width: 100%;
24+
}
25+
26+
.str-chat__form__switch-field__switch {
27+
display: flex;
28+
align-items: center;
29+
width: calc(var(--str-chat__spacing-px) * 52);
30+
height: calc(var(--str-chat__spacing-px) * 32);
31+
padding: 0.25rem;
32+
33+
.str-chat__form__switch-field__switch-handle {
34+
height: 1.5rem;
35+
width: 1.5rem;
36+
}
37+
38+
&.str-chat__form__switch-field__switch--on {
39+
justify-content: flex-end;
40+
}
41+
}
42+
}
43+
44+
.str-chat__dropdown {
45+
.str-chat__dropdown__open-button {
46+
width: 100%;
47+
text-align: start;
48+
}
949
}

‎src/v2/styles/Form/Form-theme.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../utils';
2+
13
.str-chat {
24
// hide spin buttons form input of type number
35
/* Chrome, Safari, Edge, Opera */
@@ -18,3 +20,63 @@
1820
font-size: 0.75rem;
1921
color: var(--str-chat__danger-color);
2022
}
23+
24+
// fixme: duplicate mixin in poll theme
25+
@mixin field-background {
26+
background-color: var(--str-chat__tertiary-surface-color);
27+
border-radius: 0.75rem;
28+
}
29+
30+
31+
32+
.str-chat__form__switch-field {
33+
@include field-background;
34+
35+
&, label {
36+
cursor: pointer;
37+
}
38+
39+
label {
40+
display: flex;
41+
gap: 0.5rem;
42+
}
43+
44+
.str-chat__form__switch-field__switch {
45+
cursor: pointer;
46+
background-color: var(--str-chat__text-low-emphasis-color);
47+
border-radius: 100px;
48+
49+
.str-chat__form__switch-field__switch-handle {
50+
border-radius: var(--str-chat__border-radius-circle);
51+
background-color: var(--str-chat__disabled-color);
52+
}
53+
54+
&.str-chat__form__switch-field__switch--on {
55+
background-color: var(--str-chat__green600);
56+
57+
.str-chat__form__switch-field__switch-handle {
58+
background-color: var(--str-chat__background-color);
59+
border-radius: var(--str-chat__border-radius-circle);
60+
}
61+
}
62+
}
63+
}
64+
65+
.str-chat__form__switch-field--disabled {
66+
.str-chat__form__switch-field--disabled,
67+
.str-chat__form__switch-field--disabled .str-chat__form__switch-field__switch,
68+
label {
69+
cursor: not-allowed;
70+
}
71+
}
72+
73+
.str-chat__dropdown {
74+
.str-chat__dropdown__open-button {
75+
@include utils.button-reset;
76+
cursor: pointer;
77+
}
78+
79+
.str-chat__dropdown__items {
80+
background-color: var(--str-chat__background-color);
81+
}
82+
}

‎src/v2/styles/Location/Location-layout.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.str-chat__modal.str-chat__share-location-modal {
2+
.str-chat__modal__close-button {
3+
display: none;
4+
}
5+
6+
.str-chat__share-location-dialog {
7+
.str-chat__modal-header {
8+
padding-top: 0;
9+
}
10+
11+
.str-chat__dialog__body {
12+
display: flex;
13+
flex-direction: column;
14+
gap: 1rem;
15+
padding-block: 0;
16+
-webkit-touch-callout: none;
17+
-webkit-user-select: none;
18+
user-select: none;
19+
20+
.str-chat__live-location-activation {
21+
padding: 0.5rem;
22+
23+
.str-chat__form__switch-field {
24+
padding: 0.5rem;
25+
}
26+
27+
.str-chat__dropdown__open-button {
28+
padding: 0.5rem;
29+
}
30+
31+
.str-chat__dialog-contents {
32+
.str-chat__dropdown__items {
33+
display: flex;
34+
flex-direction: column;
35+
align-items: flex-start;
36+
padding-block: 0.25rem;
37+
38+
.str-chat__live-location-sharing-duration-option {
39+
padding: 0.25rem 0.5rem;
40+
width: 100%;
41+
text-align: start;
42+
}
43+
}
44+
}
45+
}
46+
}
47+
48+
.str-chat__dialog__controls {
49+
padding: 1.25rem 1rem 0;
50+
}
51+
}
52+
}

‎src/v2/styles/Location/Location-theme.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@use '../utils';
2+
3+
.str-chat__share-location-dialog {
4+
.str-chat__live-location-activation {
5+
border-radius: var(--str-chat__border-radius-sm);
6+
border: 1px solid var(--str-chat__secondary-overlay-color);;
7+
8+
.str-chat__form__switch-field {
9+
background-color: var(--str-chat__background-color);
10+
}
11+
12+
.str-chat__dropdown__open-button {
13+
border-radius: var(--str-chat__border-radius-xs);
14+
border: 1px solid var(--str-chat__secondary-overlay-color);
15+
background-color: var(--str-chat__tertiary-surface-color);
16+
}
17+
18+
.str-chat__dropdown__items {
19+
box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
20+
border-radius: var(--str-chat__border-radius-xs);
21+
22+
.str-chat__live-location-sharing-duration-option {
23+
@include utils.button-reset;
24+
cursor: pointer;
25+
26+
&:hover {
27+
background-color: var(--str-chat__message-options-hover-background-color);
28+
}
29+
}
30+
}
31+
}
32+
}

0 commit comments

Comments
 (0)