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 pull request #2562 from Human-Connection/migrate-styleguide-buttons

Browse Source 
refactor(styleguide): migrate and redesign buttons
This commit is contained in:
Alina Beck 2020-01-15 14:17:06 +03:00 committed by GitHub
commit 56a3822377
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
69 changed files with 848 additions and 327 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', () => {
cy.contains('.ds-card', davidIrvingPostTitle)
.find('.content-menu-trigger')
.find('.content-menu .base-button')
.click({force: true})
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', () => {
cy.contains('.ds-card', davidIrvingPostTitle)
.get('.user-content-menu .content-menu-trigger')
.get('.user-content-menu .base-button')
.click({ force: true })
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', () => {
cy.get("a[name='delete']")
cy.get(".base-button[title='Delete']")
.click()
})
@ -129,7 +129,7 @@ Then('it gets deleted successfully', () => {
})
When('I start editing a social media link', () => {
cy.get("a[name='edit']")
cy.get(".base-button[title='Edit']")
.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", () => {
cy.get("span")
cy.get(".base-button")
.contains("Just for Fun")
.click();
});
@ -449,7 +449,7 @@ When("I ", name => {
When(
"I click on {string} from the content menu in the user info box",
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")
.contains(button)
.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;
}
}
}

11
webapp/assets/_new/styles/resets.scss Normal file
View File

@ -0,0 +1,11 @@
* {
box-sizing: border-box;
}
button {
padding: 0;
background: transparent;
border: none;
font-family: inherit;
font-size: inherit;
}

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

@ -4,6 +4,8 @@
*/
$color-primary: rgb(23, 181, 63);
$color-primary-light: rgb(96, 214, 98);
$color-primary-dark: rgb(25, 122, 49);
$color-primary-active: rgb(25, 194, 67);
$color-primary-inverse: rgb(241, 253, 244);
$color-secondary: rgb(0, 142, 230);
@ -13,6 +15,8 @@
$color-success-active: rgb(26, 203, 71);
$color-success-inverse: rgb(241, 253, 244);
$color-danger: rgb(219, 57, 36);
$color-danger-light: rgb(242, 97, 65);
$color-danger-dark: rgb(158, 43, 28);
$color-danger-active: rgb(224, 81, 62);
$color-danger-inverse: rgb(253, 243, 242);
$color-warning: rgb(230, 121, 25);
@ -246,6 +250,21 @@ $size-avatar-base: 44px;
$size-avatar-large: 64px;
$size-avatar-x-large: 114px;
/**
* @tokens Size Buttons
* @presenter Spacing
*/
$size-button-base: 36px;
$size-button-small: 26px;
/**
* @tokens Size Buttons
* @presenter Spacing
*/
$size-icon-base: 16px;
/**
* @tokens Shadow
* @presenter Shadow
@ -291,6 +310,7 @@ $z-index-page-submenu: 2500;
$z-index-page-header: 2000;
$z-index-page-sidebar: 1500;
$z-index-sticky: 100;
$z-index-post-card-link: 5;
/**
* @tokens Media Query

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

@ -3,16 +3,16 @@
<ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'xx-small' }">
<div v-for="category in categories" :key="category.id">
<ds-flex-item>
<ds-button
size="small"
<base-button
:data-test="categoryButtonsId(category.id)"
@click.prevent="toggleCategory(category.id)"
:primary="isActive(category.id)"
@click="toggleCategory(category.id)"
:filled="isActive(category.id)"
:disabled="isDisabled(category.id)"
:icon="category.icon"
size="small"
>
<base-icon :name="category.icon" />
{{ $t(`contribution.category.name.${category.slug}`) }}
</ds-button>
</base-button>
</ds-flex-item>
</div>
</ds-flex>

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

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

@ -1,28 +1,22 @@
<template>
<ds-form v-model="form" @submit="handleSubmit">
<ds-form v-model="form" @submit="handleSubmit" class="comment-form">
<template slot-scope="{ errors }">
<ds-card>
<!-- with client-only the content is not shown -->
<hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
<ds-space />
<ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
<ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />
<ds-flex-item :width="{ base: '40%', md: '20%', sm: '30%', xs: '30%' }">
<ds-button
:disabled="disabled && !update"
ghost
class="cancelBtn"
@click.prevent="handleCancel"
>
{{ $t('actions.cancel') }}
</ds-button>
</ds-flex-item>
<ds-flex-item :width="{ base: '40%', md: '20%', sm: '40%', xs: '40%' }">
<ds-button type="submit" :loading="loading" :disabled="disabled || errors" primary>
{{ $t('post.comment.submit') }}
</ds-button>
</ds-flex-item>
</ds-flex>
<div class="buttons">
<base-button
:disabled="disabled && !update"
@click="handleCancel"
data-test="cancel-button"
danger
>
{{ $t('actions.cancel') }}
</base-button>
<base-button type="submit" :loading="loading" :disabled="disabled || errors" filled>
{{ $t('post.comment.submit') }}
</base-button>
</div>
</ds-card>
</template>
</ds-form>
@ -146,3 +140,17 @@ export default {
},
}
</script>
<style lang="scss">
.comment-form {
.buttons {
display: flex;
justify-content: flex-end;
margin: $space-small 0;
> .base-button {
margin-left: $space-x-small;
}
}
}
</style>

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

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

21
webapp/components/CommentList/CommentList.vue
View File

@ -1,9 +1,8 @@
<template>
<div id="comments">
<h3 style="margin-top: -10px;">
<counter-icon icon="comments" :count="post.comments.length">
{{ $t('common.comment', null, 0) }}
</counter-icon>
<div id="comments" class="comment-list">
<h3 class="title">
<counter-icon icon="comments" :count="post.comments.length" />
{{ $t('common.comment', null, 0) }}
</h3>
<ds-space margin-bottom="large" />
<div v-if="post.comments && post.comments.length" id="comments" class="comments">
@ -50,3 +49,15 @@ export default {
},
}
</script>
<style lang="scss">
.comment-list {
> .title {
margin-top: 0;
> .counter-icon {
margin-right: $space-small;
}
}
}
</style>

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

@ -46,7 +46,7 @@ describe('ContentMenu.vue', () => {
store,
localVue,
})
menuToggle = wrapper.find('.content-menu-trigger')
menuToggle = wrapper.find('[data-test="content-menu-button"]')
menuToggle.trigger('click')
return wrapper
}

11
webapp/components/ContentMenu/ContentMenu.vue
View File

@ -2,9 +2,14 @@
<dropdown class="content-menu" :placement="placement" offset="5">
<template slot="default" slot-scope="{ toggleMenu }">
<slot name="button" :toggleMenu="toggleMenu">
<ds-button class="content-menu-trigger" size="small" ghost @click.prevent="toggleMenu">
<base-icon name="ellipsis-v" />
</ds-button>
<base-button
data-test="content-menu-button"
icon="ellipsis-v"
size="small"
circle
ghost
@click="toggleMenu"
/>
</slot>
</template>
<div slot="popover" slot-scope="{ toggleMenu }" class="content-menu-popover">

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

@ -258,7 +258,7 @@ describe('ContributionForm.vue', () => {
describe('cancel', () => {
it('calls $router.back() when cancel button clicked', () => {
cancelBtn = wrapper.find('.cancel-button')
cancelBtn = wrapper.find('[data-test="cancel-button"]')
cancelBtn.trigger('click')
expect(mocks.$router.back).toHaveBeenCalledTimes(1)
})

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

@ -100,17 +100,12 @@
<ds-space />
<div slot="footer" style="text-align: right">
<ds-button
class="cancel-button"
:disabled="loading"
ghost
@click.prevent="$router.back()"
>
<base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
{{ $t('actions.cancel') }}
</ds-button>
<ds-button type="submit" icon="check" :loading="loading" :disabled="errors" primary>
</base-button>
<base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>
{{ $t('actions.save') }}
</ds-button>
</base-button>
</div>
<ds-space margin-bottom="large" />
</ds-card>

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

@ -62,7 +62,13 @@
/>
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1 }">
<ds-button icon="trash" danger :disabled="!deleteEnabled" @click="handleSubmit">
<ds-button
icon="trash"
danger
filled
:disabled="!deleteEnabled"
@click="handleSubmit"
>
{{ $t('settings.deleteUserAccount.name') }}
</ds-button>
</ds-flex-item>

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

@ -32,7 +32,7 @@ describe('DonationInfo.vue', () => {
it('displays a call to action button', () => {
expect(
Wrapper()
.find('.ds-button')
.find('.base-button')
.text(),
).toBe('donations.donate-now')
})

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

@ -2,7 +2,7 @@
<div class="donation-info">
<progress-bar :title="title" :label="label" :goal="goal" :progress="progress" />
<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>
</div>
</template>

4
webapp/components/Editor/MenuBarButton.vue
View File

@ -1,7 +1,7 @@
<template>
<ds-button size="small" :ghost="!isActive" @click.prevent="onClick" :icon="icon">
<base-button size="small" circle :ghost="!isActive" @click="onClick" :icon="icon">
<span v-if="label">{{ label }}</span>
</ds-button>
</base-button>
</template>
<script>

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

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

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

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

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

@ -12,10 +12,11 @@
<ds-flex>
<ds-flex-item width="10%" />
<ds-flex-item width="100%">
<ds-button
<base-button
circle
icon="check"
@click.stop.prevent="resetCategories"
:primary="!filteredCategoryIds.length"
@click="resetCategories"
:filled="!filteredCategoryIds.length"
/>
<ds-flex-item>
<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 class="categories-menu">
<ds-flex-item width="100%" class="categories-menu-item">
<ds-button
<base-button
circle
:icon="category.icon"
:primary="filteredCategoryIds.includes(category.id)"
@click.stop.prevent="toggleCategory(category.id)"
:filled="filteredCategoryIds.includes(category.id)"
@click="toggleCategory(category.id)"
/>
<ds-space margin-bottom="small" />
</ds-flex-item>

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

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

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

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

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

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

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

@ -12,10 +12,11 @@
<ds-flex>
<ds-flex-item width="10%" />
<ds-flex-item width="100%">
<ds-button
<base-button
icon="check"
@click.stop.prevent="resetLanguages"
:primary="!filteredLanguageCodes.length"
circle
:filled="!filteredLanguageCodes.length"
@click="resetLanguages"
/>
<ds-flex-item>
<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 class="languages-menu">
<ds-flex-item width="100%" class="language-menu-item">
<ds-button
<base-button
class="language-buttons"
:primary="filteredLanguageCodes.includes(language.code)"
@click.stop.prevent="toggleLanguage(language.code)"
circle
:filled="filteredLanguageCodes.includes(language.code)"
@click="toggleLanguage(language.code)"
>
{{ language.code.toUpperCase() }}
</ds-button>
</base-button>
<ds-space margin-bottom="small" />
</ds-flex-item>
<ds-flex>

15
webapp/components/FollowButton.vue
View File

@ -1,17 +1,17 @@
<template>
<ds-button
<base-button
class="follow-button"
:disabled="disabled || !followId"
:loading="loading"
:icon="icon"
:primary="isFollowed && !hovered"
:filled="isFollowed && !hovered"
:danger="isFollowed && hovered"
fullwidth
@mouseenter.native="onHover"
@mouseleave.native="hovered = false"
@click.prevent="toggle"
>
{{ label }}
</ds-button>
</base-button>
</template>
<script>
@ -83,3 +83,10 @@ export default {
},
}
</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">
<nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link>
</ds-space>
<ds-button
:loading="pending"
primary
fullwidth
name="submit"
type="submit"
icon="sign-in"
>
<base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
{{ $t('login.login') }}
</ds-button>
</base-button>
<ds-space margin-top="large" margin-bottom="x-small">
{{ $t('login.no-account') }}
<nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
@ -113,6 +106,11 @@ export default {
}
.login-card {
position: relative;
.base-button {
display: block;
width: 100%;
}
}
.login-locale-switch {
position: absolute;

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

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

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

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

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

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

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'
const localVue = global.localVue
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', () => {
let wrapper
@ -22,9 +22,9 @@ describe('NotificationMenu.vue', () => {
}
})
describe('shallowMount', () => {
describe('mount', () => {
const Wrapper = () => {
return shallowMount(NotificationMenu, {
return mount(NotificationMenu, {
data,
mocks,
localVue,
@ -33,7 +33,7 @@ describe('NotificationMenu.vue', () => {
it('counter displays 0', () => {
wrapper = Wrapper()
expect(wrapper.find('ds-button-stub').text()).toEqual('0')
expect(wrapper.find('.count').text()).toEqual('0')
})
it('no dropdown is rendered', () => {
@ -67,12 +67,12 @@ describe('NotificationMenu.vue', () => {
it('counter displays 0', () => {
wrapper = Wrapper()
expect(wrapper.find('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()
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', () => {
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()
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>
<ds-button v-if="!notifications.length" class="notifications-menu" disabled icon="bell">
{{ unreadNotificationsCount }}
</ds-button>
<base-button v-if="!notifications.length" class="notifications-menu" disabled ghost circle>
<counter-icon icon="bell" :count="unreadNotificationsCount" danger />
</base-button>
<dropdown v-else class="notifications-menu" offset="8" :placement="placement">
<template slot="default" slot-scope="{ toggleMenu }">
<ds-button :primary="!!unreadNotificationsCount" icon="bell" @click.prevent="toggleMenu">
{{ unreadNotificationsCount }}
</ds-button>
<base-button @click="toggleMenu" ghost circle>
<counter-icon icon="bell" :count="unreadNotificationsCount" danger />
</base-button>
</template>
<template slot="popover">
<div class="notifications-menu-popover">
@ -22,17 +22,20 @@
</template>
<script>
import Dropdown from '~/components/Dropdown'
import { NOTIFICATIONS_POLL_INTERVAL } from '~/constants/notifications'
import { notificationQuery, markAsReadMutation } from '~/graphql/User'
import NotificationList from '../NotificationList/NotificationList'
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 {
name: 'NotificationMenu',
components: {
NotificationList,
CounterIcon,
Dropdown,
NotificationList,
},
data() {
return {
@ -90,8 +93,13 @@ export default {
<style lang="scss">
.notifications-menu {
flex-shrink: 0;
display: flex;
align-items: center;
.base-button {
overflow: visible;
}
}
.notifications-menu-popover {

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

@ -24,9 +24,9 @@
/>
<password-strength :password="formData.password" />
<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') }}
</ds-button>
</base-button>
</ds-space>
</template>
</ds-form>

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

@ -24,9 +24,9 @@
/>
<password-strength :password="formData.password" />
<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') }}
</ds-button>
</base-button>
</ds-space>
</template>
</ds-form>

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

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

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

@ -192,6 +192,8 @@ export default {
}
.content-menu {
position: relative;
z-index: $z-index-post-card-link;
display: inline-block;
margin-left: $space-xx-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')"
></label>
</ds-text>
<ds-button
<base-button
style="float: right;"
icon="check"
type="submit"
filled
:loading="$apollo.loading"
:disabled="
errors ||
@ -115,10 +116,9 @@
!noCommercial ||
!noPolitical
"
primary
>
{{ $t('actions.save') }}
</ds-button>
</base-button>
</template>
</ds-form>
</div>

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

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

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

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

7
webapp/components/ShoutButton.vue
View File

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

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

@ -9,10 +9,18 @@
@vdropzone-thumbnail="transformImage"
>
<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') }}
</ds-button>
<ds-button @click="cancelCrop" class="crop-cancel" icon="close"></ds-button>
</base-button>
<base-button
class="crop-cancel"
icon="close"
size="small"
circle
danger
filled
@click="cancelCrop"
/>
</div>
<div
:class="{

85
webapp/components/_new/generic/BaseButton/BaseButton.story.js Normal file
View File

@ -0,0 +1,85 @@
import { storiesOf } from '@storybook/vue'
import helpers from '~/storybook/helpers'
import BaseButton from './BaseButton.vue'
storiesOf('Generic/BaseButton', module)
.addDecorator(helpers.layout)
.add('default', () => ({
components: { BaseButton },
template: `
<div>
<base-button>Click me</base-button>
<base-button disabled>Disabled</base-button>
<base-button loading>Loading</base-button>
</div>
`,
}))
.add('icon', () => ({
components: { BaseButton },
template: `
<div>
<base-button icon="edit">With Text</base-button>
<base-button icon="bullhorn" />
<base-button icon="trash" disabled />
<base-button icon="trash" loading />
</div>
`,
}))
.add('circle', () => ({
components: { BaseButton },
template: `
<div>
<base-button circle icon="eye" />
<base-button circle>EN</base-button>
<base-button circle disabled icon="eye-slash" />
<base-button circle loading icon="eye-slash" />
</div>
`,
}))
.add('danger', () => ({
components: { BaseButton },
template: `
<div>
<base-button danger>Danger</base-button>
<base-button danger disabled>Disabled</base-button>
<base-button danger loading>Loading</base-button>
</div>
`,
}))
.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', () => ({
// TODO: add documentation --> ghost button should only be used for very special occasions
// e.g. for the ContentMenu + for the EditorMenuBarButtons
components: { BaseButton },
template: `
<div>
<base-button size="small" icon="ellipsis-v" circle ghost />
</div>
`,
}))

144
webapp/components/_new/generic/BaseButton/BaseButton.vue Normal file
View File

@ -0,0 +1,144 @@
<template>
<button
:class="buttonClass"
:disabled="loading"
:type="type"
@click.capture="event => $emit('click', event)"
>
<base-icon v-if="icon" :name="icon" />
<loading-spinner v-if="loading" />
<slot />
</button>
</template>
<script>
import LoadingSpinner from '~/components/_new/generic/LoadingSpinner/LoadingSpinner'
export default {
components: {
LoadingSpinner,
},
props: {
circle: {
type: Boolean,
default: false,
},
danger: {
type: Boolean,
default: false,
},
filled: {
type: Boolean,
default: false,
},
ghost: {
type: Boolean,
default: false,
},
icon: {
type: String,
},
loading: {
type: Boolean,
default: false,
},
size: {
type: String,
default: 'regular',
validator(value) {
return value.match(/(small|regular)/)
},
},
type: {
type: String,
default: 'button',
validator(value) {
return value.match(/(button|submit)/)
},
},
},
computed: {
buttonClass() {
let buttonClass = 'base-button'
if (this.$slots.default === undefined) buttonClass += ' --icon-only'
if (this.circle) buttonClass += ' --circle'
if (this.danger) buttonClass += ' --danger'
if (this.loading) buttonClass += ' --loading'
if (this.size === 'small') buttonClass += ' --small'
if (this.filled) buttonClass += ' --filled'
else if (this.ghost) buttonClass += ' --ghost'
return buttonClass
},
},
}
</script>
<style lang="scss">
@import '~/assets/_new/styles/mixins/buttonStates.scss';
.base-button {
@include buttonStates;
display: inline-flex;
align-items: center;
justify-content: center;
height: $size-button-base;
padding: 0 $space-x-small;
vertical-align: bottom;
border: $border-size-base solid;
border-radius: $border-radius-x-large;
overflow: hidden;
font-weight: $font-weight-bold;
cursor: pointer;
&.--danger {
@include buttonStates($color-scheme: danger);
}
&.--filled {
@include buttonStates($filled: true);
}
&.--danger.--filled {
@include buttonStates($color-scheme: danger, $filled: true);
}
&.--circle {
width: $size-button-base;
border-radius: 50%;
}
&.--ghost {
border: none;
}
&.--small {
height: $size-button-small;
font-size: $font-size-small;
&.--circle {
width: $size-button-small;
}
}
&:not(.--icon-only) > .base-icon {
margin-right: $space-xx-small;
}
&:disabled.--loading {
color: $color-neutral-80;
}
> .loading-spinner {
position: absolute;
height: $size-button-small;
color: $color-neutral-60;
}
&.--filled > .loading-spinner {
color: $color-neutral-100;
}
}
</style>

2
webapp/components/_new/generic/BaseIcon/BaseIcon.story.js
View File

@ -29,7 +29,7 @@ const iconStyles = `
font-size: 20px;
`
storiesOf('BaseIcon', module)
storiesOf('Generic/BaseIcon', module)
.addDecorator(helpers.layout)
.add('pure icon', () => ({

1
webapp/components/_new/generic/BaseIcon/BaseIcon.vue
View File

@ -37,6 +37,7 @@ export default {
<style lang="scss">
.base-icon {
display: inline-flex;
vertical-align: bottom;
> .svg {
height: 1.2em;

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

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

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

@ -2,18 +2,33 @@ import { storiesOf } from '@storybook/vue'
import helpers from '~/storybook/helpers'
import CounterIcon from './CounterIcon.vue'
storiesOf('CounterIcon', module)
storiesOf('Generic/CounterIcon', module)
.addDecorator(helpers.layout)
.add('flag icon with button in slot position', () => ({
.add('default', () => ({
components: { CounterIcon },
data() {
return { icon: 'flag', count: 3 }
},
template: `
<counter-icon icon="pizza" :count="count">
<ds-button ghost primary>
Report Details
</ds-button>
</counter-icon>
<counter-icon icon="flag" :count="3" />
`,
}))
.add('high count', () => ({
components: { CounterIcon },
template: `
<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" />
`,
}))

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

@ -1,29 +1,63 @@
<template>
<span>
<span class="counter-icon">
<base-icon :name="icon" />
<ds-tag
style="margin-top: -4px; margin-left: -12px; position: absolute;"
color="primary"
size="small"
round
>
{{ count }}
</ds-tag>
<span class="counter-icon-text">
<slot />
</span>
<span :class="counterClass">{{ cappedCount }}</span>
</span>
</template>
<script>
export default {
props: {
icon: { type: String, required: true },
count: { type: Number, required: true },
danger: { type: Boolean, default: false },
},
computed: {
cappedCount() {
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>
<style lang="scss" scoped>
.counter-icon-text {
margin-left: $space-xx-small;
<style lang="scss">
.counter-icon {
position: relative;
> .count {
position: absolute;
top: -$space-xx-small;
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
height: $size-icon-base;
min-width: $size-icon-base;
padding: 3px; // magic number to center count
border-radius: 50%;
transform: translateX(50%);
color: $color-neutral-100;
background-color: $color-primary;
font-size: 10px; // magic number to center count
line-height: 1;
text-align: center;
&.--danger {
background-color: $color-danger;
}
&.--inactive {
background-color: $color-neutral-60;
}
}
}
</style>

11
webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.story.js Normal file
View File

@ -0,0 +1,11 @@
import { storiesOf } from '@storybook/vue'
import helpers from '~/storybook/helpers'
import LoadingSpinner from './LoadingSpinner.vue'
storiesOf('Generic/LoadingSpinner', module)
.addDecorator(helpers.layout)
.add('default', () => ({
components: { LoadingSpinner },
template: '<loading-spinner />',
}))

48
webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<svg viewBox="0 0 50 50" class="loading-spinner">
<circle cx="25" cy="25" r="20" class="circle" />
</svg>
</template>
<script>
export default {
name: 'LoadingSpinner',
}
</script>
<style lang="scss">
.loading-spinner {
height: $size-button-base;
overflow: hidden;
stroke: currentColor;
animation: rotate 16s linear infinite;
> .circle {
fill: none;
stroke-width: 5;
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
@keyframes rotate {
100% {
transform: rotate(2160deg);
}
}
</style>

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

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

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

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

2
webapp/nuxt.config.js
View File

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

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

@ -8,9 +8,9 @@
placeholder="1200"
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') }}
</ds-button>
</base-button>
</ds-form>
</ds-card>
</template>

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

@ -12,7 +12,7 @@
/>
</ds-flex-item>
<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>
</ds-form>
@ -50,14 +50,7 @@
{{ scope.row.createdAt | dateTime }}
</template>
</ds-table>
<ds-flex direction="row-reverse">
<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>
<hc-paginate :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
</ds-card>
<ds-card v-else>
<ds-placeholder>{{ $t('admin.users.empty') }}</ds-placeholder>
@ -69,8 +62,12 @@
import gql from 'graphql-tag'
import { isEmail } from 'validator'
import normalizeEmail from '~/components/utils/NormalizeEmail'
import HcPaginate from '~/components/Paginate/Paginate'
export default {
components: {
HcPaginate,
},
data() {
const pageSize = 15
return {

28
webapp/pages/index.vue
View File

@ -8,7 +8,7 @@
<!--<donation-info /> -->
<div>
<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>
</div>
<div class="sorting-dropdown">
@ -43,14 +43,19 @@
</template>
</masonry-grid>
<client-only>
<ds-button
v-tooltip="{ content: $t('contribution.newPost'), placement: 'left', delay: { show: 500 } }"
:path="{ name: 'post-create' }"
class="post-add-button"
icon="plus"
size="x-large"
primary
/>
<nuxt-link :to="{ name: 'post-create' }">
<base-button
v-tooltip="{
content: $t('contribution.newPost'),
placement: 'left',
delay: { show: 500 },
}"
class="post-add-button"
icon="plus"
filled
circle
/>
</nuxt-link>
</client-only>
<client-only>
<infinite-loading v-if="hasMore" @infinite="showMoreContributions">
@ -238,7 +243,10 @@ export default {
}
}
.post-add-button {
.base-button.--circle.post-add-button {
height: 54px;
width: 54px;
font-size: 26px;
z-index: 100;
position: fixed;
bottom: -5px;

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

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

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

@ -58,7 +58,7 @@
</template>
<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>
</ds-table>
</ds-card>

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

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

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

@ -31,9 +31,9 @@
:placeholder="$t('settings.data.labelBio')"
/>
<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') }}
</ds-button>
</base-button>
</template>
</ds-card>
</template>

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

@ -17,9 +17,9 @@
/>
<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') }}
</ds-button>
</base-button>
</template>
</ds-card>
</template>

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

@ -19,9 +19,9 @@
<ds-space class="backendErrors" v-if="backendErrors">
<ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text>
</ds-space>
<ds-button icon="check" :disabled="errors" type="submit" primary>
<base-button icon="check" :disabled="errors" type="submit" filled>
{{ $t('actions.save') }}
</ds-button>
</base-button>
</template>
</ds-card>
</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', () => {
expect(wrapper.find('a[name="edit"]').exists()).toBe(true)
expect(wrapper.find('.base-button[data-test="edit-button"]').exists()).toBe(true)
})
it('displays the delete button', () => {
expect(wrapper.find('a[name="delete"]').exists()).toBe(true)
expect(wrapper.find('.base-button[data-test="delete-button"]').exists()).toBe(true)
})
})
@ -138,7 +138,7 @@ describe('my-social-media.vue', () => {
describe('editing social media link', () => {
beforeEach(() => {
const editButton = wrapper.find('a[name="edit"]')
const editButton = wrapper.find('.base-button[data-test="edit-button"]')
editButton.trigger('click')
input = wrapper.find('input#editSocialMedia')
})
@ -169,7 +169,7 @@ describe('my-social-media.vue', () => {
describe('deleting social media link', () => {
beforeEach(() => {
const deleteButton = wrapper.find('a[name="delete"]')
const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
deleteButton.trigger('click')
})

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

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

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

@ -4,7 +4,7 @@
<input id="allow-shouts" type="checkbox" v-model="shoutsAllowed" />
<label for="allow-shouts">{{ $t('settings.privacy.make-shouts-public') }}</label>
</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>
</template>

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

@ -2,11 +2,11 @@
<ds-container width="medium">
<ds-card icon="balance-scale" :header="$t(`termsAndConditions.newTermsAndConditions`)" centered>
<p>
<ds-button>
<nuxt-link class="post-link" :to="{ name: 'terms-and-conditions' }" target="_blank">
<nuxt-link :to="{ name: 'terms-and-conditions' }" target="_blank">
<base-button>
{{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }}
</nuxt-link>
</ds-button>
</base-button>
</nuxt-link>
</p>
<ds-text>
<input id="checkbox" type="checkbox" v-model="checked" :checked="checked" />
@ -17,7 +17,9 @@
</ds-text>
<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>
</ds-card>
</ds-container>

10
webapp/storybook/config.js
View File

@ -2,6 +2,8 @@ import { addParameters, configure } from '@storybook/vue'
import Vue from 'vue'
import Vuex from 'vuex'
import { action } from '@storybook/addon-actions'
// eslint-disable-next-line import/no-webpack-loader-syntax
import '!style-loader!css-loader!sass-loader!../assets/_new/styles/resets.scss'
Vue.use(Vuex)
Vue.component('nuxt-link', {
@ -54,4 +56,12 @@ function loadStories() {
req.keys().forEach(req)
}
// sort stories alphabetically
addParameters({
options: {
storySort: (a, b) =>
a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
},
})
configure(loadStories, module)