coveo-search-ui/templates/Slack/SlackMessage.html

Coveo JavaScript Search Framework

<style>
  .CoveoResultList .coveo-slack-result-template .coveo-highlight {
    font-weight: normal;
    background-color: #FFE300;
  }

  .CoveoResult .coveo-slack-result-template {
    margin-right: 16px;
  }

  .coveo-slack-result-template .CoveoImageFieldValue[data-field="@slackmessageauthorprofilepicture"]>span>img {
    border-radius: 4px;
  }
</style>

<div class="coveo-result-frame coveo-slack-result-template">
  <div class="coveo-result-row" style="margin-right: 16px;">
    <div
      style="font-size: 12px; display: flex; align-items: baseline; margin-bottom: 10px; justify-content: space-between;">
      <div>
        <span class="CoveoText" data-value="MESSAGE"
          style="background-color: #86D8FF; color: #FFFFFF; padding: 3px 10px; border-radius: 32px; margin-right: 8px;"></span>
        <span class="CoveoText" data-value="in"></span>
        <span>:&nbsp;</span>
        <a class="CoveoResultLink" data-always-open-in-window="true" data-field="@clickableuri">
          <span class="CoveoFieldValue" data-field="@slackchannelname"></span>
        </a>
      </div>
    </div>
    <div style="display: flex; margin-bottom: 16px;">
      <span class="CoveoIcon" data-with-label="false"
        style="height: 32px; width: 32px; background-size: cover; margin-right: 16px; flex-shrink: 0;"></span>
      <div
        style="display: flex; background-color: #F6F7F9; border-radius: 8px; flex-grow: 1; padding: 8px; padding-bottom: 16px;">
        <span class="CoveoImageFieldValue" data-field="@slackmessageauthorprofilepicture" data-width="30"
          data-height="30" style="margin-right: 16px; border-radius: 4px;"></span>
        <div style="display: flex; flex-direction: column; margin-top: 5px;">
          <div style="display: flex; font-size: 12px; align-items: baseline; margin-bottom: 4px;">
            <span class="CoveoFieldValue" data-field="@slackmessageauthor"
              style="font-size: 16px; margin-right: 8px; font-weight: bold;"></span>
            <span class="CoveoFieldValue" data-field="@date" data-helper="time"
              style="color: #616061; padding-bottom: 2px;"></span>
            <span>&nbsp;-&nbsp;</span>
            <span class="CoveoFieldValue" data-field="@date" data-helper="dateTime"
              data-helper-options-predefined-format="MM/dd/yyyy" style="color: #616061; padding-bottom: 2px;"></span>              
          </div>
          <span class="CoveoExcerpt"></span>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: flex-end;">
      <a class="CoveoResultLink" data-field="@clickableuri" data-always-open-in-new-window="true">
        <span class="CoveoText" data-value="Open in Slack" style="font-size: 12px;"></span>
      </a>
    </div>
  </div>
</div>