Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

change_stream_info_modal: Migrate modal to dialog_widget. 

The CSS changes make the description input box a more likely size for
what currently makes sense for stream descriptions.
This commit is contained in:
Ganesh Pawar 2021-07-17 20:14:31 +05:30 committed by Tim Abbott
parent 8c7d320422
commit 8cc781f0c8
3 changed files with 34 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
static/js/stream_edit.js
View File

@ -14,6 +14,7 @@ import * as browser_history from "./browser_history";
import * as channel from "./channel"; import * as channel from "./channel";
import * as components from "./components"; import * as components from "./components";
import * as confirm_dialog from "./confirm_dialog"; import * as confirm_dialog from "./confirm_dialog";
import * as dialog_widget from "./dialog_widget";
import * as hash_util from "./hash_util"; import * as hash_util from "./hash_util";
import {$t, $t_html} from "./i18n"; import {$t, $t_html} from "./i18n";
import * as input_pill from "./input_pill"; import * as input_pill from "./input_pill";
@ -794,14 +795,24 @@ export function initialize() {
const stream_id = get_stream_id(e.target); const stream_id = get_stream_id(e.target);
const stream = sub_store.get(stream_id); const stream = sub_store.get(stream_id);
const template_data = { const template_data = {
stream_id,
stream_name: stream.name, stream_name: stream.name,
stream_description: stream.description, stream_description: stream.description,
}; };
const change_stream_info_modal = render_change_stream_info_modal(template_data); const change_stream_info_modal = render_change_stream_info_modal(template_data);
$("#change_stream_info_modal").remove(); dialog_widget.launch({
$("#subscriptions_table").append(change_stream_info_modal); html_heading: $t_html(
overlays.open_modal("#change_stream_info_modal"); {defaultMessage: "Edit #{stream_name}"},
{stream_name: stream.name},
),
html_body: change_stream_info_modal,
id: "change_stream_info_modal",
on_click: save_stream_info,
post_render: () => {
$("#change_stream_info_modal .dialog_submit_button")
.addClass("save-button")
.attr("data-stream-id", stream_id);
},
});
}); });
$("#subscriptions_table").on("keypress", "#change_stream_description", (e) => { $("#subscriptions_table").on("keypress", "#change_stream_description", (e) => {
@ -813,7 +824,7 @@ export function initialize() {
return true; return true;
}); });
$("#subscriptions_table").on("click", "#save_stream_info", (e) => { function save_stream_info(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const sub = get_sub_for_target(e.currentTarget); const sub = get_sub_for_target(e.currentTarget);
@ -834,9 +845,9 @@ export function initialize() {
} }
const status_element = $(".stream_change_property_info"); const status_element = $(".stream_change_property_info");
overlays.close_modal("#change_stream_info_modal"); dialog_widget.close_modal();
settings_ui.do_settings_change(channel.patch, url, data, status_element); settings_ui.do_settings_change(channel.patch, url, data, status_element);
}); }
$("#subscriptions_table").on( $("#subscriptions_table").on(
"click", "click",

16
static/styles/subscriptions.css
View File

@ -1070,17 +1070,11 @@
} }
} }
#change_stream_info_modal { #change_stream_description {
.modal-header h3 { width: 100%;
text-overflow: ellipsis; height: 80px;
overflow: hidden; margin-bottom: 4px;
} box-sizing: border-box;
#change_stream_description {
width: 80%;
max-width: 500px;
box-sizing: border-box;
}
} }
#stream_privacy_modal .modal-body { #stream_privacy_modal .modal-body {

44
static/templates/stream_settings/change_stream_info_modal.hbs
View File

@ -1,34 +1,12 @@
<div id="change_stream_info_modal" class="modal modal-bg hide fade new-style" tabindex="-1" <div>
role="dialog" aria-labelledby="change_stream_info_label" aria-hidden="true"> <label for="change_stream_name">
<div class="modal-header"> {{t 'Stream name' }}
<button type="button" class="close close-change-stream-info-modal" data-dismiss="modal" aria-label="{{t 'Close' }}"> </label>
<span aria-hidden="true">&times;</span> <input type="text" id="change_stream_name" value="{{ stream_name }}" />
</button> </div>
<h3 id="change_stream_info_label"> <div>
{{#tr}}Edit #{stream_name}{{/tr}} <label for="change_stream_description">
<span class="email"></span> {{t 'Description' }}
</h3> </label>
</div> <textarea id="change_stream_description" maxlength="1000">{{ stream_description }}</textarea>
<div class="modal-body">
<div class="input-group">
<label for="change_stream_name">
{{t 'Stream name' }}
</label>
<input type="text" id="change_stream_name" value="{{ stream_name }}" />
</div>
<div class="input-group">
<label for="change_stream_description">
{{t 'Description' }}
</label>
<textarea id="change_stream_description" maxlength="1000">{{ stream_description }}</textarea>
</div>
</div>
<div class="modal-footer">
<button class=" button rounded close-change-stream-info-modal" data-dismiss="modal">{{t "Cancel" }}</button>
<button class="button rounded btn-danger save-button" id="save_stream_info"
tabindex="-1" data-stream-id="{{stream_id}}">
{{t "Save changes"}}
</button>
</div>
</div> </div>