Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add voice recording attachment styles #224

Merged
merged 7 commits into from
Mar 7, 2024
Merged

feat: add voice recording attachment styles #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
277e563
feat: add AudioRecording attachment styles
MartinCupela Mar 24, 2023
970dd17
fix: increase max width for quoted message
MartinCupela Mar 24, 2023
8b38247
Merge branch 'main' into feat/add-audio-recording-attachment
MartinCupela Feb 29, 2024
a5e89af
refactor: rename audio-recording to voice-recording
MartinCupela Mar 5, 2024
5e79e61
Merge branch 'main' into feat/add-audio-recording-attachment
MartinCupela Mar 5, 2024
266e79d
fix: fix typo in CSS variable name
MartinCupela Mar 6, 2024
5c6cd4c
fix: move styles for audio progress track from React SDK
MartinCupela Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions src/v2/styles/AttachmentList/AttachmentList-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,6 +341,72 @@
}
}

.str-chat__message-attachment__voice-recording-widget {
display: grid;
grid-template-columns: 36px auto 55px;
align-items: center;
justify-content: center;
gap: calc(var(--str-chat__spacing-px) * 14);
padding: var(--str-chat__spacing-2);
margin: var(--str-chat__attachment-margin);

.str-chat__message-attachment__voice-recording-widget__metadata {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--str-chat__spacing-2);

.str-chat__message-attachment__voice-recording-widget__audio-state {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--str-chat__spacing-1_5);
height: 100%;
}
}

.str-chat__message-attachment__voice-recording-widget__right-section {
justify-self: center;
}

.str-chat__message-attachment__voice-recording-widget__timer {
min-width: calc(var(--str-chat__spacing-px) * 45);
width: calc(var(--str-chat__spacing-px) * 45);
}

.str-chat__wave-progress-bar__track {
position: relative;
flex: 1;
width: 120px;
height: calc(var(--str-chat__spacing-px) * 25);
display: flex;
align-items: center;
gap: var(--str-chat__spacing-px);

$min_amplitude_height: 2px;

.str-chat__wave-progress-bar__amplitude-bar {
width: 2px;
min-width: 2px;
height: calc(var(--str-chat__wave-progress-bar__amplitude-bar-height) + $min_amplitude_height); // variable set dynamically on element
}

.str-chat__wave-progress-bar__progress-indicator {
position: absolute;
left: 0;
height: calc(100% + $min_amplitude_height + 2px);
width: calc(var(--str-chat__spacing-px) * 6);
}
}
}

.str-chat__message_attachment__playback-rate-button {
@include utils.flex-row-center;
@include utils.button-reset;
padding: var(--str-chat__spacing-1_5) var(--str-chat__spacing-2_5);
}

.str-chat__message-attachment-card {
min-width: 0;
max-width: var(--str-chat__attachment-max-width);
Expand Down Expand Up @@ -419,6 +485,19 @@
}
}

.str-chat__message-attachment__voice-recording-widget {
display: flex;
justify-content: space-between;

.str-chat__wave-progress-bar__track {
display: none;
}

.str-chat__message-attachment-audio-widget--play-button {
display: none;
}
}

.str-chat__message-attachment-file--item-download {
display: none;
}
Expand Down
73 changes: 72 additions & 1 deletion src/v2/styles/AttachmentList/AttachmentList-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,35 @@
/* Box shadow applied to audio widget */
--str-chat__audio-attachment-widget-box-shadow: none;

/* Border radius applied to audio recording widget */
--str-chat__voice-recording-attachment-widget-border-radius: calc(
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
);

/* Text color used in audio recording widget */
--str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);

/* Border radius applied to audio recording widget */
--str-chat__voice-recording-attachment-widget-secondary-color: var(--str-chat__text-low-emphasis-color);

/* The text/icon color for low emphasis texts (for example file size) in audio recording widget */
--str-chat__voice-recording-attachment-widget-background-color: var(--str-chat__secondary-background-color);

/* Top border of audio recording widget */
--str-chat__voice-recording-attachment-widget-border-block-start: none;

/* Bottom border of audio recording widget */
--str-chat__voice-recording-attachment-widget-border-block-end: none;

/* Left (right in RTL layout) border of audio recording widget */
--str-chat__voice-recording-attachment-widget-border-inline-start: none;

/* Right (left in RTL layout) border of audio recording widget */
--str-chat__voice-recording-attachment-widget-border-inline-end: none;

/* Box shadow applied to audio recording widget */
--str-chat__voice-recording-attachment-widget-box-shadow: none;

/* Border radius applied to the play / pause button of audio widget */
--str-chat__audio-attachment-controls-button-border-radius: var(--str-chat__border-radius-circle);

Expand Down Expand Up @@ -315,7 +344,11 @@
}

.str-chat__message-attachment-audio-widget--progress-track {
background-color: var(--str-chat__disabled-color);
background: linear-gradient(
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@szuperaz I have not found use of str-chat__message-attachment-audio-widget--progress-track class in the Angular SDK, so should not impact it.

to right,
var(--str-chat__primary-color) var(--str-chat__message-attachment-audio-widget-progress),
var(--str-chat__disabled-color) var(--str-chat__message-attachment-audio-widget-progress)
);
border-radius: calc(var(--str-chat__spacing-px) * 5);

.str-chat__message-attachment-audio-widget--progress-indicator {
Expand All @@ -329,6 +362,44 @@
@include utils.circle-fab-overrides('audio-attachment-controls-button');
}

.str-chat__message-attachment__voice-recording-widget {
@include utils.component-layer-overrides('voice-recording-attachment-widget');

.str-chat__message-attachment__voice-recording-widget__title {
@include utils.ellipsis-text;
font: var(--str-chat__subtitle-medium-text);
}

.str-chat__message-attachment__voice-recording-widget__timer {
font: var(--str-chat__body-text);
color: var(--str-chat__text-low-emphasis-color);
white-space: nowrap;
}

.str-chat__wave-progress-bar__amplitude-bar {
background: var(--str-chat__text-low-emphasis-color);
border-radius: var(--str-chat__border-radius-circle);
}

.str-chat__wave-progress-bar__amplitude-bar--active {
background: var(--str-chat__primary-color);
}

.str-chat__wave-progress-bar__progress-indicator {
background-color: #fff;
border-radius: var(--str-chat__border-radius-circle);
border: 1px solid var(--str-chat__secondary-overlay-color);
cursor: grab;
}
}

.str-chat__message_attachment__playback-rate-button {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
border-radius: var(--str-chat__border-radius-circle);
background-color: #fff; // in design marked as static, excluded from theming
cursor: pointer;
}

.str-chat__message-attachment--card {
@include utils.component-layer-overrides('card-attachment');
font: var(--str-chat__body-text);
Expand Down
2 changes: 1 addition & 1 deletion src/v2/styles/Message/Message-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
--str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 300);

/* The maximum allowed width of quoted messages inside the message component */
--str-chat__quoted-message-max-width: calc(var(--str-chat__spacing-px) * 180);
--str-chat__quoted-message-max-width: calc(var(--str-chat__spacing-px) * 250);

/* The maximum allowed width of quoted messages inside the message input component */
--str-chat__quoted-message-inside-message-input-max-width: calc(
Expand Down