Merge branch 'chats' into 'develop'

ChatMessages MVP

See merge request soapbox-pub/soapbox-fe!185

app/styles/accounts.scss

@@ -327,6 +327,7 @@
 
 .account {
   padding: 10px;
+  position: relative;
 
   &:not(:last-of-type) {
     border-bottom: 1px solid var(--brand-color--med);

app/styles/application.scss

@@ -28,6 +28,7 @@
 @import 'demetricator';
 @import 'pro';
 @import 'overflow_hacks';
+@import 'chats';
 
 // COMPONENTS
 @import 'components/buttons';

app/styles/basics.scss

@@ -227,5 +227,9 @@ noscript {
   bottom: 0;
   left: 0;
   position: absolute;
-  z-index: 9999;
+  z-index: 201;
+  background: transparent;
+  border: 0;
+  margin: 0;
+  padding: 0;
 }

app/styles/chats.scss

@@ -0,0 +1,255 @@
+.pane {
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
+  border-radius: 6px 6px 0 0;
+  position: fixed;
+  bottom: 0;
+  right: 20px;
+  width: 265px;
+  height: 265px;
+  max-height: calc(100vh - 70px);
+  display: flex;
+  flex-direction: column;
+  z-index: 999;
+  transition: 0.05s;
+
+  &--main {
+    height: calc(100vh - 70px);
+
+    .pane__header .pane__title {
+      font-size: 16px;
+    }
+  }
+
+  &--minimized {
+    height: 31px;
+  }
+
+  &__header {
+    box-sizing: border-box;
+    background: var(--brand-color);
+    color: #fff;
+    padding: 0 10px;
+    font-weight: bold;
+    border-radius: 6px 6px 0 0;
+    display: flex;
+    align-items: center;
+    height: 31px;
+
+    .account__avatar {
+      margin-right: 7px;
+    }
+
+    .pane__title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      height: 100%;
+      background: transparent;
+      border: 0;
+      padding: 0;
+      color: #fff;
+      font-weight: bold;
+      text-align: left;
+      font-size: 14px;
+    }
+
+    .icon-button {
+      color: #fff;
+
+      > div {
+        height: auto !important;
+        width: auto !important;
+        margin-right: -6px;
+      }
+    }
+
+    .pane__close {
+      margin-left: auto;
+    }
+
+    .icon-with-badge__badge {
+      position: static;
+      pointer-events: none;
+      width: 18px;
+      height: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 7px;
+    }
+  }
+
+  &__content {
+    background: var(--foreground-color);
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+
+    .chat-box {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      overflow: hidden;
+    }
+  }
+}
+
+.chat-messages {
+  overflow-y: scroll;
+  flex: 1;
+}
+
+.chat-message {
+  margin: 14px 10px;
+  display: flex;
+
+  &__bubble {
+    font-size: 15px;
+    padding: 4px 10px;
+    max-width: 70%;
+    border-radius: 10px;
+    background-color: var(--background-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    a {
+      color: var(--brand-color--hicontrast);
+    }
+  }
+
+  &--me .chat-message__bubble {
+    margin-left: auto;
+    background-color: hsla(var(--brand-color_hsl), 0.2);
+  }
+
+  &--pending .chat-message__bubble {
+    opacity: 0.5;
+  }
+}
+
+.chat-list {
+  overflow-y: auto;
+  flex: 1;
+
+  &__content {
+    height: 100%;
+  }
+
+  .empty-column-indicator {
+    height: 100%;
+    box-sizing: border-box;
+    background: transparent;
+    align-items: start;
+  }
+
+  .account__display-name {
+    position: relative;
+  }
+
+  .icon-with-badge__badge {
+    top: 0;
+    right: 0;
+    left: auto;
+    bottom: auto;
+  }
+}
+
+.chat-box {
+  &__actions {
+    background: var(--foreground-color);
+    margin-top: auto;
+    padding: 6px;
+
+    textarea {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      box-sizing: border-box;
+      padding: 6px;
+      background: var(--background-color);
+      border: 0;
+      border-radius: 6px;
+      color: var(--primary-text-color);
+      font-size: 15px;
+    }
+  }
+}
+
+.ui--chatroom {
+  padding-bottom: 0;
+
+  .columns-area__panels__main .columns-area {
+    height: calc(100vh - 100px);
+    box-sizing: border-box;
+    overflow: hidden;
+
+    @media(max-width: 630px) {
+      height: calc(100vh - 50px);
+    }
+  }
+
+  .page {
+    .chat-box {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      flex: 1;
+      border-radius: 0 0 10px 10px;
+
+      &__actions textarea {
+        padding: 10px;
+      }
+    }
+  }
+}
+
+@media(max-width: 630px) {
+  .chat-panes {
+    display: none;
+  }
+}
+
+@media(min-width: 630px) {
+  .tabs-bar .tabs-bar__link--chats {
+    display: none;
+  }
+}
+
+.chatroom__header {
+  display: flex;
+  margin-left: auto;
+  padding-right: 15px;
+  overflow: hidden;
+
+  .account__avatar {
+    margin-right: 7px;
+  }
+
+  .chatroom__title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    height: 100%;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    color: #fff;
+    font-weight: bold;
+    text-align: left;
+    font-size: 14px;
+  }
+}
+
+.chatroom__back {
+  display: flex;
+  align-items: center;
+  background: var(--accent-color--faint);
+  border-radius: 10px 10px 0 0;
+
+  .column-back-button {
+    background: transparent;
+  }
+}

app/styles/components/columns.scss

@@ -678,7 +678,6 @@
   align-items: center;
   justify-content: center;
   min-height: 160px;
-  border-radius: 0 0 10px 10px;
 
   @supports(display: grid) { // hack to fix Chrome <57
     contain: strict;

app/styles/components/profile_hover_card.scss

@@ -14,7 +14,7 @@
   transition-property: opacity;
   transition-duration: 0.2s;
   width: 320px;
-  z-index: 998;
+  z-index: 200;
   left: -10px;
   padding: 20px;
   margin-bottom: 10px;

app/styles/ui.scss

@@ -369,7 +369,7 @@
   justify-content: center;
   transition: 0.2s;
 
-  @media screen and (max-width: 895px) {
+  @media screen and (max-width: 630px) {
     display: flex;
   }