julien/vaquant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update notyf !

Browse Source
This commit is contained in:
Julien Calixte
2019-08-26 02:32:12 +02:00
parent 1b33242bf0
commit c0d647e887
22 changed files with 69 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AccountEncrypted.vue
View File

@@ -38,7 +38,7 @@ export default class AccountEncrypted extends Vue {
if (retrieved) {
bus.$emit(SYNC, [this.id])
} else {
notif.alert(`
notif.error(`
Impossible de récupérer la clé,
veuillez réessayer plus tard...
`)

2
src/components/AccountShare.vue
View File

@@ -67,7 +67,7 @@ export default class Home extends Vue {
public async copy(): Promise<void> {
if (this.canClipboard) {
await navigator.clipboard.writeText(this.accountUrl)
notif.confirm('Adresse copiée')
notif.success('Adresse copiée')
}
}

8
src/components/TransactionCreate.vue
View File

@@ -333,14 +333,14 @@ export default class TransactionCreate extends Vue {
(!this.currency && !this.date && this.payFor.length === 0)
) {
if (this.amount === 0) {
notif.alert('Le montant doit être supérieur à 0.')
notif.error('Le montant doit être supérieur à 0.')
} else {
notif.alert('Tous les champs sont requis.')
notif.error('Tous les champs sont requis.')
}
return false
}
if (isNaN(this.amount) || this.amount > this.maxAmount) {
notif.alert(
notif.error(
`Veuillez saisir un montant numérique inférieur à ${money(
this.maxAmount,
this.currency
@@ -349,7 +349,7 @@ export default class TransactionCreate extends Vue {
return false
}
if (this.amount < 0) {
notif.alert('Le montant doit être supérieur à 0.')
notif.error('Le montant doit être supérieur à 0.')
return false
}
return true

1
src/main.ts
View File

@@ -1,4 +1,3 @@
import './utils/notyf'
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'

2
src/registerServiceWorker.ts
View File

@@ -24,7 +24,7 @@ if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
registrationOptions: {},
ready() {
notif.confirm('Application mise à jour !')
notif.success('Application mise à jour !')
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'

2
src/services/CouchService.ts
View File

@@ -99,7 +99,7 @@ class CouchService {
// tslint:disable-next-line:no-console
console.warn('on error', { error })
if (error.name !== 'unauthorized') {
notif.alert(`une erreur s'est produite`)
notif.error(`une erreur s'est produite`)
}
})
return true

8
src/store.ts
View File

@@ -102,7 +102,7 @@ export default new Vuex.Store<IState>({
if (response.ok) {
commit(SET_USER, { user, replicate })
} else {
notif.alert(response.message)
notif.error(response.message || '')
}
},
async login({ commit, state }, { userId, password }: IIdPassword) {
@@ -111,7 +111,7 @@ export default new Vuex.Store<IState>({
const user: IUser | null = await userService.getUser(state.user)
commit(SET_USER, { user })
} else {
notif.alert(response.message)
notif.error(response.message || '')
}
},
async logout({ commit }) {
@@ -119,7 +119,7 @@ export default new Vuex.Store<IState>({
if (response.ok) {
commit(SET_USER, { user: null })
} else {
notif.alert(response.message)
notif.error(response.message || '')
}
},
async remove({ commit, state }) {
@@ -128,7 +128,7 @@ export default new Vuex.Store<IState>({
if (response.ok) {
commit(SET_USER, { user: null })
} else {
notif.alert(response.message)
notif.error(response.message || '')
}
}
},

3
src/styles/_notyf-colors.scss
View File

@@ -1,3 +0,0 @@
// sass-lint:disable final-newline empty-line-between-blocks class-name-format no-url-protocols no-url-domains nesting-depth
$red-notyf: #ed3d3d;
$green-notyf: #3dc763;

1
src/styles/index.scss
View File

@@ -4,7 +4,6 @@
@import './variables';
@import '~bulma';
@import '~bulma-pricingtable';
@import './notyf';
@import './transitions';
:root {

196
src/styles/notyf.scss
View File

@@ -1,196 +0,0 @@
// sass-lint:disable final-newline empty-line-between-blocks class-name-format no-url-protocols no-url-domains nesting-depth
@import './notyf-colors';
@import './variables';
@keyframes fadeinup {
0% {
bottom: -15px;
margin-top: 0;
max-height: 0;
max-width: 0;
opacity: 0;
}
30% {
bottom: -3px;
opacity: .8;
}
100% {
bottom: 0;
margin-top: 12px;
max-height: 200px;
max-width: 420px;
opacity: 1;
}
}
@keyframes fadeoutdown {
0% {
bottom: 0;
opacity: 1;
}
30% {
bottom: -3px;
opacity: .2;
}
100% {
bottom: -15px;
opacity: 0;
}
}
@keyframes appear {
0% {
opacity: 0;
}
30% {
opacity: .5;
}
100% {
opacity: .6;
}
}
@keyframes disappear {
0% {
opacity: .6;
}
30% {
opacity: .1;
}
100% {
opacity: 0;
}
}
.notyf__icon--alert,
.notyf__icon--confirm {
background: white;
border-radius: 50%;
display: block;
height: 21px;
margin: 0 auto;
position: relative;
width: 21px;
}
.notyf__icon--alert {
&::after,
&::before {
background: $red-notyf;
border-radius: 3px;
content: '';
display: block;
left: 9px;
position: absolute;
width: 3px;
}
&::after {
height: 3px;
top: 14px;
}
&::before {
height: 8px;
top: 4px;
}
}
.notyf__icon--confirm {
&::after,
&::before {
background: $primary;
border-radius: 3px;
content: '';
display: block;
position: absolute;
width: 3px;
}
&::after {
height: 6px;
left: 6px;
top: 9px;
transform: rotate(-45deg);
}
&::before {
height: 11px;
left: 10px;
top: 5px;
transform: rotate(45deg);
}
}
.notyf__toast {
animation: fadeinup .3s forwards;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .45);
display: block;
overflow: hidden;
padding-right: 13px;
position: relative;
&.notyf--alert {
background: $red-notyf;
}
&.notyf--confirm {
background: $primary;
}
&.notyf--disappear {
animation: fadeoutdown .3s 1 forwards;
animation-delay: .25s;
.notyf__message {
animation: fadeoutdown .3s 1 forwards;
animation-delay: .1s;
opacity: 1;
}
.notyf__icon {
animation: disappear .3s 1 forwards;
opacity: 1;
}
}
}
.notyf__wrapper {
border-radius: 3px;
display: table;
padding-bottom: 20px;
padding-right: 15px;
padding-top: 20px;
width: 100%;
}
.notyf__icon {
animation: appear .5s forwards;
animation-delay: .25s;
display: table-cell;
font-size: 1.3em;
opacity: 0;
text-align: center;
vertical-align: middle;
width: 20%;
}
.notyf__message {
animation: fadeinup .3s forwards;
animation-delay: .15s;
display: table-cell;
opacity: 0;
position: relative;
vertical-align: middle;
width: 80%;
}
.notyf {
bottom: 20px;
color: white;
position: fixed;
right: 30px;
width: 20%;
z-index: 9999;
}
// Small screens
@media only screen and (max-width: 736px) {
.notyf__container {
display: block;
left: 0;
margin: 0 auto;
right: 0;
width: 90%;
}
}

4
src/utils/index.ts
View File

@@ -5,7 +5,7 @@ import colors from '@/data/colors'
export const confirmation = debounce(
(message: string) => {
notif.confirm(message)
notif.success(message)
},
3000,
{
@@ -15,7 +15,7 @@ export const confirmation = debounce(
export const alertMessage = debounce(
(message: string) => {
notif.alert(message)
notif.error(message)
},
3000,
{

15
src/utils/notif.ts
View File

@@ -1,3 +1,14 @@
declare const Notyf: any
import { Notyf } from 'notyf'
import 'notyf/notyf.min.css'
export default new Notyf()
// success: #3f4fa6, error: #c7435d
export default new Notyf({
types: [{
type: 'success',
backgroundColor: '#3f4fa6'
}, {
type: 'error',
backgroundColor: '#c7435d'
}]
})

125
src/utils/notyf.js
View File

@@ -1,125 +0,0 @@
(function () {
var $this = window
$this.Notyf = function () {
//List of notifications currently active
this.notifications = [];
var defaults = {
delay: 2000,
alertIcon: 'notyf__icon--alert',
confirmIcon: 'notyf__icon--confirm'
}
if (arguments[0] && typeof arguments[0] == "object") {
this.options = extendDefaults(defaults, arguments[0]);
} else {
this.options = defaults;
}
//Creates the main notifications container
var docFrag = document.createDocumentFragment();
var notyfContainer = document.createElement('div');
notyfContainer.className = 'notyf';
docFrag.appendChild(notyfContainer);
document.body.appendChild(docFrag);
this.container = notyfContainer;
//Stores which transitionEnd event this browser supports
this.animationEnd = animationEndSelect();
}
//---------- Public methods ---------------
/**
* Shows an alert card
*/
$this.Notyf.prototype.alert = function (alertMessage) {
var card = buildNotificationCard.call(this, alertMessage, this.options.alertIcon);
card.className += ' notyf--alert';
this.container.appendChild(card);
this.notifications.push(card);
}
/**
* Shows a confirm card
*/
$this.Notyf.prototype.confirm = function (alertMessage) {
var card = buildNotificationCard.call(this, alertMessage, this.options.confirmIcon);
card.className += ' notyf--confirm';
this.container.appendChild(card);
this.notifications.push(card);
}
//---------- Private methods ---------------
/**
* Populates the source object with the value from the same keys found in destination
*/
function extendDefaults(source, destination) {
for (const property in destination) {
//Avoid asigning inherited properties of destination, only asign to source the destination own properties
if (destination.hasOwnProperty(property)) {
source[property] = destination[property];
}
}
return source;
}
/**
* Creates a generic card with the param message. Returns a document fragment.
*/
function buildNotificationCard(messageText, iconClass) {
//Card wrapper
var notification = document.createElement('div');
notification.className = 'notyf__toast';
var wrapper = document.createElement('div');
wrapper.className = 'notyf__wrapper';
var iconContainer = document.createElement('div');
iconContainer.className = 'notyf__icon';
var icon = document.createElement('i');
icon.className = iconClass;
var message = document.createElement('div');
message.className = 'notyf__message';
message.innerHTML = messageText;
//Build the card
iconContainer.appendChild(icon);
wrapper.appendChild(iconContainer);
wrapper.appendChild(message);
notification.appendChild(wrapper);
var _this = this;
setTimeout(function () {
notification.className += " notyf--disappear";
notification.addEventListener(_this.animationEnd, function (event) {
event.target == notification && _this.container.removeChild(notification);
});
var index = _this.notifications.indexOf(notification);
_this.notifications.splice(index, 1);
}, _this.options.delay);
return notification;
}
// Determine which animationend event is supported
function animationEndSelect() {
var t;
var el = document.createElement('fake');
var transitions = {
'transition': 'animationend',
'OTransition': 'oAnimationEnd',
'MozTransition': 'animationend',
'WebkitTransition': 'webkitAnimationEnd'
}
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
})();

10
src/views/User.vue
View File

@@ -298,7 +298,7 @@ export default class User extends Vue {
return
}
} catch (error) {
notif.alert(
notif.error(
`Une erreur est survenue à la vérification d'un compte anonyme déjà créé.`
)
// tslint:disable-next-line
@@ -320,7 +320,7 @@ export default class User extends Vue {
replicate: this.replicate
})
} catch (error) {
notif.alert(
notif.error(
`Une erreur est survenue à la création du compte utilisateur.`
)
// tslint:disable-next-line
@@ -331,11 +331,11 @@ export default class User extends Vue {
public validateRegistration(): boolean {
if (!this.userId) {
notif.alert('Un pseudo est obligatoire.')
notif.error('Un pseudo est obligatoire.')
return false
}
if (this.password !== this.confirmPassword) {
notif.alert('Les mots de passe doivent être identique.')
notif.error('Les mots de passe doivent être identique.')
return false
}
return true
@@ -343,7 +343,7 @@ export default class User extends Vue {
public async purge(): Promise<void> {
await userService.purge()
notif.confirm(this.$t('user.purgeDone').toString())
notif.success(this.$t('user.purgeDone').toString())
}
public get slugEmail(): string {

4
src/views/accounts/AccountItem.vue
View File

@@ -168,7 +168,7 @@ export default class AccountItem extends BaseAccount {
if (this.id) {
this.account = await accountService.get(this.id)
if (!this.account) {
notif.alert(`le compte ${this.id} n'existe pas`)
notif.error(`le compte ${this.id} n'existe pas`)
this.$router.push({ name: 'home' })
return
}
@@ -223,7 +223,7 @@ export default class AccountItem extends BaseAccount {
)
}
await transactionService.multipleSave(transactions)
notif.confirm('Dépenses mises à jour.')
notif.success('Dépenses mises à jour.')
} catch (error) {
// tslint:disable-next-line
console.warn({ error })

10
src/views/accounts/AccountNew.vue
View File

@@ -132,25 +132,25 @@ export default class AccountNew extends Vue {
public validate(): boolean {
if (!this.name) {
notif.alert('Le nom doit être rempli.')
notif.error('Le nom doit être rempli.')
return false
}
const aliases: string[] = this.users.map((user: IUser) =>
user.alias ? user.alias.toLowerCase() : ''
)
if (aliases.length === 0) {
notif.alert('Au moins une personne doit être ajoutée au compte.')
notif.error('Au moins une personne doit être ajoutée au compte.')
return false
}
if (aliases.length !== new Set(aliases).size) {
notif.alert('Les alias doivent être uniques.')
notif.error('Les alias doivent être uniques.')
return false
}
if (this.user) {
const userIds: string[] = this.users.map((user: IUser) => user.userId)
if (userIds.length !== new Set(userIds).size) {
notif.alert('Les identifiants doivent être uniques.')
notif.error('Les identifiants doivent être uniques.')
return false
}
}
@@ -199,7 +199,7 @@ export default class AccountNew extends Vue {
} else {
// tslint:disable-next-line:no-console
console.warn(response)
notif.alert(`Une erreur s'est produite à la création d'un compte.`)
notif.error(`Une erreur s'est produite à la création d'un compte.`)
}
}

2
src/views/accounts/AccountPublic.vue
View File

@@ -34,7 +34,7 @@ export default class AccountPublic extends Vue {
this.account = await accountService.getRemote(this.id)
if (this.account && this.account.isPublic) {
this.addAccountId({ accountId: this.id })
notif.confirm(
notif.success(
`Récupération du compte public ${this.account.name} en cours...`
)

6
src/views/accounts/AccountSetting.vue
View File

@@ -93,13 +93,13 @@ export default class AccountSetting extends BaseAccount {
if (this.id) {
this.account = await accountService.get(this.id)
if (!this.account) {
notif.alert(`le compte ${this.id} n'existe pas`)
notif.error(`le compte ${this.id} n'existe pas`)
this.$router.push({ name: 'home' })
return
}
if (!this.isAdmin) {
this.$router.push({ name: 'home' })
notif.confirm('Vous ne pouvez pas paramétrer ce compte')
notif.success('Vous ne pouvez pas paramétrer ce compte')
}
}
}
@@ -137,7 +137,7 @@ export default class AccountSetting extends BaseAccount {
this.account
)
if (!ok) {
notif.alert(`Une erreur s'est produite.`)
notif.error(`Une erreur s'est produite.`)
}
}

4
src/views/transactions/TransactionItem.vue
View File

@@ -147,10 +147,10 @@ export default class TransactionItem extends Vue {
} else {
if (this.accountId) {
this.$router.push({ name: 'account', params: { id: this.accountId } })
notif.alert('Transaction supprimée.')
notif.error('Transaction supprimée.')
} else {
this.$router.push({ name: 'home' })
notif.alert('Compte inexistant.')
notif.error('Compte inexistant.')
}
}
} catch (error) {

2
src/views/transactions/TransactionUpdate.vue
View File

@@ -37,7 +37,7 @@ export default class TransactionUpdate extends Vue {
this.transaction = await transactionService.get(this.id)
if (!this.transaction) {
this.$router.push({ name: 'home' })
notif.alert('Compte inexistant.')
notif.error('Compte inexistant.')
return
}
this.account = await accountService.get(this.transaction.accountId)