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"> >
+ <span v-if="status.in_reply_to_screen_name" class="faint"> >
<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