diff --git a/assets/javascripts/discourse/components/discourse-post-event/index.gjs b/assets/javascripts/discourse/components/discourse-post-event/index.gjs index 1c8c9e64..c2a66ffe 100644 --- a/assets/javascripts/discourse/components/discourse-post-event/index.gjs +++ b/assets/javascripts/discourse/components/discourse-post-event/index.gjs @@ -108,12 +108,6 @@ export default class DiscoursePostEvent extends Component { /> - {{#if @event.canUpdateAttendance}} -
- -
- {{/if}} - + {{#if @event.canUpdateAttendance}} +
+ +
+ {{/if}}
{{/if}} diff --git a/assets/javascripts/discourse/components/discourse-post-event/status.gjs b/assets/javascripts/discourse/components/discourse-post-event/status.gjs index 05617776..ffcf6375 100644 --- a/assets/javascripts/discourse/components/discourse-post-event/status.gjs +++ b/assets/javascripts/discourse/components/discourse-post-event/status.gjs @@ -2,10 +2,15 @@ import Component from "@glimmer/component"; import { concat, fn, hash } from "@ember/helper"; import { action } from "@ember/object"; import { service } from "@ember/service"; +import { eq } from "truth-helpers"; import DButton from "discourse/components/d-button"; +import DropdownMenu from "discourse/components/dropdown-menu"; import PluginOutlet from "discourse/components/plugin-outlet"; import concatClass from "discourse/helpers/concat-class"; import { popupAjaxError } from "discourse/lib/ajax-error"; +import icon from "discourse-common/helpers/d-icon"; +import i18n from "discourse-common/helpers/i18n"; +import DMenu from "float-kit/components/d-menu"; export default class DiscoursePostEventStatus extends Component { @service appEvents; @@ -16,6 +21,26 @@ export default class DiscoursePostEventStatus extends Component { return this.args.event.watchingInvitee?.status; } + get inviteeButtonText() { + let status = this.args.event.watchingInvitee?.status; + return status === "going" + ? "discourse_post_event.models.invitee.status.going" + : status === "interested" + ? "discourse_post_event.models.invitee.status.interested" + : status === "not_going" + ? "discourse_post_event.models.invitee.status.not_going" + : "discourse_post_event.models.invitee.status.not_set"; + } + + get inviteButtonIcon() { + let status = this.args.event.watchingInvitee?.status; + return status === "going" + ? "check" + : status === "interested" + ? "star" + : "question"; + } + get eventButtons() { return this.siteSettings.event_participation_buttons.split("|"); } @@ -116,67 +141,86 @@ export default class DiscoursePostEventStatus extends Component { ) }} > - - {{#if this.showGoingButton}} - {{#unless @event.minimal}} - - - - {{/unless}} - {{/if}} + + <:trigger> + {{icon this.inviteButtonIcon}} + {{i18n + this.inviteeButtonText + }} + {{icon "angle-down"}} + + <:content> + + {{#if this.showGoingButton}} + {{#unless @event.minimal}} + + + + + + {{/unless}} + {{/if}} - {{#if this.showInterestedButton}} - - - - {{/if}} + {{#if this.showInterestedButton}} + + + + + + {{/if}} - {{#if this.showNotGoingButton}} - {{#unless @event.minimal}} - - - - {{/unless}} - {{/if}} - + {{#if this.showNotGoingButton}} + {{#unless @event.minimal}} + + + + + + {{/unless}} + {{/if}} + + + } diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss index 4bdee323..3b6d3d62 100644 --- a/assets/stylesheets/common/discourse-post-event.scss +++ b/assets/stylesheets/common/discourse-post-event.scss @@ -6,6 +6,10 @@ $interested: #fb985d; .event__section { padding: 0.5em 1em; + &.event-actions svg { + padding-right: 0.25em; + } + &:not(:last-child) { border-bottom: 1px solid var(--primary-low); } @@ -70,6 +74,7 @@ $interested: #fb985d; align-items: center; padding: 0 1em; height: 75px; + border-bottom: 1px solid var(--primary-low); .more-dropdown { margin-left: auto; @@ -171,7 +176,7 @@ $interested: #fb985d; .event-actions { display: flex; - justify-content: space-between; + justify-content: end; align-items: center; height: 60px; padding: 0 1em; @@ -179,13 +184,13 @@ $interested: #fb985d; .event-status { margin: 0; - &.status-going .going-button .d-icon { + &.status-going .d-icon:not(.d-icon-angle-down) { color: var(--success); } - &.status-interested .interested-button .d-icon { + &.status-interested .d-icon:not(.d-icon-angle-down) { color: $interested; } - &.status-not_going .not-going-button .d-icon { + &.status-not_going .d-icon:not(.d-icon-angle-down) { color: var(--danger); } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 5de542ba..23096cf9 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -389,6 +389,7 @@ en: invitee: no_users: "No users found" status: + not_set: "RSVP" unknown: "Not interested" going: "Going" not_going: "Not Going"