diff --git a/public/assets/images/icons/black/forward.svg b/public/assets/images/icons/black/forward.svg
new file mode 100644
index 0000000000000000000000000000000000000000..94f1ee6aa2bf74e4b0016e699b2a6263930716d1
--- /dev/null
+++ b/public/assets/images/icons/black/forward.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/black/reply.svg b/public/assets/images/icons/black/reply.svg
new file mode 100644
index 0000000000000000000000000000000000000000..29946e5b5c9246c4a28167f813db22261e207bb2
--- /dev/null
+++ b/public/assets/images/icons/black/reply.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/blue/forward.svg b/public/assets/images/icons/blue/forward.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7c9acd3544a3b3c5a9814469341ad8d7d2c5a7e8
--- /dev/null
+++ b/public/assets/images/icons/blue/forward.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/blue/reply.svg b/public/assets/images/icons/blue/reply.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d0956c49d64ee5e8e1d2f173264fabc470058cce
--- /dev/null
+++ b/public/assets/images/icons/blue/reply.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/green/forward.svg b/public/assets/images/icons/green/forward.svg
new file mode 100644
index 0000000000000000000000000000000000000000..88071569c2d6e81a34ec0f3138e449974413f143
--- /dev/null
+++ b/public/assets/images/icons/green/forward.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/green/reply.svg b/public/assets/images/icons/green/reply.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1304e764d8742985f3f09b92d49c3b727aabc9ee
--- /dev/null
+++ b/public/assets/images/icons/green/reply.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/grey/forward.svg b/public/assets/images/icons/grey/forward.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1e521e0eda5a431d250eae38c56bc426422b03bd
--- /dev/null
+++ b/public/assets/images/icons/grey/forward.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/grey/reply.svg b/public/assets/images/icons/grey/reply.svg
new file mode 100644
index 0000000000000000000000000000000000000000..99c7015f34e01409a966184e7e01c798d037907a
--- /dev/null
+++ b/public/assets/images/icons/grey/reply.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/red/forward.svg b/public/assets/images/icons/red/forward.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fc21699cc95b3819eb2530414fc6fc87caf2efca
--- /dev/null
+++ b/public/assets/images/icons/red/forward.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/red/reply.svg b/public/assets/images/icons/red/reply.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c331ee28dbf712b70daad64ceb19a2edf612a976
--- /dev/null
+++ b/public/assets/images/icons/red/reply.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/white/forward.svg b/public/assets/images/icons/white/forward.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7a8ca229b8428eae0703895452980fc6c2216cb7
--- /dev/null
+++ b/public/assets/images/icons/white/forward.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/white/reply.svg b/public/assets/images/icons/white/reply.svg
new file mode 100644
index 0000000000000000000000000000000000000000..db81b79817b7acee43a8a35051fdc2ac202cbc2f
--- /dev/null
+++ b/public/assets/images/icons/white/reply.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/yellow/forward.svg b/public/assets/images/icons/yellow/forward.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f16971109f14f9108eabf298e85ba73ecf9b211f
--- /dev/null
+++ b/public/assets/images/icons/yellow/forward.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/public/assets/images/icons/yellow/reply.svg b/public/assets/images/icons/yellow/reply.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e1f614bfde9d739ffd55301cc840ddb018274aaf
--- /dev/null
+++ b/public/assets/images/icons/yellow/reply.svg
@@ -0,0 +1,26 @@
+<?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
diff --git a/resources/assets/stylesheets/scss/blubber.scss b/resources/assets/stylesheets/scss/blubber.scss
index c103e2c0b97068fe0d7fa3d663459db0df2cae64..1893fd52130c865c5df4f617f8f3c9ab61f6eac4 100644
--- a/resources/assets/stylesheets/scss/blubber.scss
+++ b/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 {
diff --git a/resources/assets/stylesheets/scss/talk-bubble.scss b/resources/assets/stylesheets/scss/talk-bubble.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bc44600d170dc158167309426d2aa8b7b9f7768b
--- /dev/null
+++ b/resources/assets/stylesheets/scss/talk-bubble.scss
@@ -0,0 +1,139 @@
+$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
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 98b0eb45ea177ffcfc969b471e2c010dd2b86757..1ba15942882fc506c5ba937497fd3ea19e42e95e 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/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";
diff --git a/resources/vue/components/blubber/Comment.vue b/resources/vue/components/blubber/Comment.vue
index 93d7432b35ebd79abf9a1929f12a8156402c3cb2..320841bf7f90389c027c04ba9b7910efb7b5058d 100644
--- a/resources/vue/components/blubber/Comment.vue
+++ b/resources/vue/components/blubber/Comment.vue
@@ -1,44 +1,60 @@
<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: {