mirror
/
pixelfed
mirror of https://github.com/pixelfed/pixelfed.git
1
0
Fork 1
Code Issues Releases Wiki Activity

Update StoryCompose component, improve full screen preview

This commit is contained in:
Daniel Supernault 2021-04-29 23:28:26 -06:00
parent 2119965659
commit 39a7610314
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
resources/assets/js/components/StoryCompose.vue
View File

@ -27,6 +27,10 @@
<i class="far fa-clone mr-2"></i> <i class="far fa-clone mr-2"></i>
My Story My Story
</a> </a>
<a v-if="stories.length" class="list-group-item bg-transparent lead text-decoration-none text-lighter font-weight-bold border-muted" href="#" @click.prevent="viewMyStory()">
<i class="fas fa-history mr-2"></i>
View My Story
</a>
<!-- <a v-if="stories.length" class="list-group-item bg-transparent lead text-decoration-none text-lighter font-weight-bold border-muted" href="#" @click.prevent="edit()"> <!-- <a v-if="stories.length" class="list-group-item bg-transparent lead text-decoration-none text-lighter font-weight-bold border-muted" href="#" @click.prevent="edit()">
<i class="fas fa-network-wired mr-1"></i> <i class="fas fa-network-wired mr-1"></i>
Audience Audience
@ -149,23 +153,21 @@
<p class="text-muted font-weight-bold mb-0">STORIES</p> <p class="text-muted font-weight-bold mb-0">STORIES</p>
</div> </div>
<div class="flex-fill py-4"> <div class="flex-fill py-4">
<p class="lead font-weight-bold text-lighter">My Stories</p>
<div class="card w-100 shadow-none bg-transparent" style="max-height: 50vh; overflow-y: scroll"> <div class="card w-100 shadow-none bg-transparent" style="max-height: 50vh; overflow-y: scroll">
<div class="list-group"> <div class="list-group">
<div v-for="(story, index) in stories" class="list-group-item bg-transparent text-center border-muted text-lighter" href="#"> <div v-for="(story, index) in stories" class="list-group-item bg-transparent text-center border-muted text-lighter" href="#">
<div class="media align-items-center"> <div class="media align-items-center">
<div class="mr-3 cursor-pointer" @click="showLightbox(story)"> <div class="mr-3 cursor-pointer" @click="showLightbox(story)">
<img :src="story.src" class="img-fluid" width="70px" height="70px"> <img :src="story.src" class="rounded-circle border" width="40px" height="40px" style="object-fit: cover;">
<p class="small text-muted text-center mb-0">(expand)</p>
</div> </div>
<div class="media-body text-left"> <div class="media-body text-left">
<p class="mb-0">Expires</p> <p class="mb-0 text-muted font-weight-bold"><span>{{story.created_ago}} ago</span></p>
<p class="mb-1 text-muted small"><span>{{expiresTimestamp(story.expires_at)}}</span></p>
<p class="mb-0">
<button class="btn btn-outline-muted btn-sm py-0 px-2">Followers Only</button>
</p>
</div> </div>
<div class="float-right"> <div class="flex-grow-1 text-right">
<button @click="deleteStory(story, index)" class="btn btn-danger btn-sm font-weight-bold text-uppercase">Delete</button> <button @click="deleteStory(story, index)" class="btn btn-link btn-sm">
<i class="fas fa-trash-alt fa-lg text-muted"></i>
</button>
</div> </div>
</div> </div>
</div> </div>
@ -184,11 +186,12 @@
hide-header hide-header
hide-footer hide-footer
centered centered
size="lg" size="md"
body-class="p-0" class="bg-transparent"
body-class="p-0 bg-transparent"
> >
<div v-if="lightboxMedia" class="w-100 h-100"> <div v-if="lightboxMedia" class="w-100 h-100 bg-transparent">
<img :src="lightboxMedia.url" style="max-height: 90vh; width: 100%; object-fit: cover;"> <img :src="lightboxMedia.url" style="max-height: 90vh; width: 100%; object-fit: contain;">
</div> </div>
</b-modal> </b-modal>
</div> </div>
@ -198,6 +201,9 @@
.bg-black { .bg-black {
background-color: #262626; background-color: #262626;
} }
#lightbox .modal-content {
background: transparent;
}
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
@ -307,13 +313,14 @@
self.uploading = false; self.uploading = false;
self.mediaUrl = e.data.media_url; self.mediaUrl = e.data.media_url;
self.mediaId = e.data.media_id; self.mediaId = e.data.media_id;
self.page = 'crop'; self.page = e.data.media_type === 'video' ? 'preview' : 'crop';
// window.location.href = '/i/my/story'; // window.location.href = '/i/my/story';
}).catch(function(e) { }).catch(function(e) {
self.uploading = false; self.uploading = false;
io.value = null; io.value = null;
let msg = e.response.data.message ? e.response.data.message : 'Something went wrong.' let msg = e.response.data.message ? e.response.data.message : 'Something went wrong.'
swal('Oops!', msg, 'warning'); swal('Oops!', msg, 'warning');
self.page = 'error';
}); });
self.uploadProgress = 0; self.uploadProgress = 0;
}); });
@ -386,6 +393,10 @@
}).then(res => { }).then(res => {
window.location.href = '/i/my/story?id=' + this.mediaId; window.location.href = '/i/my/story?id=' + this.mediaId;
}) })
},
viewMyStory() {
window.location.href = '/i/my/story';
} }
} }
} }