mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

restyle e2e icons

Browse source
This commit is contained in:
Bruno Windels 2019-11-12 16:25:38 +01:00
parent af4ad488bd
commit f4988392f9
4 changed files with 75 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
res/css/views/rooms/_E2EIcon.scss
View file

@ -17,17 +17,56 @@ limitations under the License.
.mx_E2EIcon {
width: 25px;
height: 25px;
mask-repeat: no-repeat;
mask-position: center 0;
margin: 0 9px;
position: relative;
display: block;
}
.mx_E2EIcon_verified {
mask-image: url('$(res)/img/e2e/lock-verified.svg');
background-color: $accent-color;
.mx_E2EIcon_verified::before, .mx_E2EIcon_warning::before {
content: "";
display: block;
/* the symbols in the shield icons are cut out the make the themeable with css masking.
if they appear on a different background than white, the symbol wouldn't be white though, so we
add a rectangle here below the masked element to shine through the symbol cutout.
hardcoding white and not using a theme variable as this would probably be white for any theme. */
background-color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mx_E2EIcon_warning {
mask-image: url('$(res)/img/e2e/lock-warning.svg');
.mx_E2EIcon_verified::after, .mx_E2EIcon_warning::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_E2EIcon_verified::before {
/* white rectangle below checkmark of shield */
margin: 25% 28% 38% 25%;
}
.mx_E2EIcon_verified::after {
mask-image: url('$(res)/img/e2e/verified.svg');
background-color: $warning-color;
}
.mx_E2EIcon_warning::before {
/* white rectangle below "!" of shield */
margin: 18% 40% 25% 40%;
}
.mx_E2EIcon_warning::after {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $warning-color;
}

13
res/img/e2e/verified.svg
View file

@ -1,3 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="12" viewBox="0 0 11 12">
<path fill="#7AC9A1" fill-rule="evenodd" stroke="#7AC9A1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5.5 11S10 9 10 6V2.5L5.5 1 1 2.5V6c0 3 4.5 5 4.5 5z"/>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none">
<path
style="stroke:none;fill:#03b381;fill-opacity:1"
d="M 12 2 L 3 4.8496094 L 3 11.5 C 3 17.2 12 21 12 21 C 12 21 21 17.2 21 11.5 L 21 4.8496094 L 12 2 z M 16.541016 7.5332031 C 16.789066 7.5332031 17.037312 7.6240256 17.226562 7.8066406 C 17.605062 8.1718706 17.605063 8.7636762 17.226562 9.1289062 L 11.400391 14.75 C 11.021891 15.1152 10.40975 15.1152 10.03125 14.75 L 10.013672 14.734375 C 10.007572 14.728775 10.002044 14.722597 9.9960938 14.716797 L 7.3242188 12.138672 C 6.9267788 11.755172 6.9267788 11.1335 7.3242188 10.75 C 7.7216487 10.3665 8.3662319 10.3665 8.7636719 10.75 L 10.783203 12.699219 L 15.855469 7.8066406 C 16.044719 7.6240256 16.292966 7.5332031 16.541016 7.5332031 z "
id="path2" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 276 B

After

Width:  |  Height:  |  Size: 902 B

16
res/img/e2e/warning.svg
View file

@ -1,6 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
<defs>
<path id="a" d="M5 10A5 5 0 1 0 5 0a5 5 0 0 0 0 10zM5 .5A1.5 1.5 0 0 1 6.5 2v3a1.5 1.5 0 0 1-3 0V2A1.5 1.5 0 0 1 5 .5zm0 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
</defs>
<use fill="#F56679" fill-rule="evenodd" stroke="#F56679" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" transform="translate(1 1)" xlink:href="#a"/>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24">
<path
style="fill-opacity:1;fill:#ff4b55;stroke:none"
d="M 12 2 L 3 4.8496094 L 3 11.5 C 3 17.2 12 21 12 21 C 12 21 21 17.2 21 11.5 L 21 4.8496094 L 12 2 z M 12.050781 5.5 C 12.743281 5.5 13.300781 6.0575 13.300781 6.75 L 13.300781 12.25 C 13.300781 12.9425 12.743281 13.5 12.050781 13.5 C 11.358281 13.5 10.800781 12.9425 10.800781 12.25 L 10.800781 6.75 C 10.800781 6.0575 11.358281 5.5 12.050781 5.5 z M 12.050781 15 C 12.743281 15 13.300781 15.5575 13.300781 16.25 C 13.300781 16.9425 12.743281 17.5 12.050781 17.5 C 11.358281 17.5 10.800781 16.9425 10.800781 16.25 C 10.800781 15.5575 11.358281 15 12.050781 15 z "
id="path2" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 498 B

After

Width:  |  Height:  |  Size: 824 B

8
src/components/views/rooms/E2EIcon.js
View file

@ -36,7 +36,13 @@ export default function(props) {
_t("All devices for this user are trusted") :
_t("All devices in this encrypted room are trusted");
}
const icon = (<div className={e2eIconClasses} title={e2eTitle} />);
let style = null;
if (props.size) {
style = {width: `${props.size}px`, height: `${props.size}px`};
}
const icon = (<div className={e2eIconClasses} style={style} title={e2eTitle} />);
if (props.onClick) {
return (<AccessibleButton onClick={props.onClick}>{ icon }</AccessibleButton>);
} else {