Update components using modal-window for new format

frontend/src/App.vue

@@ -1,19 +1,25 @@
 <template>
 	<div id='app'>
-		<modal-window v-model='showAjaxErrorsModal' style='z-index: 100' width='25rem'>
-			<div style='padding: 0rem 1rem 1rem 1rem; border-radius: 0.25rem;'>
-				<p v-for='error in this.$store.state.ajaxErrors'>{{error}}</p>
-				<button
-					class='button button--modal'
-					@click='showAjaxErrorsModal = false'
-					ref='ajaxErrorsModalButton'
-				>
-					OK
-				</button>
+		<modal-window v-model='showAjaxErrorsModal' style='z-index: 100' width='25rem' :no-padding='true'>
+			<div slot='main'>
+				<p v-for='error in this.$store.state.ajaxErrors' style='margin: 1rem;'>{{error}}</p>
 			</div>
+			<button
+				slot='footer'
+				class='button button--modal'
+				@click='showAjaxErrorsModal = false'
+				ref='ajaxErrorsModalButton'
+			>
+				OK
+			</button>
 		</modal-window>
-		<modal-window v-model='showAccountModal' @input='closeAccountModal'>
-			<tab-view :tabs='["Sign up", "Login"]' v-model="showAccountTab" padding='true'>
+		<modal-window
+			v-model='showAccountModal'
+			@input='closeAccountModal'
+			:no-padding='true'
+			:hide-footer='true'
+		>
+			<tab-view :tabs='["Sign up", "Login"]' v-model="showAccountTab" padding='true' slot='main'>
 				<template slot='Sign up'>
 					<p style='margin-top: 0;' v-if='$store.state.token'>
 						<strong>Providing the token is still valid, this will create an admin account</strong>

frontend/src/components/AdminCategories.vue

@@ -1,44 +1,26 @@
 <template>
 	<div class='admin_categories'>
-		<modal-window v-model='showAddModal'>
-			<div
-				class='admin_categories__modal__overlay'
-				:class='{
-					"admin_categories__modal__overlay--show": loading
-				}'
-			>
-				<loading-icon></loading-icon>
-			</div>
-
-			<div class='admin_categories__modal'>
-				<p class='admin_categories__modal__text'>Add a category</p>
+		<modal-window v-model='showAddModal' :loading='loading'>
+			<div slot='main'>
+				<p>Add a category</p>
 				<fancy-input v-model='add.name' placeholder='Category name'></fancy-input>
 				<input type='color' class='button button--color_input' v-model='add.color' />
-				<div class='admin_categories__modal__buttons'>
-					<button class='button button--modal button-borderless' @click='toggleAddModal'>Cancel</button>
-					<button class='button button--modal button--green' @click='addCategory'>Add category</button>
-				</div>
 			</div>
-		</modal-window>
-
-		<modal-window v-model='showEditModal'>
-			<div
-				class='admin_categories__modal__overlay'
-				:class='{
-					"admin_categories__modal__overlay--show": loading
-				}'
-			>
-				<loading-icon></loading-icon>
+			<div slot='footer'>
+				<button class='button button--modal button--green' @click='addCategory'>Add category</button>
+				<button class='button button--modal' @click='toggleAddModal'>Cancel</button>
 			</div>
+		</modal-window>
 
-			<div class='admin_categories__modal'>
-				<p class='admin_categories__modal__text'>Edit this category</p>
+		<modal-window v-model='showEditModal' :loading='loading'>
+			<div slot='main'>
+				<p>Edit this category</p>
 				<fancy-input v-model='edit.name' placeholder='Category name'></fancy-input>
 				<input type='color' class='button button--color_input' v-model='edit.color' />
-				<div class='admin_categories__modal__buttons'>
-					<button class='button button--modal button--borderless' @click='toggleEditModal(null)'>Cancel</button>
-					<button class='button button--modal button--green' @click='editCategory'>Update category</button>
-				</div>
+			</div>
+			<div slot='footer'>
+				<button class='button button--modal button--green' @click='editCategory'>Update category</button>
+				<button class='button button--modal' @click='toggleEditModal(null)'>Cancel</button>
 			</div>
 		</modal-window>
 
@@ -210,18 +192,6 @@
 
 	.admin_categories {
 
-		@at-root #{&}__modal {
-			padding: 1rem;
-
-			@at-root #{&}__text {
-				margin-top: -0.5rem;
-				margin-bottom: 1rem;
-			}
-			@at-root #{&}__buttons {
-				margin-top: 0.5rem;
-			}
-		}
-
 
 		@at-root #{&}__category {
 			display: inline-flex;

frontend/src/components/AdminNewAdmin.vue

@@ -1,15 +1,21 @@
 <template>
 	<div class='admin_new_admin'>
 		<modal-window v-model='showModal'>
-			<div class='admin_new_admin__modal'>
+			<div slot='main' style='padding-top: 1rem;'>
 				<fancy-input
 					:value='link'
 					placeholder='Admin login link'
-					width='12.5rem'
+					width='100%'
 					style='margin-bottom: 0.5rem;'
 				></fancy-input>
-				<button class='button button--modal' @click='toggleModal'>OK</button>
 			</div>
+			<button
+				class='button button--modal'
+				slot='footer'
+				@click='toggleModal'
+			>
+				OK
+			</button>
 		</modal-window>
 
 		<div class='category_widget__box'>

frontend/src/components/ConfirmModal.vue

@@ -1,11 +1,11 @@
 <template>
 	<modal-window :value='showModal' @input='setShowModal'>
-		<div class='confirm_modal'>
+		<div slot='main' style='padding-top: 1rem;'>
 			<slot></slot>
-			<div class='confirm_modal__buttons'>
-				<button class='button button--modal button--borderless' @click='setShowModal(false)'>Cancel</button>
-				<button class='button button--modal' :class='buttonColor' @click='confirm'>{{text || 'OK'}}</button>
-			</div>
+		</div>
+		<div slot='footer'>
+			<button class='button button--modal' :class='buttonColor' @click='confirm'>{{text || 'OK'}}</button>
+			<button class='button button--modal' @click='setShowModal(false)'>Cancel</button>
 		</div>
 	</modal-window>
 </template>
@@ -52,14 +52,4 @@
 			this.setShowModal(this.value)
 		}
 	}
-</script>
-
-<style lang='scss' scoped>
-	.confirm_modal {
-		padding: 1rem;
-
-		@at-root #{&}__buttons {
-			margin-top: 1rem;
-		}
-	}
-</style>
+</script>

frontend/src/components/HeartButton.vue

@@ -1,7 +1,12 @@
 <template>
 	<div class='heart_button'>
-		<modal-window v-model='showModal' :close-button='true'>
-			<div class='heart_button__modal'>
+		<modal-window
+			v-model='showModal'
+			:close-button='true'
+			:hide-footer='true'
+			:no-padding='true'
+		>
+			<div class='heart_button__modal' slot='main'>
 				<div class='heart_button__modal__header'>Likes</div>
 				<div
 					class='heart_button__modal__user'

frontend/src/components/InputEditorCore.vue

@@ -66,26 +66,24 @@
 		</div>
 
 		<modal-window v-model='linkModalVisible'>
-			<div style='padding: 1rem;'>
-				<p style='margin-top: 0;'>
+			<div slot='main'>
+				<p>
 					Enter the web address in the input box below
 				</p>
 				<fancy-input placeholder='Text for link' width='100%' v-model='linkText'></fancy-input>
 				<fancy-input placeholder='Web address for link' width='100%' v-model='linkURL'></fancy-input>
+			</div>
 
-				<div>
-					<button class='button button--modal button--borderless' @click='setModalState("link", false)'>
-						Cancel
-					</button>
-					<button class='button button--green button--modal' @click='addLink'>
-						Add link
-					</button>
-				</div>
+			<div slot='footer'>
+				<button class='button button--green button--modal' @click='addLink'>
+					Add link
+				</button>
+				<button class='button button--modal' @click='setModalState("link", false)'>
+					Cancel
+				</button>
 			</div>
 		</modal-window>
 
-		<modal-window v-model='imageModalVisible'></modal-window>
-
 	</div>
 </template>
 

frontend/src/components/ReportPostModal.vue

@@ -1,22 +1,14 @@
 <template>
 	<div class='report_post_modal'>
-		<modal-window v-model='showModal'>
-			<div
-				class='report_post_modal__loading_overlay'
-				:class='{
-					"report_post_modal__loading_overlay--show": loading
-				}'
-			>
-				<loading-icon></loading-icon>
-			</div>
-			<div class='report_post_modal__modal'>
+		<modal-window v-model='showModal' :loading='loading'>
+			<div class='report_post_modal__modal' slot='main'>
 				<h3>Report this post</h3>
 				<div class='report_post_modal--margin'>Select a reason for reporting this post below:</div>
 				<select-button :options='reportOptions' v-model='selectedOption' class='report_post_modal--margin' :touch-disabled='true'></select-button>
-				<div >
-					<button class='button button--modal' @click.stop='setShowModal(false)'>Cancel</button>
-					<button class='button button--modal' @click.stop='submitReport'>Submit</button>
-				</div>
+			</div>
+			<div slot='footer'>
+				<button class='button button--modal' @click.stop='submitReport'>Submit</button>
+				<button class='button button--modal' @click.stop='setShowModal(false)'>Cancel</button>
 			</div>
 		</modal-window>
 	</div>
@@ -25,7 +17,6 @@
 <script>
 	import ModalWindow from './ModalWindow'
 	import SelectButton from './SelectButton'
-	import LoadingIcon from './LoadingIcon'
 
 	import AjaxErrorHandler from '../assets/js/errorHandler'
 
@@ -34,8 +25,7 @@
 		props: ['value', 'post-id'],
 		components: {
 			ModalWindow,
-			SelectButton,
-			LoadingIcon
+			SelectButton
 		},
 		data () {
 			return {
@@ -97,29 +87,8 @@
 		@at-root #{&}--margin {
 			margin: 0.5rem 0;
 		}
-		@at-root #{&}__loading_overlay {
-			position: absolute;
-			left: 0;
-			top: 0;
-			height: 100%;
-			width: 100%;
-			z-index: 5;
-			background-color: rgba(0, 0, 0, 0.3);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			pointer-events: none;
-			opacity: 0;
-
-			transition: all 0.2s;
-
-			@at-root #{&}--show {
-				pointer-events: all;
-				opacity: 1;
-			}
-		}
 		@at-root #{&}__modal {
-			padding: 1rem;
+			padding-top: 1rem;
 
 			h3 {
 				margin: 0;

frontend/src/components/ThreadPost.vue

@@ -17,11 +17,11 @@
 		></span>
 
 		<modal-window v-model='showShareModal' @click.stop='() => {}'>
-			<div style='padding: 0rem 1rem 1rem 1rem;'>
+			<div slot='main'>
 				<p>Copy this URL to share the post</p>
 				<fancy-input placeholder='Post URL' :value='postURL' width='100%'></fancy-input>
-				<button class='button button--modal' @click.stop='setShareModalState(false)'>OK</button>
 			</div>
+			<button slot='footer' class='button button--modal' @click.stop='setShareModalState(false)'>OK</button>
 		</modal-window>
 
 		<report-post-modal v-model='showReportPostModal' :post-id='post.id'></report-post-modal>

frontend/src/components/routes/AdminModerationBannedUsers.vue

@@ -41,8 +41,12 @@
 			</div>
 		</transition>
 
-		<modal-window v-model='$store.state.moderation.showAddNewBanModal' width='30rem'>
-			<div class='admin_moderation__add_new_ban_modal'>
+		<modal-window
+			v-model='$store.state.moderation.showAddNewBanModal'
+			width='30rem'
+			:no-padding='true'
+		>
+			<div class='admin_moderation__add_new_ban_modal' slot='main'>
 				<div
 					class='admin_moderation__add_new_ban_modal__overlay'
 					:class='{ "admin_moderation__add_new_ban_modal__overlay--show": loading }'
@@ -81,22 +85,23 @@
 						</select-button>
 					</div>
 
-					<div>
-						<div
-							class='button button--modal button--borderless'
-							@click='toggleShowAddNewBanModal'
-						>
-							Cancel
-						</div>
-						<button
-							class='button button--modal button--green'
-							type='submit'
-						>
-							Add ban
-						</button>
-					</div>
+					<input type='submit' style='display: none;' />
 				</form>
 			</div>
+			<div slot='footer'>
+				<button
+					class='button button--modal button--green'
+					@click='addBan'
+				>
+					Add ban
+				</button>
+				<button
+					class='button button--modal'
+					@click='toggleShowAddNewBanModal'
+				>
+					Cancel
+				</button>
+			</div>
 		</modal-window>
 	</div>
 </template>

frontend/src/components/routes/SettingsGeneral.vue

@@ -9,16 +9,14 @@
 			Are you sure you want to remove your profile picture?
 		</confirm-modal>
 
-		<modal-window v-model='picture.showProfilePictureModal' width='25rem' @input='hideProflePictureModal'>
-			<div
-				class='profile_picture_modal__overlay'
-				:class='{
-					"profile_picture_modal__overlay--show": picture.loading
-				}'
-			>
-				<loading-icon></loading-icon>
-			</div>
+		<modal-window
+			v-model='picture.showProfilePictureModal'
+			:loading='picture.loading'
+			width='25rem'
+			@input='hideProflePictureModal'
+		>
 			<div
+				slot='main'
 				class='profile_picture_modal'
 				:class='{ "profile_picture_modal--picture.dragging": picture.dragging  }'
 				@dragover='handleDragOver'
@@ -46,14 +44,16 @@
 						v-else
 					></div>
 				</div>
-				<div class='profile_picture_modal__buttons'>
-					<button class='button button--modal button--borderless' @click='hideProflePictureModal'>Cancel</button>
-					<button
-						class='button button--modal button--green'
-						:class='{ "button--disabled": !picture.dataURL }'
-						@click='uploadProfilePicture'
-					>Upload picture</button>
-				</div>
+			</div>
+			<div class='profile_picture_modal__buttons' slot='footer'>
+				<button
+					class='button button--modal button--green'
+					:class='{ "button--disabled": !picture.dataURL }'
+					@click='uploadProfilePicture'
+				>
+					Upload picture
+				</button>
+				<button class='button button--modal' @click='hideProflePictureModal'>Cancel</button>
 			</div>
 		</modal-window>
 
@@ -257,7 +257,7 @@
 	}
 
 	.profile_picture_modal {
-		padding: 1rem;
+		padding-top: 1rem;
 		transition: all 0.2s;
 
 		@at-root #{&}--picture .dragging {