Update ComposeModal.vue

This commit is contained in:
Daniel Supernault 2019-07-08 23:23:59 -06:00
parent 623e0c9adb
commit e4d6b0022d
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7

View file

@ -1,203 +1,189 @@
<template>
<div>
<div v-if="!composeType">
<div class="card">
<div class="card-body">
<button type="button" class="btn btn-primary btn-block font-weight-bold" @click="composeType = 'post'">Compose Post</button>
<hr>
<!-- <button type="button" class="btn btn-outline-secondary btn-block font-weight-bold" @click="composeType = 'story'">Add Story</button> -->
<button type="button" class="btn btn-outline-secondary btn-block font-weight-bold" @click="composeType = 'loop'">Create Loop</button>
</div>
</div>
</div>
<div v-if="composeType == 'post'">
<input type="file" name="media" class="d-none file-input" multiple="" v-bind:accept="config.uploader.media_types">
<div class="timeline">
<div class="card status-card card-md-rounded-0">
<div class="card-header d-inline-flex align-items-center bg-white">
<img v-bind:src="profile.avatar" width="32px" height="32px" style="border-radius: 32px;" class="box-shadow">
<a class="username font-weight-bold pl-2 text-dark" v-bind:href="profile.url">
{{profile.username}}
</a>
<div class="text-right" style="flex-grow:1;">
<div class="dropdown">
<button class="btn btn-link text-dark no-caret dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">
<span class="fas fa-ellipsis-v fa-lg text-muted"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<div v-show="media.length > 0" class="dropdown-item small font-weight-bold" v-on:click="mediaDrawer = !mediaDrawer">{{mediaDrawer ? 'Hide' : 'Show'}} Media Toolbar</div>
<div class="dropdown-item small font-weight-bold" v-on:click="about">About</div>
<a class="dropdown-item small font-weight-bold" href="/i/compose">Classic Compose UI</a>
<div class="dropdown-divider"></div>
<div class="dropdown-item small font-weight-bold" v-on:click="closeModal">Close</div>
</div>
<div>
<input type="file" name="media" class="d-none file-input" multiple="" v-bind:accept="config.uploader.media_types">
<div class="timeline">
<div class="card status-card card-md-rounded-0">
<div class="card-header d-inline-flex align-items-center bg-white">
<img v-bind:src="profile.avatar" width="32px" height="32px" style="border-radius: 32px;" class="box-shadow">
<a class="username font-weight-bold pl-2 text-dark" v-bind:href="profile.url">
{{profile.username}}
</a>
<div class="text-right" style="flex-grow:1;">
<div class="dropdown">
<button class="btn btn-link text-dark no-caret dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">
<span class="fas fa-ellipsis-v fa-lg text-muted"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<div v-show="media.length > 0" class="dropdown-item small font-weight-bold" v-on:click="mediaDrawer = !mediaDrawer">{{mediaDrawer ? 'Hide' : 'Show'}} Media Toolbar</div>
<div class="dropdown-item small font-weight-bold" v-on:click="about">About</div>
<div class="dropdown-divider"></div>
<div class="dropdown-item small font-weight-bold" v-on:click="closeModal">Close</div>
</div>
</div>
</div>
</div>
<div class="postPresenterContainer">
<div v-if="uploading">
<div class="w-100 h-100 bg-light py-5" style="border-bottom: 1px solid #f1f1f1">
<div class="p-5">
<b-progress :value="uploadProgress" :max="100" striped :animated="true"></b-progress>
<p class="text-center mb-0 font-weight-bold">Uploading ... ({{uploadProgress}}%)</p>
</div>
<div class="postPresenterContainer">
<div v-if="uploading">
<div class="w-100 h-100 bg-light py-5" style="border-bottom: 1px solid #f1f1f1">
<div class="p-5">
<b-progress :value="uploadProgress" :max="100" striped :animated="true"></b-progress>
<p class="text-center mb-0 font-weight-bold">Uploading ... ({{uploadProgress}}%)</p>
</div>
</div>
<div v-else>
<div v-if="ids.length > 0 && ids.length != config.uploader.album_limit" class="card-header py-2 bg-primary m-2 rounded cursor-pointer" v-on:click="addMedia($event)">
<p class="text-center mb-0 font-weight-bold text-white"><i class="fas fa-plus mr-1"></i> Add Photo</p>
</div>
<div v-if="ids.length == 0" class="w-100 h-100 bg-light py-5 cursor-pointer" style="border-bottom: 1px solid #f1f1f1" v-on:click="addMedia($event)">
<p class="text-center mb-0 font-weight-bold p-5">{{composeMessage()}}</p>
</div>
<div v-if="ids.length > 0">
<b-carousel id="p-carousel"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ffffff"
:interval="0"
v-model="carouselCursor"
>
<b-carousel-slide v-if="ids.length > 0" v-for="(preview, index) in media" :key="'preview_media_'+index">
<div slot="img" :class="[media[index].filter_class?media[index].filter_class:'']" style="display:flex;min-height: 320px;align-items: center;">
<img class="d-block img-fluid w-100" :src="preview.url" :alt="preview.description" :title="preview.description">
</div>
</b-carousel-slide>
</b-carousel>
</div>
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="bg-dark align-items-center">
<ul class="nav media-drawer-filters text-center">
<li class="nav-item">
<div class="p-1 pt-3">
<img :src="media[carouselCursor].url" width="100px" height="60px" v-on:click.prevent="toggleFilter($event, null)" class="cursor-pointer">
</div>
<a :class="[media[carouselCursor].filter_class == null ? 'nav-link text-white active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, null)">No Filter</a>
</li>
<li class="nav-item" v-for="(filter, index) in filters">
<div class="p-1 pt-3">
<img :src="media[carouselCursor].url" width="100px" height="60px" :class="filter[1]" v-on:click.prevent="toggleFilter($event, filter[1])">
</div>
<a :class="[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-white active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, filter[1])">{{filter[0]}}</a>
</li>
</ul>
</div>
</div>
<div v-else>
<div v-if="ids.length > 0 && ids.length != config.uploader.album_limit" class="card-header py-2 bg-primary m-2 rounded cursor-pointer" v-on:click="addMedia($event)">
<p class="text-center mb-0 font-weight-bold text-white"><i class="fas fa-plus mr-1"></i> Add Photo</p>
</div>
<div v-if="mediaDrawer" class="bg-lighter p-2 row">
<div class="col-12">
<div class="form-group">
<input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description">
</div>
<div class="form-group">
<input type="text" class="form-control" v-model="media[carouselCursor].license" placeholder="Optional media license">
</div>
<div v-if="ids.length == 0" class="w-100 h-100 bg-light py-5 cursor-pointer" style="border-bottom: 1px solid #f1f1f1" v-on:click="addMedia($event)">
<p class="text-center mb-0 font-weight-bold p-5">{{composeMessage()}}</p>
</div>
<div v-if="ids.length > 0">
<b-carousel id="p-carousel"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ffffff"
:interval="0"
v-model="carouselCursor"
>
<b-carousel-slide v-if="ids.length > 0" v-for="(preview, index) in media" :key="'preview_media_'+index">
<div slot="img" :class="[media[index].filter_class?media[index].filter_class:'']" style="display:flex;min-height: 320px;align-items: center;">
<img class="d-block img-fluid w-100" :src="preview.url" :alt="preview.description" :title="preview.description">
</div>
</b-carousel-slide>
</b-carousel>
</div>
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="bg-dark align-items-center">
<ul class="nav media-drawer-filters text-center">
<li class="nav-item">
<div class="p-1 pt-3">
<img :src="media[carouselCursor].url" width="100px" height="60px" v-on:click.prevent="toggleFilter($event, null)" class="cursor-pointer">
</div>
<a :class="[media[carouselCursor].filter_class == null ? 'nav-link text-white active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, null)">No Filter</a>
</li>
<li class="nav-item" v-for="(filter, index) in filters">
<div class="p-1 pt-3">
<img :src="media[carouselCursor].url" width="100px" height="60px" :class="filter[1]" v-on:click.prevent="toggleFilter($event, filter[1])">
</div>
<a :class="[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-white active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, filter[1])">{{filter[0]}}</a>
</li>
</ul>
</div>
</div>
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="bg-lighter p-2 row">
<div class="col-12">
<div class="form-group">
<input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description">
</div>
<!-- <div class="col-6 pt-2">
<button class="btn btn-outline-secondary btn-sm mr-1"><i class="fas fa-map-marker-alt"></i></button>
<button class="btn btn-outline-secondary btn-sm"><i class="fas fa-tools"></i></button>
<!-- <div class="form-group">
<input type="text" class="form-control" v-model="media[carouselCursor].license" placeholder="Optional media license">
</div> -->
<div class="col-12 text-right pt-2">
<button class="btn btn-outline-danger btn-sm font-weight-bold mr-1" v-on:click="deleteMedia()">Delete Photo</button>
<button class="btn btn-outline-secondary btn-sm font-weight-bold" v-on:click="updateMedia()">Hide Media Toolbar</button>
</div>
</div>
<!-- <div class="col-6 pt-2">
<button class="btn btn-outline-secondary btn-sm mr-1"><i class="fas fa-map-marker-alt"></i></button>
<button class="btn btn-outline-secondary btn-sm"><i class="fas fa-tools"></i></button>
</div> -->
<div class="col-12 text-right pt-2">
<button class="btn btn-outline-danger btn-sm font-weight-bold mr-1" v-on:click="deleteMedia()">Delete Photo</button>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="caption">
<textarea class="form-control mb-0 border-0 rounded-0" rows="3" placeholder="Add an optional caption" v-model="composeText"></textarea>
</div>
<div class="card-body p-0 border-top">
<div class="caption">
<textarea class="form-control mb-0 border-0 rounded-0" rows="3" placeholder="Add an optional caption" v-model="composeText"></textarea>
</div>
</div>
<div class="card-footer">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="custom-control custom-switch d-inline mr-3">
<input type="checkbox" class="custom-control-input" id="nsfwToggle" v-model="nsfw">
<label class="custom-control-label small font-weight-bold text-muted pt-1" for="nsfwToggle">NSFW</label>
</div>
<div class="dropdown d-inline">
<button class="btn btn-outline-secondary btn-sm py-0 dropdown-toggle" type="button" id="visibility" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{visibility[0].toUpperCase() + visibility.slice(1)}}
</button>
<div class="dropdown-menu" aria-labelledby="visibility" style="width: 200px;">
<a :class="[visibility=='public'?'dropdown-item active':'dropdown-item']" href="#" data-id="public" data-title="Public" v-on:click.prevent="visibility = 'public'">
<div class="row">
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
<i class="fas fa-globe"></i>
</div>
<div class="col-12 col-sm-10 pl-2">
<p class="font-weight-bold mb-0">Public</p>
<p class="small mb-0">Anyone can see</p>
</div>
</div>
</a>
<a :class="[visibility=='private'?'dropdown-item active':'dropdown-item']" href="#" data-id="private" data-title="Followers Only" v-on:click.prevent="visibility = 'private'">
<div class="row">
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
<i class="fas fa-lock"></i>
</div>
<div class="col-12 col-sm-10 pl-2">
<p class="font-weight-bold mb-0">Followers Only</p>
<p class="small mb-0">Only followers can see</p>
</div>
</div>
</a>
<a :class="[visibility=='unlisted'?'dropdown-item active':'dropdown-item']" href="#" data-id="private" data-title="Unlisted" v-on:click.prevent="visibility = 'unlisted'">
<div class="row">
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
<i class="fas fa-lock"></i>
</div>
<div class="col-12 col-sm-10 pl-2">
<p class="font-weight-bold mb-0">Unlisted</p>
<p class="small mb-0">Not listed on public timelines</p>
</div>
</div>
</a>
<!-- <a class="dropdown-item" href="#" data-id="circle" data-title="Circle">
<div class="row">
<div class="col-12 col-sm-2 px-0 text-center">
<i class="far fa-circle"></i>
</div>
<div class="col-12 col-sm-10 pl-2">
<p class="font-weight-bold mb-0">Circle</p>
<p class="small mb-0">Select a circle</p>
</div>
</div>
</a>
<a class="dropdown-item" href="#" data-id="direct" data-title="Direct Message">
<div class="row">
<div class="col-12 col-sm-2 px-0 text-center">
<i class="fas fa-envelope"></i>
</div>
<div class="col-12 col-sm-10 pl-2">
<p class="font-weight-bold mb-0">Direct Message</p>
<p class="small mb-0">Recipients only</p>
</div>
</div>
</a> -->
</div>
<div class="card-footer">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="custom-control custom-switch d-inline mr-3">
<input type="checkbox" class="custom-control-input" id="nsfwToggle" v-model="nsfw">
<label class="custom-control-label small font-weight-bold text-muted pt-1" for="nsfwToggle">NSFW</label>
</div>
<div class="dropdown d-inline">
<button class="btn btn-outline-secondary btn-sm py-0 dropdown-toggle" type="button" id="visibility" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{visibility[0].toUpperCase() + visibility.slice(1)}}
</button>
<div class="dropdown-menu" aria-labelledby="visibility" style="width: 200px;">
<a :class="[visibility=='public'?'dropdown-item active':'dropdown-item']" href="#" data-id="public" data-title="Public" v-on:click.prevent="visibility = 'public'">
<div class="row">
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
<i class="fas fa-globe"></i>
</div>
<div class="col-12 col-sm-10 pl-2">
<p class="font-weight-bold mb-0">Public</p>
<p class="small mb-0">Anyone can see</p>
</div>
</div>
</a>
<a :class="[visibility=='private'?'dropdown-item active':'dropdown-item']" href="#" data-id="private" data-title="Followers Only" v-on:click.prevent="visibility = 'private'">
<div class="row">
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
<i class="fas fa-lock"></i>
</div>
<div class="col-12 col-sm-10 pl-2">
<p class="font-weight-bold mb-0">Followers Only</p>
<p class="small mb-0">Only followers can see</p>
</div>
</div>
</a>
<a :class="[visibility=='unlisted'?'dropdown-item active':'dropdown-item']" href="#" data-id="private" data-title="Unlisted" v-on:click.prevent="visibility = 'unlisted'">
<div class="row">
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
<i class="fas fa-lock"></i>
</div>
<div class="col-12 col-sm-10 pl-2">
<p class="font-weight-bold mb-0">Unlisted</p>
<p class="small mb-0">Not listed on public timelines</p>
</div>
</div>
</a>
<!-- <a class="dropdown-item" href="#" data-id="circle" data-title="Circle">
<div class="row">
<div class="col-12 col-sm-2 px-0 text-center">
<i class="far fa-circle"></i>
</div>
<div class="col-12 col-sm-10 pl-2">
<p class="font-weight-bold mb-0">Circle</p>
<p class="small mb-0">Select a circle</p>
</div>
</div>
</a>
<a class="dropdown-item" href="#" data-id="direct" data-title="Direct Message">
<div class="row">
<div class="col-12 col-sm-2 px-0 text-center">
<i class="fas fa-envelope"></i>
</div>
<div class="col-12 col-sm-10 pl-2">
<p class="font-weight-bold mb-0">Direct Message</p>
<p class="small mb-0">Recipients only</p>
</div>
</div>
</a> -->
</div>
</div>
<div class="small text-muted font-weight-bold">
{{composeText.length}} / {{config.uploader.max_caption_length}}
</div>
<div class="pl-md-5">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm font-weight-bold" v-on:click="compose()">{{composeState[0].toUpperCase() + composeState.slice(1)}}</button>
<button type="button" class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a :class="[composeState == 'publish' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'publish'">Publish now</a>
<!-- <a :class="[composeState == 'draft' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'draft'">Save as draft</a>
<a :class="[composeState == 'schedule' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'schedule'">Schedule for later</a>
<div class="dropdown-divider"></div>
<a :class="[composeState == 'delete' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'delete'">Delete</a> -->
</div>
</div>
<div class="small text-muted font-weight-bold">
{{composeText.length}} / {{config.uploader.max_caption_length}}
</div>
<div class="pl-md-5">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm font-weight-bold" v-on:click="compose()">{{composeState[0].toUpperCase() + composeState.slice(1)}}</button>
<button type="button" class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a :class="[composeState == 'publish' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'publish'">Publish now</a>
<!-- <a :class="[composeState == 'draft' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'draft'">Save as draft</a>
<a :class="[composeState == 'schedule' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'schedule'">Schedule for later</a>
<div class="dropdown-divider"></div>
<a :class="[composeState == 'delete' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'delete'">Delete</a> -->
</div>
</div>
</div>
@ -205,30 +191,7 @@
</div>
</div>
</div>
<div v-if="composeType == 'loop'">
<div class="card">
<div class="card-body">
<button type="button" class="btn btn-primary btn-block font-weight-bold" @click="composeType = 'post'">Upload Loop</button>
<hr>
<button type="button" class="btn btn-outline-secondary btn-block font-weight-bold" @click="composeType = ''">Back</button>
<!-- <button type="button" class="btn btn-outline-secondary btn-block font-weight-bold">Import from Coub</button>
<button type="button" class="btn btn-outline-secondary btn-block font-weight-bold">Import from Vine</button>
<button type="button" class="btn btn-outline-secondary btn-block font-weight-bold">Import from YouTube</button> -->
</div>
</div>
</div>
<div v-if="composeType == 'story'">
<div class="card">
<div class="card-body">
<button type="button" class="btn btn-primary btn-block font-weight-bold" @click="composeType = 'post'">Add to Story</button>
<hr>
<button type="button" class="btn btn-outline-primary btn-block font-weight-bold" @click="composeType = 'post'">New Story</button>
<hr>
<button type="button" class="btn btn-outline-secondary btn-block font-weight-bold" @click="composeType = ''">Back</button>
</div>
</div>
</div>
</div>
</div>
</template>
<style type="text/css" scoped>