coveo-search-ui/templates/Slack/SlackMessageThread.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;
  }

  .coveo-slack-result-template .coveo-folding-footer {
    order: 1;
    margin: 0;
    font-size: 12px;
  }

  .coveo-slack-result-template .CoveoResultFolding .coveo-folding-results {
    margin-left: 22px; 
    border-left: thin solid #bcc3ca;
  }

  .coveo-slack-result-template .coveo-folding-results .coveo-result-folding-child-result, .coveo-slack-result-template .coveo-folding-results .coveo-result-folding-child-result:hover {
    padding-left: 0;
    border-left: none;
    margin-bottom: 8px;
  }

  .coveo-slack-result-template .coveo-folding-oneresult-caption {
    display: none;
  }

  .coveo-slack-result-template .coveo-folding-show-less {
    margin: 0 0 0 46px;
  }  
</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="THREAD" 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  style="color: #626971; margin-top: 8px; font-weight: 700;">
            <span class="CoveoFieldValue" data-field="@slackmessagereplycount"></span>
            <span class="CoveoFieldValue" data-field="@slackmessagereplycount" data-helper="pluralHelper" 
              data-helper-options="{'singular': 'reply', 'plural': 'replies'}">
          </div>
        </div>
      </div>
    </div>
    <div
      style="display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr min-content; padding-left: 50px;">
      <span class="CoveoResultFolding" style="grid-column: 1 / 3; grid-row: 1;"
        data-result-template-id="SlackMessageReply" data-more-caption="Show thread"
        data-less-caption="Hide thread" data-range="0"></span>
      <a class="CoveoResultLink" style="order: 3;" 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>