ehealthsolutions/healthchat-web
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/healthchat-web.git synced 2026-11-03 16:10:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Absorb the matrix-react-sdk repository (#28192)

Browse Source 
Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com>
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Kim Brose <kim.brose@nordeck.net>
Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com>
Co-authored-by: ElementRobot <releases@riot.im>
Co-authored-by: dbkr <dbkr@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
Co-authored-by: Michael Weimann <michaelw@matrix.org>
Co-authored-by: Timshel <Timshel@users.noreply.github.com>
Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com>
Co-authored-by: Will Hunt <will@half-shot.uk>
Co-authored-by: Hubert Chathi <hubert@uhoreg.ca>
Co-authored-by: Andrew Ferrazzutti <andrewf@element.io>
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: Tulir Asokan <tulir@maunium.net>
This commit is contained in:
Michael Telatynski
2024-10-16 13:31:55 +01:00
committed by GitHub
parent 2b99496025
commit c05c429803
3280 changed files with 586617 additions and 905 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/audio_messages/_AudioPlayer.pcss
+59
View File
@@ -0,0 +1,59 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_MediaBody.mx_AudioPlayer_container {
padding: 16px 12px 12px 12px;
.mx_AudioPlayer_primaryContainer {
display: flex;
.mx_PlayPauseButton {
margin-right: 8px;
}
.mx_AudioPlayer_mediaInfo {
flex: 1;
overflow: hidden; /* makes the ellipsis on the file name work */
& > * {
display: block;
}
.mx_AudioPlayer_mediaName {
color: $primary-content;
font-size: $font-15px;
line-height: $font-15px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-bottom: 4px; /* mimics the line-height differences in the Figma */
}
.mx_AudioPlayer_byline {
font-size: $font-12px;
line-height: $font-12px;
}
}
}
.mx_AudioPlayer_seek {
display: flex;
align-items: center;
.mx_SeekBar {
flex: 1;
}
.mx_Clock {
min-width: $font-42px; /* for flexbox */
padding-left: $spacing-4; /* isolate from seek bar */
text-align: justify;
white-space: nowrap;
}
}
}
res/css/views/audio_messages/_PlayPauseButton.pcss
+41
View File
@@ -0,0 +1,41 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_PlayPauseButton {
position: relative;
width: 32px;
height: 32px;
min-width: 32px; /* for when the button is used in a flexbox */
min-height: 32px; /* for when the button is used in a flexbox */
border-radius: 32px;
background-color: $system;
&::before {
content: "";
position: absolute; /* sizing varies by icon */
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
top: 6px; /* center */
left: 6px; /* center */
width: 20px;
height: 20px;
}
&.mx_PlayPauseButton_disabled::before {
opacity: 0.5;
}
&.mx_PlayPauseButton_play::before {
mask-image: url("@vector-im/compound-design-tokens/icons/play-solid.svg");
}
&.mx_PlayPauseButton_pause::before {
mask-image: url("@vector-im/compound-design-tokens/icons/pause-solid.svg");
}
}
res/css/views/audio_messages/_PlaybackContainer.pcss
+105
View File
@@ -0,0 +1,105 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021, 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
/* Dev note: there's no actual component called <PlaybackContainer />. These classes */
/* are shared amongst multiple voice message components. */
/* Container for live recording and playback controls */
.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
/* The waveform (right) has a 1px padding on it that we want to account for, otherwise */
/* inherit from mx_MediaBody */
padding-right: 11px;
/* Cheat at alignment a bit */
display: flex;
align-items: center;
contain: content;
.mx_Waveform,
.mx_RecordingPlayback_timelineLayoutMiddle {
min-width: 0; /* Prevent a blowout */
}
/* Waveforms are present in live recording only */
.mx_Waveform {
.mx_Waveform_bar {
background-color: $quaternary-content;
height: 100%;
/* Variable set by a JS component */
transform: scaleY(max(0.05, var(--barHeight)));
&.mx_Waveform_bar_100pct {
/* Small animation to remove the mechanical feel of progress */
transition: background-color 250ms ease;
background-color: $secondary-content;
}
}
}
.mx_Clock {
width: $font-42px; /* we're not using a monospace font, so fake it */
min-width: $font-42px; /* force sensible layouts in awkward flexboxes (file panel, for example) */
padding-right: 6px; /* with the fixed width this ends up as a visual 8px most of the time, as intended. */
padding-left: 8px; /* isolate from recording circle / play control */
}
.mx_RecordingPlayback_timelineLayoutMiddle {
margin-left: 8px;
margin-right: 6px;
position: relative;
display: inline-block;
flex: 1;
height: 30px; /* same height as mx_Waveform, needed for automatic vertical centering */
.mx_Waveform {
left: 0;
top: 0;
}
.mx_SeekBar {
position: absolute;
left: 0;
height: 30px;
top: -2px; /* visually vertically centered */
/* Hide the hairline progress bar since we're at 100% height. Need to have distinct rules */
/* because CSS is weird. */
background: none;
&::before {
background: none;
}
&::-moz-range-progress {
background: none;
}
/* Make the thumb easier to see. Like the SeekBar original styles, these need to be */
/* distinct. We make it transparent so it doesn't show up on the UI, but also larger */
/* so it's easier to grab by mouse users in some browsers. Most browsers let the user */
/* move and drag the thumb regardless of hitting the thumb, however. */
&::-webkit-slider-thumb {
width: 10px;
height: 10px;
background-color: transparent;
}
&::-moz-range-thumb {
width: 10px;
height: 10px;
background-color: transparent;
}
}
/* For timeline-rendered playback, the clock is on the other side of the waveform. */
& + .mx_Clock {
text-align: right;
/* Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle` */
padding: 0;
}
}
}
res/css/views/audio_messages/_SeekBar.pcss
+96
View File
@@ -0,0 +1,96 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
/* CSS inspiration from: */
/* * https://www.w3schools.com/howto/howto_js_rangeslider.asp */
/* * https://stackoverflow.com/a/28283806 */
/* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
.mx_SeekBar {
/* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
/* need to support IE. */
appearance: none; /* default style override */
width: 100%;
height: 1px;
background: $quaternary-content;
outline: none; /* remove blue selection border */
position: relative; /* for before+after pseudo elements later on */
cursor: pointer;
&::-webkit-slider-thumb {
appearance: none; /* default style override */
/* Dev note: This needs to be duplicated with the -moz-range-thumb selector */
/* because otherwise Edge (webkit) will fail to see the styles and just refuse */
/* to apply them. */
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $tertiary-content;
cursor: pointer;
}
&::-moz-range-thumb {
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $tertiary-content;
cursor: pointer;
/* Firefox adds a border on the thumb */
border: none;
}
/* This is for webkit support, but we can't limit the functionality of it to just webkit */
/* browsers. Firefox responds to webkit-prefixed values now, which means we can't use media */
/* or support queries to selectively apply the rule. An upside is that this CSS doesn't work */
/* in firefox, so it's just wasted CPU/GPU time. */
&::before {
/* ::before to ensure it ends up under the thumb */
content: "";
background-color: $tertiary-content;
/* Absolute positioning to ensure it overlaps with the existing bar */
position: absolute;
top: 0;
left: 0;
/* Sizing to match the bar */
width: 100%;
height: 1px;
/* And finally dynamic width without overly hurting the rendering engine. */
transform-origin: 0 100%;
transform: scaleX(var(--fillTo));
}
/* This is firefox's built-in support for the above, with 100% less hacks. */
&::-moz-range-progress {
background-color: $tertiary-content;
height: 1px;
}
&:disabled {
opacity: 0.5;
}
/* Increase clickable area for the slider (approximately same size as browser default) */
/* We do it this way to keep the same padding and margins of the element, avoiding margin math. */
/* Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/ */
&::after {
content: "";
position: absolute;
top: -6px;
bottom: -6px;
left: 0;
right: 0;
}
}
res/css/views/audio_messages/_Waveform.pcss
+32
View File
@@ -0,0 +1,32 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_Waveform {
position: relative;
height: 30px; /* tallest bar can only be 30px */
top: 1px; /* because of our border trick (see below), we're off by 1px of aligntment */
display: flex;
align-items: center; /* so the bars grow from the middle */
overflow: hidden; /* this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS. */
/* A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line */
/* with rounded caps. */
.mx_Waveform_bar {
width: 0; /* 0px width means we'll end up using the border as our width */
border: 1px solid transparent; /* transparent means we'll use the background colour */
border-radius: 2px; /* rounded end caps, based on the border */
min-height: 0; /* like the width, we'll rely on the border to give us height */
max-height: 100%; /* this makes the `height: 42%` work on the element */
margin-left: 1px; /* we want 2px between each bar, so 1px on either side for balance */
margin-right: 1px;
/* background color is handled by the parent components */
}
}