From 318605446bb00f69ee6cccd8037409e08fe25d42 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Tue, 9 Mar 2021 12:51:00 +0100
Subject: [PATCH] layout add custom station modal

---
 src/views/Favorites.vue | 66 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 58 insertions(+), 8 deletions(-)

diff --git a/src/views/Favorites.vue b/src/views/Favorites.vue
index e4fa44a..f3c4d7b 100644
--- a/src/views/Favorites.vue
+++ b/src/views/Favorites.vue
@@ -64,8 +64,25 @@
 				</template>
 			</EmptyContent>
 			<Modal v-if="modal" @close="closeModal">
-				<div class="modal__content">
-					Hello world
+				<div class="modalContent">
+					<h2 class="oc-dialog-title">
+						Add custom station
+					</h2>
+					<form>
+						<label for="stationName">Name:</label>
+						<input id="stationName" type="text">
+						<label for="streamUrl">Stream url:</label>
+						<input id="streamUrl" type="text">
+						<label for="faviconUrl">Favicon url:</label>
+						<input id="faviconUrl" type="text">
+					</form>
+					<div class="formControls">
+						<!-- FIXME: Use nextcloud-vue button component -->
+						<button class="icon-add-white primary button new-button"
+							@click="addCustomStation()">
+							Add station
+						</button>
+					</div>
 				</div>
 			</Modal>
 		</AppContent>
@@ -114,7 +131,7 @@ export default {
 		showSidebar: false,
 		sidebarStation: {},
 		tableData: [],
-		modal: false,
+		modal: true,
 	}),
 	computed: {
 		...mapGetters([
@@ -212,11 +229,16 @@ export default {
 			this.modal = false
 		},
 
+		addCustomStation() {
+			console.log('Add custom station')
+			// this.addFavorite(station)
+		},
+
 	},
 }
 </script>
 
-<style>
+<style lang="scss">
 
 .controls {
 	position: sticky;
@@ -237,10 +259,38 @@ export default {
 	display: none;
 }
 
-.modal__content {
-	width: 50vw;
-	text-align: center;
-	margin: 10vw 0;
+.modalContent {
+	max-width: 300px;
+	width: 100%;
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	h2 {
+		// FIXME: No flex gap support in Chrome
+		margin-bottom: 15px;
+	}
+
+	form {
+		flex-grow: 1;
+		display: grid;
+		grid-template-columns: 100px 1fr;
+		align-items: center;
+		// FIXME: No flex gap support in Chrome
+		margin-bottom: 15px;
+	}
+
+	.formControls {
+		display: flex;
+		justify-content: flex-end;
+		margin-right: 40px;
+
+		.button {
+			padding-left: 35px;
+			padding-right: 15px;
+			background-position: 10px center;
+		}
+	}
 }
 
 @media only screen and (max-width: 1024px) {