Add highlighter toggle to brush bar.

This commit is contained in:
Alex Hart
2026-07-29 16:14:35 -03:00
parent ab66385b5b
commit bb3354d4ca
4 changed files with 95 additions and 8 deletions
@@ -7,6 +7,7 @@ package org.signal.mediasend
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import org.signal.mediasend.edit.image.BrushWidths
import org.thoughtcrime.securesms.video.TranscodingConfig
import kotlin.time.Duration.Companion.seconds
@@ -37,6 +38,7 @@ internal fun rememberPreviewState() = remember {
MediaSendState(
mediaConstraints = PreviewMediaConstraints,
storyMaxVideoDuration = 30.seconds,
storiesEnabled = true
storiesEnabled = true,
brushWidths = BrushWidths(0f, 0f, 0f)
)
}
@@ -56,8 +56,7 @@ import org.signal.mediasend.edit.document.DocumentPage
import org.signal.mediasend.edit.image.BrushWidthBar
import org.signal.mediasend.edit.image.BrushWidthPreview
import org.signal.mediasend.edit.image.BrushWidthsState
import org.signal.mediasend.edit.image.ColorBarOrientation
import org.signal.mediasend.edit.image.HSVColorBar
import org.signal.mediasend.edit.image.DrawModeColorBar
import org.signal.mediasend.edit.image.ImageEditor
import org.signal.mediasend.edit.image.ImageEditorToolbar
import org.signal.mediasend.edit.image.RotationDial
@@ -260,11 +259,7 @@ fun MediaEditScreen(
}
if (controller.isUserDrawing) {
HSVColorBar(
state = controller.drawColorBarState,
onColorChanged = controller::setDrawColor,
orientation = ColorBarOrientation.HORIZONTAL
)
DrawModeColorBar(imageEditorController = controller)
}
if (isSmallWindowBreakpoint) {
@@ -0,0 +1,85 @@
/*
* Copyright 2026 Signal Messenger, LLC
* SPDX-License-Identifier: AGPL-3.0-only
*/
package org.signal.mediasend.edit.image
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import org.signal.core.ui.compose.DayNightPreviews
import org.signal.core.ui.compose.IconButtons
import org.signal.core.ui.compose.Previews
import org.signal.core.ui.compose.SignalIcons
import org.signal.core.ui.compose.theme.SignalTheme
import org.signal.imageeditor.core.model.EditorModel
import org.signal.mediasend.R
import org.signal.mediasend.edit.ImageController
/**
* Color bar that allows the user to change between highlighter and brush.
*/
@Composable
internal fun DrawModeColorBar(
imageEditorController: ImageController
) {
Row(
verticalAlignment = Alignment.CenterVertically
) {
HSVColorBar(
state = imageEditorController.drawColorBarState,
onColorChanged = imageEditorController::setDrawColor,
orientation = ColorBarOrientation.HORIZONTAL
)
IconButtons.IconButton(
onClick = {
if (imageEditorController.mode == ImageController.Mode.DRAW) {
imageEditorController.enterHighlightMode()
} else {
imageEditorController.enterDrawMode()
}
},
colors = IconButtons.iconButtonColors(
containerColor = SignalTheme.colors.colorSurface5
),
size = 40.dp
) {
Icon(
imageVector = if (imageEditorController.mode == ImageController.Mode.DRAW) {
SignalIcons.BrushHighlighter.imageVector
} else {
SignalIcons.Draw.imageVector
},
contentDescription = stringResource(
if (imageEditorController.mode == ImageController.Mode.DRAW) {
R.string.DrawModeColorBar__highlighter
} else {
R.string.DrawModeColorBar__brush
}
)
)
}
}
}
@DayNightPreviews
@Composable
private fun DrawModeColorBarPreview() {
Previews.Preview {
DrawModeColorBar(
imageEditorController = remember {
ImageController(
editorModel = EditorModel.create(0),
brushWidths = BrushWidthsState()
)
}
)
}
}
@@ -46,6 +46,11 @@
<!-- Name shown on the document preview when we cannot read the file\'s name. -->
<string name="DocumentPage__unnamed_file">Unnamed file</string>
<!-- Content description for button to enable highlighter mode -->
<string name="DrawModeColorBar__highlighter">Highlighter</string>
<!-- Content description for button to enable brush mode -->
<string name="DrawModeColorBar__brush">Brush</string>
<!-- Video editor play button content description -->
<string name="VideoEditorHud_play_video_description">Play video</string>