PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

More video rooms design updates (#8222)

Browse source 
* Update video room icon

* Hide room header border in video rooms

* Fix inconsistent padding on AppTile frames
This commit is contained in:
Robin 2022-04-05 06:30:57 -04:00 committed by GitHub
parent c0c447ab9b
commit 4f6b939426
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
res/css/structures/_RoomView.scss
View file

@ -213,7 +213,12 @@ hr.mx_RoomView_myReadMarker {
}
// Immersive widgets
.mx_RoomView_body > .mx_AppTile {
.mx_RoomView_immersive {
.mx_RoomHeader_wrapper {
border: unset;
}
.mx_AppTile {
margin: $container-gap-width;
margin-right: calc($container-gap-width / 2);
width: auto;
@ -221,6 +226,7 @@ hr.mx_RoomView_myReadMarker {
padding-top: 33px; // to match the right panel chat heading
border-radius: 8px;
}
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {

2
res/css/views/rooms/_AppsDrawer.scss
View file

@ -148,8 +148,6 @@ $MinWidth: 240px;
width: 50%;
min-width: $MinWidth;
border: $container-border-width solid $widget-menu-bar-bg-color;
border-left-width: 5px;
border-right-width: 5px;
display: flex;
flex-direction: column;
box-sizing: border-box;

2
res/css/views/rooms/_RoomList.scss
View file

@ -25,7 +25,7 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
}
.mx_RoomList_iconNewVideoRoom::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
mask-image: url('$(res)/img/element-icons/roomlist/hash-video.svg');
}
.mx_RoomList_iconAddExistingRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash.svg');

2
res/css/views/rooms/_RoomListHeader.scss
View file

@ -107,7 +107,7 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
}
.mx_RoomListHeader_iconNewVideoRoom::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
mask-image: url('$(res)/img/element-icons/roomlist/hash-video.svg');
}
.mx_RoomListHeader_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-search.svg');

5
res/img/element-icons/roomlist/hash-video.svg Normal file
View 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="M10.393 1.00259C10.9421 1.06119 11.3398 1.55389 11.2812 2.10306L11.0245 4.50854H12.8482C13.4004 4.50854 13.8482 4.95625 13.8482 5.50854C13.8482 6.06082 13.4004 6.50854 12.8482 6.50854H10.811L10.7408 7.16666H8.72946L8.79969 6.50854H5.36671L5.01796 9.77648H6V11.7765H4.80452L4.55614 14.1039C4.49753 14.653 4.00484 15.0507 3.45567 14.9921C2.9065 14.9335 2.50883 14.4408 2.56743 13.8916L2.79316 11.7765H1.00049C0.448204 11.7765 0.000488281 11.3288 0.000488281 10.7765C0.000488281 10.2242 0.448204 9.77648 1.00049 9.77648H3.0066L3.35535 6.50854H1.64186C1.08958 6.50854 0.641865 6.06082 0.641865 5.50854C0.641865 4.95625 1.08958 4.50854 1.64186 4.50854H3.56879L3.84815 1.89082C3.90676 1.34166 4.39946 0.943979 4.94862 1.00259C5.49779 1.06119 5.89547 1.55389 5.83686 2.10306L5.58015 4.50854H9.01313L9.29249 1.89082C9.3511 1.34166 9.8438 0.943979 10.393 1.00259Z" fill="black"/>
<path d="M7.82868 9.10489C7.37101 9.10489 7 9.4759 7 9.93357V12.6958C7 13.1535 7.37101 13.5245 7.82868 13.5245H10.8672C11.3248 13.5245 11.6959 13.1535 11.6959 12.6958V9.93357C11.6959 9.4759 11.3248 9.10489 10.8672 9.10489H7.82868Z" fill="#17191C"/>
<path d="M13.1807 9.74015L12.2483 10.486V12.1434L13.1807 12.8893C13.3615 13.034 13.6294 12.9052 13.6294 12.6736V9.95584C13.6294 9.72423 13.3615 9.59546 13.1807 9.74015Z" fill="#17191C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/components/structures/RoomView.tsx
View file

@ -2100,6 +2100,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
const mainClasses = classNames("mx_RoomView", {
mx_RoomView_inCall: Boolean(activeCall),
mx_RoomView_immersive: this.state.mainSplitContentType === MainSplitContentType.Video,
});
const showChatEffects = SettingsStore.getValue('showChatEffects');