Update ComposeModal.vue

resources/assets/js/components/ComposeModal.vue

@@ -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>
+			<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="small text-muted font-weight-bold">
-							{{composeText.length}} / {{config.uploader.max_caption_length}}
+						<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="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>