Reverted New UI Design of WeKan v8.29 and added more fixes and performance improvements.

Thanks to xet7 !

client/components/activities/activities.css

@@ -1,22 +1,16 @@
 .activity-title {
+  margin: 0 0.7vw 1vh;
   display: flex;
-  gap: 0.5lh;
   justify-content: space-between;
 }
-.reactions-popup {
-  display: flex;
-  gap: 1ch;
-  flex-wrap: wrap;
-  margin: 0.5lh 0.5ch;
-  max-width: 80vw;
-}
 .reactions-popup .add-comment-reaction {
   display: inline-block;
   cursor: pointer;
   border-radius: 0.7vw;
+  font-size: clamp(18px, 4vw, 22px);
   text-align: center;
   line-height: 1.3;
-  font-size: 1.2em;
+  width: 5vw;
 }
 .reactions-popup .add-comment-reaction:hover {
   background-color: #b0c4de;
@@ -24,20 +18,20 @@
 .activities {
   clear: both;
 }
-.activity {
-  display: flex;
-}
 .activities .activity {
   margin: 0.1vh 0;
   padding: 0.8vh 0;
   display: flex;
-  font-size: 0.8em;
+}
+.activities .activity .member {
+  width: 4vw;
+  height: 4vw;
 }
 .activities .activity .activity-member {
   font-weight: 700;
 }
 .activities .activity .activity-desc {
-  overflow-wrap: break-word;
+  word-wrap: break-word;
   overflow: hidden;
   flex: 1;
   align-self: center;

client/components/activities/activities.js

@@ -275,7 +275,7 @@ Template.commentReactions.events({
       cardComment.toggleReaction(codepoint);
     }
   },
-  'click .open-comment-reaction-popup': Popup.open('addReaction', {showHeader: false})
+  'click .open-comment-reaction-popup': Popup.open('addReaction'),
 })
 
 Template.addReactionPopup.events({
@@ -306,11 +306,6 @@ Template.addReactionPopup.helpers({
       '😊',
       '🤔',
       '😔'];
-  },
-  hasUserReacted(codepoint) {
-    const commentId = Template.instance().data.commentId;
-    const cardComment = ReactiveCache.getCardComment(commentId);
-    return cardComment.hasUserReacted(codepoint);
   }
 })
 

client/components/activities/comments.css

@@ -1,12 +1,12 @@
 .new-comment {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: stretch;
-  gap: 1ch;
+  margin: 0 0 20px 38px;
 }
 .new-comment .member {
   opacity: 0.7;
+  position: absolute;
+  top: 1px;
+  left: -38px;
 }
 .new-comment.is-open .member {
   opacity: 1;
@@ -14,44 +14,34 @@
 .new-comment.is-open .helper {
   display: inline-block;
 }
-
-.new-comment, .comment {
-  .is-open textarea {
-    min-height: 100px;
-    color: #4d4d4d;
-    cursor: auto;
-    overflow-wrap: break-word;
-  }
-  textarea {
-    grid-area: editor;
-    background-color: #fff;
-    border: 0;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.23);
-    min-height: 3lh;
-    &:hover, &.is-open {
-      cursor: auto;
-      background-color: #fff;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.33);
-      border: 0;
-      cursor: pointer;
-    }
-  }
+.new-comment.is-open textarea {
+  min-height: 100px;
+  color: #4d4d4d;
+  cursor: auto;
+  overflow: hidden;
+  word-wrap: break-word;
 }
-
 .new-comment .too-long {
   margin-top: 8px;
 }
-
-.js-new-comment-form, .js-edit-comment {
-  display: grid !important;
-  grid-template-areas:
-    "editor editor editor editor"
-    "main-controls main-controls link-controls editor-controls";
-  grid-auto-columns: 1fr;
-  grid-auto-rows: min-content;
-  align-items: center;
-  flex: 1;
-  gap: 0.3lh;
+.new-comment textarea {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  padding: 9px 11px;
+  width: 100%;
+}
+.new-comment textarea:hover,
+.new-comment textarea:is-open {
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.33);
+  border: 0;
+  cursor: pointer;
+}
+.new-comment textarea:is-open {
+  cursor: auto;
 }
 .comment-item {
   background-color: #fff;
@@ -75,30 +65,31 @@
 }
 .comments {
   clear: both;
-  display: flex;
-  flex-direction: column;
-  gap: 1lh;
-  padding-top: 1lh;
 }
 .comments .comment {
+  margin: 0.5px 0;
+  padding: 6px 0;
   display: flex;
-  gap: 1ch;
 }
-
+.comments .comment .member {
+  width: 32px;
+  height: 32px;
+}
 .comments .comment .comment-member {
   font-weight: 700;
 }
 .comments .comment .comment-desc {
-  overflow-wrap: break-word;
+  word-wrap: break-word;
+  overflow: hidden;
   flex: 1;
   align-self: center;
   margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.3lh;
+  margin-left: 3px;
+  overflow: hidden;
+  word-break: break-word;
 }
 .comments .comment .comment-desc .comment-text {
-  display: flex;
+  display: block;
   border-radius: 3px;
   background: #fff;
   text-decoration: none;
@@ -110,7 +101,6 @@
   display: flex;
   margin-top: 5px;
   gap: 5px;
-  align-items: center;
 }
 .comments .comment .comment-desc .reactions .open-comment-reaction-popup {
   display: flex;
@@ -120,6 +110,7 @@
 }
 .comments .comment .comment-desc .reactions .open-comment-reaction-popup span {
   display: inline-block;
+  font-size: clamp(14px, 2vw, 18px);
   font-weight: 500;
   line-height: 1;
   margin-left: 4px;
@@ -137,14 +128,10 @@
 .comments .comment .comment-desc .reactions .reaction:hover {
   background-color: #b0c4de;
 }
+.comments .comment .comment-desc .reactions .reaction .reaction-count {
+  font-size: 12px;
+}
 .comments .comment .comment-desc .comment-meta {
   font-size: 0.8em;
   color: #999;
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
-  gap: 1ch;
-  align-items: center;
-  /* #FIXME maybe put date outside of comment body ?*/
-  margin-inline-start: -10vw;
 }

client/components/activities/comments.jade

@@ -64,5 +64,5 @@ template(name="commentReactions")
 template(name="addReactionPopup")
   .reactions-popup
     each codepoint in codepoints
-      unless (hasUserReacted codepoint)
-        span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}
+      span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}
+