moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
shpuld 2018-04-11 19:34:40 +03:00
parent 82ee24ec31
commit a1f6ef1dca
12 changed files with 50 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.scss
View File

@ -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 {

11
src/components/conversation/conversation.vue
View File

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

3
src/components/nav_panel/nav_panel.vue
View File

@ -32,6 +32,9 @@
<style lang="scss">
@import '../../_variables.scss';
.nav-panel .panel {
overflow: hidden;
}
.nav-panel ul {
list-style: none;
margin: 0;

16
src/components/notifications/notifications.scss
View File

@ -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;
}
}

2
src/components/notifications/notifications.vue
View File

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

2
src/components/post_status_form/post_status_form.vue
View File

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

2
src/components/settings/settings.vue
View File

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

21
src/components/status/status.vue
View File

@ -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 {

2
src/components/timeline/timeline.js
View File

@ -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 &&

12
src/components/timeline/timeline.vue
View File

@ -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">

12
src/services/style_setter/style_setter.js
View File

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