Merge branch 'stylelint-rscss-1' into 'develop'

Stylelint + RSCSS initial approach

See merge request pleroma/pleroma-fe!1205

1 files changed, 28 insertions, 463 deletions

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e1e56ec9..27af4340 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -2,8 +2,8 @@
   <!-- eslint-disable vue/no-v-html -->
   <div
     v-if="!hideStatus"
-    class="status-el"
-    :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
+    class="Status"
+    :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
   >
     <div
       v-if="error"
@@ -16,8 +16,8 @@
       />
     </div>
     <template v-if="muted && !isPreview">
-      <div class="media status container muted">
-        <small class="username">
+      <div class="status-csontainer muted">
+        <small class="status-username">
           <i
             v-if="muted && retweet"
             class="button-icon icon-retweet"
@@ -54,7 +54,7 @@
     <template v-else>
       <div
         v-if="showPinned"
-        class="status-pin"
+        class="pin"
       >
         <i class="fa icon-pin faint" />
         <span class="faint">{{ $t('status.pinned') }}</span>
@@ -63,17 +63,17 @@
         v-if="retweet && !noHeading && !inConversation"
         :class="[repeaterClass, { highlighted: repeaterStyle }]"
         :style="[repeaterStyle]"
-        class="media container retweet-info"
+        class="status-container repeat-info"
       >
         <UserAvatar
           v-if="retweet"
-          class="media-left"
+          class="left-side repeater-avatar"
           :better-shadow="betterShadow"
           :user="statusoid.user"
         />
-        <div class="media-body faint">
+        <div class="right-side faint">
           <span
-            class="user-name"
+            class="status-username repeater-name"
             :title="retweeter"
           >
             <router-link
@@ -95,14 +95,14 @@
       </div>
 
       <div
-        :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]"
+        :class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
         :style="[ userStyle ]"
-        class="media status"
+        class="status-container"
         :data-tags="tags"
       >
         <div
           v-if="!noHeading"
-          class="media-left"
+          class="left-side"
         >
           <router-link
             :to="userProfileLink"
@@ -115,29 +115,29 @@
             />
           </router-link>
         </div>
-        <div class="status-body">
+        <div class="right-side">
           <UserCard
             v-if="userExpanded"
             :user-id="status.user.id"
             :rounded="true"
             :bordered="true"
-            class="status-usercard"
+            class="usercard"
           />
           <div
             v-if="!noHeading"
-            class="media-heading"
+            class="status-heading"
           >
             <div class="heading-name-row">
-              <div class="name-and-account-name">
+              <div class="heading-left">
                 <h4
                   v-if="status.user.name_html"
-                  class="user-name"
+                  class="status-username"
                   :title="status.user.name"
                   v-html="status.user.name_html"
                 />
                 <h4
                   v-else
-                  class="user-name"
+                  class="status-username"
                   :title="status.user.name"
                 >
                   {{ status.user.name }}
@@ -150,8 +150,8 @@
                   {{ status.user.screen_name }}
                 </router-link>
                 <img
-                  class="status-favicon"
                   v-if="!!(status.user && status.user.favicon)"
+                  class="status-favicon"
                   :src="status.user.favicon"
                 >
               </div>
@@ -211,6 +211,7 @@
                   :status-id="status.parent_visible && status.in_reply_to_status_id"
                   class="reply-to-popover"
                   style="min-width: 0"
+                  :class="{ '-strikethrough': !status.parent_visible }"
                 >
                   <a
                     class="reply-to"
@@ -218,10 +219,9 @@
                     :aria-label="$t('tool_tip.reply')"
                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
-                    <i class="button-icon icon-reply" />
+                    <i class="button-icon reply-button icon-reply" />
                     <span
                       class="faint-link reply-to-text"
-                      :class="{ 'strikethrough': !status.parent_visible }"
                     >
                       {{ $t('status.reply_to') }}
                     </span>
@@ -229,7 +229,7 @@
                 </StatusPopover>
                 <span
                   v-else
-                  class="reply-to"
+                  class="reply-to-no-popover"
                 >
                   <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
                 </span>
@@ -317,19 +317,19 @@
 
           <div
             v-if="!noHeading && !isPreview"
-            class="status-actions media-body"
+            class="status-actions"
           >
             <div>
               <i
                 v-if="loggedIn"
-                class="button-icon icon-reply"
+                class="button-icon button-reply icon-reply"
                 :title="$t('tool_tip.reply')"
-                :class="{'button-icon-active': replying}"
+                :class="{'-active': replying}"
                 @click.prevent="toggleReplying"
               />
               <i
                 v-else
-                class="button-icon button-icon-disabled icon-reply"
+                class="button-icon button-reply -disabled icon-reply"
                 :title="$t('tool_tip.reply')"
               />
               <span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
@@ -357,7 +357,7 @@
       </div>
       <div
         v-if="replying"
-        class="container"
+        class="status-container reply-form"
       >
         <PostStatusForm
           class="reply-body"
@@ -375,439 +375,4 @@
 </template>
 
 <script src="./status.js" ></script>
-<style lang="scss">
-@import '../../_variables.scss';
-
-$status-margin: 0.75em;
-
-.status-body {
-  flex: 1;
-  min-width: 0;
-}
-
-.status-pin {
-  padding: $status-margin $status-margin 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.media-left {
-  margin-right: $status-margin;
-}
-
-.status-el {
-  border-left-width: 0px;
-  min-width: 0;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-
-  border-left: 4px $fallback--cRed;
-  border-left: 4px var(--cRed, $fallback--cRed);
-
-  &_focused {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedPost, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedPostText, $fallback--text);
-    --lightText: var(--selectedPostLightText, $fallback--light);
-    --faint: var(--selectedPostFaintText, $fallback--faint);
-    --faintLink: var(--selectedPostFaintLink, $fallback--faint);
-    --postLink: var(--selectedPostPostLink, $fallback--faint);
-    --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
-    --icon: var(--selectedPostIcon, $fallback--icon);
-  }
-
-  .timeline & {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-  }
-
-  .media-body {
-    flex: 1;
-    padding: 0;
-  }
-
-  .status-usercard {
-    margin-bottom: $status-margin;
-  }
-
-  .user-name {
-    white-space: nowrap;
-    font-size: 14px;
-    overflow: hidden;
-    flex-shrink: 0;
-    max-width: 85%;
-    font-weight: bold;
-
-    img.emoji {
-      width: 14px;
-      height: 14px;
-      vertical-align: middle;
-      object-fit: contain
-    }
-  }
-
-  .status-favicon {
-    height: 18px;
-    width: 18px;
-    margin-right: 0.4em;
-  }
-
-  .media-heading {
-    padding: 0;
-    vertical-align: bottom;
-    flex-basis: 100%;
-    margin-bottom: 0.5em;
-
-    small {
-      font-weight: lighter;
-    }
-
-    .heading-name-row {
-      padding: 0;
-      display: flex;
-      justify-content: space-between;
-      line-height: 18px;
-
-      a {
-        display: inline-block;
-        word-break: break-all;
-      }
-
-      .name-and-account-name {
-        display: flex;
-        min-width: 0;
-      }
-
-      .user-name {
-        flex-shrink: 1;
-        margin-right: 0.4em;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .account-name {
-        min-width: 1.6em;
-        margin-right: 0.4em;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex: 1 1 0;
-      }
-    }
-
-    .heading-right {
-      display: flex;
-      flex-shrink: 0;
-    }
-
-    .timeago {
-      margin-right: 0.2em;
-    }
-
-    .heading-reply-row {
-      position: relative;
-      align-content: baseline;
-      font-size: 12px;
-      line-height: 18px;
-      max-width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: stretch;
-
-      > .reply-to-and-accountname > a {
-        overflow: hidden;
-        max-width: 100%;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        word-break: break-all;
-      }
-    }
-
-    .reply-to-and-accountname {
-      display: flex;
-      height: 18px;
-      margin-right: 0.5em;
-      max-width: 100%;
-      .icon-reply {
-        transform: scaleX(-1);
-      }
-    }
-
-    .reply-info {
-      display: flex;
-    }
-
-    .reply-to-popover {
-      min-width: 0;
-    }
-
-    .reply-to {
-      display: flex;
-    }
-
-    .reply-to-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin: 0 0.4em 0 0.2em;
-    }
-
-    .strikethrough {
-      text-decoration: line-through;
-    }
-
-    .replies-separator {
-      margin-left: 0.4em;
-    }
-
-    .replies {
-      line-height: 18px;
-      font-size: 12px;
-      display: flex;
-      flex-wrap: wrap;
-      & > * {
-        margin-right: 0.4em;
-      }
-    }
-
-    .reply-link {
-      height: 17px;
-    }
-  }
-
-  .retweet-info {
-    padding: 0.4em $status-margin;
-    margin: 0;
-
-    .avatar.still-image {
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-      margin-left: 28px;
-      width: 20px;
-      height: 20px;
-    }
-
-    .media-body {
-      font-size: 1em;
-      line-height: 22px;
-
-      display: flex;
-      align-content: center;
-      flex-wrap: wrap;
-
-      .user-name {
-        font-weight: bold;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        img {
-          width: 14px;
-          height: 14px;
-          vertical-align: middle;
-          object-fit: contain
-        }
-      }
-
-      i {
-        padding: 0 0.2em;
-      }
-
-      a {
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
-.status-fadein {
-  animation-duration: 0.4s;
-  animation-name: fadein;
-}
-
-@keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.status-conversation {
-  border-left-style: solid;
-}
-
-.status-actions {
-  position: relative;
-  width: 100%;
-  display: flex;
-  margin-top: $status-margin;
-
-  > * {
-    max-width: 4em;
-    flex: 1;
-  }
-}
-
-.button-icon.icon-reply {
-  &:not(.button-icon-disabled):hover,
-  &.button-icon-active {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
-  }
-}
-
-.button-icon.icon-reply {
-  &:not(.button-icon-disabled) {
-    cursor: pointer;
-  }
-}
-
-.status:hover .animated.avatar {
-  canvas {
-    display: none;
-  }
-  img {
-    visibility: visible;
-  }
-}
-
-.status {
-  display: flex;
-  padding: $status-margin;
-  &.is-retweet {
-    padding-top: 0;
-  }
-}
-
-.status-conversation:last-child {
-  border-bottom: none;
-}
-
-.muted {
-  padding: .25em .6em;
-  height: 1.2em;
-  line-height: 1.2em;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: flex;
-  flex-wrap: nowrap;
-
-  .username, .mute-thread, .mute-words {
-    word-wrap: normal;
-    word-break: normal;
-    white-space: nowrap;
-  }
-
-  .username, .mute-words {
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .username {
-    flex: 0 1 auto;
-    margin-right: .2em;
-  }
-
-  .mute-thread {
-    flex: 0 0 auto;
-  }
-
-  .mute-words {
-    flex: 1 0 5em;
-    margin-left: .2em;
-    &::before {
-      content: ' '
-    }
-  }
-
-  .unmute {
-    flex: 0 0 auto;
-    margin-left: auto;
-    display: block;
-    margin-left: auto;
-  }
-}
-
-.reply-body {
-  flex: 1;
-}
-
-.favs-repeated-users {
-  margin-top: $status-margin;
-
-  .stats {
-    width: 100%;
-    display: flex;
-    line-height: 1em;
-
-    .stat-count {
-      margin-right: $status-margin;
-      user-select: none;
-
-      &:hover .stat-title {
-        text-decoration: underline;
-      }
-
-      .stat-title {
-        color: var(--faint, $fallback--faint);
-        font-size: 12px;
-        text-transform: uppercase;
-        position: relative;
-      }
-
-      .stat-number {
-        font-weight: bolder;
-        font-size: 16px;
-        line-height: 1em;
-      }
-    }
-
-    .avatar-row {
-      flex: 1;
-      overflow: hidden;
-      position: relative;
-      display: flex;
-      align-items: center;
-
-      &::before {
-        content: '';
-        position: absolute;
-        height: 100%;
-        width: 1px;
-        left: 0;
-        background-color: var(--faint, $fallback--faint);
-      }
-    }
-  }
-}
-
-@media all and (max-width: 800px) {
-  .status-el {
-    .retweet-info {
-      .avatar.still-image {
-        margin-left: 20px;
-      }
-    }
-  }
-  .status {
-    max-width: 100%;
-  }
-
-  .status .avatar.still-image {
-    width: 40px;
-    height: 40px;
-
-    &.avatar-compact {
-      width: 32px;
-      height: 32px;
-    }
-  }
-}
-
-</style>
+<style src="./status.scss" lang="scss"></style>