butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'style-link-share' into 'dev'

Browse source 
Style the "share QR" link

See merge request keanuapp/keanuapp-weblite!249
This commit is contained in:
N Pex 2023-10-17 09:29:34 +00:00
commit ea8522d8a3
5 changed files with 30 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/assets/css/getlink.scss
View file

@ -96,12 +96,26 @@
}
.getlink-share {
position: absolute;
right: 20px;
bottom: 24px;
width: 24px;
height: 17px;
object-fit: contain;
color: #161616;
text-align: center;
font-family: "Inter";
font-size: 11.541px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 16.158px */
letter-spacing: 0.34px;
text-transform: uppercase;
color: black;
display: flex;
align-items: center;
justify-content: center;
.v-image {
flex: 0 0 14px;
width: 14px;
height: 10px;
object-fit: contain;
margin-left: 4px;
}
}
.getlink-buttons {

2
src/assets/icons/ic_share.svg
View file

@ -1,3 +1,3 @@
<svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2477 0.000670823C16.1384 0.00531075 16.0311 0.0307591 15.9314 0.0754688C15.7815 0.142957 15.6546 0.25192 15.5656 0.389005C15.4766 0.526231 15.4291 0.685951 15.4291 0.849038V3.32107C14.7529 3.28142 14.0829 3.28494 13.4234 3.33598C6.62122 3.86253 0.885374 9.07191 0.00664931 16.0431H0.00679109C-0.0251098 16.2933 0.0564145 16.5444 0.229528 16.7288C0.402641 16.9133 0.649181 17.0122 0.902999 16.9988C1.15679 16.9853 1.39143 16.8609 1.54355 16.6591C4.61977 12.5918 9.44481 10.1994 14.572 10.1994H15.4292V12.7494C15.4295 12.9682 15.5147 13.1784 15.6674 13.3364C15.8199 13.4945 16.0281 13.5881 16.2484 13.5978C16.4687 13.6075 16.6845 13.5326 16.8505 13.3886L23.7079 7.43851C23.8935 7.2771 24 7.04413 24 6.79934C24 6.55455 23.8935 6.3216 23.7079 6.16016L16.8505 0.210072C16.6844 0.0659577 16.4685 -0.00898088 16.2478 0.000859754L16.2477 0.000670823Z" fill="#074EE8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2477 0.000670823C16.1384 0.00531075 16.0311 0.0307591 15.9314 0.0754688C15.7815 0.142957 15.6546 0.25192 15.5656 0.389005C15.4766 0.526231 15.4291 0.685951 15.4291 0.849038V3.32107C14.7529 3.28142 14.0829 3.28494 13.4234 3.33598C6.62122 3.86253 0.885374 9.07191 0.00664931 16.0431H0.00679109C-0.0251098 16.2933 0.0564145 16.5444 0.229528 16.7288C0.402641 16.9133 0.649181 17.0122 0.902999 16.9988C1.15679 16.9853 1.39143 16.8609 1.54355 16.6591C4.61977 12.5918 9.44481 10.1994 14.572 10.1994H15.4292V12.7494C15.4295 12.9682 15.5147 13.1784 15.6674 13.3364C15.8199 13.4945 16.0281 13.5881 16.2484 13.5978C16.4687 13.6075 16.6845 13.5326 16.8505 13.3886L23.7079 7.43851C23.8935 7.2771 24 7.04413 24 6.79934C24 6.55455 23.8935 6.3216 23.7079 6.16016L16.8505 0.210072C16.6844 0.0659577 16.4685 -0.00898088 16.2478 0.000859754L16.2477 0.000670823Z" fill="currentColor"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1,017 B

After

Width:  |  Height:  |  Size: 1,022 B

Before After
Before After

1
src/assets/translations/en.json
View file

@ -197,6 +197,7 @@
"scan_title": "Scan this code to start a direct chat",
"continue": "Continue",
"different_link": "Get a different link",
"share_qr": "Share QR",
"qr_image_copied": "Image copied to clipboard"
},
"profile": {

3
src/components/CopyLink.vue
View file

@ -17,6 +17,7 @@
class="qr"
id="room-qr"
></canvas>
<slot name="share"></slot>
</v-col>
<v-col align-self="center" class="public-link">
<div class="link">{{ locationLink }}</div>
@ -72,7 +73,7 @@ export default {
computed: {
popupTitle() {
return this.$t(this.i18nQrPopupTitleKey);
}
},
},
methods: {
copyRoomLink() {

8
src/components/GetLink.vue
View file

@ -30,8 +30,12 @@
<div class="getlink-subtitle">{{ $t("getlink.ready_to_share") }}</div>
<copy-link ref="qr" :locationLink="directMessageLink" i18nQrPopupTitleKey="getlink.scan_title"
v-on:long-tap="copyQRImage">
<v-img v-if="shareSupported" class="clickable getlink-share" src="@/assets/icons/ic_share.svg"
@click="shareLink" />
<template v-slot:share>
<div v-if="shareSupported" class="clickable getlink-share" @click="shareLink">
<div>{{ $t("getlink.share_qr") }}</div>
<v-img src="@/assets/icons/ic_share.svg" />
</div>
</template>
</copy-link>
<div class="getlink-buttons">
<v-btn color="black" depressed @click.stop="goHome" class="outlined-button">{{ $t("getlink.continue") }}</v-btn>