diff --git a/webapp/assets/_new/styles/resets.scss b/webapp/assets/_new/styles/resets.scss index 144f22d10..72a6184b3 100644 --- a/webapp/assets/_new/styles/resets.scss +++ b/webapp/assets/_new/styles/resets.scss @@ -19,3 +19,10 @@ h6, p { margin: 0; } + +ul, +ol { + list-style-type: none; + padding: 0; + margin: 0; +} diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 9e86b3c70..54a8b4042 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -248,7 +248,9 @@ $size-ribbon: 6px; * @presenter Spacing */ +$size-width-filter-sidebar: 85px; $size-width-paginate: 100px; +$size-max-width-filter-menu: 1026px; /** * @tokens Size Avatar diff --git a/webapp/components/FilterMenu/CategoriesFilter.spec.js b/webapp/components/FilterMenu/CategoriesFilter.spec.js new file mode 100644 index 000000000..ef0f2ad90 --- /dev/null +++ b/webapp/components/FilterMenu/CategoriesFilter.spec.js @@ -0,0 +1,80 @@ +import { mount } from '@vue/test-utils' +import Vuex from 'vuex' +import CategoriesFilter from './CategoriesFilter' + +const localVue = global.localVue + +let wrapper, environmentAndNatureButton, democracyAndPoliticsButton + +describe('CategoriesFilter.vue', () => { + const mutations = { + 'posts/TOGGLE_CATEGORY': jest.fn(), + 'posts/RESET_CATEGORIES': jest.fn(), + } + const getters = { + 'posts/filteredCategoryIds': jest.fn(() => []), + } + + const mocks = { + $t: jest.fn((string) => string), + } + + const Wrapper = () => { + const store = new Vuex.Store({ mutations, getters }) + const wrapper = mount(CategoriesFilter, { mocks, localVue, store }) + wrapper.setData({ + categories: [ + { id: 'cat4', name: 'Environment & Nature', icon: 'tree', slug: 'environment-nature' }, + { + id: 'cat15', + name: 'Consumption & Sustainability', + icon: 'shopping-cart', + slug: 'consumption-sustainability', + }, + { + id: 'cat9', + name: 'Democracy & Politics', + icon: 'university', + slug: 'democracy-politics', + }, + ], + }) + return wrapper + } + + beforeEach(() => { + wrapper = Wrapper() + }) + + describe('mount', () => { + it('starts with all categories button active', () => { + const allCategoriesButton = wrapper.find('.categories-filter .sidebar .base-button') + expect(allCategoriesButton.attributes().class).toContain('--filled') + }) + + it('sets category button attribute `filled` when corresponding category is filtered', async () => { + getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9']) + wrapper = await Wrapper() + democracyAndPoliticsButton = wrapper.findAll('.categories-filter .item .base-button').at(2) + expect(democracyAndPoliticsButton.attributes().class).toContain('--filled') + }) + + describe('click on an "catetories-buttons" button', () => { + it('calls TOGGLE_CATEGORY when clicked', () => { + environmentAndNatureButton = wrapper.findAll('.categories-filter .item .base-button').at(0) + environmentAndNatureButton.trigger('click') + expect(mutations['posts/TOGGLE_CATEGORY']).toHaveBeenCalledWith({}, 'cat4') + }) + }) + + describe('clears filter', () => { + it('when all button is clicked', async () => { + getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9']) + wrapper = await Wrapper() + const allCategoriesButton = wrapper.find('.categories-filter .sidebar .base-button') + allCategoriesButton.trigger('click') + expect(mutations['posts/RESET_CATEGORIES']).toHaveBeenCalledTimes(1) + }) + }) + }) +}) diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue new file mode 100644 index 000000000..47e4bcc10 --- /dev/null +++ b/webapp/components/FilterMenu/CategoriesFilter.vue @@ -0,0 +1,64 @@ + + + diff --git a/webapp/components/FilterMenu/EmotionsFilter.spec.js b/webapp/components/FilterMenu/EmotionsFilter.spec.js new file mode 100644 index 000000000..fb5b17dac --- /dev/null +++ b/webapp/components/FilterMenu/EmotionsFilter.spec.js @@ -0,0 +1,64 @@ +import { mount } from '@vue/test-utils' +import Vuex from 'vuex' +import EmotionsFilter from './EmotionsFilter' + +const localVue = global.localVue + +let wrapper, happyEmotionButton + +describe('EmotionsFilter', () => { + const mutations = { + 'posts/TOGGLE_EMOTION': jest.fn(), + 'posts/RESET_EMOTIONS': jest.fn(), + } + const getters = { + 'posts/filteredByEmotions': jest.fn(() => []), + } + + const mocks = { + $t: jest.fn((string) => string), + } + + const Wrapper = () => { + const store = new Vuex.Store({ mutations, getters }) + return mount(EmotionsFilter, { mocks, localVue, store }) + } + + beforeEach(() => { + wrapper = Wrapper() + }) + + describe('mount', () => { + it('starts with all emotions button active', () => { + const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button') + expect(allEmotionsButton.attributes().class).toContain('--filled') + }) + + describe('click on an "emotion-button" button', () => { + it('calls TOGGLE_EMOTION when clicked', () => { + const wrapper = Wrapper() + happyEmotionButton = wrapper.findAll('.emotion-button > .base-button').at(1) + happyEmotionButton.trigger('click') + expect(mutations['posts/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy') + }) + + it('sets the attribute `src` to colorized image', () => { + getters['posts/filteredByEmotions'] = jest.fn(() => ['happy']) + const wrapper = Wrapper() + 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') + }) + }) + + describe('clears filter', () => { + it('when all button is clicked', async () => { + getters['posts/filteredByEmotions'] = jest.fn(() => ['happy']) + wrapper = await Wrapper() + const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button') + allEmotionsButton.trigger('click') + expect(mutations['posts/RESET_EMOTIONS']).toHaveBeenCalledTimes(1) + }) + }) + }) +}) diff --git a/webapp/components/FilterMenu/EmotionsFilter.vue b/webapp/components/FilterMenu/EmotionsFilter.vue new file mode 100644 index 000000000..491dd57a8 --- /dev/null +++ b/webapp/components/FilterMenu/EmotionsFilter.vue @@ -0,0 +1,59 @@ + + + diff --git a/webapp/components/FilterMenu/FilterMenu.spec.js b/webapp/components/FilterMenu/FilterMenu.spec.js index 283db979e..18358b67f 100644 --- a/webapp/components/FilterMenu/FilterMenu.spec.js +++ b/webapp/components/FilterMenu/FilterMenu.spec.js @@ -1,43 +1,46 @@ import { mount } from '@vue/test-utils' +import Vuex from 'vuex' import FilterMenu from './FilterMenu.vue' const localVue = global.localVue +let wrapper describe('FilterMenu.vue', () => { - let wrapper - let mocks - let propsData + const mocks = { + $t: jest.fn((string) => string), + } + + const getters = { + 'posts/isActive': () => false, + } + + const stubs = { + FollowingFilter: true, + CategoriesFilter: true, + EmotionsFilter: true, + LanguagesFilter: true, + } + + const Wrapper = () => { + const store = new Vuex.Store({ getters }) + return mount(FilterMenu, { mocks, localVue, store, stubs }) + } beforeEach(() => { - mocks = { $t: () => {} } + wrapper = Wrapper() }) - describe('given a hashtag', () => { - beforeEach(() => { - propsData = { - hashtag: 'Frieden', - } + describe('mount', () => { + it('starts with dropdown button inactive', () => { + const dropdownButton = wrapper.find('.filter-menu .base-button') + expect(dropdownButton.attributes().class).toContain('--ghost') }) - describe('mount', () => { - const Wrapper = () => { - return mount(FilterMenu, { mocks, localVue, propsData }) - } - beforeEach(() => { - wrapper = Wrapper() - }) - - it('renders a card', () => { - wrapper = Wrapper() - expect(wrapper.is('.base-card')).toBe(true) - }) - - describe('click clear search button', () => { - it('emits clearSearch', () => { - wrapper.find('.base-button').trigger('click') - expect(wrapper.emitted().clearSearch).toHaveLength(1) - }) - }) + it('sets dropdwon button attribute `filled` when a filter is applied', () => { + getters['posts/isActive'] = jest.fn(() => true) + wrapper = Wrapper() + const dropdownButton = wrapper.find('.filter-menu .base-button') + expect(dropdownButton.attributes().class).toContain('--filled') }) }) }) diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue index afe6a3d7a..f46f89607 100644 --- a/webapp/components/FilterMenu/FilterMenu.vue +++ b/webapp/components/FilterMenu/FilterMenu.vue @@ -1,36 +1,62 @@ diff --git a/webapp/components/FilterMenu/FilterMenuSection.vue b/webapp/components/FilterMenu/FilterMenuSection.vue new file mode 100644 index 000000000..9100867ab --- /dev/null +++ b/webapp/components/FilterMenu/FilterMenuSection.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/webapp/components/FilterMenu/FollowingFilter.spec.js b/webapp/components/FilterMenu/FollowingFilter.spec.js new file mode 100644 index 000000000..695f4afd4 --- /dev/null +++ b/webapp/components/FilterMenu/FollowingFilter.spec.js @@ -0,0 +1,48 @@ +import { mount } from '@vue/test-utils' +import Vuex from 'vuex' +import FollowingFilter from './FollowingFilter' + +const localVue = global.localVue + +let wrapper + +describe('FollowingFilter', () => { + const mutations = { + 'posts/TOGGLE_FILTER_BY_FOLLOWED': jest.fn(), + } + const getters = { + 'auth/user': () => { + return { id: 'u34' } + }, + 'posts/filteredByUsersFollowed': jest.fn(), + } + + const mocks = { + $t: jest.fn((string) => string), + } + + const Wrapper = () => { + const store = new Vuex.Store({ mutations, getters }) + const wrapper = mount(FollowingFilter, { mocks, localVue, store }) + return wrapper + } + + beforeEach(() => { + wrapper = Wrapper() + }) + + describe('mount', () => { + it('sets "filter-by-followed" button attribute `filled`', () => { + getters['posts/filteredByUsersFollowed'] = jest.fn(() => true) + const wrapper = Wrapper() + expect(wrapper.find('.following-filter .sidebar .base-button').classes('--filled')).toBe(true) + }) + + describe('click "filter-by-followed" button', () => { + it('calls TOGGLE_FILTER_BY_FOLLOWED', () => { + wrapper.find('.following-filter .sidebar .base-button').trigger('click') + expect(mutations['posts/TOGGLE_FILTER_BY_FOLLOWED']).toHaveBeenCalledWith({}, 'u34') + }) + }) + }) +}) diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue new file mode 100644 index 000000000..73b219bca --- /dev/null +++ b/webapp/components/FilterMenu/FollowingFilter.vue @@ -0,0 +1,37 @@ + + + diff --git a/webapp/components/FilterMenu/LanguagesFilter.spec.js b/webapp/components/FilterMenu/LanguagesFilter.spec.js new file mode 100644 index 000000000..d7998ce8f --- /dev/null +++ b/webapp/components/FilterMenu/LanguagesFilter.spec.js @@ -0,0 +1,70 @@ +import { mount } from '@vue/test-utils' +import Vuex from 'vuex' +import locales from '~/locales' +import orderBy from 'lodash/orderBy' +import LanguagesFilter from './LanguagesFilter' +const localVue = global.localVue + +let wrapper, englishButton, spanishButton + +const languages = orderBy(locales, 'name') + +describe('LanguagesFilter.vue', () => { + const mutations = { + 'posts/TOGGLE_LANGUAGE': jest.fn(), + 'posts/RESET_LANGUAGES': jest.fn(), + } + const getters = { + 'posts/filteredLanguageCodes': jest.fn(() => []), + } + + const mocks = { + $t: jest.fn((string) => string), + } + + const Wrapper = () => { + const store = new Vuex.Store({ mutations, getters }) + return mount(LanguagesFilter, { mocks, localVue, store }) + } + + beforeEach(() => { + wrapper = Wrapper() + }) + + describe('mount', () => { + it('starts with all categories button active', () => { + const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button') + expect(allLanguagesButton.attributes().class).toContain('--filled') + }) + + it('sets language button attribute `filled` when corresponding language is filtered', () => { + getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es']) + const wrapper = Wrapper() + spanishButton = wrapper + .findAll('.languages-filter .item .base-button') + .at(languages.findIndex((l) => l.code === 'es')) + expect(spanishButton.attributes().class).toContain('--filled') + }) + + describe('click on an "language-button" button', () => { + it('calls TOGGLE_LANGUAGE when clicked', () => { + const wrapper = Wrapper() + englishButton = wrapper + .findAll('.languages-filter .item .base-button') + .at(languages.findIndex((l) => l.code === 'en')) + englishButton.trigger('click') + expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en') + }) + }) + + describe('clears filter', () => { + it('when all button is clicked', async () => { + getters['posts/filteredLanguageCodes'] = jest.fn(() => ['en']) + wrapper = await Wrapper() + const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button') + allLanguagesButton.trigger('click') + expect(mutations['posts/RESET_LANGUAGES']).toHaveBeenCalledTimes(1) + }) + }) + }) +}) diff --git a/webapp/components/FilterMenu/LanguagesFilter.vue b/webapp/components/FilterMenu/LanguagesFilter.vue new file mode 100644 index 000000000..10a6778a0 --- /dev/null +++ b/webapp/components/FilterMenu/LanguagesFilter.vue @@ -0,0 +1,54 @@ + + + diff --git a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue deleted file mode 100644 index 9189f417d..000000000 --- a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue +++ /dev/null @@ -1,103 +0,0 @@ - - - diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js deleted file mode 100644 index a1fc65a3c..000000000 --- a/webapp/components/FilterPosts/FilterPosts.spec.js +++ /dev/null @@ -1,167 +0,0 @@ -import { mount } from '@vue/test-utils' - -import Vuex from 'vuex' -import FilterPosts from './FilterPosts.vue' -import locales from '~/locales' -import orderBy from 'lodash/orderBy' - -const localVue = global.localVue - -let mutations -let getters - -const languages = orderBy(locales, 'name') - -describe('FilterPosts.vue', () => { - let mocks - let propsData - let menuToggle - let allCategoriesButton - let environmentAndNatureButton - let democracyAndPoliticsButton - let happyEmotionButton - let englishButton - let spanishButton - - beforeEach(() => { - mocks = { - $apollo: { - query: jest - .fn() - .mockResolvedValueOnce({ - data: { Post: { title: 'Post with Category', category: [{ id: 'cat4' }] } }, - }) - .mockRejectedValue({ message: 'We were unable to filter' }), - }, - $t: jest.fn(), - $i18n: { - locale: () => 'en', - }, - $toast: { - error: jest.fn(), - }, - } - propsData = { - categories: [ - { id: 'cat4', name: 'Environment & Nature', icon: 'tree' }, - { id: 'cat15', name: 'Consumption & Sustainability', icon: 'shopping-cart' }, - { id: 'cat9', name: 'Democracy & Politics', icon: 'university' }, - ], - } - }) - - describe('mount', () => { - mutations = { - 'posts/TOGGLE_FILTER_BY_FOLLOWED': jest.fn(), - 'posts/RESET_CATEGORIES': jest.fn(), - 'posts/TOGGLE_CATEGORY': jest.fn(), - 'posts/TOGGLE_EMOTION': jest.fn(), - 'posts/TOGGLE_LANGUAGE': jest.fn(), - 'posts/RESET_LANGUAGES': jest.fn(), - } - getters = { - 'posts/isActive': () => false, - 'auth/isModerator': () => false, - 'auth/user': () => { - return { id: 'u34' } - }, - 'posts/filteredCategoryIds': jest.fn(() => []), - 'posts/filteredByUsersFollowed': jest.fn(), - 'posts/filteredByEmotions': jest.fn(() => []), - 'posts/filteredLanguageCodes': jest.fn(() => []), - } - const openFilterPosts = () => { - const store = new Vuex.Store({ mutations, getters }) - const wrapper = mount(FilterPosts, { mocks, localVue, propsData, store }) - menuToggle = wrapper.findAll('button').at(0) - menuToggle.trigger('click') - return wrapper - } - - it('groups the categories by pair', () => { - const wrapper = openFilterPosts() - expect(wrapper.vm.chunk).toEqual([ - [ - { id: 'cat4', name: 'Environment & Nature', icon: 'tree' }, - { id: 'cat15', name: 'Consumption & Sustainability', icon: 'shopping-cart' }, - ], - [{ id: 'cat9', name: 'Democracy & Politics', icon: 'university' }], - ]) - }) - - it('starts with all categories button active', () => { - const wrapper = openFilterPosts() - allCategoriesButton = wrapper.findAll('button').at(1) - expect(allCategoriesButton.attributes().class).toContain('--filled') - }) - - it('calls TOGGLE_CATEGORY when clicked', () => { - const wrapper = openFilterPosts() - environmentAndNatureButton = wrapper.findAll('button').at(2) - environmentAndNatureButton.trigger('click') - expect(mutations['posts/TOGGLE_CATEGORY']).toHaveBeenCalledWith({}, 'cat4') - }) - - it('calls TOGGLE_LANGUAGE when clicked', () => { - const wrapper = openFilterPosts() - englishButton = wrapper - .findAll('button.language-buttons') - .at(languages.findIndex((l) => l.code === 'en')) - englishButton.trigger('click') - expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en') - }) - - 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('--filled') - }) - - 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('--filled') - }) - - it('sets "filter-by-followed" button attribute `filled`', () => { - getters['posts/filteredByUsersFollowed'] = jest.fn(() => true) - const wrapper = openFilterPosts() - expect(wrapper.find('.base-button[data-test="filter-by-followed"]').classes('--filled')).toBe( - true, - ) - }) - - describe('click "filter-by-followed" button', () => { - let wrapper - beforeEach(() => { - wrapper = openFilterPosts() - wrapper.find('.base-button[data-test="filter-by-followed"]').trigger('click') - }) - - it('calls TOGGLE_FILTER_BY_FOLLOWED', () => { - expect(mutations['posts/TOGGLE_FILTER_BY_FOLLOWED']).toHaveBeenCalledWith({}, 'u34') - }) - }) - - describe('click on an "emotions-buttons" button', () => { - it('calls TOGGLE_EMOTION when clicked', () => { - const wrapper = openFilterPosts() - happyEmotionButton = wrapper.findAll('.emotion-button .base-button').at(1) - happyEmotionButton.trigger('click') - expect(mutations['posts/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy') - }) - - it('sets the attribute `src` to colorized image', () => { - getters['posts/filteredByEmotions'] = jest.fn(() => ['happy']) - const wrapper = openFilterPosts() - 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/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue deleted file mode 100644 index e70c066f1..000000000 --- a/webapp/components/FilterPosts/FilterPosts.vue +++ /dev/null @@ -1,52 +0,0 @@ - - diff --git a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue deleted file mode 100644 index f1cf6adae..000000000 --- a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue +++ /dev/null @@ -1,103 +0,0 @@ - - - diff --git a/webapp/components/FilterPosts/LanguageFilterMenuItems.vue b/webapp/components/FilterPosts/LanguageFilterMenuItems.vue deleted file mode 100644 index 3427cf176..000000000 --- a/webapp/components/FilterPosts/LanguageFilterMenuItems.vue +++ /dev/null @@ -1,106 +0,0 @@ - - - diff --git a/webapp/components/HashtagsFilter/HashtagsFilter.spec.js b/webapp/components/HashtagsFilter/HashtagsFilter.spec.js new file mode 100644 index 000000000..3318ed7c0 --- /dev/null +++ b/webapp/components/HashtagsFilter/HashtagsFilter.spec.js @@ -0,0 +1,43 @@ +import { mount } from '@vue/test-utils' +import HashtagsFilter from './HashtagsFilter.vue' + +const localVue = global.localVue + +describe('HashtagsFilter.vue', () => { + let wrapper + let mocks + let propsData + + beforeEach(() => { + mocks = { $t: () => {} } + }) + + describe('given a hashtag', () => { + beforeEach(() => { + propsData = { + hashtag: 'Frieden', + } + }) + + describe('mount', () => { + const Wrapper = () => { + return mount(HashtagsFilter, { mocks, localVue, propsData }) + } + beforeEach(() => { + wrapper = Wrapper() + }) + + it('renders a card', () => { + wrapper = Wrapper() + expect(wrapper.is('.base-card')).toBe(true) + }) + + describe('click clear search button', () => { + it('emits clearSearch', () => { + wrapper.find('.base-button').trigger('click') + expect(wrapper.emitted().clearSearch).toHaveLength(1) + }) + }) + }) + }) +}) diff --git a/webapp/components/HashtagsFilter/HashtagsFilter.vue b/webapp/components/HashtagsFilter/HashtagsFilter.vue new file mode 100644 index 000000000..9cf853add --- /dev/null +++ b/webapp/components/HashtagsFilter/HashtagsFilter.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/webapp/components/_new/generic/LabeledButton/LabeledButton.story.js b/webapp/components/_new/generic/LabeledButton/LabeledButton.story.js new file mode 100644 index 000000000..b0f13b885 --- /dev/null +++ b/webapp/components/_new/generic/LabeledButton/LabeledButton.story.js @@ -0,0 +1,22 @@ +import { storiesOf } from '@storybook/vue' +import helpers from '~/storybook/helpers' +import LabeledButton from './LabeledButton.vue' + +helpers.init() + +storiesOf('Generic/LabeledButton', module) + .addDecorator(helpers.layout) + .add('default', () => ({ + components: { LabeledButton }, + data: () => ({ + filled: false, + }), + template: ` + + `, + })) diff --git a/webapp/components/_new/generic/LabeledButton/LabeledButton.vue b/webapp/components/_new/generic/LabeledButton/LabeledButton.vue new file mode 100644 index 000000000..af3ad157f --- /dev/null +++ b/webapp/components/_new/generic/LabeledButton/LabeledButton.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue index ab39deb99..70dec1e45 100644 --- a/webapp/layouts/default.vue +++ b/webapp/layouts/default.vue @@ -30,12 +30,7 @@ style="flex-grow: 0; flex-basis: auto;" > - + diff --git a/webapp/locales/de.json b/webapp/locales/de.json index a2ab2246f..d53e32a2b 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -332,30 +332,22 @@ "profile-not-found": "Dieses Profil konnte nicht gefunden werden" }, "filter-menu": { - "clearSearch": "Suche löschen", - "hashtag-search": "Suche nach #{hashtag}", - "title": "Deine Filterblase" - }, - "filter-posts": { - "categories": { - "all": "Alle", - "header": "Themenkategorien" - }, - "followers": { - "label": "Benutzern, denen ich folge" - }, - "general": { - "header": "Filtern nach …" - }, - "language": { - "all": "Alle", - "header": "Sprachen" - } + "all": "Alle", + "categories": "Themenkategorien", + "emotions": "Emotionen", + "filter-by": "Filtern nach...", + "following": "Benutzern, denen ich folge", + "languages": "Sprachen" }, "followButton": { "follow": "Folgen", "following": "Folge Ich" }, + "hashtags-filter": { + "clearSearch": "Suche löschen", + "hashtag-search": "Suche nach #{hashtag}", + "title": "Deine Filterblase" + }, "index": { "change-filter-settings": "Verändere die Filter-Einstellungen, um mehr Ergebnisse zu erhalten.", "no-results": "Keine Beiträge gefunden." diff --git a/webapp/locales/en.json b/webapp/locales/en.json index eb19dfbe7..e91f5c37a 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -332,30 +332,22 @@ "profile-not-found": "This profile could not be found" }, "filter-menu": { - "clearSearch": "Clear search", - "hashtag-search": "Searching for #{hashtag}", - "title": "Your filter bubble" - }, - "filter-posts": { - "categories": { - "all": "All", - "header": "Categories of Content" - }, - "followers": { - "label": "Users I follow" - }, - "general": { - "header": "Filter by …" - }, - "language": { - "all": "All", - "header": "Languages" - } + "all": "All", + "categories": "Categories of Content", + "emotions": "Emotions", + "filter-by": "Filter by...", + "following": "Users I follow", + "languages": "Languages" }, "followButton": { "follow": "Follow", "following": "Following" }, + "hashtags-filter": { + "clearSearch": "Clear search", + "hashtag-search": "Searching for #{hashtag}", + "title": "Your filter bubble" + }, "index": { "change-filter-settings": "Change your filter settings to get more results.", "no-results": "No contributions found." diff --git a/webapp/locales/es.json b/webapp/locales/es.json index 766de3841..0925687fc 100644 --- a/webapp/locales/es.json +++ b/webapp/locales/es.json @@ -330,30 +330,22 @@ "profile-not-found": "Este perfil no se pudo encontrar" }, "filter-menu": { - "clearSearch": "Borrar búsqueda", - "hashtag-search": "Buscando a #{hashtag}", - "title": "Su burbuja de filtro" - }, - "filter-posts": { - "categories": { - "all": "Todas", - "header": "Categorías de contenido" - }, - "followers": { - "label": "Usuarios que sigo" - }, - "general": { - "header": "Filtrar por...." - }, - "language": { - "all": "Todos", - "header": "Idiomas" - } + "all": "Todas", + "categories": "Categorías de contenido", + "emotions": "Emociones", + "filter-by": "Filtrar por...", + "following": "Usuarios que sigo", + "languages": "Idiomas" }, "followButton": { "follow": "Seguir", "following": "Siguiendo" }, + "hashtags-filter": { + "clearSearch": "Borrar búsqueda", + "hashtag-search": "Buscando a #{hashtag}", + "title": "Su burbuja de filtro" + }, "index": { "change-filter-settings": "Cambie la configuración de sus filtros para obtener más resultados.", "no-results": "No se han encontrado contribuciones." diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json index 8716b051a..e0bcf14e1 100644 --- a/webapp/locales/fr.json +++ b/webapp/locales/fr.json @@ -319,30 +319,22 @@ "placeholder": "Écrivez quelque chose d'inspirant..." }, "filter-menu": { - "clearSearch": "Réinitialiser la recherche", - "hashtag-search": "Recherche de #{hashtag}", - "title": "Votre bulle de filtre" - }, - "filter-posts": { - "categories": { - "all": "Toutes", - "header": "Catégories de contenu" - }, - "followers": { - "label": "Utilisateurs que je suis" - }, - "general": { - "header": "Filtrer par ...." - }, - "language": { - "all": "Tous", - "header": "Langues" - } + "all": "Toutes", + "categories": "Catégories de contenu", + "emotions": "Émotions", + "filter-by": "Filtrer par...", + "following": "Utilisateurs que je suis", + "languages": "Langues" }, "followButton": { "follow": "Suivre", "following": "Je suis les" }, + "hashtags-filter": { + "clearSearch": "Réinitialiser la recherche", + "hashtag-search": "Recherche de #{hashtag}", + "title": "Votre bulle de filtre" + }, "index": { "change-filter-settings": "Modifiez les paramètres de filtrage pour obtenir plus de résultats.", "no-results": "Pas de contribution trouvée." diff --git a/webapp/locales/it.json b/webapp/locales/it.json index 407ca5c14..b53b863cc 100644 --- a/webapp/locales/it.json +++ b/webapp/locales/it.json @@ -324,30 +324,22 @@ "placeholder": "" }, "filter-menu": { - "clearSearch": "", - "hashtag-search": "", - "title": "" - }, - "filter-posts": { - "categories": { - "all": "", - "header": "" - }, - "followers": { - "label": "" - }, - "general": { - "header": "" - }, - "language": { - "all": "", - "header": "" - } + "all": "", + "categories": "", + "emotions": "", + "filter-by": "", + "following": "", + "languages": "" }, "followButton": { "follow": "", "following": "" }, + "hashtags-filter": { + "clearSearch": "", + "hashtag-search": "", + "title": "" + }, "index": { "change-filter-settings": "", "no-results": "" diff --git a/webapp/locales/pl.json b/webapp/locales/pl.json index 8b4dbf59a..0c7dd2f59 100644 --- a/webapp/locales/pl.json +++ b/webapp/locales/pl.json @@ -160,13 +160,13 @@ "editor": { "placeholder": "Napisz coś inspirującego..." }, - "filter-menu": { - "title": "Twoja bańka filtrująca" - }, "followButton": { "follow": "naśladować", "following": "w skutek" }, + "hashtags-filter": { + "title": "Twoja bańka filtrująca" + }, "login": { "copy": "Jeśli masz już konto Human Connection, zaloguj się tutaj.", "email": "Twój adres e-mail", diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json index 2cd742dde..1a3efeb44 100644 --- a/webapp/locales/pt.json +++ b/webapp/locales/pt.json @@ -315,30 +315,22 @@ "placeholder": " Escreva algo inspirador…" }, "filter-menu": { - "clearSearch": "Limpar pesquisa", - "hashtag-search": "Procurando por #{hashtag}", - "title": "Sua bolha de filtro" - }, - "filter-posts": { - "categories": { - "all": "Todos", - "header": "Categorias de Conteúdo" - }, - "followers": { - "label": "Usuários que eu sigo" - }, - "general": { - "header": "Filtrar por …" - }, - "language": { - "all": "Todos", - "header": "Idiomas" - } + "all": "Todos", + "categories": "Categorias de Conteúdo", + "emotions": "Emoções", + "filter-by": "Filtrar por...", + "following": "Usuários que eu sigo", + "languages": "Idiomas" }, "followButton": { "follow": "Seguir", "following": "Seguindo" }, + "hashtags-filter": { + "clearSearch": "Limpar pesquisa", + "hashtag-search": "Procurando por #{hashtag}", + "title": "Sua bolha de filtro" + }, "index": { "change-filter-settings": "Altere suas configurações de filtro para obter mais resultados.", "no-results": "Nenhuma contribuição encontrada." diff --git a/webapp/locales/ru.json b/webapp/locales/ru.json index 3572ae32d..59928a2c5 100644 --- a/webapp/locales/ru.json +++ b/webapp/locales/ru.json @@ -330,30 +330,22 @@ "profile-not-found": "Этот профиль не удалось найти" }, "filter-menu": { - "clearSearch": "Очистить поиск", - "hashtag-search": "Поиск по #{hashtag}", - "title": "Ваш фильтр пузыря" - }, - "filter-posts": { - "categories": { - "all": "Все", - "header": "Категории" - }, - "followers": { - "label": "Мои подписки" - }, - "general": { - "header": "Другие фильтры" - }, - "language": { - "all": "Все", - "header": "Языки" - } + "all": "Все", + "categories": "Категории", + "emotions": "", + "filter-by": "Другие фильтры", + "following": "Мои подписки", + "languages": "Языки" }, "followButton": { "follow": "Подписаться", "following": "Вы подписаны" }, + "hashtags-filter": { + "clearSearch": "Очистить поиск", + "hashtag-search": "Поиск по #{hashtag}", + "title": "Ваш фильтр пузыря" + }, "index": { "change-filter-settings": "Измените настройки фильтра, чтобы получить больше результатов.", "no-results": "Посты не найдены." diff --git a/webapp/pages/index.spec.js b/webapp/pages/index.spec.js index daa4fd4a5..eb65e485c 100644 --- a/webapp/pages/index.spec.js +++ b/webapp/pages/index.spec.js @@ -1,7 +1,7 @@ import { config, shallowMount, mount } from '@vue/test-utils' import PostIndex from './index.vue' import Vuex from 'vuex' -import FilterMenu from '~/components/FilterMenu/FilterMenu' +import HashtagsFilter from '~/components/HashtagsFilter/HashtagsFilter' const localVue = global.localVue @@ -106,7 +106,7 @@ describe('PostIndex', () => { it('clears the search when the filter menu emits clearSearch', () => { mocks.$route.query.hashtag = '#samplehashtag' wrapper = Wrapper() - wrapper.find(FilterMenu).vm.$emit('clearSearch') + wrapper.find(HashtagsFilter).vm.$emit('clearSearch') expect(wrapper.vm.hashtag).toBeNull() }) diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index 984f47b27..e6504cc7a 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -2,7 +2,7 @@
- + @@ -65,7 +65,7 @@