Merge branch 'develop' into feature/hash-routed

src/components/attachment/attachment.js

@@ -26,7 +26,7 @@ const Attachment = {
     autoHeight () {
       if (this.type === 'image' && this.nsfw) {
         return {
-          'min-height': '311px'
+          'min-height': '109px'
         }
       }
     }

src/components/attachment/attachment.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="attachment" :class="{[type]: true, loading}" :style="autoHeight">
+  <div class="attachment base03-border" :class="{[type]: true, loading}" :style="autoHeight">
     <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
       <img :key="nsfwImage" :src="nsfwImage"/>
     </a>
@@ -8,7 +8,7 @@
     </div>
 
     <a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank">
-      <img class="base05-border" referrerpolicy="no-referrer" :src="attachment.large_thumb_url || attachment.url"/>
+      <img class="base03-border" referrerpolicy="no-referrer" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
     <video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video>
@@ -76,19 +76,18 @@
               border-radius: 5px;
           }
 
-
           .oembed {
+              border: 1px solid;
+              border-radius: 5px;
+              border-color: inherit;
+              width: 100%;
+              margin-right: 15px;
+              display: flex;
+
               img {
                   width: 100%;
               }
-              margin-right: 15px;
-          }
 
-          .oembed {
-              border: 1px solid;
-              width: 100%;
-
-              display: flex;
               .image {
                   flex: 1;
                   img {
@@ -117,8 +116,10 @@
                   border-style: solid;
                   border-width: 1px;
                   border-radius: 5px;
+                  object-fit: contain;
                   width: 100%;
                   height: 100%; /* If this isn't here, chrome will stretch the images */
+                  max-height: 500px;
               }
           }
       }

src/components/conversation/conversation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="timeline panel panel-default base00-background">
-    <div class="panel-heading base01-background base04">
+    <div class="panel-heading base01-background base04 base03-border conversation-heading">
       Conversation
       <span v-if="collapsable" style="float:right;">
         <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
@@ -15,3 +15,10 @@
 </template>
 
 <script src="./conversation.js"></script>
+
+<style lang="scss">
+  .conversation-heading {
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+  }
+</style>

src/components/nav_panel/nav_panel.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="nav-panel">
-    <div class="panel panel-default base02-background">
+    <div class="panel panel-default base01-background">
       <ul class="base03-border">
         <li v-if='currentUser'>
-          <router-link class="base01-background" to='/main/friends'>
+          <router-link class="base00-background" to='/main/friends'>
             Timeline
           </router-link>
         </li>
         <li v-if='currentUser'>
-          <router-link class="base01-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
+          <router-link class="base00-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             Mentions
           </router-link>
         </li>
         <li>
-          <router-link class="base01-background" to='/main/public'>
+          <router-link class="base00-background" to='/main/public'>
             Public Timeline
           </router-link>
         </li>
         <li>
-          <router-link class="base01-background" to='/main/all'>
+          <router-link class="base00-background" to='/main/all'>
             The Whole Known Network
           </router-link>
         </li>

src/components/notifications/notifications.scss

@@ -8,8 +8,9 @@
     position: relative;
     .read-button {
       position: absolute;
-      padding: 0.1em 0.3em 0.25em 0.3em;
       right: 0.7em;
+      height: 1.8em;
+      line-height: 100%;
     }
   }
 

src/components/settings/settings.js

@@ -1,11 +1,13 @@
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
+import { filter, trim } from 'lodash'
 
 const settings = {
   data () {
     return {
       hideAttachmentsLocal: this.$store.state.config.hideAttachments,
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
-      hideNsfwLocal: this.$store.state.config.hideNsfw
+      hideNsfwLocal: this.$store.state.config.hideNsfw,
+      muteWordsString: this.$store.state.config.muteWords.join('\n')
     }
   },
   components: {
@@ -20,6 +22,10 @@ const settings = {
     },
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
+    },
+    muteWordsString (value) {
+      value = filter(value.split('\n'), (word) => trim(word).length > 0)
+      this.$store.dispatch('setOption', { name: 'muteWords', value })
     }
   }
 }

src/components/settings/settings.vue

@@ -8,6 +8,11 @@
         <h2>Theme</h2>
         <style-switcher></style-switcher>
       </div>
+      <div class="setting-item">
+        <h2>Filtering</h2>
+        <p>All notices containing these words will be muted, one per line</p>
+        <textarea id="muteWords" v-model="muteWordsString"></textarea>
+      </div>
       <div class="setting-item">
         <h2>Attachments</h2>
         <ul class="setting-list">
@@ -32,9 +37,13 @@
 <script src="./settings.js">
 </script>
 
-<style>
+<style lang="scss">
  .setting-item {
    margin: 1em 1em 1.4em;
+   textarea {
+     width: 100%;
+     height: 100px;
+   }
  }
  .setting-list {
    list-style-type: none;

src/components/status/status.js

@@ -4,6 +4,7 @@ import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import { filter } from 'lodash'
 
 const Status = {
   props: [
@@ -19,6 +20,9 @@ const Status = {
     userExpanded: false
   }),
   computed: {
+    muteWords () {
+      return this.$store.state.config.muteWords
+    },
     hideAttachments () {
       return (this.$store.state.config.hideAttachments && !this.inConversation) ||
         (this.$store.state.config.hideAttachmentsInConv && this.inConversation)
@@ -35,7 +39,15 @@ const Status = {
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },
-    muted () { return !this.unmuted && this.status.user.muted },
+    muteWordHits () {
+      const statusText = this.status.text.toLowerCase()
+      const hits = filter(this.muteWords, (muteWord) => {
+        return statusText.includes(muteWord.toLowerCase())
+      })
+
+      return hits
+    },
+    muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) },
     isReply () { return !!this.status.in_reply_to_status_id },
     borderColor () {
       return {

src/components/status/status.vue

@@ -3,6 +3,7 @@
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
+        <small class="muteWords">{{muteWordHits.join(', ')}}</small>
         <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
       </div>
     </template>
@@ -52,10 +53,10 @@
                 <small>
                   <a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a>
                 </small>
-                <small v-if="status.user.muted">
+              </template>
+              <small v-if="unmuted">
                 <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
               </small>
-              </template>
               <small v-if="!status.is_local" class="source_url">
                 <a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a>
               </small>
@@ -162,10 +163,17 @@
      border-left: 4px rgba(255, 48, 16, 0.65);
      border-left-style: inherit;
  }
- .muted button {
+ .muted {
+   padding: 0.1em 0.7em 0.1em 0.8em;
+   button {
      margin-left: auto;
    }
 
+   .muteWords {
+     margin-left: 10px;
+   }
+ }
+
  a.unmute {
    display: block;
    margin-left: auto;

src/components/timeline/timeline.vue

@@ -43,8 +43,10 @@
     .loadmore-button {
       position: absolute;
       right: 0.6em;
-      padding: 0.1em 0.3em 0.25em 0.3em;
+
       min-width: 6em;
+      height: 1.8em;
+      line-height: 100%;
     }
     .error {
       background-color: rgba(255, 48, 16, 0.65);

src/components/user_card_content/user_card_content.vue

@@ -40,7 +40,7 @@
       <div class="user-counts">
         <div class="user-count">
           <h5>Statuses</h5>
-          <span>{{user.statuses_count}}</span>
+          <span>{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} per day</span></span>
         </div>
         <div class="user-count">
           <h5>Following</h5>
@@ -77,6 +77,11 @@
       },
       loggedIn () {
         return this.$store.state.users.currentUser
+      },
+      dailyAvg () {
+        return Math.round(
+          this.user.statuses_count / ((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
+        )
       }
     },
     methods: {
@@ -217,4 +222,9 @@
         margin: 0 0 0.25em;
     }
 }
+
+.dailyAvg {
+  font-size: 0.8em;
+  opacity: 0.5;
+}
 </style>

src/lib/persisted_state.js

@@ -3,6 +3,8 @@ import objectPath from 'object-path'
 import localforage from 'localforage'
 import { throttle, each } from 'lodash'
 
+let loaded = false
+
 const defaultReducer = (state, paths) => (
   paths.length === 0 ? state : paths.reduce((substate, path) => {
     objectPath.set(substate, path, objectPath.get(state, path))
@@ -15,7 +17,11 @@ const defaultStorage = (() => {
 })()
 
 const defaultSetState = (key, state, storage) => {
+  if (!loaded) {
+    console.log('waiting for old state to be loaded...')
+  } else {
     return storage.setItem(key, state)
+  }
 }
 
 export default function createPersistedState ({
@@ -32,6 +38,7 @@ export default function createPersistedState ({
 } = {}) {
   return store => {
     getState(key, storage).then((savedState) => {
+      try {
         if (typeof savedState === 'object') {
           // build user cache
           const usersState = savedState.users || {}
@@ -44,6 +51,11 @@ export default function createPersistedState ({
             merge({}, store.state, savedState)
           )
         }
+        loaded = true
+      } catch (e) {
+        console.log("Couldn't load state")
+        loaded = true
+      }
     })
 
     subscriber(store)((mutation, state) => {

src/main.js

@@ -33,6 +33,7 @@ const persistedStateOptions = {
     'config.hideAttachments',
     'config.hideAttachmentsInConv',
     'config.hideNsfw',
+    'config.muteWords',
     'statuses.notifications',
     'users.users'
   ]

src/modules/config.js

@@ -6,7 +6,8 @@ const defaultState = {
   colors: {},
   hideAttachments: false,
   hideAttachmentsInConv: false,
-  hideNsfw: true
+  hideNsfw: true,
+  muteWords: []
 }
 
 const config = {