diff --git a/web/src/stream_settings_ui.js b/web/src/stream_settings_ui.js index 1d4ff231ab..c2c6a25c48 100644 --- a/web/src/stream_settings_ui.js +++ b/web/src/stream_settings_ui.js @@ -2,6 +2,7 @@ import $ from "jquery"; import _ from "lodash"; import render_stream_creation_confirmation_banner from "../templates/modal_banner/stream_creation_confirmation_banner.hbs"; +import render_stream_info_banner from "../templates/modal_banner/stream_info_banner.hbs"; import render_browse_streams_list from "../templates/stream_settings/browse_streams_list.hbs"; import render_browse_streams_list_item from "../templates/stream_settings/browse_streams_list_item.hbs"; import render_stream_settings from "../templates/stream_settings/stream_settings.hbs"; @@ -705,6 +706,18 @@ export function setup_page(callback) { throttled_redraw_left_panel(); }); + const context = { + banner_type: compose_banner.INFO, + classname: "stream_info", + hide_close_button: true, + button_text: $t({defaultMessage: "Learn more"}), + button_link: "/help/introduction-to-channels", + }; + + $("#channels_overlay_container .nothing-selected .stream-info-banner").html( + render_stream_info_banner(context), + ); + // When hitting Enter in the stream creation box, we open the // "create stream" UI with the stream name prepopulated. This // is only useful if the user has permission to create diff --git a/web/src/user_group_edit.js b/web/src/user_group_edit.js index cc7439e9b4..adcd642ab8 100644 --- a/web/src/user_group_edit.js +++ b/web/src/user_group_edit.js @@ -1,6 +1,7 @@ import $ from "jquery"; import render_confirm_delete_user from "../templates/confirm_dialog/confirm_delete_user.hbs"; +import render_group_info_banner from "../templates/modal_banner/user_group_info_banner.hbs"; import render_browse_user_groups_list_item from "../templates/user_group_settings/browse_user_groups_list_item.hbs"; import render_cannot_deactivate_group_banner from "../templates/user_group_settings/cannot_deactivate_group_banner.hbs"; import render_change_user_group_info_modal from "../templates/user_group_settings/change_user_group_info_modal.hbs"; @@ -11,6 +12,7 @@ import * as blueslip from "./blueslip"; import * as browser_history from "./browser_history"; import * as channel from "./channel"; import * as components from "./components"; +import * as compose_banner from "./compose_banner"; import * as confirm_dialog from "./confirm_dialog"; import * as dialog_widget from "./dialog_widget"; import * as hash_util from "./hash_util"; @@ -866,6 +868,18 @@ export function setup_page(callback) { ); $groups_overlay_container.html(groups_overlay_html); + const context = { + banner_type: compose_banner.INFO, + classname: "group_info", + hide_close_button: true, + button_text: $t({defaultMessage: "Learn more"}), + button_link: "/help/user-groups", + }; + + $("#groups_overlay_container .nothing-selected .group-info-banner").html( + render_group_info_banner(context), + ); + // Initially as the overlay is build with empty right panel, // active_group_id is undefined. user_group_components.reset_active_group_id(); diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css index 0757a6f5a7..cfa53783b5 100644 --- a/web/styles/subscriptions.css +++ b/web/styles/subscriptions.css @@ -365,9 +365,9 @@ h4.user_group_setting_subsection_title { .left .no-streams-to-show, .left .no-groups-to-show, - .right .nothing-selected { + .right .nothing-selected .create-stream-button-container, + .right .nothing-selected .create-group-button-container { display: block; - margin-top: calc(45vh - 75px); text-align: center; font-size: 1em; margin-left: 2em; @@ -378,6 +378,28 @@ h4.user_group_setting_subsection_title { } } + .left .no-streams-to-show, + .left .no-groups-to-show { + margin-top: calc(45vh - 75px); + } + + .right .nothing-selected { + padding: 5px 5px 0; + + .stream-info-banner a, + .group-info-banner a { + color: inherit; + } + + .create-stream-button-container { + margin-top: calc(45vh - 128px); + } + + .create-group-button-container { + margin-top: calc(45vh - 134px); + } + } + .left { border-right: 1px solid var(--color-border-modal-bar); @@ -398,12 +420,11 @@ h4.user_group_setting_subsection_title { .right { width: calc(50% + 1px); - .nothing-selected { - & button { - padding: 6px 10px 8px; - display: block; - margin: 0 auto 10px; - } + .nothing-selected .create_stream_button, + .nothing-selected .create_user_group_button { + padding: 6px 10px 8px; + display: block; + margin: 0 auto 10px; } .display-type { diff --git a/web/templates/modal_banner/modal_banner.hbs b/web/templates/modal_banner/modal_banner.hbs index 577d582573..e2fac4f432 100644 --- a/web/templates/modal_banner/modal_banner.hbs +++ b/web/templates/modal_banner/modal_banner.hbs @@ -6,8 +6,14 @@
{{/if}} {{#if button_text}} + {{#if button_link}} + + + + {{else}} {{/if}} + {{/if}} {{#unless hide_close_button}} diff --git a/web/templates/modal_banner/stream_info_banner.hbs b/web/templates/modal_banner/stream_info_banner.hbs new file mode 100644 index 0000000000..a2b3739e1f --- /dev/null +++ b/web/templates/modal_banner/stream_info_banner.hbs @@ -0,0 +1,5 @@ +{{#> modal_banner }} + +{{/modal_banner}} diff --git a/web/templates/modal_banner/user_group_info_banner.hbs b/web/templates/modal_banner/user_group_info_banner.hbs new file mode 100644 index 0000000000..417adc794c --- /dev/null +++ b/web/templates/modal_banner/user_group_info_banner.hbs @@ -0,0 +1,5 @@ +{{#> modal_banner }} + +{{/modal_banner}} diff --git a/web/templates/stream_settings/stream_settings_overlay.hbs b/web/templates/stream_settings/stream_settings_overlay.hbs index 675929eb41..b6976fec79 100644 --- a/web/templates/stream_settings/stream_settings_overlay.hbs +++ b/web/templates/stream_settings/stream_settings_overlay.hbs @@ -63,19 +63,15 @@