Skip to content

Commit 3076750

Browse files
chrischrischrischrischrischris
authored
Regional Edits (#158)
* wip * Code cleanup * Add e2e test; Code refactoring * css merge fix * Remove unit test as testing is covered in functional tests * Fix for Firefox & Safari * Fix whitespace linting issue * Mistakenly was skipping classless blocks
1 parent 242c050 commit 3076750

File tree

13 files changed

+464
-62
lines changed

13 files changed

+464
-62
lines changed

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

+15
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
}
77

88
.editor-wrapper {
9+
--editor-btn-bg-color: #EFEFEF;
10+
--editor-btn-bg-color-hover: #e9e9e9;
11+
912
position: relative;
1013
flex: 0 1 auto;
1114
width: var(--grid-container-width);
@@ -89,6 +92,10 @@ da-versions.show-versions {
8992
}
9093

9194

95+
.da-preview-menuitem.show-preview:hover {
96+
background-color: var(--editor-btn-bg-color-hover) !important;
97+
}
98+
9299
@media (min-width: 600px) {
93100
:host {
94101
padding: 0 80px;
@@ -113,4 +120,12 @@ da-versions.show-versions {
113120
.editor-wrapper {
114121
width: 900px;
115122
}
123+
124+
da-editor {
125+
126+
}
127+
128+
:host(.show-preview) da-editor {
129+
130+
}
116131
}

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

+153-36
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
grid-template-areas: 'editor';
44
}
55

6+
.da-prose-mirror {
7+
--editor-btn-bg-color: #EFEFEF;
8+
--editor-btn-bg-color-hover: #e9e9e9;
9+
}
10+
11+
612
.da-prose-mirror {
713
grid-area: editor;
814
}
@@ -141,7 +147,7 @@ td.selectedCell {
141147
overflow: hidden;
142148
border-radius: 2px;
143149
margin-bottom: 6px;
144-
background-color: #EFEFEF;
150+
background-color: var(--editor-btn-bg-color);
145151
}
146152

147153
span.ProseMirror-menuitem.edit-table[style=""] + .ProseMirror-menuitem {
@@ -155,7 +161,7 @@ span.ProseMirror-menuitem.edit-table[style=""] + .ProseMirror-menuitem {
155161
span.ProseMirror-menuseparator {
156162
height: 2px;
157163
display: block;
158-
background: #EFEFEF;
164+
background: var(--editor-btn-bg-color);
159165
margin-bottom: 6px;
160166
border-radius: 1px;
161167
}
@@ -169,6 +175,12 @@ span.ProseMirror-menuseparator {
169175
height: 44px;
170176
}
171177

178+
.ProseMirror-menu-dropdown:hover,
179+
.ProseMirror-menuitem > div:not(.ProseMirror-menu-dropdown-wrap, .ProseMirror-menu-disabled):hover,
180+
.ProseMirror-menu-dropdown-item > div:not(.ProseMirror-menu-disabled):hover {
181+
background-color: var(--editor-btn-bg-color-hover) !important;
182+
}
183+
172184
.ProseMirror-menuitem:has(.open-assets.ProseMirror-menu-disabled),
173185
.ProseMirror-menuitem:has(.img-alt-text.ProseMirror-menu-disabled)
174186
{
@@ -180,7 +192,7 @@ span.ProseMirror-menuseparator {
180192
}
181193

182194
.ProseMirror-menu-dropdown.edit-text {
183-
background: url('/blocks/edit/img/Smock_Text_18_N.svg') center / 18px no-repeat #EFEFEF;
195+
background: url('/blocks/edit/img/Smock_Text_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
184196
}
185197

186198
.ProseMirror-menu-dropdown-menu {
@@ -207,137 +219,137 @@ span.ProseMirror-menuseparator {
207219
.ProseMirror-menu-dropdown-item > .separator {
208220
height: 2px;
209221
display: block;
210-
background: #EFEFEF;
222+
background: var(--editor-btn-bg-color);
211223
margin-bottom: 6px;
212224
border-radius: 1px;
213225
}
214226

215227
.menu-item-para {
216-
background: url('/blocks/edit/img/Smock_TextParagraph_18_N.svg') center / 18px no-repeat #EFEFEF;
228+
background: url('/blocks/edit/img/Smock_TextParagraph_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
217229
}
218230

219231
.menu-item-h1 {
220-
background: url('/blocks/edit/img/Smock_Heading1_18_N.svg') center / 18px no-repeat #EFEFEF;
232+
background: url('/blocks/edit/img/Smock_Heading1_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
221233
}
222234

223235
.menu-item-h2 {
224-
background: url('/blocks/edit/img/Smock_Heading2_18_N.svg') center / 18px no-repeat #EFEFEF;
236+
background: url('/blocks/edit/img/Smock_Heading2_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
225237
}
226238

227239
.menu-item-h3 {
228-
background: url('/blocks/edit/img/Smock_Heading3_18_N.svg') center / 18px no-repeat #EFEFEF;
240+
background: url('/blocks/edit/img/Smock_Heading3_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
229241
}
230242

231243
.menu-item-h4 {
232-
background: url('/blocks/edit/img/Smock_Heading4_18_N.svg') center / 18px no-repeat #EFEFEF;
244+
background: url('/blocks/edit/img/Smock_Heading4_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
233245
}
234246

235247
.menu-item-h5 {
236-
background: url('/blocks/edit/img/Smock_Heading5_18_N.svg') center / 18px no-repeat #EFEFEF;
248+
background: url('/blocks/edit/img/Smock_Heading5_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
237249
}
238250

239251
.menu-item-h6 {
240-
background: url('/blocks/edit/img/Smock_Heading6_18_N.svg') center / 18px no-repeat #EFEFEF;
252+
background: url('/blocks/edit/img/Smock_Heading6_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
241253
}
242254

243255
.edit-bold {
244-
background: url('/blocks/edit/img/Smock_TextBold_18_N.svg') center / 18px no-repeat #EFEFEF;
256+
background: url('/blocks/edit/img/Smock_TextBold_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
245257
}
246258

247259
.edit-italic {
248-
background: url('/blocks/edit/img/Smock_TextItalic_18_N.svg') center / 18px no-repeat #EFEFEF;
260+
background: url('/blocks/edit/img/Smock_TextItalic_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
249261
}
250262

251263
.edit-link {
252-
background: url('/blocks/edit/img/Smock_Link_18_N.svg') center / 18px no-repeat #EFEFEF;
264+
background: url('/blocks/edit/img/Smock_Link_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
253265
}
254266

255267
.edit-unlink {
256-
background: url('/blocks/edit/img/Smock_Unlink_18_N.svg') center / 18px no-repeat #EFEFEF;
268+
background: url('/blocks/edit/img/Smock_Unlink_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
257269
}
258270

259271
.bullet-list, .ProseMirror-menu-dropdown.list-menu {
260-
background: url('/blocks/edit/img/Smock_TextBulleted_18_N.svg') center / 18px no-repeat #EFEFEF;
272+
background: url('/blocks/edit/img/Smock_TextBulleted_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
261273
}
262274

263275
.ordered-list {
264-
background: url('/blocks/edit/img/Smock_TextNumbered_18_N.svg') center / 18px no-repeat #EFEFEF;
276+
background: url('/blocks/edit/img/Smock_TextNumbered_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
265277
}
266278

267279
.indent-list {
268-
background: url('/blocks/edit/img/Smock_TextIndentIncrease_18_N.svg') center / 18px no-repeat #EFEFEF;
280+
background: url('/blocks/edit/img/Smock_TextIndentIncrease_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
269281
}
270282

271283
.outdent-list {
272-
background: url('/blocks/edit/img/Smock_TextIndentDecrease_18_N.svg') center / 18px no-repeat #EFEFEF;
284+
background: url('/blocks/edit/img/Smock_TextIndentDecrease_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
273285
}
274286

275287
.insert-table {
276-
background: url('/blocks/edit/img/Smock_TableAdd_18_N.svg') center / 18px no-repeat #EFEFEF;
288+
background: url('/blocks/edit/img/Smock_TableAdd_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
277289
}
278290

279291
.ProseMirror-menu-dropdown.edit-table {
280-
background: url('/blocks/edit/img/Smock_TableEdit_18_N.svg') center / 18px no-repeat #EFEFEF;
292+
background: url('/blocks/edit/img/Smock_TableEdit_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
281293
}
282294

283295
.addColBefore {
284-
background: url('/blocks/edit/img/Smock_TableColumnAddLeft_18_N.svg') center / 18px no-repeat #EFEFEF;
296+
background: url('/blocks/edit/img/Smock_TableColumnAddLeft_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
285297
}
286298

287299
.addColumnAfter {
288-
background: url('/blocks/edit/img/Smock_TableColumnAddRight_18_N.svg') center / 18px no-repeat #EFEFEF;
300+
background: url('/blocks/edit/img/Smock_TableColumnAddRight_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
289301
}
290302

291303
.deleteColumn {
292-
background: url('/blocks/edit/img/Smock_TableColumnRemoveCenter_18_N.svg') center / 18px no-repeat #EFEFEF;
304+
background: url('/blocks/edit/img/Smock_TableColumnRemoveCenter_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
293305
}
294306

295307
.addRowBefore {
296-
background: url('/blocks/edit/img/Smock_TableRowAddTop_18_N.svg') center / 18px no-repeat #EFEFEF;
308+
background: url('/blocks/edit/img/Smock_TableRowAddTop_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
297309
}
298310

299311
.addRowAfter {
300-
background: url('/blocks/edit/img/Smock_TableRowAddBottom_18_N.svg') center / 18px no-repeat #EFEFEF;
312+
background: url('/blocks/edit/img/Smock_TableRowAddBottom_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
301313
}
302314

303315
.deleteRow {
304-
background: url('/blocks/edit/img/Smock_TableRowRemoveCenter_18_N.svg') center / 18px no-repeat #EFEFEF;
316+
background: url('/blocks/edit/img/Smock_TableRowRemoveCenter_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
305317
}
306318

307319
.deleteTable {
308-
background: url('/blocks/edit/img/Smock_TableRemove_18_N.svg') center / 18px no-repeat #EFEFEF;
320+
background: url('/blocks/edit/img/Smock_TableRemove_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
309321
}
310322

311323
.mergeCells {
312-
background: url('/blocks/edit/img/Smock_TableMergeCells_18_N.svg') center / 18px no-repeat #EFEFEF;
324+
background: url('/blocks/edit/img/Smock_TableMergeCells_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
313325
}
314326

315327
.splitCell {
316-
background: url('/blocks/edit/img/Smock_TableRowSplit_18_N.svg') center / 18px no-repeat #EFEFEF;
328+
background: url('/blocks/edit/img/Smock_TableRowSplit_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
317329
}
318330

319331
.edit-hr {
320-
background: url('/blocks/edit/img/Smock_PageRule_18_N.svg') center / 18px no-repeat #EFEFEF;
332+
background: url('/blocks/edit/img/Smock_PageRule_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
321333
}
322334

323335
.open-library {
324-
background: url('/blocks/edit/img/Smock_CCLibrary_18_N.svg') center / 18px no-repeat #EFEFEF;
336+
background: url('/blocks/edit/img/Smock_CCLibrary_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
325337
}
326338

327339
.open-assets {
328-
background: url('/blocks/edit/img/Smock_Images_18_N.svg') center / 18px no-repeat #EFEFEF;
340+
background: url('/blocks/edit/img/Smock_Images_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
329341
}
330342

331343
.edit-undo {
332-
background: url('/blocks/edit/img/Smock_Undo_18_N.svg') center / 18px no-repeat #EFEFEF;
344+
background: url('/blocks/edit/img/Smock_Undo_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
333345
}
334346

335347
.edit-redo {
336-
background: url('/blocks/edit/img/Smock_Redo_18_N.svg') center / 18px no-repeat #EFEFEF;
348+
background: url('/blocks/edit/img/Smock_Redo_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
337349
}
338350

339351
.img-alt-text {
340-
background: url('/blocks/edit/img/Smock_ImageText_18_N.svg') center / 18px no-repeat #EFEFEF;
352+
background: url('/blocks/edit/img/Smock_ImageText_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
341353
}
342354

343355
/* Generic ProseMirror Styles */
@@ -584,6 +596,7 @@ da-library.hide {
584596
word-break: normal;
585597
pointer-events: none;
586598
}
599+
587600
/* This renders the username above the caret */
588601
.ProseMirror-yjs-cursor > div {
589602
position: absolute;
@@ -601,3 +614,107 @@ da-library.hide {
601614
padding: 0 3px;
602615
white-space: nowrap;
603616
}
617+
618+
da-loc-deleted, da-loc-added {
619+
display: block;
620+
position: relative;
621+
}
622+
623+
.loc-dialog {
624+
/* position: relative; */
625+
/* top: 50%;
626+
transform: translateY(-50%); */
627+
padding: 10px;
628+
border-radius: 4px;
629+
box-shadow: rgb(181, 181, 181) 0px 0px 5px 0px;
630+
background: rgb(255, 255, 255);
631+
box-sizing: border-box;
632+
grid-area: toolbar;
633+
z-index: 1002;
634+
display: flex;
635+
flex-direction: column;
636+
}
637+
638+
.loc-dialog > span {
639+
height: 40px;
640+
}
641+
642+
.loc-dialog > div {
643+
display: flex;
644+
justify-content: space-around;
645+
}
646+
647+
.loc-dialog > div > span {
648+
display: block;
649+
width: 44px;
650+
height: 44px;
651+
text-indent: -1000px;
652+
overflow: hidden;
653+
border-radius: 2px;
654+
margin-bottom: 6px;
655+
background-color: rgb(239 239 239);
656+
box-shadow: rgb(181 181 181) 0 0 5px 0;
657+
}
658+
659+
.loc-keep {
660+
width: 44px;
661+
height: 44px;
662+
background: url('/blocks/edit/img/Smock_CheckmarkCircleOutline_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
663+
}
664+
665+
.loc-keep:hover {
666+
box-shadow: #008000 0 0 5px 0;
667+
}
668+
669+
.loc-delete {
670+
width: 44px;
671+
height: 44px;
672+
background: url('/blocks/edit/img/Smock_DeleteOutline_18_N.svg') center / 18px no-repeat var(--editor-btn-bg-color);
673+
}
674+
675+
.loc-delete:hover {
676+
box-shadow: #ff0000 0 0 5px 0;
677+
}
678+
679+
.loc-color-overlay {
680+
position: absolute;
681+
top: 0;
682+
left: 0;
683+
width: 100%;
684+
height: 100%;
685+
}
686+
687+
.loc-color-overlay.loc-langstore::after {
688+
content: 'Langstore';
689+
position: absolute;
690+
bottom: 0;
691+
right: 0;
692+
padding: 5px;
693+
font-size: 10px;
694+
background-color: rgba(70, 130, 180, 90%);
695+
color: white;
696+
}
697+
698+
.loc-color-overlay.loc-regional::after {
699+
content: 'Regional';
700+
position: absolute;
701+
bottom: 0;
702+
right: 0;
703+
padding: 5px;
704+
font-size: 10px;
705+
background-color: rgba(144, 42, 222, 90%);
706+
color: white;
707+
}
708+
709+
.loc-lang-overlay {
710+
position: absolute;
711+
top: 0;
712+
left: 0;
713+
width: 100%;
714+
height: 100%;
715+
z-index: 1001;
716+
display: none;
717+
justify-content: center;
718+
align-items: center;
719+
flex-direction: column;
720+
}

0 commit comments

Comments
 (0)