Skip to content

Commit e9df2fb

Browse files
banobepascalbanobepascal
committed
Improve comment card for better readability and hierarchy
-Added edit icon for a quick action to edit a comment -Date and resolved state moved to card bottom for cleaner header and more natural information flow -Improved and balanced cool-annotation alignments Signed-off-by: Banobe Pascal <[email protected]> Change-Id: Ibad56d5b3712ce846cc0700947edb9bef0a2acbb
1 parent 7f61925 commit e9df2fb

File tree

6 files changed

+94
-36
lines changed

6 files changed

+94
-36
lines changed

‎browser/css/cool.css‎

Lines changed: 68 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
--tb-fs-s: 1vw;
4646

4747
--default-height: 24px;
48+
--default-width: 24px;
4849
--header-height: 34px;
4950

5051
/* Annotations */
@@ -603,7 +604,7 @@ body {
603604
}
604605

605606
.cool-annotation-content-wrapper, .cool-annotation-redline-content-wrapper {
606-
padding: 8px;
607+
padding: 12px 8px;
607608
font-family: var(--cool-font) !important;
608609
font-size: var(--default-font-size);
609610
text-align: left;
@@ -613,6 +614,22 @@ body {
613614
border: none;
614615
border-radius: var(--border-radius);
615616
width: auto;
617+
display: flex;
618+
flex-direction: column;
619+
row-gap: 8px;
620+
}
621+
622+
.cool-annotation-author-header {
623+
display: inline-flex;
624+
align-items: center;
625+
width: 100%;
626+
}
627+
628+
.cool-annotation-footer {
629+
display: inline-flex;
630+
justify-content: space-between;
631+
align-items: center;
632+
width: 100%;
616633
}
617634

618635
.cool-annotation:not(.annotation-active) .cool-annotation-content-wrapper:hover,
@@ -626,7 +643,6 @@ body {
626643
}
627644

628645
.cool-annotation-content {
629-
margin: 3px;
630646
line-height: 1.4;
631647
max-height: var(--annotation-input-size);
632648
overflow: auto;
@@ -686,21 +702,25 @@ body {
686702
hyphens: auto;
687703
}
688704

689-
.cool-annotation-content-author {
690-
margin: 0;
691-
margin-top: 2px;
692-
height: 18px;
693-
}
694-
695705
.cool-annotation-content-resolved {
696706
color: var(--color-success);
707+
font-weight: 700;
708+
font-size: 0.56rem;
697709
}
698710

699711
.cool-annotation-edit {
700-
margin: 3px;
701712
line-height: 1.4;
702713
}
703714

715+
.cool-annotation-edit .cool-font {
716+
padding: 0 !important;
717+
}
718+
719+
.cool-annotation-edit p {
720+
margin-top: 0;
721+
margin-bottom: 8px;
722+
}
723+
704724
.cool-annotation-textarea {
705725
font-family: var(--cool-font) !important;
706726
font-size: var(--default-font-size);
@@ -711,6 +731,7 @@ body {
711731
padding: 2px;
712732
height: 54px;
713733
width: 100%;
734+
margin-bottom: 8px;
714735
box-sizing: border-box;
715736
}
716737

@@ -742,10 +763,10 @@ body {
742763
box-sizing: content-box !important;
743764
max-width: 32px;
744765
display: inline-block;
745-
border: solid 2px;
766+
border: solid 1px;
746767
border-radius: 50%;
747-
height: 32px;
748-
width: 32px;
768+
height: var(--default-height);
769+
width: var(--default-width);
749770
padding: 0;
750771
opacity: 0.9;
751772
}
@@ -763,8 +784,8 @@ body {
763784
display: block;
764785
-moz-box-sizing: border-box;
765786
box-sizing: border-box;
766-
width: 32px; /* Width of new image */
767-
height: 32px; /* Height of new image */
787+
width: var(--default-width); /* Width of new image */
788+
height: var(--default-height); /* Height of new image */
768789
background: url('images/user.svg') center 3px no-repeat;
769790
}
770791

@@ -786,24 +807,34 @@ body {
786807
}
787808

788809
.cool-annotation-author {
789-
padding-left: 10px;
790-
padding-right: 10px;
810+
padding-left: 8px;
811+
padding-right: 8px;
791812
vertical-align: top;
792813
display: table-cell;
793814
width: 100%;
794815
overflow: hidden;
795-
max-width: 110px;
816+
flex: 1;
817+
}
818+
819+
.cool-annotation:not(.annotation-pop-up) .cool-annotation-author {
820+
max-width: 150px;
796821
}
797822

798-
.cool-annotation-menu, .cool-annotation-menu-redline, .cool-redline-accept-button, .cool-redline-reject-button {
823+
.cool-annotation-content-author {
824+
white-space: normal;
825+
word-break: break-word;
826+
}
827+
828+
.cool-annotation-menu, .cool-annotation-menu-redline, .cool-redline-accept-button, .cool-redline-reject-button, .cool-annotation-menu-edit {
799829
margin: 0 !important;
800830
padding: 0 !important;
801831
min-width: initial !important;
802-
width: var(--btn-size) !important;
803-
height: var(--btn-size) !important;
832+
width: var(--btn-img-size) !important;
833+
height: var(--btn-img-size) !important;
804834
vertical-align: top;
805835
border: 1px solid transparent !important;
806836
display: inline-block !important;
837+
cursor: pointer;
807838
}
808839

809840
.cool-redline-accept-button {
@@ -815,19 +846,28 @@ body {
815846
}
816847

817848
.cool-annotation-menu, .cool-annotation-menu-redline {
818-
background: url('images/lc_more.svg') no-repeat center/contain !important;
849+
background: url('images/lc_openmore.svg') no-repeat center/contain !important;
819850
}
820851

821852
[data-theme='dark'] .cool-annotation-menu, .cool-annotation-menu-redline {
822-
background: url('images/dark/lc_more.svg') no-repeat center/contain !important;
853+
background: url('images/dark/lc_openmore.svg') no-repeat center/contain !important;
823854
}
824855

825-
.cool-annotation-menu:hover, .cool-annotation-menu-redline:hover, .cool-redline-accept-button:hover, .cool-redline-reject-button:hover {
856+
.cool-annotation-menu-edit {
857+
background: url('images/lc_edit.svg') no-repeat center/contain !important;
858+
}
859+
860+
[data-theme='dark'] .cool-annotation-menu-edit {
861+
background: url('images/dark/lc_edit.svg') no-repeat center/contain !important;
862+
}
863+
864+
.cool-annotation-menu:hover, .cool-annotation-menu-redline:hover, .cool-redline-accept-button:hover, .cool-redline-reject-button:hover, .cool-annotation-menu-edit:hover {
826865
border: 1px solid var(--color-border-darker);
827866
}
828867

829868
.cool-annotation-date {
830-
font-size: var(--default-font-size);
869+
font-size: 0.56rem;
870+
color: #555555;
831871
}
832872

833873
.annotation-button-autosaved {
@@ -840,9 +880,10 @@ body {
840880
}
841881

842882
.cool-annotation-menubar {
843-
margin: 0;
844-
padding: 0;
845-
vertical-align: top;
883+
display: flex;
884+
justify-content: flex-end;
885+
align-items: center;
886+
column-gap: 4px;
846887
}
847888

848889
.cool-annotation-child-line {

‎browser/images/dark/lc_edit.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎browser/images/dark/lc_openmore.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎browser/images/lc_edit.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎browser/images/lc_openmore.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎browser/src/canvas/sections/CommentSection.ts‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,13 @@ export class Comment extends CanvasSectionObject {
235235

236236
this.sectionProperties.contentNode = window.L.DomUtil.create('div', 'cool-annotation-content cool-dont-break', this.sectionProperties.wrapper);
237237
this.sectionProperties.contentNode.id = 'annotation-content-area-' + this.sectionProperties.data.id;
238+
239+
const commentFooter = window.L.DomUtil.create('div', 'cool-annotation-footer', this.sectionProperties.wrapper);
240+
this.sectionProperties.contentDate = window.L.DomUtil.create('div', 'cool-annotation-date', commentFooter);
241+
const resolvedEl = window.L.DomUtil.create('div', 'cool-annotation-content-resolved', commentFooter);
242+
this.sectionProperties.resolvedTextElement = resolvedEl;
243+
this.updateResolvedField(this.sectionProperties.data.resolved);
244+
238245
this.sectionProperties.nodeModify = window.L.DomUtil.create('div', 'cool-annotation-edit' + ' modify-annotation', this.sectionProperties.wrapper);
239246
this.sectionProperties.nodeModifyText = window.L.DomUtil.create('div', 'cool-annotation-textarea', this.sectionProperties.nodeModify);
240247
this.createReplyHint(this.sectionProperties.nodeModify);
@@ -291,14 +298,8 @@ export class Comment extends CanvasSectionObject {
291298
this.sectionProperties.author = window.L.DomUtil.create('table', 'cool-annotation-table', this.sectionProperties.wrapper);
292299

293300
var tbody = window.L.DomUtil.create('tbody', '', this.sectionProperties.author);
294-
var rowResolved = window.L.DomUtil.create('tr', '', tbody);
295-
var tdResolved = window.L.DomUtil.create('td', 'cool-annotation-resolved', rowResolved);
296-
var pResolved = window.L.DomUtil.create('div', 'cool-annotation-content-resolved', tdResolved);
297-
this.sectionProperties.resolvedTextElement = pResolved;
298-
299-
this.updateResolvedField(this.sectionProperties.data.resolved);
300301

301-
var tr = window.L.DomUtil.create('tr', '', tbody);
302+
var tr = window.L.DomUtil.create('tr', 'cool-annotation-author-header', tbody);
302303
this.sectionProperties.authorRow = tr;
303304
tr.id = 'author table row ' + this.sectionProperties.data.id;
304305
var tdImg = window.L.DomUtil.create('td', 'cool-annotation-img', tr);
@@ -318,11 +319,17 @@ export class Comment extends CanvasSectionObject {
318319
this.sectionProperties.authorAvatarImg = imgAuthor;
319320
this.sectionProperties.authorAvatartdImg = tdImg;
320321
this.sectionProperties.contentAuthor = window.L.DomUtil.create('div', 'cool-annotation-content-author', tdAuthor);
321-
this.sectionProperties.contentDate = window.L.DomUtil.create('div', 'cool-annotation-date', tdAuthor);
322322
}
323323

324324
private createMenu (): void {
325325
var tdMenu = window.L.DomUtil.create('td', 'cool-annotation-menubar', this.sectionProperties.authorRow);
326+
const edit = window.L.DomUtil.create('div', 'cool-annotation-menu-edit', tdMenu);
327+
edit.id = 'comment-annotation-menu-edit-' + this.sectionProperties.data.id;
328+
edit.tabIndex = 0;
329+
edit.onclick = this.onEditComment.bind(this);
330+
edit.dataset.title = Comment.editCommentLabel;
331+
edit.setAttribute('aria-label', Comment.editCommentLabel);
332+
326333
this.sectionProperties.menu = window.L.DomUtil.create('div', this.sectionProperties.data.trackchange ? 'cool-annotation-menu-redline' : 'cool-annotation-menu', tdMenu);
327334
this.sectionProperties.menu.id = 'comment-annotation-menu-' + this.sectionProperties.data.id;
328335
this.sectionProperties.menu.tabIndex = 0;
@@ -513,7 +520,7 @@ export class Comment extends CanvasSectionObject {
513520
this.sectionProperties.authorAvatarImg.setAttribute('src', this.sectionProperties.data.avatar);
514521
}
515522
else {
516-
$(this.sectionProperties.authorAvatarImg).css('padding-top', '4px');
523+
$(this.sectionProperties.authorAvatarImg).css('padding', '1.8px');
517524
}
518525
var user = this.map.getViewId(this.sectionProperties.data.author);
519526
if (user >= 0) {
@@ -985,6 +992,12 @@ export class Comment extends CanvasSectionObject {
985992
window.L.DomEvent.stopPropagation(e);
986993
}
987994

995+
private onEditComment (e: any): void {
996+
this.sectionProperties.commentListSection.modify(this);
997+
window.L.DomEvent.stopPropagation(e);
998+
}
999+
1000+
9881001
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
9891002
private menuOnKeyPress (e: any): void {
9901003
if (e.code === 'Space' || e.code === 'Enter')

0 commit comments

Comments
 (0)