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

replace even more ds-buttons with base-buttons (wip)

Browse Source
This commit is contained in:
Alina Beck 2019-12-19 11:39:39 +05:30
parent 85f628848b
commit ee11f4e366
14 changed files with 62 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,16 +50,15 @@
<ds-space margin-bottom="large">
<nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link>
</ds-space>
<ds-button
<base-button
:loading="pending"
primary
fullwidth
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 +112,11 @@ export default {
}
.login-card {
position: relative;
.base-button {
display: block;
width: 100%;
}
}
.login-locale-switch {
position: absolute;

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

@ -10,11 +10,11 @@
<p v-html="message" />
<template slot="footer">
<ds-button class="cancel" :icon="modalData.buttons.cancel.icon" @click="cancel">
<base-button class="cancel" :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 +22,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 class="confirm" icon="exclamation-circle" @click="confirm">
{{ $t('disable.submit') }}
</ds-button>
</base-button>
</template>
</ds-modal>
</template>

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

@ -29,11 +29,11 @@
</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
class="confirm"
icon="exclamation-circle"
@ -42,7 +42,7 @@
@click="confirm"
>
{{ $t('report.submit') }}
</ds-button>
</base-button>
</template>
</ds-modal>
</template>
@ -161,7 +161,7 @@ export default {
.ds-modal {
max-width: 600px !important;
}
.ds-radio-option:not(.ds-button) {
.ds-radio-option {
width: 100% !important;
}
.ds-radio-option-label {

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

@ -33,7 +33,7 @@ describe('NotificationMenu.vue', () => {
it('counter displays 0', () => {
wrapper = Wrapper()
expect(wrapper.find('ds-button-stub').text()).toEqual('0')
expect(wrapper.find('base-button-stub').text()).toEqual('0')
})
it('no dropdown is rendered', () => {
@ -67,12 +67,12 @@ describe('NotificationMenu.vue', () => {
it('counter displays 0', () => {
wrapper = Wrapper()
expect(wrapper.find('ds-button-stub').text()).toEqual('0')
expect(wrapper.find('base-button-stub').text()).toEqual('0')
})
it('button is not primary', () => {
wrapper = Wrapper()
expect(wrapper.find('ds-button-stub').props('primary')).toBe(false)
expect(wrapper.find('base-button-stub').props('primary')).toBe(false)
})
})
@ -130,12 +130,12 @@ describe('NotificationMenu.vue', () => {
it('displays the number of unread notifications', () => {
wrapper = Wrapper()
expect(wrapper.find('ds-button-stub').text()).toEqual('2')
expect(wrapper.find('base-button-stub').text()).toEqual('2')
})
it('renders primary button', () => {
wrapper = Wrapper()
expect(wrapper.find('ds-button-stub').props('primary')).toBe(true)
expect(wrapper.find('base-button-stub').props('primary')).toBe(true)
})
})
})

22
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,6 +93,7 @@ export default {
<style lang="scss">
.notifications-menu {
flex-shrink: 0;
display: flex;
align-items: center;
}

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" primary 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" primary type="submit">
{{ $t('settings.security.change-password.button') }}
</ds-button>
</base-button>
</ds-space>
</template>
</ds-form>

5
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
name="submit"
type="submit"
icon="envelope"
>
{{ $t('components.password-reset.request.form.submit') }}
</ds-button>
</base-button>
<slot></slot>
</ds-form>
<div v-else>

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

@ -102,7 +102,7 @@
v-html="$t('components.registration.signup.form.no-political')"
></label>
</ds-text>
<ds-button
<base-button
style="float: right;"
icon="check"
type="submit"
@ -118,7 +118,7 @@
primary
>
{{ $t('actions.save') }}
</ds-button>
</base-button>
</template>
</ds-form>
</div>

5
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
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 class="confirm" icon="exclamation-circle" @click="confirm">
{{ $t('release.submit') }}
</ds-button>
</base-button>
</template>
</ds-modal>
</template>

5
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"
icon="bullhorn"
circle
@click="toggle"
/>
<ds-space margin-bottom="xx-small" />

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

@ -9,10 +9,17 @@
@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" primary>
{{ $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
@click="cancelCrop"
/>
</div>
<div
:class="{