Tweaks to informational architecture 1.1 (#7052)
* Move user avatar to Space panel * Add room list header for 'Home' or 'Space Name' to room list Add existing Space context menus to room list header * Re-add pending room join spinner * Iterate RoomListHeader plus context menu * Iterate space context menu * Iterate room list + interactions * Move DND to new iA model * Replace composer custom status management with usermenu one * Cull Quick Actions * Iterate minimized room list state * delint * Merge the RoomListNumResults into the RoomListHeader * Make the search shortcut prompt semi-bold * Iterate RoomListHeader based on design review * Iterate UserMenu based on feedback * Add name to expanded spacepanel usermenu button * i18n * Make room sub list aux button components more generic * Change left panel explore button to only refer to room directory * Iterate RoomListHeader * Fix custom user status input field width in Chrome * Bring back Notification settings button * delint * i18n * post-merge fix * iterate pr * Remove unused state * update copy * Apply suggestions from PR review * delint * Update invite iconography * Iterate Space context menu to match Figma * Fix chevron alignment * Fix edge case for RoomListHeader on metaspaces * Wire up general rageshake-driven feedback mechanism * Add IA1.1 info toast * add missing alt attribute * delint * delint * tweak ia toast priority * e2e test account for new toast * autofocus feedback field and remove old subheading * tweak copy * Iterate space panel colours to match Figma * Iterate PR * delint * Fix feedback submission with object setting values * iterate based on review * Tweak colours and update splash image * Tweaks based on review * Remove room list prompt, made redundant by the big fat `+` * Fix edge cases around User Menu positioning and dnd * Add missing import, bad merge? * Update aria label in e2e test * Fix room list space rooms context menu explore button behaviour * Tweak copy * Revert order of options in the UserMenu * Tweak copy * i18n
3
res/img/element-icons/flask.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2.5C13 2.77614 12.7761 3 12.5 3C12.2239 3 12 2.77614 12 2.5C12 2.22386 12.2239 2 12.5 2C12.7761 2 13 2.22386 13 2.5ZM11 5C11 5.55228 10.5523 6 10 6C9.44772 6 9 5.55228 9 5C9 4.44772 9.44772 4 10 4C10.5523 4 11 4.44772 11 5ZM14.7778 11.3056L18.6333 18.2389C18.8466 18.6247 18.9556 19.0594 18.9495 19.5002C18.9434 19.9409 18.8225 20.3725 18.5987 20.7522C18.3749 21.132 18.0559 21.4468 17.6732 21.6656C17.2906 21.8845 16.8575 21.9997 16.4167 22H7.58334C7.14253 21.9997 6.70943 21.8845 6.32677 21.6656C5.94412 21.4468 5.62514 21.132 5.40132 20.7522C5.17751 20.3725 5.0566 19.9409 5.05052 19.5002C5.04444 19.0594 5.15341 18.6247 5.36667 18.2389L9.22222 11.3056L9.19445 8.11111H8.66667C8.51933 8.11111 8.37802 8.05258 8.27383 7.94839C8.16965 7.84421 8.11111 7.7029 8.11111 7.55556C8.11111 7.40821 8.16965 7.26691 8.27383 7.16272C8.37802 7.05853 8.51933 7 8.66667 7H15.3333C15.4807 7 15.622 7.05853 15.7262 7.16272C15.8304 7.26691 15.8889 7.40821 15.8889 7.55556C15.8889 7.7029 15.8304 7.84421 15.7262 7.94839C15.622 8.05258 15.4807 8.11111 15.3333 8.11111H14.8056L14.7778 11.3056ZM10.3333 11.4389C10.3338 11.5362 10.3089 11.6319 10.2611 11.7167L8.88334 14.2C10.0819 14.237 11.271 14.4256 12.4222 14.7611C13.4944 15.0808 14.6039 15.2583 15.7222 15.2889L13.7389 11.7167C13.6911 11.6319 13.6662 11.5362 13.6667 11.4389L13.6944 8.11111H10.3056L10.3333 11.4389ZM14.5 5C14.7761 5 15 4.77614 15 4.5C15 4.22386 14.7761 4 14.5 4C14.2239 4 14 4.22386 14 4.5C14 4.77614 14.2239 5 14.5 5Z" fill="#737D8C"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.6 KiB |
3
res/img/element-icons/roomlist/dnd-avatar-mask.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9999 16.0494C32 16.0329 32 16.0165 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C18.1985 32 20.2935 31.5566 22.2003 30.7543C21.4347 29.3403 21 27.7209 21 26C21 20.4772 25.4772 16 31 16C31.3375 16 31.671 16.0167 31.9999 16.0494Z" fill="#C1C6CD"/>
|
||||
</svg>
|
After Width: | Height: | Size: 440 B |
3
res/img/element-icons/roomlist/dnd-cross.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.3333 7.3335V8.66683H10.5533L13.56 11.6735C14.26 10.6202 14.6667 9.36016 14.6667 8.00016C14.6667 4.32016 11.68 1.3335 8.00001 1.3335C6.64001 1.3335 5.38001 1.74016 4.32668 2.44016L9.22001 7.3335H11.3333ZM0.926682 2.8135L2.44001 4.32683C1.74001 5.38016 1.33335 6.64016 1.33335 8.00016C1.33335 11.6802 4.32001 14.6668 8.00001 14.6668C9.36001 14.6668 10.62 14.2602 11.6733 13.5602L13.1867 15.0735L14.1267 14.1335L1.87335 1.8735L0.926682 2.8135ZM4.66668 7.3335H5.44668L6.78001 8.66683H4.66668V7.3335Z" fill="#737D8C"/>
|
||||
</svg>
|
After Width: | Height: | Size: 630 B |
3
res/img/element-icons/roomlist/dnd.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM17 13H7V11H17V13Z" fill="#17191C"/>
|
||||
</svg>
|
After Width: | Height: | Size: 241 B |
|
@ -1,7 +0,0 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1" fill="white">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9ZM6.85231 7.13323L8.0052 5.98033C8.2981 5.68744 8.2981 5.21256 8.0052 4.91967C7.71231 4.62678 7.23744 4.62678 6.94454 4.91967L4.46967 7.39454C4.17678 7.68744 4.17678 8.16231 4.46967 8.4552L6.94454 10.9301C7.23744 11.223 7.71231 11.223 8.0052 10.9301C8.2981 10.6372 8.2981 10.1623 8.0052 9.86942L6.76901 8.63323H10.3537C11.0454 8.63323 11.725 9.27325 11.725 10.2166C11.725 11.1599 11.0454 11.7999 10.3537 11.7999H9.36384C8.94962 11.7999 8.61384 12.1357 8.61384 12.5499C8.61384 12.9641 8.94962 13.2999 9.36384 13.2999H10.3537C12.0051 13.2999 13.225 11.8506 13.225 10.2166C13.225 8.58255 12.0051 7.13323 10.3537 7.13323H6.85231Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9ZM6.85231 7.13323L8.0052 5.98033C8.2981 5.68744 8.2981 5.21256 8.0052 4.91967C7.71231 4.62678 7.23744 4.62678 6.94454 4.91967L4.46967 7.39454C4.17678 7.68744 4.17678 8.16231 4.46967 8.4552L6.94454 10.9301C7.23744 11.223 7.71231 11.223 8.0052 10.9301C8.2981 10.6372 8.2981 10.1623 8.0052 9.86942L6.76901 8.63323H10.3537C11.0454 8.63323 11.725 9.27325 11.725 10.2166C11.725 11.1599 11.0454 11.7999 10.3537 11.7999H9.36384C8.94962 11.7999 8.61384 12.1357 8.61384 12.5499C8.61384 12.9641 8.94962 13.2999 9.36384 13.2999H10.3537C12.0051 13.2999 13.225 11.8506 13.225 10.2166C13.225 8.58255 12.0051 7.13323 10.3537 7.13323H6.85231Z" fill="black"/>
|
||||
<path d="M8.0052 5.98033L7.29995 5.27508L7.29995 5.27508L8.0052 5.98033ZM6.85231 7.13323L6.14705 6.42797L4.44442 8.13061H6.85231V7.13323ZM6.94454 4.91967L7.6498 5.62492L6.94454 4.91967ZM4.46967 7.39454L3.76442 6.68929L3.76442 6.68929L4.46967 7.39454ZM4.46967 8.4552L3.76442 9.16046H3.76442L4.46967 8.4552ZM6.94454 10.9301L7.6498 10.2248L7.6498 10.2248L6.94454 10.9301ZM6.76901 8.63323V7.63585H4.36113L6.06376 9.33848L6.76901 8.63323ZM9 17.9974C13.9691 17.9974 17.9974 13.9691 17.9974 9H16.0026C16.0026 12.8674 12.8674 16.0026 9 16.0026V17.9974ZM0.00262225 9C0.00262225 13.9691 4.03089 17.9974 9 17.9974V16.0026C5.13256 16.0026 1.99738 12.8674 1.99738 9H0.00262225ZM9 0.00262225C4.03089 0.00262225 0.00262225 4.03089 0.00262225 9H1.99738C1.99738 5.13256 5.13256 1.99738 9 1.99738V0.00262225ZM17.9974 9C17.9974 4.03089 13.9691 0.00262225 9 0.00262225V1.99738C12.8674 1.99738 16.0026 5.13256 16.0026 9H17.9974ZM7.29995 5.27508L6.14705 6.42797L7.55756 7.83848L8.71046 6.68558L7.29995 5.27508ZM7.29995 5.62492C7.20334 5.52832 7.20334 5.37168 7.29995 5.27508L8.71046 6.68558C9.39285 6.00319 9.39285 4.89681 8.71046 4.21442L7.29995 5.62492ZM7.6498 5.62492C7.55319 5.72153 7.39656 5.72153 7.29995 5.62492L8.71046 4.21442C8.02806 3.53202 6.92168 3.53202 6.23929 4.21442L7.6498 5.62492ZM5.17492 8.0998L7.6498 5.62492L6.23929 4.21442L3.76442 6.68929L5.17492 8.0998ZM5.17492 7.74995C5.27153 7.84656 5.27153 8.00319 5.17492 8.0998L3.76442 6.68929C3.08202 7.37169 3.08202 8.47806 3.76442 9.16046L5.17492 7.74995ZM7.6498 10.2248L5.17492 7.74995L3.76442 9.16046L6.23929 11.6353L7.6498 10.2248ZM7.29995 10.2248C7.39656 10.1282 7.55319 10.1282 7.6498 10.2248L6.23929 11.6353C6.92168 12.3177 8.02806 12.3177 8.71046 11.6353L7.29995 10.2248ZM7.29995 10.5747C7.20334 10.4781 7.20334 10.3214 7.29995 10.2248L8.71046 11.6353C9.39285 10.9529 9.39285 9.84656 8.71046 9.16416L7.29995 10.5747ZM6.06376 9.33848L7.29995 10.5747L8.71046 9.16416L7.47427 7.92797L6.06376 9.33848ZM6.76901 9.6306H10.3537V7.63585H6.76901V9.6306ZM10.3537 9.6306C10.4202 9.6306 10.7276 9.74669 10.7276 10.2166H12.7223C12.7223 8.79981 11.6705 7.63585 10.3537 7.63585V9.6306ZM10.7276 10.2166C10.7276 10.6865 10.4202 10.8025 10.3537 10.8025V12.7973C11.6705 12.7973 12.7223 11.6333 12.7223 10.2166H10.7276ZM10.3537 10.8025H9.36384V12.7973H10.3537V10.8025ZM9.36384 10.8025C8.39879 10.8025 7.61646 11.5849 7.61646 12.5499H9.61121C9.61121 12.6865 9.50046 12.7973 9.36384 12.7973V10.8025ZM7.61646 12.5499C7.61646 13.515 8.39879 14.2973 9.36384 14.2973V12.3025C9.50046 12.3025 9.61121 12.4133 9.61121 12.5499H7.61646ZM9.36384 14.2973H10.3537V12.3025H9.36384V14.2973ZM10.3537 14.2973C12.6497 14.2973 14.2223 12.3028 14.2223 10.2166H12.2276C12.2276 11.3984 11.3606 12.3025 10.3537 12.3025V14.2973ZM14.2223 10.2166C14.2223 8.13036 12.6497 6.13585 10.3537 6.13585V8.13061C11.3606 8.13061 12.2276 9.03475 12.2276 10.2166H14.2223ZM10.3537 6.13585H6.85231V8.13061H10.3537V6.13585Z" fill="black" mask="url(#path-1-inside-1)"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 4.6 KiB |
5
res/img/element-icons/roomlist/hash-plus.svg
Normal file
|
@ -0,0 +1,5 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.393 1.00573C11.9421 1.06434 12.3398 1.55703 12.2812 2.1062L12.0245 4.51168H13.8482C14.4005 4.51168 14.8482 4.95939 14.8482 5.51168C14.8482 6.06396 14.4005 6.51168 13.8482 6.51168H13.0089C12.5534 5.89782 11.8231 5.5 11 5.5C10.1769 5.5 9.44663 5.89782 8.9911 6.51168H6.36673L6.05542 9.42868C5.70806 9.85802 5.5 10.4047 5.5 11C5.5 11.4052 5.5964 11.7879 5.76753 12.1264L5.55616 14.107C5.49755 14.6562 5.00485 15.0538 4.45569 14.9952C3.90652 14.9366 3.50884 14.4439 3.56745 13.8948L3.79318 11.7796H2.0005C1.44822 11.7796 1.0005 11.3319 1.0005 10.7796C1.0005 10.2273 1.44822 9.77962 2.0005 9.77962H4.00661L4.35537 6.51168H2.64188C2.0896 6.51168 1.64188 6.06396 1.64188 5.51168C1.64188 4.95939 2.0896 4.51168 2.64188 4.51168H4.56881L4.84817 1.89397C4.90677 1.3448 5.39947 0.947122 5.94864 1.00573C6.49781 1.06434 6.89548 1.55703 6.83688 2.1062L6.58016 4.51168H10.0131L10.2925 1.89397C10.3511 1.3448 10.8438 0.947122 11.393 1.00573Z" fill="#737D8C"/>
|
||||
<path d="M8 11H14" stroke="#737D8C" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M11 8L11 14" stroke="#737D8C" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.2 KiB |
4
res/img/element-icons/roomlist/hash-search.svg
Normal file
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.393 1.0028C10.9421 1.06141 11.3398 1.5541 11.2812 2.10327L11.0245 4.50875H12.8482C13.4005 4.50875 13.8482 4.95647 13.8482 5.50875C13.8482 6.06103 13.4005 6.50875 12.8482 6.50875H12.6234C12.0135 6.18307 11.3277 6.00024 10.6028 6.00024C9.87794 6.00024 9.19219 6.18307 8.58222 6.50875H5.36673L5.01797 9.77669H6.14293C6.04993 10.1746 6.0005 10.5915 6.0005 11.0209C6.0005 11.2778 6.01819 11.5302 6.0523 11.7767H4.80453L4.55616 14.1041C4.49755 14.6532 4.00485 15.0509 3.45569 14.9923C2.90652 14.9337 2.50884 14.441 2.56745 13.8918L2.79318 11.7767H1.0005C0.448219 11.7767 0.00050354 11.329 0.00050354 10.7767C0.00050354 10.2244 0.448219 9.77669 1.0005 9.77669H3.00661L3.35537 6.50875H1.64188C1.0896 6.50875 0.64188 6.06103 0.64188 5.50875C0.64188 4.95647 1.0896 4.50875 1.64188 4.50875H3.56881L3.84817 1.89104C3.90677 1.34187 4.39947 0.944193 4.94864 1.0028C5.49781 1.06141 5.89548 1.5541 5.83688 2.10327L5.58016 4.50875H9.01315L9.29251 1.89104C9.35111 1.34187 9.84381 0.944193 10.393 1.0028Z" fill="#737D8C"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3731 10.6811C12.3731 11.6155 11.6156 12.3731 10.6811 12.3731C9.74669 12.3731 8.98917 11.6155 8.98917 10.6811C8.98917 9.74667 9.74669 8.98915 10.6811 8.98915C11.6156 8.98915 12.3731 9.74667 12.3731 10.6811ZM13.5542 12.3993C13.8552 11.897 14.0283 11.3093 14.0283 10.6811C14.0283 8.83254 12.5297 7.33398 10.6811 7.33398C8.83255 7.33398 7.33398 8.83254 7.33398 10.6811C7.33398 12.5297 8.83255 14.0282 10.6811 14.0282C11.3093 14.0282 11.897 13.8552 12.3992 13.5542C12.4251 13.5903 12.4543 13.6247 12.4867 13.6571L13.9212 15.0916C14.2444 15.4148 14.7684 15.4148 15.0916 15.0916C15.4148 14.7684 15.4148 14.2444 15.0916 13.9212L13.6571 12.4867C13.6247 12.4543 13.5903 12.4252 13.5542 12.3993Z" fill="#737D8C"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.9 KiB |
3
res/img/element-icons/roomlist/hash.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.82942 1.08081C6.8741 0.622751 6.539 0.215191 6.08094 0.170502C5.62287 0.125813 5.21531 0.460918 5.17062 0.918981L4.85379 4.16656H2.66669C2.20645 4.16656 1.83335 4.53966 1.83335 4.9999C1.83335 5.46013 2.20645 5.83323 2.66669 5.83323H4.69119L4.26842 10.1666H2.00002C1.53978 10.1666 1.16669 10.5397 1.16669 10.9999C1.16669 11.4601 1.53978 11.8332 2.00002 11.8332H4.10582L3.83729 14.5856C3.7926 15.0437 4.12771 15.4513 4.58577 15.496C5.04383 15.5406 5.45139 15.2055 5.49608 14.7475L5.7804 11.8332H9.77249L9.50396 14.5856C9.45927 15.0437 9.79437 15.4513 10.2524 15.496C10.7105 15.5406 11.1181 15.2055 11.1627 14.7475L11.4471 11.8332H14.3334C14.7936 11.8332 15.1667 11.4601 15.1667 10.9999C15.1667 10.5397 14.7936 10.1666 14.3334 10.1666H11.6097L12.0324 5.83323H14.3334C14.7936 5.83323 15.1667 5.46013 15.1667 4.9999C15.1667 4.53966 14.7936 4.16656 14.3334 4.16656H12.195L12.4961 1.08081C12.5408 0.622751 12.2057 0.215191 11.7476 0.170502C11.2895 0.125813 10.882 0.460918 10.8373 0.918981L10.5205 4.16656H6.52837L6.82942 1.08081ZM9.93509 10.1666L10.3579 5.83323H6.36577L5.943 10.1666H9.93509Z" fill="#737D8C"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.2 KiB |
3
res/img/element-icons/roomlist/member-plus.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3831 1C11.7973 1 12.1331 1.33579 12.1331 1.75V3.30005L13.5833 3.30005C13.9975 3.30005 14.3333 3.63584 14.3333 4.05005C14.3333 4.46426 13.9975 4.80005 13.5833 4.80005L12.1331 4.80005V6.25C12.1331 6.66421 11.7973 7 11.3831 7C10.9689 7 10.6331 6.66421 10.6331 6.25V4.80005L9.08331 4.80005C8.6691 4.80005 8.33331 4.46426 8.33331 4.05005C8.33331 3.63583 8.6691 3.30005 9.08331 3.30005L10.6331 3.30005V1.75C10.6331 1.33579 10.9689 1 11.3831 1ZM5.74076 9.00014C6.88624 9.00014 7.81483 8.07155 7.81483 6.92607C7.81483 5.78059 6.88624 4.85199 5.74076 4.85199C4.59528 4.85199 3.66669 5.78059 3.66669 6.92607C3.66669 8.07155 4.59528 9.00014 5.74076 9.00014ZM5.88889 10.7778C3.00889 10.7778 1 12.2415 1 14.3333V14.926H10.7778V14.3333C10.7778 12.2356 8.76889 10.7778 5.88889 10.7778Z" fill="#737D8C"/>
|
||||
</svg>
|
After Width: | Height: | Size: 945 B |
|
@ -1,3 +0,0 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16ZM5.96967 5.96967C6.26256 5.67678 6.73744 5.67678 7.03033 5.96967L9 7.93934L10.9697 5.96967C11.2626 5.67678 11.7374 5.67678 12.0303 5.96967C12.3232 6.26256 12.3232 6.73744 12.0303 7.03033L10.0607 9L12.0303 10.9697C12.3232 11.2626 12.3232 11.7374 12.0303 12.0303C11.7374 12.3232 11.2626 12.3232 10.9697 12.0303L9 10.0607L7.03033 12.0303C6.73744 12.3232 6.26256 12.3232 5.96967 12.0303C5.67678 11.7374 5.67678 11.2626 5.96967 10.9697L7.93934 9L5.96967 7.03033C5.67678 6.73744 5.67678 6.26256 5.96967 5.96967Z" fill="black"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 778 B |
BIN
res/img/ia-design-changes.png
Normal file
After Width: | Height: | Size: 97 KiB |