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

UX: centralise DMenu mobile styling + fixes (#28469)

This commit is contained in:
chapoi 2024-08-23 17:56:35 +02:00 committed by GitHub
parent 6bdda3cb71
commit 208007d9a0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 189 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/discourse/app/components/navigation-bar.gjs
View File

@ -53,7 +53,6 @@ export default class NavigationBarComponent extends Component {
{{#each @navItems as |navItem|}}
<dropdown.item>
<NavigationItem
@tagName="div"
@content={{navItem}}
@filterMode={{@filterMode}}
@category={{@category}}

23
app/assets/javascripts/discourse/app/components/topic-map/topic-map-summary.gjs
View File

@ -341,19 +341,16 @@ export default class TopicMapSummary extends Component {
</:trigger>
<:content>
<h3>{{i18n "topic_map.links_title"}}</h3>
<table class="topic-links">
<tbody>
<ul class="topic-links">
{{#each this.linksToShow as |link|}}
<tr>
<td>
<li>
<span
class="badge badge-notification clicks"
title={{i18n "topic_map.clicks" count=link.clicks}}
>
{{link.clicks}}
</span>
</td>
<td>
<TopicMapLink
@attachment={{link.attachment}}
@title={{link.title}}
@ -361,22 +358,18 @@ export default class TopicMapSummary extends Component {
@url={{link.url}}
@userId={{link.user_id}}
/>
</td>
</tr>
</li>
{{/each}}
</tbody>
</table>
</ul>
{{#if this.hasMoreLinks}}
<div class="link-summary">
<span>
<DButton
@action={{this.showAllLinks}}
@title="topic_map.links_shown"
@icon="chevron-down"
class="btn-flat"
class="link-summary btn-flat"
/>
</span>
</div>
{{/if}}
</:content>
</DMenu>

26
app/assets/javascripts/discourse/tests/integration/components/float-kit/d-menu-test.js
View File

@ -263,7 +263,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
await getOwner(this).lookup("service:menu").close("test");
assert.dom(".fk-d-menu__content.test-content").doesNotExist();
assert.dom(".fk-d-menu.test-content").doesNotExist();
});
test("get a menu by identifier", async function (assert) {
@ -276,7 +276,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
await activeMenu.close();
assert.dom(".fk-d-menu__content.test-content").doesNotExist();
assert.dom(".fk-d-menu.test-content").doesNotExist();
});
test("opening a menu with the same identifier", async function (assert) {
@ -302,13 +302,13 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
await click(".first.fk-d-menu__trigger");
assert.dom(".fk-d-menu__content.first").exists();
assert.dom(".fk-d-menu__content.second").doesNotExist();
assert.dom(".fk-d-menu.first").exists();
assert.dom(".fk-d-menu.second").doesNotExist();
await click(".second.fk-d-menu__trigger");
assert.dom(".fk-d-menu__content.first").doesNotExist();
assert.dom(".fk-d-menu__content.second").exists();
assert.dom(".fk-d-menu.first").doesNotExist();
assert.dom(".fk-d-menu.second").exists();
});
test("empty @identifier/@groupIdentifier", async function (assert) {
@ -318,13 +318,13 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
await click(".first.fk-d-menu__trigger");
assert.dom(".fk-d-menu__content.first").exists();
assert.dom(".fk-d-menu__content.second").doesNotExist();
assert.dom(".fk-d-menu.first").exists();
assert.dom(".fk-d-menu.second").doesNotExist();
await click(".second.fk-d-menu__trigger");
assert.dom(".fk-d-menu__content.first").exists("it doesn’t autoclose");
assert.dom(".fk-d-menu__content.second").exists();
assert.dom(".fk-d-menu.first").exists("it doesn’t autoclose");
assert.dom(".fk-d-menu.second").exists();
});
test("@class", async function (assert) {
@ -333,7 +333,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
await open();
assert.dom(".fk-d-menu__trigger.first").exists();
assert.dom(".fk-d-menu__content.first").exists();
assert.dom(".fk-d-menu.first").exists();
});
test("@triggerClass", async function (assert) {
@ -342,7 +342,7 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
await open();
assert.dom(".fk-d-menu__trigger.first").exists();
assert.dom(".fk-d-menu__content.first").doesNotExist();
assert.dom(".fk-d-menu.first").doesNotExist();
});
test("@contentClass", async function (assert) {
@ -351,6 +351,6 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
await open();
assert.dom(".fk-d-menu__trigger.first").doesNotExist();
assert.dom(".fk-d-menu__content.first").exists();
assert.dom(".fk-d-menu.first").exists();
});
});

2
app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js
View File

@ -880,7 +880,7 @@ module("Integration | Component | Widget | post", function (hooks) {
await click(".topic-map__links-trigger");
assert.dom(".topic-map__links-content").exists({ count: 1 });
assert.dom(".topic-map__links-content .topic-link").exists({ count: 5 });
await click(".link-summary button");
await click(".link-summary");
assert.dom(".topic-map__links-content .topic-link").exists({ count: 6 });
});

1
app/assets/javascripts/float-kit/addon/components/d-menu.gjs
View File

@ -110,7 +110,6 @@ export default class DMenu extends Component {
@trapTab={{this.options.trapTab}}
@mainClass={{concatClass
"fk-d-menu"
"fk-d-menu__content"
(concat this.options.identifier "-content")
@class
@contentClass

227
app/assets/stylesheets/common/components/topic-map.scss
View File

@ -90,40 +90,6 @@ body:not(.archetype-private_message) {
overflow-wrap: anywhere;
}
.fk-d-menu__content {
.fk-d-menu__inner-content,
.d-modal__container {
box-sizing: border-box;
max-height: 80dvh;
min-width: 20em;
width: 100%;
overflow: auto;
align-items: start;
overscroll-behavior: contain;
padding: 1rem 1.5rem;
width: 100%;
flex-direction: column;
.desktop-view & {
@include breakpoint(mobile-large) {
min-width: unset;
max-width: 90dvw;
}
}
}
.loading-container {
width: 100%;
}
h3 {
font-weight: bold;
font-size: var(--font-up-1);
margin-top: -0.35em;
margin-bottom: 0.5em;
width: 100%;
}
}
&__contents {
padding-block: 0.5em;
flex-grow: 1;
@ -272,7 +238,6 @@ body:not(.archetype-private_message) {
.view-explainer {
color: var(--primary-700);
font-size: var(--font-down-1);
margin-top: 1em;
}
.estimated-read-time {
@ -296,14 +261,13 @@ body:not(.archetype-private_message) {
.mobile-view {
.d-modal[class*="topic-map__"] {
.d-modal__body {
padding: 1em 1em 2em 1em;
h3 {
width: 100%;
font-weight: bold;
font-size: var(--font-up-2);
padding-inline: 1rem;
}
p {
overflow-wrap: break-word;
}
}
@ -313,62 +277,84 @@ body:not(.archetype-private_message) {
}
// DMenu popups
.fk-d-menu,
.fk-d-menu-modal {
//shared
&__inner-content {
.topic-map__likes-content &,
.topic-map__links-content &,
.topic-map__users-content &,
.topic-map__views-content & {
flex-direction: column;
padding-block: 0.75em;
}
}
.topic-map__likes-content.fk-d-menu__content {
.fk-d-menu__inner-content,
.d-modal__body {
h3 {
padding-inline: 1rem;
padding-bottom: 0.5em;
font-size: var(--font-up-1);
border-bottom: 1px solid var(--primary-low);
}
.loading-container {
width: 100%;
}
&.topic-map__likes-content,
&.topic-map__links-content {
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
}
//per type
&.topic-map__likes-content {
li > a {
display: grid;
grid-template-areas: "user likes" "post post";
grid-template-columns: auto 1fr;
border-top: 1px solid var(--primary-low);
padding: 1em 0;
gap: 0.25em;
padding: 0.75em 1rem;
.discourse-no-touch & {
&:hover {
background: var(--primary-very-low);
box-shadow: -1em 0px 0px 0px var(--primary-very-low),
1em 0px 0px 0px var(--primary-very-low);
background: var(--d-hover);
}
}
}
.like-section__user {
li:not(:last-of-type) {
a {
border-bottom: 1px solid var(--primary-low);
}
}
.like-section {
&__user {
grid-area: user;
color: var(--primary-high);
justify-content: start;
display: flex;
align-items: start;
align-items: center;
font-weight: bold;
gap: 0.5em;
img {
position: relative;
top: 0.2em;
}
}
.like-section__likes {
&__likes {
grid-area: likes;
display: flex;
align-items: start;
gap: 0.25em;
color: var(--primary-medium);
justify-content: end;
font-size: var(--font-0);
align-items: center;
.d-icon {
font-size: var(--font-down-1);
color: var(--love);
position: relative;
top: 0.28em;
}
}
}
@ -381,16 +367,55 @@ body:not(.archetype-private_message) {
padding-left: 2em;
}
}
&.topic-map__links-content {
li {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"counter link"
". domain";
padding: 0.75em 1rem;
gap: 0.25em;
&:not(:last-of-type) {
border-bottom: 1px solid var(--primary-low);
}
.discourse-no-touch & {
&:hover {
background: var(--d-hover);
}
}
}
.badge {
grid-area: counter;
align-self: start;
top: 0.2em;
}
.topic-link {
grid-area: link;
}
.domain {
grid-area: domain;
font-size: var(--font-down-2);
color: var(--primary-medium);
}
.link-summary {
width: 100%;
.d-icon {
color: var(--primary-high);
}
}
}
.topic-map__users-content {
.fk-d-menu__inner-content,
.d-modal__body {
&.topic-map__users-content {
.topic-map__users-list {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
padding: 0.75em 1rem;
}
.poster {
display: block;
@ -425,73 +450,17 @@ body:not(.archetype-private_message) {
background-size: contain;
}
}
}
.topic-map__links-content {
.fk-d-menu__inner-content,
.d-modal__body {
.topic-links {
width: 100%;
tbody {
border: none;
}
tr {
border-top: 1px solid var(--primary-low);
border-bottom: none;
td:nth-of-type(2) {
padding-left: 0.5em;
}
}
}
a {
display: inline-block;
line-height: var(--line-height-medium);
}
td {
vertical-align: top;
padding: 0.5em 0;
}
span.domain {
font-size: var(--font-down-2);
color: var(--primary-medium);
}
.link-summary {
width: 100%;
.btn {
width: 100%;
.d-icon {
color: var(--primary-high);
}
.discourse-no-touch & {
&:hover {
background: var(--primary-low);
}
}
}
}
}
}
.topic-map__views-content {
.fk-d-menu__inner-content,
.d-modal__body {
&.topic-map__views-content {
.topic-views {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 auto;
padding: 0.5em 1em 0;
&__wrapper {
display: flex;
width: 100%;
align-items: space-between;
justify-content: center;
padding: 0 1rem;
}
&__count {
font-size: var(--font-up-4);
@ -504,12 +473,16 @@ body:not(.archetype-private_message) {
}
}
canvas {
padding: 0.75em 1rem;
}
.view-explainer {
padding: 0 1rem;
}
&:has(.topic-views) {
min-width: unset;
h3 {
text-align: center;
}
}
}
}

1
app/assets/stylesheets/common/float-kit/d-menu.scss
View File

@ -53,6 +53,7 @@
background-color: var(--secondary);
border: 1px solid var(--primary-low);
box-shadow: var(--shadow-menu-panel);
overscroll-behavior: contain;
}
.arrow {

6
app/assets/stylesheets/mobile/components/_index.scss
View File

@ -1,6 +1,6 @@
@import "bookmark-menu";
@import "more-topics";
@import "topic-footer-mobile-dropdown";
@import "topic-map";
@import "user-card";
@import "user-stream-item";
@import "more-topics";
@import "bookmark-menu";
@import "dropdown-menu";

7
app/assets/stylesheets/mobile/components/dropdown-menu.scss
View File

@ -1,7 +0,0 @@
.dropdown-menu {
&__item {
.btn {
padding: 0.75rem 1rem;
}
}
}

9
app/assets/stylesheets/mobile/components/topic-map.scss Normal file
View File

@ -0,0 +1,9 @@
.fk-d-menu-modal {
&.topic-map__links-content {
li {
a {
padding: 0;
}
}
}
}

15
app/assets/stylesheets/mobile/float-kit/d-menu.scss
View File

@ -1,5 +1,18 @@
.fk-d-menu-modal {
.d-modal__body {
padding: 0.5rem 0;
padding: 0.5em 0;
}
h3 {
padding-top: 0.25em;
}
li > .btn,
li > a {
padding: 0.75em 1rem;
}
li > a {
display: block;
}
}

1
app/assets/stylesheets/mobile/list-controls.scss
View File

@ -75,7 +75,6 @@
a {
display: block;
color: var(--primary);
padding: 0.5em 1rem;
&.active {
background: var(--d-selected);

3
app/assets/stylesheets/mobile/modal.scss
View File

@ -40,6 +40,9 @@ html:not(.keyboard-visible.mobile-view) {
padding: 0.5rem;
}
&__footer {
margin-top: auto;
}
.ios-device & {
&__footer {
margin-top: auto;