Publish-Feed.vue

Publish-Feed.vue

				<!-- Hidden Options -->
				<div class="hidden-options">
					<div class="target-channels">
						<!-- Publication Channel -->
						<div class="channel">
							<div class="round-checkbox is-small">
								<div>
									<input checked id="checkbox-1" type="checkbox"> <label for="checkbox-1"></label>
								</div>
							</div>
							<div class="channel-icon">
								<bell-icon></bell-icon>
							</div>
							<div class="channel-name">Activity Feed</div>

							<el-dropdown class="is-right">

								<el-button round>
									<smile-icon class="main-icon"></smile-icon>
									<span>Friends</span>
									<chevron-down-icon class="caret"></chevron-down-icon>
								</el-button>

								<template v-slot:dropdown>

									<el-dropdown-menu class="is-spaced is-modern is-neutral">

										<el-dropdown-item>
											<div class="media">
												<globe-icon></globe-icon>
												<div class="media-content">
													<h3>Public</h3>
													<small>Anyone can see this publication.</small>
												</div>
											</div>
										</el-dropdown-item>

										<el-dropdown-item>
											<div class="media">
												<users-icon></users-icon>
												<div class="media-content">
													<h3>Friends</h3>
													<small>only friends can see this publication.</small>
												</div>
											</div>
										</el-dropdown-item>

										<el-dropdown-item>
											<div class="media">
												<user-icon></user-icon>
												<div class="media-content">
													<h3>Specific friends</h3>
													<small>Don't show it to some friends.</small>
												</div>
											</div>
										</el-dropdown-item>

										<el-dropdown-item divided>
											<div class="media">
												<lock-icon></lock-icon>
												<div class="media-content">
													<h3>Only me</h3>
													<small>Only me can see this publication.</small>
												</div>
											</div>
										</el-dropdown-item>

									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>

						<!-- Publication Channel -->
						<div class="channel">
							<div class="round-checkbox is-small">
								<div>
									<input id="checkbox-2" type="checkbox"> <label for="checkbox-2"></label>
								</div>
							</div>
							<div class="story-icon">
								<div class="plus-icon">
									<plus-icon></plus-icon>
								</div>
							</div>
							<div class="channel-name">My Story</div>

							<!-- Dropdown menu -->
							<b-dropdown class="is-spaced is-modern is-right is-neutral" aria-role="list">

								<button class="button">
									<smile-icon class="main-icon"></smile-icon><span>Friends</span>
									<chevron-down-icon class="caret"></chevron-down-icon>
								</button>

								<b-dropdown-item aria-role="listitem">
									<div class="media">
										<globe-icon></globe-icon>
										<div class="media-content">
											<h3>Public</h3><small>Anyone can see this publication.</small>
										</div>
									</div>
								</b-dropdown-item>

								<b-dropdown-item aria-role="listitem">
									<div class="media">
										<users-icon></users-icon>
										<div class="media-content">
											<h3>Friends</h3><small>only friends can see this publication.</small>
										</div>
									</div>
								</b-dropdown-item>

								<b-dropdown-item aria-role="listitem">
									<div class="media">
										<users-icon></users-icon>
										<div class="media-content">
											<h3>Friends and contacts</h3><small>Your friends and contacts.</small>
										</div>
									</div>
								</b-dropdown-item>
							</b-dropdown>

						</div>
					</div>

					<!-- Friends list -->
					<div class="friends-list" :class="{ 'is-hidden': true }">
						<!-- Header -->
						<div class="list-header">
							<span>Send in a message</span>
							<div class="actions">
								<a class="search-trigger"><search-icon></search-icon></a> <!-- Hidden filter input -->
								<div class="control is-hidden" id="compose-search">
									<input class="input" placeholder="Search People" type="text"> <span><search-icon></search-icon></span>
								</div>
								<a class="is-inverted modal-trigger">Create group</a>

							</div>
						</div><!-- List body -->
						<div class="list-body">
							<!-- Friend -->
							<div class="friend-block">
								<div class="round-checkbox is-small">
									<div>
										<input id="checkbox-3" type="checkbox"> <label for="checkbox-3"></label>
									</div>
								</div><img alt="" class="friend-avatar" :src="require('@/assets/images/avatars/dan.jpg')">
								<div class="friend-name">
									Dan Walker
								</div>
							</div><!-- Friend -->
							<div class="friend-block">
								<div class="round-checkbox is-small">
									<div>
										<input id="checkbox-4" type="checkbox"> <label for="checkbox-4"></label>
									</div>
								</div><img alt="" class="friend-avatar" :src="require('@/assets/images/avatars/daniel.jpg')">
								<div class="friend-name">
									Daniel Wellington
								</div>
							</div><!-- Friend -->
							<div class="friend-block">
								<div class="round-checkbox is-small">
									<div>
										<input id="checkbox-5" type="checkbox"> <label for="checkbox-5"></label>
									</div>
								</div><img alt="" class="friend-avatar" :src="require('@/assets/images/avatars/stella.jpg')">
								<div class="friend-name">
									Stella Bergmann
								</div>
							</div><!-- Friend -->
							<div class="friend-block">
								<div class="round-checkbox is-small">
									<div>
										<input id="checkbox-6" type="checkbox"> <label for="checkbox-6"></label>
									</div>
								</div><img alt="" class="friend-avatar" :src="require('@/assets/images/avatars/david.jpg')">
								<div class="friend-name">
									David Kim
								</div>
							</div><!-- Friend -->
							<div class="friend-block">
								<div class="round-checkbox is-small">
									<div>
										<input id="checkbox-7" type="checkbox"> <label for="checkbox-7"></label>
									</div>
								</div><img alt="" class="friend-avatar" :src="require('@/assets/images/avatars/nelly.png')">
								<div class="friend-name">
									Nelly Schwartz
								</div>
							</div>
						</div>
					</div>
				</div>