Skip to content

Commit bf6f879

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 -Remove img opacity from active comment cards Signed-off-by: Banobe Pascal <[email protected]> Change-Id: I278a51b7d88da6aed8fb6fb8d5e1b504a5b31d37
1 parent b925013 commit bf6f879

File tree

6 files changed

+99
-36
lines changed

6 files changed

+99
-36
lines changed

‎browser/css/cool.css‎

Lines changed: 73 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 */
@@ -599,7 +600,7 @@ body {
599600
}
600601

601602
.cool-annotation-content-wrapper, .cool-annotation-redline-content-wrapper {
602-
padding: 8px;
603+
padding: 12px 8px;
603604
font-family: var(--cool-font) !important;
604605
font-size: var(--default-font-size);
605606
text-align: left;
@@ -609,6 +610,22 @@ body {
609610
border: none;
610611
border-radius: var(--border-radius);
611612
width: auto;
613+
display: flex;
614+
flex-direction: column;
615+
row-gap: 8px;
616+
}
617+
618+
.cool-annotation-author-header {
619+
display: inline-flex;
620+
align-items: center;
621+
width: 100%;
622+
}
623+
624+
.cool-annotation-footer {
625+
display: inline-flex;
626+
justify-content: space-between;
627+
align-items: center;
628+
width: 100%;
612629
}
613630

614631
.cool-annotation:not(.annotation-active) .cool-annotation-content-wrapper:hover,
@@ -622,7 +639,6 @@ body {
622639
}
623640

624641
.cool-annotation-content {
625-
margin: 3px;
626642
line-height: 1.4;
627643
max-height: var(--annotation-input-size);
628644
overflow: auto;
@@ -682,21 +698,25 @@ body {
682698
hyphens: auto;
683699
}
684700

685-
.cool-annotation-content-author {
686-
margin: 0;
687-
margin-top: 2px;
688-
height: 18px;
689-
}
690-
691701
.cool-annotation-content-resolved {
692702
color: var(--color-success);
703+
font-weight: 700;
704+
font-size: 0.625rem;
693705
}
694706

695707
.cool-annotation-edit {
696-
margin: 3px;
697708
line-height: 1.4;
698709
}
699710

711+
.cool-annotation-edit .cool-font {
712+
padding: 0 !important;
713+
}
714+
715+
.cool-annotation-edit p {
716+
margin-top: 0;
717+
margin-bottom: 8px;
718+
}
719+
700720
.cool-annotation-textarea {
701721
font-family: var(--cool-font) !important;
702722
font-size: var(--default-font-size);
@@ -707,6 +727,7 @@ body {
707727
padding: 2px;
708728
height: 54px;
709729
width: 100%;
730+
margin-bottom: 8px;
710731
box-sizing: border-box;
711732
}
712733

@@ -738,11 +759,16 @@ body {
738759
box-sizing: content-box !important;
739760
max-width: 32px;
740761
display: inline-block;
741-
border: solid 2px;
762+
border: solid 1px;
742763
border-radius: 50%;
743-
height: 32px;
744-
width: 32px;
764+
height: var(--default-height);
765+
width: var(--default-width);
745766
padding: 0;
767+
outline: 1px solid #fff;
768+
outline-offset: -2px;
769+
}
770+
771+
.cool-annotation.collapsed-comment .cool-annotation-img {
746772
opacity: 0.9;
747773
}
748774

@@ -759,8 +785,8 @@ body {
759785
display: block;
760786
-moz-box-sizing: border-box;
761787
box-sizing: border-box;
762-
width: 32px; /* Width of new image */
763-
height: 32px; /* Height of new image */
788+
width: var(--default-width); /* Width of new image */
789+
height: var(--default-height); /* Height of new image */
764790
background: url('images/user.svg') center 3px no-repeat;
765791
}
766792

@@ -791,24 +817,34 @@ body {
791817
}
792818

793819
.cool-annotation-author {
794-
padding-left: 10px;
795-
padding-right: 10px;
820+
padding-left: 8px;
821+
padding-right: 8px;
796822
vertical-align: top;
797823
display: table-cell;
798824
width: 100%;
799825
overflow: hidden;
800-
max-width: 110px;
826+
flex: 1;
827+
}
828+
829+
.cool-annotation:not(.annotation-pop-up) .cool-annotation-author {
830+
max-width: 150px;
801831
}
802832

803-
.cool-annotation-menu, .cool-annotation-menu-redline, .cool-redline-accept-button, .cool-redline-reject-button {
833+
.cool-annotation-content-author {
834+
white-space: normal;
835+
word-break: break-word;
836+
}
837+
838+
.cool-annotation-menu, .cool-annotation-menu-redline, .cool-redline-accept-button, .cool-redline-reject-button, .cool-annotation-menu-edit {
804839
margin: 0 !important;
805840
padding: 0 !important;
806841
min-width: initial !important;
807-
width: var(--btn-size) !important;
808-
height: var(--btn-size) !important;
842+
width: var(--btn-img-size) !important;
843+
height: var(--btn-img-size) !important;
809844
vertical-align: top;
810845
border: 1px solid transparent !important;
811846
display: inline-block !important;
847+
cursor: pointer;
812848
}
813849

814850
.cool-redline-accept-button {
@@ -820,19 +856,28 @@ body {
820856
}
821857

822858
.cool-annotation-menu, .cool-annotation-menu-redline {
823-
background: url('images/lc_more.svg') no-repeat center/contain !important;
859+
background: url('images/lc_openmore.svg') no-repeat center/contain !important;
824860
}
825861

826862
[data-theme='dark'] .cool-annotation-menu, .cool-annotation-menu-redline {
827-
background: url('images/dark/lc_more.svg') no-repeat center/contain !important;
863+
background: url('images/dark/lc_openmore.svg') no-repeat center/contain !important;
828864
}
829865

830-
.cool-annotation-menu:hover, .cool-annotation-menu-redline:hover, .cool-redline-accept-button:hover, .cool-redline-reject-button:hover {
866+
.cool-annotation-menu-edit {
867+
background: url('images/lc_edit.svg') no-repeat center/contain !important;
868+
}
869+
870+
[data-theme='dark'] .cool-annotation-menu-edit {
871+
background: url('images/dark/lc_edit.svg') no-repeat center/contain !important;
872+
}
873+
874+
.cool-annotation-menu:hover, .cool-annotation-menu-redline:hover, .cool-redline-accept-button:hover, .cool-redline-reject-button:hover, .cool-annotation-menu-edit:hover {
831875
border: 1px solid var(--color-border-darker);
832876
}
833877

834878
.cool-annotation-date {
835-
font-size: var(--default-font-size);
879+
font-size: 0.625rem;
880+
color: #555555;
836881
}
837882

838883
.annotation-button-autosaved {
@@ -845,9 +890,10 @@ body {
845890
}
846891

847892
.cool-annotation-menubar {
848-
margin: 0;
849-
padding: 0;
850-
vertical-align: top;
893+
display: flex;
894+
justify-content: flex-end;
895+
align-items: center;
896+
column-gap: 4px;
851897
}
852898

853899
.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)