Add jiti logo for Jitsi button meeting
This commit is contained in:
Gregoire Parant
parent
23f7d6f08f
commit
070ad6b993
49
front/dist/resources/logos/meet.svg
vendored
49
front/dist/resources/logos/meet.svg
vendored
@ -1,49 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
width="452.388px" height="452.388px" viewBox="0 0 452.388 452.388" style="enable-background:new 0 0 452.388 452.388;"
|
|
||||||
xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<g id="Layer_8_38_">
|
|
||||||
<path d="M441.677,43.643H10.687C4.785,43.643,0,48.427,0,54.329v297.425c0,5.898,4.785,10.676,10.687,10.676h162.069v25.631
|
|
||||||
c0,0.38,0.074,0.722,0.112,1.089h-23.257c-5.407,0-9.796,4.389-9.796,9.795c0,5.408,4.389,9.801,9.796,9.801h158.506
|
|
||||||
c5.406,0,9.795-4.389,9.795-9.801c0-5.406-4.389-9.795-9.795-9.795h-23.256c0.032-0.355,0.115-0.709,0.115-1.089V362.43H441.7
|
|
||||||
c5.898,0,10.688-4.782,10.688-10.676V54.329C452.37,48.427,447.589,43.643,441.677,43.643z M422.089,305.133
|
|
||||||
c0,5.903-4.784,10.687-10.683,10.687H40.96c-5.898,0-10.684-4.783-10.684-10.687V79.615c0-5.898,4.786-10.684,10.684-10.684
|
|
||||||
h370.446c5.898,0,10.683,4.785,10.683,10.684V305.133z M303.942,290.648H154.025c0-29.872,17.472-55.661,42.753-67.706
|
|
||||||
c-15.987-10.501-26.546-28.571-26.546-49.13c0-32.449,26.306-58.755,58.755-58.755c32.448,0,58.753,26.307,58.753,58.755
|
|
||||||
c0,20.553-10.562,38.629-26.545,49.13C286.475,234.987,303.942,260.781,303.942,290.648z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.6 KiB |
@ -21,7 +21,7 @@
|
|||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
icon.src = isJitsi
|
icon.src = isJitsi
|
||||||
? "/resources/logos/meet.svg"
|
? "/resources/logos/jitsi.png"
|
||||||
: `${ICON_URL}/icon?url=${coWebsite.getUrl().hostname}&size=64..96..256&fallback_icon_color=14304c`;
|
: `${ICON_URL}/icon?url=${coWebsite.getUrl().hostname}&size=64..96..256&fallback_icon_color=14304c`;
|
||||||
icon.alt = coWebsite.getUrl().hostname;
|
icon.alt = coWebsite.getUrl().hostname;
|
||||||
icon.onload = () => {
|
icon.onload = () => {
|
||||||
@ -190,171 +190,168 @@
|
|||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<!-- TODO use trigger message property -->
|
<!-- TODO use trigger message property -->
|
||||||
<div class="cowebsite-hover"
|
<div class="cowebsite-hover" class:hide={!isJitsi} style="width: max-content;">
|
||||||
class:hide={!isJitsi}
|
<p>Open / Close Jitsi meeting!</p>
|
||||||
style="width: max-content;">
|
|
||||||
<label>Open / Close Jitsi meeting!</label>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.cowebsite-thumbnail {
|
.cowebsite-thumbnail {
|
||||||
cursor: url("../../../style/images/cursor_pointer.png"), pointer;
|
cursor: url("../../../style/images/cursor_pointer.png"), pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: rgba(#000000, 0.6);
|
background-color: rgba(#000000, 0.6);
|
||||||
margin: 12px;
|
margin: 12px;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
margin-bottom: auto;
|
margin-bottom: auto;
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 58px;
|
|
||||||
height: 58px;
|
|
||||||
left: -8px;
|
|
||||||
top: -8px;
|
|
||||||
|
|
||||||
margin: 4px;
|
|
||||||
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 4px;
|
|
||||||
border-image-slice: 3;
|
|
||||||
border-image-width: 3;
|
|
||||||
border-image-repeat: stretch;
|
|
||||||
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
|
|
||||||
border-image-outset: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.vertical) {
|
|
||||||
transition: all 300ms;
|
|
||||||
transform: translateY(0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.vertical {
|
|
||||||
margin: 7px;
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
width: 48px;
|
content: "";
|
||||||
height: 48px;
|
position: absolute;
|
||||||
|
width: 58px;
|
||||||
|
height: 58px;
|
||||||
|
left: -8px;
|
||||||
|
top: -8px;
|
||||||
|
|
||||||
|
margin: 4px;
|
||||||
|
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 4px;
|
||||||
|
border-image-slice: 3;
|
||||||
|
border-image-width: 3;
|
||||||
|
border-image-repeat: stretch;
|
||||||
|
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
|
||||||
|
border-image-outset: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.vertical) {
|
||||||
|
transition: all 300ms;
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vertical {
|
||||||
|
margin: 7px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cowebsite-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cowebsite-hover {
|
||||||
|
top: -4px;
|
||||||
|
left: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
animation: shake 0.35s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.displayed {
|
||||||
|
&:not(.vertical) {
|
||||||
|
transform: translateY(-15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.asleep {
|
||||||
|
filter: grayscale(100%);
|
||||||
|
--webkit-filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.loading {
|
||||||
|
animation: 2500ms ease-in-out 0s infinite alternate backgroundLoading;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ready {
|
||||||
|
&::before {
|
||||||
|
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(38, 74, 110)" /></svg>');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes backgroundLoading {
|
||||||
|
0% {
|
||||||
|
background-color: rgba(#000000, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-color: #25598e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
from {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(-15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
transform: translateX(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
transform: translateX(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
transform: translateX(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cowebsite-icon {
|
.cowebsite-icon {
|
||||||
width: 40px;
|
width: 50px;
|
||||||
height: 40px;
|
height: 50px;
|
||||||
|
object-fit: cover;
|
||||||
|
|
||||||
|
&.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.jitsi {
|
||||||
|
filter: invert(100%);
|
||||||
|
-webkit-filter: invert(100%);
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.cowebsite-hover {
|
||||||
|
display: block;
|
||||||
|
width: max-content !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cowebsite-hover {
|
.cowebsite-hover {
|
||||||
top: -4px;
|
display: none;
|
||||||
left: 55px;
|
position: absolute;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
top: -30px;
|
||||||
|
left: -4px;
|
||||||
|
width: 0 !important;
|
||||||
|
min-height: 20px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
color: white;
|
||||||
|
padding: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
animation: shake 0.35s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.displayed {
|
|
||||||
&:not(.vertical) {
|
|
||||||
transform: translateY(-15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.asleep {
|
|
||||||
filter: grayscale(100%);
|
|
||||||
--webkit-filter: grayscale(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.loading {
|
|
||||||
animation: 2500ms ease-in-out 0s infinite alternate backgroundLoading;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ready {
|
|
||||||
&::before {
|
|
||||||
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(38, 74, 110)" /></svg>');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes backgroundLoading {
|
|
||||||
0% {
|
|
||||||
background-color: rgba(#000000, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
background-color: #25598e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bounce {
|
|
||||||
from {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateY(-15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shake {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: translateX(-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
transform: translateX(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
transform: translateX(-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: translateX(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cowebsite-icon {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
object-fit: cover;
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.jitsi {
|
|
||||||
filter: invert(100%);
|
|
||||||
-webkit-filter: invert(100%);
|
|
||||||
padding: 7px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.cowebsite-hover {
|
|
||||||
display: block;
|
|
||||||
width: max-content !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cowebsite-hover {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
|
||||||
top: -30px;
|
|
||||||
left: -4px;
|
|
||||||
width: 0!important;
|
|
||||||
min-height: 20px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
overflow: hidden;
|
|
||||||
color: white;
|
|
||||||
padding: 2px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user