chatview: add the ability to remove one interaction from history
Change-Id: I27a0ec40c3215f966a3637f681845b196f5418d7
Reviewed-by: Philippe Gorley <philippe.gorley@savoirfairelinux.com>
diff --git a/web/chatview.css b/web/chatview.css
index 85083f6..2c41798 100644
--- a/web/chatview.css
+++ b/web/chatview.css
@@ -391,13 +391,71 @@
-webkit-user-select: auto;
}
+.menu_interaction
+{
+ margin: 5px;
+ padding: 10px;
+ padding-top: 0;
+ opacity: 0;
+ height: 20px;
+ transition:visibility 0.3s linear,opacity 0.3s linear;
+}
+
+.message_type_contact .menu_interaction
+{
+ display: none;
+ visibility: hidden;
+}
+
+.message_type_call .menu_interaction
+{
+ margin: auto;
+ padding: 0;
+ vertical-align: center;
+}
+
+.message_type_call .menu_interaction .dropdown
+{
+ margin-top: -17px;
+}
+
+.message:hover .menu_interaction
+{
+ display: block;
+ opacity: 1;
+}
+
+.dropdown {
+ display: none;
+ z-index: 1;
+ position: absolute;
+ background-color: #fff;
+ padding-top: 3px;
+ padding-bottom: 3px;
+}
+
+.dropdown div
+{
+ color: #111;
+ padding: 10px;
+}
+
+.dropdown div:hover
+{
+ background-color: #ddd;
+}
+
+#showmenu:checked ~ .dropdown{
+ display:block;
+}
+
.message_in {
- padding-left: 25%;
+ padding-left: 25%;
}
.message_out {
- padding-right: 25%;
- flex-direction: row-reverse;
+ padding-right: 25%;
+ flex-direction: row-reverse;
}
.message_in + .message_in .sender_image {
@@ -530,52 +588,52 @@
}
.timestamp {
- display: flex;
- justify-content: flex-start;
- color: #333;
- font-size: 10px;
- padding: 5px;
+ display: flex;
+ justify-content: flex-start;
+ color: #333;
+ font-size: 10px;
+ padding: 5px;
}
.timestamp_out {
- flex-direction: row-reverse;
+ flex-direction: row-reverse;
}
/* Buttons */
.flat-button {
- flex: 1;
- padding: 0;
+ flex: 1;
+ padding: 0;
}
.left_buttons {
- display: flex;
- align-self: center;
- max-width: 90px;
- padding-left: 1em;
+ display: flex;
+ align-self: center;
+ max-width: 90px;
+ padding-left: 1em;
}
/* Status */
.status_circle {
- fill: #A0A0A0;
- -webkit-animation: circle-dance;
- -webkit-animation-duration: 0.8s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
+ fill: #A0A0A0;
+ -webkit-animation: circle-dance;
+ -webkit-animation-duration: 0.8s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: ease-in-out;
}
.anim-first {
- -webkit-animation-delay: 0.7s;
+ -webkit-animation-delay: 0.7s;
}
.anim-second {
- -webkit-animation-delay: 0.9s;
+ -webkit-animation-delay: 0.9s;
}
.anim-third {
- -webkit-animation-delay: 1.1s;
+ -webkit-animation-delay: 1.1s;
}
@-webkit-keyframes circle-dance {
@@ -590,20 +648,20 @@
}
.status-x {
- stroke-dasharray: 12;
- stroke-dashoffset: 12;
- -webkit-animation: dash-x;
- -webkit-animation-duration: 0.2s;
- -webkit-animation-fill-mode: forwards;
- -webkit-animation-timing-function: ease-in-out;
+ stroke-dasharray: 12;
+ stroke-dashoffset: 12;
+ -webkit-animation: dash-x;
+ -webkit-animation-duration: 0.2s;
+ -webkit-animation-fill-mode: forwards;
+ -webkit-animation-timing-function: ease-in-out;
}
.x-first {
- -webkit-animation-delay: 0.7s;
+ -webkit-animation-delay: 0.7s;
}
.x-second {
- -webkit-animation-delay: 0.9s;
+ -webkit-animation-delay: 0.9s;
}
@-webkit-keyframes dash-x{
@@ -618,13 +676,13 @@
/* Contact + Call interactions */
.message_type_contact .message_wrapper,
.message_type_call .message_wrapper {
- width: auto;
- margin-left: 30%;
- margin-right: 30%;
- display: flex;
- flex-wrap: wrap;
- background-color: #f2f2f2;
- padding: 0;
+ width: auto;
+ margin-left: 30%;
+ margin-right: 30%;
+ display: flex;
+ flex-wrap: wrap;
+ background-color: #f2f2f2;
+ padding: 0;
}
.message_type_contact .message_wrapper:before,
@@ -639,94 +697,94 @@
.message_type_contact .text,
.message_type_call .text {
- align-self: center;
- font-size: 1.2em;
- padding: 1em;
+ align-self: center;
+ font-size: 1.2em;
+ padding: 1em;
}
/* file interactions */
.message_type_data_transfer .message_wrapper {
- padding: 0;
- width: 30%;
- display: flex;
- flex-wrap: wrap;
+ padding: 0;
+ width: 30%;
+ display: flex;
+ flex-wrap: wrap;
}
.accept, .refuse {
- border-radius: 50%;
- cursor: pointer;
+ border-radius: 50%;
+ cursor: pointer;
}
.accept svg,
.refuse svg {
- padding: 8px;
- width: 24px;
- height: 24px;
+ padding: 8px;
+ width: 24px;
+ height: 24px;
}
.accept {
- fill: #219d55;
+ fill: #219d55;
}
.accept:hover {
- fill: white;
- background: #219d55;
+ fill: white;
+ background: #219d55;
}
.refuse {
- fill: #dc2719;
+ fill: #dc2719;
}
.refuse:hover {
- fill: white;
- background: #dc2719;
+ fill: white;
+ background: #dc2719;
}
.message_type_data_transfer .text {
- padding: 1em;
- text-align: left;
- align-self: left;
- max-width: calc(100% - 180px);
+ padding: 1em;
+ text-align: left;
+ align-self: left;
+ max-width: calc(100% - 180px);
}
.message_type_data_transfer .filename {
- cursor: pointer;
- font-size: 1.1em;
- overflow: hidden;
+ cursor: pointer;
+ font-size: 1.1em;
+ overflow: hidden;
}
.message_type_data_transfer .informations {
- color: #555;
- font-size: 0.8em;
+ color: #555;
+ font-size: 0.8em;
}
.message_progress_bar {
- width: 100%;
- height: 1em;
- position: relative;
- overflow: hidden;
- background-color: #eee;
- border-radius: 0;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+ width: 100%;
+ height: 1em;
+ position: relative;
+ overflow: hidden;
+ background-color: #eee;
+ border-radius: 0;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.message_progress_bar > span {
- display: inline;
- height: 100%;
- background-color: #01a2b8;
- position: absolute;
- overflow: hidden;
+ display: inline;
+ height: 100%;
+ background-color: #01a2b8;
+ position: absolute;
+ overflow: hidden;
}
/* text interactions */
.message_type_text .message_wrapper {
- max-width: 40%;
+ max-width: 40%;
}
.message_type_text .message_text {
- padding: 0px;
+ padding: 0px;
}
.message_text {
@@ -737,110 +795,124 @@
}
pre {
- font : inherit;
- font-family : inherit;
- font-size : inherit;
- font-style : inherit;
- font-variant : inherit;
- font-weight : inherit;
- margin: 0;
- padding: 0;
+ font : inherit;
+ font-family : inherit;
+ font-size : inherit;
+ font-style : inherit;
+ font-variant : inherit;
+ font-weight : inherit;
+ margin: 0;
+ padding: 0;
}
/* Media interactions */
.media_wrapper img {
- max-width: 800px;
- max-height: 700px;
- margin: 5px 0 0 0;
- border-radius: 10px;
+ max-width: 800px;
+ max-height: 700px;
+ margin: 5px 0 0 0;
+ border-radius: 10px;
}
.playVideo {
- background-color: rgba(0, 0, 0, 0.6);
- height: 50px;
- width: 50px;
- border-radius: 5px;
- float: right;
- position: absolute;
- top: calc(50% - 25px);
- left: calc(50% - 25px);
- z-index: 3;
+ background-color: rgba(0, 0, 0, 0.6);
+ height: 50px;
+ width: 50px;
+ border-radius: 5px;
+ float: right;
+ position: absolute;
+ top: calc(50% - 25px);
+ left: calc(50% - 25px);
+ z-index: 3;
}
.containerVideo {
- width: 100%;
- position: relative;
+ width: 100%;
+ position: relative;
}
.playVideo svg {
- height: 40px;
- width: 40px;
- margin: 5px;
+ height: 40px;
+ width: 40px;
+ margin: 5px;
}
/* Text interaction */
.failure,
.sending {
- margin: 10px 10px;
- color: #A0A0A0;
- opacity: 0;
- -webkit-animation-name: fade-in;
- -webkit-animation-duration: 0.2s;
- -webkit-animation-timing-function: ease-in-out;
- -webkit-animation-delay: 0.4s;
- -webkit-animation-fill-mode: forwards;
- transition: opacity 0.5s ease-in-out;
+ margin: 10px 10px;
+ color: #A0A0A0;
+ opacity: 0;
+ -webkit-animation-name: fade-in;
+ -webkit-animation-duration: 0.2s;
+ -webkit-animation-timing-function: ease-in-out;
+ -webkit-animation-delay: 0.4s;
+ -webkit-animation-fill-mode: forwards;
+ transition: opacity 0.5s ease-in-out;
}
/* Classic screens */
@media screen and (max-width: 1920px), screen and (max-height: 1080px) {
.message_in {
- padding-left: 15%;
+ padding-left: 15%;
}
.message_out {
- padding-right: 15%;
+ padding-right: 15%;
}
.message_type_text .message_wrapper {
- max-width: 60%;
+ max-width: 60%;
}
/* File interactions */
.message_type_data_transfer .message_wrapper {
- width: 40%;
+ width: 40%;
}
/* Media interactions */
.media_wrapper img {
- max-width: 450px;
- max-height: 450px;
+ max-width: 450px;
+ max-height: 450px;
+ }
+
+ .menu_interaction
+ {
+ margin: 5px;
+ padding: 2px;
+ height: 10px;
+ font-size: 0.7em;
+ transition:visibility 0.3s linear,opacity 0.3s linear;
}
}
/* lower resolutions */
@media screen and (max-width: 1000px), screen and (max-height: 480px) {
.message_in {
- padding-left: 0;
+ padding-left: 0;
}
.message_out {
- padding-right: 0;
+ padding-right: 0;
+ }
+
+ .message_type_contact,
+ .message_type_call {
+ max-width: 100%;
}
.message_type_text .message_wrapper {
- max-width: 90%;
+ max-width: 90%;
}
/* File interactions */
.message_type_data_transfer .message_wrapper {
- width: 70%;
+ width: 70%;
}
/* Media interactions */
.media_wrapper img {
- max-width: 200px;
- max-height: 200px;
+ max-width: 200px;
+ max-height: 200px;
}
}
@@ -853,24 +925,24 @@
/* File interactions */
.message_type_data_transfer .left_buttons {
- max-width: 100%;
+ max-width: 100%;
}
.message_type_data_transfer .text {
- max-width: 100%;
- padding-left: 0;
+ max-width: 100%;
+ padding-left: 0;
}
}
.message_type_contact .message_wrapper:hover .timestamp_action,
.message_type_call .message_wrapper:hover .timestamp_action {
- opacity: 1;
+ opacity: 1;
}
.timestamp_action {
- display: flex;
- align-items: center;
- justify-content: center;
- opacity:0;
- transition:visibility 0.3s linear,opacity 0.3s linear;
+ margin: auto;
+ padding: 0;
+ vertical-align: center;
+ opacity:0;
+ transition:visibility 0.3s linear,opacity 0.3s linear;
}