From a1f6ef1dcac2e79c5a116705ca11d6e7e51ed89c Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 11 Apr 2018 19:34:40 +0300
Subject: [PATCH] Loads of fixes: notifs, autoload setting, overflow, faint
 text, reply form, status fadein.

---
 src/App.scss                                  |  6 +++---
 src/components/conversation/conversation.vue  | 11 +++++++++-
 src/components/nav_panel/nav_panel.vue        |  3 +++
 .../notifications/notifications.scss          | 16 +++-----------
 .../notifications/notifications.vue           |  2 +-
 .../post_status_form/post_status_form.vue     |  2 +-
 src/components/settings/settings.vue          |  2 +-
 src/components/status/status.vue              | 21 ++++++++++++-------
 src/components/timeline/timeline.js           |  2 +-
 src/components/timeline/timeline.vue          | 12 ++++++-----
 src/modules/statuses.js                       |  2 +-
 src/services/style_setter/style_setter.js     | 12 +++++------
 12 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 61acc4ce..e3fba48a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -46,8 +46,8 @@ a {
 
 button{
   user-select: none;
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
+  color: $fallback--fg;
+  color: var(--fg, $fallback--fg);
   background-color: $fallback--btn;
   background-color: var(--btn, $fallback--btn);
   border: none;
@@ -253,7 +253,7 @@ main-router {
   border-radius: $fallback--panelRadius;
   border-radius: var(--panelRadius, $fallback--panelRadius);
   box-shadow: 1px 1px 4px rgba(0,0,0,.6);
-  overflow: hidden;
+  //overflow: hidden;
 }
 
 .panel-body:empty::before {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 4000bce2..308e5e7d 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -8,7 +8,16 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :inlineExpanded="collapsable" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
+        <status
+          v-for="status in conversation"
+          @goto="setHighlight" :key="status.id"
+          :inlineExpanded="collapsable" :statusoid="status"
+          :expandable='false' :focused="focused(status.id)"
+          :inConversation='true'
+          :highlight="highlight"
+          :replies="getReplies(status.id)"
+          class="status-fadein">
+        </status>
       </div>
     </div>
   </div>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 5db3f555..6f949afb 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -32,6 +32,9 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+.nav-panel .panel {
+  overflow: hidden;
+}
 .nav-panel ul {
   list-style: none;
   margin: 0;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 65ab7f5e..651be058 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -20,8 +20,8 @@
     position: relative;
     background: $fallback--btn;
     background: var(--btn, $fallback--btn);
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
+    color: $fallback--fg;
+    color: var(--fg, $fallback--fg);
     .read-button {
       position: absolute;
       right: 0.7em;
@@ -105,7 +105,7 @@
         color: var($fallback--faint, --faint);
       }
       padding: 0;
-      .status-content.media-body {
+      .media-body {
         margin: 0;
       }
     }
@@ -200,13 +200,3 @@
     border-bottom: none;
   }
 }
-
-.notification-content {
-  max-height: 12em;
-  overflow-y: hidden;
-  //text-overflow: ellipsis;
-
-  img {
-      object-fit: contain;
-  }
-}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index f01234d3..4fa6e925 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -7,7 +7,7 @@
         <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
       </div>
       <div class="panel-body">
-        <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
+        <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
           <notification :notification="notification"></notification>
         </div>
       </div>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index a3b8acde..69234d66 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -24,7 +24,7 @@
         <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
 
         <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
-        <p v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
+        <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
 
         <button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button>
         <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 0c9ddc3e..b4514ba1 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -29,7 +29,7 @@
                 <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
             </li>
             <li>
-                <input type="checkbox" id="autoload" v-model="autoloadlocal">
+                <input type="checkbox" id="autoload" v-model="autoLoadLocal">
                 <label for="autoload">{{$t('settings.autoload')}}</label>
             </li>
             <li>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 885083c4..6571159c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el status-fadein" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+  <div class="status-el" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
     <template v-if="muted && !noReplyLinks">
       <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>
@@ -33,7 +33,7 @@
                 <h4 class="user-name">{{status.user.name}}</h4>
                 <span class="links">
                   <router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link>
-                  <span v-if="status.in_reply_to_screen_name"> &gt;
+                  <span v-if="status.in_reply_to_screen_name" class="faint"> &gt;
                     <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
                       {{status.in_reply_to_screen_name}}
                     </router-link>
@@ -167,6 +167,9 @@
   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(--lightBg, $fallback--lightBg);
@@ -307,7 +310,7 @@
 }
 
 .status-fadein {
-  animation-duration: 0.3s;
+  animation-duration: 0.4s;
   animation-name: fadein;
 }
 
@@ -389,9 +392,6 @@
 .status {
   display: flex;
   padding: 0.6em;
-  border-left: 4px $fallback--cRed;
-  border-left: 4px var(--cRed, $fallback--cRed);
-  border-left-style: inherit;
 }
 
 .status-conversation:last-child {
@@ -399,7 +399,7 @@
 }
 
 .timeline .panel.timeline {
-  overflow: hidden;
+  //overflow: hidden;
 }
 
 .muted {
@@ -427,6 +427,13 @@ a.unmute {
   flex: 1;
 }
 
+.timeline > {
+  .status-el:last-child {
+    border-bottom-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;;
+    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+  }
+}
+
 @media all and (max-width: 960px) {
   .status-el {
     .retweet-info {
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 660a8752..74ab85d3 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -105,7 +105,7 @@ const Timeline = {
         .then((friends) => this.$store.dispatch('addFriends', { friends }))
     },
     scrollLoad (e) {
-      let height = Math.max(document.body.offsetHeight, document.body.scrollHeight)
+      const height = Math.max(document.body.offsetHeight, document.body.scrollHeight)
       if (this.timeline.loading === false &&
           this.$store.state.config.autoLoad &&
           this.$el.offsetHeight > 0 &&
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 4d2230cb..03f6ad3d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -16,13 +16,15 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
-        <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
-          <div class="new-status-notification text-center">{{$t('timeline.load_older')}}</div>
-        </a>
-          <div class="new-status-notification text-center" v-else>...</div>
+        <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation>
       </div>
     </div>
+    <div class="panel-footer">
+      <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
+        <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
+      </a>
+      <div class="new-status-notification text-center panel-footer" v-else>...</div>
+    </div>
   </div>
   <div class="timeline panel panel-default" v-else-if="viewing == 'followers'">
     <div class="panel-heading timeline-heading">
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 18191424..8bc0631e 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -246,7 +246,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   const addNotification = ({type, status, action}) => {
     // Only add a new notification if we don't have one for the same action
     if (!find(state.notifications, (oldNotification) => oldNotification.action.id === action.id)) {
-      state.notifications.push({type, status, action, seen: false})
+      state.notifications.push({ type, status, action, seen: false })
 
       if ('Notification' in window && window.Notification.permission === 'granted') {
         const title = action.user.name
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 532af1ba..b1d17270 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -66,17 +66,16 @@ const setColors = (col, commit) => {
   let colors = {}
   let radii = {}
 
-  let mod = 10
-  if (isDark) {
-    mod = mod * -1
-  }
-  console.log(JSON.stringify(col, null, ' '))
+  const mod = isDark ? -10 : 10
 
   colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b)                         // background
   colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
   colors.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b)                         // panels & buttons
   colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod)       // borders
-  colors.faint = rgb2hex(col.text.r + mod * 2, col.text.g + mod * 2, col.text.b + mod * 2) // faint text
+  colors.faint = rgb2hex(
+    col.text.r * 0.45 + col.fg.r * 0.55,
+    col.text.g * 0.45 + col.fg.g * 0.55,
+    col.text.b * 0.45 + col.fg.b * 0.55) // faint text
   colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b)                   // text
   colors.lightFg = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
 
@@ -92,7 +91,6 @@ const setColors = (col, commit) => {
 
   colors.cAlertRed = col.cRed && `rgba(${col.cRed.r}, ${col.cRed.g}, ${col.cRed.b}, .5)`
 
-  console.log('OMGGGG')
   console.log(JSON.stringify(col))
   radii.btnRadius = col.btnRadius
   radii.panelRadius = col.panelRadius