Add guest username setting to lobby

Signed-off-by: Marco Ambrosini <[email protected]>
nextcloud · Mar 23, 2020 · f6b2b1b · f6b2b1b
1 parent e9a9b7d
commit f6b2b1b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/components/LobbyScreen.vue b/src/components/LobbyScreen.vue
@@ -19,20 +19,28 @@
   -->
 
 <template>
-	<div class="lobby emptycontent">
-		<div class="icon icon-lobby" />
-		<h2>{{ currentConversationName }}</h2>
-		<p>{{ message }}</p>
+	<div class="lobby">
+		<div class="lobby emptycontent">
+			<div class="icon icon-lobby" />
+			<h2>{{ currentConversationName }}</h2>
+			<p>{{ message }}</p>
+		</div>
+		<SetGuestUsername />
 	</div>
 </template>
 
 <script>
 import moment from '@nextcloud/moment'
+import SetGuestUsername from './SetGuestUsername'
 
 export default {
 
 	name: 'LobbyScreen',
 
+	components: {
+		SetGuestUsername,
+	},
+
 	computed: {
 
 		token() {
@@ -64,3 +72,12 @@ export default {
 
 }
 </script>
+
+<style lang="scss" scoped>
+
+.lobby {
+	display: flex;
+	flex-direction: column;
+}
+
+</style>
diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue
@@ -115,6 +115,7 @@ export default {
 /** Username form for guest users */
 .username-form {
 	padding: 0 12px;
+	margin:auto;
 	& .icon-rename {
 		margin-left: 8px;
 		padding-left: 36px;
@@ -125,7 +126,7 @@ export default {
 	}
 	&__input {
 		padding-right: var(--clickable-area);
-		width: 300px;
+		width: 230px;
 	}
 	&__button {
 		margin-left: -44px;