diff --git a/app/assets/javascripts/discourse/app/widgets/button.js b/app/assets/javascripts/discourse/app/widgets/button.js index 413d01ba28..bb93acdbb5 100644 --- a/app/assets/javascripts/discourse/app/widgets/button.js +++ b/app/assets/javascripts/discourse/app/widgets/button.js @@ -62,6 +62,15 @@ export const ButtonClass = { h("span.d-button-label", I18n.t(attrs.label, attrs.labelOptions)) ); } + if (attrs.translatedLabel) { + contents.push( + h( + "span.d-button-label", + attrs.translatedLabel.toString(), + attrs.translatedLabelOptions + ) + ); + } if (attrs.contents) { contents.push(attrs.contents); } diff --git a/app/assets/javascripts/discourse/app/widgets/post-edits-indicator.js b/app/assets/javascripts/discourse/app/widgets/post-edits-indicator.js index 818da0e0c3..17bf30302b 100644 --- a/app/assets/javascripts/discourse/app/widgets/post-edits-indicator.js +++ b/app/assets/javascripts/discourse/app/widgets/post-edits-indicator.js @@ -1,7 +1,5 @@ import I18n from "I18n"; import { createWidget } from "discourse/widgets/widget"; -import { h } from "virtual-dom"; -import { iconNode } from "discourse-common/lib/icon-library"; import { longDate } from "discourse/lib/formatter"; function mult(val) { @@ -53,24 +51,16 @@ export default createWidget("post-edits-indicator", { title = `${I18n.t("post.last_edited_on")} ${date}`; } - const contents = [ - attrs.version > 1 ? attrs.version - 1 : "", - " ", - iconNode(icon), - ]; - - return h( - "a", - { - className, - attributes: { title, href: "#" }, - }, - contents - ); + return this.attach("flat-button", { + icon, + title, + className, + action: "onPostEditsIndicatorClick", + translatedLabel: attrs.version > 1 ? attrs.version - 1 : "", + }); }, - click(e) { - e.preventDefault(); + onPostEditsIndicatorClick() { if (this.attrs.wiki && this.attrs.version === 1) { this.sendWidgetAction("editPost"); } else if (this.attrs.canViewEditHistory) { diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-test.js index 845d58e45d..29b8d6d8c2 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/topic-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/topic-test.js @@ -146,7 +146,7 @@ acceptance("Topic", function (needs) { await click(".topic-post:nth-of-type(1) button.show-post-admin-menu"); await click(".btn.wiki"); - assert.ok(queryAll("a.wiki").length === 1, "it shows the wiki icon"); + assert.ok(queryAll("button.wiki").length === 1, "it shows the wiki icon"); }); test("Visit topic routes", async function (assert) { diff --git a/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js b/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js index 7072dbea9a..948abcd31c 100644 --- a/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js +++ b/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js @@ -378,6 +378,10 @@ export function queryAll() { return window.find(...arguments); } +export function query() { + return document.querySelector(...arguments); +} + export function invisible(selector) { const $items = queryAll(selector + ":visible"); return ( diff --git a/app/assets/javascripts/discourse/tests/integration/widgets/button-test.js b/app/assets/javascripts/discourse/tests/integration/widgets/button-test.js index 343aeb729e..e1aa1be23d 100644 --- a/app/assets/javascripts/discourse/tests/integration/widgets/button-test.js +++ b/app/assets/javascripts/discourse/tests/integration/widgets/button-test.js @@ -3,6 +3,7 @@ import componentTest, { } from "discourse/tests/helpers/component-test"; import { discourseModule, + query, queryAll, } from "discourse/tests/helpers/qunit-helpers"; @@ -69,4 +70,16 @@ discourseModule("Integration | Component | Widget | button", function (hooks) { ); }, }); + + componentTest("translatedLabel", { + template: '{{mount-widget widget="button" args=args}}', + + beforeEach() { + this.set("args", { translatedLabel: "foo bar" }); + }, + + test(assert) { + assert.equal(query("button span.d-button-label").innerText, "foo bar"); + }, + }); }); diff --git a/app/assets/javascripts/discourse/tests/integration/widgets/post-test.js b/app/assets/javascripts/discourse/tests/integration/widgets/post-test.js index 9206c230eb..5f74973677 100644 --- a/app/assets/javascripts/discourse/tests/integration/widgets/post-test.js +++ b/app/assets/javascripts/discourse/tests/integration/widgets/post-test.js @@ -113,7 +113,7 @@ discourseModule("Integration | Component | Widget | post", function (hooks) { this.on("showHistory", () => (this.historyShown = true)); }, async test(assert) { - await click(".post-info.edits"); + await click(".post-info.edits button"); assert.ok(this.historyShown, "clicking the pencil shows the history"); }, }); diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index d362f9876b..81b1155a59 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/app/assets/stylesheets/common/base/_topic-list.scss @@ -295,15 +295,23 @@ } .heatmap-high, -.heatmap-high a { +.heatmap-high a, +.heatmap-high .d-icon, +.heatmap-high .d-button-label { color: #fe7a15 !important; } + .heatmap-med, -.heatmap-med a { +.heatmap-med a, +.heatmap-med .d-icon, +.heatmap-med .d-button-label { color: #cf7721 !important; } + .heatmap-low, -.heatmap-low a { +.heatmap-low a, +.heatmap-low .d-icon, +.heatmap-low .d-button-label { color: #9b764f !important; } diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 67eb33a49a..df0c0c9065 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -655,6 +655,21 @@ blockquote { &.raw-email { cursor: pointer; } + &.edits { + .widget-button { + display: flex; + align-items: center; + + .d-button-label { + order: 0; + padding-right: 0.25em; + } + + .d-icon { + order: 1; + } + } + } } pre {