Add expanding attachment buttons

This commit is contained in:
Niels Andriesse 2021-06-17 14:34:50 +10:00
parent 4855f694e7
commit 092dad03b7
5 changed files with 75 additions and 10 deletions

View File

@ -23,6 +23,7 @@ import kotlinx.android.synthetic.main.view_input_bar_recording.*
import kotlinx.android.synthetic.main.view_input_bar_recording.view.*
import network.loki.messenger.R
import org.thoughtcrime.securesms.PassphraseRequiredActionBarActivity
import org.thoughtcrime.securesms.conversation.v2.input_bar.InputBarButton
import org.thoughtcrime.securesms.conversation.v2.input_bar.InputBarDelegate
import org.thoughtcrime.securesms.conversation.v2.menus.ConversationActionModeCallback
import org.thoughtcrime.securesms.conversation.v2.menus.ConversationMenuHelper
@ -36,7 +37,6 @@ import kotlin.math.roundToInt
import kotlin.math.sqrt
class ConversationActivityV2 : PassphraseRequiredActionBarActivity(), InputBarDelegate {
private val lockViewExpansionMargin by lazy { toDp(3, resources) }
private val lockViewHitMargin by lazy { toPx(40, resources) }
private var threadID: Long = -1
private var actionMode: ActionMode? = null
@ -70,9 +70,12 @@ class ConversationActivityV2 : PassphraseRequiredActionBarActivity(), InputBarDe
private val glide by lazy { GlideApp.with(this) }
private val screenWidth by lazy {
Resources.getSystem().displayMetrics.widthPixels
}
private val screenWidth by lazy { Resources.getSystem().displayMetrics.widthPixels }
private val gifButton by lazy { InputBarButton(this, R.drawable.ic_gif_white_24dp, hasOpaqueBackground = true) }
private val documentButton by lazy { InputBarButton(this, R.drawable.ic_document_small_dark, hasOpaqueBackground = true) }
private val libraryButton by lazy { InputBarButton(this, R.drawable.ic_baseline_photo_library_24, hasOpaqueBackground = true) }
private val cameraButton by lazy { InputBarButton(this, R.drawable.ic_baseline_photo_camera_24, hasOpaqueBackground = true) }
// region Settings
companion object {
@ -87,7 +90,7 @@ class ConversationActivityV2 : PassphraseRequiredActionBarActivity(), InputBarDe
threadID = intent.getLongExtra(THREAD_ID, -1)
setUpRecyclerView()
setUpToolBar()
inputBar.delegate = this
setUpInputBar()
}
private fun setUpRecyclerView() {
@ -120,6 +123,22 @@ class ConversationActivityV2 : PassphraseRequiredActionBarActivity(), InputBarDe
profilePictureView.update(thread, threadID)
}
private fun setUpInputBar() {
inputBar.delegate = this
// GIF button
gifButtonContainer.addView(gifButton)
gifButton.layoutParams = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT)
// Document button
documentButtonContainer.addView(documentButton)
documentButton.layoutParams = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT)
// Library button
libraryButtonContainer.addView(libraryButton)
libraryButton.layoutParams = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT)
// Camera button
cameraButtonContainer.addView(cameraButton)
cameraButton.layoutParams = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT)
}
override fun onPrepareOptionsMenu(menu: Menu): Boolean {
ConversationMenuHelper.onPrepareOptionsMenu(menu, menuInflater, thread, this) { onOptionsItemSelected(it) }
super.onPrepareOptionsMenu(menu)

View File

@ -27,6 +27,7 @@ import kotlin.math.abs
class InputBarButton : RelativeLayout {
private val gestureHandler = Handler(Looper.getMainLooper())
private var isSendButton = false
private var hasOpaqueBackground = false
@DrawableRes private var iconID = 0
private var longPressCallback: Runnable? = null
private var onDownTimestamp = 0L
@ -43,7 +44,15 @@ class InputBarButton : RelativeLayout {
private val expandedImageViewPosition by lazy { PointF(0.0f, 0.0f) }
private val collapsedImageViewPosition by lazy { PointF((expandedSize - collapsedSize) / 2, (expandedSize - collapsedSize) / 2) }
private val defaultColorID by lazy { if (isSendButton) R.color.accent else R.color.input_bar_button_background }
private val colorID by lazy {
if (hasOpaqueBackground) {
R.color.input_bar_button_background_opaque
} else if (isSendButton) {
R.color.accent
} else {
R.color.input_bar_button_background
}
}
val expandedSize by lazy { resources.getDimension(R.dimen.input_bar_button_expanded_size) }
val collapsedSize by lazy { resources.getDimension(R.dimen.input_bar_button_collapsed_size) }
@ -53,7 +62,7 @@ class InputBarButton : RelativeLayout {
val size = collapsedSize.toInt()
result.layoutParams = LayoutParams(size, size)
result.setBackgroundResource(R.drawable.input_bar_button_background)
result.mainColor = resources.getColorWithID(defaultColorID, context.theme)
result.mainColor = resources.getColorWithID(colorID, context.theme)
result
}
@ -72,9 +81,10 @@ class InputBarButton : RelativeLayout {
constructor(context: Context, attrs: AttributeSet) : super(context, attrs) { throw IllegalAccessException("Use InputBarButton(context:iconID:) instead.") }
constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { throw IllegalAccessException("Use InputBarButton(context:iconID:) instead.") }
constructor(context: Context, @DrawableRes iconID: Int, isSendButton: Boolean = false) : super(context) {
constructor(context: Context, @DrawableRes iconID: Int, isSendButton: Boolean = false, hasOpaqueBackground: Boolean = false) : super(context) {
this.isSendButton = isSendButton
this.iconID = iconID
this.hasOpaqueBackground = hasOpaqueBackground
val size = resources.getDimension(R.dimen.input_bar_button_expanded_size).toInt()
val layoutParams = LayoutParams(size, size)
this.layoutParams = layoutParams
@ -90,13 +100,13 @@ class InputBarButton : RelativeLayout {
}
fun expand() {
GlowViewUtilities.animateColorChange(context, imageViewContainer, defaultColorID, R.color.accent)
GlowViewUtilities.animateColorChange(context, imageViewContainer, colorID, R.color.accent)
imageViewContainer.animateSizeChange(R.dimen.input_bar_button_collapsed_size, R.dimen.input_bar_button_expanded_size, animationDuration)
animateImageViewContainerPositionChange(collapsedImageViewPosition, expandedImageViewPosition)
}
fun collapse() {
GlowViewUtilities.animateColorChange(context, imageViewContainer, R.color.accent, defaultColorID)
GlowViewUtilities.animateColorChange(context, imageViewContainer, R.color.accent, colorID)
imageViewContainer.animateSizeChange(R.dimen.input_bar_button_expanded_size, R.dimen.input_bar_button_collapsed_size, animationDuration)
animateImageViewContainerPositionChange(expandedImageViewPosition, collapsedImageViewPosition)
}

View File

@ -12,6 +12,40 @@
android:layout_height="match_parent"
android:layout_marginBottom="@dimen/input_bar_height" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/small_spacing"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="60dp"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/gifButtonContainer"
android:layout_width="@dimen/input_bar_button_expanded_size"
android:layout_height="@dimen/input_bar_button_expanded_size" />
<RelativeLayout
android:id="@+id/documentButtonContainer"
android:layout_marginTop="8dp"
android:layout_width="@dimen/input_bar_button_expanded_size"
android:layout_height="@dimen/input_bar_button_expanded_size" />
<RelativeLayout
android:id="@+id/libraryButtonContainer"
android:layout_marginTop="8dp"
android:layout_width="@dimen/input_bar_button_expanded_size"
android:layout_height="@dimen/input_bar_button_expanded_size" />
<RelativeLayout
android:id="@+id/cameraButtonContainer"
android:layout_marginTop="8dp"
android:layout_width="@dimen/input_bar_button_expanded_size"
android:layout_height="@dimen/input_bar_button_expanded_size" />
</LinearLayout>
<org.thoughtcrime.securesms.conversation.v2.input_bar.InputBar
android:id="@+id/inputBar"
android:layout_width="match_parent"

View File

@ -22,6 +22,7 @@
<color name="message_selected">#FFFFFF</color>
<color name="input_bar_background">#FCFCFC</color>
<color name="input_bar_button_background">#0D000000</color>
<color name="input_bar_button_background_opaque">#EFEFEF</color>
<color name="input_bar_lock_view_background">#FCFCFC</color>
<color name="input_bar_lock_view_border">#66000000</color>

View File

@ -29,6 +29,7 @@
<color name="message_selected">#000000</color>
<color name="input_bar_background">#171717</color>
<color name="input_bar_button_background">#0DFFFFFF</color>
<color name="input_bar_button_background_opaque">#232323</color>
<color name="input_bar_lock_view_background">#171717</color>
<color name="input_bar_lock_view_border">#66FFFFFF</color>