Add QR-Code for Share Links #2162
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Himmelxd
force-pushed
the
himmel/qrcode-sharelinks
branch
from
8aa9ca3
to
125b678
Compare
Chartman123
reviewed
May 12, 2024
|
@Himmelxd thanks for this PR :) I added some comments on the code |
Chartman123
added
enhancement
Himmelxd
force-pushed
the
himmel/qrcode-sharelinks
branch
from
ec92802
to
72ebf01
Compare
Chartman123
reviewed
May 12, 2024
There was a problem hiding this comment.
Some more comments and in my opinion improvements. @susnux Please also have a look at it 🙂
Chartman123
reviewed
May 13, 2024
Chartman123
reviewed
May 13, 2024
Chartman123
reviewed
May 13, 2024
Himmelxd
force-pushed
the
himmel/qrcode-sharelinks
branch
from
4936912
to
acc8f51
Compare
Chartman123
reviewed
May 13, 2024
Himmelxd
force-pushed
the
himmel/qrcode-sharelinks
branch
3 times, most recently
from
9d3afde
to
e71359c
Compare
Chartman123
added
3. to review
Chartman123
approved these changes
May 13, 2024
|
Thank you for your review and great comments :D |
susnux
reviewed
May 16, 2024
susnux
reviewed
May 16, 2024
susnux
reviewed
May 16, 2024
Chartman123
reviewed
May 16, 2024
Himmelxd
force-pushed
the
himmel/qrcode-sharelinks
branch
2 times, most recently
from
9794111
to
41ab25d
Compare
Himmelxd
force-pushed
the
himmel/qrcode-sharelinks
branch
from
d5ad0b1
to
8a4a227
Compare
Chartman123
reviewed
May 17, 2024
Himmelxd
force-pushed
the
himmel/qrcode-sharelinks
branch
from
f38aa2c
to
5137239
Compare
Signed-off-by: Felix Beichler <felix@beichlers.de>
resolve first comments
Signed-off-by: Felix Beichler <felix@beichlers.de>
move modal into tab vue
Signed-off-by: Felix Beichler <felix@beichlers.de>
remove spaces (again)
Signed-off-by: Felix Beichler <felix@beichlers.de>
refactor qr-variables to single object on this.
Signed-off-by: Felix Beichler <felix@beichlers.de>
resolve comments
Signed-off-by: Felix Beichler <felix@beichlers.de>
remove url label
Signed-off-by: Felix Beichler <felix@beichlers.de>
resolve comments
Signed-off-by: Felix Beichler <felix@beichlers.de>
parameterize alt text
Signed-off-by: Felix Beichler <felix@beichlers.de>
fix order of iconqr import
Signed-off-by: Felix Beichler <felix@beichlers.de>
change nc modal to dialog
Signed-off-by: Felix Beichler <felix@beichlers.de>
resolve Share {formTitle}
Signed-off-by: Felix Beichler <felix@beichlers.de>
separate qr dialog to component
Signed-off-by: Felix Beichler <felix@beichlers.de>
resolve comments
Signed-off-by: Felix Beichler <felix@beichlers.de>
Himmelxd
force-pushed
the
himmel/qrcode-sharelinks
branch
from
5137239
to
2888875
Compare
susnux
requested changes
May 21, 2024
There was a problem hiding this comment.
Thank you for the changes!
But I still have some changes 🙈
I meant to abstract the whole dialog as a component, so also move the NcDialog to the QRDialog component.
Some minor stuff like making it reactive (currently in your version the uri is only built on create).
Comment on lines
+2
to
+9
| <div class="qrDialog__content"> | ||
| <h2>{{ title }}</h2> | ||
| <div> | ||
| <img :src="uri" | ||
| :title="text" | ||
| :alt="t('forms', 'QR code representation of {text}', { text: text })"> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Suggested change
| <div class="qrDialog__content"> | |
| <h2>{{ title }}</h2> | |
| <div> | |
| <img :src="uri" | |
| :title="text" | |
| :alt="t('forms', 'QR code representation of {text}', { text: text })"> | |
| </div> | |
| </div> | |
| <NcDialog class="qr-dialog" | |
| close-on-click-outside | |
| :name="title" | |
| :open="open" | |
| @close="$emit('close')> | |
| <div class="qr-dialog__content"> | |
| <img :src="uri" | |
| :title="text" | |
| :alt="t('forms', 'QR code representation of {text}', { text: text })"> | |
| </div> | |
| </NcDialog> |
The idea is to wrap the dialog not only the content, especially to use the NcDialog name instead of custom heading.
Comment on lines
+39
to
+41
| created() { | ||
| this.generateQr() | ||
| }, |
There was a problem hiding this comment.
Suggested change
| created() { | |
| this.generateQr() | |
| }, | |
| watch { | |
| text: { | |
| immediate: true, | |
| handler() { | |
| this.generateQr() | |
| }, | |
| }, | |
| }, |
Allow to be reactive to prop changes.
Comment on lines
+57
to
+60
| .qrDialog__content { | ||
| margin-bottom: 50px; | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
Suggested change
| .qrDialog__content { | |
| margin-bottom: 50px; | |
| text-align: center; | |
| } | |
| .qr-dialog__content { | |
| display: flex; | |
| justify-content: space-around; | |
| width: 100%; | |
| } |
| @@ -60,6 +60,12 @@ | |||
| </template> | |||
| {{ t('forms', 'Copy to clipboard') }} | |||
| </NcActionLink> | |||
| <NcActionButton @click="openQrDialog(getPublicShareLink(share))"> | |||
There was a problem hiding this comment.
Suggested change
| <NcActionButton @click="openQrDialog(getPublicShareLink(share))"> | |
| <NcActionButton @click="openQrDialog(share)"> |
Better to handle the logic in the method than in the template.
Comment on lines
+100
to
+103
| <NcDialog :open.sync="qrDialog" close-on-click-outside="true" @close="qrDialog=false"> | ||
| <QRDialog :title="t('forms', 'Share {formTitle}', { formTitle: form.title })" | ||
| :text="qrDialog" /> | ||
| </NcDialog> |
There was a problem hiding this comment.
Suggested change
| <NcDialog :open.sync="qrDialog" close-on-click-outside="true" @close="qrDialog=false"> | |
| <QRDialog :title="t('forms', 'Share {formTitle}', { formTitle: form.title })" | |
| :text="qrDialog" /> | |
| </NcDialog> | |
| <QRDialog :open="qrDialogText !== null" | |
| :title="t('forms', 'Share {formTitle}', { formTitle: form.title })" | |
| :text="qrDialogText" | |
| @close="qrDialogText = null" /> |
Abstract the dialog and move it to the component instead.
| @@ -232,6 +249,7 @@ export default { | |||
| return { | |||
| isLoading: false, | |||
| appConfig: loadState(appName, 'appConfig'), | |||
| qrDialog: false, | |||
There was a problem hiding this comment.
Suggested change
| qrDialog: false, | |
| qrDialogText: null, |
Mixing boolean and string here is not really obvious I think, so instead make it string by default with null to explicitly mark no value.
Comment on lines
+412
to
+414
| async openQrDialog(qrText) { | ||
| this.qrDialog = qrText | ||
| }, |
There was a problem hiding this comment.
Suggested change
| async openQrDialog(qrText) { | |
| this.qrDialog = qrText | |
| }, | |
| openQrDialog(share) { | |
| this.qrDialogText = getPublicShareLink(share) | |
| }, |
see above (also this is not async)
|
PS: My code suggestions are only to show what I meant, they are not tested and need some refactoring ;) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #1606
at least supposed to