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

FIX: Post height issues with Expand Table button (#18810)

This commit is contained in:
Keegan George 2023-03-24 11:55:49 -07:00 committed by GitHub
parent 0728fa055b
commit 83db0bf41a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 352 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/discourse/app/initializers/post-decorations.js
View File

@ -141,7 +141,8 @@ export default {
"open-popup-link",
"btn-default",
"btn",
"btn-icon-text"
"btn-icon-text",
"btn-expand-table"
);
const expandIcon = create(
iconNode("discourse-expand", { class: "expand-table-icon" })
@ -158,7 +159,7 @@ export default {
}
function generateModal(event) {
const table = event.target.nextElementSibling;
const table = event.target.parentElement.nextElementSibling;
const tempTable = table.cloneNode(true);
showModal("fullscreen-table").set("tableHtml", tempTable);
@ -176,8 +177,12 @@ export default {
const popupBtn = _createButton();
table.parentNode.classList.add("fullscreen-table-wrapper");
table.parentNode.insertBefore(popupBtn, table);
// Create a button wrapper for case of multiple buttons (i.e. table builder extension)
const buttonWrapper = document.createElement("div");
buttonWrapper.classList.add("fullscreen-table-wrapper--buttons");
buttonWrapper.append(popupBtn);
popupBtn.addEventListener("click", generateModal, false);
table.parentNode.insertBefore(buttonWrapper, table);
});
}

49
app/assets/javascripts/discourse/tests/acceptance/post-table-wrapper-test.js Normal file
View File

@ -0,0 +1,49 @@
import { test } from "qunit";
import { click, visit } from "@ember/test-helpers";
import {
acceptance,
exists,
query,
} from "discourse/tests/helpers/qunit-helpers";
acceptance("Post Table Wrapper Test", function () {
test("fullscreen table wrapper appears on post with large table", async function (assert) {
await visit("/t/54081");
const postWithLargeTable = ".post-stream .topic-post:first-child";
assert.ok(
exists(`${postWithLargeTable} .fullscreen-table-wrapper`),
"The wrapper is present on the post with the large table"
);
assert.ok(
exists(
`${postWithLargeTable} .fullscreen-table-wrapper .fullscreen-table-wrapper--buttons .open-popup-link`
),
"buttons for the table wrapper appear inside a separate div"
);
const fullscreenButtonWrapper = query(
`${postWithLargeTable} .fullscreen-table-wrapper .fullscreen-table-wrapper--buttons`
);
assert.strictEqual(
window
.getComputedStyle(fullscreenButtonWrapper)
.getPropertyValue("position"),
"absolute",
"the wrapper buttons should not be in the cooked post's flow"
);
await click(
`${postWithLargeTable} .fullscreen-table-wrapper .btn-expand-table`
);
assert.ok(
exists(".fullscreen-table-modal"),
"The fullscreen table modal appears"
);
assert.ok(
exists(".fullscreen-table-modal table"),
"The table is present inside the modal"
);
});
});

288
app/assets/javascripts/discourse/tests/fixtures/topic.js vendored
View File

@ -6736,4 +6736,292 @@ export default {
],
tags: null,
},
"/t/54081.json": {
pending_posts: [],
post_stream: {
posts: [
{
id: 18,
username: "eviltrout",
avatar_template: "/images/avatar.png",
name: "Evil Trout",
uploaded_avatar_id: 9,
created_at: "2015-08-13T14:49:11.840Z",
cooked:
'<div class=\"md-table\">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Year</th>\n<th>Price</th>\n<th>Drivetrain</th>\n<th>Engine</th>\n<th>Power</th>\n<th>Type</th>\n<th>Seats</th>\n<th>Wheels</th>\n<th>Mileage</th>\n<th>Induction</th>\n<th>Intake</th>\n<th>Ranking</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Toyota</td>\n<td>Supra</td>\n<td>1998</td>\n<td>50k</td>\n<td>RWD</td>\n<td>I6</td>\n<td>400HP</td>\n<td>Coupe</td>\n<td>4</td>\n<td>Enkei PF01</td>\n<td>100,000</td>\n<td>Twin Turbo</td>\n<td>Yes</td>\n<td>1</td>\n</tr>\n<tr>\n<td>Nissan</td>\n<td>Skyline</td>\n<td>1999</td>\n<td>100k</td>\n<td>4WD</td>\n<td>I6</td>\n<td>350HP</td>\n<td>Coupe</td>\n<td>4</td>\n<td>TE37</td>\n<td>80,000</td>\n<td>Single Turbo</td>\n<td>No</td>\n<td>2</td>\n</tr>\n<tr>\n<td>Honda</td>\n<td>S2000</td>\n<td>2001</td>\n<td>30k</td>\n<td>RWD</td>\n<td>I4</td>\n<td>230HP</td>\n<td>Roadster</td>\n<td>2</td>\n<td>RPF1</td>\n<td>110,000</td>\n<td>Naturally Aspirated</td>\n<td>No</td>\n<td>3</td>\n</tr>\n</tbody>\n</table>\n',
post_number: 1,
post_type: 1,
updated_at: "2015-08-13T14:49:11.840Z",
reply_count: 0,
reply_to_post_number: null,
quote_count: 0,
incoming_link_count: 0,
reads: 1,
score: 0,
yours: true,
topic_id: 9,
topic_slug: "this-is-a-test-topic",
display_username: "",
primary_group_name: null,
version: 1,
can_edit: true,
can_delete: false,
can_recover: true,
read: true,
user_title: null,
actions_summary: [
{ id: 3, can_act: true },
{ id: 4, can_act: true },
{ id: 5, hidden: true, can_act: true },
{ id: 7, can_act: true },
{ id: 8, can_act: true },
],
moderator: false,
admin: true,
staff: true,
user_id: 1,
hidden: false,
hidden_reason_id: null,
trust_level: 4,
deleted_at: null,
user_deleted: false,
edit_reason: null,
can_view_edit_history: true,
wiki: false,
},
{
id: 19,
username: "eviltrout",
avatar_template: "/images/avatar.png",
name: "Evil Trout",
uploaded_avatar_id: 9,
created_at: "2015-08-13T14:49:18.231Z",
cooked:
'<p>These are my favourite JDM cars:</p>\n<div class="md-table">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Year</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Toyota</td>\n<td>Supra</td>\n<td>1998</td>\n</tr>\n<tr>\n<td>Nissan</td>\n<td>Skyline</td>\n<td>1999</td>\n</tr>\n<tr>\n<td>Honda</td>\n<td>S2000</td>\n<td>2001</td>\n</tr>\n</tbody>\n</table>\n</div><p>These are my favourite Euro cars:</p>\n<div class="md-table">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Year</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Porsche</td>\n<td>964</td>\n<td>1998</td>\n</tr>\n<tr>\n<td>BMW</td>\n<td>M3</td>\n<td>2005</td>\n</tr>\n<tr>\n<td>Alfa Romeo</td>\n<td>Giulia</td>\n<td>2018</td>\n</tr>\n</tbody>\n</table>\n</div>',
post_number: 2,
post_type: 1,
updated_at: "2015-08-13T14:49:18.231Z",
reply_count: 0,
reply_to_post_number: null,
quote_count: 0,
incoming_link_count: 0,
reads: 1,
score: 0,
yours: true,
topic_id: 9,
topic_slug: "this-is-a-test-topic",
display_username: "",
primary_group_name: null,
version: 1,
can_edit: true,
can_delete: true,
can_recover: true,
read: true,
user_title: null,
actions_summary: [
{ id: 3, can_act: true },
{ id: 4, can_act: true },
{ id: 5, hidden: true, can_act: true },
{ id: 7, can_act: true },
{ id: 8, can_act: true },
],
moderator: false,
admin: true,
staff: true,
user_id: 1,
hidden: false,
hidden_reason_id: null,
trust_level: 4,
deleted_at: null,
user_deleted: false,
edit_reason: null,
can_view_edit_history: true,
wiki: false,
},
{
id: 20,
username: "eviltrout",
avatar_template: "/images/avatar.png",
name: "Evil Trout",
uploaded_avatar_id: 9,
created_at: "2015-08-13T14:49:23.927Z",
cooked:
'<div class="md-table">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Price</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Toyota</td>\n<td>Supra</td>\n<td>$50,000</td>\n</tr>\n<tr>\n<td></td>\n<td>Celica</td>\n<td>$20,000</td>\n</tr>\n<tr>\n<td>Nissan</td>\n<td>GTR</td>\n<td>$80,000</td>\n</tr>\n</tbody>\n</table>\n</div>',
post_number: 3,
post_type: 1,
updated_at: "2015-08-13T14:49:23.927Z",
reply_count: 0,
reply_to_post_number: null,
quote_count: 0,
incoming_link_count: 0,
reads: 1,
score: 0,
yours: true,
topic_id: 9,
topic_slug: "this-is-a-test-topic",
display_username: "",
primary_group_name: null,
version: 1,
can_edit: true,
can_delete: true,
can_recover: true,
read: true,
user_title: null,
actions_summary: [
{ id: 3, can_act: true },
{ id: 4, can_act: true },
{ id: 5, hidden: true, can_act: true },
{ id: 7, can_act: true },
{ id: 8, can_act: true },
],
moderator: false,
admin: true,
staff: true,
user_id: 1,
hidden: false,
hidden_reason_id: null,
trust_level: 4,
deleted_at: null,
user_deleted: false,
edit_reason: null,
can_view_edit_history: true,
wiki: false,
},
],
stream: [398, 419],
gaps: { before: {}, after: { 398: [419] } },
},
id: 54081,
title: "This is a topic with tables!",
fancy_title: "This is a topic with tables!",
posts_count: 2,
created_at: "2013-02-05T21:29:00.174Z",
views: 5211,
reply_count: 1,
participant_count: 2,
like_count: 135,
last_posted_at: "2015-03-04T15:07:10.487Z",
visible: true,
closed: false,
archived: false,
has_summary: false,
archetype: "regular",
slug: "short-topic-with-two-posts",
category_id: 2,
word_count: 300,
deleted_at: null,
draft: null,
draft_key: "topic_54079",
draft_sequence: 3,
posted: true,
unpinned: null,
pinned_globally: false,
pinned: false,
pinned_at: null,
details: {
can_publish_page: true,
can_invite_via_email: true,
can_toggle_topic_visibility: true,
can_pin_unpin_topic: true,
auto_close_at: null,
auto_close_hours: null,
auto_close_based_on_last_post: false,
created_by: {
id: 255,
username: "james_john",
uploaded_avatar_id: 5697,
avatar_template: "/images/avatar.png",
},
last_poster: {
id: 9,
username: "Tim Stone",
uploaded_avatar_id: 40181,
avatar_template: "/images/avatar.png",
},
participants: [
{
id: 9,
username: "tms",
uploaded_avatar_id: 40181,
avatar_template: "/images/avatar.png",
post_count: 2,
},
{
id: 255,
username: "james_john",
uploaded_avatar_id: 5697,
avatar_template: "/images/avatar.png",
post_count: 1,
},
],
links: [],
notification_level: 2,
notifications_reason_id: 4,
can_move_posts: true,
can_edit: true,
can_delete: true,
can_recover: true,
can_remove_allowed_users: true,
can_invite_to: true,
can_create_post: true,
can_reply_as_new_topic: true,
can_flag_topic: true,
},
highest_post_number: 2,
last_read_post_number: 2,
deleted_by: null,
has_deleted: true,
actions_summary: [
{ id: 4, count: 0, hidden: false, can_act: true },
{ id: 7, count: 0, hidden: false, can_act: true },
{ id: 8, count: 0, hidden: false, can_act: true },
],
chunk_size: 20,
bookmarked: false,
bookmarks: [],
suggested_topics: [
{
id: 27331,
title: "Polls are still very buggy",
fancy_title: "Polls are still very buggy",
slug: "polls-are-still-very-buggy",
posts_count: 4,
reply_count: 1,
highest_post_number: 4,
image_url: "/uploads/default/_optimized/cd1/b8c/c162528887_690x401.png",
created_at: "2015-04-08T09:51:00.357Z",
last_posted_at: "2015-04-08T15:59:16.258Z",
bumped: true,
bumped_at: "2015-04-08T16:05:09.842Z",
unseen: false,
last_read_post_number: 3,
unread_posts: 1,
pinned: false,
unpinned: null,
visible: true,
closed: false,
archived: false,
notification_level: 2,
bookmarked: false,
bookmarks: [],
liked: false,
archetype: "regular",
like_count: 11,
views: 55,
category_id: 1,
posters: [
{
extras: "latest single",
description: "Original Poster, Most Recent Poster",
user: {
id: 1,
username: "test",
avatar_template: "/images/avatar.png",
},
},
],
},
],
tags: null,
},
};

13
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -1633,20 +1633,21 @@ span.mention {
.open-popup-link {
position: sticky;
left: 0.5rem;
top: 0.5rem;
left: 1rem;
opacity: 0%;
white-space: nowrap;
display: block;
}
.fullscreen-table-wrapper {
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
display: block;
}
position: relative;
.expand-table-icon {
margin-right: 4px;
&--buttons {
position: absolute;
top: 0.5rem;
left: 0.5rem;
}
}
.fullscreen-table-modal .modal-inner-container,