Add option to change the size of images/videos in the timeline (#7017)
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com> Co-authored-by: J. Ryan Stinnett <jryans@gmail.com> Co-authored-by: Timo K <toger5@hotmail.de>
This commit is contained in:
Travis Ralston
co-authored by
Šimon Brandner
J. Ryan Stinnett
Timo K
Šimon Brandner
J. Ryan Stinnett
Timo K
parent
816136de97
commit
3c06e7f7a0
@@ -32,6 +32,7 @@ $slider-selection-dot-size: 2.4em;
|
||||
|
||||
$container-border-width: 8px;
|
||||
|
||||
$timeline-image-boarder-radius: 8px;
|
||||
:root {
|
||||
font-size: 10px;
|
||||
|
||||
|
||||
@@ -252,6 +252,7 @@
|
||||
@import "./views/settings/_E2eAdvancedPanel.scss";
|
||||
@import "./views/settings/_EmailAddresses.scss";
|
||||
@import "./views/settings/_FontScalingPanel.scss";
|
||||
@import "./views/settings/_ImageSizePanel.scss";
|
||||
@import "./views/settings/_IntegrationManager.scss";
|
||||
@import "./views/settings/_JoinRuleSettings.scss";
|
||||
@import "./views/settings/_LayoutSwitcher.scss";
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
@@ -14,7 +15,7 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
$timelineImageBorderRadius: 4px;
|
||||
$timeline-image-boarder-radius: 8px;
|
||||
|
||||
.mx_MImageBody_thumbnail--blurhash {
|
||||
position: absolute;
|
||||
@@ -24,7 +25,7 @@ $timelineImageBorderRadius: 4px;
|
||||
|
||||
.mx_MImageBody_thumbnail {
|
||||
object-fit: contain;
|
||||
border-radius: $timelineImageBorderRadius;
|
||||
border-radius: $timeline-image-boarder-radius;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -32,9 +33,10 @@ $timelineImageBorderRadius: 4px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
// this is needed so that the Blurhash can get have rounded corners without beeing the correct size during loading.
|
||||
overflow: hidden;
|
||||
.mx_Blurhash > canvas {
|
||||
animation: mx--anim-pulse 1.75s infinite cubic-bezier(.4, 0, .6, 1);
|
||||
border-radius: $timelineImageBorderRadius;
|
||||
}
|
||||
|
||||
.mx_no-image-placeholder {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2020 - 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
@@ -18,6 +18,6 @@ span.mx_MVideoBody {
|
||||
video.mx_MVideoBody {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
border-radius: $timeline-image-boarder-radius;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_ImageSizePanel {
|
||||
color: $primary-content;
|
||||
|
||||
.mx_ImageSizePanel_radios {
|
||||
display: flex;
|
||||
margin-top: 16px; // move away from header a bit
|
||||
|
||||
> label {
|
||||
margin-right: 68px; // keep the boxes separate
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_ImageSizePanel_size {
|
||||
background-color: $quinary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 221px;
|
||||
mask-position: center;
|
||||
width: 221px;
|
||||
height: 148px;
|
||||
margin-bottom: 14px; // move radio button away from bottom edge a bit
|
||||
|
||||
&.mx_ImageSizePanel_sizeDefault {
|
||||
mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
|
||||
}
|
||||
|
||||
&.mx_ImageSizePanel_sizeLarge {
|
||||
mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<svg width="221" height="148" viewBox="0 0 221 148" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<mask id="mountains">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="white" />
|
||||
<path d="M109.918 67.966L80.2282 114.975C79.0024 116.916 80.3971 119.447 82.6927 119.447H142.073C144.369 119.447 145.763 116.916 144.538 114.975L114.847 67.966C113.704 66.1548 111.062 66.1548 109.918 67.966Z" fill="black"/>
|
||||
<path d="M141.995 82.4526L121.1 114.956C119.853 116.896 121.246 119.447 123.552 119.447H165.342C167.648 119.447 169.041 116.896 167.794 114.956L146.899 82.4526C145.751 80.6677 143.142 80.6677 141.995 82.4526Z" fill="black"/>
|
||||
<circle cx="161.936" cy="61.1488" r="11.6596" fill="black"/>
|
||||
</mask>
|
||||
</defs>
|
||||
<rect x="0.5" y="0.5" width="220" height="147" rx="7.5" stroke="#E3E8F0"/>
|
||||
<rect x="57" y="14" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
|
||||
<rect x="70" y="14" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
|
||||
<path d="M0 8C0 3.58173 3.58172 0 8 0H45C45.5523 0 46 0.447715 46 1V147C46 147.552 45.5523 148 45 148H8C3.58172 148 0 144.418 0 140V8Z" fill="#E3E8F0"/>
|
||||
<rect x="57" y="32" width="137" height="102.021" rx="5.82979" fill="#E3E8F0" mask="url(#mountains)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,20 @@
|
||||
<svg width="221" height="148" viewBox="0 0 221 148" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<mask id="mountains">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="white" />
|
||||
<path d="M75.1545 94.3387L64.9688 110.466C64.5483 111.132 65.0268 112 65.8143 112H86.1857C86.9732 112 87.4517 111.132 87.0312 110.466L76.8455 94.3387C76.4531 93.7173 75.5469 93.7173 75.1545 94.3387Z" fill="black"/>
|
||||
<path d="M86.1588 99.3085L78.9905 110.459C78.5627 111.125 79.0405 112 79.8317 112H94.1683C94.9595 112 95.4373 111.125 95.0095 110.459L87.8412 99.3085C87.4475 98.6962 86.5525 98.6962 86.1588 99.3085Z" fill="black"/>
|
||||
<circle cx="93" cy="92" r="4" fill="black"/>
|
||||
</mask>
|
||||
</defs>
|
||||
<rect x="0.5" y="0.5" width="220" height="147" rx="7.5" stroke="#E3E8F0"/>
|
||||
<rect x="57" y="14" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
|
||||
<rect x="57" y="64" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
|
||||
<rect x="57" y="125" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
|
||||
<rect x="70" y="14" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
|
||||
<rect x="70" y="64" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
|
||||
<rect x="70" y="125" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
|
||||
<path d="M57 32.5C57 31.6716 57.6716 31 58.5 31H208.5C209.328 31 210 31.6716 210 32.5V54.5C210 55.3284 209.328 56 208.5 56H58.5C57.6716 56 57 55.3284 57 54.5V32.5Z" fill="#E3E8F0"/>
|
||||
<path d="M0 8C0 3.58173 3.58172 0 8 0H45C45.5523 0 46 0.447715 46 1V147C46 147.552 45.5523 148 45 148H8C3.58172 148 0 144.418 0 140V8Z" fill="#E3E8F0"/>
|
||||
<rect x="57" y="82" width="47" height="35" rx="2" fill="#E3E8F0" mask="url(#mountains)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Reference in New Issue
Block a user