FEATURE: calendar integration, settings changes, and header icon button

about.json

@@ -3,6 +3,6 @@
   "component": true,
   "modifiers": {
     "csp_extensions": ["script_src: https://meet.jit.si/external_api.js"],
-    "svg_icons": ["video"]
+    "svg_icons": ["video", "copy"]
   }
 }

common/common.scss

@@ -1,8 +1,81 @@
 .insert-jitsi-input {
+  position: relative;
+
   margin-bottom: 1em;
   .desc {
     font-size: $font-down-1;
     color: $primary-medium;
     max-width: 260px;
   }
+
+  .desc--bottom {
+    margin-top: 0rem;
+  }
+}
+
+.insert-jitsi-copied {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: $primary-high;
+  padding: 0.5rem;
+  color: $secondary;
+  font-size: $font-down-1;
+}
+
+.discourse-local-date {
+  > * {
+    pointer-events: none;
+  }
+
+  &.cooked-date {
+    color: var(--primary);
+    cursor: pointer;
+    border-bottom: 1px dashed var(--primary-medium);
+    white-space: nowrap;
+
+    .d-icon {
+      color: var(--primary);
+    }
+
+    &.past {
+      border-bottom-color: var(--primary-low-mid);
+    }
+
+    &.past[data-countdown] {
+      color: var(--primary-medium);
+    }
+  }
+}
+
+.locale-dates-previews {
+  max-width: 250px;
+
+  .preview {
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+    margin: 0;
+
+    .timezone {
+      font-weight: 700;
+    }
+
+    &.current {
+      background: var(--tertiary-low);
+    }
+  }
+}
+
+.download-calendar {
+  text-align: right;
+  cursor: pointer;
+  margin-top: 0.5em;
+}
+
+@media screen and (max-width: 350px) {
+  .header-icon-meeting,
+  .chat-composer-button.-insertChatJitsiInline {
+    display: none;
+  }
 }

javascripts/discourse/components/modal/insert-date-time.hbs

@@ -0,0 +1,262 @@
+<DModal
+  @title={{i18n "discourse_local_dates.title"}}
+  class="discourse-local-dates-create-modal -large"
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    <ConditionalLoadingSection @isLoading={{@model.event.isSaving}}>
+      <form class="form">
+        {{#if this.isValid}}
+          {{#if this.timezoneIsDifferentFromUserTimezone}}
+            <div class="preview alert alert-info">
+              {{i18n "discourse_local_dates.create.form.current_timezone"}}
+              <b
+              >{{this.formattedCurrentUserTimezone}}</b>{{this.currentPreview}}
+            </div>
+          {{/if}}
+        {{else}}
+          <div class="validation-error alert alert-error">
+            {{i18n "discourse_local_dates.create.form.invalid_date"}}
+          </div>
+        {{/if}}
+
+        {{this.computeDate}}
+
+        <div class="date-time-configuration">
+          <div class="inputs-panel">
+            <div
+              class="date-time-control from
+                {{if this.fromSelected 'is-selected'}}
+                {{if this.fromFilled 'is-filled'}}"
+            >
+              {{d-icon "calendar-alt"}}
+              <DButton
+                @action={{this.focusFrom}}
+                @translatedLabel={{this.formattedFrom}}
+                id="from-date-time"
+                class="date-time"
+                autofocus
+              />
+            </div>
+
+            <div
+              class="date-time-control to
+                {{if this.toSelected 'is-selected'}}
+                {{if this.toFilled 'is-filled'}}"
+            >
+              {{d-icon "calendar-alt"}}
+              <DButton
+                @action={{this.focusTo}}
+                @translatedLabel={{this.formattedTo}}
+                class="date-time"
+              />
+              {{#if this.toFilled}}
+                <DButton
+                  @action={{this.eraseToDateTime}}
+                  @icon="times"
+                  class="delete-to-date"
+                />
+              {{/if}}
+            </div>
+
+            {{#unless this.site.mobileView}}
+              <TimezoneInput
+                @options={{hash icon="globe"}}
+                @value={{this.timezone}}
+                @onChange={{action (mut this.timezone)}}
+              />
+            {{/unless}}
+          </div>
+
+          <div class="picker-panel">
+            <CalendarDateTimeInput
+              @datePickerId="local-date-create-form"
+              @date={{this.selectedDate}}
+              @time={{this.selectedTime}}
+              @minDate={{this.minDate}}
+              @timeFormat={{this.timeFormat}}
+              @dateFormat={{this.dateFormat}}
+              @onChangeDate={{action this.changeSelectedDate}}
+              @onChangeTime={{action this.changeSelectedTime}}
+              @onChange={{action this.onChangeDates}}
+            />
+          </div>
+
+          {{#if this.site.mobileView}}
+            <TimezoneInput
+              @value={{this.timezone}}
+              @options={{hash icon="globe"}}
+              @onChange={{action (mut this.timezone)}}
+            />
+          {{/if}}
+        </div>
+
+        {{#if this.canCreateEvent}}
+          <div class="control-group include-jitsi">
+            <label>{{theme-i18n "create_event_label"}}</label>
+            <p>{{theme-i18n "create_event_description"}}</p>
+            <div class="controls">
+              <Input @type="checkbox" @checked={{this.willCreateEvent}} />
+            </div>
+          </div>
+
+          {{#if this.willCreateEvent}}
+            <div class="control-group include-jitsi">
+              <label>{{theme-i18n "include_jitsi_label"}}</label>
+              <p>{{theme-i18n "include_jitsi_description"}}</p>
+              <div class="controls">
+                <Input @type="checkbox" @checked={{this.includeJitsi}} />
+              </div>
+            </div>
+
+            {{#if this.includeJitsi}}
+              <div class="control-group room-id">
+                <label>{{theme-i18n "room_label"}}</label>
+                <p>{{theme-i18n "modal.room_field_description"}}</p>
+                <div class="controls">
+                  <TextField
+                    @value={{this.jitsiRoom}}
+                    @autocomplete="off"
+                    @minlength="6"
+                    class="format-input"
+                  />
+                </div>
+              </div>
+            {{/if}}
+
+            <div class="control-group minimal">
+              <label>
+                {{i18n
+                  "discourse_calendar.discourse_post_event.builder_modal.minimal.label"
+                }}
+              </label>
+              <p>
+                {{i18n
+                  "discourse_calendar.discourse_post_event.builder_modal.minimal.checkbox_label"
+                }}
+              </p>
+              <div class="controls">
+                <Input @type="checkbox" @checked={{@model.event.minimal}} />
+              </div>
+            </div>
+          {{/if}}
+        {{/if}}
+
+        {{#if this.advancedMode}}
+          <div class="advanced-options">
+            {{#unless this.isRange}}
+              <div class="control-group recurrence">
+                <label class="control-label">
+                  {{i18n "discourse_local_dates.create.form.recurring_title"}}
+                </label>
+                <p>{{html-safe
+                    (i18n
+                      "discourse_local_dates.create.form.recurring_description"
+                    )
+                  }}</p>
+                <div class="controls">
+                  <ComboBox
+                    @content={{this.recurringOptions}}
+                    @value={{this.recurring}}
+                    @onChange={{action (mut this.recurring)}}
+                    @options={{hash
+                      none="discourse_local_dates.create.form.recurring_none"
+                    }}
+                    class="recurrence-input"
+                  />
+                </div>
+              </div>
+            {{/unless}}
+
+            {{#unless this.willCreateEvent}}
+
+              <div class="control-group timezones">
+                <label>{{i18n
+                    "discourse_local_dates.create.form.timezones_title"
+                  }}</label>
+                <p>{{i18n
+                    "discourse_local_dates.create.form.timezones_description"
+                  }}</p>
+                <div class="controls">
+                  <MultiSelect
+                    @valueProperty={{null}}
+                    @nameProperty={{null}}
+                    @content={{this.allTimezones}}
+                    @value={{this.timezones}}
+                    @options={{hash allowAny=false maximum=5}}
+                    class="timezones-input"
+                  />
+                </div>
+              </div>
+
+              <div class="control-group format">
+                <label>{{i18n
+                    "discourse_local_dates.create.form.format_title"
+                  }}</label>
+                <p>
+                  {{i18n
+                    "discourse_local_dates.create.form.format_description"
+                  }}
+                  <a
+                    target="_blank"
+                    href="https://momentjs.com/docs/#/parsing/string-format/"
+                    rel="noopener noreferrer"
+                  >
+                    {{d-icon "question-circle"}}
+                  </a>
+                </p>
+                <div class="controls">
+                  <TextField @value={{this.format}} class="format-input" />
+                </div>
+              </div>
+              <div class="control-group">
+                <ul class="formats">
+                  {{#each this.previewedFormats as |previewedFormat|}}
+                    <li class="format">
+                      <a
+                        class="moment-format"
+                        href
+                        {{on
+                          "click"
+                          (fn this.updateFormat previewedFormat.format)
+                        }}
+                      >
+                        {{previewedFormat.format}}
+                      </a>
+                      <span class="previewed-format">
+                        {{previewedFormat.preview}}
+                      </span>
+                    </li>
+                  {{/each}}
+                </ul>
+              </div>
+
+            {{/unless}}
+          </div>
+        {{/if}}
+      </form>
+    </ConditionalLoadingSection>
+  </:body>
+  <:footer>
+    <DButton
+      @type="button"
+      class="btn-primary"
+      @label="discourse_calendar.discourse_post_event.builder_modal.create"
+      @icon="calendar-day"
+      @action={{this.createEvent}}
+    />
+
+    <DButton
+      @action={{this.cancel}}
+      @translatedLabel={{i18n "cancel"}}
+      class="btn-flat"
+    />
+
+    <DButton
+      @action={{this.toggleAdvancedMode}}
+      @icon="cog"
+      @label={{this.toggleModeBtnLabel}}
+      class="btn-default advanced-mode-btn"
+    />
+  </:footer>
+</DModal>