refactor status

package.json

@@ -22,8 +22,8 @@
     "cropperjs": "^1.4.3",
     "diff": "^3.0.1",
     "escape-html": "^1.0.3",
-    "parse-link-header": "^1.0.1",
     "localforage": "^1.5.0",
+    "parse-link-header": "^1.0.1",
     "phoenix": "^1.3.0",
     "portal-vue": "^2.1.4",
     "v-click-outside": "^2.1.1",
@@ -36,7 +36,6 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "karma-mocha-reporter": "^2.2.1",
     "@babel/core": "^7.7.5",
     "@babel/plugin-transform-runtime": "^7.7.6",
     "@babel/preset-env": "^7.7.6",
@@ -80,6 +79,7 @@
     "karma-coverage": "^1.1.1",
     "karma-firefox-launcher": "^1.1.0",
     "karma-mocha": "^1.2.0",
+    "karma-mocha-reporter": "^2.2.1",
     "karma-sinon-chai": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.26",
@@ -101,6 +101,9 @@
     "shelljs": "^0.7.4",
     "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",
+    "stylelint": "^13.6.1",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-rscss": "^0.4.0",
     "url-loader": "^1.1.2",
     "vue-loader": "^14.0.0",
     "vue-style-loader": "^4.0.0",

src/components/chat_list_item/chat_list_item.scss

@@ -77,7 +77,7 @@
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
   }
 
-  .status-body {
+  .StatusContent {
     img.emoji {
       width: 1.4em;
       height: 1.4em;

src/components/conversation/conversation.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="timeline panel-default"
+    class="Conversation"
-    :class="[isExpanded ? 'panel' : 'panel-disabled']"
+    :class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
   >
     <div
       v-if="isExpanded"
@@ -28,7 +28,7 @@
       :replies="getReplies(status.id)"
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
-      class="status-fadein panel-body"
+      class="conversation-status status-fadein panel-body"
       @goto="setHighlight"
       @toggleExpanded="toggleExpanded"
     />
@@ -40,15 +40,26 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.timeline {
+.Conversation {
-  .panel-disabled {
+  .conversation-status {
-    .status-el {
     border-left: none;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-color: var(--border, $fallback--border);
     border-radius: 0;
   }
+
+  &.-expanded {
+    .conversation-status:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &:not(.-expanded) > {
+    .conversation-status:last-child {
+      border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+      border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    }
   }
 }
 </style>

src/components/notifications/notifications.scss

@@ -60,16 +60,8 @@
       height: 32px;
     }
 
-    .status-body {
+    --link: var(--faintLink);
-      color: $fallback--faint;
+    --text: var(--faint);
-      color: var(--faint, $fallback--faint);
-      a {
-        color: var(--faintLink);
-      }
-      .status-content a {
-        color: var(--postFaintLink);
-      }
-    }
   }
 
   .follow-request-accept {
@@ -106,7 +98,8 @@
     }
   }
 
-  .status-el {
+  /* TODO cleanup this */
+  .Status {
     flex: 1;
   }
 

src/components/status/status.scss

@@ -3,36 +3,31 @@
 
 $status-margin: 0.75em;
 
-.status-body {
+.Status {
-  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 {
+  // TODO find a way to do this in a cleaner way without JS
+  // stylelint-disable rscss/class-format
+  &:hover .avatar.animated {
+    canvas {
+      display: none;
+    }
+
+    img {
+      visibility: visible;
+    }
+  }
+
+  &.-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);
@@ -41,17 +36,32 @@ $status-margin: 0.75em;
     --icon: var(--selectedPostIcon, $fallback--icon);
   }
 
-  .timeline & {
+  .status-container {
-    border-bottom-width: 1px;
+    display: flex;
-    border-bottom-style: solid;
+    padding: $status-margin;
+
+    &.-repeat {
+      padding-top: 0;
+    }
   }
 
-  .media-body {
+  .pin {
+    padding: $status-margin $status-margin 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .left-side {
+    margin-right: $status-margin;
+  }
+
+  .right-side {
     flex: 1;
-    padding: 0;
+    min-width: 0;
   }
 
-  .status-usercard {
+  .usercard {
     margin-bottom: $status-margin;
   }
 
@@ -59,15 +69,17 @@ $status-margin: 0.75em;
     white-space: nowrap;
     font-size: 14px;
     overflow: hidden;
-    flex-shrink: 0;
     max-width: 85%;
     font-weight: bold;
+    flex-shrink: 1;
+    margin-right: 0.4em;
+    text-overflow: ellipsis;
 
-    img.emoji {
+    .emoji {
       width: 14px;
       height: 14px;
       vertical-align: middle;
-      object-fit: contain
+      object-fit: contain;
     }
   }
 
@@ -77,18 +89,11 @@ $status-margin: 0.75em;
     margin-right: 0.4em;
   }
 
-  .media-heading {
+  .status-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;
@@ -97,17 +102,6 @@ $status-margin: 0.75em;
       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 {
@@ -118,6 +112,10 @@ $status-margin: 0.75em;
     text-overflow: ellipsis;
     flex: 1 1 0;
   }
+
+  .heading-left {
+    display: flex;
+    min-width: 0;
   }
 
   .heading-right {
@@ -138,14 +136,6 @@ $status-margin: 0.75em;
     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 {
@@ -153,17 +143,25 @@ $status-margin: 0.75em;
     height: 18px;
     margin-right: 0.5em;
     max-width: 100%;
+
     .icon-reply {
+      // mirror the icon
       transform: scaleX(-1);
     }
   }
 
-    .reply-info {
-      display: flex;
-    }
-
   .reply-to-popover {
     min-width: 0;
+    margin-right: 0.4em;
+
+    &:hover {
+      border-bottom: 1px solid var(--faint);
+    }
+
+    .faint-link:hover {
+      // override default
+      text-decoration: none;
+    }
   }
 
   .reply-to {
@@ -174,12 +172,12 @@ $status-margin: 0.75em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-      margin: 0 0.4em 0 0.2em;
+    margin-left: 0.2em;
-    }
 
-    .strikethrough {
+    &.-strikethrough {
       text-decoration: line-through;
     }
+  }
 
   .replies-separator {
     margin-left: 0.4em;
@@ -190,6 +188,7 @@ $status-margin: 0.75em;
     font-size: 12px;
     display: flex;
     flex-wrap: wrap;
+
     & > * {
       margin-right: 0.4em;
     }
@@ -198,52 +197,38 @@ $status-margin: 0.75em;
   .reply-link {
     height: 17px;
   }
+
+  .repeat-info {
+    padding: 0.4em $status-margin;
+    line-height: 22px;
+
+    .right-side {
+      display: flex;
+      align-content: center;
+      flex-wrap: wrap;
     }
 
-  .retweet-info {
+    i {
-    padding: 0.4em $status-margin;
+      padding: 0 0.2em;
-    margin: 0;
+    }
+  }
 
-    .avatar.still-image {
+  .repeater-avatar {
-      border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
     margin-left: 28px;
     width: 20px;
     height: 20px;
   }
 
-    .media-body {
+  .repeater-name {
-      font-size: 1em;
-      line-height: 22px;
-
-      display: flex;
-      align-content: center;
-      flex-wrap: wrap;
-
-      .user-name {
-        font-weight: bold;
-        overflow: hidden;
     text-overflow: ellipsis;
+    margin-right: 0;
 
-        img {
+    .emoji {
       width: 14px;
       height: 14px;
       vertical-align: middle;
-          object-fit: contain
+      object-fit: contain;
-        }
-      }
-
-      i {
-        padding: 0 0.2em;
-      }
-
-      a {
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
     }
   }
 
@@ -256,15 +241,12 @@ $status-margin: 0.75em;
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }
   }
 
-.status-conversation {
-  border-left-style: solid;
-}
-
   .status-actions {
     position: relative;
     width: 100%;
@@ -277,43 +259,20 @@ $status-margin: 0.75em;
     }
   }
 
-.button-icon.icon-reply {
+  .button-reply {
-  &:not(.button-icon-disabled):hover,
+    &:not(.-disabled) {
-  &.button-icon-active {
+      cursor: pointer;
+    }
+
+    &:not(.-disabled):hover,
+    &.-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;
+    padding: 0.25em 0.6em;
     height: 1.2em;
     line-height: 1.2em;
     text-overflow: ellipsis;
@@ -321,20 +280,24 @@ $status-margin: 0.75em;
     display: flex;
     flex-wrap: nowrap;
 
-  .username, .mute-thread, .mute-words {
+    & .user-name,
+    & .mute-thread,
+    & .mute-words {
       word-wrap: normal;
       word-break: normal;
       white-space: nowrap;
     }
 
-  .username, .mute-words {
+    & .user-name,
+    & .mute-words {
       text-overflow: ellipsis;
       overflow: hidden;
     }
 
-  .username {
+    .user-name {
+      font-weight: normal;
       flex: 0 1 auto;
-    margin-right: .2em;
+      margin-right: 0.2em;
     }
 
     .mute-thread {
@@ -343,9 +306,10 @@ $status-margin: 0.75em;
 
     .mute-words {
       flex: 1 0 5em;
-    margin-left: .2em;
+      margin-left: 0.2em;
+
       &::before {
-      content: ' '
+        content: ' ';
       }
     }
 
@@ -353,7 +317,6 @@ $status-margin: 0.75em;
       flex: 0 0 auto;
       margin-left: auto;
       display: block;
-    margin-left: auto;
     }
   }
 
@@ -363,32 +326,12 @@ $status-margin: 0.75em;
 
   .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 {
@@ -407,28 +350,44 @@ $status-margin: 0.75em;
       background-color: var(--faint, $fallback--faint);
     }
   }
+
+  .stat-count {
+    margin-right: $status-margin;
+    user-select: none;
+
+    .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;
+    }
+
+    &:hover .stat-title {
+      text-decoration: underline;
     }
   }
 
   @media all and (max-width: 800px) {
-  .status-el {
+    .repeater-avatar {
-    .retweet-info {
-      .avatar.still-image {
       margin-left: 20px;
     }
-    }
-  }
-  .status {
-    max-width: 100%;
-  }
 
-  .status .avatar.still-image {
+    .avatar:not(.repeater-avatar) {
       width: 40px;
       height: 40px;
 
+      // TODO define those other way somehow?
+      // stylelint-disable rscss/class-format
       &.avatar-compact {
         width: 32px;
         height: 32px;
       }
     }
   }
+}

src/components/status/status.vue

@@ -2,8 +2,8 @@
   <!-- eslint-disable vue/no-v-html -->
   <div
     v-if="!hideStatus"
-    class="status-el"
+    class="Status"
-    :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
+    :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">
+      <div class="status-csontainer muted">
-        <small class="username">
+        <small class="user-name">
           <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="user-name 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,20 +115,20 @@
             />
           </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"
@@ -218,10 +218,10 @@
                     :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 }"
+                      :class="{ '-strikethrough': !status.parent_visible }"
                     >
                       {{ $t('status.reply_to') }}
                     </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"
       >
         <PostStatusForm
           class="reply-body"
@@ -375,4 +375,4 @@
 </template>
 
 <script src="./status.js" ></script>
-<style src="./status.css" lang="scss"></style>
+<style src="./status.scss" lang="scss"></style>

src/components/status_content/status_content.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <div class="status-body">
+  <div class="StatusContent">
     <slot name="header" />
     <div
       v-if="status.summary_html"
@@ -133,7 +133,7 @@
 
 $status-margin: 0.75em;
 
-.status-body {
+.StatusContent {
   flex: 1;
   min-width: 0;
 
@@ -283,13 +283,4 @@ $status-margin: 0.75em;
   color: $fallback--cGreen;
   color: var(--postGreentext, $fallback--cGreen);
 }
-
-.timeline :not(.panel-disabled) > {
-  .status-el:last-child {
-    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-    border-bottom: none;
-  }
-}
-
 </style>

src/components/status_popover/status_popover.vue

@@ -52,7 +52,8 @@
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
   box-shadow: var(--popupShadow);
 
-  .status-el.status-el {
+  /* TODO cleanup this */
+  .Status.Status {
     border: none;
   }
 

src/components/timeline/timeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes.root">
+  <div :class="[classes.root, 'timeline']">
     <div :class="classes.header">
       <div class="title">
         {{ title }}

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -146,7 +146,8 @@
     display: flex;
     justify-content: space-between;
 
-    > .status-el {
+    /* TODO cleanup this */
+    > .Status {
       flex: 1;
     }