filippodb
/
SchildiChat-android
mirror of https://github.com/SchildiChat/SchildiChat-android.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Apply corner roundness to image-related drawables 

Background outline and time overlay

Change-Id: If6715bf11489609a9ad2aad831db9ee608c803b6
This commit is contained in:
SpiritCroc 2022-03-04 10:20:54 +01:00
parent b56c1a3b0c
commit dd0037509e
16 changed files with 143 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
generate_bubbles.sh
View File

@ -6,7 +6,7 @@ my_dir="$(dirname "$(realpath "$0")")"
pushd "$my_dir" > /dev/null
res_dir="vector/src/main/res"
god_bubble="vector/src/main/res/drawable/msg_godbubble.xml"
god_bubble="$res_dir/drawable/msg_godbubble.xml"
# Multiline sed -i
function mised() {
@ -91,6 +91,17 @@ function create_msg_bubble() {
sed -i 's|<size.*/>||g' "$out_bubble"
}
function create_rounded_xml() {
local roundness="$1"
local infile="$2"
if [ ! -z "$roundness" ]; then
local outfile="$(dirname "$infile")/$(basename "$infile" .xml)_$roundness.xml"
cp "$infile" "$outfile"
echo "$outfile"
sed -i "s|sc_bubble_radius|sc_bubble_${roundness}_radius|g" "$outfile"
fi
}
for roundness in "" "r1" "r2"; do
for is_outgoing in 0 1; do
for is_rtl in 0 1; do
@ -103,6 +114,10 @@ for roundness in "" "r1" "r2"; do
#done
done
done
create_rounded_xml "$roundness" "$res_dir/drawable/timestamp_overlay.xml"
create_rounded_xml "$roundness" "$res_dir/drawable-ldrtl/timestamp_overlay.xml"
create_rounded_xml "$roundness" "$res_dir/drawable/background_image_border_incoming.xml"
create_rounded_xml "$roundness" "$res_dir/drawable/background_image_border_outgoing.xml"
done

7
vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/MessageImageVideoItem.kt
View File

@ -197,15 +197,14 @@ abstract class MessageImageVideoItem : AbsMessageItem<MessageImageVideoItem.Hold
when {
// Don't show it for non-bubble layouts, don't show for Stickers, ...
// Also only supported for default corner radius
!(messageLayout.isRealBubble || messageLayout.isPseudoBubble) || mode != ImageContentRenderer.Mode.THUMBNAIL
|| messageLayout.bubbleAppearance != defaultScBubbleAppearance -> {
!(messageLayout.isRealBubble || messageLayout.isPseudoBubble) || mode != ImageContentRenderer.Mode.THUMBNAIL -> {
holder.mediaContentView.background = null
}
attributes.informationData.sentByMe -> {
holder.mediaContentView.setBackgroundResource(R.drawable.background_image_border_outgoing)
holder.mediaContentView.setBackgroundResource(messageLayout.bubbleAppearance.imageBorderOutgoing)
}
else -> {
holder.mediaContentView.setBackgroundResource(R.drawable.background_image_border_incoming)
holder.mediaContentView.setBackgroundResource(messageLayout.bubbleAppearance.imageBorderIncoming)
}
}
}

6
vector/src/main/java/im/vector/app/features/home/room/detail/timeline/view/ScMessageBubbleWrapView.kt
View File

@ -339,7 +339,7 @@ class ScMessageBubbleWrapView @JvmOverloads constructor(context: Context, attrs:
bubbleDependentView.reserveFooterSpace(holder, footerWidth, footerHeight)
} else {
// We have no reserved space -> style it to ensure readability on arbitrary backgrounds
styleFooterOverlay()
styleFooterOverlay(messageLayout)
}
} else {
when {
@ -437,8 +437,8 @@ class ScMessageBubbleWrapView @JvmOverloads constructor(context: Context, attrs:
views.bubbleFooterMessageTimeView.setTextColor(tintList)
}
private fun styleFooterOverlay() {
views.bubbleFootView.setBackgroundResource(R.drawable.timestamp_overlay)
private fun styleFooterOverlay(messageLayout: TimelineMessageLayout.ScBubble) {
views.bubbleFootView.setBackgroundResource(messageLayout.bubbleAppearance.timestampOverlay)
tintFooter(ThemeUtils.getColor(views.bubbleFootView.context, R.attr.timestamp_overlay_fg))
val padding = views.bubbleFootView.resources.getDimensionPixelSize(R.dimen.sc_footer_overlay_padding)
views.bubbleFootView.setPaddingRelative(

15
vector/src/main/java/im/vector/app/features/themes/BubbleThemeUtils.kt
View File

@ -116,6 +116,12 @@ data class ScBubbleAppearance(
val textBubbleOutgoingNoTail: Int,
@DrawableRes
val textBubbleIncomingNoTail: Int,
@DrawableRes
val timestampOverlay: Int,
@DrawableRes
val imageBorderOutgoing: Int,
@DrawableRes
val imageBorderIncoming: Int,
) : Parcelable {
fun getBubbleRadiusPx(context: Context): Int {
return context.resources.getDimensionPixelSize(roundness)
@ -131,6 +137,9 @@ val defaultScBubbleAppearance = ScBubbleAppearance(
R.drawable.msg_bubble_text_incoming,
R.drawable.msg_bubble_text_outgoing_notail,
R.drawable.msg_bubble_text_incoming_notail,
R.drawable.timestamp_overlay,
R.drawable.background_image_border_outgoing,
R.drawable.background_image_border_incoming,
)
val r1ScBubbleAppearance = ScBubbleAppearance(
@ -139,6 +148,9 @@ val r1ScBubbleAppearance = ScBubbleAppearance(
R.drawable.msg_bubble_r1_text_incoming,
R.drawable.msg_bubble_r1_text_outgoing_notail,
R.drawable.msg_bubble_r1_text_incoming_notail,
R.drawable.timestamp_overlay_r1,
R.drawable.background_image_border_outgoing_r1,
R.drawable.background_image_border_incoming_r1,
)
@ -148,4 +160,7 @@ val r2ScBubbleAppearance = ScBubbleAppearance(
R.drawable.msg_bubble_r2_text_incoming,
R.drawable.msg_bubble_r2_text_outgoing_notail,
R.drawable.msg_bubble_r2_text_incoming_notail,
R.drawable.timestamp_overlay_r2,
R.drawable.background_image_border_outgoing_r2,
R.drawable.background_image_border_incoming_r2,
)

4
vector/src/main/res/drawable-ldrtl/timestamp_overlay.xml
View File

@ -3,8 +3,8 @@
<solid android:color="?timestamp_overlay_bg" />
<corners android:bottomLeftRadius="3dp"
android:topRightRadius="3dp"/>
<corners android:bottomLeftRadius="@dimen/sc_bubble_radius"
android:topRightRadius="@dimen/sc_bubble_radius" />
</shape>

10
vector/src/main/res/drawable-ldrtl/timestamp_overlay_r1.xml Normal file
View File

@ -0,0 +1,10 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="?timestamp_overlay_bg" />
<corners android:bottomLeftRadius="@dimen/sc_bubble_r1_radius"
android:topRightRadius="@dimen/sc_bubble_r1_radius" />
</shape>

10
vector/src/main/res/drawable-ldrtl/timestamp_overlay_r2.xml Normal file
View File

@ -0,0 +1,10 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="?timestamp_overlay_bg" />
<corners android:bottomLeftRadius="@dimen/sc_bubble_r2_radius"
android:topRightRadius="@dimen/sc_bubble_r2_radius" />
</shape>

8
vector/src/main/res/drawable/background_image_border_incoming.xml
View File

@ -6,8 +6,8 @@
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
<!-- rounded corners like for message bubbles and the image itself -->
<corners android:bottomRightRadius="3dp"
android:bottomLeftRadius="3dp"
android:topLeftRadius="3dp"
android:topRightRadius="3dp"/>
<corners android:bottomRightRadius="@dimen/sc_bubble_radius"
android:bottomLeftRadius="@dimen/sc_bubble_radius"
android:topLeftRadius="@dimen/sc_bubble_radius"
android:topRightRadius="@dimen/sc_bubble_radius"/>
</shape>

13
vector/src/main/res/drawable/background_image_border_incoming_r1.xml Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<stroke android:width="1dp" android:color="?sc_message_bg_incoming" />
<!-- add padding to actually draw around the image -->
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
<!-- rounded corners like for message bubbles and the image itself -->
<corners android:bottomRightRadius="@dimen/sc_bubble_r1_radius"
android:bottomLeftRadius="@dimen/sc_bubble_r1_radius"
android:topLeftRadius="@dimen/sc_bubble_r1_radius"
android:topRightRadius="@dimen/sc_bubble_r1_radius"/>
</shape>

13
vector/src/main/res/drawable/background_image_border_incoming_r2.xml Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<stroke android:width="1dp" android:color="?sc_message_bg_incoming" />
<!-- add padding to actually draw around the image -->
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
<!-- rounded corners like for message bubbles and the image itself -->
<corners android:bottomRightRadius="@dimen/sc_bubble_r2_radius"
android:bottomLeftRadius="@dimen/sc_bubble_r2_radius"
android:topLeftRadius="@dimen/sc_bubble_r2_radius"
android:topRightRadius="@dimen/sc_bubble_r2_radius"/>
</shape>

8
vector/src/main/res/drawable/background_image_border_outgoing.xml
View File

@ -6,8 +6,8 @@
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
<!-- rounded corners like for message bubbles and the image itself -->
<corners android:bottomRightRadius="3dp"
android:bottomLeftRadius="3dp"
android:topLeftRadius="3dp"
android:topRightRadius="3dp"/>
<corners android:bottomRightRadius="@dimen/sc_bubble_radius"
android:bottomLeftRadius="@dimen/sc_bubble_radius"
android:topLeftRadius="@dimen/sc_bubble_radius"
android:topRightRadius="@dimen/sc_bubble_radius"/>
</shape>

13
vector/src/main/res/drawable/background_image_border_outgoing_r1.xml Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<stroke android:width="1dp" android:color="?sc_message_bg_outgoing" />
<!-- add padding to actually draw around the image -->
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
<!-- rounded corners like for message bubbles and the image itself -->
<corners android:bottomRightRadius="@dimen/sc_bubble_r1_radius"
android:bottomLeftRadius="@dimen/sc_bubble_r1_radius"
android:topLeftRadius="@dimen/sc_bubble_r1_radius"
android:topRightRadius="@dimen/sc_bubble_r1_radius"/>
</shape>

13
vector/src/main/res/drawable/background_image_border_outgoing_r2.xml Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<stroke android:width="1dp" android:color="?sc_message_bg_outgoing" />
<!-- add padding to actually draw around the image -->
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
<!-- rounded corners like for message bubbles and the image itself -->
<corners android:bottomRightRadius="@dimen/sc_bubble_r2_radius"
android:bottomLeftRadius="@dimen/sc_bubble_r2_radius"
android:topLeftRadius="@dimen/sc_bubble_r2_radius"
android:topRightRadius="@dimen/sc_bubble_r2_radius"/>
</shape>

4
vector/src/main/res/drawable/timestamp_overlay.xml
View File

@ -3,8 +3,8 @@
<solid android:color="?timestamp_overlay_bg" />
<corners android:bottomRightRadius="3dp"
android:topLeftRadius="3dp"/>
<corners android:bottomRightRadius="@dimen/sc_bubble_radius"
android:topLeftRadius="@dimen/sc_bubble_radius" />
</shape>

10
vector/src/main/res/drawable/timestamp_overlay_r1.xml Normal file
View File

@ -0,0 +1,10 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="?timestamp_overlay_bg" />
<corners android:bottomRightRadius="@dimen/sc_bubble_r1_radius"
android:topLeftRadius="@dimen/sc_bubble_r1_radius" />
</shape>

10
vector/src/main/res/drawable/timestamp_overlay_r2.xml Normal file
View File

@ -0,0 +1,10 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="?timestamp_overlay_bg" />
<corners android:bottomRightRadius="@dimen/sc_bubble_r2_radius"
android:topLeftRadius="@dimen/sc_bubble_r2_radius" />
</shape>