Merged from develop, made 'new notices' into a 'show new' button placed on the heading element, updated headings and buttons to be more consistent with new changes (log-in, notifications/read, conversation/collapse), changed bottom 'load older' block to not disappear on click to keep screen from scrolling and changed its styling more consistent with everything else.

This commit is contained in:
shpuld 2017-03-05 19:00:35 +02:00
commit e19bfb9a22
14 changed files with 88 additions and 71 deletions

1
.gitignore vendored
View file

@ -5,3 +5,4 @@ npm-debug.log
test/unit/coverage
test/e2e/reports
selenium-debug.log
.idea/

View file

@ -27,15 +27,20 @@ before_script:
# paths:
# - node_modules/
stages:
- build
- test
- deploy
test:
stage: test
script:
- npm install -g yarn
- yarn
- npm run unit
build:
stage: build
script:
- npm install -g yarn
- yarn
- npm run build
artifacts:
@ -43,11 +48,11 @@ build:
- dist/
deploy:
stage: deploy
environment: dev
only:
- develop
script:
- npm install -g yarn
- yarn
- npm run build
- scp -r dist/* pleroma@tenshi.heldscal.la:~/pleroma

View file

@ -29,7 +29,11 @@ const Attachment = {
}
},
toggleHidden () {
this.showHidden = !this.showHidden
let img = document.createElement('img')
img.src = this.attachment.url
img.onload = () => {
this.showHidden = !this.showHidden
}
}
}
}

View file

@ -1,6 +1,6 @@
<template>
<div class="timeline panel panel-default base00-background">
<div class="panel-heading base01-background base04">
<div class="panel-heading base01-background base04" style="justify-content:space-between;">
Conversation
<div v-if="collapsable">
<small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>

View file

@ -1,10 +1,5 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading base01-background base04">Friends Timeline</div>
<div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
</div>
</div>
<Timeline :title="'Friends'" v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
</template>
<script src="./friends_timeline.js"></script>

View file

@ -1,7 +1,7 @@
<template>
<div class="login panel panel-default base00-background">
<!-- Default panel contents -->
<div class="panel-heading base01-background">
<div class="panel-heading base01-background base04">
Log in
</div>
<div class="panel-body">

View file

@ -1,10 +1,5 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading base01-background base04">Mentions</div>
<div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
</div>
</div>
<Timeline :title="'Mentions'" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
</template>
<script src="./mentions.js"></script>

View file

@ -9,16 +9,16 @@
button {
position: absolute;
padding: 0.1em 0.3em 0.25em 0.3em;
right: 0.6em;
right: 0.7em;
}
}
.unseen {
border-left: 4px solid rgba(255, 48, 16, 0.65);
}
.notification {
padding: 0.4em 0 0 0.7em;
// Will have to use pixels here to ensure consistent distance with
// pad alone and pad + border, browsers bad at rounding this with em,
// they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em,
// which does not happen with 10px vs 4px + 6px.
padding: 0.4em 0 0 10px;
display: flex;
border-bottom: 1px solid silver;
@ -62,4 +62,9 @@
border: none
}
}
.unseen {
border-left: 4px solid rgba(255, 48, 16, 0.65);
padding-left: 6px;
}
}

View file

@ -3,7 +3,7 @@
<div class="panel panel-default base00-background">
<div class="panel-heading base01-background base04">
Notifications ({{unseenCount}})
<button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button>
<button @click.prevent="markAsSeen" class="base06 base02-background">Read!</button>
</div>
<div class="panel-body">
<div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>

View file

@ -1,10 +1,5 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading base01-background base04">THE WHOLE KNOWN NETWORK</div>
<div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
</div>
</div>
<Timeline :title="'THE WHOLE KNOWN NETWORK'"v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
</template>
<script src="./public_and_external_timeline.js"></script>

View file

@ -1,10 +1,5 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading base01-background base04">Public Timeline</div>
<div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
</div>
</div>
<Timeline :title="'Public Timeline'" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
</template>
<script src="./public_timeline.js"></script>

View file

@ -5,7 +5,8 @@ import StatusOrConversation from '../status_or_conversation/status_or_conversati
const Timeline = {
props: [
'timeline',
'timelineName'
'timelineName',
'title'
],
components: {
Status,

View file

@ -1,39 +1,62 @@
<template>
<div class="timeline">
<a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
<div class="base00-background base05-border new-status-notification">
<p class="text-center" >
{{timeline.newStatusCount}} new statuses
</p>
<div class="timeline panel panel-default">
<div class="panel-heading base01-background base04">
<div class="title">
{{title}}
</div>
</a>
<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="base01-background base05-border new-status-notification">
<p class="text-center" >
Load older statuses.
</p>
<button @click.prevent="showNewStatuses" class="base06 base02-background" v-if="timeline.newStatusCount > 0">
Show new ({{timeline.newStatusCount}})
</button>
<button @click.prevent class="base04 base01-background no-press" v-if="!timeline.newStatusCount > 0">
Up-to-date
</button>
</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="base01-background base05-border new-status-notification text-center">Load older statuses.</div>
</a>
<div class="base01-background base05-border new-status-notification text-center" v-else>...</div>
</div>
</a>
</div>
</div>
</template>
<script src="./timeline.js"></script>
<style lang="scss">
.new-status-notification {
border-style: solid;
float: right;
border-width: 1px 1px 0px 1px;
border-radius: 5px 5px 0 0;
font-size: 1.1em;
margin-top: -2.08em;
margin-right: 0.8em;
max-width: 200px;
max-height: 2em;
p {
margin: 0px;
padding: 0.6em;
}
}
.timeline .panel-heading {
position: relative;
display: flex;
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 70%;
}
button {
position: absolute;
right: 0.6em;
padding: 0.1em 0.3em 0.25em 0.3em;
min-width: 6em;
}
.no-press {
opacity: 0.8;
cursor: default;
}
}
.new-status-notification {
position:relative;
margin-top: -1px;
font-size: 1.1em;
border-width: 1px 0 0 0;
border-style: solid;
border-radius: 0 0 10px 10px;
padding: 10px;
z-index: 1;
}
</style>

View file

@ -63,15 +63,13 @@
headingStyle () {
let rgb = this.$store.state.config.colors['base00'].match(/\d+/g)
return {
backgroundColor: 'rgb(' + Math.floor(rgb[0] * 0.53) + ', ' +
Math.floor(rgb[1] * 0.56) + ', ' +
Math.floor(rgb[2] * 0.59) + ')',
backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
backgroundImage: `url(${this.user.cover_photo})`
}
},
bodyStyle () {
return {
background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + this.$store.state.config.colors['base00'] + ' 80%)'
background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
}
},
isOtherUser () {