Skip to content

Commit a65eba4

Browse files
auniverseawayauniverseaway
authored
Merge pull request #71 from adobe/awrz2
GH-74 - Collaborative awareness
2 parents 2626a17 + 7ae810b commit a65eba4

9 files changed

+453
-62
lines changed

‎.github/workflows/lint.yaml ‎.github/workflows/lint_test.yaml

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Lint
1+
name: Lint and Test
22
on:
33
push:
44
branches:
@@ -29,3 +29,6 @@ jobs:
2929
- name: Lint the code
3030
run: npm run lint
3131

32+
# Commenting out running the tests until all existing test failures have been fixed
33+
# - name: Run the tests
34+
# run: npm t

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

+132-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
padding: 48px 0;
44
}
55

6+
:host > svg {
7+
display: none;
8+
}
9+
610
h1 {
711
margin-top: 0;
812
}
@@ -54,7 +58,7 @@ h1 {
5458
opacity: 1;
5559
}
5660

57-
.da-title-name-label:before {
61+
.da-title-name-label::before {
5862
display: block;
5963
content: '';
6064
position: absolute;
@@ -65,8 +69,80 @@ h1 {
6569
background: url('/blocks/edit/img/left-large.svg') center/18px no-repeat;
6670
}
6771

68-
.da-title-actions {
72+
.da-title-collab-actions-wrapper {
73+
display: flex;
6974
margin-bottom: 0.67em;
75+
}
76+
77+
.collab-status {
78+
display: flex;
79+
align-items: center;
80+
justify-content: end;
81+
}
82+
83+
.collab-icon {
84+
position: relative;
85+
font-size: 12px;
86+
font-weight: 700;
87+
}
88+
89+
.collab-icon:hover {
90+
z-index: 2;
91+
}
92+
93+
.collab-icon.collab-popup::after {
94+
display: block;
95+
content: attr(data-popup-content);
96+
position: absolute;
97+
bottom: -32px;
98+
left: 50%;
99+
transform: translateX(-50%);
100+
text-align: center;
101+
text-transform: capitalize;
102+
background: #676767;
103+
color: #FFF;
104+
white-space: nowrap;
105+
padding: 0 8px;
106+
border-radius: 4px;
107+
}
108+
109+
.collab-icon-user {
110+
height: 24px;
111+
border-radius: 12px;
112+
background: rgb(171 171 171 / 50%);
113+
display: flex;
114+
align-items: center;
115+
justify-content: center;
116+
text-transform: uppercase;
117+
color: #676767;
118+
margin-right: -6px;
119+
padding: 0 12px;
120+
user-select: none;
121+
-webkit-user-select: none;
122+
}
123+
124+
.collab-icon-user:hover {
125+
background: rgb(150 150 150 / 50%);
126+
}
127+
128+
.collab-status-cloud {
129+
height: 27px;
130+
margin-left: -4px;
131+
margin-bottom: -3px;
132+
color: rgb(20 115 230 / 80%);
133+
}
134+
135+
.collab-icon.collab-status-cloud.collab-popup::after {
136+
bottom: -29px;
137+
}
138+
139+
.collab-status-cloud svg {
140+
pointer-events: none;
141+
width: 37.5px;
142+
height: 27px;
143+
}
144+
145+
.da-title-actions {
70146
right: -12px;
71147
position: relative;
72148
border: 12px solid transparent;
@@ -120,3 +196,57 @@ h1 {
120196
bottom: 22px;
121197
}
122198
}
199+
200+
/* -------------------------------------
201+
Styles for the collab awarness widget
202+
------------------------------------- */
203+
204+
div.collab-awareness {
205+
flex: 1;
206+
display: flex;
207+
align-self: center;
208+
justify-content: flex-end;
209+
padding-right: 16px;
210+
}
211+
212+
div.collab-other-users {
213+
display: flex;
214+
flex-direction: row-reverse;
215+
}
216+
217+
div.collab-other-users div {
218+
display: flex;
219+
}
220+
221+
img.collab-icon {
222+
width: 19px;
223+
height: 19px;
224+
}
225+
226+
227+
div.collab-users {
228+
display: flex;
229+
flex-direction: row-reverse;
230+
}
231+
232+
div.collab-initial {
233+
background-color: var(--color-accent);
234+
border-color: var(--color-accent);
235+
border-style: solid;
236+
border-width: 1px;
237+
border-radius: 50%;
238+
width: 16px;
239+
height: 16px;
240+
display: flex;
241+
align-items: center;
242+
justify-content: center;
243+
margin-top: 0.5px;
244+
}
245+
246+
div.collab-initial p {
247+
color: white;
248+
font-size: 14px;
249+
font-weight: 700;
250+
margin-bottom: 15px;
251+
}
252+

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

+69-20
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,36 @@
1-
import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
1+
import { LitElement, html, nothing } from '../../../deps/lit/lit-core.min.js';
22
import { saveToDa, saveToAem } from '../utils/helpers.js';
3+
import inlinesvg from '../../shared/inlinesvg.js';
34
import getSheet from '../../shared/sheet.js';
45

56
const sheet = await getSheet('/blocks/edit/da-title/da-title.css');
67

8+
const ICONS = [
9+
'/blocks/edit/img/Smock_Cloud_18_N.svg',
10+
'/blocks/edit/img/Smock_CloudDisconnected_18_N.svg',
11+
'/blocks/edit/img/Smock_CloudError_18_N.svg',
12+
];
13+
14+
const CLOUD_ICONS = {
15+
connected: 'spectrum-Cloud-connected',
16+
offline: 'spectrum-Cloud-offline',
17+
connecting: 'spectrum-Cloud-error',
18+
error: 'spectrum-Cloud-error',
19+
};
20+
721
export default class DaTitle extends LitElement {
822
static properties = {
923
details: { attribute: false },
24+
collabStatus: { attribute: false },
25+
collabUsers: { attribute: false },
1026
_actionsVis: {},
1127
};
1228

1329
connectedCallback() {
1430
super.connectedCallback();
1531
this.shadowRoot.adoptedStyleSheets = [sheet];
1632
this._actionsVis = false;
33+
inlinesvg({ parent: this.shadowRoot, paths: ICONS });
1734
}
1835

1936
async handleAction(action) {
@@ -48,6 +65,35 @@ export default class DaTitle extends LitElement {
4865
this._actionsVis = !this._actionsVis;
4966
}
5067

68+
popover({ target }) {
69+
// If toggling off, simply remove;
70+
if (target.classList.contains('collab-popup')) {
71+
target.classList.remove('collab-popup');
72+
return;
73+
}
74+
// Find all open popups and close them
75+
const openPopups = this.shadowRoot.querySelectorAll('.collab-popup');
76+
openPopups.forEach((pop) => { pop.classList.remove('collab-popup'); });
77+
target.classList.add('collab-popup');
78+
}
79+
80+
renderCollabUsers() {
81+
return html`${this.collabUsers.map((user) => {
82+
const initials = user.split(' ').map((name) => name.toString().substring(0, 1));
83+
return html`<div class="collab-icon collab-icon-user" data-popup-content="${user}" @click=${this.popover}>${initials.join('')}</div>`;
84+
})}`;
85+
}
86+
87+
renderCollab() {
88+
return html`
89+
<div class="collab-status">
90+
${this.collabUsers && this.collabUsers.length > 1 ? this.renderCollabUsers() : nothing}
91+
<div class="collab-icon collab-status-cloud collab-status-${this.collabStatus}" data-popup-content="${this.collabStatus}" @click=${this.popover}>
92+
<svg class="icon"><use href="#${CLOUD_ICONS[this.collabStatus]}"/></svg>
93+
</div>
94+
</div>`;
95+
}
96+
5197
render() {
5298
return html`
5399
<div class="da-title-inner">
@@ -58,25 +104,28 @@ export default class DaTitle extends LitElement {
58104
class="da-title-name-label">${this.details.parentName}</a>
59105
<h1>${this.details.name}</h1>
60106
</div>
61-
<div class="da-title-actions${this._actionsVis ? ' is-open' : ''}">
62-
<button
63-
@click=${this.handlePreview}
64-
class="con-button blue da-title-action"
65-
aria-label="Send">
66-
Preview
67-
</button>
68-
<button
69-
@click=${this.handlePublish}
70-
class="con-button blue da-title-action"
71-
aria-label="Send">
72-
Publish
73-
</button>
74-
<button
75-
@click=${this.toggleActions}
76-
class="con-button blue da-title-action-send"
77-
aria-label="Send">
78-
<span class="da-title-action-send-icon"></span>
79-
</button>
107+
<div class="da-title-collab-actions-wrapper">
108+
${this.collabStatus ? this.renderCollab() : nothing}
109+
<div class="da-title-actions${this._actionsVis ? ' is-open' : ''}">
110+
<button
111+
@click=${this.handlePreview}
112+
class="con-button blue da-title-action"
113+
aria-label="Send">
114+
Preview
115+
</button>
116+
<button
117+
@click=${this.handlePublish}
118+
class="con-button blue da-title-action"
119+
aria-label="Send">
120+
Publish
121+
</button>
122+
<button
123+
@click=${this.toggleActions}
124+
class="con-button blue da-title-action-send"
125+
aria-label="Send">
126+
<span class="da-title-action-send-icon"></span>
127+
</button>
128+
</div>
80129
</div>
81130
</div>
82131
`;

‎blocks/edit/img/Smock_CloudDisconnected_18_N.svg

+7
Loading

‎blocks/edit/img/Smock_CloudError_18_N.svg

+7
Loading

‎blocks/edit/img/Smock_Cloud_18_N.svg

+7
Loading

0 commit comments

Comments
 (0)