UX: show all 3 states in the UI
Before this, not_going was available only after choosing going or interested.
This commit is contained in:
jjaffeux
parent
7c64c6a2ed
commit
8e924b3166
|
|
@ -12,117 +12,9 @@ export default createWidget("discourse-post-event-status", {
|
|||
}
|
||||
},
|
||||
|
||||
defaultState(attrs) {
|
||||
const status = attrs.watchingInvitee ? attrs.watchingInvitee.status : null;
|
||||
|
||||
return {
|
||||
onChange: (data) => {
|
||||
this.state.icon = null;
|
||||
this.state.label = data.label;
|
||||
this.state.options.headerClass = "disabled";
|
||||
this.sendWidgetAction("changeWatchingInviteeStatus", data.id);
|
||||
},
|
||||
icon: this._headerIconForStatus(status),
|
||||
options: {
|
||||
caret: true,
|
||||
headerClass: "",
|
||||
},
|
||||
label: status
|
||||
? `discourse_post_event.models.invitee.status.${status}`
|
||||
: "discourse_post_event.models.invitee.status.unknown",
|
||||
statuses: this._statusesForStatus(status),
|
||||
};
|
||||
},
|
||||
|
||||
transform(attrs) {
|
||||
return {
|
||||
mightAttend:
|
||||
attrs.watchingInvitee &&
|
||||
(attrs.watchingInvitee.status === "going" ||
|
||||
attrs.watchingInvitee.status === "interested"),
|
||||
};
|
||||
},
|
||||
|
||||
template: hbs`
|
||||
{{#if transformed.mightAttend}}
|
||||
{{attach
|
||||
widget="widget-dropdown"
|
||||
attrs=(hash
|
||||
id="discourse-post-event-status-dropdown"
|
||||
label=state.label
|
||||
icon=state.icon
|
||||
content=state.statuses
|
||||
onChange=state.onChange
|
||||
options=state.options
|
||||
)
|
||||
}}
|
||||
{{else}}
|
||||
{{attach widget="interested-button"}}
|
||||
{{attach widget="going-button"}}
|
||||
{{/if}}
|
||||
{{attach widget="going-button"}}
|
||||
{{attach widget="interested-button"}}
|
||||
{{attach widget="not-going-button"}}
|
||||
`,
|
||||
|
||||
_statusesForStatus(status) {
|
||||
switch (status) {
|
||||
case "going":
|
||||
return [
|
||||
{
|
||||
id: "going",
|
||||
label: "discourse_post_event.models.invitee.status.going",
|
||||
},
|
||||
{
|
||||
id: "interested",
|
||||
label: "discourse_post_event.models.invitee.status.interested",
|
||||
},
|
||||
"separator",
|
||||
{
|
||||
id: "not_going",
|
||||
label: "discourse_post_event.models.invitee.status.not_going",
|
||||
},
|
||||
];
|
||||
case "interested":
|
||||
return [
|
||||
{
|
||||
id: "going",
|
||||
label: "discourse_post_event.models.invitee.status.going",
|
||||
},
|
||||
{
|
||||
id: "interested",
|
||||
label: "discourse_post_event.models.invitee.status.interested",
|
||||
},
|
||||
"separator",
|
||||
{
|
||||
id: "not_going",
|
||||
label: "discourse_post_event.models.invitee.status.not_going",
|
||||
},
|
||||
];
|
||||
case "not_going":
|
||||
return [
|
||||
{
|
||||
id: "going",
|
||||
label: "discourse_post_event.models.invitee.status.going",
|
||||
},
|
||||
{
|
||||
id: "not_going",
|
||||
label: "discourse_post_event.models.invitee.status.not_going",
|
||||
},
|
||||
"separator",
|
||||
{
|
||||
id: "interested",
|
||||
label: "discourse_post_event.models.invitee.status.interested",
|
||||
},
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
_headerIconForStatus(status) {
|
||||
switch (status) {
|
||||
case "going":
|
||||
return "check";
|
||||
case "interested":
|
||||
return "star";
|
||||
case "not_going":
|
||||
return "times";
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -217,12 +217,12 @@ export default createWidget("discourse-post-event", {
|
|||
|
||||
{{#if state.eventModel.can_update_attendance}}
|
||||
<section class="event-actions">
|
||||
{{attach
|
||||
widget="discourse-post-event-status"
|
||||
attrs=(hash
|
||||
watchingInvitee=this.state.eventModel.watching_invitee
|
||||
)
|
||||
}}
|
||||
{{attach
|
||||
widget="discourse-post-event-status"
|
||||
attrs=(hash
|
||||
watchingInvitee=this.state.eventModel.watching_invitee
|
||||
)
|
||||
}}
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import hbs from "discourse/widgets/hbs-compiler";
|
||||
import { createWidget } from "discourse/widgets/widget";
|
||||
|
||||
export default createWidget("not-going-button", {
|
||||
tagName: "button.not-going-button.btn.btn-default",
|
||||
|
||||
click() {
|
||||
this.sendWidgetAction("changeWatchingInviteeStatus", "not_going");
|
||||
},
|
||||
|
||||
template: hbs`
|
||||
{{d-icon "times"}}
|
||||
<span class="label">
|
||||
{{i18n "discourse_post_event.models.invitee.status.not_going"}}
|
||||
</span>
|
||||
`,
|
||||
});
|
||||
|
|
@ -150,34 +150,14 @@
|
|||
.event-status {
|
||||
margin: 0;
|
||||
|
||||
&.status-going {
|
||||
.widget-dropdown-header {
|
||||
.d-icon-check {
|
||||
color: var(--success, $success);
|
||||
}
|
||||
}
|
||||
|
||||
.item-going {
|
||||
font-weight: 700;
|
||||
}
|
||||
&.status-going .going-button .d-icon {
|
||||
color: var(--success, $success);
|
||||
}
|
||||
|
||||
&.status-interested {
|
||||
.item-interested {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.widget-dropdown-header {
|
||||
.d-icon-star {
|
||||
color: adjust-hue($danger, 25%);
|
||||
}
|
||||
}
|
||||
&.status-interested .interested-button .d-icon {
|
||||
color: adjust-hue($danger, 25%);
|
||||
}
|
||||
|
||||
&.status-not_going {
|
||||
.item-not_going {
|
||||
font-weight: 700;
|
||||
}
|
||||
&.status-not_going .not-going-button .d-icon {
|
||||
color: var(--danger, $danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue