diff --git a/web/src/portico/help.ts b/web/src/portico/help.ts index 6e9aaa3f66..e658f6deb5 100644 --- a/web/src/portico/help.ts +++ b/web/src/portico/help.ts @@ -9,8 +9,6 @@ import * as common from "../common.ts"; import {show_copied_confirmation} from "../copied_tooltip.ts"; import * as util from "../util.ts"; -import {activate_correct_tab} from "./tabbed-instructions.ts"; - function register_tabbed_section($tabbed_section: JQuery): void { const $li = $tabbed_section.find("ul.nav li"); const $blocks = $tabbed_section.find(".blocks div"); @@ -66,7 +64,6 @@ function add_copy_to_clipboard_element($codehilite: JQuery): void { function render_tabbed_sections(): void { $(".tabbed-section").each(function () { - activate_correct_tab($(this)); register_tabbed_section($(this)); }); diff --git a/web/src/portico/tabbed-instructions.ts b/web/src/portico/tabbed-instructions.ts index f4a588eedc..b49349e14a 100644 --- a/web/src/portico/tabbed-instructions.ts +++ b/web/src/portico/tabbed-instructions.ts @@ -1,8 +1,4 @@ -import $ from "jquery"; - -import * as blueslip from "../blueslip.ts"; import * as common from "../common.ts"; -import * as util from "../util.ts"; export type UserOS = "android" | "ios" | "mac" | "windows" | "linux"; @@ -24,50 +20,3 @@ export function detect_user_os(): UserOS { } return "mac"; // if unable to determine OS return Mac by default } - -export function activate_correct_tab($tabbed_section: JQuery): void { - const user_os = detect_user_os(); - const desktop_os = new Set(["mac", "linux", "windows"]); - const $li = $tabbed_section.find("ul.nav li"); - const $blocks = $tabbed_section.find(".blocks div"); - - $li.each(function () { - const tab_key = this.dataset.tabKey; - $(this).removeClass("active"); - if (tab_key === user_os) { - $(this).addClass("active"); - } - - if (desktop_os.has(user_os) && tab_key === "desktop-web") { - $(this).addClass("active"); - } - }); - - $blocks.each(function () { - const tab_key = this.dataset.tabKey; - $(this).removeClass("active"); - if (tab_key === user_os) { - $(this).addClass("active"); - } - - if (desktop_os.has(user_os) && tab_key === "desktop-web") { - $(this).addClass("active"); - } - }); - - // if no tab was activated, just activate the first one - const $active_list_items = $li.filter(".active"); - if ($active_list_items.length === 0) { - $li.first().addClass("active"); - const tab_key = util.the($li.first()).dataset.tabKey; - if (tab_key) { - $blocks.filter("[data-tab-key=" + tab_key + "]").addClass("active"); - } else { - blueslip.error("Tabbed instructions widget has no tabs to activate!"); - } - } -} - -$(".tabbed-section").each(function () { - activate_correct_tab($(this)); -}); diff --git a/web/webpack.assets.json b/web/webpack.assets.json index 0ab41dbf2f..85d131672e 100644 --- a/web/webpack.assets.json +++ b/web/webpack.assets.json @@ -49,8 +49,7 @@ "./src/bundles/portico.ts", "simplebar/dist/simplebar.css", "simplebar", - "./src/portico/help.ts", - "./src/portico/tabbed-instructions.ts" + "./src/portico/help.ts" ], "landing-page": [ "./src/bundles/portico.ts", diff --git a/zerver/lib/markdown/tabbed_sections.py b/zerver/lib/markdown/tabbed_sections.py index 41cad230d3..ad6aa5b8c0 100644 --- a/zerver/lib/markdown/tabbed_sections.py +++ b/zerver/lib/markdown/tabbed_sections.py @@ -29,11 +29,11 @@ NAV_BAR_TEMPLATE = """ """.strip() NAV_LIST_ITEM_TEMPLATE = """ -
  • {label}
    • +
  • {label}
    • """.strip() DIV_TAB_CONTENT_TEMPLATE = """ -
    +
    {content}
    """.strip() @@ -177,6 +177,7 @@ def generate_content_blocks( content = "\n".join(lines[start_index:end_index]).strip() tab_content_block = tab_content_template.format( + class_="active" if index == 0 else "", data_tab_key=tab["tab_key"], # This attribute is not used directly in this file here, # we need this for the current conversion script in for @@ -223,15 +224,16 @@ class TabbedSectionsPreprocessor(Preprocessor): def generate_nav_bar(self, tab_section: dict[str, Any]) -> str: li_elements = [] - for tab in tab_section["tabs"]: + for index, tab in enumerate(tab_section["tabs"]): tab_key = tab.get("tab_key") tab_label = TAB_SECTION_LABELS.get(tab_key) if tab_label is None: raise ValueError( f"Tab '{tab_key}' is not present in TAB_SECTION_LABELS in zerver/lib/markdown/tabbed_sections.py" ) + class_ = "active" if index == 0 else "" - li = NAV_LIST_ITEM_TEMPLATE.format(data_tab_key=tab_key, label=tab_label) + li = NAV_LIST_ITEM_TEMPLATE.format(class_=class_, data_tab_key=tab_key, label=tab_label) li_elements.append(li) return NAV_BAR_TEMPLATE.format(tabs="\n".join(li_elements)) diff --git a/zerver/tests/test_templates.py b/zerver/tests/test_templates.py index e5305e3a7e..f6208b9d51 100644 --- a/zerver/tests/test_templates.py +++ b/zerver/tests/test_templates.py @@ -38,11 +38,11 @@ header

    -

    +

    iOS instructions

    @@ -56,11 +56,11 @@ header

      -
    • Desktop/Web
      • -
    • Android
      • +
    • Desktop/Web
      • +
    • Android
    -

    +

    Desktop/browser instructions

    @@ -74,10 +74,10 @@ header

      -
    • Instructions for all platforms
      • +
    • Instructions for all platforms
    -

    +

    Instructions for all platforms