From 8f70ce5b313c2f68e97d071561fb4cf5663d704a Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Tue, 10 Dec 2019 13:17:04 +0300 Subject: [PATCH 01/81] set up css resets --- webapp/assets/_new/styles/resets.scss | 10 ++++++++++ webapp/nuxt.config.js | 5 ++++- webapp/storybook/config.js | 1 + 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 webapp/assets/_new/styles/resets.scss diff --git a/webapp/assets/_new/styles/resets.scss b/webapp/assets/_new/styles/resets.scss new file mode 100644 index 000000000..edc495821 --- /dev/null +++ b/webapp/assets/_new/styles/resets.scss @@ -0,0 +1,10 @@ +* { + box-sizing: border-box; +} + +button { + background: transparent; + border: none; + font-family: inherit; + font-size: inherit; +} diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js index 16329cf59..f42661f71 100644 --- a/webapp/nuxt.config.js +++ b/webapp/nuxt.config.js @@ -94,7 +94,10 @@ export default { /* ** Global CSS */ - css: ['~assets/styles/main.scss'], + css: [ + '~assets/_new/styles/resets.scss', + '~assets/styles/main.scss', + ], /* ** Global processed styles diff --git a/webapp/storybook/config.js b/webapp/storybook/config.js index 2631285e1..5b91dfdf3 100644 --- a/webapp/storybook/config.js +++ b/webapp/storybook/config.js @@ -2,6 +2,7 @@ import { addParameters, configure } from '@storybook/vue' import Vue from 'vue' import Vuex from 'vuex' import { action } from '@storybook/addon-actions' +import '!style-loader!css-loader!sass-loader!../assets/_new/styles/resets.scss' Vue.use(Vuex) Vue.component('nuxt-link', { From 2c2f69fbf88ec91283596a4e6637be36dd3c18f2 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Tue, 10 Dec 2019 16:25:14 +0300 Subject: [PATCH 02/81] add BaseButton component --- webapp/assets/_new/styles/resets.scss | 1 + .../generic/BaseButton/BaseButton.story.js | 21 ++++++++++ .../_new/generic/BaseButton/BaseButton.vue | 40 +++++++++++++++++++ 3 files changed, 62 insertions(+) create mode 100644 webapp/components/_new/generic/BaseButton/BaseButton.story.js create mode 100644 webapp/components/_new/generic/BaseButton/BaseButton.vue diff --git a/webapp/assets/_new/styles/resets.scss b/webapp/assets/_new/styles/resets.scss index edc495821..2784add5f 100644 --- a/webapp/assets/_new/styles/resets.scss +++ b/webapp/assets/_new/styles/resets.scss @@ -3,6 +3,7 @@ } button { + padding: 0; background: transparent; border: none; font-family: inherit; diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.story.js b/webapp/components/_new/generic/BaseButton/BaseButton.story.js new file mode 100644 index 000000000..5b33a9f8f --- /dev/null +++ b/webapp/components/_new/generic/BaseButton/BaseButton.story.js @@ -0,0 +1,21 @@ +import { storiesOf } from '@storybook/vue' +import helpers from '~/storybook/helpers' +import BaseButton from './BaseButton.vue' + +storiesOf('BaseButton', module) + .addDecorator(helpers.layout) + + .add('Default', () => ({ + components: { BaseButton }, + template: 'Click me', + })) + + .add('With Icon', () => ({ + components: { BaseButton }, + template: 'With Icon', + })) + + .add('Icon Only', () => ({ + components: { BaseButton }, + template: '', + })) diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue new file mode 100644 index 000000000..6e6497d6d --- /dev/null +++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue @@ -0,0 +1,40 @@ + + + + + From dd89c2655b521618478273de39d7510d88b17515 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Wed, 11 Dec 2019 17:06:06 +0300 Subject: [PATCH 03/81] add button states --- .../generic/BaseButton/BaseButton.story.js | 13 ++++ .../_new/generic/BaseButton/BaseButton.vue | 71 +++++++++++++++++-- 2 files changed, 79 insertions(+), 5 deletions(-) diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.story.js b/webapp/components/_new/generic/BaseButton/BaseButton.story.js index 5b33a9f8f..f32c2218b 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.story.js +++ b/webapp/components/_new/generic/BaseButton/BaseButton.story.js @@ -19,3 +19,16 @@ storiesOf('BaseButton', module) components: { BaseButton }, template: '', })) + + .add('Styles and States', () => ({ + components: { BaseButton }, + template: ` + + Default + Primary + Danger + Disabled + Loading + + `, + })) diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue index 6e6497d6d..f2efa8ae3 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.vue +++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue @@ -1,6 +1,7 @@ @@ -11,10 +12,28 @@ export default { icon: { type: String, }, + primary: { + type: Boolean, + default: false, + }, + danger: { + type: Boolean, + default: false, + }, + loading: { + type: Boolean, + default: false, + }, }, computed: { - iconClass() { - return this.$slots.default == null ? '--icon-only' : '' + buttonClass() { + let buttonClass = 'base-button' + + if (this.$slots.default == null) buttonClass += ' --icon-only' + if (this.primary) buttonClass += ' --primary' + else if (this.danger) buttonClass += ' --danger' + + return buttonClass } } } @@ -33,7 +52,49 @@ export default { font-weight: $font-weight-bold; cursor: pointer; - > .base-icon:not(.--icon-only) { + &:focus { + outline: 1px dashed $color-primary; + outline-offset: 2px; + } + + &:hover { + color: $color-neutral-100; + background-color: $color-primary; + } + + &:active { + color: $color-neutral-100; + background-color: $color-primary-active; + } + + &:disabled { + color: $color-neutral-60; + border-color: $color-neutral-60; + background-color: $color-neutral-90; + cursor: default; + } + + &.--primary { + border: none; + color: $color-neutral-100; + background-color: $color-primary; + + &:hover { + background-color: $color-primary-active; + } + } + + &.--danger { + border: none; + color: $color-neutral-100; + background-color: $color-danger; + + &:hover { + background-color: $color-danger-active; + } + } + + &:not(.--icon-only) > .base-icon { margin-right: 6px; } } From 92856afa3caeb1dcf8a538bc9d21c5d4428d2a60 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Tue, 17 Dec 2019 12:51:05 +0530 Subject: [PATCH 04/81] sort storybook stories alphabetically --- webapp/storybook/config.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/webapp/storybook/config.js b/webapp/storybook/config.js index 5b91dfdf3..60b61d787 100644 --- a/webapp/storybook/config.js +++ b/webapp/storybook/config.js @@ -55,4 +55,12 @@ function loadStories() { req.keys().forEach(req) } +// sort stories alphabetically +addParameters({ + options: { + storySort: (a, b) => + a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }), + } +}) + configure(loadStories, module) From 557fa3211de73a98c97e7958a7bb31309d2601ab Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Tue, 17 Dec 2019 13:01:50 +0530 Subject: [PATCH 05/81] rearrange button stories --- .../generic/BaseButton/BaseButton.story.js | 73 +++++++++++++------ .../_new/generic/BaseIcon/BaseIcon.story.js | 2 +- 2 files changed, 52 insertions(+), 23 deletions(-) diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.story.js b/webapp/components/_new/generic/BaseButton/BaseButton.story.js index f32c2218b..d0b0b2f1e 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.story.js +++ b/webapp/components/_new/generic/BaseButton/BaseButton.story.js @@ -2,33 +2,62 @@ import { storiesOf } from '@storybook/vue' import helpers from '~/storybook/helpers' import BaseButton from './BaseButton.vue' -storiesOf('BaseButton', module) +storiesOf('Generic/BaseButton', module) .addDecorator(helpers.layout) - .add('Default', () => ({ - components: { BaseButton }, - template: 'Click me', - })) - - .add('With Icon', () => ({ - components: { BaseButton }, - template: 'With Icon', - })) - - .add('Icon Only', () => ({ - components: { BaseButton }, - template: '', - })) - - .add('Styles and States', () => ({ + .add('default', () => ({ components: { BaseButton }, template: ` - - Default - Primary - Danger +
+ Click me Disabled Loading - +
+ `, + })) + + .add('icon', () => ({ + components: { BaseButton }, + template: ` +
+ With Text + + + +
+ `, + })) + + .add('primary', () => ({ + components: { BaseButton }, + template: ` +
+ Primary + Disabled + Loading +
+ `, + })) + + .add('danger', () => ({ + components: { BaseButton }, + template: ` +
+ Danger + Disabled + Loading +
+ `, + })) + + .add('circle', () => ({ + components: { BaseButton }, + template: ` +
+ + EN + + +
`, })) diff --git a/webapp/components/_new/generic/BaseIcon/BaseIcon.story.js b/webapp/components/_new/generic/BaseIcon/BaseIcon.story.js index 321ebc0de..5ddfe4ff4 100644 --- a/webapp/components/_new/generic/BaseIcon/BaseIcon.story.js +++ b/webapp/components/_new/generic/BaseIcon/BaseIcon.story.js @@ -29,7 +29,7 @@ const iconStyles = ` font-size: 20px; ` -storiesOf('BaseIcon', module) +storiesOf('Generic/BaseIcon', module) .addDecorator(helpers.layout) .add('pure icon', () => ({ From ab9ad46b147c9d3fa0eaef3e961180b4b9e3120d Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Tue, 17 Dec 2019 13:29:29 +0530 Subject: [PATCH 06/81] style button variants --- webapp/assets/_new/styles/tokens.scss | 4 ++ .../generic/BaseButton/BaseButton.story.js | 2 +- .../_new/generic/BaseButton/BaseButton.vue | 37 +++++++++++++++++-- 3 files changed, 38 insertions(+), 5 deletions(-) diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 5b4b3efcc..30a859980 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -4,6 +4,8 @@ */ $color-primary: rgb(23, 181, 63); + $color-primary-light: rgb(96, 214, 98); + $color-primary-dark: rgb(25, 122, 49); $color-primary-active: rgb(25, 194, 67); $color-primary-inverse: rgb(241, 253, 244); $color-secondary: rgb(0, 142, 230); @@ -13,6 +15,8 @@ $color-success-active: rgb(26, 203, 71); $color-success-inverse: rgb(241, 253, 244); $color-danger: rgb(219, 57, 36); + $color-danger-light: rgb(242, 97, 65); + $color-danger-dark: rgb(158, 43, 28); $color-danger-active: rgb(224, 81, 62); $color-danger-inverse: rgb(253, 243, 242); $color-warning: rgb(230, 121, 25); diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.story.js b/webapp/components/_new/generic/BaseButton/BaseButton.story.js index d0b0b2f1e..634d1edb7 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.story.js +++ b/webapp/components/_new/generic/BaseButton/BaseButton.story.js @@ -54,7 +54,7 @@ storiesOf('Generic/BaseButton', module) components: { BaseButton }, template: `
- + EN diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue index f2efa8ae3..8d2e52cf9 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.vue +++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue @@ -9,6 +9,10 @@ + + From 93233a5c76f98c0b2f176e0e5d94c9a22a213429 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Tue, 17 Dec 2019 14:35:49 +0530 Subject: [PATCH 08/81] style button loading state --- .../_new/generic/BaseButton/BaseButton.vue | 24 ++++++++++++++++++- .../_new/generic/BaseIcon/BaseIcon.vue | 1 + 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue index cd9da5f91..502fc4bb8 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.vue +++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue @@ -1,13 +1,18 @@ + + diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js b/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js index df8291957..9d7debbc6 100644 --- a/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js +++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js @@ -4,16 +4,17 @@ import CounterIcon from './CounterIcon.vue' storiesOf('CounterIcon', module) .addDecorator(helpers.layout) - .add('flag icon with button in slot position', () => ({ + + .add('default', () => ({ components: { CounterIcon }, - data() { - return { icon: 'flag', count: 3 } - }, template: ` - - - Report Details - - + + `, + })) + + .add('high count', () => ({ + components: { CounterIcon }, + template: ` + `, })) diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue index 23dcc0795..87d90a9b1 100644 --- a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue +++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue @@ -1,29 +1,47 @@ + - From 63549d987eebe62073281ea38998bad3e32abeb6 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Wed, 18 Dec 2019 22:55:28 +0530 Subject: [PATCH 11/81] add button size small --- .../generic/BaseButton/BaseButton.story.js | 10 +++++ .../_new/generic/BaseButton/BaseButton.vue | 39 ++++++++++++++++--- 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.story.js b/webapp/components/_new/generic/BaseButton/BaseButton.story.js index 9fcf4c32c..ec56b40c9 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.story.js +++ b/webapp/components/_new/generic/BaseButton/BaseButton.story.js @@ -40,6 +40,16 @@ storiesOf('Generic/BaseButton', module) `, })) + .add('small', () => ({ + components: { BaseButton }, + template: ` +
+ Small + S +
+ ` + })) + .add('primary', () => ({ components: { BaseButton }, template: ` diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue index 502fc4bb8..3ca9cb13c 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.vue +++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue @@ -1,5 +1,5 @@ @@ -161,7 +161,7 @@ export default { .ds-modal { max-width: 600px !important; } -.ds-radio-option:not(.ds-button) { +.ds-radio-option { width: 100% !important; } .ds-radio-option-label { diff --git a/webapp/components/NotificationMenu/NotificationMenu.spec.js b/webapp/components/NotificationMenu/NotificationMenu.spec.js index 01c972d05..530d202e2 100644 --- a/webapp/components/NotificationMenu/NotificationMenu.spec.js +++ b/webapp/components/NotificationMenu/NotificationMenu.spec.js @@ -33,7 +33,7 @@ describe('NotificationMenu.vue', () => { it('counter displays 0', () => { wrapper = Wrapper() - expect(wrapper.find('ds-button-stub').text()).toEqual('0') + expect(wrapper.find('base-button-stub').text()).toEqual('0') }) it('no dropdown is rendered', () => { @@ -67,12 +67,12 @@ describe('NotificationMenu.vue', () => { it('counter displays 0', () => { wrapper = Wrapper() - expect(wrapper.find('ds-button-stub').text()).toEqual('0') + expect(wrapper.find('base-button-stub').text()).toEqual('0') }) it('button is not primary', () => { wrapper = Wrapper() - expect(wrapper.find('ds-button-stub').props('primary')).toBe(false) + expect(wrapper.find('base-button-stub').props('primary')).toBe(false) }) }) @@ -130,12 +130,12 @@ describe('NotificationMenu.vue', () => { it('displays the number of unread notifications', () => { wrapper = Wrapper() - expect(wrapper.find('ds-button-stub').text()).toEqual('2') + expect(wrapper.find('base-button-stub').text()).toEqual('2') }) it('renders primary button', () => { wrapper = Wrapper() - expect(wrapper.find('ds-button-stub').props('primary')).toBe(true) + expect(wrapper.find('base-button-stub').props('primary')).toBe(true) }) }) }) diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue index 413102915..bcb353d1b 100644 --- a/webapp/components/NotificationMenu/NotificationMenu.vue +++ b/webapp/components/NotificationMenu/NotificationMenu.vue @@ -1,12 +1,12 @@ diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue index 6a7bf8adb..8b8f4ef31 100644 --- a/webapp/pages/admin/users.vue +++ b/webapp/pages/admin/users.vue @@ -12,7 +12,7 @@ /> - + @@ -50,14 +50,7 @@ {{ scope.row.createdAt | dateTime }} - - - - - - - - + {{ $t('admin.users.empty') }} @@ -69,8 +62,12 @@ import gql from 'graphql-tag' import { isEmail } from 'validator' import normalizeEmail from '~/components/utils/NormalizeEmail' +import HcPaginate from '~/components/Paginate/Paginate' export default { + components: { + HcPaginate, + }, data() { const pageSize = 15 return { diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index c3f01d548..66d9eebfa 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -8,7 +8,7 @@
@@ -40,14 +40,15 @@ - + + + @@ -235,7 +236,10 @@ export default { } } -.post-add-button { +.base-button.--circle.post-add-button { + height: 54px; + width: 54px; + font-size: 26px; z-index: 100; position: fixed; bottom: -5px; diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue index 3f7ff068a..f9867b13b 100644 --- a/webapp/pages/profile/_id/_slug.vue +++ b/webapp/pages/profile/_id/_slug.vue @@ -73,9 +73,9 @@ @optimistic="optimisticFollow" @update="updateFollow" /> - + {{ $t('settings.blocked-users.unblock') }} - + diff --git a/webapp/pages/settings/embeds.vue b/webapp/pages/settings/embeds.vue index d842dbef0..b417dc017 100644 --- a/webapp/pages/settings/embeds.vue +++ b/webapp/pages/settings/embeds.vue @@ -16,12 +16,12 @@ {{ $t('settings.embeds.status.change.question') }} - + {{ $t('settings.embeds.status.change.deny') }} - - + + {{ $t('settings.embeds.status.change.allow') }} - +

{{ $t('settings.embeds.info-description') }}

    diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue index c37c27a1d..0f641c6f9 100644 --- a/webapp/pages/settings/index.vue +++ b/webapp/pages/settings/index.vue @@ -31,9 +31,9 @@ :placeholder="$t('settings.data.labelBio')" /> diff --git a/webapp/pages/settings/my-email-address/enter-nonce.vue b/webapp/pages/settings/my-email-address/enter-nonce.vue index 85755953a..b9fd1a291 100644 --- a/webapp/pages/settings/my-email-address/enter-nonce.vue +++ b/webapp/pages/settings/my-email-address/enter-nonce.vue @@ -17,9 +17,9 @@ /> diff --git a/webapp/pages/settings/my-email-address/index.vue b/webapp/pages/settings/my-email-address/index.vue index 8b3889b0d..58cdc7124 100644 --- a/webapp/pages/settings/my-email-address/index.vue +++ b/webapp/pages/settings/my-email-address/index.vue @@ -19,9 +19,9 @@ {{ backendErrors.message }} - + {{ $t('actions.save') }} - + diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue index 677c4423d..e19c4fb9a 100644 --- a/webapp/pages/settings/my-social-media.vue +++ b/webapp/pages/settings/my-social-media.vue @@ -24,22 +24,20 @@ {{ link.url }} | - - - - - - + + @@ -54,12 +52,12 @@ :placeholder="$t('settings.social-media.placeholder')" /> - + {{ editingLink.id ? $t('actions.save') : $t('settings.social-media.submit') }} - - + + {{ $t('actions.cancel') }} - + @@ -226,5 +224,10 @@ export default { .ds-list-item-prefix { align-self: center; } + + .ds-list-item-content { + display: flex; + align-items: center; + } } diff --git a/webapp/pages/settings/privacy.vue b/webapp/pages/settings/privacy.vue index 3decdefbe..e1d440b05 100644 --- a/webapp/pages/settings/privacy.vue +++ b/webapp/pages/settings/privacy.vue @@ -4,7 +4,7 @@ - {{ $t('actions.save') }} + {{ $t('actions.save') }} diff --git a/webapp/pages/terms-and-conditions-confirm.vue b/webapp/pages/terms-and-conditions-confirm.vue index 24af8a23d..17695cad5 100644 --- a/webapp/pages/terms-and-conditions-confirm.vue +++ b/webapp/pages/terms-and-conditions-confirm.vue @@ -2,11 +2,11 @@

    - + {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }} - +

    @@ -17,7 +17,7 @@
    From ad274040596ccb7453d14ed73fa94eaab137853e Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 19 Dec 2019 12:48:13 +0530 Subject: [PATCH 27/81] fix failing component tests --- .../CommentForm/CommentForm.spec.js | 6 +++--- webapp/components/CommentForm/CommentForm.vue | 2 +- .../CommentList/CommentList.spec.js | 7 +------ .../components/FilterMenu/FilterMenu.spec.js | 2 +- .../FilterPosts/FilterPosts.spec.js | 10 +++++----- .../NotificationMenu/NotificationMenu.spec.js | 20 +++++++++---------- webapp/pages/settings/my-social-media.spec.js | 8 ++++---- webapp/pages/settings/my-social-media.vue | 2 ++ 8 files changed, 27 insertions(+), 30 deletions(-) diff --git a/webapp/components/CommentForm/CommentForm.spec.js b/webapp/components/CommentForm/CommentForm.spec.js index 47bc01982..5dde84008 100644 --- a/webapp/components/CommentForm/CommentForm.spec.js +++ b/webapp/components/CommentForm/CommentForm.spec.js @@ -74,7 +74,7 @@ describe('CommentForm.vue', () => { it('calls `clear` method when the cancel button is clicked', async () => { wrapper.vm.updateEditorContent('ok') - await wrapper.find('.cancelBtn').trigger('submit') + await wrapper.find('[data-test="cancel-button"]').trigger('submit') expect(cancelMethodSpy).toHaveBeenCalledTimes(1) }) @@ -162,13 +162,13 @@ describe('CommentForm.vue', () => { describe('cancel button is clicked', () => { it('calls `closeEditWindow` method', async () => { wrapper.vm.updateEditorContent('ok') - await wrapper.find('.cancelBtn').trigger('submit') + await wrapper.find('[data-test="cancel-button"]').trigger('submit') expect(closeMethodSpy).toHaveBeenCalledTimes(1) }) it('emits `showEditCommentMenu` event', async () => { wrapper.vm.updateEditorContent('ok') - await wrapper.find('.cancelBtn').trigger('submit') + await wrapper.find('[data-test="cancel-button"]').trigger('submit') expect(wrapper.emitted('showEditCommentMenu')).toEqual([[false]]) }) }) diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue index 88253065f..d536a0ed2 100644 --- a/webapp/components/CommentForm/CommentForm.vue +++ b/webapp/components/CommentForm/CommentForm.vue @@ -5,7 +5,7 @@
    - + {{ $t('actions.cancel') }} diff --git a/webapp/components/CommentList/CommentList.spec.js b/webapp/components/CommentList/CommentList.spec.js index 0c037d2ff..064b8f136 100644 --- a/webapp/components/CommentList/CommentList.spec.js +++ b/webapp/components/CommentList/CommentList.spec.js @@ -63,12 +63,7 @@ describe('CommentList.vue', () => { it('displays a comments counter', () => { wrapper = Wrapper() - expect(wrapper.find('span.ds-tag').text()).toEqual('1') - }) - - it('displays a comments counter', () => { - wrapper = Wrapper() - expect(wrapper.find('span.ds-tag').text()).toEqual('1') + expect(wrapper.find('.count').text()).toEqual('1') }) describe('scrollToAnchor mixin', () => { diff --git a/webapp/components/FilterMenu/FilterMenu.spec.js b/webapp/components/FilterMenu/FilterMenu.spec.js index 079ef5487..d70af323f 100644 --- a/webapp/components/FilterMenu/FilterMenu.spec.js +++ b/webapp/components/FilterMenu/FilterMenu.spec.js @@ -39,7 +39,7 @@ describe('FilterMenu.vue', () => { describe('click "clear-search-button" button', () => { it('emits clearSearch', () => { - wrapper.find({ name: 'clear-search-button' }).trigger('click') + wrapper.find('[name="clear-search-button"]').trigger('click') expect(wrapper.emitted().clearSearch).toHaveLength(1) }) }) diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js index b0d4d8f16..b864a8a46 100644 --- a/webapp/components/FilterPosts/FilterPosts.spec.js +++ b/webapp/components/FilterPosts/FilterPosts.spec.js @@ -92,7 +92,7 @@ describe('FilterPosts.vue', () => { it('starts with all categories button active', () => { const wrapper = openFilterPosts() allCategoriesButton = wrapper.findAll('button').at(1) - expect(allCategoriesButton.attributes().class).toContain('.base-button.--primary') + expect(allCategoriesButton.attributes().class).toContain('--primary') }) it('calls TOGGLE_CATEGORY when clicked', () => { @@ -115,7 +115,7 @@ describe('FilterPosts.vue', () => { getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9']) const wrapper = openFilterPosts() democracyAndPoliticsButton = wrapper.findAll('button').at(4) - expect(democracyAndPoliticsButton.attributes().class).toContain('base-button.--primary') + expect(democracyAndPoliticsButton.attributes().class).toContain('--primary') }) it('sets language button attribute `primary` when corresponding language is filtered', () => { @@ -124,14 +124,14 @@ describe('FilterPosts.vue', () => { spanishButton = wrapper .findAll('button.language-buttons') .at(languages.findIndex(l => l.code === 'es')) - expect(spanishButton.attributes().class).toContain('base-button.--primary') + expect(spanishButton.attributes().class).toContain('--primary') }) it('sets "filter-by-followed-authors-only" button attribute `primary`', () => { getters['posts/filteredByUsersFollowed'] = jest.fn(() => true) const wrapper = openFilterPosts() expect( - wrapper.find({ name: 'filter-by-followed-authors-only' }).classes('base-button.--primary'), + wrapper.find('.base-button[name="filter-by-followed-authors-only"]').classes('--primary'), ).toBe(true) }) @@ -139,7 +139,7 @@ describe('FilterPosts.vue', () => { let wrapper beforeEach(() => { wrapper = openFilterPosts() - wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click') + wrapper.find('.base-button[name="filter-by-followed-authors-only"]').trigger('click') }) it('calls TOGGLE_FILTER_BY_FOLLOWED', () => { diff --git a/webapp/components/NotificationMenu/NotificationMenu.spec.js b/webapp/components/NotificationMenu/NotificationMenu.spec.js index 530d202e2..45d109a7e 100644 --- a/webapp/components/NotificationMenu/NotificationMenu.spec.js +++ b/webapp/components/NotificationMenu/NotificationMenu.spec.js @@ -1,4 +1,4 @@ -import { config, shallowMount } from '@vue/test-utils' +import { config, mount } from '@vue/test-utils' import NotificationMenu from './NotificationMenu' const localVue = global.localVue @@ -22,9 +22,9 @@ describe('NotificationMenu.vue', () => { } }) - describe('shallowMount', () => { + describe('mount', () => { const Wrapper = () => { - return shallowMount(NotificationMenu, { + return mount(NotificationMenu, { data, mocks, localVue, @@ -33,7 +33,7 @@ describe('NotificationMenu.vue', () => { it('counter displays 0', () => { wrapper = Wrapper() - expect(wrapper.find('base-button-stub').text()).toEqual('0') + expect(wrapper.find('.count').text()).toEqual('0') }) it('no dropdown is rendered', () => { @@ -67,12 +67,12 @@ describe('NotificationMenu.vue', () => { it('counter displays 0', () => { wrapper = Wrapper() - expect(wrapper.find('base-button-stub').text()).toEqual('0') + expect(wrapper.find('.count').text()).toEqual('0') }) - it('button is not primary', () => { + it('counter is not colored', () => { wrapper = Wrapper() - expect(wrapper.find('base-button-stub').props('primary')).toBe(false) + expect(wrapper.find('.count').classes()).toContain('--inactive') }) }) @@ -130,12 +130,12 @@ describe('NotificationMenu.vue', () => { it('displays the number of unread notifications', () => { wrapper = Wrapper() - expect(wrapper.find('base-button-stub').text()).toEqual('2') + expect(wrapper.find('.count').text()).toEqual('2') }) - it('renders primary button', () => { + it('renders the counter in red', () => { wrapper = Wrapper() - expect(wrapper.find('base-button-stub').props('primary')).toBe(true) + expect(wrapper.find('.count').classes()).toContain('--danger') }) }) }) diff --git a/webapp/pages/settings/my-social-media.spec.js b/webapp/pages/settings/my-social-media.spec.js index b1c9e0649..cf994e397 100644 --- a/webapp/pages/settings/my-social-media.spec.js +++ b/webapp/pages/settings/my-social-media.spec.js @@ -119,11 +119,11 @@ describe('my-social-media.vue', () => { }) it('displays the edit button', () => { - expect(wrapper.find('a[name="edit"]').exists()).toBe(true) + expect(wrapper.find('.base-button[data-test="edit-button"]').exists()).toBe(true) }) it('displays the delete button', () => { - expect(wrapper.find('a[name="delete"]').exists()).toBe(true) + expect(wrapper.find('.base-button[data-test="delete-button"]').exists()).toBe(true) }) }) @@ -138,7 +138,7 @@ describe('my-social-media.vue', () => { describe('editing social media link', () => { beforeEach(() => { - const editButton = wrapper.find('a[name="edit"]') + const editButton = wrapper.find('.base-button[data-test="edit-button"]') editButton.trigger('click') input = wrapper.find('input#editSocialMedia') }) @@ -169,7 +169,7 @@ describe('my-social-media.vue', () => { describe('deleting social media link', () => { beforeEach(() => { - const deleteButton = wrapper.find('a[name="delete"]') + const deleteButton = wrapper.find('.base-button[data-test="delete-button"]') deleteButton.trigger('click') }) diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue index e19c4fb9a..d89896cb8 100644 --- a/webapp/pages/settings/my-social-media.vue +++ b/webapp/pages/settings/my-social-media.vue @@ -30,6 +30,7 @@ ghost @click="handleEditSocialMedia(link)" :title="$t('actions.edit')" + data-test="edit-button" /> From 56b1a74e64419e628aae853654f88514c0619ec3 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 19 Dec 2019 12:53:38 +0530 Subject: [PATCH 28/81] let eslint do some magic --- webapp/components/CommentForm/CommentForm.vue | 7 +++++-- .../components/ContributionForm/ContributionForm.vue | 6 +----- .../FilterPosts/GeneralFilterMenuItems.vue | 6 +----- webapp/components/LoginForm/LoginForm.vue | 8 +------- .../_new/generic/BaseButton/BaseButton.story.js | 4 ++-- .../_new/generic/BaseButton/BaseButton.vue | 9 ++++----- .../_new/generic/CounterIcon/CounterIcon.vue | 2 +- .../_new/generic/LoadingSpinner/LoadingSpinner.vue | 12 ++---------- webapp/nuxt.config.js | 5 +---- webapp/pages/index.vue | 6 +++++- webapp/pages/terms-and-conditions-confirm.vue | 4 +++- webapp/storybook/config.js | 3 ++- 12 files changed, 28 insertions(+), 44 deletions(-) diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue index d536a0ed2..9227d1e8b 100644 --- a/webapp/components/CommentForm/CommentForm.vue +++ b/webapp/components/CommentForm/CommentForm.vue @@ -5,7 +5,11 @@
    - + {{ $t('actions.cancel') }} @@ -67,7 +71,6 @@ export default { this.$emit('showEditCommentMenu', false) }, handleCancel() { - console.log('handle cancel') if (!this.update) { this.clear() } else { diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue index d67af69d9..281f40fd5 100644 --- a/webapp/components/ContributionForm/ContributionForm.vue +++ b/webapp/components/ContributionForm/ContributionForm.vue @@ -82,11 +82,7 @@
    - + {{ $t('actions.cancel') }} diff --git a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue index cb499c898..c2b7acadd 100644 --- a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue +++ b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue @@ -37,11 +37,7 @@
    - + diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue index ba635575a..e1eb0c693 100644 --- a/webapp/components/LoginForm/LoginForm.vue +++ b/webapp/components/LoginForm/LoginForm.vue @@ -50,13 +50,7 @@ {{ $t('login.forgotPassword') }} - + {{ $t('login.login') }} diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.story.js b/webapp/components/_new/generic/BaseButton/BaseButton.story.js index 900c7b9a2..1621939c0 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.story.js +++ b/webapp/components/_new/generic/BaseButton/BaseButton.story.js @@ -47,7 +47,7 @@ storiesOf('Generic/BaseButton', module) Small S
    - ` + `, })) .add('primary', () => ({ @@ -80,5 +80,5 @@ storiesOf('Generic/BaseButton', module)
    - ` + `, })) diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue index 1044a30c7..fb69a00c0 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.vue +++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue @@ -3,7 +3,7 @@ :type="type" :class="buttonClass" :disabled="loading" - @click.capture="(event) => $emit('click', event)" + @click.capture="event => $emit('click', event)" > @@ -73,8 +73,8 @@ export default { else if (this.size === 'large') buttonClass += ' --large' return buttonClass - } - } + }, + }, } @@ -93,7 +93,7 @@ export default { overflow: hidden; font-weight: $font-weight-bold; cursor: pointer; - transition: background-color .1s; + transition: background-color 0.1s; &:focus { outline: 1px dashed $color-primary; @@ -168,7 +168,6 @@ export default { } &.--large { - } &.--circle { diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue index 6202f823c..4f2d79a58 100644 --- a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue +++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue @@ -45,7 +45,7 @@ export default { border-radius: 50%; transform: translateX(50%); - color:$color-neutral-100; + color: $color-neutral-100; background-color: $color-primary; font-size: 10px; line-height: 1; diff --git a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue index 98e7dc200..74e9d91bc 100644 --- a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue +++ b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue @@ -1,14 +1,6 @@ diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js index f467b78e3..1e368f01a 100644 --- a/webapp/nuxt.config.js +++ b/webapp/nuxt.config.js @@ -94,10 +94,7 @@ export default { /* ** Global CSS */ - css: [ - '~assets/_new/styles/resets.scss', - '~assets/styles/main.scss', - ], + css: ['~assets/_new/styles/resets.scss', '~assets/styles/main.scss'], /* ** Global processed styles diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index 66d9eebfa..f9223a01b 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -42,7 +42,11 @@ diff --git a/webapp/storybook/config.js b/webapp/storybook/config.js index 60b61d787..576136f92 100644 --- a/webapp/storybook/config.js +++ b/webapp/storybook/config.js @@ -2,6 +2,7 @@ import { addParameters, configure } from '@storybook/vue' import Vue from 'vue' import Vuex from 'vuex' import { action } from '@storybook/addon-actions' +// eslint-disable-next-line import/no-webpack-loader-syntax import '!style-loader!css-loader!sass-loader!../assets/_new/styles/resets.scss' Vue.use(Vuex) @@ -60,7 +61,7 @@ addParameters({ options: { storySort: (a, b) => a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }), - } + }, }) configure(loadStories, module) From 5c1242b999a539ade8951676d55b0799aa0d5aea Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 19 Dec 2019 13:07:07 +0530 Subject: [PATCH 29/81] reduce CounterIcon tests to only test logic --- .../generic/CounterIcon/CounterIcon.spec.js | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js b/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js index 01d753c9d..49be22bde 100644 --- a/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js +++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js @@ -5,33 +5,41 @@ import BaseIcon from '../BaseIcon/BaseIcon' const localVue = global.localVue describe('CounterIcon.vue', () => { - let propsData, wrapper, tag + let propsData, wrapper, count const Wrapper = () => { return mount(CounterIcon, { propsData, localVue }) } - describe('given a valid icon name and count', () => { + describe('given a valid icon name and count below 100', () => { beforeEach(() => { - propsData = { icon: 'comments', count: 1 } + propsData = { icon: 'comments', count: 42 } wrapper = Wrapper() - tag = wrapper.find('.ds-tag') + count = wrapper.find('.count') }) - it('renders BaseIcon', () => { + it('renders the icon', () => { expect(wrapper.find(BaseIcon).exists()).toBe(true) }) it('renders the count', () => { - expect(tag.text()).toEqual('1') + expect(count.text()).toEqual('42') + }) + }) + + describe('given a valid icon name and count above 100', () => { + beforeEach(() => { + propsData = { icon: 'comments', count: 750 } + wrapper = Wrapper() + count = wrapper.find('.count') }) - it('uses a round tag', () => { - expect(tag.classes()).toContain('ds-tag-round') + it('renders the icon', () => { + expect(wrapper.find(BaseIcon).exists()).toBe(true) }) - it('uses a primary button', () => { - expect(tag.classes()).toContain('ds-tag-primary') + it('renders the capped count with a plus', () => { + expect(count.text()).toEqual('99+') }) }) }) From cc38fa2b0af1d7dfb938ff4431b3371a9ee0b65c Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Wed, 8 Jan 2020 13:49:07 +0530 Subject: [PATCH 30/81] make content-menu clickable on post-card --- webapp/components/PostCard/PostCard.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue index d5afe90e1..5b9a792a9 100644 --- a/webapp/components/PostCard/PostCard.vue +++ b/webapp/components/PostCard/PostCard.vue @@ -176,6 +176,8 @@ export default { } .content-menu { + position: relative; + z-index: 99; display: inline-block; margin-left: $space-xx-small; margin-right: -$space-x-small; From 5d2af860dbcb999a922e58f29f2f9ac78f609722 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Wed, 8 Jan 2020 13:53:02 +0530 Subject: [PATCH 31/81] wrap create-post link around button on user profile --- webapp/pages/profile/_id/_slug.vue | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue index f9867b13b..5a504fdcc 100644 --- a/webapp/pages/profile/_id/_slug.vue +++ b/webapp/pages/profile/_id/_slug.vue @@ -215,19 +215,21 @@ - + + + From 53a504010ce45264731052aeced2197d5bc1cfb8 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Wed, 8 Jan 2020 14:28:21 +0530 Subject: [PATCH 32/81] allow overflow for notifications counter --- webapp/components/NotificationMenu/NotificationMenu.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue index bcb353d1b..a3b085db9 100644 --- a/webapp/components/NotificationMenu/NotificationMenu.vue +++ b/webapp/components/NotificationMenu/NotificationMenu.vue @@ -96,6 +96,10 @@ export default { flex-shrink: 0; display: flex; align-items: center; + + .base-button { + overflow: visible; + } } .notifications-menu-popover { From be30b55f651a834687dc47c8a28befab24d6e793 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Wed, 8 Jan 2020 14:31:37 +0530 Subject: [PATCH 33/81] fix styling of terms-and-conditions button --- webapp/pages/terms-and-conditions-confirm.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webapp/pages/terms-and-conditions-confirm.vue b/webapp/pages/terms-and-conditions-confirm.vue index 94c13687d..38fadbdf8 100644 --- a/webapp/pages/terms-and-conditions-confirm.vue +++ b/webapp/pages/terms-and-conditions-confirm.vue @@ -2,11 +2,11 @@

    - - + + {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }} - - + +

    From 1b9249c685e34eb2e94b31ee0ec22421c6aa6a73 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 9 Jan 2020 13:13:33 +0530 Subject: [PATCH 34/81] manage button states and color schemes with mixin --- .../_new/styles/mixins/buttonStates.scss | 69 +++++++++ .../generic/BaseButton/BaseButton.story.js | 43 +++--- .../_new/generic/BaseButton/BaseButton.vue | 133 +++++------------- 3 files changed, 127 insertions(+), 118 deletions(-) create mode 100644 webapp/assets/_new/styles/mixins/buttonStates.scss diff --git a/webapp/assets/_new/styles/mixins/buttonStates.scss b/webapp/assets/_new/styles/mixins/buttonStates.scss new file mode 100644 index 000000000..bce2fc927 --- /dev/null +++ b/webapp/assets/_new/styles/mixins/buttonStates.scss @@ -0,0 +1,69 @@ +@mixin buttonStates($color-scheme: primary, $filled: false) { + $main-color: $color-primary; + $active-color: $color-primary-dark; + $hover-color: $color-primary-light; + + @if $color-scheme == danger { + $main-color: $color-danger; + $active-color: $color-danger-dark; + $hover-color: $color-danger-light; + } + + color: $main-color; + border-color: $main-color; + background-color: transparent; + transition: background-color 0.1s; + + &:focus { + outline: 1px dashed $main-color; + } + + &:enabled { + &:hover { + color: $color-neutral-100; + border-color: $main-color; + background-color: $main-color; + } + + &:active { + color: $color-neutral-100; + border-color: $active-color; + background-color: $active-color; + } + } + + &:disabled { + color: $color-neutral-60; + border-color: $color-neutral-60; + cursor: default; + } + + &.--loading { + color: $color-neutral-80; + } + + @if $filled { + color: $color-neutral-100; + border-color: $main-color; + background-color: $main-color; + + &:enabled { + &:hover { + border-color: $hover-color; + background-color: $hover-color; + } + + &:active { + color: $color-neutral-100; + border-color: $active-color; + background-color: $active-color; + } + } + + &:disabled { + color: $color-neutral-80; + background-color: $color-neutral-60; + border-color: $color-neutral-60; + } + } +} diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.story.js b/webapp/components/_new/generic/BaseButton/BaseButton.story.js index 1621939c0..14674d99e 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.story.js +++ b/webapp/components/_new/generic/BaseButton/BaseButton.story.js @@ -40,27 +40,6 @@ storiesOf('Generic/BaseButton', module) `, })) - .add('small', () => ({ - components: { BaseButton }, - template: ` -
    - Small - S -
    - `, - })) - - .add('primary', () => ({ - components: { BaseButton }, - template: ` -
    - Primary - Disabled - Loading -
    - `, - })) - .add('danger', () => ({ components: { BaseButton }, template: ` @@ -72,6 +51,28 @@ storiesOf('Generic/BaseButton', module) `, })) + .add('filled', () => ({ + components: { BaseButton }, + template: ` +
    + Filled + Filled Danger + Disabled + Loading +
    + `, + })) + + .add('small', () => ({ + components: { BaseButton }, + template: ` +
    + Small + S +
    + `, + })) + .add('ghost', () => ({ // TODO: add documentation --> ghost button should only be used for very special occasions // e.g. for the ContentMenu + for the EditorMenuBarButtons diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue index fb69a00c0..6b484b9a1 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.vue +++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue @@ -1,12 +1,12 @@ @@ -23,20 +23,20 @@ export default { type: Boolean, default: false, }, - icon: { - type: String, + danger: { + type: Boolean, + default: false, + }, + filled: { + type: Boolean, + default: false, }, ghost: { type: Boolean, default: false, }, - primary: { - type: Boolean, - default: false, - }, - danger: { - type: Boolean, - default: false, + icon: { + type: String, }, loading: { type: Boolean, @@ -46,7 +46,7 @@ export default { type: String, default: 'regular', validator(value) { - return value.match(/(small|regular|large)/) + return value.match(/(small|regular)/) }, }, type: { @@ -63,14 +63,12 @@ export default { if (this.$slots.default == null) buttonClass += ' --icon-only' if (this.circle) buttonClass += ' --circle' - if (this.ghost) buttonClass += ' --ghost' + if (this.danger) buttonClass += ' --danger' if (this.loading) buttonClass += ' --loading' - - if (this.primary) buttonClass += ' --primary' - else if (this.danger) buttonClass += ' --danger' - if (this.size === 'small') buttonClass += ' --small' - else if (this.size === 'large') buttonClass += ' --large' + + if (this.filled) buttonClass += ' --filled' + else if (this.ghost) buttonClass += ' --ghost' return buttonClass }, @@ -79,95 +77,32 @@ export default { From 34006a25e28579a79aca5d57bf75a699a94e8b5c Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 9 Jan 2020 13:25:12 +0530 Subject: [PATCH 35/81] rename primary to filled --- .../CategoriesSelect/CategoriesSelect.vue | 2 +- webapp/components/CommentForm/CommentForm.vue | 2 +- .../ContributionForm/ContributionForm.vue | 4 ++-- webapp/components/DonationInfo/DonationInfo.vue | 2 +- webapp/components/EnterNonce/EnterNonce.vue | 2 +- .../FilterPosts/CategoriesFilterMenuItems.vue | 4 ++-- webapp/components/FilterPosts/FilterPosts.spec.js | 14 +++++++------- webapp/components/FilterPosts/FilterPosts.vue | 2 +- .../FilterPosts/GeneralFilterMenuItems.vue | 2 +- .../FilterPosts/LanguageFilterMenuItems.vue | 4 ++-- webapp/components/FollowButton.vue | 2 +- webapp/components/LoginForm/LoginForm.vue | 2 +- webapp/components/Password/Change.vue | 2 +- webapp/components/PasswordReset/ChangePassword.vue | 2 +- webapp/components/PasswordReset/Request.vue | 2 +- .../components/Registration/CreateUserAccount.vue | 2 +- webapp/components/Registration/Signup.vue | 2 +- webapp/components/ShoutButton.vue | 2 +- webapp/components/TeaserImage/TeaserImage.vue | 2 +- webapp/pages/admin/donations.vue | 2 +- webapp/pages/admin/users.vue | 2 +- webapp/pages/index.vue | 4 ++-- webapp/pages/profile/_id/_slug.vue | 2 +- webapp/pages/settings/embeds.vue | 4 ++-- webapp/pages/settings/index.vue | 2 +- .../settings/my-email-address/enter-nonce.vue | 2 +- webapp/pages/settings/my-email-address/index.vue | 2 +- webapp/pages/settings/my-social-media.vue | 2 +- webapp/pages/settings/privacy.vue | 2 +- webapp/pages/terms-and-conditions-confirm.vue | 2 +- 30 files changed, 41 insertions(+), 41 deletions(-) diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue index 9ec8688c4..3e240e435 100644 --- a/webapp/components/CategoriesSelect/CategoriesSelect.vue +++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue @@ -6,7 +6,7 @@ {{ $t('actions.cancel') }} - + {{ $t('post.comment.submit') }}
    diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue index 281f40fd5..97fc46e0d 100644 --- a/webapp/components/ContributionForm/ContributionForm.vue +++ b/webapp/components/ContributionForm/ContributionForm.vue @@ -82,10 +82,10 @@
    - + {{ $t('actions.cancel') }} - + {{ $t('actions.save') }}
    diff --git a/webapp/components/DonationInfo/DonationInfo.vue b/webapp/components/DonationInfo/DonationInfo.vue index 1bf331b10..e138bef97 100644 --- a/webapp/components/DonationInfo/DonationInfo.vue +++ b/webapp/components/DonationInfo/DonationInfo.vue @@ -2,7 +2,7 @@ diff --git a/webapp/components/EnterNonce/EnterNonce.vue b/webapp/components/EnterNonce/EnterNonce.vue index b44201a42..eb44c3235 100644 --- a/webapp/components/EnterNonce/EnterNonce.vue +++ b/webapp/components/EnterNonce/EnterNonce.vue @@ -17,7 +17,7 @@ {{ $t('components.enter-nonce.form.description') }} - + {{ $t('components.enter-nonce.form.next') }} diff --git a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue index 6d91098ad..9189f417d 100644 --- a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue +++ b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue @@ -16,7 +16,7 @@ circle icon="check" @click="resetCategories" - :primary="!filteredCategoryIds.length" + :filled="!filteredCategoryIds.length" /> @@ -41,7 +41,7 @@ diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js index b864a8a46..c05a3d85f 100644 --- a/webapp/components/FilterPosts/FilterPosts.spec.js +++ b/webapp/components/FilterPosts/FilterPosts.spec.js @@ -92,7 +92,7 @@ describe('FilterPosts.vue', () => { it('starts with all categories button active', () => { const wrapper = openFilterPosts() allCategoriesButton = wrapper.findAll('button').at(1) - expect(allCategoriesButton.attributes().class).toContain('--primary') + expect(allCategoriesButton.attributes().class).toContain('--filled') }) it('calls TOGGLE_CATEGORY when clicked', () => { @@ -111,27 +111,27 @@ describe('FilterPosts.vue', () => { expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en') }) - it('sets category button attribute `primary` when corresponding category is filtered', () => { + it('sets category button attribute `filled` when corresponding category is filtered', () => { getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9']) const wrapper = openFilterPosts() democracyAndPoliticsButton = wrapper.findAll('button').at(4) - expect(democracyAndPoliticsButton.attributes().class).toContain('--primary') + expect(democracyAndPoliticsButton.attributes().class).toContain('--filled') }) - it('sets language button attribute `primary` when corresponding language is filtered', () => { + it('sets language button attribute `filled` when corresponding language is filtered', () => { getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es']) const wrapper = openFilterPosts() spanishButton = wrapper .findAll('button.language-buttons') .at(languages.findIndex(l => l.code === 'es')) - expect(spanishButton.attributes().class).toContain('--primary') + expect(spanishButton.attributes().class).toContain('--filled') }) - it('sets "filter-by-followed-authors-only" button attribute `primary`', () => { + it('sets "filter-by-followed-authors-only" button attribute `filled`', () => { getters['posts/filteredByUsersFollowed'] = jest.fn(() => true) const wrapper = openFilterPosts() expect( - wrapper.find('.base-button[name="filter-by-followed-authors-only"]').classes('--primary'), + wrapper.find('.base-button[name="filter-by-followed-authors-only"]').classes('--filled'), ).toBe(true) }) diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue index 281b46413..787751004 100644 --- a/webapp/components/FilterPosts/FilterPosts.vue +++ b/webapp/components/FilterPosts/FilterPosts.vue @@ -3,7 +3,7 @@ @@ -36,7 +36,7 @@ {{ language.code.toUpperCase() }} diff --git a/webapp/components/FollowButton.vue b/webapp/components/FollowButton.vue index 14d98ef48..31856e6b4 100644 --- a/webapp/components/FollowButton.vue +++ b/webapp/components/FollowButton.vue @@ -4,7 +4,7 @@ :disabled="disabled || !followId" :loading="loading" :icon="icon" - :primary="isFollowed && !hovered" + :filled="isFollowed && !hovered" :danger="isFollowed && hovered" @mouseenter.native="onHover" @mouseleave.native="hovered = false" diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue index e1eb0c693..c140edb47 100644 --- a/webapp/components/LoginForm/LoginForm.vue +++ b/webapp/components/LoginForm/LoginForm.vue @@ -50,7 +50,7 @@ {{ $t('login.forgotPassword') }} - + {{ $t('login.login') }} diff --git a/webapp/components/Password/Change.vue b/webapp/components/Password/Change.vue index 1ce61dcf7..547aab6a1 100644 --- a/webapp/components/Password/Change.vue +++ b/webapp/components/Password/Change.vue @@ -24,7 +24,7 @@ /> - + {{ $t('settings.security.change-password.button') }} diff --git a/webapp/components/PasswordReset/ChangePassword.vue b/webapp/components/PasswordReset/ChangePassword.vue index 5661827fa..ab3334c6d 100644 --- a/webapp/components/PasswordReset/ChangePassword.vue +++ b/webapp/components/PasswordReset/ChangePassword.vue @@ -24,7 +24,7 @@ /> - + {{ $t('settings.security.change-password.button') }} diff --git a/webapp/components/PasswordReset/Request.vue b/webapp/components/PasswordReset/Request.vue index e5c4aabac..5f4baf357 100644 --- a/webapp/components/PasswordReset/Request.vue +++ b/webapp/components/PasswordReset/Request.vue @@ -23,7 +23,7 @@ {{ $t('actions.save') }} diff --git a/webapp/components/Registration/Signup.vue b/webapp/components/Registration/Signup.vue index 67cd09f92..8a9447a69 100644 --- a/webapp/components/Registration/Signup.vue +++ b/webapp/components/Registration/Signup.vue @@ -33,7 +33,7 @@
    - + {{ $t('contribution.teaserImage.cropperConfirm') }} - + {{ $t('actions.save') }} diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue index 8b8f4ef31..e56be70ab 100644 --- a/webapp/pages/admin/users.vue +++ b/webapp/pages/admin/users.vue @@ -12,7 +12,7 @@ /> - + diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index f9223a01b..58de701cf 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -8,7 +8,7 @@
    @@ -49,7 +49,7 @@ }" class="post-add-button" icon="plus" - primary + filled circle /> diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue index 5a504fdcc..1e2ad3834 100644 --- a/webapp/pages/profile/_id/_slug.vue +++ b/webapp/pages/profile/_id/_slug.vue @@ -227,7 +227,7 @@ class="profile-post-add-button" icon="plus" circle - primary + filled /> diff --git a/webapp/pages/settings/embeds.vue b/webapp/pages/settings/embeds.vue index b417dc017..22050c636 100644 --- a/webapp/pages/settings/embeds.vue +++ b/webapp/pages/settings/embeds.vue @@ -16,10 +16,10 @@ {{ $t('settings.embeds.status.change.question') }} - + {{ $t('settings.embeds.status.change.deny') }} - + {{ $t('settings.embeds.status.change.allow') }} diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue index 0f641c6f9..20034d5af 100644 --- a/webapp/pages/settings/index.vue +++ b/webapp/pages/settings/index.vue @@ -31,7 +31,7 @@ :placeholder="$t('settings.data.labelBio')" /> diff --git a/webapp/pages/settings/my-email-address/enter-nonce.vue b/webapp/pages/settings/my-email-address/enter-nonce.vue index b9fd1a291..91b2e269f 100644 --- a/webapp/pages/settings/my-email-address/enter-nonce.vue +++ b/webapp/pages/settings/my-email-address/enter-nonce.vue @@ -17,7 +17,7 @@ /> diff --git a/webapp/pages/settings/my-email-address/index.vue b/webapp/pages/settings/my-email-address/index.vue index 58cdc7124..4e01bbb44 100644 --- a/webapp/pages/settings/my-email-address/index.vue +++ b/webapp/pages/settings/my-email-address/index.vue @@ -19,7 +19,7 @@ {{ backendErrors.message }} - + {{ $t('actions.save') }} diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue index d89896cb8..5f489c303 100644 --- a/webapp/pages/settings/my-social-media.vue +++ b/webapp/pages/settings/my-social-media.vue @@ -54,7 +54,7 @@ :placeholder="$t('settings.social-media.placeholder')" /> - + {{ editingLink.id ? $t('actions.save') : $t('settings.social-media.submit') }} diff --git a/webapp/pages/settings/privacy.vue b/webapp/pages/settings/privacy.vue index e1d440b05..f759926b7 100644 --- a/webapp/pages/settings/privacy.vue +++ b/webapp/pages/settings/privacy.vue @@ -4,7 +4,7 @@ - {{ $t('actions.save') }} + {{ $t('actions.save') }} diff --git a/webapp/pages/terms-and-conditions-confirm.vue b/webapp/pages/terms-and-conditions-confirm.vue index 38fadbdf8..0716048b5 100644 --- a/webapp/pages/terms-and-conditions-confirm.vue +++ b/webapp/pages/terms-and-conditions-confirm.vue @@ -17,7 +17,7 @@ From 93b6323c3480d2ebf84a431650ebb8ef585fa197 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 9 Jan 2020 13:37:15 +0530 Subject: [PATCH 36/81] make cancel buttons red --- webapp/components/CommentForm/CommentForm.vue | 1 + webapp/components/DeleteData/DeleteData.vue | 2 +- webapp/components/Modal/ConfirmModal.vue | 7 ++++++- webapp/components/Modal/DisableModal.vue | 2 +- webapp/components/Modal/ReportModal.vue | 1 + webapp/components/ReleaseModal/ReleaseModal.vue | 2 +- webapp/components/TeaserImage/TeaserImage.vue | 1 + webapp/components/features/ReportRow/ReportRow.vue | 1 + webapp/pages/settings/my-social-media.vue | 2 +- 9 files changed, 14 insertions(+), 5 deletions(-) diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue index 9d4428e2d..063a3d599 100644 --- a/webapp/components/CommentForm/CommentForm.vue +++ b/webapp/components/CommentForm/CommentForm.vue @@ -9,6 +9,7 @@ :disabled="disabled && !update" @click="handleCancel" data-test="cancel-button" + danger > {{ $t('actions.cancel') }} diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue index 045d00f26..167fa505f 100644 --- a/webapp/components/DeleteData/DeleteData.vue +++ b/webapp/components/DeleteData/DeleteData.vue @@ -62,7 +62,7 @@ /> - + {{ $t('settings.deleteUserAccount.name') }} diff --git a/webapp/components/Modal/ConfirmModal.vue b/webapp/components/Modal/ConfirmModal.vue index 282dbed5e..9eb81b5ea 100644 --- a/webapp/components/Modal/ConfirmModal.vue +++ b/webapp/components/Modal/ConfirmModal.vue @@ -10,7 +10,12 @@

    diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue index a68c427a6..94938361d 100644 --- a/webapp/components/TeaserImage/TeaserImage.vue +++ b/webapp/components/TeaserImage/TeaserImage.vue @@ -18,6 +18,7 @@ size="small" circle danger + filled @click="cancelCrop" />

    diff --git a/webapp/components/features/ReportRow/ReportRow.vue b/webapp/components/features/ReportRow/ReportRow.vue index 4e69f6910..af9a317cd 100644 --- a/webapp/components/features/ReportRow/ReportRow.vue +++ b/webapp/components/features/ReportRow/ReportRow.vue @@ -64,6 +64,7 @@ {{ editingLink.id ? $t('actions.save') : $t('settings.social-media.submit') }} - + {{ $t('actions.cancel') }} From 04e5ecc87d172072e4d943fe1437a14ddbb5bffc Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 9 Jan 2020 13:48:30 +0530 Subject: [PATCH 37/81] fix tests and lint errors --- webapp/components/DeleteData/DeleteData.vue | 8 +++++++- .../components/NotificationMenu/NotificationMenu.spec.js | 2 +- webapp/components/_new/generic/BaseButton/BaseButton.vue | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue index 167fa505f..9ecdbb850 100644 --- a/webapp/components/DeleteData/DeleteData.vue +++ b/webapp/components/DeleteData/DeleteData.vue @@ -62,7 +62,13 @@ /> - + {{ $t('settings.deleteUserAccount.name') }} diff --git a/webapp/components/NotificationMenu/NotificationMenu.spec.js b/webapp/components/NotificationMenu/NotificationMenu.spec.js index 45d109a7e..8020c8bb4 100644 --- a/webapp/components/NotificationMenu/NotificationMenu.spec.js +++ b/webapp/components/NotificationMenu/NotificationMenu.spec.js @@ -5,7 +5,7 @@ const localVue = global.localVue localVue.filter('truncate', string => string) -config.stubs.dropdown = '' +config.stubs.dropdown = '' describe('NotificationMenu.vue', () => { let wrapper diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue index 6b484b9a1..3cbe38ab2 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.vue +++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue @@ -102,7 +102,7 @@ export default { } &.--danger.--filled { - @include buttonStates($color-scheme: danger, $filled: true) + @include buttonStates($color-scheme: danger, $filled: true); } &.--circle { From b71638d29f5b5157027b34638bf611df439d76ff Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 9 Jan 2020 14:31:25 +0530 Subject: [PATCH 38/81] use scss variables in base button component --- .../_new/styles/mixins/buttonStates.scss | 10 +++------ webapp/assets/_new/styles/tokens.scss | 8 +++++++ .../_new/generic/BaseButton/BaseButton.vue | 22 +++++++++++-------- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/webapp/assets/_new/styles/mixins/buttonStates.scss b/webapp/assets/_new/styles/mixins/buttonStates.scss index bce2fc927..b8e1509a6 100644 --- a/webapp/assets/_new/styles/mixins/buttonStates.scss +++ b/webapp/assets/_new/styles/mixins/buttonStates.scss @@ -12,10 +12,10 @@ color: $main-color; border-color: $main-color; background-color: transparent; - transition: background-color 0.1s; + transition: background-color $duration-short; &:focus { - outline: 1px dashed $main-color; + outline: $border-size-base dashed $main-color; } &:enabled { @@ -38,10 +38,6 @@ cursor: default; } - &.--loading { - color: $color-neutral-80; - } - @if $filled { color: $color-neutral-100; border-color: $main-color; @@ -61,7 +57,7 @@ } &:disabled { - color: $color-neutral-80; + color: $color-neutral-100; background-color: $color-neutral-60; border-color: $color-neutral-60; } diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 30a859980..29ba0286d 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -250,6 +250,14 @@ $size-avatar-base: 44px; $size-avatar-large: 64px; $size-avatar-x-large: 114px; +/** + * @tokens Size Buttons + * @presenter Spacing + */ + + $size-button-base: 36px; + $size-button-small: 26px; + /** * @tokens Shadow * @presenter Shadow diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue index 3cbe38ab2..b616995c5 100644 --- a/webapp/components/_new/generic/BaseButton/BaseButton.vue +++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue @@ -84,11 +84,11 @@ export default { display: inline-flex; align-items: center; justify-content: center; - height: 36px; - padding: 0 12px; + height: $size-button-base; + padding: 0 $space-x-small; vertical-align: bottom; - border: 1px solid; - border-radius: 6px; + border: $border-size-base solid; + border-radius: $border-radius-x-large; overflow: hidden; font-weight: $font-weight-bold; cursor: pointer; @@ -106,7 +106,7 @@ export default { } &.--circle { - width: 36px; + width: $size-button-base; border-radius: 50%; } @@ -115,21 +115,25 @@ export default { } &.--small { - height: 26px; + height: $size-button-small; font-size: $font-size-small; &.--circle { - width: 26px; + width: $size-button-small; } } &:not(.--icon-only) > .base-icon { - margin-right: 6px; + margin-right: $space-xx-small; + } + + &:disabled.--loading { + color: $color-neutral-80; } > .loading-spinner { position: absolute; - height: 26px; + height: $size-button-small; color: $color-neutral-60; } From 70d632e3926cd61682be0e73e8700910faa448c3 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 9 Jan 2020 14:47:14 +0530 Subject: [PATCH 39/81] use scss tokens for counter icon and loading spinner --- webapp/assets/_new/styles/tokens.scss | 7 +++++++ .../_new/generic/CounterIcon/CounterIcon.vue | 10 +++++----- .../_new/generic/LoadingSpinner/LoadingSpinner.vue | 2 +- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 29ba0286d..36c6d8d5b 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -258,6 +258,13 @@ $size-avatar-x-large: 114px; $size-button-base: 36px; $size-button-small: 26px; +/** + * @tokens Size Buttons + * @presenter Spacing + */ + + $size-icon-base: 16px; + /** * @tokens Shadow * @presenter Shadow diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue index 4f2d79a58..00b4b9c53 100644 --- a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue +++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue @@ -33,21 +33,21 @@ export default { > .count { position: absolute; - top: -4px; + top: -$space-xx-small; right: 0; display: inline-flex; align-items: center; justify-content: center; - height: 16px; - min-width: 16px; - padding: 3px; + height: $size-icon-base; + min-width: $size-icon-base; + padding: 3px; // magic number to center count border-radius: 50%; transform: translateX(50%); color: $color-neutral-100; background-color: $color-primary; - font-size: 10px; + font-size: 10px; // magic number to center count line-height: 1; text-align: center; diff --git a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue index 74e9d91bc..529a029d9 100644 --- a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue +++ b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue @@ -12,7 +12,7 @@ export default { diff --git a/webapp/components/Emotions/Emotions.vue b/webapp/components/Emotions/Emotions.vue index 5c65a9c2a..96389d10d 100644 --- a/webapp/components/Emotions/Emotions.vue +++ b/webapp/components/Emotions/Emotions.vue @@ -1,29 +1,26 @@ + + + diff --git a/webapp/components/EmotionsButton/EmotionsButton.vue b/webapp/components/EmotionsButton/EmotionsButton.vue deleted file mode 100644 index 04d3f7d96..000000000 --- a/webapp/components/EmotionsButton/EmotionsButton.vue +++ /dev/null @@ -1,55 +0,0 @@ - - - diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue index e6b6eef44..1d7ddb310 100644 --- a/webapp/pages/post/_id/_slug/index.vue +++ b/webapp/pages/post/_id/_slug/index.vue @@ -47,13 +47,9 @@
    - + - Date: Wed, 15 Jan 2020 11:42:12 +0300 Subject: [PATCH 63/81] use EmotionButton in filter menu --- .../EmotionButton/EmotionButton.vue | 7 +- .../FilterPosts/GeneralFilterMenuItems.vue | 79 +++++++++---------- 2 files changed, 42 insertions(+), 44 deletions(-) diff --git a/webapp/components/EmotionButton/EmotionButton.vue b/webapp/components/EmotionButton/EmotionButton.vue index 97eabd7df..b493a2f82 100644 --- a/webapp/components/EmotionButton/EmotionButton.vue +++ b/webapp/components/EmotionButton/EmotionButton.vue @@ -4,12 +4,13 @@
    -

    {{ emotionCount }}x

    +

    {{ emotionCount }}x

    diff --git a/webapp/components/generic/SearchableInput/SearchableInput.spec.js b/webapp/components/generic/SearchableInput/SearchableInput.spec.js index db314630f..994e617d6 100644 --- a/webapp/components/generic/SearchableInput/SearchableInput.spec.js +++ b/webapp/components/generic/SearchableInput/SearchableInput.spec.js @@ -32,81 +32,79 @@ describe('SearchableInput.vue', () => { } describe('mount', () => { - describe('testing custom functions', () => { - let select + let select, dropdown + beforeEach(() => { + select = wrapper.find('.ds-select') + select.trigger('focus') + select.element.value = 'abcd' + }) + + it('opens the dropdown when focused', () => { + expect(wrapper.find('.ds-select-dropdown').isVisible()).toBe(true) + }) + + it('closes the dropdown when blurred', () => { + select.trigger('blur') + expect(wrapper.find('.ds-select-is-open').exists()).toBe(false) + }) + + it('closes the dropdown when cleared with esc key', () => { + select.trigger('input') + select.trigger('keyup.esc') + expect(wrapper.find('.ds-select-is-open').exists()).toBe(false) + }) + + it('changes the unprocessedSearchInput as the value changes', () => { + select.trigger('input') + expect(select.element.value).toBe('abcd') + }) + + it('searches for the term when enter is pressed', async () => { + select.element.value = 'ab' + select.trigger('input') + select.trigger('keyup.enter') + await expect(wrapper.emitted().query[0]).toEqual(['ab']) + }) + + it('calls onDelete when the delete key is pressed', () => { + const spy = jest.spyOn(wrapper.vm, 'onDelete') + select.trigger('input') + select.trigger('keyup.delete') + expect(spy).toHaveBeenCalledTimes(1) + }) + + describe('navigating to resource', () => { beforeEach(() => { + propsData = { options: searchResults } + wrapper = Wrapper() select = wrapper.find('.ds-select') select.trigger('focus') - select.element.value = 'abcd' }) - it('opens the select dropdown when focused on', () => { - expect(wrapper.find('.is-open').exists()).toBe(true) - }) - - it('opens the select dropdown and blurs after focused on', () => { - select.trigger('blur') - expect(wrapper.find('.is-open').exists()).toBe(false) - }) - - it('is clearable', () => { + it('pushes to post page', async () => { + select.element.value = 'Post' select.trigger('input') - select.trigger('keyup.esc') - expect(wrapper.find('.is-open').exists()).toBe(false) - }) - - it('changes the unprocessedSearchInput as the value changes', () => { - select.trigger('input') - expect(select.element.value).toBe('abcd') - }) - - it('searches for the term when enter is pressed', async () => { - select.element.value = 'ab' - select.trigger('input') - select.trigger('keyup.enter') - await expect(wrapper.emitted().query[0]).toEqual(['ab']) - }) - - it('calls onDelete when the delete key is pressed', () => { - const spy = jest.spyOn(wrapper.vm, 'onDelete') - select.trigger('input') - select.trigger('keyup.delete') - expect(spy).toHaveBeenCalledTimes(1) - }) - - describe('navigating to resource', () => { - beforeEach(() => { - propsData = { options: searchResults } - wrapper = Wrapper() - select = wrapper.find('.ds-select') - select.trigger('focus') - }) - - it('pushes to post page', async () => { - select.element.value = 'Post' - select.trigger('input') - const post = wrapper.find('.search-post') - post.trigger('click') - await Vue.nextTick().then(() => { - expect(mocks.$router.push).toHaveBeenCalledWith({ - name: 'post-id-slug', - params: { id: 'post-by-jenny', slug: 'user-post-by-jenny' }, - }) + const post = wrapper.find('.search-post') + post.trigger('click') + await Vue.nextTick().then(() => { + expect(mocks.$router.push).toHaveBeenCalledWith({ + name: 'post-id-slug', + params: { id: 'post-by-jenny', slug: 'user-post-by-jenny' }, }) }) + }) - it("pushes to user's profile", async () => { - select.element.value = 'Bob' - select.trigger('input') - const users = wrapper.findAll('.userinfo') - const bob = users.filter(item => item.text() === '@bob-der-baumeister') - bob.trigger('click') - await Vue.nextTick().then(() => { - expect(mocks.$router.push).toHaveBeenCalledWith({ - name: 'profile-id-slug', - params: { id: 'u2', slug: 'bob-der-baumeister' }, - }) + it("pushes to user's profile", async () => { + select.element.value = 'Bob' + select.trigger('input') + const users = wrapper.findAll('.userinfo') + const bob = users.filter(item => item.text() === '@bob-der-baumeister') + bob.trigger('click') + await Vue.nextTick().then(() => { + expect(mocks.$router.push).toHaveBeenCalledWith({ + name: 'profile-id-slug', + params: { id: 'u2', slug: 'bob-der-baumeister' }, }) }) }) diff --git a/webapp/components/generic/SearchableInput/SearchableInput.vue b/webapp/components/generic/SearchableInput/SearchableInput.vue index cc9269ecf..c92d22cbe 100644 --- a/webapp/components/generic/SearchableInput/SearchableInput.vue +++ b/webapp/components/generic/SearchableInput/SearchableInput.vue @@ -3,58 +3,48 @@ class="searchable-input" aria-label="search" role="search" - :class="{ - 'is-active': isActive, - 'is-open': isOpen, - }" > -
    -
    - - + + +
    + + From eaf738c12bceea559ede59e9cceb4b0622273065 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Wed, 15 Jan 2020 16:13:47 +0300 Subject: [PATCH 71/81] replace last instance of ds-button with base-button --- webapp/components/FilterPosts/FilterPosts.spec.js | 4 ++-- .../generic/SearchableInput/SearchableInput.spec.js | 2 +- .../components/generic/SearchableInput/SearchableInput.vue | 6 +----- webapp/pages/post/_id/_slug/index.vue | 7 ++++++- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js index 37c34919a..3dd1cebef 100644 --- a/webapp/components/FilterPosts/FilterPosts.spec.js +++ b/webapp/components/FilterPosts/FilterPosts.spec.js @@ -150,7 +150,7 @@ describe('FilterPosts.vue', () => { describe('click on an "emotions-buttons" button', () => { it('calls TOGGLE_EMOTION when clicked', () => { const wrapper = openFilterPosts() - happyEmotionButton = wrapper.findAll('button.emotions-buttons').at(1) + happyEmotionButton = wrapper.findAll('.emotion-button .base-button').at(1) happyEmotionButton.trigger('click') expect(mutations['posts/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy') }) @@ -158,7 +158,7 @@ describe('FilterPosts.vue', () => { it('sets the attribute `src` to colorized image', () => { getters['posts/filteredByEmotions'] = jest.fn(() => ['happy']) const wrapper = openFilterPosts() - happyEmotionButton = wrapper.findAll('button.emotions-buttons').at(1) + happyEmotionButton = wrapper.findAll('.emotion-button .base-button').at(1) const happyEmotionButtonImage = happyEmotionButton.find('img') expect(happyEmotionButtonImage.attributes().src).toEqual('/img/svg/emoji/happy_color.svg') }) diff --git a/webapp/components/generic/SearchableInput/SearchableInput.spec.js b/webapp/components/generic/SearchableInput/SearchableInput.spec.js index 994e617d6..cc538a50b 100644 --- a/webapp/components/generic/SearchableInput/SearchableInput.spec.js +++ b/webapp/components/generic/SearchableInput/SearchableInput.spec.js @@ -32,7 +32,7 @@ describe('SearchableInput.vue', () => { } describe('mount', () => { - let select, dropdown + let select beforeEach(() => { select = wrapper.find('.ds-select') diff --git a/webapp/components/generic/SearchableInput/SearchableInput.vue b/webapp/components/generic/SearchableInput/SearchableInput.vue index c92d22cbe..a45f4104c 100644 --- a/webapp/components/generic/SearchableInput/SearchableInput.vue +++ b/webapp/components/generic/SearchableInput/SearchableInput.vue @@ -1,9 +1,5 @@