forked from mirror/pixelfed
Merge pull request #1484 from pixelfed/frontend-ui-refactor
Frontend ui refactor
This commit is contained in:
daniel
GitHub
commit
aed81bcb7b
|
|
@ -23,7 +23,7 @@ return [
|
||||||
| This value is the version of your Pixelfed instance.
|
| This value is the version of your Pixelfed instance.
|
||||||
|
|
|
|
||||||
*/
|
*/
|
||||||
'version' => '0.9.4',
|
'version' => '0.9.5',
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|--------------------------------------------------------------------------
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -9,7 +9,7 @@
|
||||||
"/css/landing.css": "/css/landing.css?id=1ea686af4c64df5018fc",
|
"/css/landing.css": "/css/landing.css?id=1ea686af4c64df5018fc",
|
||||||
"/css/quill.css": "/css/quill.css?id=81604d62610b0dbffad6",
|
"/css/quill.css": "/css/quill.css?id=81604d62610b0dbffad6",
|
||||||
"/js/components.js": "/js/components.js?id=0b7b6f606e590f4df10f",
|
"/js/components.js": "/js/components.js?id=0b7b6f606e590f4df10f",
|
||||||
"/js/compose.js": "/js/compose.js?id=475dac4628e2d1cb3dc9",
|
"/js/compose.js": "/js/compose.js?id=aca2cd178a7ca454713d",
|
||||||
"/js/developers.js": "/js/developers.js?id=e4a227c87d1b09fc2dd9",
|
"/js/developers.js": "/js/developers.js?id=e4a227c87d1b09fc2dd9",
|
||||||
"/js/discover.js": "/js/discover.js?id=772fbc6c176aaa9039ec",
|
"/js/discover.js": "/js/discover.js?id=772fbc6c176aaa9039ec",
|
||||||
"/js/hashtag.js": "/js/hashtag.js?id=32c3a6b1a04949d390ab",
|
"/js/hashtag.js": "/js/hashtag.js?id=32c3a6b1a04949d390ab",
|
||||||
|
|
|
||||||
|
|
@ -1,203 +1,189 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div v-if="!composeType">
|
<input type="file" name="media" class="d-none file-input" multiple="" v-bind:accept="config.uploader.media_types">
|
||||||
<div class="card">
|
<div class="timeline">
|
||||||
<div class="card-body">
|
<div class="card status-card card-md-rounded-0">
|
||||||
<button type="button" class="btn btn-primary btn-block font-weight-bold" @click="composeType = 'post'">Compose Post</button>
|
<div class="card-header d-inline-flex align-items-center bg-white">
|
||||||
<hr>
|
<img v-bind:src="profile.avatar" width="32px" height="32px" style="border-radius: 32px;" class="box-shadow">
|
||||||
<!-- <button type="button" class="btn btn-outline-secondary btn-block font-weight-bold" @click="composeType = 'story'">Add Story</button> -->
|
<a class="username font-weight-bold pl-2 text-dark" v-bind:href="profile.url">
|
||||||
<button type="button" class="btn btn-outline-secondary btn-block font-weight-bold" @click="composeType = 'loop'">Create Loop</button>
|
{{profile.username}}
|
||||||
</div>
|
</a>
|
||||||
</div>
|
<div class="text-right" style="flex-grow:1;">
|
||||||
</div>
|
<div class="dropdown">
|
||||||
<div v-if="composeType == 'post'">
|
<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">
|
||||||
<input type="file" name="media" class="d-none file-input" multiple="" v-bind:accept="config.uploader.media_types">
|
<span class="fas fa-ellipsis-v fa-lg text-muted"></span>
|
||||||
<div class="timeline">
|
</button>
|
||||||
<div class="card status-card card-md-rounded-0">
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
|
||||||
<div class="card-header d-inline-flex align-items-center bg-white">
|
<div v-show="media.length > 0" class="dropdown-item small font-weight-bold" v-on:click="mediaDrawer = !mediaDrawer">{{mediaDrawer ? 'Hide' : 'Show'}} Media Toolbar</div>
|
||||||
<img v-bind:src="profile.avatar" width="32px" height="32px" style="border-radius: 32px;" class="box-shadow">
|
<div class="dropdown-item small font-weight-bold" v-on:click="about">About</div>
|
||||||
<a class="username font-weight-bold pl-2 text-dark" v-bind:href="profile.url">
|
<div class="dropdown-divider"></div>
|
||||||
{{profile.username}}
|
<div class="dropdown-item small font-weight-bold" v-on:click="closeModal">Close</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="postPresenterContainer">
|
<div class="postPresenterContainer">
|
||||||
<div v-if="uploading">
|
<div v-if="uploading">
|
||||||
<div class="w-100 h-100 bg-light py-5" style="border-bottom: 1px solid #f1f1f1">
|
<div class="w-100 h-100 bg-light py-5" style="border-bottom: 1px solid #f1f1f1">
|
||||||
<div class="p-5">
|
<div class="p-5">
|
||||||
<b-progress :value="uploadProgress" :max="100" striped :animated="true"></b-progress>
|
<b-progress :value="uploadProgress" :max="100" striped :animated="true"></b-progress>
|
||||||
<p class="text-center mb-0 font-weight-bold">Uploading ... ({{uploadProgress}}%)</p>
|
<p class="text-center mb-0 font-weight-bold">Uploading ... ({{uploadProgress}}%)</p>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
</div>
|
||||||
<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)">
|
<div v-else>
|
||||||
<p class="text-center mb-0 font-weight-bold text-white"><i class="fas fa-plus mr-1"></i> Add Photo</p>
|
<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)">
|
||||||
</div>
|
<p class="text-center mb-0 font-weight-bold text-white"><i class="fas fa-plus mr-1"></i> Add Photo</p>
|
||||||
<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>
|
||||||
<div v-if="mediaDrawer" class="bg-lighter p-2 row">
|
<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)">
|
||||||
<div class="col-12">
|
<p class="text-center mb-0 font-weight-bold p-5">{{composeMessage()}}</p>
|
||||||
<div class="form-group">
|
</div>
|
||||||
<input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description">
|
<div v-if="ids.length > 0">
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
<b-carousel id="p-carousel"
|
||||||
<input type="text" class="form-control" v-model="media[carouselCursor].license" placeholder="Optional media license">
|
style="text-shadow: 1px 1px 2px #333;"
|
||||||
</div>
|
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>
|
||||||
<!-- <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>
|
<!-- <div class="form-group">
|
||||||
<button class="btn btn-outline-secondary btn-sm"><i class="fas fa-tools"></i></button>
|
<input type="text" class="form-control" v-model="media[carouselCursor].license" placeholder="Optional media license">
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="col-12 text-right pt-2">
|
</div>
|
||||||
<button class="btn btn-outline-danger btn-sm font-weight-bold mr-1" v-on:click="deleteMedia()">Delete Photo</button>
|
<!-- <div class="col-6 pt-2">
|
||||||
<button class="btn btn-outline-secondary btn-sm font-weight-bold" v-on:click="updateMedia()">Hide Media Toolbar</button>
|
<button class="btn btn-outline-secondary btn-sm mr-1"><i class="fas fa-map-marker-alt"></i></button>
|
||||||
</div>
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="card-body p-0">
|
<div class="card-body p-0 border-top">
|
||||||
<div class="caption">
|
<div class="caption">
|
||||||
<textarea class="form-control mb-0 border-0 rounded-0" rows="3" placeholder="Add an optional caption" v-model="composeText"></textarea>
|
<textarea class="form-control mb-0 border-0 rounded-0" rows="3" placeholder="Add an optional caption" v-model="composeText"></textarea>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<div>
|
<div>
|
||||||
<div class="custom-control custom-switch d-inline mr-3">
|
<div class="custom-control custom-switch d-inline mr-3">
|
||||||
<input type="checkbox" class="custom-control-input" id="nsfwToggle" v-model="nsfw">
|
<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>
|
<label class="custom-control-label small font-weight-bold text-muted pt-1" for="nsfwToggle">NSFW</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="dropdown d-inline">
|
<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">
|
<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)}}
|
{{visibility[0].toUpperCase() + visibility.slice(1)}}
|
||||||
</button>
|
</button>
|
||||||
<div class="dropdown-menu" aria-labelledby="visibility" style="width: 200px;">
|
<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'">
|
<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="row">
|
||||||
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
|
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
|
||||||
<i class="fas fa-globe"></i>
|
<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>
|
</div>
|
||||||
</a>
|
<div class="col-12 col-sm-10 pl-2">
|
||||||
<a :class="[visibility=='private'?'dropdown-item active':'dropdown-item']" href="#" data-id="private" data-title="Followers Only" v-on:click.prevent="visibility = 'private'">
|
<p class="font-weight-bold mb-0">Public</p>
|
||||||
<div class="row">
|
<p class="small mb-0">Anyone can see</p>
|
||||||
<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>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a :class="[visibility=='unlisted'?'dropdown-item active':'dropdown-item']" href="#" data-id="private" data-title="Unlisted" v-on:click.prevent="visibility = 'unlisted'">
|
</a>
|
||||||
<div class="row">
|
<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="d-none d-block-sm col-sm-2 px-0 text-center">
|
<div class="row">
|
||||||
<i class="fas fa-lock"></i>
|
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
|
||||||
</div>
|
<i class="fas fa-lock"></i>
|
||||||
<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>
|
</div>
|
||||||
</a>
|
<div class="col-12 col-sm-10 pl-2">
|
||||||
<!-- <a class="dropdown-item" href="#" data-id="circle" data-title="Circle">
|
<p class="font-weight-bold mb-0">Followers Only</p>
|
||||||
<div class="row">
|
<p class="small mb-0">Only followers can see</p>
|
||||||
<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>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a class="dropdown-item" href="#" data-id="direct" data-title="Direct Message">
|
</a>
|
||||||
<div class="row">
|
<a :class="[visibility=='unlisted'?'dropdown-item active':'dropdown-item']" href="#" data-id="private" data-title="Unlisted" v-on:click.prevent="visibility = 'unlisted'">
|
||||||
<div class="col-12 col-sm-2 px-0 text-center">
|
<div class="row">
|
||||||
<i class="fas fa-envelope"></i>
|
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
|
||||||
</div>
|
<i class="fas fa-lock"></i>
|
||||||
<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>
|
</div>
|
||||||
</a> -->
|
<div class="col-12 col-sm-10 pl-2">
|
||||||
</div>
|
<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>
|
</div>
|
||||||
<div class="small text-muted font-weight-bold">
|
</div>
|
||||||
{{composeText.length}} / {{config.uploader.max_caption_length}}
|
<div class="small text-muted font-weight-bold">
|
||||||
</div>
|
{{composeText.length}} / {{config.uploader.max_caption_length}}
|
||||||
<div class="pl-md-5">
|
</div>
|
||||||
<div class="btn-group">
|
<div class="pl-md-5">
|
||||||
<button type="button" class="btn btn-primary btn-sm font-weight-bold" v-on:click="compose()">{{composeState[0].toUpperCase() + composeState.slice(1)}}</button>
|
<div class="btn-group">
|
||||||
<button type="button" class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<button type="button" class="btn btn-primary btn-sm font-weight-bold" v-on:click="compose()">{{composeState[0].toUpperCase() + composeState.slice(1)}}</button>
|
||||||
<span class="sr-only">Toggle Dropdown</span>
|
<button type="button" class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
</button>
|
<span class="sr-only">Toggle Dropdown</span>
|
||||||
<div class="dropdown-menu dropdown-menu-right">
|
</button>
|
||||||
<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>
|
<div class="dropdown-menu dropdown-menu-right">
|
||||||
<!-- <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 == '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 == 'schedule' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'schedule'">Schedule for later</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>
|
||||||
<div class="dropdown-divider"></div>
|
<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>
|
||||||
<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 class="dropdown-divider"></div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -205,30 +191,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="composeType == 'loop'">
|
</div>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style type="text/css" scoped>
|
<style type="text/css" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue