Skip to content

Commit 707425d

Browse files
angusmcleodangusmcleod
authored
Merge pull request #14 from Arkshine/toggle-header-dropdown
DEV: Improve header dropdown toggle on mobile view
2 parents ab180af + ac025ad commit 707425d

File tree

15 files changed

+1521
-1942
lines changed

15 files changed

+1521
-1942
lines changed

‎.rubocop.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
inherit_gem:
2+
rubocop-discourse: stree-compat.yml

‎Gemfile‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# frozen_string_literal: true
2+
3+
source "https://rubygems.org"
4+
5+
group :development do
6+
gem "rubocop-discourse"
7+
gem "syntax_tree"
8+
end

‎Gemfile.lock‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
GEM
2+
remote: https://rubygems.org/
3+
specs:
4+
activesupport (8.0.2)
5+
base64
6+
benchmark (>= 0.3)
7+
bigdecimal
8+
concurrent-ruby (~> 1.0, >= 1.3.1)
9+
connection_pool (>= 2.2.5)
10+
drb
11+
i18n (>= 1.6, < 2)
12+
logger (>= 1.4.2)
13+
minitest (>= 5.1)
14+
securerandom (>= 0.3)
15+
tzinfo (~> 2.0, >= 2.0.5)
16+
uri (>= 0.13.1)
17+
ast (2.4.3)
18+
base64 (0.3.0)
19+
benchmark (0.4.1)
20+
bigdecimal (3.2.2)
21+
concurrent-ruby (1.3.5)
22+
connection_pool (2.5.3)
23+
drb (2.2.3)
24+
i18n (1.14.7)
25+
concurrent-ruby (~> 1.0)
26+
json (2.12.2)
27+
language_server-protocol (3.17.0.5)
28+
lint_roller (1.1.0)
29+
logger (1.7.0)
30+
minitest (5.25.5)
31+
parallel (1.27.0)
32+
parser (3.3.8.0)
33+
ast (~> 2.4.1)
34+
racc
35+
prettier_print (1.2.1)
36+
prism (1.4.0)
37+
racc (1.8.1)
38+
rack (3.1.16)
39+
rainbow (3.1.1)
40+
regexp_parser (2.10.0)
41+
rubocop (1.76.0)
42+
json (~> 2.3)
43+
language_server-protocol (~> 3.17.0.2)
44+
lint_roller (~> 1.1.0)
45+
parallel (~> 1.10)
46+
parser (>= 3.3.0.2)
47+
rainbow (>= 2.2.2, < 4.0)
48+
regexp_parser (>= 2.9.3, < 3.0)
49+
rubocop-ast (>= 1.45.0, < 2.0)
50+
ruby-progressbar (~> 1.7)
51+
unicode-display_width (>= 2.4.0, < 4.0)
52+
rubocop-ast (1.45.0)
53+
parser (>= 3.3.7.2)
54+
prism (~> 1.4)
55+
rubocop-capybara (2.22.1)
56+
lint_roller (~> 1.1)
57+
rubocop (~> 1.72, >= 1.72.1)
58+
rubocop-discourse (3.12.1)
59+
activesupport (>= 6.1)
60+
lint_roller (>= 1.1.0)
61+
rubocop (>= 1.73.2)
62+
rubocop-capybara (>= 2.22.0)
63+
rubocop-factory_bot (>= 2.27.0)
64+
rubocop-rails (>= 2.30.3)
65+
rubocop-rspec (>= 3.0.1)
66+
rubocop-rspec_rails (>= 2.31.0)
67+
rubocop-factory_bot (2.27.1)
68+
lint_roller (~> 1.1)
69+
rubocop (~> 1.72, >= 1.72.1)
70+
rubocop-rails (2.32.0)
71+
activesupport (>= 4.2.0)
72+
lint_roller (~> 1.1)
73+
rack (>= 1.1)
74+
rubocop (>= 1.75.0, < 2.0)
75+
rubocop-ast (>= 1.44.0, < 2.0)
76+
rubocop-rspec (3.6.0)
77+
lint_roller (~> 1.1)
78+
rubocop (~> 1.72, >= 1.72.1)
79+
rubocop-rspec_rails (2.31.0)
80+
lint_roller (~> 1.1)
81+
rubocop (~> 1.72, >= 1.72.1)
82+
rubocop-rspec (~> 3.5)
83+
ruby-progressbar (1.13.0)
84+
securerandom (0.4.1)
85+
syntax_tree (6.2.0)
86+
prettier_print (>= 1.2.0)
87+
tzinfo (2.0.6)
88+
concurrent-ruby (~> 1.0)
89+
unicode-display_width (3.1.4)
90+
unicode-emoji (~> 4.0, >= 4.0.4)
91+
unicode-emoji (4.0.4)
92+
uri (1.0.3)
93+
94+
PLATFORMS
95+
ruby
96+
97+
DEPENDENCIES
98+
rubocop-discourse
99+
syntax_tree
100+
101+
BUNDLED WITH
102+
2.6.9

‎about.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@
33
"component": true,
44
"about_url": "https://github.com/paviliondev/discourse-dropdown-header",
55
"license_url": "https://github.com/paviliondev/discourse-dropdown-header/blob/main/LICENSE.txt",
6-
"theme_version": "1.1",
6+
"theme_version": "1.2",
77
"assets": {},
88
"modifiers": {
9-
"svg_icons": [
10-
"square-caret-down"
11-
]
9+
"svg_icons": ["square-caret-down"]
1210
}
1311
}

‎common/common.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525

2626
&-icon {
2727
margin-right: 0.5rem;
28+
2829
img {
2930
width: 1.5em;
3031
height: 1.5em;
@@ -33,11 +34,32 @@
3334

3435
&-caret {
3536
margin-left: 0.5rem;
37+
3638
svg {
3739
transition: transform 0.25s ease;
3840
}
3941
}
4042

43+
&.has-dropdown {
44+
&.is-open {
45+
.custom-header-link-caret svg {
46+
transform: rotate(0deg);
47+
}
48+
}
49+
50+
&:not(.is-open) {
51+
.custom-header-dropdown {
52+
transform: scale(0);
53+
opacity: 0;
54+
position: absolute;
55+
}
56+
57+
.custom-header-link-caret svg {
58+
transform: rotate(90deg);
59+
}
60+
}
61+
}
62+
4163
&:hover {
4264
color: $main_link_hover_color;
4365

@@ -62,6 +84,7 @@
6284
min-width: 200px;
6385
max-width: 280px;
6486
list-style: none;
87+
opacity: 1;
6588
transform: scale(0);
6689
transition: transform 0.2s ease;
6790
transition-delay: 0.1s;

‎desktop/desktop.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
display: flex;
66
}
77

8-
@media screen and (max-width: 712px) {
8+
@media screen and (width <= 712px) {
99
display: none;
1010
}
1111
}

‎javascripts/discourse/components/custom-header-link.gjs‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
1+
import { tracked } from "@glimmer/tracking";
12
import Component from "@ember/component";
23
import { fn } from "@ember/helper";
34
import { on } from "@ember/modifier";
45
import { action } from "@ember/object";
56
import { notEmpty } from "@ember/object/computed";
6-
import { inject as service } from "@ember/service";
7+
import { service } from "@ember/service";
8+
import { and, not } from "truth-helpers";
79
import concatClass from "discourse/helpers/concat-class";
10+
import dIcon from "discourse/helpers/d-icon";
811
import DiscourseURL from "discourse/lib/url";
9-
import dIcon from "discourse-common/helpers/d-icon";
1012
import CustomIcon from "./custom-icon";
1113

1214
export default class CustomHeaderLink extends Component {
1315
@service siteSettings;
1416
@service site;
1517
@service currentUser;
1618

19+
@tracked dropdownOpen = true;
20+
1721
@notEmpty("dropdownLinks") hasDropdown;
1822

1923
get shouldDisplay() {
@@ -48,7 +52,11 @@ export default class CustomHeaderLink extends Component {
4852
}
4953

5054
get showCaret() {
51-
return settings.show_caret_icons && this.hasDropdown;
55+
return (
56+
settings.show_caret_icons &&
57+
this.hasDropdown &&
58+
(!this.site.mobileView || !this.item.url)
59+
);
5260
}
5361

5462
get dropdownLinks() {
@@ -64,7 +72,12 @@ export default class CustomHeaderLink extends Component {
6472
}
6573

6674
@action
67-
redirectToUrl(item) {
75+
toggleDropdown() {
76+
this.dropdownOpen = !this.dropdownOpen;
77+
}
78+
79+
@action
80+
redirectToUrl(item, event) {
6881
if (this.site.mobileView) {
6982
this.toggleHeaderLinks();
7083
}
@@ -85,9 +98,14 @@ export default class CustomHeaderLink extends Component {
8598
"custom-header-link"
8699
(if @item.url "with-url")
87100
(if this.hasDropdown "has-dropdown")
101+
(if this.dropdownOpen "is-open")
88102
}}
89103
title={{@item.title}}
90104
{{(if @item.url (modifier on "click" (fn this.redirectToUrl @item)))}}
105+
{{(if
106+
(and (not @item.url) this.site.mobileView this.hasDropdown)
107+
(modifier on "click" this.toggleDropdown)
108+
)}}
91109
>
92110
<CustomIcon @icon={{@item.icon}} />
93111
<span class="custom-header-link-title">{{@item.title}}</span>

‎javascripts/discourse/components/custom-header-links.gjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import { tracked } from "@glimmer/tracking";
22
import Component from "@ember/component";
33
import { hash } from "@ember/helper";
44
import { action } from "@ember/object";
5-
import { inject as service } from "@ember/service";
5+
import { service } from "@ember/service";
66
import DButton from "discourse/components/d-button";
77
import concatClass from "discourse/helpers/concat-class";
88
import closeOnClickOutside from "discourse/modifiers/close-on-click-outside";
9-
import i18n from "discourse-common/helpers/i18n";
9+
import { i18n } from "discourse-i18n";
1010
import CustomHeaderLink from "./custom-header-link";
1111

1212
export default class CustomHeaderLinks extends Component {

‎javascripts/discourse/components/custom-icon.gjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Component from "@ember/component";
22
import { equal } from "@ember/object/computed";
33
import { tagName } from "@ember-decorators/component";
44
import concatClass from "discourse/helpers/concat-class";
5-
import dIcon from "discourse-common/helpers/d-icon";
5+
import dIcon from "discourse/helpers/d-icon";
66

77
@tagName("")
88
export default class CustomIcon extends Component {

‎mobile/mobile.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
li {
1818
width: 100%;
1919

20-
@media screen and (min-width: 768px) {
20+
@media screen and (width >= 768px) {
2121
width: auto;
2222
}
2323
}

0 commit comments

Comments
 (0)