diff --git a/app/assets/javascripts/discourse/app/initializers/post-decorations.js b/app/assets/javascripts/discourse/app/initializers/post-decorations.js index 735ee492419..947d9a488ec 100644 --- a/app/assets/javascripts/discourse/app/initializers/post-decorations.js +++ b/app/assets/javascripts/discourse/app/initializers/post-decorations.js @@ -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); }); } diff --git a/app/assets/javascripts/discourse/tests/acceptance/post-table-wrapper-test.js b/app/assets/javascripts/discourse/tests/acceptance/post-table-wrapper-test.js new file mode 100644 index 00000000000..217303d2fcd --- /dev/null +++ b/app/assets/javascripts/discourse/tests/acceptance/post-table-wrapper-test.js @@ -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" + ); + }); +}); diff --git a/app/assets/javascripts/discourse/tests/fixtures/topic.js b/app/assets/javascripts/discourse/tests/fixtures/topic.js index bbefba6ead5..597ff263776 100644 --- a/app/assets/javascripts/discourse/tests/fixtures/topic.js +++ b/app/assets/javascripts/discourse/tests/fixtures/topic.js @@ -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: + '
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MakeModelYearPriceDrivetrainEnginePowerTypeSeatsWheelsMileageInductionIntakeRanking
ToyotaSupra199850kRWDI6400HPCoupe4Enkei PF01100,000Twin TurboYes1
NissanSkyline1999100k4WDI6350HPCoupe4TE3780,000Single TurboNo2
HondaS2000200130kRWDI4230HPRoadster2RPF1110,000Naturally AspiratedNo3
\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: + '

These are my favourite JDM cars:

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MakeModelYear
ToyotaSupra1998
NissanSkyline1999
HondaS20002001
\n

These are my favourite Euro cars:

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MakeModelYear
Porsche9641998
BMWM32005
Alfa RomeoGiulia2018
\n
', + 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: + '
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MakeModelPrice
ToyotaSupra$50,000
Celica$20,000
NissanGTR$80,000
\n
', + 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, + }, }; diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 0168b51424f..547d3969ebe 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -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,