butter/keanu-weblite
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Updated New Room Page

Browse source
This commit is contained in:
N Pex 2025-01-14 11:14:11 +00:00
parent 5294069b20
commit a700e19990
30 changed files with 1263 additions and 763 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/_variables.scss
View file

@ -4,6 +4,7 @@ $app-background: #f6f6f6;
$main-desktop-width: 900px;
$dialog-desktop-width: 940px;
$very-very-purple: #536dfe;
$light-purple: #8E9FF8;
$lighter-gray: #FDFBF9;
$chat-background: $background;

64
src/assets/css/chat.scss
View file

@ -1066,7 +1066,7 @@ body {
.option-text {
font-size: 13 * $chat-text-size;
border-top: 1px solid #e1e1e1;
// border-top: 1px solid #e1e1e1;
padding-top: 8px;
}
@ -1075,6 +1075,17 @@ body {
font-size: 16 * $chat-text-size;
}
.back-button {
font-weight: bold;
font-size: 12 * $chat-text-size;
[dir="rtl"] & {
.v-icon {
// Mirror the icon
transform: scale(-1, 1);
}
}
}
.header-button-left {
position: absolute;
top: 0px;
@ -1281,57 +1292,6 @@ body {
}
}
.create-room {
background-color: $background;
.v-avatar {
border: 1px solid #808080 !important;
}
.section {
background-color: white;
border-radius: 20px;
padding: 20px;
border: 1px solid #808080 !important;
position: relative;
}
.options {
display: flex;
width: 100%;
justify-content: flex-end;
color: black;
font-size: 14 * $chat-text-size;
font-weight: bold;
margin-left: 10px;
[dir="rtl"] & {
margin-left: initial;
margin-right: 10px;
}
text-transform: none !important;
}
.room-option {
.v-input {
margin: 0px;
}
}
.option-warning {
background: linear-gradient(0deg, #FFF3F3, #FFF3F3), #FFFBED;
border-radius: 8px;
padding: 18px;
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
.v-icon {
margin-right: 16px;
}
}
}
.room-link .v-input__slot::before {
/* Remove text underline */
border-style: none !important;

71
src/assets/css/create.scss
View file

@ -1,8 +1,64 @@
@import "@/assets/css/main.scss";
.create-root {
background-color: $background;
user-select: none;
.v-avatar {
border: 1px solid #808080 !important;
}
.section {
background-color: white;
border-radius: 20px;
padding: 20px;
border: 1px solid #808080 !important;
position: relative;
}
.options {
display: flex;
width: 100%;
justify-content: flex-end;
color: black;
font-size: 14 * $chat-text-size;
font-weight: bold;
margin-left: 10px;
[dir="rtl"] & {
margin-left: initial;
margin-right: 10px;
}
text-transform: none !important;
}
.room-option {
.v-input {
margin: 0px;
}
}
.option-warning {
background: linear-gradient(0deg, #FFF3F3, #FFF3F3), #FFFBED;
border-radius: 8px;
padding: 18px;
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
.v-icon {
margin-right: 16px;
}
}
/* Make secondary inputs (e.g. topic) */
.v-input.v-text-field--filled.v-text-field--rounded .v-input__slot {
background-color: #f5f5f5;
border-radius: 4px;
}
.create-loggedin {
text-align: center;
button {
@ -34,15 +90,12 @@
.create-title {
color: #000;
text-align: center;
font-family: "Poppins";
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 108.5%; /* 30.38px */
letter-spacing: -0.8px;
white-space: pre-line;
margin-top: 50px;
&.no-icon {
margin-top: 122px;
}
}
.create-info {
@ -135,4 +188,10 @@
flex-direction: column;
margin-top: -20px;
}
.v-btn:not(.back-button) {
border-radius: 24px;
min-height: 48px !important;
min-width: 200px !important;
}
}

76
src/assets/css/typography.scss Normal file
View file

@ -0,0 +1,76 @@
@import "@/assets/css/main.scss";
.h3-bold {
font-family: "Poppins";
font-style: normal;
font-size: 24 * $chat-text-size;
font-weight: 700;
line-height: 28.8 * $chat-text-size;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.paragraph {
font-family: "Inter";
font-size: 16 * $chat-text-size;
font-weight: 400;
line-height: 18.72 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0,0,0, 0.7);
&.paragraph-button {
color: $very-very-purple;
}
}
.paragraph-bold {
font-family: "Inter";
font-size: 16 * $chat-text-size;
font-weight: 600;
line-height: 18.72 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0,0,0);
margin-bottom: 3 * $chat-text-size;
}
.caption-1 {
font-family: "Inter";
font-size: 14 * $chat-text-size;
font-weight: 400;
line-height: 16.38 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0,0,0,0.65);
}
.caption-1-gray {
font-family: "Inter";
font-size: 14 * $chat-text-size;
font-weight: 400;
line-height: 16.38 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0,0,0,0.65);
}
.caption-2 {
font-family: "Inter";
font-size: 10 * $chat-text-size;
font-weight: 400;
line-height: 11.7 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0,0,0,0.60);
}

17
src/assets/icons/ic_camera.vue Normal file
View file

@ -0,0 +1,17 @@
<template>
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.700195 4.59961C0.700195 2.39047 2.49106 0.599609 4.7002 0.599609H18.0967C20.3059 0.599609 22.0967 2.39047 22.0967 4.59961V21.9962H4.7002C2.49106 21.9962 0.700195 20.2053 0.700195 17.9962V4.59961Z"
fill="#FF3913" />
<g clip-path="url(#clip0_704_4275)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.9502 7.48911C18.1987 7.58811 18.4272 7.73711 18.6202 7.92961C18.9917 8.30111 19.2002 8.80511 19.2002 9.33011C19.2002 11.1126 19.2002 14.0866 19.2002 15.8691C19.2002 16.3941 18.9917 16.8981 18.6202 17.2696C18.2487 17.6411 17.7447 17.8496 17.2197 17.8496C14.5297 17.8496 8.8707 17.8496 6.1807 17.8496C5.6557 17.8496 5.1517 17.6411 4.7802 17.2696C4.4087 16.8981 4.2002 16.3941 4.2002 15.8691C4.2002 13.9451 4.2002 10.6311 4.2002 8.92861C4.2002 8.50961 4.3667 8.10811 4.6627 7.81211C4.9587 7.51611 5.3602 7.34961 5.7792 7.34961C5.7797 7.34961 5.7797 7.34961 5.7802 7.34961C6.0082 7.34961 6.2037 7.18611 6.2437 6.96161C6.2557 6.89561 6.2677 6.82861 6.2797 6.76161C6.4252 5.94461 7.1357 5.34961 7.9657 5.34961C9.1847 5.34961 11.2157 5.34961 12.4347 5.34961C13.2647 5.34961 13.9752 5.94461 14.1207 6.76161L14.1212 6.76211C14.1742 7.06111 14.4097 7.28861 14.7002 7.33911V6.96061C14.7002 6.73261 14.7907 6.51311 14.9522 6.35161C15.1137 6.19011 15.3332 6.09961 15.5612 6.09961C15.9812 6.09961 16.6692 6.09961 17.0892 6.09961C17.3172 6.09961 17.5367 6.19011 17.6982 6.35161C17.8597 6.51311 17.9502 6.73261 17.9502 6.96061V7.48911ZM10.2002 8.34961C7.9927 8.34961 6.2002 10.1421 6.2002 12.3496C6.2002 14.5571 7.9927 16.3496 10.2002 16.3496C12.4077 16.3496 14.2002 14.5571 14.2002 12.3496C14.2002 10.1421 12.4077 8.34961 10.2002 8.34961ZM17.9502 9.76911C17.9502 9.52511 17.8532 9.29111 17.6807 9.11861C17.5087 8.94661 17.2747 8.84961 17.0307 8.84961C16.7552 8.84961 16.3952 8.84961 16.1197 8.84961C15.8757 8.84961 15.6417 8.94661 15.4697 9.11861C15.2972 9.29111 15.2002 9.52511 15.2002 9.76911C15.2002 9.97561 15.2002 10.2236 15.2002 10.4301C15.2002 10.6741 15.2972 10.9081 15.4697 11.0806C15.6417 11.2526 15.8757 11.3496 16.1197 11.3496C16.3952 11.3496 16.7552 11.3496 17.0307 11.3496C17.2747 11.3496 17.5087 11.2526 17.6807 11.0806C17.8532 10.9081 17.9502 10.6741 17.9502 10.4301V9.76911Z"
fill="white" />
</g>
<defs>
<clipPath id="clip0_704_4275">
<rect width="16" height="16" fill="white" transform="translate(3.7002 3.59961)" />
</clipPath>
</defs>
</svg>
</template>

12
src/assets/icons/room_avatar_placeholder.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M35.9999 30.4961L25.2856 49.0538H46.7142L35.9999 30.4961ZM35.9999 35.4448L29.5714 46.5794H42.4285L35.9999 35.4448Z"
fill="#F4F952" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M35.9997 22.248L18.1426 53.1775H53.8569L35.9997 22.248ZM35.9997 27.1968L22.4283 50.7032H49.5711L35.9997 27.1968Z"
fill="#F4F952" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M36 14L11 57.3013H61L36 14ZM36 18.9487L15.2857 54.8269H56.7143L36 18.9487Z" fill="#F4F952" />
</svg>
</template>

21
src/assets/icons/room_type_channel.vue Normal file
View file

File diff suppressed because one or more lines are too long

10
src/assets/icons/room_type_filedrop.vue Normal file
View file

@ -0,0 +1,10 @@
<template>
<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.3037 15.9221C24.8876 15.9222 24.5503 16.2596 24.5503 16.6758V20.421H2.39235V16.6758C2.39235 16.2595 2.05496 15.9221 1.63867 15.9221C1.22242 15.9221 0.885 16.2595 0.885 16.6758V22.3857C0.885 23.8906 2.1093 25.1146 3.61446 25.1146H23.33C24.8342 25.1146 26.0577 23.8905 26.0577 22.3857V16.6758V16.6757C26.0573 16.2596 25.7203 15.9222 25.304 15.9221C25.3039 15.9221 25.3038 15.9221 25.3037 15.9221ZM23.3303 23.6073H3.61443C2.94038 23.6073 2.39231 23.0592 2.39229 22.3857C2.39229 22.3857 2.39229 22.3857 2.39229 22.3857L2.39238 21.9282H24.5506V22.3854C24.5506 22.3854 24.5506 22.3854 24.5506 22.3855C24.5503 23.0592 24.0029 23.6073 23.3303 23.6073Z"
fill="black" stroke="black" stroke-width="0.23" />
<path
d="M20.9884 11.8001L20.9071 11.7188C21.1567 11.4692 21.1567 11.0648 20.9071 10.8155L20.9884 10.7342C20.9884 10.7342 20.9884 10.7341 20.9884 10.7341C20.6938 10.4396 20.2169 10.44 19.9227 10.7342L14.2263 16.4301V1.63867C14.2263 1.22242 13.8889 0.885 13.4726 0.885C13.0563 0.885 12.719 1.22239 12.719 1.63867V16.43L7.02366 10.7342L6.94234 10.8155L7.02365 10.7342C6.72909 10.4396 6.25212 10.44 5.95794 10.7342L5.95794 10.7342C5.66345 11.0287 5.66337 11.5059 5.958 11.8001L12.9395 18.7825L13.0209 18.7012L12.9395 18.7825C13.081 18.9239 13.2725 19.0032 13.4725 19.0032C13.6726 19.0032 13.8641 18.924 14.0055 18.7825L20.9884 11.8001Z"
fill="black" stroke="black" stroke-width="0.23" />
</svg>
</template>

9
src/assets/icons/room_type_room.vue Normal file
View file

@ -0,0 +1,9 @@
<template>
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="11" width="18" height="13" rx="3" fill="currentColor" />
<path d="M22.1029 28L14.2058 22.5L22 22.5L22.1029 28Z" fill="currentColor" />
<path
d="M25.0811 9.52329H19.6726V3.91892C19.6726 1.76351 17.9091 0 15.7537 0H3.91891C1.76351 0 0 1.76351 0 3.91892V11.4828C0 13.6382 1.76351 15.4017 3.91891 15.4017H5.68243V18.6929C5.68243 18.9669 5.83857 19.2409 6.07432 19.3588C6.19219 19.4369 6.31007 19.4767 6.46621 19.4767C6.62235 19.4767 6.74023 19.4369 6.8581 19.3588L9.28753 17.9091V21.0044C9.28753 23.1599 11.051 24.9234 13.2064 24.9234H15.518L22.1021 28.8821C22.22 28.9602 22.3761 29 22.494 29C22.6119 29 22.768 28.9602 22.8859 28.8821C23.1216 28.726 23.2778 28.4902 23.2778 28.2162V24.925H25.0811C27.2365 24.925 29 23.1615 29 21.006V13.4422C29 11.2868 27.2365 9.52329 25.0811 9.52329ZM7.24999 17.3213V14.6561C7.24999 14.2244 6.89791 13.8723 6.46621 13.8723H3.91891C2.62538 13.8723 1.56757 12.8145 1.56757 11.521V3.91895C1.56757 2.62541 2.62538 1.5676 3.91891 1.5676H15.7537C17.0472 1.5676 18.1051 2.62541 18.1051 3.91895V9.48349H13.2463C11.0909 9.48349 9.32734 11.247 9.32734 13.4024V16.0676L7.24999 17.3213ZM27.4324 21.006C27.4324 22.2996 26.3746 23.3574 25.0811 23.3574H22.5338C22.1021 23.3574 21.75 23.7095 21.75 24.1412V26.8063L16.1854 23.4753C16.0676 23.3972 15.9114 23.3574 15.7936 23.3574H13.2463C11.9527 23.3574 10.8949 22.2996 10.8949 21.006V13.4422C10.8949 12.1487 11.9527 11.0908 13.2463 11.0908H25.0811C26.3746 11.0908 27.4324 12.1487 27.4324 13.4422V21.006Z"
fill="black" />
</svg>
</template>

41
src/assets/translations/en.json
View file

@ -150,11 +150,12 @@
"change": "Change"
},
"new_room": {
"title": "New Group Chat",
"new_room": "New Room",
"create": "Create",
"next": "Next",
"name_room": "Room name",
"room_topic": "Add a description if you like",
"room_topic": "Add a description if you'd like",
"join_permissions": "Join permissions",
"set_join_permissions": "Set Join Permissions",
"join_permissions_info": "These permissions determine how people can join the room and how easily others can be invited. They can be changed anytime.",
@ -166,8 +167,7 @@
"invite_info": "Only people added",
"invite_description": "Choose from a list or search by account ID",
"status_creating": "Creating room",
"status_avatar_total": "Uploading avatar: {count} of {total}",
"status_avatar": "Uploading avatar: {count}",
"status_avatar": "Uploading avatar",
"room_name_limit_error_msg": "Maximum 50 characters allowed",
"colon_not_allowed": "Colon is not allowed",
"options": "Options"
@ -212,13 +212,32 @@
"share_qr": "Share QR",
"qr_image_copied": "Image copied to clipboard"
},
"create": {
"title": "Choose an experience",
"room_type_room_name": "Group Chat",
"room_type_room_description": "Connect a group of people",
"room_type_channel_name": "Channel",
"room_type_channel_description": "Broadcast news and ideas",
"room_type_filedrop_name": "File Drop",
"room_type_filedrop_description": "Receive files and tips",
"field_required": "This field is required",
"topic_too_long": "Maximum 500 characters allowed"
},
"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"
"channel_topic_label": "Your description will be displayed when people join your channel.",
"error_channel": "Failed to create channel",
"status_creating": "Creating channel"
},
"createfiledrop": {
"title": "Create a File Drop",
"info": "File drops are a safe space to receive files from anyone.",
"filedrop_name": "Name your file drop",
"error_filedrop": "Failed to create file drop",
"status_creating": "Creating file drop"
},
"profile": {
"title": "My Profile",
@ -331,8 +350,9 @@
"download_chat": "Download chat",
"read_only_room": "Read Only",
"read_only_room_info": "Only admins and moderators are allowed to send to the room.",
"message_retention": "Message History",
"message_retention_info": "Messages sent within this time frame are viewable by anyone with the link.",
"message_retention": "Limit History",
"message_retention_info": "Set a limit for how long to keep messages",
"limit_history_info": "Keep messages for {period}",
"message_retention_none": "Off",
"message_retention_4_week": "4 weeks",
"message_retention_2_week": "2 weeks",
@ -340,12 +360,13 @@
"message_retention_1_day": "1 day",
"message_retention_8_hours": "8 hours",
"message_retention_1_hour": "1 Hour",
"make_public": "Make Public",
"make_public_warning": "warning: Full message history will be visible to new participants",
"direct_link": "My Direct Link",
"direct_link_desc": "It's ready to share! A new direct room will open each time someone opens the link.",
"shared_room_number": "You share {count} rooms with {name}",
"shared_room_number_more": "You share more than {count} rooms with {name}"
"shared_room_number_more": "You share more than {count} rooms with {name}",
"message_history": "Message History",
"message_history_info": "Allow people to see messages sent before they joined",
"message_history_warning": "warning: Full message history will be visible to new participants"
},
"room_info_sheet": {
"this_room": "This room",