IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs
View File

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

2
app/assets/javascripts/discourse/app/components/sidebar/section-form-link.js
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;

1
app/assets/stylesheets/mobile/_index.scss
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";

8
app/assets/stylesheets/mobile/sidebar.scss Normal file
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;
}
}
}

21
spec/system/custom_sidebar_sections_spec.rb
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")