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/unit/coverage
test/e2e/reports test/e2e/reports
selenium-debug.log selenium-debug.log
.idea/

View file

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

View file

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

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="timeline panel panel-default base00-background"> <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 Conversation
<div v-if="collapsable"> <div v-if="collapsable">
<small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small> <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>

View file

@ -1,10 +1,5 @@
<template> <template>
<div class="timeline panel panel-default"> <Timeline :title="'Friends'" v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
<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>
</template> </template>
<script src="./friends_timeline.js"></script> <script src="./friends_timeline.js"></script>

View file

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

View file

@ -1,10 +1,5 @@
<template> <template>
<div class="timeline panel panel-default"> <Timeline :title="'Mentions'" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
<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>
</template> </template>
<script src="./mentions.js"></script> <script src="./mentions.js"></script>

View file

@ -9,16 +9,16 @@
button { button {
position: absolute; position: absolute;
padding: 0.1em 0.3em 0.25em 0.3em; 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 { .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; display: flex;
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
@ -62,4 +62,9 @@
border: none 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 panel-default base00-background">
<div class="panel-heading base01-background base04"> <div class="panel-heading base01-background base04">
Notifications ({{unseenCount}}) Notifications ({{unseenCount}})
<button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button> <button @click.prevent="markAsSeen" class="base06 base02-background">Read!</button>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'> <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>

View file

@ -1,10 +1,5 @@
<template> <template>
<div class="timeline panel panel-default"> <Timeline :title="'THE WHOLE KNOWN NETWORK'"v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
<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>
</template> </template>
<script src="./public_and_external_timeline.js"></script> <script src="./public_and_external_timeline.js"></script>

View file

@ -1,10 +1,5 @@
<template> <template>
<div class="timeline panel panel-default"> <Timeline :title="'Public Timeline'" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
<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>
</template> </template>
<script src="./public_timeline.js"></script> <script src="./public_timeline.js"></script>

View file

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

View file

@ -1,39 +1,62 @@
<template> <template>
<div class="timeline"> <div class="timeline panel panel-default">
<a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0"> <div class="panel-heading base01-background base04">
<div class="base00-background base05-border new-status-notification"> <div class="title">
<p class="text-center" > {{title}}
{{timeline.newStatusCount}} new statuses
</p>
</div> </div>
</a> <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> <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"> <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
<div class="base01-background base05-border new-status-notification"> <div class="base01-background base05-border new-status-notification text-center">Load older statuses.</div>
<p class="text-center" >
Load older statuses.
</p>
</div>
</a> </a>
<div class="base01-background base05-border new-status-notification text-center" v-else>...</div>
</div>
</div>
</div> </div>
</template> </template>
<script src="./timeline.js"></script> <script src="./timeline.js"></script>
<style lang="scss"> <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 { .timeline .panel-heading {
margin: 0px; position: relative;
padding: 0.6em; 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> </style>

View file

@ -63,15 +63,13 @@
headingStyle () { headingStyle () {
let rgb = this.$store.state.config.colors['base00'].match(/\d+/g) let rgb = this.$store.state.config.colors['base00'].match(/\d+/g)
return { return {
backgroundColor: 'rgb(' + Math.floor(rgb[0] * 0.53) + ', ' + backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
Math.floor(rgb[1] * 0.56) + ', ' +
Math.floor(rgb[2] * 0.59) + ')',
backgroundImage: `url(${this.user.cover_photo})` backgroundImage: `url(${this.user.cover_photo})`
} }
}, },
bodyStyle () { bodyStyle () {
return { 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 () { isOtherUser () {