Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add support for toggling between mobile and desktop view on sidebar (#17794) 

In the current hamburger menu dropdown, we have a link which allows users to toggle between mobile and desktop view on mobile and touch devices. This commit brings the same behaviour to sidebar.
This commit is contained in:
Alan Guo Xiang Tan 2022-08-04 14:26:35 +08:00 committed by GitHub
parent e09fd7cde2
commit a36584b8c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs
View File

@ -1,6 +1,14 @@
<div class="sidebar-footer-wrapper">
<div class="sidebar-footer-container">
<div class="sidebar-footer-actions">
{{#if (or this.site.mobileView (and this.siteSettings.enable_mobile_theme this.capabilities.touch))}}
<DButton
@action={{route-action "toggleMobileView"}}
@title={{if this.site.mobileView "desktop_view" "mobile_view"}}
@icon={{if this.site.mobileView "desktop" "mobile-alt"}}
@class="sidebar-footer-actions-button sidebar-footer-actions-toggle-mobile-view" />
{{/if}}
<DButton
@action={{route-action "showKeyboardShortcutsHelp"}}
@title="keyboard_shortcuts_help.title"

22
app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js
View File

@ -1,5 +1,8 @@
import I18n from "I18n";
import { test } from "qunit";
import { click, visit } from "@ember/test-helpers";
import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
acceptance("Sidebar - Mobile - User with sidebar enabled", function (needs) {
@ -66,4 +69,23 @@ acceptance("Sidebar - Mobile - User with sidebar enabled", function (needs) {
"sidebar is not collapsed when clicking on caret to collapse a section in sidebar"
);
});
test("button to toggle between mobile and desktop view", async function (assert) {
await visit("/");
await click(".hamburger-dropdown");
assert.ok(
exists(
`.sidebar-footer-actions-toggle-mobile-view[title="${I18n.t(
"desktop_view"
)}"]`
),
"displays the right title for the button"
);
assert.ok(
exists(".sidebar-footer-actions-toggle-mobile-view .d-icon-desktop"),
"displays the desktop icon for the button"
);
});
});

21
app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js
View File

@ -170,5 +170,26 @@ acceptance(
"hides the sidebar dropdown"
);
});
test("button to toggle between mobile and desktop view on touch devices ", async function (assert) {
const capabilities = this.container.lookup("capabilities:main");
capabilities.touch = true;
await visit("/");
assert.ok(
exists(
`.sidebar-footer-actions-toggle-mobile-view[title="${I18n.t(
"mobile_view"
)}"]`
),
"displays the right title for the button"
);
assert.ok(
exists(".sidebar-footer-actions-toggle-mobile-view .d-icon-mobile-alt"),
"displays the mobile icon for the button"
);
});
}
);