DEV: more modular sections

assets/javascripts/discourse/components/discourse-post-event/creator.gjs

@@ -1,18 +1,25 @@
 import Component from "@glimmer/component";
 import avatar from "discourse/helpers/avatar";
 import { formatUsername } from "discourse/lib/utilities";
+import i18n from "discourse-common/helpers/i18n";
 
 export default class DiscoursePostEventCreator extends Component {
   get username() {
     return this.args.user.name || formatUsername(this.args.user.username);
   }
 
   <template>
-    <span class="event-creator">
-      <a class="topic-invitee-avatar" data-user-card={{@user.username}}>
-        {{avatar @user imageSize="tiny"}}
-        <span class="username">{{this.username}}</span>
-      </a>
+    <span class="creators">
+      <span class="created-by">{{i18n
+          "discourse_calendar.discourse_post_event.event_ui.created_by"
+        }}</span>
+
+      <span class="event-creator">
+        <a class="topic-invitee-avatar" data-user-card={{@user.username}}>
+          {{avatar @user imageSize="tiny"}}
+          <span class="username">{{this.username}}</span>
+        </a>
+      </span>
     </span>
   </template>
 }

assets/javascripts/discourse/components/discourse-post-event/dates.gjs

@@ -77,7 +77,7 @@ export default class DiscoursePostEventDates extends Component {
 
   <template>
     <section
-      class="event-dates"
+      class="event__section event-dates"
       {{didInsert this.computeDates}}
     >{{this.htmlDates}}</section>
   </template>

assets/javascripts/discourse/components/discourse-post-event/event-status.gjs

@@ -0,0 +1,36 @@
+import Component from "@glimmer/component";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class EventStatus extends Component {
+  get eventStatusLabel() {
+    return i18n(
+      `discourse_calendar.discourse_post_event.models.event.status.${this.args.event.status}.title`
+    );
+  }
+
+  get eventStatusDescription() {
+    return i18n(
+      `discourse_calendar.discourse_post_event.models.event.status.${this.args.event.status}.description`
+    );
+  }
+
+  get statusClass() {
+    return `status ${this.args.event.status}`;
+  }
+
+  <template>
+    {{#if @event.isExpired}}
+      <span class="status expired">
+        {{i18n "discourse_calendar.discourse_post_event.models.event.expired"}}
+      </span>
+    {{else if @event.isClosed}}
+      <span class="status closed">
+        {{i18n "discourse_calendar.discourse_post_event.models.event.closed"}}
+      </span>
+    {{else}}
+      <span class={{this.statusClass}} title={{this.eventStatusDescription}}>
+        {{this.eventStatusLabel}}
+      </span>
+    {{/if}}
+  </template>
+}

assets/javascripts/discourse/components/discourse-post-event/index.gjs

@@ -1,21 +1,33 @@
 import Component from "@glimmer/component";
-import { hash } from "@ember/helper";
+import { concat, hash } from "@ember/helper";
 import { service } from "@ember/service";
 import { modifier } from "ember-modifier";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import concatClass from "discourse/helpers/concat-class";
 import routeAction from "discourse/helpers/route-action";
 import { emojiUnescape } from "discourse/lib/text";
 import { escapeExpression } from "discourse/lib/utilities";
-import i18n from "discourse-common/helpers/i18n";
+import icon from "discourse-common/helpers/d-icon";
 import Creator from "./creator";
 import Dates from "./dates";
+import EventStatus from "./event-status";
 import Invitees from "./invitees";
 import MoreMenu from "./more-menu";
 import Status from "./status";
 import Url from "./url";
 
-const Separator = <template><span class="separator">·</span></template>;
+const StatusSeparator = <template><span class="separator">·</span></template>;
+
+const InfoSeparator = <template><hr /></template>;
+const InfoSection = <template>
+  <section class="event__section" ...attributes>
+    {{#if @icon}}
+      {{icon @icon}}
+    {{/if}}
+
+    {{yield}}
+  </section>
+</template>;
 
 export default class DiscoursePostEvent extends Component {
   @service currentUser;
@@ -33,18 +45,6 @@ export default class DiscoursePostEvent extends Component {
     return () => this.messageBus.unsubscribe(path);
   });
 
-  get eventStatusLabel() {
-    return i18n(
-      `discourse_calendar.discourse_post_event.models.event.status.${this.args.event.status}.title`
-    );
-  }
-
-  get eventStatusDescription() {
-    return i18n(
-      `discourse_calendar.discourse_post_event.models.event.status.${this.args.event.status}.description`
-    );
-  }
-
   get startsAtMonth() {
     return moment(this.args.event.startsAt).format("MMM");
   }
@@ -59,10 +59,6 @@ export default class DiscoursePostEvent extends Component {
     );
   }
 
-  get statusClass() {
-    return `status ${this.args.event.status}`;
-  }
-
   get isPublicEvent() {
     return this.args.event.status === "public";
   }
@@ -95,39 +91,18 @@ export default class DiscoursePostEvent extends Component {
               </span>
               <div class="status-and-creators">
                 <PluginOutlet
-                  @name="discourse-post-event-status"
-                  @outletArgs={{hash event=@event Separator=Separator}}
+                  @name="discourse-post-event-status-and-creators"
+                  @outletArgs={{hash
+                    event=@event
+                    Separator=StatusSeparator
+                    Status=(component EventStatus event=@event)
+                    Creator=(component Creator user=@event.creator)
+                  }}
                 >
-                  {{#if @event.isExpired}}
-                    <span class="status expired">
-                      {{i18n
-                        "discourse_calendar.discourse_post_event.models.event.expired"
-                      }}
-                    </span>
-                  {{else if @event.isClosed}}
-                    <span class="status closed">
-                      {{i18n
-                        "discourse_calendar.discourse_post_event.models.event.closed"
-                      }}
-                    </span>
-                  {{else}}
-                    <span
-                      class={{this.statusClass}}
-                      title={{this.eventStatusDescription}}
-                    >
-                      {{this.eventStatusLabel}}
-                    </span>
-                  {{/if}}
-                </PluginOutlet>
-
-                <Separator />
-
-                <span class="creators">
-                  <span class="created-by">{{i18n
-                      "discourse_calendar.discourse_post_event.event_ui.created_by"
-                    }}</span>
+                  <EventStatus @event={{@event}} />
+                  <StatusSeparator />
                   <Creator @user={{@event.creator}} />
-                </span>
+                </PluginOutlet>
               </div>
             </div>
 
@@ -138,28 +113,25 @@ export default class DiscoursePostEvent extends Component {
           </header>
 
           {{#if @event.canUpdateAttendance}}
-            <section class="event-actions">
+            <section class="event__section event-actions">
               <Status @event={{@event}} />
             </section>
           {{/if}}
 
-          {{#if @event.url}}
-            <hr />
-
+          <PluginOutlet
+            @name="discourse-post-event-info"
+            @outletArgs={{hash
+              event=@event
+              Section=(component InfoSection event=@event)
+              Url=(component Url url=@event.url)
+              Dates=(component Dates event=@event)
+              Invitees=(component Invitees event=@event)
+            }}
+          >
             <Url @url={{@event.url}} />
-          {{/if}}
-
-          <hr />
-
-          <Dates @event={{@event}} />
-
-          {{#unless @event.minimal}}
-            {{#if @event.shouldDisplayInvitees}}
-              <hr />
-
-              <Invitees @event={{@event}} />
-            {{/if}}
-          {{/unless}}
+            <Dates @event={{@event}} />
+            <Invitees @event={{@event}} />
+          </PluginOutlet>
         {{/if}}
       </div>
     </div>

assets/javascripts/discourse/components/discourse-post-event/invitees.gjs

@@ -54,26 +54,29 @@ export default class DiscoursePostEventInvitees extends Component {
   }
 
   <template>
-    <section class="event-invitees">
-      <div class="header">
-        <div class="event-invitees-status">
-          {{#each this.statsInfo as |info|}}
-            <span class={{info.class}}>{{info.label}}</span>
-          {{/each}}
-        </div>
+    {{#unless @event.minimal}}
+      {{#if @event.shouldDisplayInvitees}}
+        <section class="event__section event-invitees">
+          <div class="header">
+            <div class="event-invitees-status">
+              {{#each this.statsInfo as |info|}}
+                <span class={{info.class}}>{{info.label}}</span>
+              {{/each}}
+            </div>
 
-        <DButton
-          class="show-all btn-small"
-          @label="discourse_calendar.discourse_post_event.event_ui.show_all"
-          @action={{this.showAllInvitees}}
-        />
-
-      </div>
-      <ul class="event-invitees-avatars">
-        {{#each @event.sampleInvitees as |invitee|}}
-          <Invitee @invitee={{invitee}} />
-        {{/each}}
-      </ul>
-    </section>
+            <DButton
+              class="show-all btn-small"
+              @label="discourse_calendar.discourse_post_event.event_ui.show_all"
+              @action={{this.showAllInvitees}}
+            />
+          </div>
+          <ul class="event-invitees-avatars">
+            {{#each @event.sampleInvitees as |invitee|}}
+              <Invitee @invitee={{invitee}} />
+            {{/each}}
+          </ul>
+        </section>
+      {{/if}}
+    {{/unless}}
   </template>
 }

assets/javascripts/discourse/components/discourse-post-event/url.gjs

@@ -9,16 +9,18 @@ export default class DiscoursePostEventUrl extends Component {
   }
 
   <template>
-    <section class="event-url">
-      {{icon "link"}}
-      <a
-        class="url"
-        href={{this.url}}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {{@url}}
-      </a>
-    </section>
+    {{#if @url}}
+      <section class="event__section event-url">
+        {{icon "link"}}
+        <a
+          class="url"
+          href={{this.url}}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{@url}}
+        </a>
+      </section>
+    {{/if}}
   </template>
 }

assets/stylesheets/common/discourse-post-event.scss

@@ -3,6 +3,30 @@ $interested: #fb985d;
 .discourse-post-event {
   display: flex;
 
+  .event__section {
+    padding: 0.5em 1em;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--primary-low);
+    }
+
+    &:first-child {
+      border-top: 1px solid var(--primary-low);
+    }
+
+    p {
+      margin: 0;
+    }
+
+    > .d-icon {
+      padding-right: 0.25em;
+    }
+
+    .discourse-local-date .d-icon {
+      padding-right: 0.25em;
+    }
+  }
+
   .discourse-post-event-widget {
     border: 5px solid var(--primary-low);
     display: flex;
@@ -175,8 +199,6 @@ $interested: #fb985d;
 
   .event-invitees {
     display: flex;
-    height: 110px;
-    padding: 0 1em;
     align-items: flex-start;
     justify-content: center;
     overflow-y: auto;
@@ -274,9 +296,6 @@ $interested: #fb985d;
   .event-dates {
     display: flex;
     align-items: center;
-    padding: 0 1em;
-    height: 50px;
-    flex: 1;
 
     .d-icon {
       color: var(--primary-high);
@@ -285,7 +304,6 @@ $interested: #fb985d;
 
   .event-url {
     .url {
-      margin-left: 1em;
       max-width: 80%;
       @include ellipsis;
     }