channel-folders: Add UI to create new channel folder.

This commit adds a button besides the folder dropdowin in
stream settings UI which can be used to create a new folder.
This commit is contained in:
Sahil Batra
2025-05-29 18:22:10 +05:30
committed by Tim Abbott
parent 7c01e61e5a
commit 32287a084b
10 changed files with 143 additions and 1 deletions

View File

@@ -0,0 +1,12 @@
<div>
<label for="new_channel_folder_name" class="modal-field-label">
{{t 'Channel folder name' }}
</label>
<input type="text" id="new_channel_folder_name" class="modal_text_input" name="channel_folder_name" maxlength="{{ max_channel_folder_name_length }}" />
</div>
<div>
<label for="new_channel_folder_description" class="modal-field-label">
{{t 'Description' }}
</label>
<textarea id="new_channel_folder_description" class="settings_textarea" name="channel_folder_description" maxlength="{{ max_channel_folder_description_length }}"></textarea>
</div>

View File

@@ -88,6 +88,7 @@
prefix="id_"
group_setting_labels=../group_setting_labels
channel_folder_widget_name="folder_id"
is_admin=../is_admin
}}
{{/with}}
<div class="stream_details_box">

View File

@@ -52,12 +52,26 @@
</div>
<div class="input-group channel-folder-container">
{{!-- This is a modified version of dropdown_widget_with_label.hbs
component so that we can show dropdown button and button to create
a new folder on same line without having to add much CSS with
hardcoded margin and padding values. --}}
<label class="settings-field-label" for="{{channel_folder_widget_name}}_widget">
{{t "Channel folder"}}
</label>
<span class="prop-element hide" id="id_{{channel_folder_widget_name}}" data-setting-widget-type="dropdown-list-widget" data-setting-value-type="number"></span>
<div class="dropdown_widget_with_label_wrapper channel-folder-widget-container">
{{> ../dropdown_widget widget_name=channel_folder_widget_name}}
{{#if is_admin}}
{{> ../components/action_button
label=(t "Create new folder")
attention="quiet"
intent="neutral"
type="button"
custom_classes="create-channel-folder-button"
}}
{{/if}}
</div>
</div>
</div>