TIC #3512

Closes #3512

Merge request studip/studip!2420

public/assets/images/icons/black/forward.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #000000;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="forward">
+      <path class="cls-2" d="m43,21h3.88s-6.88-6.88-6.88-6.88V4s20,20,20,20l-20,20v-10.12s6.88-6.88,6.88-6.88h-3.88c-18.2,0-33,14.8-33,33h-6c0-21.51,17.5-39,39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/black/reply.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #000000;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="reply">
+      <path class="cls-2" d="m21,21h-3.88l6.88-6.88V4L4,24l20,20v-10.12l-6.88-6.88h3.88c18.2,0,33,14.8,33,33h6c0-21.51-17.5-39-39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/blue/forward.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #28497c;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="forward">
+      <path class="cls-2" d="m43,21h3.88s-6.88-6.88-6.88-6.88V4s20,20,20,20l-20,20v-10.12s6.88-6.88,6.88-6.88h-3.88c-18.2,0-33,14.8-33,33h-6c0-21.51,17.5-39,39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/blue/reply.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #28497c;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="reply">
+      <path class="cls-2" d="m21,21h-3.88l6.88-6.88V4L4,24l20,20v-10.12l-6.88-6.88h3.88c18.2,0,33,14.8,33,33h6c0-21.51-17.5-39-39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/green/forward.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #00962d;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="forward">
+      <path class="cls-2" d="m43,21h3.88s-6.88-6.88-6.88-6.88V4s20,20,20,20l-20,20v-10.12s6.88-6.88,6.88-6.88h-3.88c-18.2,0-33,14.8-33,33h-6c0-21.51,17.5-39,39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/green/reply.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #00962d;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="reply">
+      <path class="cls-2" d="m21,21h-3.88l6.88-6.88V4L4,24l20,20v-10.12l-6.88-6.88h3.88c18.2,0,33,14.8,33,33h6c0-21.51-17.5-39-39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/grey/forward.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #6e6e6e;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="forward">
+      <path class="cls-2" d="m43,21h3.88s-6.88-6.88-6.88-6.88V4s20,20,20,20l-20,20v-10.12s6.88-6.88,6.88-6.88h-3.88c-18.2,0-33,14.8-33,33h-6c0-21.51,17.5-39,39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/grey/reply.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #6e6e6e;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="reply">
+      <path class="cls-2" d="m21,21h-3.88l6.88-6.88V4L4,24l20,20v-10.12l-6.88-6.88h3.88c18.2,0,33,14.8,33,33h6c0-21.51-17.5-39-39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/red/forward.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #cb1800;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="forward">
+      <path class="cls-2" d="m43,21h3.88s-6.88-6.88-6.88-6.88V4s20,20,20,20l-20,20v-10.12s6.88-6.88,6.88-6.88h-3.88c-18.2,0-33,14.8-33,33h-6c0-21.51,17.5-39,39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/red/reply.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #cb1800;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="reply">
+      <path class="cls-2" d="m21,21h-3.88l6.88-6.88V4L4,24l20,20v-10.12l-6.88-6.88h3.88c18.2,0,33,14.8,33,33h6c0-21.51-17.5-39-39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/white/forward.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="forward">
+      <path class="cls-2" d="m43,21h3.88s-6.88-6.88-6.88-6.88V4s20,20,20,20l-20,20v-10.12s6.88-6.88,6.88-6.88h-3.88c-18.2,0-33,14.8-33,33h-6c0-21.51,17.5-39,39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/white/reply.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="reply">
+      <path class="cls-2" d="m21,21h-3.88l6.88-6.88V4L4,24l20,20v-10.12l-6.88-6.88h3.88c18.2,0,33,14.8,33,33h6c0-21.51-17.5-39-39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/yellow/forward.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #ffad00;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="forward">
+      <path class="cls-2" d="m43,21h3.88s-6.88-6.88-6.88-6.88V4s20,20,20,20l-20,20v-10.12s6.88-6.88,6.88-6.88h-3.88c-18.2,0-33,14.8-33,33h-6c0-21.51,17.5-39,39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

public/assets/images/icons/yellow/reply.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #ffad00;
+      }
+    </style>
+  </defs>
+  <g id="Viewbox_64x64" data-name="Viewbox 64x64">
+    <rect class="cls-1" width="64" height="64"/>
+  </g>
+  <g id="communitation">
+    <g id="reply">
+      <path class="cls-2" d="m21,21h-3.88l6.88-6.88V4L4,24l20,20v-10.12l-6.88-6.88h3.88c18.2,0,33,14.8,33,33h6c0-21.51-17.5-39-39-39Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

resources/assets/stylesheets/scss/blubber.scss

@@ -30,7 +30,6 @@
 
 .blubber_thread {
     border: 1px solid var(--content-color-40);
-    background-color: var(--dark-gray-color-5);
 
     width: 100%;
     max-width: 100%;
@@ -53,17 +52,6 @@
     .scrollable_area {
         max-height: calc(100vh - 240px);
         overflow: auto;
-        &.scrolled::before {
-            //the shadow!
-            content: '';
-            left: 0px;
-            right: 0px;
-            height: 20px;
-            display: block;
-            position: absolute;
-            background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0));
-            z-index: 10;
-        }
     }
 
     &.dragover {
@@ -90,189 +78,6 @@
         list-style-type: none;
         margin: 0px;
         padding: 0px;
-
-        > li {
-            display: none;
-            &.new {
-                animation: blubber-scaling var(--transition-duration) ease-out;
-            }
-            align-items: flex-end;
-            justify-content: flex-start;
-
-            margin-top: 20px;
-            padding-right: 10px;
-            padding-left: 10px;
-
-            &:last-child {
-                margin-bottom: 10px;
-            }
-
-            > .content {
-                max-width: 60%;
-                margin-left: 5px;
-                margin-right: 5px;
-                padding: 5px;
-
-                > .html {
-                    max-width: 100%;
-                    overflow: hidden;
-                    img {
-                        max-width: 100%;
-                        max-height: 95vh;
-                    }
-                }
-
-                > .edit {
-                    display: none;
-                }
-
-                &.editing {
-                    > .html {
-                        display: none;
-                    }
-                    > .edit {
-                        display: block;
-                        width: 300px;
-                        height: 20px;
-                    }
-                }
-            }
-
-            &.mine {
-                display: flex;
-                flex-direction: row-reverse;
-                > .content {
-                    background-color: var(--base-color);
-                    color: var(--white);
-
-                    .opengraph {
-                        background-color: var(--base-color-80);
-                        border-color: var(--base-color-60);
-                    }
-
-                    a.link-extern {
-                        @include icon(before, link-extern, info-alt);
-
-                        &::before {
-                            opacity: 0.8;
-                            transition: opacity 200ms;
-                        }
-                    }
-                    a.link-intern {
-                        @include icon(before, link-intern, info-alt);
-
-                        &::before {
-                            opacity: 0.8;
-                            transition: opacity 200ms;
-                        }
-                    }
-
-                    a,
-                    a:link,
-                    a:visited {
-                        color: var(--white);
-                        opacity: 0.8;
-                        transition: opacity 200ms;
-                    }
-                    a:hover,
-                    a:active,
-                    a:hover.index,
-                    a:active.index,
-                    a:hover.tree {
-                        color: var(--white);
-                        opacity: 1;
-                        transition: opacity 200ms;
-                    }
-                    a.link-extern:hover::before,
-                    a.link-intern:hover::before {
-                        opacity: 1;
-                        transition: opacity 200ms;
-                    }
-
-                    //Now the small triangular:
-                    @include arrow-right(10px, $base-color);
-                    &::before {
-                        top: 100%;
-                    }
-                    &::after {
-                        content: '';
-                        height: 10px;
-                        width: 10px;
-                        background-color: var(--dark-gray-color-5);
-                        position: absolute;
-                        pointer-events: none;
-                        left: 100%;
-                        top: 100%;
-                    }
-                    > .name {
-                        display: none;
-                    }
-                }
-                > .avatar {
-                    display: none;
-                }
-                .answer_comment {
-                    display: none;
-                }
-            }
-            &.theirs {
-                display: flex;
-                > .content {
-                    background-color: var(--content-color-20);
-                    @include arrow-left(10px, $content-color-20);
-                    &::before {
-                        top: 100%;
-                    }
-                    &::after {
-                        content: '';
-                        height: 10px;
-                        width: 10px;
-                        background-color: var(--dark-gray-color-5);
-                        position: absolute;
-                        pointer-events: none;
-                        left: -10px;
-                        top: 100%;
-                    }
-                    > .name {
-                        color: var(--base-color);
-                        font-size: 0.8em;
-                        display: block;
-
-                        &:hover {
-                            color: var(--red);
-                        }
-                    }
-                }
-                > .avatar {
-                    min-width: 40px;
-                    min-height: 40px;
-                    width: 40px;
-                    height: 40px;
-                    background-repeat: no-repeat;
-                    background-size: 40px auto;
-                    background-position: center center;
-                    margin-right: 10px;
-                }
-                .answer_comment > img {
-                    vertical-align: text-bottom;
-                    transform: rotate(180deg);
-                }
-            }
-            &.more {
-                display: flex;
-                justify-content: center;
-            }
-            > .time {
-                font-size: 0.8em;
-                color: var(--black);
-                time {
-                    @media screen and (max-width: $major-breakpoint-small) {
-                        display: none;
-                    }
-                }
-            }
-        }
-
     }
 
     .writer {

resources/assets/stylesheets/scss/talk-bubble.scss

+$color: var(--base-color-20);
+$ownColor: var(--petrol-40);
+
+.talk-bubble-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+
+    .talk-bubble-avatar {
+        padding: 8px;
+    }
+
+    .talk-bubble {
+        margin: 10px 20px;
+        position: relative;
+        max-width: 80%;
+        height: auto;
+        background-color: $color;
+        border-radius: 10px;
+
+        &.editing {
+            min-width: 50%;
+        }
+
+        .talk-bubble-content {
+            padding: 8px 1em;
+
+            .talk-bubble-header {
+                margin-bottom: 8px;
+
+                a {
+                    font-weight: 700;
+                }
+            }
+
+            .talk-bubble-talktext {
+                margin-bottom: 4px;
+                text-align: left;
+                line-height: 1.5em;
+
+                .html {
+                    display: inline;
+
+                    .formatted-content {
+                        display: inline;
+                    }
+
+                    .opengraph,
+                    blockquote {
+                        background-color: rgba(255, 255, 255, 0.5);
+                    }
+
+                    video {
+                        max-width: 100%;
+                    }
+
+                    img {
+                        max-height: 70vh;
+                    }
+                }
+
+                .talk-bubble-edit {
+                    display: flex;
+                    align-items: flex-end;
+                    gap: 2px;
+
+                    textarea {
+                        flex-grow: 1;
+                    }
+
+                    button {
+                        width: 24px;
+                        height: 24px;
+                        border: solid thin var(--base-color);
+                        background-color: var(--white);
+                        cursor: pointer;
+
+                        img {
+                            vertical-align: middle;
+                        }
+                    }
+                }
+
+                .talk-bubble-footer {
+                    float: right;
+                    margin-top: 4px;
+                    padding-bottom: 4px;
+
+                    &:before {
+                        content: " ";
+                        display: inline-block;
+                        width: 1em;
+                    }
+
+                    .talk-bubble-talktext-time {
+                        text-align: right;
+                        font-size: 0.8em;
+                        margin-bottom: -0.5em;
+                    }
+                }
+
+            }
+        }
+
+        &:after {
+            content: ' ';
+            position: absolute;
+            width: 0;
+            height: 0;
+            top: 0px;
+            bottom: auto;
+            border: 16px solid;
+            border-color: $color transparent transparent transparent;
+            border-radius: 4px;
+            left: -14px;
+            right: auto;
+        }
+    }
+
+    &.talk-bubble-own-post {
+        justify-content: end;
+
+        .talk-bubble {
+            flex-direction: row-reverse;
+            background-color: $ownColor;
+
+            &:after {
+                border-color: $ownColor transparent transparent transparent;
+                left: auto;
+                right: -14px;
+            }
+        }
+
+
+        .talk-bubble-header {
+            flex-direction: row-reverse;
+        }
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/studip.scss

@@ -94,6 +94,7 @@
 @import "scss/studip-selection";
 @import "scss/table_of_contents";
 @import "scss/tabs";
+@import "scss/talk-bubble";
 @import "scss/tooltip";
 @import "scss/tfa";
 @import "scss/tour";

resources/vue/components/blubber/Comment.vue

 <template>
-    <li :class="commentClass">
-        <a
-            :href="userProfileURL"
-            class="avatar"
-            :title="comment.author['formatted-name']"
-            :style="{ backgroundImage: 'url(' + commentAvatar + ')' }"
-        ></a>
-        <div class="content" :class="{ editing }">
-            <a :href="userProfileURL" class="name">{{ comment.author['formatted-name'] }}</a>
-            <div ref="html" v-html="comment['content-html']" class="html"></div>
-            <textarea
-                ref="textarea"
-                class="edit"
-                v-model="localText"
-                @keydown.enter.exact.prevent="saveComment"
-                @keyup.escape.exact="doneEditing"
-            ></textarea>
-        </div>
-        <div class="time">
-            <studip-date-time :timestamp="commentMkdate" :relative="true"></studip-date-time>
-            <a
-                href=""
-                v-if="comment['is-writable']"
-                @click.prevent.stop="editComment"
-                class="edit_comment"
-                :title="$gettext('Bearbeiten.')"
-            >
-                <studip-icon shape="edit" :size="14" role="inactive"></studip-icon>
-            </a>
-            <a href="" @click.prevent="answerComment" class="answer_comment" :title="$gettext('Hierauf antworten.')">
-                <studip-icon shape="export" :size="14" role="inactive"></studip-icon>
+    <li :class="{ 'talk-bubble-own-post': ownComment }" class="talk-bubble-wrapper">
+        <div v-if="!ownComment" class="talk-bubble-avatar">
+            <a :href="userProfileURL" :title="comment.author['formatted-name']">
+                <img :src="commentAvatar" />
             </a>
         </div>
+        <div class="talk-bubble" :class="{ editing }">
+            <div class="talk-bubble-content">
+                <header v-if="!ownComment" class="talk-bubble-header">
+                    <a :href="userProfileURL">{{ comment.author['formatted-name'] }}</a>
+                </header>
+                <div class="talk-bubble-talktext">
+                    <template v-if="!editing">
+                        <div ref="html" v-html="comment['content-html']" class="html"></div>
+                        <div class="talk-bubble-footer">
+                            <span class="talk-bubble-talktext-time"><studip-date-time :timestamp="commentMkdate"
+                                    :relative="true"></studip-date-time></span>
+                            <a href="#" v-if="comment['is-writable']" @click.prevent.stop="editComment" class="edit_comment"
+                                :title="$gettext('Bearbeiten')">
+                                <studip-icon shape="edit" :size="14" />
+                            </a>
+                            <a href="#" @click.prevent="answerComment" class="answer_comment"
+                                :title="$gettext('Hierauf antworten')">
+                                <studip-icon shape="reply" :size="14" />
+                            </a>
+
+                        </div>
+                    </template>
+                    <div v-else class="talk-bubble-edit">
+                    <textarea
+                        v-model="localText"
+                        ref="textarea"
+                        @input="setTextareaSize"
+                        @focus="setTextareaSize"
+                        @keydown.enter.exact.prevent="saveComment"
+                        @keyup.escape.exact="doneEditing"
+                    ></textarea>
+                        <button @click="saveComment" :title="$gettext('Speichern')">
+                            <studip-icon shape="accept" />
+                        </button>
+                        <button @click="doneEditing" :title="$gettext('Abbrechen')">
+                            <studip-icon shape="decline" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </li>
 </template>
+
 <script>
 export default {
     name: 'BlubberComment',
     data: () => ({
         localText: '',
+        commentWidth: 0,
     }),
     props: {
         comment: {
@@ -69,6 +85,9 @@ export default {
                 return window.STUDIP.URLHelper.getURL('dispatch.php/profile/extern/' + user_id);
             }
         },
+        ownComment() {
+            return this.comment.isMine();
+        }
     },
     methods: {
         answerComment() {
@@ -100,11 +119,17 @@ export default {
                 this.$emit('remove-comment', this.comment);
             }
         },
+        setTextareaSize() {
+            const textarea = this.$refs.textarea;
+            textarea.style.width = this.commentWidth + 'px';
+            textarea.style.height = textarea.scrollHeight + 'px';
+        }
     },
     mounted() {
         this.resetContent();
         this.$nextTick(() => {
             window.STUDIP.Markup.element(this.$refs.html);
+            this.commentWidth = this.$refs.html.offsetWidth;
         });
     },
     watch: {