UX: hide the draggable icon in the sidebar form on mobile (#25738)

Drag and drop link works only on desktop. Therefore, the drag icon should be hidden on mobile.
This commit is contained in:
Krzysztof Kotlarek
2024-02-21 09:16:49 +11:00
committed by GitHub
parent ed47b55026
commit ee393a7953
5 changed files with 37 additions and 3 deletions

View File

@@ -13,9 +13,11 @@
{{on "drop" this.dropItem}} {{on "drop" this.dropItem}}
role="row" role="row"
> >
<div class="draggable" data-link-name={{@link.name}}> {{#unless this.site.mobileView}}
{{d-icon "grip-lines"}} <div class="draggable" data-link-name={{@link.name}}>
</div> {{d-icon "grip-lines"}}
</div>
{{/unless}}
<div class="input-group" role="cell"> <div class="input-group" role="cell">
<IconPicker <IconPicker
@name="icon" @name="icon"

View File

@@ -1,9 +1,11 @@
import Component from "@glimmer/component"; import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking"; import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object"; import { action } from "@ember/object";
import { inject as service } from "@ember/service";
import discourseLater from "discourse-common/lib/later"; import discourseLater from "discourse-common/lib/later";
export default class SectionFormLink extends Component { export default class SectionFormLink extends Component {
@service site;
@tracked dragCssClass; @tracked dragCssClass;
dragCount = 0; dragCount = 0;

View File

@@ -27,6 +27,7 @@
@import "push-notifications-mobile"; @import "push-notifications-mobile";
@import "reviewables"; @import "reviewables";
@import "search"; @import "search";
@import "sidebar";
@import "tagging"; @import "tagging";
@import "topic-list"; @import "topic-list";
@import "topic-post"; @import "topic-post";

View File

@@ -0,0 +1,8 @@
.sidebar-section-form-modal {
.row-wrapper {
grid-template-columns: 4.5em repeat(2, 1fr) 2em;
.link-icon {
grid-column: 1;
}
}
}

View File

@@ -190,6 +190,27 @@ describe "Custom sidebar sections", type: :system do
) )
end end
it "does not allow to drag on mobile" do
sidebar_section = Fabricate(:sidebar_section, title: "My section", user: user)
Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags").tap do |sidebar_url|
Fabricate(:sidebar_section_link, sidebar_section: sidebar_section, linkable: sidebar_url)
end
Fabricate(:sidebar_url, name: "Sidebar Categories", value: "/categories").tap do |sidebar_url|
Fabricate(:sidebar_section_link, sidebar_section: sidebar_section, linkable: sidebar_url)
end
sign_in user
visit("/latest?mobile_view=1")
sidebar.open_on_mobile
sidebar.edit_custom_section("My section")
expect(page).not_to have_css(".sidebar-section-form-link .draggable")
end
it "does not allow the user to edit public section" do it "does not allow the user to edit public section" do
sidebar_section = Fabricate(:sidebar_section, title: "Public section", public: true) sidebar_section = Fabricate(:sidebar_section, title: "Public section", public: true)
sidebar_url_1 = Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags") sidebar_url_1 = Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags")