logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe
commit: a1f6ef1dcac2e79c5a116705ca11d6e7e51ed89c
parent: 82ee24ec31ad89e82c6002fd0dc3593f47adfdb4
Author: shpuld <shp@cock.li>
Date:   Wed, 11 Apr 2018 19:34:40 +0300

Loads of fixes: notifs, autoload setting, overflow, faint text, reply form, status fadein.

Diffstat:

Msrc/App.scss6+++---
Msrc/components/conversation/conversation.vue11++++++++++-
Msrc/components/nav_panel/nav_panel.vue3+++
Msrc/components/notifications/notifications.scss16+++-------------
Msrc/components/notifications/notifications.vue2+-
Msrc/components/post_status_form/post_status_form.vue2+-
Msrc/components/settings/settings.vue2+-
Msrc/components/status/status.vue21++++++++++++++-------
Msrc/components/timeline/timeline.js2+-
Msrc/components/timeline/timeline.vue12+++++++-----
Msrc/modules/statuses.js2+-
Msrc/services/style_setter/style_setter.js12+++++-------
12 files changed, 50 insertions(+), 41 deletions(-)

diff --git 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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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