danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-11-26 20:34:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

Middle Column: New background for light theme

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-05-20 17:53:49 +02:00
parent e908a3bd17
commit 9040e62bc7
13 changed files with 98 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/chat-bg-br.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/assets/chat-bg-dark.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 246 KiB

BIN
src/assets/chat-bg-mobile.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.9 KiB

BIN
src/assets/chat-bg-pattern-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

BIN
src/assets/chat-bg-pattern-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB

BIN
src/assets/chat-bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

56
src/components/common/UiLoader.scss
View File

@ -19,7 +19,6 @@
z-index: var(--z-ui-loader-mask);
display: flex;
@media (min-width: 600px) {
display: grid;
grid-template-columns: auto 1fr;
@ -64,62 +63,7 @@
z-index: 1;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: var(--theme-background-color);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
transform-origin: left center;
.theme-light & {
background-image: url('../../assets/chat-bg.jpg');
@media (max-width: 600px) {
background-image: url("../../assets/chat-bg-mobile.jpg");
}
}
}
.theme-dark &:not(.custom-bg-image)::before {
background-image: url('../../assets/chat-bg-dark.png');
background-position: top left;
background-size: 650px;
background-repeat: repeat;
}
&.custom-bg-image::before {
background-image: var(--custom-background) !important;
filter: none;
transform: scale(1.1);
}
&.custom-bg-image.blurred::before {
filter: blur(12px);
}
&.custom-bg-color:not(.custom-bg-image)::before {
opacity: 0;
}
html.theme-light body.animation-level-2 &.with-right-column::before {
transform: scale(0.67);
}
@media screen and (min-width: 1276px) {
&::before {
margin: -16rem -5rem -20rem 0;
}
}
@media (max-width: 1275px) {
flex: 3;
border-right: none;
}

6
src/components/common/UiLoader.tsx
View File

@ -136,8 +136,8 @@ const UiLoader: FC<OwnProps & StateProps> = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const className = buildClassName(
'middle',
const middleClassName = buildClassName(
'middle bg-layers',
transitionClassNames,
customBackground && 'custom-bg-image',
backgroundColor && 'custom-bg-color',
@ -161,7 +161,7 @@ const UiLoader: FC<OwnProps & StateProps> = ({
style={leftColumnWidth ? `width: ${leftColumnWidth}px` : undefined}
/>
<div
className={className}
className={middleClassName}
style={buildStyle(...inlineStyles)}
/>
{isRightColumnShown && <div className="right" />}

79
src/components/middle/MiddleColumn.scss
View File

@ -6,85 +6,6 @@
right: 0;
overflow: hidden;
z-index: -1;
background-color: var(--theme-background-color);
body:not(.animation-level-0) #root & {
transition: background-color 0.2s;
}
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: var(--theme-background-color);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
body:not(.animation-level-0) #root & {
transition: transform var(--layer-transition), background-image 0.2s;
}
body.animation-level-0 & {
transition: none;
}
.theme-light & {
background-image: url("../../assets/chat-bg.jpg");
@media (max-width: 600px) {
background-image: url("../../assets/chat-bg-mobile.jpg");
}
}
.theme-dark #MiddleColumn:not(.custom-bg-image) & {
background-image: url('../../assets/chat-bg-dark.png');
background-position: top left;
background-size: 650px;
background-repeat: repeat;
}
}
.custom-bg-color:not(.custom-bg-image) &::after {
opacity: 0;
}
.custom-bg-image &::after {
background-image: var(--custom-background) !important;
filter: none;
transform: scale(1.1);
}
.custom-bg-image.blurred &::after {
filter: blur(12px);
}
@media screen and (min-width: 1276px) {
body.animation-level-2 &::after {
margin: -16rem -5rem -20rem 0;
overflow: hidden;
transform: scale(1);
transform-origin: left center;
transition: transform var(--layer-transition);
}
html.theme-light body.animation-level-2 #Main.right-column-open #MiddleColumn:not(.custom-bg-image) &::after {
transform: scale(0.67) !important;
}
}
html.theme-light body.animation-level-2 #Main.right-column-open #MiddleColumn:not(.custom-bg-image) &::after {
@media screen and (min-width: 1921px) {
transform: scale(0.8) !important;
}
@media screen and (min-width: 2600px) {
transform: scale(0.95) !important;
}
}
}
#MiddleColumn {

8
src/components/middle/MiddleColumn.tsx
View File

@ -313,10 +313,15 @@ const MiddleColumn: FC<StateProps> = ({
const className = buildClassName(
renderingHasTools && 'has-header-tools',
MASK_IMAGE_DISABLED ? 'mask-image-disabled' : 'mask-image-enabled',
);
const bgClassName = buildClassName(
'bg-layers with-transition',
customBackground && 'custom-bg-image',
backgroundColor && 'custom-bg-color',
customBackground && isBackgroundBlurred && 'blurred',
MASK_IMAGE_DISABLED ? 'mask-image-disabled' : 'mask-image-enabled',
isRightColumnShown && 'with-right-column',
);
const messagingDisabledClassName = buildClassName(
@ -383,6 +388,7 @@ const MiddleColumn: FC<StateProps> = ({
>
<div
id="middle-column-bg"
className={bgClassName}
style={customBackgroundValue ? `--custom-background: ${customBackgroundValue}` : undefined}
/>
<div id="middle-column-portals" />

6
src/config.ts
View File

@ -200,10 +200,10 @@ export const DEFAULT_LANG_CODE = 'en';
export const DEFAULT_LANG_PACK = 'android';
export const LANG_PACKS = ['android', 'ios', 'tdesktop', 'macos'] as const;
export const FEEDBACK_URL = 'https://bugs.telegram.org/?tag_ids=41&sort=time';
export const LIGHT_THEME_BG_COLOR = '#A2AF8E';
export const LIGHT_THEME_BG_COLOR = '#99BA92';
export const DARK_THEME_BG_COLOR = '#0F0F0F';
export const DARK_THEME_PATTERN_COLOR = '#0a0a0a8c';
export const DEFAULT_PATTERN_COLOR = 'rgba(90, 110, 70, 0.6)';
export const DEFAULT_PATTERN_COLOR = '#4A8E3A8C';
export const DARK_THEME_PATTERN_COLOR = '#0A0A0A8C';
// Group calls
export const GROUP_CALL_VOLUME_MULTIPLIER = 100;

84
src/styles/_bg.scss Normal file
View File

@ -0,0 +1,84 @@
.bg-layers {
background-color: var(--theme-background-color);
body:not(.animation-level-0) &.with-transition {
transition: background-color 0.2s;
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
html.theme-light &:not(.custom-bg-image)::before {
background-image: url('../assets/chat-bg-br.png');
}
&:not(.custom-bg-image).custom-bg-color::before {
display: none;
}
&.custom-bg-image::before {
background-image: var(--custom-background) !important;
transform: scale(1.1);
}
body:not(.animation-level-0) &.custom-bg-image.with-transition::before {
transition: background-image var(--layer-transition);
}
&.custom-bg-image.blurred::before {
filter: blur(12px);
}
@media screen and (min-width: 1276px) {
body.animation-level-2 &::before {
overflow: hidden;
transform: scale(1);
transform-origin: left center;
}
}
html.theme-light body.animation-level-2 &:not(.custom-bg-image).with-right-column::before {
transition: transform var(--layer-transition);
@media screen and (min-width: 1276px) {
transform: scaleX(0.67) !important;
}
@media screen and (min-width: 1921px) {
transform: scaleX(0.8) !important;
}
@media screen and (min-width: 2600px) {
transform: scaleX(0.95) !important;
}
}
&:not(.custom-bg-image):not(.custom-bg-color)::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background-image: url('../assets/chat-bg-pattern-light.png');
background-position: top left;
background-size: 510px auto;
background-repeat: repeat;
mix-blend-mode: overlay;
html.theme-dark & {
background-image: url('../assets/chat-bg-pattern-dark.png');
mix-blend-mode: unset;
}
}
}

1
src/styles/index.scss
View File

@ -5,6 +5,7 @@
@import "forms";
@import "icons";
@import "common";
@import "bg";
@import "../assets/fonts/roboto.css";
@import "./print";