Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-09-12 17:55:52 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Composer redesign: Tile message background image (#40234)

Browse Source
This commit is contained in:
Echo
2026-08-21 13:43:15 +00:00
committed by GitHub
parent ea123f3e9b
commit c6a148c347
3 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/images/composer_message.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 417 B

13
app/javascript/mastodon/features/compose/redesign/index.tsx
View File

@@ -8,7 +8,6 @@ import classNames from 'classnames';
import { LockSimpleOpenIcon } from '@phosphor-icons/react';
import { useDebouncedCallback } from 'use-debounce';
import messageBackground from '@/images/composer_message.svg?url';
import {
changeComposeSpoilerness,
changeComposeSpoilerText,
@@ -70,11 +69,6 @@ export const RedesignComposeForm: React.FC<RedesignComposeFormProps> = ({
const type = useAppSelector(selectComposeType);
const { sensitive, sensitiveText } = useAppSelector(selectComposeSensitive);
let background: string | null = null;
if (type === 'message') {
background = messageBackground;
}
const {
onSensitiveChange,
onSensitiveTextChange,
@@ -94,12 +88,7 @@ export const RedesignComposeForm: React.FC<RedesignComposeFormProps> = ({
aria-labelledby={titleId}
className={classNames(className, classes.root)}
>
{background && (
<div
className={classes.background}
style={{ maskImage: `url(${background})` }}
/>
)}
{type === 'message' && <div className={classes.background} />}
<ComposeFormHeader id={titleId} noMinimize={noMinimize} />

9
app/javascript/mastodon/features/compose/redesign/styles.module.scss
View File

@@ -13,17 +13,20 @@
min-width: 300px;
position: relative;
overflow: hidden;
z-index: 1; // To cover the sidebar
}
.background {
mask-repeat: repeat;
background-color: var(--color-bg-brand-base);
mask-image: url('@/images/composer_message.svg');
mask-size: 311.36px auto;
background-color: var(--color-border-brand);
opacity: 0.15;
position: absolute;
bottom: 0;
right: 0;
width: 800px;
height: 800px;
top: 0;
left: 0;
pointer-events: none;
}