Merge remote-tracking branch 'accelforce/custom/quote' into features/v4.1.2

app/javascript/styles/mastodon/components.scss

@@ -827,6 +827,10 @@ body > [data-popper-placement] {
   min-height: 23px;
   overflow-y: auto;
   flex: 0 2 auto;
+
+  &.quote-indicator {
+    background: $success-green;
+  }
 }
 
 .reply-indicator__header {
@@ -1008,6 +1012,10 @@ body > [data-popper-placement] {
 
 .status__content.status__content--collapsed {
   max-height: 22px * 15; // 15 lines is roughly above 500 characters
+
+  .quote-status & {
+    max-height: 22px * 5;
+  }
 }
 
 .status__content__read-more-button {
@@ -1080,6 +1088,69 @@ body > [data-popper-placement] {
   }
 }
 
+.quote-status {
+  border: solid 1px $ui-base-lighter-color;
+  border-radius: 4px !important;
+  padding: 5px !important;
+  margin-top: 8px;
+  position: relative;
+
+  .muted-quote,
+  .unlisted-quote button {
+    color: $dark-text-color;
+    font-size: 15px;
+    width: 100%;
+    border: 0;
+    padding: 0;
+  }
+
+  .muted-quote {
+    text-align: center;
+    cursor: default;
+  }
+
+  .unlisted-quote button {
+    background-color: transparent;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .status__avatar,
+  .detailed-status__display-avatar {
+    position: absolute;
+    top: 5px !important;
+    left: 5px !important;
+  }
+
+  .display-name {
+    padding-left: 56px;
+  }
+
+  .detailed-status__display-name {
+    margin-bottom: 0;
+    line-height: unset;
+
+    strong,
+    span {
+      display: inline;
+    }
+  }
+
+  .status__content__text {
+    p {
+      display: inline;
+
+      &::after {
+        content: ' ';
+      }
+    }
+  }
+}
+
+.quote-inline {
+  display: none;
+}
+
 .focusable {
   &:focus {
     outline: 0;
@@ -1095,9 +1166,12 @@ body > [data-popper-placement] {
 .status {
   padding: 16px;
   min-height: 54px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: auto;
 
+  &:not(.quote-status) {
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+  }
+
   @keyframes fade {
     0% { opacity: 0; }
     100% { opacity: 1; }

app/javascript/styles/mastodon/statuses.scss

@@ -40,7 +40,7 @@
 
     &:last-child {
       .detailed-status,
-      .status,
+      .status:not(.quote-status),
       .load-more {
         border-bottom: 0;
         border-radius: 0 0 4px 4px;
@@ -63,9 +63,18 @@
       }
     }
 
+    .detailed-status .quote-status {
+      width: 100%;
+    }
+
+    .quote-status {
+      margin-top: 15px;
+      cursor: pointer;
+    }
+
     @media screen and (max-width: 740px) {
       .detailed-status,
-      .status,
+      .status:not(.quote-status),
       .load-more {
         border-radius: 0 !important;
       }
@@ -77,6 +86,10 @@
   }
 }
 
+.standalone-timeline .quote-status {
+  cursor: pointer;
+}
+
 .button.logo-button {
   flex: 0 auto;
   font-size: 14px;