Skip to content

Commit

Permalink
feat(reactions): emoji picker (#2311)
Browse files Browse the repository at this point in the history
Co-authored-by: Yamil Medina <[email protected]>
  • Loading branch information
vitorhugods and yamilmedina authored Oct 10, 2023
1 parent b766887 commit b813a5f
Show file tree
Hide file tree
Showing 8 changed files with 495 additions and 7 deletions.
3 changes: 3 additions & 0 deletions app/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,9 @@ dependencies {
// Compose iterative code, layout inspector, etc.
debugImplementation(libs.compose.tooling)

// Emoji
implementation(libs.androidx.emoji.picker)

// hilt
implementation(libs.hilt.navigationCompose)
implementation(libs.hilt.work)
Expand Down
22 changes: 17 additions & 5 deletions app/src/main/kotlin/com/wire/android/ui/edit/ReactionOption.kt
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,12 @@ import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
Expand All @@ -30,6 +33,7 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.wire.android.R
import com.wire.android.ui.common.dimensions
import com.wire.android.ui.emoji.EmojiPickerBottomSheet
import com.wire.android.ui.theme.WireTheme
import com.wire.android.ui.theme.wireColorScheme
import com.wire.android.ui.theme.wireTypography
Expand All @@ -41,6 +45,7 @@ fun ReactionOption(
onReactionClick: (emoji: String) -> Unit,
emojiFontSize: TextUnit = 28.sp
) {
var isEmojiPickerVisible by remember { mutableStateOf(false) }
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.secondary) {
Column {
Row {
Expand Down Expand Up @@ -76,11 +81,8 @@ fun ReactionOption(
}
IconButton(
onClick = {
// TODO show more emojis
isEmojiPickerVisible = true
},
modifier = Modifier
// TODO remove when all emojis will be available
.alpha(0.1F),
) {
Icon(
painter = painterResource(id = R.drawable.ic_more_emojis),
Expand All @@ -90,6 +92,16 @@ fun ReactionOption(
}
}
}
EmojiPickerBottomSheet(
isVisible = isEmojiPickerVisible,
onDismiss = {
isEmojiPickerVisible = false
},
onEmojiSelected = {
onReactionClick(it)
isEmojiPickerVisible = false
}
)
}

@PreviewMultipleThemes
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/*
* Wire
* Copyright (C) 2023 Wire Swiss GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see http://www.gnu.org/licenses/.
*/
package com.wire.android.ui.emoji

import android.content.Context
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import androidx.coordinatorlayout.widget.CoordinatorLayout
import com.google.android.material.bottomsheet.BottomSheetBehavior

class DraggableByHandleBottomSheetBehavior<V : View>(
context: Context,
attributeSet: AttributeSet
) : BottomSheetBehavior<V>(context, attributeSet) {
var dragHandle: View? = null

override fun onInterceptTouchEvent(parent: CoordinatorLayout, child: V, event: MotionEvent): Boolean {
dragHandle?.let {
isDraggable = parent.isPointInChildBounds(it, event.x.toInt(), event.y.toInt())
}
return super.onInterceptTouchEvent(parent, child, event)
}
}
59 changes: 59 additions & 0 deletions app/src/main/kotlin/com/wire/android/ui/emoji/EmojiPicker.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/*
* Wire
* Copyright (C) 2023 Wire Swiss GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see http://www.gnu.org/licenses/.
*/
package com.wire.android.ui.emoji

import android.widget.LinearLayout
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import androidx.emoji2.emojipicker.EmojiPickerView
import com.google.android.material.bottomsheet.BottomSheetDragHandleView

@Composable
fun EmojiPickerBottomSheet(
isVisible: Boolean,
onDismiss: () -> Unit = {},
onEmojiSelected: (emoji: String) -> Unit
) {
val context = LocalContext.current
val dialog = remember {
HandleDraggableBottomSheetDialog(context).apply {
setContentView(
LinearLayout(context).apply {
orientation = LinearLayout.VERTICAL
val handle = BottomSheetDragHandleView(context)
getBehavior().dragHandle = handle
addView(handle)
addView(
EmojiPickerView(context).apply {
setOnEmojiPickedListener { emojiViewItem ->
onEmojiSelected(emojiViewItem.emoji)
}
}
)
}
)
setOnCancelListener { onDismiss.invoke() }
}
}
if (isVisible) {
dialog.show()
} else {
dialog.hide()
}
}
Loading

0 comments on commit b813a5f

Please sign in to comment.