From 96804d42f0f6aa6af85295933af6fd267b19e473 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 7 Oct 2018 19:59:22 +0300
Subject: Some themeing is working!!

---
 src/components/status/status.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index eb521280..57a007d9 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -284,8 +284,8 @@
       margin-left: 0.2em;
     }
     a:hover i {
-      color: $fallback--fg;
-      color: var(--fg, $fallback--fg);
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


From 621ab806e63e42e0495fa174fd64f8eaeeb46b91 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Nov 2018 21:23:07 +0300
Subject: more default shadows, replaced original shadows with generated ones.
 maybe gotta update fallbacks...

---
 src/App.scss                                       | 17 +++--
 src/components/status/status.vue                   |  1 +
 .../user_card_content/user_card_content.vue        |  1 +
 src/i18n/en.json                                   | 13 ++--
 src/services/style_setter/style_setter.js          | 76 ++++++++++++++++++++++
 5 files changed, 98 insertions(+), 10 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/App.scss b/src/App.scss
index 30020722..a41140ef 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -58,9 +58,10 @@ button {
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  /* border-top: 1px solid rgba(255, 255, 255, 0.2); */
+  /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
   box-shadow: 0px 0px 2px black;
+  box-shadow: var(--buttonShadow);
   font-size: 14px;
   font-family: sans-serif;
 
@@ -75,11 +76,12 @@ button {
 
   &:hover {
     box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
+    box-shadow: var(--buttonHoverShadow);
   }
 
   &:active {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-    border-top: 1px solid rgba(0, 0, 0, 0.2);
+    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
+    /* border-top: 1px solid rgba(0, 0, 0, 0.2); */
   }
 
   &:disabled {
@@ -104,9 +106,10 @@ input, textarea, .select {
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
+  /* border-top: 1px solid rgba(0, 0, 0, 0.2); */
   box-shadow: 0px 0px 2px black inset;
+  box-shadow: var(--inputShadow);
   background-color: $fallback--fg;
   background-color: var(--input, $fallback--fg);
   color: $fallback--lightText;
@@ -184,6 +187,7 @@ input, textarea, .select {
       border-bottom: 1px solid rgba(255, 255, 255, 0.2);
       border-top: 1px solid rgba(0, 0, 0, 0.2);
       box-shadow: 0px 0px 2px black inset;
+      box-shadow: var(--inputShadow);
       margin-right: .5em;
       background-color: $fallback--fg;
       background-color: var(--input, $fallback--fg);
@@ -365,6 +369,7 @@ main-router {
   background-color: $fallback--fg;
   background-color: var(--panel, $fallback--fg);
   align-items: baseline;
+  box-shadow: var(--panelHeaderShadow);
 
   .title {
     flex: 1 0 auto;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 57a007d9..c4a268d0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -146,6 +146,7 @@
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popupShadow);
   margin-top: 0.25em;
   margin-left: 0.5em;
   z-index: 50;
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index f1b54fad..a2bb99a1 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -155,6 +155,7 @@
       width: 56px;
       height: 56px;
       box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
+      box-shadow: var(--avatarShadow);
       object-fit: cover;
 
       &.animated::before {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 18b47ba7..3fcc6da2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -212,11 +212,16 @@
         "inset": "Inset",
         "components": {
           "panel": "Panel",
+          "panelHeader": "Panel header",
+          "topBar": "Top bar",
+          "avatar": "User avatar (in post display)",
+          "avatarStatus": "User avatar (in profile view)",
+          "popup": "Popups and tooltips",
           "button": "Button",
-          "button_hover": "Button (hover)",
-          "button_pressed": "Button (pressed)",
-          "button_pressed_hover": "Button (pressed+hover)",
-          "input_box": "Input field"
+          "buttonHover": "Button (hover)",
+          "buttonPressed": "Button (pressed)",
+          "buttonPressedHover": "Button (pressed+hover)",
+          "input": "Input field"
         }
       }
     }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 57bd2841..8142da8b 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -258,6 +258,40 @@ const generateRadii = (input) => {
 }
 
 const generateShadows = (input) => {
+  const buttonInsetFakeBorders = [{
+    x: 0,
+    y: 101,
+    blur: 0,
+    spread: -100,
+    color: '#FFFFFF',
+    alpha: 0.2,
+    inset: true
+  }, {
+    x: 0,
+    y: -101,
+    blur: 0,
+    spread: -100,
+    color: '#000000',
+    alpha: 0.2,
+    inset: true
+  }]
+  const inputInsetFakeBorders = [{
+    x: 0,
+    y: 101,
+    blur: 0,
+    spread: -100,
+    color: '#000000',
+    alpha: 0.2,
+    inset: true
+  }, {
+    x: 0,
+    y: -101,
+    blur: 0,
+    spread: -100,
+    color: '#FFFFFF',
+    alpha: 0.3,
+    inset: true
+  }]
   const shadows = {
     panel: [{
       x: 1,
@@ -267,6 +301,48 @@ const generateShadows = (input) => {
       color: '#000000',
       alpha: 0.6
     }],
+    popup: [{
+      x: 2,
+      y: 2,
+      blur: 3,
+      spread: 0,
+      color: '#000000',
+      alpha: 0.5
+    }],
+    avatar: [{
+      x: 0,
+      y: 1,
+      blur: 8,
+      spread: 0,
+      color: '#000000',
+      alpha: 0.7
+    }],
+    panelHeader: [],
+    button: [{
+      x: 0,
+      y: 0,
+      blur: 2,
+      spread: 0,
+      color: '#000000',
+      alpha: 1
+    }, ...buttonInsetFakeBorders],
+    buttonHover: [{
+      x: 0,
+      y: 0,
+      blur: 4,
+      spread: 0,
+      color: '--faint',
+      alpha: 1
+    }, ...buttonInsetFakeBorders],
+    input: [{
+      x: 0,
+      y: 0,
+      blur: 2,
+      inset: true,
+      spread: 0,
+      color: '#000000',
+      alpha: 1
+    }, ...inputInsetFakeBorders],
     ...(input.shadows || {})
   }
 
-- 
cgit v1.2.3-70-g09d2


From 2f1070deb63af7f351fb3e33e44394160c689be4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Nov 2018 17:42:41 +0300
Subject: collateral fixes

---
 src/components/status/status.vue                       |  1 +
 src/components/user_card_content/user_card_content.vue | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c4a268d0..710f2027 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -533,6 +533,7 @@ a.unmute {
   .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);
+    border-bottom: none;
   }
 }
 
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 22f77ffc..9830f283 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -120,6 +120,7 @@
   background-size: cover;
   border-radius: $fallback--panelRadius;
   border-radius: var(--panelRadius, $fallback--panelRadius);
+  overflow: hidden;
 
   .panel-heading {
     padding: 0.6em 0em;
@@ -147,7 +148,6 @@
     padding: 16px 10px 6px 10px;
     display: flex;
     max-height: 56px;
-    overflow: hidden;
 
     .avatar {
       border-radius: $fallback--avatarRadius;
@@ -187,6 +187,16 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1 1 0;
+    // This is so that text doesn't get overlapped by avatar's shadow if it has
+    // big one
+    z-index: 1;
+
+    img {
+      width: 26px;
+      height: 26px;
+      vertical-align: middle;
+      object-fit: contain
+    }
   }
 
   .user-name{
-- 
cgit v1.2.3-70-g09d2


From 707441ffe684f662a9b99c261d61fe2da5b5140f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Nov 2018 22:06:49 +0300
Subject: more fonts

---
 src/components/status/status.vue | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 710f2027..7d4ecbc7 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -324,6 +324,8 @@
 
   .status-content {
     margin-right: 0.5em;
+    font-family: var(--postFont, sans-serif);
+
     img, video {
       max-width: 100%;
       max-height: 400px;
@@ -338,6 +340,7 @@
 
     pre {
       overflow: auto;
+      font-family: var(--postCodeFont, sans-serif);
     }
 
     p {
-- 
cgit v1.2.3-70-g09d2


From d7eec4c30d93b8a87fa912543889bd106398042d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 26 Nov 2018 00:23:07 +0300
Subject: more styles

---
 src/components/status/status.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 7d4ecbc7..8682d996 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -340,7 +340,10 @@
 
     pre {
       overflow: auto;
-      font-family: var(--postCodeFont, sans-serif);
+    }
+
+    code, samp, kbd, var, pre {
+      font-family: var(--postCodeFont, monospace);
     }
 
     p {
-- 
cgit v1.2.3-70-g09d2


From 9a9dc47fc573af28429a641bf5408ead1c0d33ec Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 26 Nov 2018 03:19:04 +0300
Subject: better preview, collateral fixes

---
 src/App.scss                                      | 27 ++++++++++
 src/components/notifications/notifications.scss   | 17 -------
 src/components/notifications/notifications.vue    |  2 +-
 src/components/status/status.vue                  |  1 +
 src/components/style_switcher/style_switcher.scss | 25 +++++++++-
 src/components/style_switcher/style_switcher.vue  | 61 +++++++++++++++++++++--
 src/components/timeline/timeline.vue              |  5 +-
 src/i18n/en.json                                  | 13 +++++
 8 files changed, 123 insertions(+), 28 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/App.scss b/src/App.scss
index 50645ec8..8c9df0ba 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -381,6 +381,12 @@ main-router {
     font-size: 1.3em;
   }
 
+  .faint {
+    background-color: transparent;
+    color: $fallback--faint;
+    color: var(--panelFaint, $fallback--faint);
+  }
+
   .alert {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -509,6 +515,27 @@ nav {
     flex-grow: 0;
   }
 }
+.badge {
+  display: inline-block;
+  border-radius: 99px;
+  min-width: 22px;
+  max-width: 22px;
+  min-height: 22px;
+  max-height: 22px;
+  font-size: 15px;
+  line-height: 22px;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  padding: 0;
+
+  &.badge-notification {
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+    color: white;
+    color: var(--badgeNotificationText, white);
+  }
+}
 
 .alert {
   margin: 0.35em;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 3f22b690..87c89f6a 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -4,23 +4,6 @@
   // a bit of a hack to allow scrolling below notifications
   padding-bottom: 15em;
 
-  .unseen-count {
-    display: inline-block;
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-    border-radius: 99px;
-    min-width: 22px;
-    max-width: 22px;
-    min-height: 22px;
-    max-height: 22px;
-    color: white;
-    color: var(--badgeNotificationText, white);
-    font-size: 15px;
-    line-height: 22px;
-    text-align: center;
-    vertical-align: middle
-  }
-
   .loadmore-error {
     color: $fallback--text;
     color: var(--text, $fallback--text);
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index eb6c4dd0..64f18720 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,7 +4,7 @@
       <div class="panel-heading">
         <div class="title">
           {{$t('notifications.notifications')}}
-          <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
+          <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span>
         </div>
         <div @click.prevent class="loadmore-error alert error" v-if="error">
           {{$t('timeline.error_fetching')}}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8682d996..0edc7b71 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -471,6 +471,7 @@
 .avatar {
   width: 48px;
   height: 48px;
+  box-shadow: var(--avatarStatusShadow);
   border-radius: $fallback--avatarRadius;
   border-radius: var(--avatarRadius, $fallback--avatarRadius);
   overflow: hidden;
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 9c4f4ecd..2c33224b 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -163,11 +163,32 @@
     background-size: cover;
     background-position: 50% 50%;
 
+    .separator {
+      margin: 1em;
+      border-bottom: 1px solid;
+      border-color: $fallback--border;
+      border-color: var(--border, $fallback--border);
+    }
+
+    .panel-heading {
+      .badge, .alert, .btn, .faint {
+        margin-left: 1em;
+      }
+      .flex-spacer {
+        flex: 1;
+      }
+    }
+    .checkbox {
+      display: inline-flex;
+      align-items: baseline;
+      margin-right: 1em;
+    }
+
     .btn {
       margin-left: 0;
-      margin-top: 1em;
+      padding: 0 1em;
+      min-width: 3em;
       min-height: 30px;
-      width: 10em;
     }
   }
 
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index a444c6a7..2a7756ed 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -46,27 +46,80 @@
           v-model="keepRoundness">
         <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
       </span>
+      <span>
+        <input
+          id="keep-fonts"
+          type="checkbox"
+          v-model="keepFonts">
+        <label for="keep-fonts">{{$t('settings.style.switcher.keep_fonts')}}</label>
+      </span>
       <p>{{$t('settings.style.switcher.save_load_hint')}}</p>
     </div>
   </div>
 
   <div class="preview-container">
     <div class="panel dummy" :style="previewRules">
-      <div class="panel-heading">Preview</div>
+      <div class="panel-heading">
+        {{$t('settings.style.preview.header')}}
+        <span class="badge badge-notification">
+          99
+        </span>
+        <span class="alert error">
+          {{$t('settings.style.preview.error')}}
+        </span>
+        <button class="btn">
+          {{$t('settings.style.preview.button')}}
+        </button>
+        <span class="flex-spacer"/>
+        <span class="faint">
+          {{$t('settings.style.preview.header_faint')}}
+        </span>
+      </div>
       <div class="panel-body theme-preview-content">
         <div class="avatar">
           ( ͡° ͜ʖ ͡°)
         </div>
         <h4>Content</h4>
+
         <br>
-        A bunch of more content and
-        <a style="color: var(--link)">a nice lil' link</a>
+
+        <i18n path="settings.style.preview.text">
+          <a style="color: var(--link)">
+            {{$t('settings.style.preview.link')}}
+          </a>
+        </i18n>
+
         <i style="color: var(--cBlue)" class="icon-reply"/>
         <i style="color: var(--cGreen)" class="icon-retweet"/>
         <i style="color: var(--cRed)" class="icon-cancel"/>
         <i style="color: var(--cOrange)" class="icon-star"/>
+
         <br>
-        <button class="btn">Button</button>
+        <br>
+
+        <input :value="$t('settings.style.preview.error')" type="text">
+        <span class="alert error">
+          {{$t('settings.style.preview.error')}}
+        </span>
+
+        <br>
+        <br>
+
+        <span class="checkbox">
+          <input checked="very yes" type="checkbox" id="preview_checkbox">
+          <label for="preview_checkbox">{{$t('settings.style.preview.checkbox')}}</label>
+        </span>
+        <button class="btn">
+          {{$t('settings.style.preview.button')}}
+        </button>
+
+        <div class="separator"></div>
+
+        <i18n path="settings.style.preview.fine_print" tag="span" class="faint">
+          <a style="color: var(--faintLink)">
+            {{$t('settings.style.preview.faint_link')}}
+          </a>
+        </i18n>
       </div>
     </div>
   </div>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 39f1b5bc..b69a09fd 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -58,10 +58,7 @@
 
 .timeline {
   .loadmore-text {
-    opacity: 0.8;
-    background-color: transparent;
-    color: $fallback--faint;
-    color: var(--panelFaint, $fallback--faint);
+    opacity: 1;
   }
 }
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c70c488c..0530b66d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -170,6 +170,7 @@
         "keep_shadows": "Keep shadows",
         "keep_opacity": "Keep opacity",
         "keep_roundness": "Keep roundness",
+        "keep_fonts": "Keep fonts",
         "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme.",
         "reset": "Reset",
         "clear_all": "Clear all",
@@ -250,6 +251,18 @@
         "size": "Size (in px)",
         "weight": "Weight (boldness)",
         "custom": "Custom"
+      },
+      "preview": {
+        "header": "Preview of header",
+        "error": "Example error",
+        "button": "Button",
+        "text": "A bunch of more content and {0}",
+        "input": "Just landed in L.A.",
+        "faint_link": "helpful manual",
+        "fine_print": "Read our {0} to learn nothing useful!",
+        "header_faint": "This is fine",
+        "checkbox": "I have skimmed over terms and conditions",
+        "link": "a nice lil' link"
       }
     }
   },
-- 
cgit v1.2.3-70-g09d2


From 406df4399b630268c1028664f3b818571d6f8e4f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 30 Nov 2018 16:39:07 +0300
Subject: avatars shadows, also allows drop-shadow use

---
 src/components/notification/notification.js        |  3 ++-
 src/components/notification/notification.vue       |  2 +-
 src/components/notifications/notifications.scss    |  6 +++++
 src/components/status/status.js                    |  3 ++-
 src/components/status/status.vue                   | 13 +++++++++-
 src/components/style_switcher/style_switcher.vue   | 12 ++++++++++
 .../user_card_content/user_card_content.js         |  3 ++-
 .../user_card_content/user_card_content.vue        |  7 +++++-
 src/i18n/en.json                                   |  7 ++++++
 src/modules/interface.js                           |  6 +++++
 src/services/style_setter/style_setter.js          | 28 ++++++++++++++++++++--
 11 files changed, 82 insertions(+), 8 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index c786f2cc..4dea63bb 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -6,7 +6,8 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/
 const Notification = {
   data () {
     return {
-      userExpanded: false
+      userExpanded: false,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   props: [
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 72c1ca69..f98afbe0 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -2,7 +2,7 @@
   <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
   <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else>
     <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
-      <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
+      <StillImage class='avatar-compact' :class="{'better-shadow': betterShadow}" :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
       <div class="usercard notification-usercard" v-if="userExpanded">
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 87c89f6a..d17ae25d 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -49,11 +49,17 @@
   .avatar-compact {
     width: 32px;
     height: 32px;
+    box-shadow: var(--avatarStatusShadow);
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
     overflow: hidden;
     line-height: 0;
 
+    &.better-shadow {
+      box-shadow: none;
+      filter: drop-shadow(var(--avatarStatusShadowFilter))
+    }
+
     &.animated::before {
       display: none;
     }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 10716583..725bc3f8 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -33,7 +33,8 @@ const Status = {
       showingTall: false,
       expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
         ? !this.$store.state.instance.collapseMessageWithSubject
-        : !this.$store.state.config.collapseMessageWithSubject
+        : !this.$store.state.config.collapseMessageWithSubject,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   computed: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 4541c560..26be335c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -21,7 +21,7 @@
       <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
         <div v-if="!noHeading" class="media-left">
           <a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
-            <StillImage class='avatar' :class="{'avatar-compact': compact}"  :src="status.user.profile_image_url_original"/>
+            <StillImage class='avatar' :class="{'avatar-compact': compact, 'better-shadow': betterShadow}"  :src="status.user.profile_image_url_original"/>
           </a>
         </div>
         <div class="status-body">
@@ -464,8 +464,14 @@
 .status .avatar-compact {
   width: 32px;
   height: 32px;
+  box-shadow: var(--avatarStatusShadow);
   border-radius: $fallback--avatarAltRadius;
   border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+
+  &.better-shadow {
+    box-shadow: none;
+    filter: drop-shadow(var(--avatarStatusShadowFilter))
+  }
 }
 
 .avatar {
@@ -477,6 +483,11 @@
   overflow: hidden;
   position: relative;
 
+  &.better-shadow {
+    box-shadow: none;
+    filter: drop-shadow(var(--avatarStatusShadowFilter))
+  }
+
   img {
     width: 100%;
     height: 100%;
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index fa173b98..66fe0f6b 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -278,6 +278,18 @@
           <button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button>
         </div>
         <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
+        <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
+          <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
+            <code>filter: drop-shadow()</code>
+          </i18n>
+          <i18n path="settings.style.shadows.filter_hint.text" tag="p">
+            <code>drop-shadow</code>
+            <code>spread-radius</code>
+            <code>inset</code>
+          </i18n>
+          <p>{{$t('settings.style.shadows.filter_hint.inset_ignored')}}</p>
+          <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
+        </div>
       </div>
       <div :label="$t('settings.style.fonts._tab_label')" class="fonts-container">
         <div class="tab-header">
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 254d1666..97cd4983 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -7,7 +7,8 @@ export default {
     return {
       hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
         ? this.$store.state.instance.hideUserStats
-        : this.$store.state.config.hideUserStats
+        : this.$store.state.config.hideUserStats,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   computed: {
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 5529948e..cca418ff 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -10,7 +10,7 @@
       </a>
       <div class='container'>
         <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
-          <StillImage class="avatar" :src="user.profile_image_url_original"/>
+          <StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/>
         </router-link>
         <div class="name-and-screen-name">
           <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
@@ -159,6 +159,11 @@
       box-shadow: var(--avatarShadow);
       object-fit: cover;
 
+      &.better-shadow {
+        box-shadow: none;
+        filter: drop-shadow(var(--avatarStatusShadowFilter))
+      }
+
       &.animated::before {
         display: none;
       }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8847b11e..7f5a2a4f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -236,6 +236,13 @@
         "spread": "Spread",
         "inset": "Inset",
         "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.",
+        "filter_hint": {
+          "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
+          "text": "Please note that {0} does not support {1} parameter and {2} keyword.",
+          "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
+          "inset_ignored": "Inset shadows using will be ignored",
+          "inset_substituted": "Inset shadows will be substituted with {1} equivalent"
+        },
         "components": {
           "panel": "Panel",
           "panelHeader": "Panel header",
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 07489685..132fb08d 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -4,6 +4,12 @@ const defaultState = {
   settings: {
     currentSaveStateNotice: null,
     noticeClearTimeout: null
+  },
+  browserSupport: {
+    cssFilter: window.CSS && window.CSS.supports && (
+      window.CSS.supports('filter', 'drop-shadow(0 0)') ||
+        window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
+    )
   }
 }
 
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 7c375206..cff81c40 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -110,6 +110,24 @@ const getCssShadow = (input) => {
   ]).join(' ')).join(', ')
 }
 
+const getCssShadowFilter = (input) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+  // drop-shadow doesn't support inset or spread
+    .filter((shad) => console.log(shad) || !shad.inset && Number(shad.spread) === 0)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      // drop-shadow's blur is twice as strong compared to box-shadow
+      shad.blur / 2
+    ].map(_ => _ + 'px').concat([
+      getCssColor(shad.color, shad.alpha)
+    ]).join(' ')).join(', ')
+}
+
 const getCssColor = (input, a) => {
   let rgb = {}
   if (typeof input === 'object') {
@@ -384,7 +402,12 @@ const generateShadows = (input) => {
 
   return {
     rules: {
-      shadows: Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';')
+      shadows: Object
+        .entries(shadows)
+      // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally
+      // convert all non-inset shadows into filter: drop-shadow() to boost performance
+        .map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}; --${k}ShadowFilter: ${getCssShadowFilter(v)}`)
+        .join(';')
     },
     theme: {
       shadows
@@ -467,5 +490,6 @@ export {
   generateFonts,
   generatePreset,
   composePreset,
-  getCssShadow
+  getCssShadow,
+  getCssShadowFilter
 }
-- 
cgit v1.2.3-70-g09d2


From 77ac42d9190934c8e4f1fa7dfef087c58ccd3990 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 1 Dec 2018 14:47:42 +0300
Subject: fix retweeter avatar not getting proper shadow

---
 src/components/status/status.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 26be335c..6597d56b 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -9,7 +9,7 @@
     </template>
     <template v-else>
       <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
-        <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
+        <StillImage v-if="retweet" class='avatar' :class='{ "better-shadow": betterShadow }' :src="statusoid.user.profile_image_url_original"/>
         <div class="media-body faint">
           <a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
           <a v-else :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
-- 
cgit v1.2.3-70-g09d2


From bee738c815f287c4605eafd52c5565cdb07d5721 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 2 Dec 2018 08:47:55 +0300
Subject: making inset shadows work on avatars again

---
 src/components/notifications/notifications.scss    |  4 +--
 src/components/status/status.vue                   |  8 +++---
 src/components/style_switcher/style_switcher.vue   |  7 +++--
 .../user_card_content/user_card_content.vue        |  4 +--
 src/i18n/en.json                                   |  6 ++--
 src/services/style_setter/style_setter.js          | 32 ++++++++++++++--------
 6 files changed, 36 insertions(+), 25 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index d17ae25d..a6468e01 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -56,8 +56,8 @@
     line-height: 0;
 
     &.better-shadow {
-      box-shadow: none;
-      filter: drop-shadow(var(--avatarStatusShadowFilter))
+      box-shadow: var(--avatarStatusShadowInset);
+      filter: var(--avatarStatusShadowFilter)
     }
 
     &.animated::before {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 6597d56b..428383e3 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -469,8 +469,8 @@
   border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
 
   &.better-shadow {
-    box-shadow: none;
-    filter: drop-shadow(var(--avatarStatusShadowFilter))
+    box-shadow: var(--avatarStatusShadowInset);
+    filter: var(--avatarStatusShadowFilter)
   }
 }
 
@@ -484,8 +484,8 @@
   position: relative;
 
   &.better-shadow {
-    box-shadow: none;
-    filter: drop-shadow(var(--avatarStatusShadowFilter))
+    box-shadow: var(--avatarStatusShadowInset);
+    filter: var(--avatarStatusShadowFilter)
   }
 
   img {
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 66fe0f6b..c0a7da69 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -282,12 +282,15 @@
           <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
             <code>filter: drop-shadow()</code>
           </i18n>
-          <i18n path="settings.style.shadows.filter_hint.text" tag="p">
+          <p>{{$t('settings.style.shadows.filter_hint.avatar_inset')}}</p>
+          <i18n path="settings.style.shadows.filter_hint.drop_shadow_syntax" tag="p">
             <code>drop-shadow</code>
             <code>spread-radius</code>
             <code>inset</code>
           </i18n>
-          <p>{{$t('settings.style.shadows.filter_hint.inset_ignored')}}</p>
+          <i18n path="settings.style.shadows.filter_hint.inset_classic" tag="p">
+            <code>box-shadow</code>
+          </i18n>
           <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
         </div>
       </div>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index cca418ff..e8b0ebf9 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -160,8 +160,8 @@
       object-fit: cover;
 
       &.better-shadow {
-        box-shadow: none;
-        filter: drop-shadow(var(--avatarStatusShadowFilter))
+        box-shadow: var(--avatarShadowInset);
+        filter: var(--avatarShadowFilter)
       }
 
       &.animated::before {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 7f5a2a4f..39da04d8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -238,10 +238,10 @@
         "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.",
         "filter_hint": {
           "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
-          "text": "Please note that {0} does not support {1} parameter and {2} keyword.",
+          "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
+          "avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
           "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
-          "inset_ignored": "Inset shadows using will be ignored",
-          "inset_substituted": "Inset shadows will be substituted with {1} equivalent"
+          "inset_classic": "Inset shadows will be using {0}"
         },
         "components": {
           "panel": "Panel",
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index cff81c40..44a36c88 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -94,20 +94,22 @@ const setColors = (input, commit) => {
   commit('setOption', { name: 'colors', value: theme.colors })
 }
 
-const getCssShadow = (input) => {
+const getCssShadow = (input, usesDropShadow) => {
   if (input.length === 0) {
     return 'none'
   }
 
-  return input.map((shad) => [
-    shad.x,
-    shad.y,
-    shad.blur,
-    shad.spread
-  ].map(_ => _ + 'px').concat([
-    getCssColor(shad.color, shad.alpha),
-    shad.inset ? 'inset' : ''
-  ]).join(' ')).join(', ')
+  return input
+    .filter(_ => usesDropShadow ? _.inset : _)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      shad.blur,
+      shad.spread
+    ].map(_ => _ + 'px').concat([
+      getCssColor(shad.color, shad.alpha),
+      shad.inset ? 'inset' : ''
+    ]).join(' ')).join(', ')
 }
 
 const getCssShadowFilter = (input) => {
@@ -125,7 +127,9 @@ const getCssShadowFilter = (input) => {
       shad.blur / 2
     ].map(_ => _ + 'px').concat([
       getCssColor(shad.color, shad.alpha)
-    ]).join(' ')).join(', ')
+    ]).join(' '))
+    .map(_ => `drop-shadow(${_})`)
+    .join(' ')
 }
 
 const getCssColor = (input, a) => {
@@ -406,7 +410,11 @@ const generateShadows = (input) => {
         .entries(shadows)
       // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally
       // convert all non-inset shadows into filter: drop-shadow() to boost performance
-        .map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}; --${k}ShadowFilter: ${getCssShadowFilter(v)}`)
+        .map(([k, v]) => [
+          `--${k}Shadow: ${getCssShadow(v)}`,
+          `--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
+          `--${k}ShadowInset: ${getCssShadow(v, true)}`
+        ].join(';'))
         .join(';')
     },
     theme: {
-- 
cgit v1.2.3-70-g09d2


From da3adff5a880c04f38626b738decef49cae39e13 Mon Sep 17 00:00:00 2001
From: ValD <maghtpol@gmail.com>
Date: Wed, 5 Dec 2018 00:15:08 +0530
Subject: used the deleted data param as condition in status template

---
 src/components/status/status.js  | 3 +++
 src/components/status/status.vue | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 10716583..5390d5de 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -53,6 +53,9 @@ const Status = {
       const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
       return highlightClass(user)
     },
+    deleted() {
+      return this.statusoid.deleted
+    },
     repeaterStyle () {
       const user = this.statusoid.user
       const highlight = this.$store.state.config.highlight
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 9f65f281..137b0b0d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el" v-if="!hideReply" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+  <div class="status-el" v-if="(!hideReply) && (!deleted)" :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>
@@ -26,6 +26,7 @@
         </div>
         <div class="status-body">
           <div class="usercard media-body" v-if="userExpanded">
+
             <user-card-content :user="status.user" :switcher="false"></user-card-content>
           </div>
           <div v-if="!noHeading" class="media-body container media-heading">
-- 
cgit v1.2.3-70-g09d2


From 57366ff0cc2b1af7d168778a5e0792ebcf11c235 Mon Sep 17 00:00:00 2001
From: ValD <maghtpol@gmail.com>
Date: Wed, 5 Dec 2018 00:38:53 +0530
Subject: added PR comments

---
 src/components/status/status.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 137b0b0d..984884ff 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el" v-if="(!hideReply) && (!deleted)" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+  <div class="status-el" v-if="!hideReply && !deleted" :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>
@@ -26,7 +26,6 @@
         </div>
         <div class="status-body">
           <div class="usercard media-body" v-if="userExpanded">
-
             <user-card-content :user="status.user" :switcher="false"></user-card-content>
           </div>
           <div v-if="!noHeading" class="media-body container media-heading">
-- 
cgit v1.2.3-70-g09d2


From 1623dcb417360ce9304c84d679cc856ad1311a69 Mon Sep 17 00:00:00 2001
From: ValD <maghtpol@gmail.com>
Date: Tue, 11 Dec 2018 01:42:51 +0530
Subject: added activatePanel onclick for timeago button

---
 src/App.vue                                    | 2 +-
 src/components/notification/notification.js    | 3 ++-
 src/components/notification/notification.vue   | 4 ++--
 src/components/notifications/notifications.js  | 1 +
 src/components/notifications/notifications.vue | 2 +-
 src/components/status/status.js                | 3 ++-
 src/components/status/status.vue               | 2 +-
 7 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/App.vue b/src/App.vue
index 9d66b9d4..16cd08d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,7 @@
               <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
               <features-panel v-if="!currentUser"></features-panel>
               <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel>
-              <notifications v-if="currentUser"></notifications>
+              <notifications :activatePanel="activatePanel" v-if="currentUser"></notifications>
             </div>
           </div>
         </div>
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 4dea63bb..345fe3ee 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -11,7 +11,8 @@ const Notification = {
     }
   },
   props: [
-    'notification'
+    'notification',
+    'activatePanel'
   ],
   components: {
     Status, StillImage, UserCardContent
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index f773d9de..a9d724e3 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,5 +1,5 @@
 <template>
-  <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
+  <status :activatePanel="activatePanel" v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
   <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else>
     <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
       <StillImage class='avatar-compact' :class="{'better-shadow': betterShadow}" :src="notification.action.user.profile_image_url_original"/>
@@ -31,7 +31,7 @@
         <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
       </div>
       <template v-else>
-        <status v-if="notification.status"  class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
+        <status :activatePanel="activatePanel" v-if="notification.status"  class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
         <div class="broken-favorite" v-else>
           {{$t('notifications.broken_favorite')}}
         </div>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 945ffd1f..4b7a591d 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -4,6 +4,7 @@ import notificationsFetcher from '../../services/notifications_fetcher/notificat
 import { sortBy, filter } from 'lodash'
 
 const Notifications = {
+  props: [ 'activatePanel' ],
   created () {
     const store = this.$store
     const credentials = store.state.users.currentUser.credentials
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 64f18720..bef48567 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -14,7 +14,7 @@
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
           <div class="notification-overlay"></div>
-          <notification :notification="notification"></notification>
+          <notification :activatePanel="activatePanel" :notification="notification"></notification>
         </div>
       </div>
       <div class="panel-footer">
diff --git a/src/components/status/status.js b/src/components/status/status.js
index cb125e45..9a63d047 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -20,7 +20,8 @@ const Status = {
     'replies',
     'noReplyLinks',
     'noHeading',
-    'inlineExpanded'
+    'inlineExpanded',
+    'activatePanel'
   ],
   data () {
     return {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c28c9473..67b7cb44 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -54,7 +54,7 @@
               </h4>
             </div>
             <div class="media-heading-right">
-              <router-link class="timeago" :to="{ name: 'conversation', params: { id: status.id } }">
+              <router-link @click.native="activatePanel('timeline')" :to="{ name: 'conversation', params: { id: status.id } }">
                 <timeago :since="status.created_at" :auto-update="60"></timeago>
               </router-link>
               <div class="visibility-icon" v-if="status.visibility">
-- 
cgit v1.2.3-70-g09d2


From 7556efa04ffccaa9bbd40a2f52a43b98c7e9371d Mon Sep 17 00:00:00 2001
From: ValD <maghtpol@gmail.com>
Date: Tue, 11 Dec 2018 20:06:55 +0530
Subject: added router-links to all relavent links

---
 src/components/notification/notification.vue | 4 ++--
 src/components/status/status.vue             | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index a9d724e3..e84ce0b6 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -25,10 +25,10 @@
             <small>{{$t('notifications.followed_you')}}</small>
           </span>
         </div>
-        <small class="timeago"><router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
+        <small class="timeago"><router-link @click.native="activatePanel('timeline')" v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
       </span>
       <div class="follow-text" v-if="notification.type === 'follow'">
-        <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
+        <router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
       </div>
       <template v-else>
         <status :activatePanel="activatePanel" v-if="notification.status"  class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 67b7cb44..96709084 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -2,7 +2,7 @@
   <div class="status-el" v-if="!hideReply && !deleted" :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>
+        <small><router-link @click.native="activatePanel('timeline')" :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>
@@ -34,10 +34,10 @@
                 <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
                 <h4 class="user-name" v-else>{{status.user.name}}</h4>
                 <span class="links">
-                  <router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link>
+                  <router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link>
                   <span v-if="status.in_reply_to_screen_name" class="faint reply-info">
                     <i class="icon-right-open"></i>
-                    <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
+                    <router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
                       {{status.in_reply_to_screen_name}}
                     </router-link>
                   </span>
@@ -73,7 +73,7 @@
           </div>
 
           <div v-if="showPreview" class="status-preview-container">
-            <status class="status-preview" v-if="preview" :noReplyLinks="true" :statusoid="preview" :compact=true></status>
+            <status :activatePanel="activatePanel" class="status-preview" v-if="preview" :noReplyLinks="true" :statusoid="preview" :compact=true></status>
             <div class="status-preview status-preview-loading" v-else>
               <i class="icon-spin4 animate-spin"></i>
             </div>
-- 
cgit v1.2.3-70-g09d2


From ff36d341865b6d5251d69c77605a5edea257b4f2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 13 Dec 2018 17:20:31 +0300
Subject: fix timeago font

---
 src/components/status/status.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 96709084..067980ac 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -54,7 +54,7 @@
               </h4>
             </div>
             <div class="media-heading-right">
-              <router-link @click.native="activatePanel('timeline')" :to="{ name: 'conversation', params: { id: status.id } }">
+              <router-link class="timeago" @click.native="activatePanel('timeline')" :to="{ name: 'conversation', params: { id: status.id } }">
                 <timeago :since="status.created_at" :auto-update="60"></timeago>
               </router-link>
               <div class="visibility-icon" v-if="status.visibility">
-- 
cgit v1.2.3-70-g09d2

