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

UI: uses widget-dropdown and slightly changes update attendance UI

This commit is contained in:
jjaffeux 2020-04-29 20:10:49 +02:00
parent 95586dca90
commit 8685775824
6 changed files with 166 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
assets/javascripts/discourse/widgets/discourse-post-event-status.js.es6
View File

@ -1,12 +1,10 @@
import { h } from "virtual-dom";
import { createWidget } from "discourse/widgets/widget";
import hbs from "discourse/widgets/hbs-compiler";
export default createWidget("discourse-post-event-status", {
tagName: "select.event-status",
tagName: "div.event-status",
change(event) {
this.sendWidgetAction("changeWatchingInviteeStatus", event.target.value);
},
buildKey: attrs => `discourse-post-event-status-${attrs.id}`,
buildClasses(attrs) {
if (attrs.watchingInvitee) {
@ -14,38 +12,113 @@ export default createWidget("discourse-post-event-status", {
}
},
html(attrs) {
const statuses = [
defaultState(attrs) {
return {
onChange: data => {
this.state.label = data.label;
this.state.options.headerClass = "disabled";
this.sendWidgetAction("changeWatchingInviteeStatus", data.id);
},
icon: this._headerIconForStatus(attrs.watchingInvitee.status),
options: {
caret: true,
headerClass: ""
},
label: attrs.watchingInvitee.status
? `discourse_post_event.models.invitee.status.${attrs.watchingInvitee.status}`
: "discourse_post_event.models.invitee.status.unknown",
statuses: this._statusesForStatus(attrs.watchingInvitee.status)
};
},
transform(attrs) {
return {
mightAttend:
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}}
`,
_statusesForStatus(status) {
switch (status) {
case "going":
return [
{
value: null,
name: I18n.t("discourse_post_event.models.invitee.status.unknown")
id: "going",
label: "discourse_post_event.models.invitee.status.going"
},
{
value: "going",
name: I18n.t("discourse_post_event.models.invitee.status.going")
id: "interested",
label: "discourse_post_event.models.invitee.status.interested"
},
"separator",
{
value: "interested",
name: I18n.t("discourse_post_event.models.invitee.status.interested")
},
{
value: "not_going",
name: I18n.t("discourse_post_event.models.invitee.status.not_going")
id: "not_going",
label: "discourse_post_event.models.invitee.status.not_going"
}
];
const value = attrs.watchingInvitee ? attrs.watchingInvitee.status : null;
return statuses.map(status =>
h(
"option",
case "interested":
return [
{
value: status.value,
class: `status-${status.value}`,
selected: status.value === value
id: "going",
label: "discourse_post_event.models.invitee.status.going"
},
status.name
)
);
{
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";
}
}
});

17
assets/javascripts/discourse/widgets/going-button.js.es6 Normal file
View File

@ -0,0 +1,17 @@
import hbs from "discourse/widgets/hbs-compiler";
import { createWidget } from "discourse/widgets/widget";
export default createWidget("interested-button", {
tagName: "button.interested-button.btn.btn-default",
click() {
this.sendWidgetAction("changeWatchingInviteeStatus", "going");
},
template: hbs`
{{d-icon "check"}}
<span class="label">
{{i18n "discourse_post_event.models.invitee.status.going"}}
</span>
`
});

17
assets/javascripts/discourse/widgets/interested-button.js.es6 Normal file
View File

@ -0,0 +1,17 @@
import hbs from "discourse/widgets/hbs-compiler";
import { createWidget } from "discourse/widgets/widget";
export default createWidget("interested-button", {
tagName: "button.interested-button.btn.btn-default",
click() {
this.sendWidgetAction("changeWatchingInviteeStatus", "interested");
},
template: hbs`
{{d-icon "star"}}
<span class="label">
{{i18n "discourse_post_event.models.invitee.status.interested"}}
</span>
`
});

23
assets/stylesheets/common/discourse-post-event.scss
View File

@ -121,12 +121,33 @@
.event-status {
margin: 0;
.widget-dropdown {
margin: 0;
}
&.status-going {
.widget-dropdown-header {
.d-icon-check {
color: $success;
}
}
.item-going {
font-weight: 700;
}
}
&.status-interested {
.item-interested {
font-weight: 700;
}
}
&.status-not_going {
color: $danger;
.item-not_going {
font-weight: 700;
}
}
}
}

2
config/locales/client.en.yml
View File

@ -23,7 +23,7 @@ en:
models:
invitee:
status:
unknown: "Undecided?"
unknown: "Not interested"
going: "Going"
not_going: "Not Going"
interested: "Interested"

1
plugin.rb
View File

@ -28,6 +28,7 @@ register_svg_icon "fas fa-calendar-day"
register_svg_icon "fas fa-question"
register_svg_icon "fas fa-clock"
register_svg_icon "fas fa-clock"
register_svg_icon "fas fa-star"
after_initialize do
module ::DiscourseCalendar