Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

♻️ [ShareableCardContent] Display a shadow instead of a border around the profile picture. #906

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
+67 −47
Open

♻️ [ShareableCardContent] Display a shadow instead of a border around the profile picture. #906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
a6da413
:wastebasket: The process of displaying the border has been removed.
Corvus400 Aug 31, 2024
c0b750e
:recycle: We have implemented a process to ensure that the profile ca…
Corvus400 Aug 31, 2024
54230f9
:wrench: ./gradlew detekt --auto-correct
Corvus400 Aug 31, 2024
34f00d1
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 1, 2024
a3e7f02
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 3, 2024
8bd53f5
Merge branch 'main' of github.com:Corvus400/conference-app-2024 into …
Corvus400 Sep 4, 2024
a386dc2
:wrench: ./gradlew detekt --auto-correct
Corvus400 Sep 4, 2024
88c9986
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 5, 2024
588db37
:wrench: The processing has been simplified.
Corvus400 Sep 5, 2024
d0f8deb
:wrench: ./gradlew detekt --auto-correct
Corvus400 Sep 5, 2024
0b1da73
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 6, 2024
519a2bb
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 6, 2024
6006238
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 6, 2024
081f99e
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 6, 2024
5b2824d
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 7, 2024
6867e80
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 7, 2024
8b16b8e
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 7, 2024
e7bce0f
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 7, 2024
7246053
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 7, 2024
ddd697d
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 7, 2024
5690ecd
Merge branch 'main' into design/display_a_shadow_instead_of_a_line
Corvus400 Sep 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions ...onMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/CaptureableCardBack.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
package io.github.droidkaigi.confsched.profilecard.component

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
Expand All @@ -13,7 +11,6 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.layer.GraphicsLayer
Expand Down Expand Up @@ -85,11 +82,6 @@ internal fun BackgroundCapturableCardBack(
qrCodeImagePainter,
modifier = Modifier
.size(width = 300.dp, height = 380.dp)
.border(
3.dp,
Color.Black,
RoundedCornerShape(8.dp),
)
.graphicsLayer {
rotationY = 180f
},
Expand Down
11 changes: 1 addition & 10 deletions ...nMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/CaptureableCardFront.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
package io.github.droidkaigi.confsched.profilecard.component

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
Expand All @@ -13,7 +11,6 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.layer.drawLayer
import androidx.compose.ui.graphics.rememberGraphicsLayer
Expand Down Expand Up @@ -81,13 +78,7 @@ internal fun BackgroundCapturableCardFront(
FlipCardFront(
uiState,
profileImagePainter,
modifier = Modifier
.size(width = 300.dp, height = 380.dp)
.border(
3.dp,
Color.Black,
RoundedCornerShape(8.dp),
),
modifier = Modifier.size(width = 300.dp, height = 380.dp),
)
}
}
Expand Down
95 changes: 66 additions & 29 deletions ...c/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/ShareableCard.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
package io.github.droidkaigi.confsched.profilecard.component

import androidx.compose.foundation.Image
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
Expand All @@ -18,8 +18,13 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.graphics.layer.GraphicsLayer
import androidx.compose.ui.graphics.layer.drawLayer
import androidx.compose.ui.platform.LocalDensity
Expand Down Expand Up @@ -109,42 +114,74 @@ private fun ShareableCardContent(
.background(LocalProfileCardTheme.current.primaryColor),
) {
Box(modifier = Modifier.padding(vertical = with(density) { verticalPaddingPx.toDp() })) {
backImage?.let {
Image(
bitmap = it,
contentDescription = null,
modifier = Modifier
.offset(
x = with(density) { offsetXBackPx.toDp() },
y = with(density) { offsetYBackPx.toDp() },
)
.rotate(10f)
.size(
width = with(density) { cardWidthPx.toDp() },
height = with(density) { cardHeightPx.toDp() },
),
backImage?.let { backBitmap ->
ShadowedImage(
imageBitmap = backBitmap,
offsetX = offsetXBackPx,
offsetY = offsetYBackPx,
rotation = 10f,
cardWidthPx = cardWidthPx,
cardHeightPx = cardHeightPx,
)
}
frontImage?.let {
Image(
bitmap = it,
contentDescription = null,
modifier = Modifier
.offset(
x = with(density) { offsetXFrontPx.toDp() },
y = with(density) { offsetYFrontPx.toDp() },
)
.rotate(-12.2f)
.size(
width = with(density) { cardWidthPx.toDp() },
height = with(density) { cardHeightPx.toDp() },
),
frontImage?.let { frontBitmap ->
ShadowedImage(
imageBitmap = frontBitmap,
offsetX = offsetXFrontPx,
offsetY = offsetYFrontPx,
rotation = -12.2f,
cardWidthPx = cardWidthPx,
cardHeightPx = cardHeightPx,
)
}
}
}
}

@Composable
private fun ShadowedImage(
imageBitmap: ImageBitmap,
offsetX: Float,
offsetY: Float,
rotation: Float,
cardWidthPx: Int,
cardHeightPx: Int,
modifier: Modifier = Modifier,
) {
val sweepGradient = Brush.sweepGradient(
Copy link
Contributor Author

@Corvus400 Corvus400 Sep 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only brush that could create a shadowy effect like Figma was the sweepGradient.
RadialGradient is good for drawing perfect circles, but it is not suitable for drawing shadows on rectangular cards like this one.
No matter how you try, it's impossible to achieve the same kind of rendering as Figma. 🙏

colors = listOf(
Color.Black.copy(alpha = 0.1f),
Color.Transparent,
),
)
val density = LocalDensity.current

Canvas(
modifier = modifier
.offset(
x = with(density) { offsetX.toDp() },
y = with(density) { offsetY.toDp() },
)
.rotate(rotation)
.size(
width = with(density) { cardWidthPx.toDp() },
height = with(density) { cardHeightPx.toDp() },
),
) {
rotate(degrees = 180f) {
for (i in 1..15) {
drawRoundRect(
Comment on lines +172 to +173
Copy link
Contributor Author

@Corvus400 Corvus400 Sep 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was impossible to make a shadow like Figma with just one brush, no matter how hard I tried.
So I think the only way is to draw it like this, gradually shifting the offset. 🙏

brush = sweepGradient,
size = Size(cardWidthPx.toFloat(), cardHeightPx.toFloat()),
topLeft = Offset(-i.toFloat(), -i.toFloat()),
cornerRadius = CornerRadius(with(density) { 16.toDp().toPx() }),
)
}
}
drawImage(imageBitmap)
Comment on lines +171 to +181
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sweepGradient can only paint colors from the 3 o'clock direction.
So, I rotated it 180 degrees and drew the image on top of that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you use Canvas, you won't even need to use Image.

}
}

@Composable
@Preview
fun ShareableCardPreview() {
Expand Down
Loading