popovers: Refactor the Move messages and Move topic modals.

This commit refactors the move messages and move topic modals
to follow standard patterns from other modals (e.g. the invite user
modal).

Fixes #32168.
This commit is contained in:
Saubhagya Patel 2024-11-21 11:00:51 +05:30
parent 65f05794ee
commit 17a77f49bc
4 changed files with 46 additions and 21 deletions

View File

@ -343,9 +343,11 @@ export async function build_move_topic_to_stream_popover(
message,
) {
const current_stream_name = sub_store.maybe_get_stream_name(current_stream_id);
const stream = sub_store.get(current_stream_id);
const args = {
topic_name,
current_stream_id,
stream,
notify_new_thread: message_edit.notify_new_thread_default,
notify_old_thread: message_edit.notify_old_thread_default,
from_message_actions_popover: message !== undefined,

View File

@ -882,14 +882,12 @@ ul.popover-group-menu-member-list {
#move_topic_to_stream_widget_wrapper {
display: flex;
margin-bottom: 10px;
.dropdown-widget-button {
outline: none;
/* 24px at 16px/1em */
line-height: 1.5em;
width: auto;
max-width: 206px;
width: 50%;
}
.dropdown_widget_value {
@ -917,12 +915,19 @@ ul.popover-group-menu-member-list {
}
.move_messages_edit_topic {
margin-bottom: 10px;
margin-bottom: unset;
box-sizing: border-box;
width: 100%;
height: auto;
}
.message_edit_topic_propagate {
width: 100%;
}
.topic_stream_edit_header {
display: flex;
flex-wrap: wrap;
flex-flow: column wrap;
justify-content: flex-start;
#select_stream_id {

View File

@ -935,12 +935,6 @@ div.focused-message-list {
outline: none;
}
#move_topic_modal select {
width: auto;
margin-bottom: 10px;
max-width: 100%;
}
.topic_move_breadcrumb_messages {
margin: 0 5px 5px 0;
align-self: center;

View File

@ -1,26 +1,50 @@
{{#unless (or from_message_actions_popover only_topic_edit)}}
<p class="white-space-preserve-wrap">{{#tr}}Move all messages in <strong>{topic_name}</strong>{{/tr}} to:</p>
<p>
{{#tr}}
You are moving all messages from <z-stream></z-stream>
{{#*inline "z-stream"}}<b>{{> inline_decorated_stream_name stream=stream show_colored_icon=true}}</b>{{/inline}}
{{/tr}}
<i class="fa fa-angle-right" aria-hidden="true"></i>
{{#tr}}<b>{topic_name}.</b>{{/tr}}
</p>
{{/unless}}
<form id="move_topic_form">
{{#if only_topic_edit }}
<p>{{t "Rename topic to:" }}</p>
{{else if from_message_actions_popover}}
<p>{{t "Move messages to:" }}</p>
<p>
{{#tr}}
You are moving messages from <z-stream></z-stream>
{{#*inline "z-stream"}}<b>{{> inline_decorated_stream_name stream=stream show_colored_icon=true}}</b>{{/inline}}
{{/tr}}
<i class="fa fa-angle-right" aria-hidden="true"></i>
{{#tr}}<b>{topic_name}.</b>{{/tr}}
</p>
{{/if}}
<div class="topic_stream_edit_header">
{{#unless only_topic_edit}}
{{> dropdown_widget_wrapper widget_name="move_topic_to_stream"}}
<i class="fa fa-angle-right" aria-hidden="true"></i>
<div class="input-group">
<label class="modal-field-label">New channel</label>
{{> dropdown_widget_wrapper widget_name="move_topic_to_stream"}}
</div>
{{/unless}}
<input name="new_topic_name" type="text" class="move_messages_edit_topic modal_text_input" autocomplete="off" value="{{topic_name}}" {{#if disable_topic_input}}disabled{{/if}} />
<div class="input-group">
{{#unless only_topic_edit}}
<label for="move-topic-new-topic-name" class="modal-field-label">New topic</label>
{{/unless}}
<input id="move-topic-new-topic-name" name="new_topic_name" type="text" class="move_messages_edit_topic modal_text_input" autocomplete="off" value="{{topic_name}}" {{#if disable_topic_input}}disabled{{/if}} />
</div>
<input name="old_topic_name" type="hidden" value="{{topic_name}}" />
<input name="current_stream_id" type="hidden" value="{{current_stream_id}}" />
{{#if from_message_actions_popover}}
<select class="message_edit_topic_propagate modal_select bootstrap-focus-style">
<option value="change_one" {{#if (eq message_placement "last")}}selected{{/if}}> {{t "Move only this message" }}</option>
<option value="change_later" {{#if (eq message_placement "intermediate")}}selected{{/if}}> {{t "Move this and all following messages in this topic" }}</option>
<option value="change_all" {{#if (eq message_placement "first")}}selected{{/if}}> {{t "Move all messages in this topic" }}</option>
</select>
<div class="input-group">
<label for="move-topic-select-propagation-mode">{{t "Which messages should be moved?"}}</label>
<select id="move-topic-select-propagation-mode" class="message_edit_topic_propagate modal_select bootstrap-focus-style">
<option value="change_one" {{#if (eq message_placement "last")}}selected{{/if}}> {{t "Move only this message" }}</option>
<option value="change_later" {{#if (eq message_placement "intermediate")}}selected{{/if}}> {{t "Move this and all following messages in this topic" }}</option>
<option value="change_all" {{#if (eq message_placement "first")}}selected{{/if}}> {{t "Move all messages in this topic" }}</option>
</select>
</div>
{{/if}}
<div class="topic_move_breadcrumb_messages">
<label class="checkbox">