Skip to content

Commit

Permalink
enhancement: change send button position (#536)
Browse files Browse the repository at this point in the history 
* add horizontal padding to MentionsBar

* add send/schedule/save button to UtilsBar

* update composer screen

- always show UtilsBar (and remove add image from actions menu)
- always add/remove spoiler from actions menu

* update user manual
  • Loading branch information
@AkesiSeli
AkesiSeli authored Nov 18, 2024
1 parent 28e972b commit cb9d701
Show file tree
Hide file tree
Showing 6 changed files with 229 additions and 249 deletions.
Binary file modified docs/manual/images/composer.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 10 additions & 14 deletions docs/manual/it/main.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -715,30 +715,23 @@ ad altri account. È suddivisa in due sezioni:

## Creazione post

Questa schermata consente di creare nuovi post o risposte. La barra superiore contiene un pulsante
che può avere icone diverse a seconda del tipo di pubblicazione:

- icona Invia per la pubblicazione immediata;
- icona Salva per il salvataggio in bozze;
- icona Orologio per i post schedulati;

mentre il menu azioni contiene le seguenti voci:
Questa schermata consente di creare nuovi post o risposte. Il menu azion nella barra superiore
contiene le seguenti voci:

- **Salva bozza** cambia il tipo di pubblicazione da immediata a bozza;
- **Imposta schedulazione** cambia il tipo di pubblicazione da immediata a schedulata;
- **Inserisci emoji** permette di inserire una emoji personalizzata;
- **Visualizza anteprima** apre un'anteprima del post (solo se l'opzione "Markup per la
composizione"
nelle impostazioni _non_ è "Testo semplice");
- **Aggiungi titolo**/**Rimuovi titolo** per aggiungere o rimuovere il titlo del post (solo su
- **Aggiungi spoiler**/**Rimuovi spoiler** per aggiungere o rimuovere lo spoiler del post;
- **Aggiungi titolo**/**Rimuovi titolo** per aggiungere o rimuovere il titolo del post (solo su
Friendica);
- **Aggiungi immagine (galleria)** aggiunge un'immagine a partire da un album della galleria
fotografica (solo su Friendica);
- **Inserisci lista** aggiunge un elenco puntato;
- **Aggiungi spoiler**/**Rimuovi spoiler** (solo se "Markup per la composizione" nelle impostazioni
è "Testo semplice") permette di aggiungere o rimuovere lo spoiler del post;
- **Aggiungi immagine** (solo se "Markup per la composizione" nelle impostazioni è "Testo semplice")
permette di aggiungere un'immagine dal rullino foto del dispositivo;
- **Cambia tipo markup** permette di cambiare la sintassi di markup utilizzata per il testo
formattato nel post corrente.

Sotto alla barra è presente un'intestazione che visualizza:

Expand All @@ -761,7 +754,10 @@ pulsanti:
- **Sottolineato** per inserire del testo sottolienato;
- **Barrato** per inserire del testo sbarrato;
- **Larghezza fissa** per inserire del testo con carattere a larghezza fissa;
- **Aggiungi/rimuovi spoiler** per aggiungere o rimuovere lo spoiler del post.
- **Procedi** pulsate per procedere all'invio del post che può presentare:
- un'icona Invia per la pubblicazione immediata;
- un'icona Salva per il salvataggio in bozze;
- un'icona Orologio per i post schedulati.

<div align="center">
<img width="310" alt="composer screen" src="../images/composer.png" />
Expand Down
23 changes: 9 additions & 14 deletions docs/manual/main.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -665,28 +665,19 @@ sections:

## Post composer

This screen allows to create new posts or replies. The top bar contains the Submit button which can
have different icons depending on the publishing type:

- a Send icon for regular publication;
- a Save icon for drafts;
- a Schedule icon for scheduled posts;

whereas the action menu contains the following items:
This screen allows to create new posts or replies. The action menu in the top app bar contains the
following items:

- **Save draft** changes the publishing type from regular to draft;
- **Set schedule** changes the publishing type from regular to scheduled posts;
- **Insert emoji** allows to insert a custom emoji;
- **Open preview** opens a preview of the post (only if "Markup for compositing" option in Settings
is _not_ plain text);
- **Add spoiler**/**Remove spoiler** to add or remove a spoiler for the post;
- **Add title**/**Remove title** to add or remove a title for the post (Friendica only);
- **Add image (media gallery)** adds an image from an album in the media gallery (Friendica only);
- **Insert list** adds an itemized list;
- **Add spoiler**/**Remove spoiler** (only if "Markup for compositing" option in Settings is plain
text) to add or remove a spoiler for the post;
- **Add image** (only if "Markup for compositing" option in Settings is plain text) adds an image
from
the device gallery;
- **Change markup type** to change the markup syntax for rich text editing for the current post.

Below the top bar there is a header containing:

Expand All @@ -706,7 +697,11 @@ formatting toolbar with the following buttons:
- **Underline** to insert some underlined text;
- **Strikethrough** to insert some text with a strikethrough effect;
- **Code** to insert monospaced font;
- **Toggle spoiler** to add or remove a spoiler for the post.
- **Submit** the submit button displaying:
- a Send icon for regular publication;
- a Save icon for drafts;
- a Schedule icon for scheduled posts.


<div align="center">
<img width="310" alt="composer screen" src="images/composer.png" />
Expand Down
209 changes: 91 additions & 118 deletions ...nMain/kotlin/com/livefast/eattrash/raccoonforfriendica/feature/composer/ComposerScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,9 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.filled.Send
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.Save
import androidx.compose.material.icons.filled.Schedule
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
Expand Down Expand Up @@ -335,17 +331,15 @@ class ComposerScreen(
)
}

if (!uiState.supportsRichEditing) {
this +=
CustomOptions.ToggleSpoiler.toOption(
label =
if (uiState.hasSpoiler) {
LocalStrings.current.actionRemoveSpoiler
} else {
LocalStrings.current.actionAddSpoiler
},
)
}
this +=
CustomOptions.ToggleSpoiler.toOption(
label =
if (uiState.hasSpoiler) {
LocalStrings.current.actionRemoveSpoiler
} else {
LocalStrings.current.actionAddSpoiler
},
)

if (uiState.titleFeatureSupported) {
this +=
Expand All @@ -359,13 +353,6 @@ class ComposerScreen(
)
}

if (!uiState.supportsRichEditing) {
this +=
CustomOptions.SelectAttachment.toOption(
label = LocalStrings.current.actionAddImage,
)
}

if (uiState.galleryFeatureSupported && uiState.poll == null) {
this +=
CustomOptions.SelectFromGallery.toOption(
Expand All @@ -384,12 +371,14 @@ class ComposerScreen(
},
)
}

if (uiState.supportsRichEditing) {
this +=
CustomOptions.InsertList.toOption(
label = LocalStrings.current.actionInsertList,
)
}

this +=
CustomOptions.ChangeMarkupMode.toOption(
label = LocalStrings.current.actionChangeMarkupMode,
Expand Down Expand Up @@ -462,7 +451,8 @@ class ComposerScreen(
)

CustomOptions.SelectAttachment -> {
val limit = uiState.attachmentLimit ?: Int.MAX_VALUE
val limit =
uiState.attachmentLimit ?: Int.MAX_VALUE
if (uiState.attachments.size < limit) {
openImagePicker = true
}
Expand Down Expand Up @@ -508,22 +498,6 @@ class ComposerScreen(
}
}
}

FilledIconButton(
onClick = {
model.reduce(ComposerMviModel.Intent.Submit())
},
) {
Icon(
imageVector =
when (uiState.publicationType) {
PublicationType.Draft -> Icons.Default.Save
is PublicationType.Scheduled -> Icons.Default.Schedule
else -> Icons.AutoMirrored.Default.Send
},
contentDescription = null,
)
}
},
)
},
Expand Down Expand Up @@ -556,85 +530,84 @@ class ComposerScreen(
},
)
}
if (uiState.supportsRichEditing) {
UtilsBar(
modifier = Modifier.fillMaxWidth(),
onAttachmentClicked = {
val limit = uiState.attachmentLimit ?: Int.MAX_VALUE
if (uiState.attachments.size < limit) {
openImagePicker = true
}
},
hasPoll = uiState.poll != null,
hasSpoiler = uiState.hasSpoiler,
onLinkClicked = {
linkDialogOpen = true
},
onBoldClicked = {
model.reduce(
ComposerMviModel.Intent.AddBoldFormat(
fieldType =
when {
hasTitleFocus -> ComposerFieldType.Title
hasSpoilerFieldFocus -> ComposerFieldType.Spoiler
else -> ComposerFieldType.Body
},
),
)
},
onItalicClicked = {
model.reduce(
ComposerMviModel.Intent.AddItalicFormat(
fieldType =
when {
hasTitleFocus -> ComposerFieldType.Title
hasSpoilerFieldFocus -> ComposerFieldType.Spoiler
else -> ComposerFieldType.Body
},
),
)
},
onUnderlineClicked = {
model.reduce(
ComposerMviModel.Intent.AddUnderlineFormat(
fieldType =
when {
hasTitleFocus -> ComposerFieldType.Title
hasSpoilerFieldFocus -> ComposerFieldType.Spoiler
else -> ComposerFieldType.Body
},
),
)
},
onStrikethroughClicked = {
model.reduce(
ComposerMviModel.Intent.AddStrikethroughFormat(
fieldType =
when {
hasTitleFocus -> ComposerFieldType.Title
hasSpoilerFieldFocus -> ComposerFieldType.Spoiler
else -> ComposerFieldType.Body
},
),
)
},
onCodeClicked = {
model.reduce(
ComposerMviModel.Intent.AddCodeFormat(
fieldType =
when {
hasTitleFocus -> ComposerFieldType.Title
hasSpoilerFieldFocus -> ComposerFieldType.Spoiler
else -> ComposerFieldType.Body
},
),
)
},
onSpoilerClicked = {
model.reduce(ComposerMviModel.Intent.ToggleHasSpoiler)
},
)
}
UtilsBar(
modifier = Modifier.fillMaxWidth(),
onAttachmentClicked = {
val limit = uiState.attachmentLimit ?: Int.MAX_VALUE
if (uiState.attachments.size < limit) {
openImagePicker = true
}
},
supportsRichEditing = uiState.supportsRichEditing,
hasPoll = uiState.poll != null,
publicationType = uiState.publicationType,
onLinkClicked = {
linkDialogOpen = true
},
onBoldClicked = {
model.reduce(
ComposerMviModel.Intent.AddBoldFormat(
fieldType =
when {
hasTitleFocus -> ComposerFieldType.Title
hasSpoilerFieldFocus -> ComposerFieldType.Spoiler
else -> ComposerFieldType.Body
},
),
)
},
onItalicClicked = {
model.reduce(
ComposerMviModel.Intent.AddItalicFormat(
fieldType =
when {
hasTitleFocus -> ComposerFieldType.Title
hasSpoilerFieldFocus -> ComposerFieldType.Spoiler
else -> ComposerFieldType.Body
},
),
)
},
onUnderlineClicked = {
model.reduce(
ComposerMviModel.Intent.AddUnderlineFormat(
fieldType =
when {
hasTitleFocus -> ComposerFieldType.Title
hasSpoilerFieldFocus -> ComposerFieldType.Spoiler
else -> ComposerFieldType.Body
},
),
)
},
onStrikethroughClicked = {
model.reduce(
ComposerMviModel.Intent.AddStrikethroughFormat(
fieldType =
when {
hasTitleFocus -> ComposerFieldType.Title
hasSpoilerFieldFocus -> ComposerFieldType.Spoiler
else -> ComposerFieldType.Body
},
),
)
},
onCodeClicked = {
model.reduce(
ComposerMviModel.Intent.AddCodeFormat(
fieldType =
when {
hasTitleFocus -> ComposerFieldType.Title
hasSpoilerFieldFocus -> ComposerFieldType.Spoiler
else -> ComposerFieldType.Body
},
),
)
},
onSubmitClicked = {
model.reduce(ComposerMviModel.Intent.Submit())
},
)
}
},
content = { padding ->
Expand Down
6 changes: 5 additions & 1 deletion ...tlin/com/livefast/eattrash/raccoonforfriendica/feature/composer/components/MentionsBar.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ internal fun MentionsBar(
val fullColor = MaterialTheme.colorScheme.onSurfaceVariant
val ancillaryColor = MaterialTheme.colorScheme.onSurfaceVariant.copy(ancillaryTextAlpha)
Row(
modifier = modifier.height(40.dp).horizontalScroll(rememberScrollState()),
modifier =
modifier
.height(38.dp)
.padding(horizontal = Spacing.xxs)
.horizontalScroll(rememberScrollState()),
verticalAlignment = Alignment.CenterVertically,
) {
val users = suggestions.filter { !it.handle.isNullOrBlank() }
Expand Down
Loading

0 comments on commit cb9d701

Please sign in to comment.