diff --git a/browser/css/color-palette-dark.css b/browser/css/color-palette-dark.css index ba84a5891c937..d6c49900f5acc 100644 --- a/browser/css/color-palette-dark.css +++ b/browser/css/color-palette-dark.css @@ -12,6 +12,7 @@ --color-text-lighter: #fff; /* secondard text, disabled */ --color-status-badge: #d6d6d6; --color-slideshow: #d6d6d6; + --color-date-text: #d6d6d6; --color-main-background: #121212; --color-background-dark: #1E1E1E; /* select */ @@ -73,6 +74,8 @@ --color-smart-guides-helper-line: #f36d4f; --color-quickfind-border: #444; + --scrollbar-color: #c0bfbc transparent; + --color-background-hover: #363636; } [data-bg-theme='dark'] { diff --git a/browser/css/color-palette.css b/browser/css/color-palette.css index a3b828f9ca676..cd38db3d06acd 100644 --- a/browser/css/color-palette.css +++ b/browser/css/color-palette.css @@ -14,6 +14,7 @@ --color-text-calc-header: #e8e8e8; --color-status-badge: #616161; --color-slideshow: #A8A8A8; + --color-date-text: #555555; --color-main-background: #F8F9FA; --color-background-dark: #e8e8e8; /* select */ @@ -82,6 +83,8 @@ --color-treeview-highlight: #FFEE80; --color-treeview-highlight-text: #222; --color-quickfind-border: #e1dfdd; + --scrollbar-color: #c0bfbc #fafafa; + --color-background-hover: #F5F5F5; } [data-bg-theme='light'] { diff --git a/browser/css/cool.css b/browser/css/cool.css index 43f2d5afcece5..5b18489833905 100644 --- a/browser/css/cool.css +++ b/browser/css/cool.css @@ -45,6 +45,7 @@ --tb-fs-s: 1vw; --default-height: 24px; + --default-width: 24px; --header-height: 34px; /* Annotations */ @@ -599,7 +600,7 @@ body { } .cool-annotation-content-wrapper, .cool-annotation-redline-content-wrapper { - padding: 8px; + padding: 12px 8px; font-family: var(--cool-font) !important; font-size: var(--default-font-size); text-align: left; @@ -609,6 +610,22 @@ body { border: none; border-radius: var(--border-radius); width: auto; + display: flex; + flex-direction: column; + row-gap: 8px; +} + +.cool-annotation-author-header { + display: inline-flex; + align-items: center; + width: 100%; +} + +.cool-annotation-footer { + display: inline-flex; + justify-content: space-between; + align-items: center; + width: 100%; } .cool-annotation:not(.annotation-active) .cool-annotation-content-wrapper:hover, @@ -622,10 +639,11 @@ body { } .cool-annotation-content { - margin: 3px; line-height: 1.4; max-height: var(--annotation-input-size); overflow: auto; + scrollbar-color: var(--scrollbar-color); + scrollbar-width: thin; } .cool-annotation-info-collapsed { @@ -682,21 +700,25 @@ body { hyphens: auto; } -.cool-annotation-content-author { - margin: 0; - margin-top: 2px; - height: 18px; -} - .cool-annotation-content-resolved { color: var(--color-success); + font-weight: 700; + font-size: 0.625rem; } .cool-annotation-edit { - margin: 3px; line-height: 1.4; } +.cool-annotation-edit .cool-font { + padding: 0 !important; +} + +.cool-annotation-edit p { + margin-top: 0; + margin-bottom: 8px; +} + .cool-annotation-textarea { font-family: var(--cool-font) !important; font-size: var(--default-font-size); @@ -707,6 +729,7 @@ body { padding: 2px; height: 54px; width: 100%; + margin-bottom: 8px; box-sizing: border-box; } @@ -740,9 +763,14 @@ body { display: inline-block; border: solid 2px; border-radius: 50%; - height: 32px; - width: 32px; + height: var(--default-height); + width: var(--default-width); padding: 0; + outline: 2px solid var(--color-background-lighter); + outline-offset: -3px; +} + +.cool-annotation.collapsed-comment .cool-annotation-img { opacity: 0.9; } @@ -759,9 +787,8 @@ body { display: block; -moz-box-sizing: border-box; box-sizing: border-box; - width: 32px; /* Width of new image */ - height: 32px; /* Height of new image */ - background: url('images/user.svg') center 3px no-repeat; + width: var(--default-width); /* Width of new image */ + height: var(--default-height); /* Height of new image */ } .leaflet-container .leaflet-pane.leaflet-calc-background-pane { @@ -791,24 +818,35 @@ body { } .cool-annotation-author { - padding-left: 10px; - padding-right: 10px; + padding-left: 8px; + padding-right: 8px; vertical-align: top; display: table-cell; width: 100%; overflow: hidden; - max-width: 110px; + flex: 1; +} + +.cool-annotation:not(.annotation-pop-up) .cool-annotation-author { + max-width: 150px; } -.cool-annotation-menu, .cool-annotation-menu-redline, .cool-redline-accept-button, .cool-redline-reject-button { +.cool-annotation-content-author { + white-space: normal; + word-break: break-word; +} + +.cool-annotation-menu, .cool-annotation-menu-redline, .cool-redline-accept-button, .cool-redline-reject-button, .cool-annotation-menu-edit { margin: 0 !important; padding: 0 !important; min-width: initial !important; - width: var(--btn-size) !important; - height: var(--btn-size) !important; + width: var(--btn-img-size) !important; + height: var(--btn-img-size) !important; vertical-align: top; border: 1px solid transparent !important; display: inline-block !important; + cursor: pointer; + box-sizing: border-box; } .cool-redline-accept-button { @@ -827,12 +865,23 @@ body { background: url('images/dark/lc_more.svg') no-repeat center/contain !important; } -.cool-annotation-menu:hover, .cool-annotation-menu-redline:hover, .cool-redline-accept-button:hover, .cool-redline-reject-button:hover { +.cool-annotation-menu-edit { + background: url('images/lc_edit.svg') no-repeat center/contain !important; +} + +[data-theme='dark'] .cool-annotation-menu-edit { + background: url('images/dark/lc_edit.svg') no-repeat center/contain !important; +} + +.cool-annotation-menu:hover, .cool-annotation-menu-redline:hover, .cool-redline-accept-button:hover, .cool-redline-reject-button:hover, .cool-annotation-menu-edit:hover { border: 1px solid var(--color-border-darker); + background-color: var(--color-background-hover) !important; + border-radius: 16px; } .cool-annotation-date { - font-size: var(--default-font-size); + font-size: 0.625rem; + color: var(--color-date-text); } .annotation-button-autosaved { @@ -845,9 +894,10 @@ body { } .cool-annotation-menubar { - margin: 0; - padding: 0; - vertical-align: top; + display: flex; + justify-content: flex-end; + align-items: center; + column-gap: 4px; } .cool-annotation-child-line { diff --git a/browser/images/dark/lc_edit.svg b/browser/images/dark/lc_edit.svg new file mode 100644 index 0000000000000..66991c4c0f821 --- /dev/null +++ b/browser/images/dark/lc_edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/browser/images/lc_edit.svg b/browser/images/lc_edit.svg new file mode 100644 index 0000000000000..444977ba05aad --- /dev/null +++ b/browser/images/lc_edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/browser/src/canvas/sections/CommentListSection.ts b/browser/src/canvas/sections/CommentListSection.ts index ac6a8434aed84..55b5bf0e41c45 100644 --- a/browser/src/canvas/sections/CommentListSection.ts +++ b/browser/src/canvas/sections/CommentListSection.ts @@ -121,7 +121,7 @@ export class CommentSection extends CanvasSectionObject { this.sectionProperties.arrow = null; this.sectionProperties.show = null; this.sectionProperties.showResolved = false; - this.sectionProperties.marginY = 10 * app.dpiScale; + this.sectionProperties.marginY = 20 * app.dpiScale; this.sectionProperties.offset = 5 * app.dpiScale; this.sectionProperties.width = Math.round(1 * app.dpiScale); // Configurable variable. this.sectionProperties.scrollAnnotation = null; // For impress, when 1 or more comments exist. diff --git a/browser/src/canvas/sections/CommentSection.ts b/browser/src/canvas/sections/CommentSection.ts index dc56ddf9a3b18..c277c34bd321b 100644 --- a/browser/src/canvas/sections/CommentSection.ts +++ b/browser/src/canvas/sections/CommentSection.ts @@ -235,6 +235,13 @@ export class Comment extends CanvasSectionObject { this.sectionProperties.contentNode = window.L.DomUtil.create('div', 'cool-annotation-content cool-dont-break', this.sectionProperties.wrapper); this.sectionProperties.contentNode.id = 'annotation-content-area-' + this.sectionProperties.data.id; + + const commentFooter = window.L.DomUtil.create('div', 'cool-annotation-footer', this.sectionProperties.wrapper); + this.sectionProperties.contentDate = window.L.DomUtil.create('div', 'cool-annotation-date', commentFooter); + const resolvedEl = window.L.DomUtil.create('div', 'cool-annotation-content-resolved', commentFooter); + this.sectionProperties.resolvedTextElement = resolvedEl; + this.updateResolvedField(this.sectionProperties.data.resolved); + this.sectionProperties.nodeModify = window.L.DomUtil.create('div', 'cool-annotation-edit' + ' modify-annotation', this.sectionProperties.wrapper); this.sectionProperties.nodeModifyText = window.L.DomUtil.create('div', 'cool-annotation-textarea', this.sectionProperties.nodeModify); this.createReplyHint(this.sectionProperties.nodeModify); @@ -291,14 +298,8 @@ export class Comment extends CanvasSectionObject { this.sectionProperties.author = window.L.DomUtil.create('table', 'cool-annotation-table', this.sectionProperties.wrapper); var tbody = window.L.DomUtil.create('tbody', '', this.sectionProperties.author); - var rowResolved = window.L.DomUtil.create('tr', '', tbody); - var tdResolved = window.L.DomUtil.create('td', 'cool-annotation-resolved', rowResolved); - var pResolved = window.L.DomUtil.create('div', 'cool-annotation-content-resolved', tdResolved); - this.sectionProperties.resolvedTextElement = pResolved; - - this.updateResolvedField(this.sectionProperties.data.resolved); - var tr = window.L.DomUtil.create('tr', '', tbody); + var tr = window.L.DomUtil.create('tr', 'cool-annotation-author-header', tbody); this.sectionProperties.authorRow = tr; tr.id = 'author table row ' + this.sectionProperties.data.id; var tdImg = window.L.DomUtil.create('td', 'cool-annotation-img', tr); @@ -318,11 +319,17 @@ export class Comment extends CanvasSectionObject { this.sectionProperties.authorAvatarImg = imgAuthor; this.sectionProperties.authorAvatartdImg = tdImg; this.sectionProperties.contentAuthor = window.L.DomUtil.create('div', 'cool-annotation-content-author', tdAuthor); - this.sectionProperties.contentDate = window.L.DomUtil.create('div', 'cool-annotation-date', tdAuthor); } private createMenu (): void { var tdMenu = window.L.DomUtil.create('td', 'cool-annotation-menubar', this.sectionProperties.authorRow); + const edit = window.L.DomUtil.create('div', 'cool-annotation-menu-edit', tdMenu); + edit.id = 'comment-annotation-menu-edit-' + this.sectionProperties.data.id; + edit.tabIndex = 0; + edit.onclick = this.onEditComment.bind(this); + edit.dataset.title = Comment.editCommentLabel; + edit.setAttribute('aria-label', Comment.editCommentLabel); + this.sectionProperties.menu = window.L.DomUtil.create('div', this.sectionProperties.data.trackchange ? 'cool-annotation-menu-redline' : 'cool-annotation-menu', tdMenu); this.sectionProperties.menu.id = 'comment-annotation-menu-' + this.sectionProperties.data.id; this.sectionProperties.menu.tabIndex = 0; @@ -513,7 +520,7 @@ export class Comment extends CanvasSectionObject { this.sectionProperties.authorAvatarImg.setAttribute('src', this.sectionProperties.data.avatar); } else { - $(this.sectionProperties.authorAvatarImg).css('padding-top', '4px'); + $(this.sectionProperties.authorAvatarImg).css('padding', '1.8px'); } var user = this.map.getViewId(this.sectionProperties.data.author); if (user >= 0) { @@ -985,6 +992,12 @@ export class Comment extends CanvasSectionObject { window.L.DomEvent.stopPropagation(e); } + private onEditComment (e: any): void { + this.sectionProperties.commentListSection.modify(this); + window.L.DomEvent.stopPropagation(e); + } + + // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types private menuOnKeyPress (e: any): void { if (e.code === 'Space' || e.code === 'Enter') diff --git a/cypress_test/integration_tests/desktop/writer/track_changes_spec.js b/cypress_test/integration_tests/desktop/writer/track_changes_spec.js index 7ae91158715fc..e392926ae8d69 100644 --- a/cypress_test/integration_tests/desktop/writer/track_changes_spec.js +++ b/cypress_test/integration_tests/desktop/writer/track_changes_spec.js @@ -61,7 +61,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Track Changes', function ( cy.cGet('div.cool-annotation').should('have.length', 3); cy.cGet('#comment-container-2').should('contain','some text1'); - cy.cGet('#comment-container-2 .cool-annotation-menubar').click(); + cy.cGet('#comment-container-2 .cool-annotation-menubar .cool-annotation-menu').click(); cy.cGet('body').contains('.context-menu-item', 'Remove').click(); cy.cGet('#comment-container-2').should('have.class','tracked-deleted-comment-show'); cy.cGet('#comment-container-2').should('contain','some text1'); @@ -107,7 +107,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Track Changes', function ( cy.cGet('div.cool-annotation').should('have.length', 3); cy.cGet('#comment-container-2').should('contain','some text1'); - cy.cGet('#comment-container-2 .cool-annotation-menubar').click(); + cy.cGet('#comment-container-2 .cool-annotation-menubar .cool-annotation-menu').click(); cy.cGet('body').contains('.context-menu-item', 'Remove').click(); cy.cGet('#comment-container-2').should('have.class','tracked-deleted-comment-show'); cy.cGet('#comment-container-2').should('contain','some text1'); @@ -167,7 +167,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Track Changes', function ( // undo removed comment cy.cGet('#comment-container-2').should('contain','some text1'); - cy.cGet('#comment-container-2 .cool-annotation-menubar').click(); + cy.cGet('#comment-container-2 .cool-annotation-menubar .cool-annotation-menu').click(); cy.cGet('body').contains('.context-menu-item', 'Remove').click(); cy.cGet('#comment-container-2').should('have.class','tracked-deleted-comment-show'); cy.cGet('div.cool-annotation').should('have.length', 3);