mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/
mkdir apps/web/scripts
mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts
And a couple of gitignore tweaks
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
@@ -0,0 +1,29 @@
|
||||
/*
|
||||
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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
/* !important override compound icon button */
|
||||
padding: var(--cpd-space-1-5x) !important;
|
||||
box-sizing: border-box;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&[disabled] svg {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
/*
|
||||
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 OR LicenseRef-Element-Commercial
|
||||
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 {
|
||||
/* default, overridden in JS */
|
||||
--barHeight: 1;
|
||||
.mx_Waveform_bar {
|
||||
background-color: $quaternary-content;
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
/*
|
||||
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 OR LicenseRef-Element-Commercial
|
||||
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 {
|
||||
/* default, overridden in JS */
|
||||
--fillTo: 1;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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 */
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user