feat: new editor action buttons

taigaio · Feb 14, 2024 · ecc8d43 · ecc8d43
1 parent 0a9ae1c
commit ecc8d43
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 35 deletions.
diff --git a/app/modules/components/wysiwyg/wysiwyg.scss b/app/modules/components/wysiwyg/wysiwyg.scss
@@ -2,6 +2,8 @@
 tg-wysiwyg {
     display: flex;
     margin-bottom: 1rem;
+    position: relative;
+
     &.custom-field {
         max-width: 100%;
         width: 100%;
@@ -11,11 +13,19 @@ tg-wysiwyg {
         word-break: break-word;
     }
     .tools {
+        bottom: 34px;
         display: none;
+        gap: .75rem;
         padding-left: 1rem;
+        position: absolute;
+        right: .75rem;
+
+        a {
+            text-transform: initial;
+        }
 
         &.visible {
-            display: block;
+            display: flex;
         }
     }
     .mode-editor {
@@ -37,6 +47,9 @@ tg-wysiwyg {
             }
         }
     }
+    .ck.ck-editor__main > .ck-editor__editable {
+        padding-bottom: 3rem;
+    }
     .read-mode {
         cursor: pointer;
         .wysiwyg {

diff --git a/app/modules/history/comments/comment.jade b/app/modules/history/comments/comment.jade
@@ -11,44 +11,46 @@
         ng-alt="{{vm.comment.user.name}}"
     )
     .comment-main
-        .comment-data
-            span.comment-creator {{vm.comment.user.name}}
-            span.comment-date {{vm.comment.created_at | momentFormat:'DD MMM YYYY HH:mm'}}
-            .comment-edited(ng-if="vm.comment.edit_comment_date")
-                span(translate="COMMENTS.EDITED_COMMENT")
-                span {{vm.comment.edit_comment_date | momentFormat:'DD MMM YYYY HH:mm'}}
-                span.separator -
-                a.comment-history(
-                    href=""
-                    title="{{'COMMENTS.SHOW_HISTORY' | translate}}"
-                    ng-click="vm.displayCommentHistory()"
-                )
-                    span(translate="COMMENTS.SHOW_HISTORY")
-        .comment-container
+        .comment-content-wrapper
+            .comment-data
+                span.comment-creator {{vm.comment.user.name}}
+                span.comment-date {{vm.comment.created_at | momentFormat:'DD MMM YYYY HH:mm'}}
+                .comment-edited(ng-if="vm.comment.edit_comment_date")
+                    span(translate="COMMENTS.EDITED_COMMENT")
+                    span {{vm.comment.edit_comment_date | momentFormat:'DD MMM YYYY HH:mm'}}
+                    span.separator -
+                    a.comment-history(
+                        href=""
+                        title="{{'COMMENTS.SHOW_HISTORY' | translate}}"
+                        ng-click="vm.displayCommentHistory()"
+                    )
+                        span(translate="COMMENTS.SHOW_HISTORY")
+
             .comment-text.wysiwyg(
                 ng-if="!vm.editMode"
                 tg-bind-wysiwyg-html="vm.comment.comment"
             )
+
             .comment-editor(
                 ng-if="vm.editMode"
                 ng-keyup="vm.checkCancelComment($event)"
             )
                 tg-comment-edit-wysiwyg.edit-comment
 
-    .comment-options(ng-if="vm.canEditDeleteComment() && !vm.editMode")
-        tg-svg.comment-option(
-            svg-icon="icon-edit"
-            svg-title-translate="COMMON.EDIT"
-            ng-click="vm.onEditMode({commentId: vm.comment.id})"
-            ng-if="!vm.editMode"
-        )
-        tg-svg.comment-option(
-            svg-icon="icon-trash"
-            svg-title-translate="COMMON.DELETE"
-            ng-click="vm.onDeleteComment({commentId: vm.comment.id})"
-            ng-if="!vm.editMode"
-            tg-loading="vm.deleting == vm.comment.id"
-        )
+        .comment-options(ng-if="vm.canEditDeleteComment() && !vm.editMode")
+            tg-svg.comment-option(
+                svg-icon="icon-edit"
+                svg-title-translate="COMMON.EDIT"
+                ng-click="vm.onEditMode({commentId: vm.comment.id})"
+                ng-if="!vm.editMode"
+            )
+            tg-svg.comment-option(
+                svg-icon="icon-trash"
+                svg-title-translate="COMMON.DELETE"
+                ng-click="vm.onDeleteComment({commentId: vm.comment.id})"
+                ng-if="!vm.editMode"
+                tg-loading="vm.deleting == vm.comment.id"
+            )
 
 .deleted-comment-wrapper(
     ng-if="vm.comment.delete_comment_date"

diff --git a/app/modules/history/comments/comment.scss b/app/modules/history/comments/comment.scss
@@ -48,7 +48,15 @@
             }
         }
     }
+    .comment-editor {
+        inline-size: calc(100% - 5px);
+    }
+    .comment-content-wrapper {
+        inline-size: 100%;
+    }
     .comment-main {
+        display: flex;
+        justify-content: space-between;
         width: 100%;
     }
     .comment-avatar {

diff --git a/app/partials/common/components/wysiwyg-toolbar.jade b/app/partials/common/components/wysiwyg-toolbar.jade
@@ -33,15 +33,21 @@
 
 .tools(ng-class="{visible: editMode}")
     a.e2e-save-editor(
+        variant="primary"
+        class="btn-small"
         ng-class="{disabled: required && !markdown.length}"
         tg-loading="saving"
         href="#",
         ng-click="save($event)"
+        translate="COMMON.SAVE"
     )
-        tg-svg(svg-icon="icon-save")
+
     a.e2e-cancel-editor(
+        variant="secondary"
+        class="btn-small"
         href="#",
         ng-click="cancelWithConfirmation($event)"
         title="{{ 'COMMON.CANCEL' | translate }}"
+        translate="COMMON.CANCEL"
     )
-        tg-svg(svg-icon="icon-close")
+
diff --git a/app/styles/layout/ticket-detail.scss b/app/styles/layout/ticket-detail.scss
@@ -94,14 +94,11 @@
             }
         }
     }
+
     &.wysiwyg {
         overflow: visible;
     }
 
-    tg-wysiwyg {
-        max-width: calc(100% - 2rem);
-    }
-
     .read-mode .wysiwyg {
         padding: 1rem;
     }