Browse Source
* Improve UI for notification permission screen in onboarding * Update screenshots --------- Co-authored-by: ElementBot <benoitm+elementbot@element.io>pull/2673/head
Jorge Martin Espinosa
5 months ago
committed by
GitHub
9 changed files with 129 additions and 28 deletions
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
Improve UI for notification permission screen in onboarding. |
@ -0,0 +1,86 @@
@@ -0,0 +1,86 @@
|
||||
/* |
||||
* Copyright (c) 2024 New Vector Ltd |
||||
* |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
package io.element.android.libraries.designsystem.components |
||||
|
||||
import androidx.compose.foundation.Canvas |
||||
import androidx.compose.foundation.layout.Box |
||||
import androidx.compose.foundation.layout.fillMaxSize |
||||
import androidx.compose.foundation.layout.fillMaxWidth |
||||
import androidx.compose.foundation.layout.height |
||||
import androidx.compose.runtime.Composable |
||||
import androidx.compose.ui.Alignment |
||||
import androidx.compose.ui.Modifier |
||||
import androidx.compose.ui.geometry.Offset |
||||
import androidx.compose.ui.graphics.BlendMode |
||||
import androidx.compose.ui.graphics.Color |
||||
import androidx.compose.ui.graphics.LinearGradientShader |
||||
import androidx.compose.ui.graphics.ShaderBrush |
||||
import androidx.compose.ui.unit.dp |
||||
import io.element.android.compound.theme.ElementTheme |
||||
import io.element.android.libraries.designsystem.preview.ElementPreview |
||||
import io.element.android.libraries.designsystem.preview.PreviewsDayNight |
||||
|
||||
/** |
||||
* Gradient background for FTUE (onboarding) screens. |
||||
*/ |
||||
@Suppress("ModifierMissing") |
||||
@Composable |
||||
fun OnboardingBackground() { |
||||
Box(modifier = Modifier.fillMaxSize()) { |
||||
val isLightTheme = ElementTheme.isLightTheme |
||||
Canvas( |
||||
modifier = Modifier |
||||
.fillMaxWidth() |
||||
.height(220.dp) |
||||
.align(Alignment.BottomCenter) |
||||
) { |
||||
val gradientBrush = ShaderBrush( |
||||
LinearGradientShader( |
||||
from = Offset(0f, size.height / 2f), |
||||
to = Offset(size.width, size.height / 2f), |
||||
colors = listOf( |
||||
Color(0xFF0DBDA8), |
||||
if (isLightTheme) Color(0xC90D5CBD) else Color(0xFF0D5CBD), |
||||
) |
||||
) |
||||
) |
||||
val eraseBrush = ShaderBrush( |
||||
LinearGradientShader( |
||||
from = Offset(size.width / 2f, 0f), |
||||
to = Offset(size.width / 2f, size.height * 2f), |
||||
colors = listOf( |
||||
Color(0xFF000000), |
||||
Color(0x00000000), |
||||
) |
||||
) |
||||
) |
||||
drawWithLayer { |
||||
drawRect(brush = gradientBrush, size = size) |
||||
drawRect(brush = gradientBrush, size = size, blendMode = BlendMode.Overlay) |
||||
drawRect(brush = eraseBrush, size = size, blendMode = BlendMode.DstOut) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@PreviewsDayNight |
||||
@Composable |
||||
internal fun OnboardingBackgroundPreview() { |
||||
ElementPreview { |
||||
OnboardingBackground() |
||||
} |
||||
} |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1 |
||||
oid sha256:4df7164831cfda683ae0f312130f5e1222439000df456975e6c16567dbd4888d |
||||
size 56615 |
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1 |
||||
oid sha256:070dd4ea130ee33d04b1d2e83facbc36be3126b21abfff5c78446fe6120f175b |
||||
size 51628 |
Loading…
Reference in new issue