GH-74 - Collaborative awareness

.github/workflows/lint.yaml → .github/workflows/lint_test.yaml

@@ -1,4 +1,4 @@
-name: Lint
+name: Lint and Test
 on:
  push:
  branches:
@@ -29,3 +29,6 @@ jobs:
  - name: Lint the code
  run: npm run lint
 
+# Commenting out running the tests until all existing test failures have been fixed
+# - name: Run the tests
+# run: npm t

blocks/edit/da-title/da-title.css

@@ -3,6 +3,10 @@
  padding: 48px 0;
 }
 
+:host > svg {
+ display: none;
+}
+
 h1 {
  margin-top: 0;
 }
@@ -54,7 +58,7 @@ h1 {
  opacity: 1;
 }
 
-.da-title-name-label:before {
+.da-title-name-label::before {
  display: block;
  content: '';
  position: absolute;
@@ -65,8 +69,80 @@ h1 {
  background: url('/blocks/edit/img/left-large.svg') center/18px no-repeat;
 }
 
-.da-title-actions {
+.da-title-collab-actions-wrapper {
+ display: flex;
  margin-bottom: 0.67em;
+}
+
+.collab-status {
+ display: flex;
+ align-items: center;
+ justify-content: end;
+}
+
+.collab-icon {
+ position: relative;
+ font-size: 12px;
+ font-weight: 700;
+}
+
+.collab-icon:hover {
+ z-index: 2;
+}
+
+.collab-icon.collab-popup::after {
+ display: block;
+ content: attr(data-popup-content);
+ position: absolute;
+ bottom: -32px;
+ left: 50%;
+ transform: translateX(-50%);
+ text-align: center;
+ text-transform: capitalize;
+ background: #676767;
+ color: #FFF;
+ white-space: nowrap;
+ padding: 0 8px;
+ border-radius: 4px;
+}
+
+.collab-icon-user {
+ height: 24px;
+ border-radius: 12px;
+ background: rgb(171 171 171 / 50%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-transform: uppercase;
+ color: #676767;
+ margin-right: -6px;
+ padding: 0 12px;
+ user-select: none;
+ -webkit-user-select: none;
+}
+
+.collab-icon-user:hover {
+ background: rgb(150 150 150 / 50%);
+}
+
+.collab-status-cloud {
+ height: 27px;
+ margin-left: -4px;
+ margin-bottom: -3px;
+ color: rgb(20 115 230 / 80%);
+}
+
+.collab-icon.collab-status-cloud.collab-popup::after {
+ bottom: -29px;
+}
+
+.collab-status-cloud svg {
+ pointer-events: none;
+ width: 37.5px;
+ height: 27px;
+}
+
+.da-title-actions {
  right: -12px;
  position: relative;
  border: 12px solid transparent;
@@ -120,3 +196,57 @@ h1 {
  bottom: 22px;
  }
 }
+
+/* -------------------------------------
+ Styles for the collab awarness widget
+ ------------------------------------- */
+
+div.collab-awareness {
+ flex: 1;
+ display: flex;
+ align-self: center;
+ justify-content: flex-end;
+ padding-right: 16px;
+}
+
+div.collab-other-users {
+ display: flex;
+ flex-direction: row-reverse;
+}
+
+div.collab-other-users div {
+ display: flex;
+}
+
+img.collab-icon {
+ width: 19px;
+ height: 19px;
+}
+
+
+div.collab-users {
+ display: flex;
+ flex-direction: row-reverse;
+}
+
+div.collab-initial {
+ background-color: var(--color-accent);
+ border-color: var(--color-accent);
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 50%;
+ width: 16px;
+ height: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 0.5px;
+}
+
+div.collab-initial p {
+ color: white;
+ font-size: 14px;
+ font-weight: 700;
+ margin-bottom: 15px;
+}
+

blocks/edit/da-title/da-title.js

@@ -1,19 +1,36 @@
-import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
+import { LitElement, html, nothing } from '../../../deps/lit/lit-core.min.js';
 import { saveToDa, saveToAem } from '../utils/helpers.js';
+import inlinesvg from '../../shared/inlinesvg.js';
 import getSheet from '../../shared/sheet.js';
 
 const sheet = await getSheet('/blocks/edit/da-title/da-title.css');
 
+const ICONS = [
+ '/blocks/edit/img/Smock_Cloud_18_N.svg',
+ '/blocks/edit/img/Smock_CloudDisconnected_18_N.svg',
+ '/blocks/edit/img/Smock_CloudError_18_N.svg',
+];
+
+const CLOUD_ICONS = {
+ connected: 'spectrum-Cloud-connected',
+ offline: 'spectrum-Cloud-offline',
+ connecting: 'spectrum-Cloud-error',
+ error: 'spectrum-Cloud-error',
+};
+
 export default class DaTitle extends LitElement {
  static properties = {
  details: { attribute: false },
+ collabStatus: { attribute: false },
+ collabUsers: { attribute: false },
  _actionsVis: {},
  };
 
  connectedCallback() {
  super.connectedCallback();
  this.shadowRoot.adoptedStyleSheets = [sheet];
  this._actionsVis = false;
+ inlinesvg({ parent: this.shadowRoot, paths: ICONS });
  }
 
  async handleAction(action) {
@@ -48,6 +65,35 @@ export default class DaTitle extends LitElement {
  this._actionsVis = !this._actionsVis;
  }
 
+ popover({ target }) {
+ // If toggling off, simply remove;
+ if (target.classList.contains('collab-popup')) {
+ target.classList.remove('collab-popup');
+ return;
+ }
+ // Find all open popups and close them
+ const openPopups = this.shadowRoot.querySelectorAll('.collab-popup');
+ openPopups.forEach((pop) => { pop.classList.remove('collab-popup'); });
+ target.classList.add('collab-popup');
+ }
+
+ renderCollabUsers() {
+ return html`${this.collabUsers.map((user) => {
+ const initials = user.split(' ').map((name) => name.toString().substring(0, 1));
+ return html`<div class="collab-icon collab-icon-user" data-popup-content="${user}" @click=${this.popover}>${initials.join('')}</div>`;
+ })}`;
+ }
+
+ renderCollab() {
+ return html`
+ <div class="collab-status">
+ ${this.collabUsers && this.collabUsers.length > 1 ? this.renderCollabUsers() : nothing}
+ <div class="collab-icon collab-status-cloud collab-status-${this.collabStatus}" data-popup-content="${this.collabStatus}" @click=${this.popover}>
+ <svg class="icon"><use href="#${CLOUD_ICONS[this.collabStatus]}"/></svg>
+ </div>
+ </div>`;
+ }
+
  render() {
  return html`
  <div class="da-title-inner">
@@ -58,25 +104,28 @@ export default class DaTitle extends LitElement {
  class="da-title-name-label">${this.details.parentName}</a>
  <h1>${this.details.name}</h1>
  </div>
- <div class="da-title-actions${this._actionsVis ? ' is-open' : ''}">
- <button
- @click=${this.handlePreview}
- class="con-button blue da-title-action"
- aria-label="Send">
- Preview
- </button>
- <button
- @click=${this.handlePublish}
- class="con-button blue da-title-action"
- aria-label="Send">
- Publish
- </button>
- <button
- @click=${this.toggleActions}
- class="con-button blue da-title-action-send"
- aria-label="Send">
- <span class="da-title-action-send-icon"></span>
- </button>
+ <div class="da-title-collab-actions-wrapper">
+ ${this.collabStatus ? this.renderCollab() : nothing}
+ <div class="da-title-actions${this._actionsVis ? ' is-open' : ''}">
+ <button
+ @click=${this.handlePreview}
+ class="con-button blue da-title-action"
+ aria-label="Send">
+ Preview
+ </button>
+ <button
+ @click=${this.handlePublish}
+ class="con-button blue da-title-action"
+ aria-label="Send">
+ Publish
+ </button>
+ <button
+ @click=${this.toggleActions}
+ class="con-button blue da-title-action-send"
+ aria-label="Send">
+ <span class="da-title-action-send-icon"></span>
+ </button>
+ </div>
  </div>
  </div>
  `;