-
-
Notifications
You must be signed in to change notification settings - Fork 7.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
todo_list: Add option for modal to create todo-lists.
Previously, the `/todo` slash command was the sole method for creating todos. Now, a button has been introduced to launch a modal for creating todo-lists directly from the compose box. This button becomes enabled only when the compose box is empty, thereby avoiding complexities associated with losing or having to save drafts of any messages already being composed. The modal features a form that, upon submission, generates a message using the `/todo` syntax and the data inputted in the form. Subsequently, the content of the compose box is set to this message, which the user can then send. Added polls and todo lists into their own section on the right, positioned just before the `?` icon. This modal closely parallels the UI for adding a poll. Fixes: #29779.
- Loading branch information
1 parent
3269445
commit ffb04e0
Showing
14 changed files
with
214 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
[ZoneTransfer] | ||
ZoneId=3 | ||
HostUrl=https://chat.zulip.org/user_uploads/2/e1/-VNXP7pLNPZ28w0swnj00_nW/todo-list.svg |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import $ from "jquery"; | ||
import SortableJS from "sortablejs"; | ||
|
||
import render_todo_modal_task from "../templates/todo_modal_task.hbs"; | ||
|
||
function create_option_row($last_option_row_input: JQuery): void { | ||
const row_html = render_todo_modal_task(); | ||
const $row_container = $last_option_row_input.closest(".simplebar-content"); | ||
$row_container.append($(row_html)); | ||
} | ||
|
||
function add_option_row(e: JQuery.TriggeredEvent): void { | ||
// if the option triggering the input event e is not the last, | ||
// that is, its next sibling has the class `option-row`, we | ||
// do not add a new option row and return from this function | ||
// This handles a case when the next empty input row is already | ||
// added and user is updating the above row(s). | ||
if ($(e.target).closest(".option-row").next().hasClass("option-row")) { | ||
return; | ||
} | ||
create_option_row($(e.target)); | ||
} | ||
|
||
function delete_option_row(e: JQuery.ClickEvent): void { | ||
const $row = $(e.target).closest(".option-row"); | ||
$row.remove(); | ||
} | ||
|
||
export function todo_list_tasks_setup(): void { | ||
const $todo_options_list = $("#add-todo-form .todo-options-list"); | ||
|
||
$todo_options_list.on("input", "input.todo-input", add_option_row); | ||
$todo_options_list.on("input", "input.todo-description-input", add_option_row); | ||
$todo_options_list.on("click", "button.delete-option", delete_option_row); | ||
|
||
// setTimeout is needed to here to give time for simplebar to initialise | ||
setTimeout(() => { | ||
SortableJS.create($("#add-todo-form .todo-options-list .simplebar-content")[0], { | ||
onUpdate() { | ||
// Do nothing on drag; the order is only processed on submission. | ||
}, | ||
// We don't want the last (empty) row to be draggable, as a new row | ||
// is added on input event of the last row. | ||
filter: "input, .option-row:last-child", | ||
preventOnFilter: false, | ||
}); | ||
}, 0); | ||
} | ||
|
||
export function frame_todo_message_content(): string { | ||
const title = $<HTMLInputElement>("input#todo-title-input").val()?.toString().trim() ?? ""; | ||
const todo_str = title ? `/todo ${title}\n` : ""; | ||
|
||
const todos: string[] = []; | ||
|
||
$(".option-row").each(function () { | ||
const todo_name = $(this).find(".todo-input").val()?.toString().trim() ?? ""; | ||
const todo_description = | ||
$(this).find(".todo-description-input").val()?.toString().trim() ?? ""; | ||
|
||
if (todo_name) { | ||
todos.push(`${todo_name}: ${todo_description}`); | ||
} | ||
}); | ||
|
||
return todo_str + todos.join("\n"); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<form id="add-todo-form" class="new-style"> | ||
<label class="todo-label">{{t "To-do list title"}}</label> | ||
<div class="todo-title-input-container"> | ||
<input type="text" id="todo-title-input" class="modal_text_input" placeholder="{{t 'Task list'}}" /> | ||
</div> | ||
<label class="todo-label">{{t "Tasks"}}</label> | ||
<p>{{t "Anyone can add more tasks after the to-do list is posted."}}</p> | ||
<ul class="todo-options-list" data-simplebar> | ||
{{> todo_modal_task }} | ||
{{> todo_modal_task }} | ||
{{> todo_modal_task }} | ||
</ul> | ||
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<li class="option-row"> | ||
<i class="zulip-icon zulip-icon-grip-vertical drag-icon"></i> | ||
<input type="text" class="todo-input modal_text_input" placeholder="{{t 'New task'}}" /> | ||
<input type="text" class="todo-description-input modal_text_input" placeholder="{{t 'Task description (optional)'}}" /> | ||
<button type="button" class="button rounded small btn-secondary delete-option" title="{{t 'Delete' }}"> | ||
<i class="fa fa-trash-o" aria-hidden="true"></i> | ||
</button> | ||
</li> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters