From c4959bb85190478e0136a8eb89badf2efb28e911 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 19 Dec 2019 01:02:15 +0530 Subject: [PATCH 001/107] use computed property to enable/disable delete button --- .../components/DeleteData/DeleteData.spec.js | 6 +++--- webapp/components/DeleteData/DeleteData.vue | 20 ++++++++++--------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/webapp/components/DeleteData/DeleteData.spec.js b/webapp/components/DeleteData/DeleteData.spec.js index abcdf9101..484fd5492 100644 --- a/webapp/components/DeleteData/DeleteData.spec.js +++ b/webapp/components/DeleteData/DeleteData.spec.js @@ -81,7 +81,7 @@ describe('DeleteData.vue', () => { }) it('does not call the delete user mutation if deleteEnabled is false', () => { - deleteAccountBtn = wrapper.find('.ds-button-danger') + deleteAccountBtn = wrapper.find('[data-test="delete-button"]') deleteAccountBtn.trigger('click') expect(mocks.$apollo.mutate).not.toHaveBeenCalled() }) @@ -90,7 +90,7 @@ describe('DeleteData.vue', () => { beforeEach(() => { enableDeletionInput = wrapper.find('.enable-deletion-input input') enableDeletionInput.setValue(deleteAccountName) - deleteAccountBtn = wrapper.find('.ds-button-danger') + deleteAccountBtn = wrapper.find('[data-test="delete-button"]') }) it('if deleteEnabled is true and only deletes user by default', () => { @@ -168,7 +168,7 @@ describe('DeleteData.vue', () => { it('shows an error toaster when the mutation rejects', async () => { enableDeletionInput = wrapper.find('.enable-deletion-input input') enableDeletionInput.setValue(deleteAccountName) - deleteAccountBtn = wrapper.find('.ds-button-danger') + deleteAccountBtn = wrapper.find('[data-test="delete-button"]') await deleteAccountBtn.trigger('click') // second submission causes mutation to reject await deleteAccountBtn.trigger('click') diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue index 045d00f26..9686f442f 100644 --- a/webapp/components/DeleteData/DeleteData.vue +++ b/webapp/components/DeleteData/DeleteData.vue @@ -57,14 +57,19 @@ - + {{ $t('settings.deleteUserAccount.name') }} - + @@ -82,7 +87,6 @@ export default { return { deleteContributions: false, deleteComments: false, - deleteEnabled: false, enableDeletionValue: null, } }, @@ -90,16 +94,14 @@ export default { ...mapGetters({ currentUser: 'auth/user', }), + deleteEnabled() { + return this.enableDeletionValue === this.currentUser.name + }, }, methods: { ...mapActions({ logout: 'auth/logout', }), - enableDeletion() { - if (this.enableDeletionValue === this.currentUser.name) { - this.deleteEnabled = true - } - }, handleSubmit() { const resourceArgs = [] if (this.deleteContributions) { From da9403794db72566329670511d8e33f2c4b291e8 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 19 Dec 2019 01:02:48 +0530 Subject: [PATCH 002/107] move embed related css to EmbedComponent, rename classes --- webapp/components/Editor/Editor.vue | 81 ------------- .../components/Embed/EmbedComponent.spec.js | 10 +- webapp/components/Embed/EmbedComponent.vue | 113 +++++++++++++++--- 3 files changed, 104 insertions(+), 100 deletions(-) diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index 6c8a1908a..235437c32 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -326,85 +326,4 @@ li > p { margin: 0 0 $space-x-small; } } - -.ProseMirror[contenteditable='false'] { - .embed-close-button { - display: none; - } -} - -.embed-container { - position: relative; - padding: 0; - margin: $space-small auto; - overflow: hidden; - border-radius: $border-radius-base; - border: 1px solid $color-neutral-70; - background-color: $color-neutral-90; -} - -.embed-content { - width: 100%; - height: 100%; - - h4 { - margin: $space-small 0 0 $space-small; - } - - p, - a { - display: block; - margin: 0 0 0 $space-small; - } -} - -.embed-preview-image { - width: 100%; - height: auto; - max-height: 450px; -} - -.embed-preview-image--clickable { - cursor: pointer; -} - -.embed-html { - width: 100%; - - iframe { - width: 100%; - } -} - -.embed-overlay { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - - padding: $space-large; - background-color: $color-neutral-100; -} - -.embed-buttons { - button { - margin-right: $space-small; - } -} - -.embed-checkbox { - display: flex; - - input { - margin-right: $space-small; - } -} - -.embed-close-button { - position: absolute; - top: $space-x-small; - right: $space-x-small; - background-color: rgba(250, 249, 250, 0.6); -} diff --git a/webapp/components/Embed/EmbedComponent.spec.js b/webapp/components/Embed/EmbedComponent.spec.js index ab0f0c8fb..4f8ac02e7 100644 --- a/webapp/components/Embed/EmbedComponent.spec.js +++ b/webapp/components/Embed/EmbedComponent.spec.js @@ -135,19 +135,19 @@ describe('EmbedComponent.vue', () => { wrapper.setData({ showOverlay: true }) }) - it('when user agress', () => { - wrapper.find('.ds-button-primary').trigger('click') + it('when user agrees', () => { + wrapper.find('[data-test="play-now-button"]').trigger('click') expect(wrapper.vm.showEmbed).toBe(true) }) it('does not show iframe when user clicks to cancel', () => { - wrapper.find('.ds-button-ghost').trigger('click') + wrapper.find('[data-test="cancel-button"]').trigger('click') expect(wrapper.vm.showEmbed).toBe(false) }) describe("doesn't set permanently", () => { beforeEach(() => { - wrapper.find('.ds-button-primary').trigger('click') + wrapper.find('[data-test="play-now-button"]').trigger('click') }) it("if user doesn't give consent", () => { @@ -162,7 +162,7 @@ describe('EmbedComponent.vue', () => { describe('sets permanently', () => { beforeEach(() => { wrapper.find('input[type=checkbox]').trigger('click') - wrapper.find('.ds-button-primary').trigger('click') + wrapper.find('[data-test="play-now-button"]').trigger('click') }) it('changes setting permanetly when user requests', () => { diff --git a/webapp/components/Embed/EmbedComponent.vue b/webapp/components/Embed/EmbedComponent.vue index f1790304e..7c08db87b 100644 --- a/webapp/components/Embed/EmbedComponent.vue +++ b/webapp/components/Embed/EmbedComponent.vue @@ -2,17 +2,17 @@ {{ dataEmbedUrl }} - -
-
+ +
+

{{ embedTitle }}

{{ embedDescription }}

@@ -20,25 +20,27 @@ {{ dataEmbedUrl }}
-