mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-22 14:31:26 +00:00
Merge pull request #1484 from pixelfed/frontend-ui-refactor
Frontend ui refactor
This commit is contained in:
daniel
GitHub
commit
aed81bcb7b
4 changed files with 171 additions and 208 deletions
|
|
@ -23,7 +23,7 @@ return [
|
|||
| This value is the version of your Pixelfed instance.
|
||||
|
|
||||
*/
|
||||
'version' => '0.9.4',
|
||||
'version' => '0.9.5',
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
|
|||
BIN
public/js/compose.js
vendored
BIN
public/js/compose.js
vendored
Binary file not shown.
Binary file not shown.
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue