diff --git a/src/assets/css/getlink.scss b/src/assets/css/create.scss similarity index 88% rename from src/assets/css/getlink.scss rename to src/assets/css/create.scss index e923559..5e696f8 100644 --- a/src/assets/css/getlink.scss +++ b/src/assets/css/create.scss @@ -1,16 +1,16 @@ @import "@/assets/css/main.scss"; -.getlink-root { +.create-root { background-color: $background; - .getlink-loggedin { + .create-loggedin { text-align: center; button { min-width: 200px !important; } } - .getlink-image { + .create-image { text-align: center; max-width: 325px; max-height: 257px; @@ -21,7 +21,18 @@ } } - .getlink-title { + .create-image-small { + text-align: center; + max-width: 72px; + max-height: 72px; + width: 100%; + .v-icon__component { + width: unset; + height: unset; + } + } + + .create-title { color: #000; text-align: center; font-family: "Poppins"; @@ -34,7 +45,7 @@ margin-top: 50px; } - .getlink-info { + .create-info { color: #000; text-align: center; font-feature-settings: "clig" off, "liga" off; @@ -47,7 +58,7 @@ margin: 15px 9px 40px 9px; } - .getlink-subtitle { + .create-subtitle { color: #000; text-align: center; font-feature-settings: "clig" off, "liga" off; @@ -95,7 +106,7 @@ color: black; } - .getlink-share { + .create-share { color: #161616; text-align: center; font-family: "Inter"; @@ -118,7 +129,7 @@ } } - .getlink-buttons { + .create-buttons { display: flex; align-items: center; flex-direction: column; diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json index 84c2c60..fc99ded 100644 --- a/src/assets/translations/en.json +++ b/src/assets/translations/en.json @@ -137,7 +137,10 @@ "got_it": "Got it", "no_past_messages": "Welcome! For your security, past messages are not available.", "direct_info": "Hi, {you}. You’re in a private chat with {user}.", - "direct_private_chat": "Direct Message" + "direct_private_chat": "Direct Message", + "join_channel": "All set! Invite people to join you: {link}", + "info_retention": "🕓 Messages sent within {time} are viewable by anyone with the link.", + "change": "Change" }, "new_room": { "new_room": "New Room", @@ -202,6 +205,14 @@ "share_qr": "Share QR", "qr_image_copied": "Image copied to clipboard" }, + "createchannel": { + "title": "Create a Channel", + "info": "Broadcast news or knowledge in any format—video, podcast, text, pictures or PDFs.", + "channel_name": "Name your channel", + "channel_topic": "Describe it", + "name_required": "Channel name is required", + "error_channel": "Failed to create channel" + }, "profile": { "title": "My Profile", "temporary_identity": "This identity is temporary. Set a password to use it again", diff --git a/src/components/CreateChannel.vue b/src/components/CreateChannel.vue new file mode 100644 index 0000000..bcedf7b --- /dev/null +++ b/src/components/CreateChannel.vue @@ -0,0 +1,280 @@ + + + + + + + camera_alt + + {{ $t("createchannel.title") }} + {{ $t("createchannel.info") }} + + + + + + + + {{ this.message }} + + + + {{ $t("getlink.next") }} + {{ + $t("menu.login") + }} + + + + + + + {{ $t("getlink.qr_image_copied") }} + + + + + + \ No newline at end of file diff --git a/src/components/GetLink.vue b/src/components/GetLink.vue index d062129..f78b884 100644 --- a/src/components/GetLink.vue +++ b/src/components/GetLink.vue @@ -1,9 +1,9 @@ - + - $vuetify.icons.getlink - {{ $t("getlink.title") }} - {{ $t("getlink.info") }} + $vuetify.icons.getlink + {{ $t("getlink.title") }} + {{ $t("getlink.info") }} - + - {{ $t("getlink.hello", { user: $matrix.currentUserDisplayName }) }} - {{ $t("getlink.ready_to_share") }} + {{ $t("getlink.hello", { user: $matrix.currentUserDisplayName }) }} + {{ $t("getlink.ready_to_share") }} - + {{ $t("getlink.share_qr") }} - + {{ $t("getlink.continue") }} {{ $t("getlink.different_link") }} @@ -181,9 +181,6 @@ export default { }) } }, - handleCreateRoom() { - this.$navigation.push({ name: "CreateRoom" }); - }, onUsernameEnter() { this.handleLogin(); }, @@ -246,5 +243,5 @@ export default { \ No newline at end of file diff --git a/src/components/roomTypeMixin.js b/src/components/roomTypeMixin.js index 24cef13..5b6ce3e 100644 --- a/src/components/roomTypeMixin.js +++ b/src/components/roomTypeMixin.js @@ -1,4 +1,4 @@ -import { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE, ROOM_TYPE_DEFAULT, STATE_EVENT_ROOM_TYPE } from "../plugins/utils"; +import { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE, ROOM_TYPE_DEFAULT, STATE_EVENT_ROOM_TYPE, ROOM_TYPE_CHANNEL } from "../plugins/utils"; export default { data() { @@ -34,7 +34,7 @@ export default { if (e) { const roomType = e.getContent().type; // Validate value, or return default - if ([ROOM_TYPE_FILE_MODE, ROOM_TYPE_VOICE_MODE].includes(roomType)) { + if ([ROOM_TYPE_FILE_MODE, ROOM_TYPE_VOICE_MODE, ROOM_TYPE_CHANNEL].includes(roomType)) { this.roomDisplayType = roomType; } else { this.roomDisplayType = ROOM_TYPE_DEFAULT; diff --git a/src/plugins/utils.js b/src/plugins/utils.js index 3ba78ee..e3244d8 100644 --- a/src/plugins/utils.js +++ b/src/plugins/utils.js @@ -12,6 +12,7 @@ export const STATE_EVENT_ROOM_DELETED = "im.keanu.room_deleted"; export const ROOM_TYPE_DEFAULT = "im.keanu.room_type_default"; export const ROOM_TYPE_VOICE_MODE = "im.keanu.room_type_voice"; export const ROOM_TYPE_FILE_MODE = "im.keanu.room_type_file"; +export const ROOM_TYPE_CHANNEL = "im.keanu.room_type_channel"; export const STATE_EVENT_ROOM_TYPE = "im.keanu.room_type"; diff --git a/src/router/index.js b/src/router/index.js index 6be80a1..9330cc8 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -7,6 +7,7 @@ import Login from '../components/Login.vue' import Profile from '../components/Profile.vue' import CreateRoom from '../components/CreateRoom.vue' import GetLink from '../components/GetLink.vue' +import CreateChannel from '../components/CreateChannel.vue' import User from '../models/user' import util from '../plugins/utils' @@ -60,6 +61,11 @@ const routes = [ name: 'GetLink', component: GetLink, }, + { + path: '/createchannel', + name: 'CreateChannel', + component: CreateChannel, + }, { path: '/login', name: 'Login', @@ -97,7 +103,7 @@ const router = new VueRouter({ }); router.beforeEach((to, from, next) => { - const publicPages = ['/login', '/createroom', '/getlink']; + const publicPages = ['/login', '/createroom', '/getlink', '/createchannel']; var authRequired = !publicPages.includes(to.path); const loggedIn = router.app.$store.state.auth.user;