ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'migrate-styleguide-buttons' into button-migration-fixes

Browse Source
This commit is contained in:
Alina Beck 2020-01-14 17:04:25 +03:00 committed by GitHub
commit e9ad67d39b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
59 changed files with 510 additions and 414 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/integration/common/report.js
View File

@ -44,7 +44,7 @@ Given('I am logged in with a {string} role', role => {
When('I click on "Report Post" from the content menu of the post', () => { When('I click on "Report Post" from the content menu of the post', () => {
cy.contains('.ds-card', davidIrvingPostTitle) cy.contains('.ds-card', davidIrvingPostTitle)
.find('.content-menu-trigger') .find('.content-menu .base-button')
.click({force: true}) .click({force: true})
cy.get('.popover .ds-menu-item-link') cy.get('.popover .ds-menu-item-link')
@ -54,7 +54,7 @@ When('I click on "Report Post" from the content menu of the post', () => {
When('I click on "Report User" from the content menu in the user info box', () => { When('I click on "Report User" from the content menu in the user info box', () => {
cy.contains('.ds-card', davidIrvingPostTitle) cy.contains('.ds-card', davidIrvingPostTitle)
.get('.user-content-menu .content-menu-trigger') .get('.user-content-menu .base-button')
.click({ force: true }) .click({ force: true })
cy.get('.popover .ds-menu-item-link') cy.get('.popover .ds-menu-item-link')

4
cypress/integration/common/settings.js
View File

@ -119,7 +119,7 @@ Then('they should be able to see my social media links', () => {
}) })
When('I delete a social media link', () => { When('I delete a social media link', () => {
cy.get("a[name='delete']") cy.get(".base-button[title='Delete']")
.click() .click()
}) })
@ -129,7 +129,7 @@ Then('it gets deleted successfully', () => {
}) })
When('I start editing a social media link', () => { When('I start editing a social media link', () => {
cy.get("a[name='edit']") cy.get(".base-button[title='Edit']")
.click() .click()
}) })

4
cypress/integration/common/steps.js
View File

@ -243,7 +243,7 @@ When("I type in the following text:", text => {
}); });
Then("I select a category", () => { Then("I select a category", () => {
cy.get("span") cy.get(".base-button")
.contains("Just for Fun") .contains("Just for Fun")
.click(); .click();
}); });
@ -449,7 +449,7 @@ When("I ", name => {
When( When(
"I click on {string} from the content menu in the user info box", "I click on {string} from the content menu in the user info box",
button => { button => {
cy.get(".user-content-menu .content-menu-trigger").click(); cy.get(".user-content-menu .base-button").click();
cy.get(".popover .ds-menu-item-link") cy.get(".popover .ds-menu-item-link")
.contains(button) .contains(button)
.click({ .click({

65
webapp/assets/_new/styles/mixins/buttonStates.scss Normal file
View File

@ -0,0 +1,65 @@
@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 $duration-short;
&:focus {
outline: $border-size-base 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;
}
@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-100;
background-color: $color-neutral-60;
border-color: $color-neutral-60;
}
}
}

15
webapp/assets/_new/styles/tokens.scss
View File

@ -250,6 +250,21 @@ $size-avatar-base: 44px;
$size-avatar-large: 64px; $size-avatar-large: 64px;
$size-avatar-x-large: 114px; $size-avatar-x-large: 114px;
/**
* @tokens Size Buttons
* @presenter Spacing
*/
$size-button-base: 36px;
$size-button-small: 26px;
/**
* @tokens Size Buttons
* @presenter Spacing
*/
$size-icon-base: 16px;
/** /**
* @tokens Shadow * @tokens Shadow
* @presenter Shadow * @presenter Shadow

2
webapp/components/CategoriesSelect/CategoriesSelect.vue
View File

@ -6,7 +6,7 @@
<base-button <base-button
:data-test="categoryButtonsId(category.id)" :data-test="categoryButtonsId(category.id)"
@click="toggleCategory(category.id)" @click="toggleCategory(category.id)"
:primary="isActive(category.id)" :filled="isActive(category.id)"
:disabled="isDisabled(category.id)" :disabled="isDisabled(category.id)"
:icon="category.icon" :icon="category.icon"
size="small" size="small"

6
webapp/components/CommentForm/CommentForm.spec.js
View File

@ -74,7 +74,7 @@ describe('CommentForm.vue', () => {
it('calls `clear` method when the cancel button is clicked', async () => { it('calls `clear` method when the cancel button is clicked', async () => {
wrapper.vm.updateEditorContent('ok') wrapper.vm.updateEditorContent('ok')
await wrapper.find('.cancelBtn').trigger('submit') await wrapper.find('[data-test="cancel-button"]').trigger('submit')
expect(cancelMethodSpy).toHaveBeenCalledTimes(1) expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
}) })
@ -162,13 +162,13 @@ describe('CommentForm.vue', () => {
describe('cancel button is clicked', () => { describe('cancel button is clicked', () => {
it('calls `closeEditWindow` method', async () => { it('calls `closeEditWindow` method', async () => {
wrapper.vm.updateEditorContent('ok') wrapper.vm.updateEditorContent('ok')
await wrapper.find('.cancelBtn').trigger('submit') await wrapper.find('[data-test="cancel-button"]').trigger('submit')
expect(closeMethodSpy).toHaveBeenCalledTimes(1) expect(closeMethodSpy).toHaveBeenCalledTimes(1)
}) })
it('emits `showEditCommentMenu` event', async () => { it('emits `showEditCommentMenu` event', async () => {
wrapper.vm.updateEditorContent('ok') 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]]) expect(wrapper.emitted('showEditCommentMenu')).toEqual([[false]])
}) })
}) })

10
webapp/components/CommentForm/CommentForm.vue
View File

@ -5,10 +5,15 @@
<!-- with client-only the content is not shown --> <!-- with client-only the content is not shown -->
<hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" /> <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
<div class="buttons"> <div class="buttons">
<base-button :disabled="disabled && !update" @click="handleCancel"> <base-button
:disabled="disabled && !update"
@click="handleCancel"
data-test="cancel-button"
danger
>
{{ $t('actions.cancel') }} {{ $t('actions.cancel') }}
</base-button> </base-button>
<base-button type="submit" :loading="loading" :disabled="disabled || errors" primary> <base-button type="submit" :loading="loading" :disabled="disabled || errors" filled>
{{ $t('post.comment.submit') }} {{ $t('post.comment.submit') }}
</base-button> </base-button>
</div> </div>
@ -67,7 +72,6 @@ export default {
this.$emit('showEditCommentMenu', false) this.$emit('showEditCommentMenu', false)
}, },
handleCancel() { handleCancel() {
console.log('handle cancel')
if (!this.update) { if (!this.update) {
this.clear() this.clear()
} else { } else {

7
webapp/components/CommentList/CommentList.spec.js
View File

@ -63,12 +63,7 @@ describe('CommentList.vue', () => {
it('displays a comments counter', () => { it('displays a comments counter', () => {
wrapper = Wrapper() wrapper = Wrapper()
expect(wrapper.find('span.ds-tag').text()).toEqual('1') expect(wrapper.find('.count').text()).toEqual('1')
})
it('displays a comments counter', () => {
wrapper = Wrapper()
expect(wrapper.find('span.ds-tag').text()).toEqual('1')
}) })
describe('scrollToAnchor mixin', () => { describe('scrollToAnchor mixin', () => {

8
webapp/components/ContributionForm/ContributionForm.vue
View File

@ -82,14 +82,10 @@
</ds-text> </ds-text>
<ds-space /> <ds-space />
<div slot="footer" style="text-align: right"> <div slot="footer" style="text-align: right">
<base-button <base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
data-test="cancel-button"
:disabled="loading"
@click="$router.back()"
>
{{ $t('actions.cancel') }} {{ $t('actions.cancel') }}
</base-button> </base-button>
<base-button type="submit" icon="check" :loading="loading" :disabled="errors" primary> <base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>
{{ $t('actions.save') }} {{ $t('actions.save') }}
</base-button> </base-button>
</div> </div>

1
webapp/components/DeleteData/DeleteData.vue
View File

@ -61,6 +61,7 @@
<base-button <base-button
icon="trash" icon="trash"
danger danger
filled
:disabled="!deleteEnabled" :disabled="!deleteEnabled"
data-test="delete-button" data-test="delete-button"
@click="handleSubmit" @click="handleSubmit"

2
webapp/components/DonationInfo/DonationInfo.vue
View File

@ -2,7 +2,7 @@
<div class="donation-info"> <div class="donation-info">
<progress-bar :title="title" :label="label" :goal="goal" :progress="progress" /> <progress-bar :title="title" :label="label" :goal="goal" :progress="progress" />
<a target="_blank" href="https://human-connection.org/spenden/"> <a target="_blank" href="https://human-connection.org/spenden/">
<base-button primary>{{ $t('donations.donate-now') }}</base-button> <base-button filled>{{ $t('donations.donate-now') }}</base-button>
</a> </a>
</div> </div>
</template> </template>

55
webapp/components/EnterNonce/EnterNonce.vue
View File

@ -1,30 +1,27 @@
<template> <template>
<ds-space margin-top="large" margin-bottom="xxx-small"> <ds-form
<ds-form class="enter-nonce"
v-model="formData" v-model="formData"
:schema="formSchema" :schema="formSchema"
@submit="handleSubmitVerify" @submit="handleSubmitVerify"
@input="handleInput" @input="handleInput"
@input-valid="handleInputValid" @input-valid="handleInputValid"
> >
<ds-input <ds-input
:placeholder="$t('components.enter-nonce.form.nonce')" :placeholder="$t('components.enter-nonce.form.nonce')"
model="nonce" model="nonce"
name="nonce" name="nonce"
id="nonce" id="nonce"
icon="question-circle" icon="question-circle"
/> />
<ds-space margin-botton="large"> <ds-text>
<ds-text> {{ $t('components.enter-nonce.form.description') }}
{{ $t('components.enter-nonce.form.description') }} </ds-text>
</ds-text> <base-button :disabled="disabled" filled name="submit" type="submit">
</ds-space> {{ $t('components.enter-nonce.form.next') }}
<ds-button :disabled="disabled" primary fullwidth name="submit" type="submit"> </base-button>
{{ $t('components.enter-nonce.form.next') }}
</ds-button>
</ds-form>
<slot></slot> <slot></slot>
</ds-space> </ds-form>
</template> </template>
<script> <script>
@ -64,3 +61,11 @@ export default {
}, },
} }
</script> </script>
<style lang="scss">
.enter-nonce {
display: flex;
flex-direction: column;
margin: $space-large 0 $space-xxx-small 0;
}
</style>

2
webapp/components/FilterMenu/FilterMenu.spec.js
View File

@ -39,7 +39,7 @@ describe('FilterMenu.vue', () => {
describe('click "clear-search-button" button', () => { describe('click "clear-search-button" button', () => {
it('emits clearSearch', () => { 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) expect(wrapper.emitted().clearSearch).toHaveLength(1)
}) })
}) })

9
webapp/components/FilterMenu/FilterMenu.vue
View File

@ -6,15 +6,16 @@
</ds-flex-item> </ds-flex-item>
<ds-flex-item> <ds-flex-item>
<div class="filter-menu-buttons"> <div class="filter-menu-buttons">
<ds-button <base-button
name="clear-search-button"
icon="close"
circle
@click="clearSearch"
v-tooltip="{ v-tooltip="{
content: this.$t('filter-menu.clearSearch'), content: this.$t('filter-menu.clearSearch'),
placement: 'left', placement: 'left',
delay: { show: 500 }, delay: { show: 500 },
}" }"
name="clear-search-button"
icon="close"
@click="clearSearch"
/> />
</div> </div>
</ds-flex-item> </ds-flex-item>

14
webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
View File

@ -12,10 +12,11 @@
<ds-flex> <ds-flex>
<ds-flex-item width="10%" /> <ds-flex-item width="10%" />
<ds-flex-item width="100%"> <ds-flex-item width="100%">
<ds-button <base-button
circle
icon="check" icon="check"
@click.stop.prevent="resetCategories" @click="resetCategories"
:primary="!filteredCategoryIds.length" :filled="!filteredCategoryIds.length"
/> />
<ds-flex-item> <ds-flex-item>
<label class="category-labels">{{ $t('filter-posts.categories.all') }}</label> <label class="category-labels">{{ $t('filter-posts.categories.all') }}</label>
@ -37,10 +38,11 @@
<ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-menu"> <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-menu">
<ds-flex class="categories-menu"> <ds-flex class="categories-menu">
<ds-flex-item width="100%" class="categories-menu-item"> <ds-flex-item width="100%" class="categories-menu-item">
<ds-button <base-button
circle
:icon="category.icon" :icon="category.icon"
:primary="filteredCategoryIds.includes(category.id)" :filled="filteredCategoryIds.includes(category.id)"
@click.stop.prevent="toggleCategory(category.id)" @click="toggleCategory(category.id)"
/> />
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
</ds-flex-item> </ds-flex-item>

16
webapp/components/FilterPosts/FilterPosts.spec.js
View File

@ -92,7 +92,7 @@ describe('FilterPosts.vue', () => {
it('starts with all categories button active', () => { it('starts with all categories button active', () => {
const wrapper = openFilterPosts() const wrapper = openFilterPosts()
allCategoriesButton = wrapper.findAll('button').at(1) allCategoriesButton = wrapper.findAll('button').at(1)
expect(allCategoriesButton.attributes().class).toContain('ds-button-primary') expect(allCategoriesButton.attributes().class).toContain('--filled')
}) })
it('calls TOGGLE_CATEGORY when clicked', () => { it('calls TOGGLE_CATEGORY when clicked', () => {
@ -111,27 +111,27 @@ describe('FilterPosts.vue', () => {
expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en') 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']) getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
const wrapper = openFilterPosts() const wrapper = openFilterPosts()
democracyAndPoliticsButton = wrapper.findAll('button').at(4) democracyAndPoliticsButton = wrapper.findAll('button').at(4)
expect(democracyAndPoliticsButton.attributes().class).toContain('ds-button-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']) getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es'])
const wrapper = openFilterPosts() const wrapper = openFilterPosts()
spanishButton = wrapper spanishButton = wrapper
.findAll('button.language-buttons') .findAll('button.language-buttons')
.at(languages.findIndex(l => l.code === 'es')) .at(languages.findIndex(l => l.code === 'es'))
expect(spanishButton.attributes().class).toContain('ds-button-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) getters['posts/filteredByUsersFollowed'] = jest.fn(() => true)
const wrapper = openFilterPosts() const wrapper = openFilterPosts()
expect( expect(
wrapper.find({ name: 'filter-by-followed-authors-only' }).classes('ds-button-primary'), wrapper.find('.base-button[name="filter-by-followed-authors-only"]').classes('--filled'),
).toBe(true) ).toBe(true)
}) })
@ -139,7 +139,7 @@ describe('FilterPosts.vue', () => {
let wrapper let wrapper
beforeEach(() => { beforeEach(() => {
wrapper = openFilterPosts() 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', () => { it('calls TOGGLE_FILTER_BY_FOLLOWED', () => {

6
webapp/components/FilterPosts/FilterPosts.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<dropdown ref="menu" :placement="placement" :offset="offset"> <dropdown ref="menu" :placement="placement" :offset="offset">
<ds-button <base-button
slot="default" slot="default"
icon="filter" icon="filter"
:primary="filterActive" :filled="filterActive"
:ghost="!filterActive" :ghost="!filterActive"
slot-scope="{ toggleMenu }" slot-scope="{ toggleMenu }"
@click.prevent="toggleMenu()" @click.prevent="toggleMenu()"
> >
<base-icon class="dropdown-arrow" name="angle-down" /> <base-icon class="dropdown-arrow" name="angle-down" />
</ds-button> </base-button>
<template slot="popover"> <template slot="popover">
<ds-container> <ds-container>
<categories-filter-menu-items :chunk="chunk" /> <categories-filter-menu-items :chunk="chunk" />

24
webapp/components/FilterPosts/GeneralFilterMenuItems.vue
View File

@ -13,17 +13,18 @@
<ds-flex-item width="10%" /> <ds-flex-item width="10%" />
<ds-space margin-bottom="xx-small" /> <ds-space margin-bottom="xx-small" />
<ds-flex-item width="100%"> <ds-flex-item width="100%">
<div class="follow-button"> <div class="follow-filter-button">
<ds-button <base-button
name="filter-by-followed-authors-only"
icon="user-plus"
circle
:filled="filteredByUsersFollowed"
@click="toggleFilteredByFollowed(user.id)"
v-tooltip="{ v-tooltip="{
content: this.$t('contribution.filterFollow'), content: this.$t('contribution.filterFollow'),
placement: 'left', placement: 'left',
delay: { show: 500 }, delay: { show: 500 },
}" }"
name="filter-by-followed-authors-only"
icon="user-plus"
:primary="filteredByUsersFollowed"
@click="toggleFilteredByFollowed(user.id)"
/> />
<ds-space margin-bottom="x-small" /> <ds-space margin-bottom="x-small" />
<ds-flex-item> <ds-flex-item>
@ -36,14 +37,9 @@
</ds-flex-item> </ds-flex-item>
<div v-for="emotion in emotionsArray" :key="emotion"> <div v-for="emotion in emotionsArray" :key="emotion">
<ds-flex-item :width="{ lg: '100%' }"> <ds-flex-item :width="{ lg: '100%' }">
<ds-button <base-button @click="toogleFilteredByEmotions(emotion)" class="emotions-buttons" circle>
size="large"
ghost
@click="toogleFilteredByEmotions(emotion)"
class="emotions-buttons"
>
<img :src="iconPath(emotion)" width="40" /> <img :src="iconPath(emotion)" width="40" />
</ds-button> </base-button>
<ds-space margin-bottom="x-small" /> <ds-space margin-bottom="x-small" />
<ds-flex-item class="emotions-mobile-space text-center"> <ds-flex-item class="emotions-mobile-space text-center">
<label class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</label> <label class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</label>
@ -99,7 +95,7 @@ export default {
#filter-posts-header { #filter-posts-header {
text-align: center; text-align: center;
} }
.follow-button { .follow-filter-button {
float: left; float: left;
} }
} }

16
webapp/components/FilterPosts/LanguageFilterMenuItems.vue
View File

@ -12,10 +12,11 @@
<ds-flex> <ds-flex>
<ds-flex-item width="10%" /> <ds-flex-item width="10%" />
<ds-flex-item width="100%"> <ds-flex-item width="100%">
<ds-button <base-button
icon="check" icon="check"
@click.stop.prevent="resetLanguages" circle
:primary="!filteredLanguageCodes.length" :filled="!filteredLanguageCodes.length"
@click="resetLanguages"
/> />
<ds-flex-item> <ds-flex-item>
<label class="language-labels">{{ $t('filter-posts.language.all') }}</label> <label class="language-labels">{{ $t('filter-posts.language.all') }}</label>
@ -32,13 +33,14 @@
<ds-flex v-for="language in locales" :key="language.code" class="languages-menu"> <ds-flex v-for="language in locales" :key="language.code" class="languages-menu">
<ds-flex class="languages-menu"> <ds-flex class="languages-menu">
<ds-flex-item width="100%" class="language-menu-item"> <ds-flex-item width="100%" class="language-menu-item">
<ds-button <base-button
class="language-buttons" class="language-buttons"
:primary="filteredLanguageCodes.includes(language.code)" circle
@click.stop.prevent="toggleLanguage(language.code)" :filled="filteredLanguageCodes.includes(language.code)"
@click="toggleLanguage(language.code)"
> >
{{ language.code.toUpperCase() }} {{ language.code.toUpperCase() }}
</ds-button> </base-button>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
</ds-flex-item> </ds-flex-item>
<ds-flex> <ds-flex>

15
webapp/components/FollowButton.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<ds-button <base-button
class="follow-button"
:disabled="disabled || !followId" :disabled="disabled || !followId"
:loading="loading" :loading="loading"
:icon="icon" :icon="icon"
:primary="isFollowed && !hovered" :filled="isFollowed && !hovered"
:danger="isFollowed && hovered" :danger="isFollowed && hovered"
fullwidth
@mouseenter.native="onHover" @mouseenter.native="onHover"
@mouseleave.native="hovered = false" @mouseleave.native="hovered = false"
@click.prevent="toggle" @click.prevent="toggle"
> >
{{ label }} {{ label }}
</ds-button> </base-button>
</template> </template>
<script> <script>
@ -83,3 +83,10 @@ export default {
}, },
} }
</script> </script>
<style lang="scss">
.follow-button {
display: block;
width: 100%;
}
</style>

16
webapp/components/LoginForm/LoginForm.vue
View File

@ -50,16 +50,9 @@
<ds-space margin-bottom="large"> <ds-space margin-bottom="large">
<nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link> <nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link>
</ds-space> </ds-space>
<ds-button <base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
:loading="pending"
primary
fullwidth
name="submit"
type="submit"
icon="sign-in"
>
{{ $t('login.login') }} {{ $t('login.login') }}
</ds-button> </base-button>
<ds-space margin-top="large" margin-bottom="x-small"> <ds-space margin-top="large" margin-bottom="x-small">
{{ $t('login.no-account') }} {{ $t('login.no-account') }}
<nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link> <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
@ -113,6 +106,11 @@ export default {
} }
.login-card { .login-card {
position: relative; position: relative;
.base-button {
display: block;
width: 100%;
}
} }
.login-locale-switch { .login-locale-switch {
position: absolute; position: absolute;

13
webapp/components/Modal/ConfirmModal.vue
View File

@ -10,11 +10,16 @@
<p v-html="message" /> <p v-html="message" />
<template slot="footer"> <template slot="footer">
<ds-button class="cancel" :icon="modalData.buttons.cancel.icon" @click="cancel"> <base-button
class="cancel"
:danger="!modalData.buttons.confirm.danger"
:icon="modalData.buttons.cancel.icon"
@click="cancel"
>
{{ $t(modalData.buttons.cancel.textIdent) }} {{ $t(modalData.buttons.cancel.textIdent) }}
</ds-button> </base-button>
<ds-button <base-button
:danger="modalData.buttons.confirm.danger" :danger="modalData.buttons.confirm.danger"
class="confirm" class="confirm"
:icon="modalData.buttons.confirm.icon" :icon="modalData.buttons.confirm.icon"
@ -22,7 +27,7 @@
@click="confirm" @click="confirm"
> >
{{ $t(modalData.buttons.confirm.textIdent) }} {{ $t(modalData.buttons.confirm.textIdent) }}
</ds-button> </base-button>
</template> </template>
</ds-modal> </ds-modal>
</template> </template>

7
webapp/components/Modal/DisableModal.vue
View File

@ -4,11 +4,10 @@
<p v-html="message" /> <p v-html="message" />
<template slot="footer"> <template slot="footer">
<ds-button class="cancel" @click="cancel">{{ $t('disable.cancel') }}</ds-button> <base-button class="cancel" @click="cancel">{{ $t('disable.cancel') }}</base-button>
<base-button danger filled class="confirm" icon="exclamation-circle" @click="confirm">
<ds-button danger class="confirm" icon="exclamation-circle" @click="confirm">
{{ $t('disable.submit') }} {{ $t('disable.submit') }}
</ds-button> </base-button>
</template> </template>
</ds-modal> </ds-modal>
</template> </template>

11
webapp/components/Modal/ReportModal.vue
View File

@ -29,12 +29,13 @@
</small> </small>
<ds-space /> <ds-space />
<template #footer> <template #footer>
<ds-button class="cancel" icon="close" @click="cancel"> <base-button class="cancel" icon="close" @click="cancel">
{{ $t('report.cancel') }} {{ $t('report.cancel') }}
</ds-button> </base-button>
<ds-button <base-button
danger danger
filled
class="confirm" class="confirm"
icon="exclamation-circle" icon="exclamation-circle"
:disabled="!form.reasonCategory" :disabled="!form.reasonCategory"
@ -42,7 +43,7 @@
@click="confirm" @click="confirm"
> >
{{ $t('report.submit') }} {{ $t('report.submit') }}
</ds-button> </base-button>
</template> </template>
</ds-modal> </ds-modal>
</template> </template>
@ -161,7 +162,7 @@ export default {
.ds-modal { .ds-modal {
max-width: 600px !important; max-width: 600px !important;
} }
.ds-radio-option:not(.ds-button) { .ds-radio-option {
width: 100% !important; width: 100% !important;
} }
.ds-radio-option-label { .ds-radio-option-label {

22
webapp/components/NotificationMenu/NotificationMenu.spec.js
View File

@ -1,11 +1,11 @@
import { config, shallowMount } from '@vue/test-utils' import { config, mount } from '@vue/test-utils'
import NotificationMenu from './NotificationMenu' import NotificationMenu from './NotificationMenu'
const localVue = global.localVue const localVue = global.localVue
localVue.filter('truncate', string => string) localVue.filter('truncate', string => string)
config.stubs.dropdown = '<span class="dropdown"><slot /></span>' config.stubs.dropdown = '<span class="dropdown"><slot :toggleMenu="() => null" /></span>'
describe('NotificationMenu.vue', () => { describe('NotificationMenu.vue', () => {
let wrapper let wrapper
@ -22,9 +22,9 @@ describe('NotificationMenu.vue', () => {
} }
}) })
describe('shallowMount', () => { describe('mount', () => {
const Wrapper = () => { const Wrapper = () => {
return shallowMount(NotificationMenu, { return mount(NotificationMenu, {
data, data,
mocks, mocks,
localVue, localVue,
@ -33,7 +33,7 @@ describe('NotificationMenu.vue', () => {
it('counter displays 0', () => { it('counter displays 0', () => {
wrapper = Wrapper() wrapper = Wrapper()
expect(wrapper.find('ds-button-stub').text()).toEqual('0') expect(wrapper.find('.count').text()).toEqual('0')
}) })
it('no dropdown is rendered', () => { it('no dropdown is rendered', () => {
@ -67,12 +67,12 @@ describe('NotificationMenu.vue', () => {
it('counter displays 0', () => { it('counter displays 0', () => {
wrapper = Wrapper() wrapper = Wrapper()
expect(wrapper.find('ds-button-stub').text()).toEqual('0') expect(wrapper.find('.count').text()).toEqual('0')
}) })
it('button is not primary', () => { it('counter is not colored', () => {
wrapper = Wrapper() wrapper = Wrapper()
expect(wrapper.find('ds-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', () => { it('displays the number of unread notifications', () => {
wrapper = Wrapper() wrapper = Wrapper()
expect(wrapper.find('ds-button-stub').text()).toEqual('2') expect(wrapper.find('.count').text()).toEqual('2')
}) })
it('renders primary button', () => { it('renders the counter in red', () => {
wrapper = Wrapper() wrapper = Wrapper()
expect(wrapper.find('ds-button-stub').props('primary')).toBe(true) expect(wrapper.find('.count').classes()).toContain('--danger')
}) })
}) })
}) })

26
webapp/components/NotificationMenu/NotificationMenu.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<ds-button v-if="!notifications.length" class="notifications-menu" disabled icon="bell"> <base-button v-if="!notifications.length" class="notifications-menu" disabled ghost circle>
{{ unreadNotificationsCount }} <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
</ds-button> </base-button>
<dropdown v-else class="notifications-menu" offset="8" :placement="placement"> <dropdown v-else class="notifications-menu" offset="8" :placement="placement">
<template slot="default" slot-scope="{ toggleMenu }"> <template slot="default" slot-scope="{ toggleMenu }">
<ds-button :primary="!!unreadNotificationsCount" icon="bell" @click.prevent="toggleMenu"> <base-button @click="toggleMenu" ghost circle>
{{ unreadNotificationsCount }} <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
</ds-button> </base-button>
</template> </template>
<template slot="popover"> <template slot="popover">
<div class="notifications-menu-popover"> <div class="notifications-menu-popover">
@ -22,17 +22,20 @@
</template> </template>
<script> <script>
import Dropdown from '~/components/Dropdown'
import { NOTIFICATIONS_POLL_INTERVAL } from '~/constants/notifications' import { NOTIFICATIONS_POLL_INTERVAL } from '~/constants/notifications'
import { notificationQuery, markAsReadMutation } from '~/graphql/User' import { notificationQuery, markAsReadMutation } from '~/graphql/User'
import NotificationList from '../NotificationList/NotificationList'
import unionBy from 'lodash/unionBy' import unionBy from 'lodash/unionBy'
import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
import Dropdown from '~/components/Dropdown'
import NotificationList from '../NotificationList/NotificationList'
export default { export default {
name: 'NotificationMenu', name: 'NotificationMenu',
components: { components: {
NotificationList, CounterIcon,
Dropdown, Dropdown,
NotificationList,
}, },
data() { data() {
return { return {
@ -90,8 +93,13 @@ export default {
<style lang="scss"> <style lang="scss">
.notifications-menu { .notifications-menu {
flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
.base-button {
overflow: visible;
}
} }
.notifications-menu-popover { .notifications-menu-popover {

4
webapp/components/Password/Change.vue
View File

@ -24,9 +24,9 @@
/> />
<password-strength :password="formData.password" /> <password-strength :password="formData.password" />
<ds-space margin-top="base"> <ds-space margin-top="base">
<ds-button :loading="loading" :disabled="errors" primary> <base-button :loading="loading" :disabled="errors" filled type="submit">
{{ $t('settings.security.change-password.button') }} {{ $t('settings.security.change-password.button') }}
</ds-button> </base-button>
</ds-space> </ds-space>
</template> </template>
</ds-form> </ds-form>

4
webapp/components/PasswordReset/ChangePassword.vue
View File

@ -24,9 +24,9 @@
/> />
<password-strength :password="formData.password" /> <password-strength :password="formData.password" />
<ds-space margin-top="base" margin-bottom="xxx-small"> <ds-space margin-top="base" margin-bottom="xxx-small">
<ds-button :loading="$apollo.loading" :disabled="errors" primary> <base-button :loading="$apollo.loading" :disabled="errors" filled type="submit">
{{ $t('settings.security.change-password.button') }} {{ $t('settings.security.change-password.button') }}
</ds-button> </base-button>
</ds-space> </ds-space>
</template> </template>
</ds-form> </ds-form>

7
webapp/components/PasswordReset/Request.vue
View File

@ -20,17 +20,16 @@
<ds-space margin-botton="large"> <ds-space margin-botton="large">
<ds-text align="left">{{ $t('components.password-reset.request.form.description') }}</ds-text> <ds-text align="left">{{ $t('components.password-reset.request.form.description') }}</ds-text>
</ds-space> </ds-space>
<ds-button <base-button
:disabled="disabled" :disabled="disabled"
:loading="$apollo.loading" :loading="$apollo.loading"
primary filled
fullwidth
name="submit" name="submit"
type="submit" type="submit"
icon="envelope" icon="envelope"
> >
{{ $t('components.password-reset.request.form.submit') }} {{ $t('components.password-reset.request.form.submit') }}
</ds-button> </base-button>
<slot></slot> <slot></slot>
</ds-form> </ds-form>
<div v-else> <div v-else>

2
webapp/components/PostCard/PostCard.vue
View File

@ -176,6 +176,8 @@ export default {
} }
.content-menu { .content-menu {
position: relative;
z-index: 99;
display: inline-block; display: inline-block;
margin-left: $space-xx-small; margin-left: $space-xx-small;
margin-right: -$space-x-small; margin-right: -$space-x-small;

6
webapp/components/Registration/CreateUserAccount.vue
View File

@ -102,10 +102,11 @@
v-html="$t('components.registration.signup.form.no-political')" v-html="$t('components.registration.signup.form.no-political')"
></label> ></label>
</ds-text> </ds-text>
<ds-button <base-button
style="float: right;" style="float: right;"
icon="check" icon="check"
type="submit" type="submit"
filled
:loading="$apollo.loading" :loading="$apollo.loading"
:disabled=" :disabled="
errors || errors ||
@ -115,10 +116,9 @@
!noCommercial || !noCommercial ||
!noPolitical !noPolitical
" "
primary
> >
{{ $t('actions.save') }} {{ $t('actions.save') }}
</ds-button> </base-button>
</template> </template>
</ds-form> </ds-form>
</div> </div>

7
webapp/components/Registration/Signup.vue
View File

@ -30,17 +30,16 @@
name="email" name="email"
icon="envelope" icon="envelope"
/> />
<ds-button <base-button
:disabled="disabled" :disabled="disabled"
:loading="$apollo.loading" :loading="$apollo.loading"
primary filled
fullwidth
name="submit" name="submit"
type="submit" type="submit"
icon="envelope" icon="envelope"
> >
{{ $t('components.registration.signup.form.submit') }} {{ $t('components.registration.signup.form.submit') }}
</ds-button> </base-button>
<slot></slot> <slot></slot>
</ds-form> </ds-form>
</ds-space> </ds-space>

7
webapp/components/ReleaseModal/ReleaseModal.vue
View File

@ -4,11 +4,10 @@
<p v-html="message" /> <p v-html="message" />
<template slot="footer"> <template slot="footer">
<ds-button class="cancel" @click="cancel">{{ $t('release.cancel') }}</ds-button> <base-button class="cancel" @click="cancel">{{ $t('release.cancel') }}</base-button>
<base-button danger filled class="confirm" icon="exclamation-circle" @click="confirm">
<ds-button danger class="confirm" icon="exclamation-circle" @click="confirm">
{{ $t('release.submit') }} {{ $t('release.submit') }}
</ds-button> </base-button>
</template> </template>
</ds-modal> </ds-modal>
</template> </template>

7
webapp/components/ShoutButton.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<ds-space margin="xx-small" class="text-align-center"> <ds-space margin="xx-small" class="text-align-center">
<ds-button <base-button
:loading="loading" :loading="loading"
:disabled="disabled" :disabled="disabled"
:ghost="!shouted" :filled="shouted"
:primary="shouted"
size="x-large"
icon="bullhorn" icon="bullhorn"
circle
@click="toggle" @click="toggle"
/> />
<ds-space margin-bottom="xx-small" /> <ds-space margin-bottom="xx-small" />

14
webapp/components/TeaserImage/TeaserImage.vue
View File

@ -9,10 +9,18 @@
@vdropzone-thumbnail="transformImage" @vdropzone-thumbnail="transformImage"
> >
<div class="crop-overlay" ref="cropperOverlay" v-show="showCropper"> <div class="crop-overlay" ref="cropperOverlay" v-show="showCropper">
<ds-button @click.stop.prevent="cropImage" class="crop-confirm" primary> <base-button @click="cropImage" class="crop-confirm" filled>
{{ $t('contribution.teaserImage.cropperConfirm') }} {{ $t('contribution.teaserImage.cropperConfirm') }}
</ds-button> </base-button>
<ds-button @click="cancelCrop" class="crop-cancel" icon="close"></ds-button> <base-button
class="crop-cancel"
icon="close"
size="small"
circle
danger
filled
@click="cancelCrop"
/>
</div> </div>
<div <div
:class="{ :class="{

45
webapp/components/_new/generic/BaseButton/BaseButton.story.js
View File

@ -40,27 +40,6 @@ storiesOf('Generic/BaseButton', module)
`, `,
})) }))
.add('small', () => ({
components: { BaseButton },
template: `
<div>
<base-button size="small">Small</base-button>
<base-button size="small" circle>S</base-button>
</div>
`
}))
.add('primary', () => ({
components: { BaseButton },
template: `
<div>
<base-button primary>Primary</base-button>
<base-button primary disabled>Disabled</base-button>
<base-button primary loading>Loading</base-button>
</div>
`,
}))
.add('danger', () => ({ .add('danger', () => ({
components: { BaseButton }, components: { BaseButton },
template: ` template: `
@ -72,6 +51,28 @@ storiesOf('Generic/BaseButton', module)
`, `,
})) }))
.add('filled', () => ({
components: { BaseButton },
template: `
<div>
<base-button filled>Filled</base-button>
<base-button filled danger>Filled Danger</base-button>
<base-button filled disabled>Disabled</base-button>
<base-button filled loading>Loading</base-button>
</div>
`,
}))
.add('small', () => ({
components: { BaseButton },
template: `
<div>
<base-button size="small">Small</base-button>
<base-button size="small" circle>S</base-button>
</div>
`,
}))
.add('ghost', () => ({ .add('ghost', () => ({
// TODO: add documentation --> ghost button should only be used for very special occasions // TODO: add documentation --> ghost button should only be used for very special occasions
// e.g. for the ContentMenu + for the EditorMenuBarButtons // e.g. for the ContentMenu + for the EditorMenuBarButtons
@ -80,5 +81,5 @@ storiesOf('Generic/BaseButton', module)
<div> <div>
<base-button size="small" icon="ellipsis-v" circle ghost /> <base-button size="small" icon="ellipsis-v" circle ghost />
</div> </div>
` `,
})) }))

156
webapp/components/_new/generic/BaseButton/BaseButton.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<button <button
:type="type"
:class="buttonClass" :class="buttonClass"
:disabled="loading" :disabled="loading"
@click.capture="(event) => $emit('click', event)" :type="type"
@click.capture="event => $emit('click', event)"
> >
<loading-spinner v-if="loading" />
<base-icon v-if="icon" :name="icon" /> <base-icon v-if="icon" :name="icon" />
<loading-spinner v-if="loading" />
<slot /> <slot />
</button> </button>
</template> </template>
@ -23,20 +23,20 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
icon: { danger: {
type: String, type: Boolean,
default: false,
},
filled: {
type: Boolean,
default: false,
}, },
ghost: { ghost: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
primary: { icon: {
type: Boolean, type: String,
default: false,
},
danger: {
type: Boolean,
default: false,
}, },
loading: { loading: {
type: Boolean, type: Boolean,
@ -46,7 +46,7 @@ export default {
type: String, type: String,
default: 'regular', default: 'regular',
validator(value) { validator(value) {
return value.match(/(small|regular|large)/) return value.match(/(small|regular)/)
}, },
}, },
type: { type: {
@ -63,116 +63,50 @@ export default {
if (this.$slots.default == null) buttonClass += ' --icon-only' if (this.$slots.default == null) buttonClass += ' --icon-only'
if (this.circle) buttonClass += ' --circle' if (this.circle) buttonClass += ' --circle'
if (this.ghost) buttonClass += ' --ghost' if (this.danger) buttonClass += ' --danger'
if (this.loading) buttonClass += ' --loading' if (this.loading) buttonClass += ' --loading'
if (this.primary) buttonClass += ' --primary'
else if (this.danger) buttonClass += ' --danger'
if (this.size === 'small') buttonClass += ' --small' 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 return buttonClass
} },
} },
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/_new/styles/mixins/buttonStates.scss';
.base-button { .base-button {
@include buttonStates;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 36px; height: $size-button-base;
padding: 0 12px; padding: 0 $space-x-small;
vertical-align: bottom; vertical-align: bottom;
color: $color-primary; border: $border-size-base solid;
background-color: transparent; border-radius: $border-radius-x-large;
border: 1px solid $color-primary;
border-radius: 6px;
overflow: hidden; overflow: hidden;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
cursor: pointer; cursor: pointer;
transition: background-color .1s;
&:focus {
outline: 1px dashed $color-primary;
}
&:hover {
color: $color-neutral-100;
background-color: $color-primary;
}
&:active {
color: $color-neutral-100;
border-color: $color-primary-dark;
background-color: $color-primary-dark;
}
&:disabled {
color: $color-neutral-60;
border-color: $color-neutral-60;
background-color: transparent;
cursor: default;
}
&.--primary {
color: $color-neutral-100;
background-color: $color-primary;
&:hover {
background-color: $color-primary-light;
border-color: $color-primary-light;
}
&:active {
background-color: $color-primary-dark;
border-color: $color-primary-dark;
}
&:disabled {
background-color: $color-neutral-60;
border-color: $color-neutral-60;
}
}
&.--danger { &.--danger {
color: $color-neutral-100; @include buttonStates($color-scheme: danger);
background-color: $color-danger;
border-color: $color-danger;
&:hover {
background-color: $color-danger-light;
border-color: $color-danger-light;
}
&:active {
background-color: $color-danger-dark;
border-color: $color-danger-dark;
}
&:disabled {
background-color: $color-neutral-60;
border-color: $color-neutral-60;
}
} }
&.--small { &.--filled {
height: 26px; @include buttonStates($filled: true);
font-size: $font-size-small;
&.--circle {
width: 26px;
}
} }
&.--large { &.--danger.--filled {
@include buttonStates($color-scheme: danger, $filled: true);
} }
&.--circle { &.--circle {
width: 36px; width: $size-button-base;
border-radius: 50%; border-radius: 50%;
} }
@ -180,23 +114,31 @@ export default {
border: none; border: none;
} }
&.--small {
height: $size-button-small;
font-size: $font-size-small;
&.--circle {
width: $size-button-small;
}
}
&:not(.--icon-only) > .base-icon { &:not(.--icon-only) > .base-icon {
margin-right: 6px; margin-right: $space-xx-small;
}
&:disabled.--loading {
color: $color-neutral-80;
} }
> .loading-spinner { > .loading-spinner {
position: absolute; position: absolute;
height: 26px; height: $size-button-small;
color: $color-neutral-60; color: $color-neutral-60;
} }
&.--loading { &.--filled > .loading-spinner {
color: $color-neutral-80; color: $color-neutral-100;
&.--primary > .loading-spinner,
&.--danger > .loading-spinner {
color: $color-neutral-100;
}
} }
} }
</style> </style>

28
webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js
View File

@ -5,33 +5,41 @@ import BaseIcon from '../BaseIcon/BaseIcon'
const localVue = global.localVue const localVue = global.localVue
describe('CounterIcon.vue', () => { describe('CounterIcon.vue', () => {
let propsData, wrapper, tag let propsData, wrapper, count
const Wrapper = () => { const Wrapper = () => {
return mount(CounterIcon, { propsData, localVue }) return mount(CounterIcon, { propsData, localVue })
} }
describe('given a valid icon name and count', () => { describe('given a valid icon name and count below 100', () => {
beforeEach(() => { beforeEach(() => {
propsData = { icon: 'comments', count: 1 } propsData = { icon: 'comments', count: 42 }
wrapper = Wrapper() 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) expect(wrapper.find(BaseIcon).exists()).toBe(true)
}) })
it('renders the count', () => { 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', () => { it('renders the icon', () => {
expect(tag.classes()).toContain('ds-tag-round') expect(wrapper.find(BaseIcon).exists()).toBe(true)
}) })
it('uses a primary button', () => { it('renders the capped count with a plus', () => {
expect(tag.classes()).toContain('ds-tag-primary') expect(count.text()).toEqual('99+')
}) })
}) })
}) })

18
webapp/components/_new/generic/CounterIcon/CounterIcon.story.js
View File

@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/vue'
import helpers from '~/storybook/helpers' import helpers from '~/storybook/helpers'
import CounterIcon from './CounterIcon.vue' import CounterIcon from './CounterIcon.vue'
storiesOf('CounterIcon', module) storiesOf('Generic/CounterIcon', module)
.addDecorator(helpers.layout) .addDecorator(helpers.layout)
.add('default', () => ({ .add('default', () => ({
@ -15,6 +15,20 @@ storiesOf('CounterIcon', module)
.add('high count', () => ({ .add('high count', () => ({
components: { CounterIcon }, components: { CounterIcon },
template: ` template: `
<counter-icon icon="bell" :count="150" /> <counter-icon icon="comments" :count="150" />
`,
}))
.add('danger', () => ({
components: { CounterIcon },
template: `
<counter-icon icon="bell" :count="42" danger />
`,
}))
.add('count is 0', () => ({
components: { CounterIcon },
template: `
<counter-icon icon="bell" :count="0" />
`, `,
})) }))

34
webapp/components/_new/generic/CounterIcon/CounterIcon.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<span class="counter-icon"> <span class="counter-icon">
<base-icon :name="icon" /> <base-icon :name="icon" />
<span class="count">{{ cappedCount }}</span> <span :class="counterClass">{{ cappedCount }}</span>
</span> </span>
</template> </template>
@ -10,12 +10,20 @@ export default {
props: { props: {
icon: { type: String, required: true }, icon: { type: String, required: true },
count: { type: Number, required: true }, count: { type: Number, required: true },
danger: { type: Boolean, default: false },
}, },
computed: { computed: {
cappedCount() { cappedCount() {
return this.count <= 99 ? this.count : '99+' return this.count <= 99 ? this.count : '99+'
} },
} counterClass() {
let counterClass = 'count'
if (this.danger) counterClass += ' --danger'
if (this.count === 0) counterClass += ' --inactive'
return counterClass
},
},
} }
</script> </script>
@ -25,23 +33,31 @@ export default {
> .count { > .count {
position: absolute; position: absolute;
top: -4px; top: -$space-xx-small;
right: 0; right: 0;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 16px; height: $size-icon-base;
min-width: 16px; min-width: $size-icon-base;
padding: 3px; padding: 3px; // magic number to center count
border-radius: 50%; border-radius: 50%;
transform: translateX(50%); transform: translateX(50%);
color:$color-neutral-100; color: $color-neutral-100;
background-color: $color-primary; background-color: $color-primary;
font-size: 10px; font-size: 10px; // magic number to center count
line-height: 1; line-height: 1;
text-align: center; text-align: center;
&.--danger {
background-color: $color-danger;
}
&.--inactive {
background-color: $color-neutral-60;
}
} }
} }
</style> </style>

14
webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue
View File

@ -1,14 +1,6 @@
<template> <template>
<svg <svg viewBox="0 0 50 50" class="loading-spinner">
viewBox="0 0 50 50" <circle cx="25" cy="25" r="20" class="circle" />
class="loading-spinner"
>
<circle
cx="25"
cy="25"
r="20"
class="circle"
/>
</svg> </svg>
</template> </template>
@ -20,7 +12,7 @@ export default {
<style lang="scss"> <style lang="scss">
.loading-spinner { .loading-spinner {
height: 36px; height: $size-button-base;
overflow: hidden; overflow: hidden;
stroke: currentColor; stroke: currentColor;
animation: rotate 16s linear infinite; animation: rotate 16s linear infinite;

2
webapp/components/features/ReportRow/ReportRow.spec.js
View File

@ -40,7 +40,7 @@ describe('ReportRow', () => {
beforeEach(() => { beforeEach(() => {
propsData = { ...propsData, report: reports[1] } propsData = { ...propsData, report: reports[1] }
wrapper = Wrapper() wrapper = Wrapper()
confirmButton = wrapper.find('.ds-button-danger') confirmButton = wrapper.find('.base-button.--danger')
}) })
it('renders a confirm button', () => { it('renders a confirm button', () => {

9
webapp/components/features/ReportRow/ReportRow.vue
View File

@ -11,9 +11,9 @@
<span class="user-count"> <span class="user-count">
{{ $t('moderation.reports.numberOfUsers', { count: report.filed.length }) }} {{ $t('moderation.reports.numberOfUsers', { count: report.filed.length }) }}
</span> </span>
<ds-button size="small" @click="showFiledReports = !showFiledReports"> <base-button size="small" @click="showFiledReports = !showFiledReports">
{{ $t('moderation.reports.moreDetails') }} {{ $t('moderation.reports.moreDetails') }}
</ds-button> </base-button>
</td> </td>
<!-- Content Column --> <!-- Content Column -->
@ -61,16 +61,17 @@
<span v-if="report.closed" class="title"> <span v-if="report.closed" class="title">
{{ $t('moderation.reports.decided') }} {{ $t('moderation.reports.decided') }}
</span> </span>
<ds-button <base-button
v-else v-else
danger danger
filled
data-test="confirm" data-test="confirm"
size="small" size="small"
:icon="statusIconName" :icon="statusIconName"
@click="$emit('confirm-report')" @click="$emit('confirm-report')"
> >
{{ $t('moderation.reports.decideButton') }} {{ $t('moderation.reports.decideButton') }}
</ds-button> </base-button>
</td> </td>
</tr> </tr>

5
webapp/nuxt.config.js
View File

@ -94,10 +94,7 @@ export default {
/* /*
** Global CSS ** Global CSS
*/ */
css: [ css: ['~assets/_new/styles/resets.scss', '~assets/styles/main.scss'],
'~assets/_new/styles/resets.scss',
'~assets/styles/main.scss',
],
/* /*
** Global processed styles ** Global processed styles

4
webapp/pages/admin/donations.vue
View File

@ -8,9 +8,9 @@
placeholder="1200" placeholder="1200"
icon="money" icon="money"
/> />
<ds-button primary type="submit" :disabled="!formData.goal || !formData.progress"> <base-button filled type="submit" :disabled="!formData.goal || !formData.progress">
{{ $t('actions.save') }} {{ $t('actions.save') }}
</ds-button> </base-button>
</ds-form> </ds-form>
</ds-card> </ds-card>
</template> </template>

15
webapp/pages/admin/users.vue
View File

@ -12,7 +12,7 @@
/> />
</ds-flex-item> </ds-flex-item>
<ds-flex-item width="30px"> <ds-flex-item width="30px">
<ds-button primary type="submit" icon="search" :loading="$apollo.loading" /> <base-button filled circle type="submit" icon="search" :loading="$apollo.loading" />
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
</ds-form> </ds-form>
@ -50,14 +50,7 @@
{{ scope.row.createdAt | dateTime }} {{ scope.row.createdAt | dateTime }}
</template> </template>
</ds-table> </ds-table>
<ds-flex direction="row-reverse"> <hc-paginate :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
<ds-flex-item width="50px">
<ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
</ds-flex-item>
<ds-flex-item width="50px">
<ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
</ds-flex-item>
</ds-flex>
</ds-card> </ds-card>
<ds-card v-else> <ds-card v-else>
<ds-placeholder>{{ $t('admin.users.empty') }}</ds-placeholder> <ds-placeholder>{{ $t('admin.users.empty') }}</ds-placeholder>
@ -69,8 +62,12 @@
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { isEmail } from 'validator' import { isEmail } from 'validator'
import normalizeEmail from '~/components/utils/NormalizeEmail' import normalizeEmail from '~/components/utils/NormalizeEmail'
import HcPaginate from '~/components/Paginate/Paginate'
export default { export default {
components: {
HcPaginate,
},
data() { data() {
const pageSize = 15 const pageSize = 15
return { return {

28
webapp/pages/index.vue
View File

@ -8,7 +8,7 @@
<!--<donation-info /> --> <!--<donation-info /> -->
<div> <div>
<a target="_blank" href="https://human-connection.org/spenden/"> <a target="_blank" href="https://human-connection.org/spenden/">
<ds-button primary>{{ $t('donations.donate-now') }}</ds-button> <base-button filled>{{ $t('donations.donate-now') }}</base-button>
</a> </a>
</div> </div>
<div class="sorting-dropdown"> <div class="sorting-dropdown">
@ -40,14 +40,19 @@
</template> </template>
</masonry-grid> </masonry-grid>
<client-only> <client-only>
<ds-button <nuxt-link :to="{ name: 'post-create' }">
v-tooltip="{ content: $t('contribution.newPost'), placement: 'left', delay: { show: 500 } }" <base-button
:path="{ name: 'post-create' }" v-tooltip="{
class="post-add-button" content: $t('contribution.newPost'),
icon="plus" placement: 'left',
size="x-large" delay: { show: 500 },
primary }"
/> class="post-add-button"
icon="plus"
filled
circle
/>
</nuxt-link>
</client-only> </client-only>
<client-only> <client-only>
<infinite-loading v-if="hasMore" @infinite="showMoreContributions" /> <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
@ -231,7 +236,10 @@ export default {
} }
} }
.post-add-button { .base-button.--circle.post-add-button {
height: 54px;
width: 54px;
font-size: 26px;
z-index: 100; z-index: 100;
position: fixed; position: fixed;
bottom: -5px; bottom: -5px;

36
webapp/pages/profile/_id/_slug.vue
View File

@ -73,9 +73,9 @@
@optimistic="optimisticFollow" @optimistic="optimisticFollow"
@update="updateFollow" @update="updateFollow"
/> />
<ds-button v-else fullwidth @click="unblock(user)"> <base-button v-else @click="unblock(user)" class="unblock-user-button">
{{ $t('settings.blocked-users.unblock') }} {{ $t('settings.blocked-users.unblock') }}
</ds-button> </base-button>
</template> </template>
</ds-space> </ds-space>
<template v-if="user.about"> <template v-if="user.about">
@ -215,19 +215,21 @@
<ds-grid-item :row-span="2" column-span="fullWidth"> <ds-grid-item :row-span="2" column-span="fullWidth">
<ds-space centered> <ds-space centered>
<ds-button <nuxt-link :to="{ name: 'post-create' }">
v-if="myProfile" <base-button
v-tooltip="{ v-if="myProfile"
content: $t('contribution.newPost'), v-tooltip="{
placement: 'left', content: $t('contribution.newPost'),
delay: { show: 500 }, placement: 'left',
}" delay: { show: 500 },
:path="{ name: 'post-create' }" }"
class="profile-post-add-button" :path="{ name: 'post-create' }"
icon="plus" class="profile-post-add-button"
size="large" icon="plus"
primary circle
/> filled
/>
</nuxt-link>
</ds-space> </ds-space>
</ds-grid-item> </ds-grid-item>
@ -546,4 +548,8 @@ export default {
.profile-post-add-button { .profile-post-add-button {
box-shadow: $box-shadow-x-large; box-shadow: $box-shadow-x-large;
} }
.unblock-user-button {
display: block;
width: 100%;
}
</style> </style>

2
webapp/pages/settings/blocked-users.vue
View File

@ -58,7 +58,7 @@
</template> </template>
<template slot="unblock" slot-scope="scope"> <template slot="unblock" slot-scope="scope">
<ds-button size="small" @click="unblock(scope)"><ds-icon name="user-plus" /></ds-button> <base-button circle size="small" @click="unblock(scope)" icon="user-plus" />
</template> </template>
</ds-table> </ds-table>
</ds-card> </ds-card>

8
webapp/pages/settings/embeds.vue
View File

@ -16,12 +16,12 @@
<ds-text> <ds-text>
{{ $t('settings.embeds.status.change.question') }} {{ $t('settings.embeds.status.change.question') }}
</ds-text> </ds-text>
<ds-button @click="submit" :primary="!disabled" :disabled="!disabled"> <base-button @click="submit" :filled="!disabled" :disabled="!disabled">
{{ $t('settings.embeds.status.change.deny') }} {{ $t('settings.embeds.status.change.deny') }}
</ds-button> </base-button>
<ds-button @click="submit" :primary="disabled" :disabled="disabled"> <base-button @click="submit" :filled="disabled" :disabled="disabled">
{{ $t('settings.embeds.status.change.allow') }} {{ $t('settings.embeds.status.change.allow') }}
</ds-button> </base-button>
<p>{{ $t('settings.embeds.info-description') }}</p> <p>{{ $t('settings.embeds.info-description') }}</p>
<ul> <ul>

4
webapp/pages/settings/index.vue
View File

@ -31,9 +31,9 @@
:placeholder="$t('settings.data.labelBio')" :placeholder="$t('settings.data.labelBio')"
/> />
<template slot="footer"> <template slot="footer">
<ds-button icon="check" :disabled="errors" type="submit" :loading="loadingData" primary> <base-button icon="check" :disabled="errors" type="submit" :loading="loadingData" filled>
{{ $t('actions.save') }} {{ $t('actions.save') }}
</ds-button> </base-button>
</template> </template>
</ds-card> </ds-card>
</template> </template>

4
webapp/pages/settings/my-email-address/enter-nonce.vue
View File

@ -17,9 +17,9 @@
/> />
<template slot="footer"> <template slot="footer">
<ds-button class="submit-button" icon="check" :disabled="errors" type="submit" primary> <base-button class="submit-button" icon="check" :disabled="errors" type="submit" filled>
{{ $t('actions.save') }} {{ $t('actions.save') }}
</ds-button> </base-button>
</template> </template>
</ds-card> </ds-card>
</template> </template>

4
webapp/pages/settings/my-email-address/index.vue
View File

@ -19,9 +19,9 @@
<ds-space class="backendErrors" v-if="backendErrors"> <ds-space class="backendErrors" v-if="backendErrors">
<ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text> <ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text>
</ds-space> </ds-space>
<ds-button icon="check" :disabled="errors" type="submit" primary> <base-button icon="check" :disabled="errors" type="submit" filled>
{{ $t('actions.save') }} {{ $t('actions.save') }}
</ds-button> </base-button>
</template> </template>
</ds-card> </ds-card>
</template> </template>

8
webapp/pages/settings/my-social-media.spec.js
View File

@ -119,11 +119,11 @@ describe('my-social-media.vue', () => {
}) })
it('displays the edit button', () => { 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', () => { 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', () => { describe('editing social media link', () => {
beforeEach(() => { beforeEach(() => {
const editButton = wrapper.find('a[name="edit"]') const editButton = wrapper.find('.base-button[data-test="edit-button"]')
editButton.trigger('click') editButton.trigger('click')
input = wrapper.find('input#editSocialMedia') input = wrapper.find('input#editSocialMedia')
}) })
@ -169,7 +169,7 @@ describe('my-social-media.vue', () => {
describe('deleting social media link', () => { describe('deleting social media link', () => {
beforeEach(() => { beforeEach(() => {
const deleteButton = wrapper.find('a[name="delete"]') const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
deleteButton.trigger('click') deleteButton.trigger('click')
}) })

45
webapp/pages/settings/my-social-media.vue
View File

@ -24,22 +24,22 @@
{{ link.url }} {{ link.url }}
</a> </a>
<span class="divider">|</span> <span class="divider">|</span>
<a name="edit" @click="handleEditSocialMedia(link)"> <base-button
<base-icon icon="edit"
:aria-label="$t('actions.edit')" circle
class="icon-button" ghost
name="edit" @click="handleEditSocialMedia(link)"
:title="$t('actions.edit')" :title="$t('actions.edit')"
/> data-test="edit-button"
</a> />
<a name="delete" @click="handleDeleteSocialMedia(link)"> <base-button
<base-icon icon="trash"
:aria-label="$t('actions.delete')" circle
class="icon-button" ghost
name="trash" @click="handleDeleteSocialMedia(link)"
:title="$t('actions.delete')" :title="$t('actions.delete')"
/> data-test="delete-button"
</a> />
</template> </template>
</ds-list-item> </ds-list-item>
</ds-list> </ds-list>
@ -54,12 +54,12 @@
:placeholder="$t('settings.social-media.placeholder')" :placeholder="$t('settings.social-media.placeholder')"
/> />
<ds-space margin-top="base"> <ds-space margin-top="base">
<ds-button primary :disabled="disabled"> <base-button filled :disabled="disabled" type="submit">
{{ editingLink.id ? $t('actions.save') : $t('settings.social-media.submit') }} {{ editingLink.id ? $t('actions.save') : $t('settings.social-media.submit') }}
</ds-button> </base-button>
<ds-button v-if="editingLink.id" id="cancel" ghost @click="handleCancel()"> <base-button v-if="editingLink.id" id="cancel" danger @click="handleCancel()">
{{ $t('actions.cancel') }} {{ $t('actions.cancel') }}
</ds-button> </base-button>
</ds-space> </ds-space>
</ds-space> </ds-space>
</ds-card> </ds-card>
@ -226,5 +226,10 @@ export default {
.ds-list-item-prefix { .ds-list-item-prefix {
align-self: center; align-self: center;
} }
.ds-list-item-content {
display: flex;
align-items: center;
}
} }
</style> </style>

2
webapp/pages/settings/privacy.vue
View File

@ -4,7 +4,7 @@
<input id="allow-shouts" type="checkbox" v-model="shoutsAllowed" /> <input id="allow-shouts" type="checkbox" v-model="shoutsAllowed" />
<label for="allow-shouts">{{ $t('settings.privacy.make-shouts-public') }}</label> <label for="allow-shouts">{{ $t('settings.privacy.make-shouts-public') }}</label>
</ds-space> </ds-space>
<ds-button primary @click="submit" :disabled="disabled">{{ $t('actions.save') }}</ds-button> <base-button filled @click="submit" :disabled="disabled">{{ $t('actions.save') }}</base-button>
</ds-card> </ds-card>
</template> </template>

12
webapp/pages/terms-and-conditions-confirm.vue
View File

@ -2,11 +2,11 @@
<ds-container width="medium"> <ds-container width="medium">
<ds-card icon="balance-scale" :header="$t(`termsAndConditions.newTermsAndConditions`)" centered> <ds-card icon="balance-scale" :header="$t(`termsAndConditions.newTermsAndConditions`)" centered>
<p> <p>
<ds-button> <nuxt-link :to="{ name: 'terms-and-conditions' }" target="_blank">
<nuxt-link class="post-link" :to="{ name: 'terms-and-conditions' }" target="_blank"> <base-button>
{{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }} {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }}
</nuxt-link> </base-button>
</ds-button> </nuxt-link>
</p> </p>
<ds-text> <ds-text>
<input id="checkbox" type="checkbox" v-model="checked" :checked="checked" /> <input id="checkbox" type="checkbox" v-model="checked" :checked="checked" />
@ -17,7 +17,9 @@
</ds-text> </ds-text>
<template slot="footer"> <template slot="footer">
<ds-button primary @click="submit" :disabled="!checked">{{ $t(`actions.save`) }}</ds-button> <base-button filled @click="submit" :disabled="!checked">
{{ $t(`actions.save`) }}
</base-button>
</template> </template>
</ds-card> </ds-card>
</ds-container> </ds-container>

3
webapp/storybook/config.js
View File

@ -2,6 +2,7 @@ import { addParameters, configure } from '@storybook/vue'
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import { action } from '@storybook/addon-actions' 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' import '!style-loader!css-loader!sass-loader!../assets/_new/styles/resets.scss'
Vue.use(Vuex) Vue.use(Vuex)
@ -60,7 +61,7 @@ addParameters({
options: { options: {
storySort: (a, b) => storySort: (a, b) =>
a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }), a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
} },
}) })
configure(loadStories, module) configure(loadStories, module)