Cleanup event-label

assets/javascripts/discourse/components/add-event-controls.js

@@ -6,7 +6,7 @@ import { eventLabel } from "../lib/date-utilities";
 import AddEvent from "./modal/add-event";
 
 export default Component.extend({
-  classNames: ["event-label"],
+  classNames: ["add-event-controls"],
   modal: service(),
 
   didInsertElement() {
@@ -30,6 +30,7 @@ export default Component.extend({
   valueLabel(event) {
     return eventLabel(event, {
       noText: this.get("noText"),
+      noContainer: true,
       useEventTimezone: true,
       showRsvp: true,
       siteSettings: this.siteSettings,

assets/javascripts/discourse/components/events-calendar-card.hbs

@@ -11,7 +11,7 @@
   {{discourse-tags topic mode="list"}}
 </div>
 
-<a href class="topic-event event-label" {{on "click" this.goToTopic}}>
+<a href class="topic-event" {{on "click" this.goToTopic}}>
   {{event-label topic.event}}
 </a>
 

assets/javascripts/discourse/connectors/topic-list-main-link-bottom/topic-list-event.hbr

@@ -0,0 +1,25 @@
+{{#if context.topic.event}}
+  <div class="topic-list-item-event">
+    <div class="topic-list-item-event-time">
+      <a
+        href={{context.topic.lastUnreadUrl}}
+        class="{{context.topic.topicListItemClasses}}"
+      >
+        {{event-label context.topic.event list="true"}}
+      </a>
+    </div>
+    {{#if context.siteSettings.events_rsvp}}
+      {{#if context.topic.event.rsvp}}
+        <div class="topic-list-item-event-rsvp">
+          <a
+            href={{context.topic.lastUnreadUrl}}
+            class={{context.topic.topicListItemClasses}}
+          >
+            <span>{{context.topic.event_going_total}}</span>
+            <span>{{i18n "event_rsvp.going.label"}}</span>
+          </a>
+        </div>
+      {{/if}}
+    {{/if}}
+  </div>
+{{/if}}

assets/javascripts/discourse/connectors/topic-title/event-details.hbs

@@ -1,9 +1,7 @@
 {{#unless model.editingTopic}}
   {{#if model.event}}
     <div class="event-date-mobile">
-      <div class="event-label">
-        {{event-label model.event topic="true"}}
-      </div>
+      {{event-label model.event topic="true"}}
       {{#if siteSettings.events_add_to_calendar}}
         {{add-to-calendar topic=model}}
       {{/if}}

assets/javascripts/discourse/lib/date-utilities.js.es6

@@ -364,6 +364,10 @@ function eventLabel(event, args = {}) {
     }
   }
 
+  if (!args.noContainer) {
+    label = `<span class='event-label'>${label}</span>`;
+  }
+
   return label;
 }
 

assets/stylesheets/common/events.scss

@@ -34,8 +34,17 @@
   display: block;
 }
 
-.event-label .fa {
-  margin-right: 7px;
+.event-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  background-color: var(--primary-100);
+  padding: 0.15em 0.35em;
+
+  .d-icon {
+    font-size: var(--font-down-1);
+    margin-bottom: 1px;
+  }
 }
 
 .event-details {
@@ -44,36 +53,14 @@
 
   .event-label {
     margin-top: 7px;
-    margin-right: 10px;
-    line-height: 18px;
-    display: inline-block;
   }
 
   .event-rsvp {
+    margin-left: 10px;
     margin-top: 6px;
   }
 }
 
-.date-time-container {
-  display: inline-block;
-
-  .d-icon {
-    margin-right: 7px;
-  }
-}
-
-.date-time.title {
-  width: 100px;
-
-  .d-icon.no-date {
-    margin: 0;
-  }
-
-  .date.no-date {
-    margin-left: -30px;
-  }
-}
-
 .add-to-calendar {
   position: relative;
   display: inline-block;
@@ -456,14 +443,19 @@ ul.events-calendar-events {
 
   .topic-link {
     font-size: 1.3em;
+    color: var(--primary);
 
     p {
       margin: 0;
     }
   }
 
-  .close .fa {
-    vertical-align: top;
+  .close {
+    color: var(--primary-500);
+
+    .fa {
+      vertical-align: top;
+    }
   }
 
   .topic-meta {
@@ -613,33 +605,37 @@ ul.events-calendar-events {
   }
 }
 
-.main-link.row-below-title {
-  .link-top-line {
-    display: block;
+.topic-list {
+  .topic-list-item-event {
+    margin-top: 0.25em;
+    font-size: var(--font-down-1);
   }
 
-  > .date-time-container,
-  > .topic-list-event-rsvp,
-  > .discourse-tags {
-    display: inline-block;
-    margin-right: 10px;
+  .topic-list-item-event-rsvp {
+    font-size: 0.9em;
+    margin-top: 4px;
   }
 }
 
-.topic-list-event-rsvp {
-  font-size: 0.9em;
-  margin-top: 4px;
-}
-
 .composer-controls-event {
   position: relative;
-  margin-left: 8px;
+
+  .add-event-controls {
+    display: flex;
+    align-items: center;
+  }
 
   .popup-tip {
     left: 0;
     right: initial;
     min-width: 300px;
   }
+
+  .btn {
+    border-color: var(--primary-400);
+    background-color: unset;
+    color: var(--primary-high);
+  }
 }
 
 .events-webcal-api {

assets/stylesheets/desktop/events.scss

@@ -38,11 +38,3 @@
     margin-right: 5px;
   }
 }
-
-.composer-controls-event .event-label {
-  display: flex;
-}
-
-.composer-controls-event .btn:not(:hover) {
-  background: var(--secondary);
-}

config/settings.yml

@@ -51,10 +51,10 @@ plugins:
     default: 'default'
     enum: "DiscourseEventsTimezoneDisplaySiteSetting"
   events_timezone_include_in_topic:
-    default: true
+    default: false
     client: true
   events_timezone_include_in_topic_list:
-    default: true
+    default: false
     client: true
   events_timezone_include_in_email:
     default: true

plugin.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 # name: discourse-events
 # about: Allows you to manage events in Discourse
-# version: 0.5.2
+# version: 0.5.3
 # authors: Angus McLeod
 # contact_emails: [email protected]
 # url: https://github.com/paviliondev/discourse-events