Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update mew-notification by using v-expansion-panels #254

Merged
merged 3 commits into from
Jun 2, 2022
+305 −249
Merged

fix: update mew-notification by using v-expansion-panels #254

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3069702
fix: update mew-notification by using v-expansion-panels
hsurf22 May 21, 2022
b7d15d3
fix indicator
hsurf22 May 25, 2022
676b13a
fix indicator shape
hsurf22 May 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix indicator 
remove unused codes
@hsurf22
hsurf22 committed May 25, 2022
commit b7d15d337bf81b393d7dbd037b420deea2c88606
165 changes: 1 addition & 164 deletions src/components/MewNotification/MewNotification.vue
View file
Original file line number Diff line number Diff line change
@@ -175,169 +175,6 @@
</v-expansion-panel>
</v-expansion-panels>
</div>

<!-- ===================================================================================== -->
<!-- Mew Notifications -->
<!-- ===================================================================================== -->
<div
v-show="false"
:class="[
expanded ? 'expanded' : '',
notification.status.value + '-type',
'notification-container',
'px-1',
'titlePrimary--text',
notification.read ? 'read' : ''
]"
@click="onToggle"
>
<v-container fluid class="px-0">
<v-row dense>
<v-col class="d-flex align-center" cols="8">
<!-- ===================================================================================== -->
<!-- Displays indicator if notification not read -->
<!-- ===================================================================================== -->
<div
v-if="
$vuetify.breakpoint.smAndUp &&
!notification.read &&
showIndicator
"
:class="[
getClasses(notification.status.value.toLowerCase()),
'indicator',
'ml-2',
'd-none',
'd-sm-flex'
]"
/>

<!-- ===================================================================================== -->
<!-- Displays blockie if it is not a swap notification -->
<!-- ===================================================================================== -->
<mew-blockie
v-if="!isSwap"
class="d-flex ml-2"
width="24px"
height="24px"
:address="notification.from.value"
/>

<!-- ===================================================================================== -->
<!-- Displays swap icons if it is a swap notification -->
<!-- ===================================================================================== -->
<div v-else class="d-flex flex-column currency-symbol">
<img
:src="
notification.fromObj.icon
? notification.fromObj.icon
: ethTokenPlaceholder
"
width="24px"
height="24px"
/>
<img
:src="notification.toObj.icon"
width="24px"
height="24px"
class="overlap"
/>
</div>

<!-- ===================================================================================== -->
<!-- Displays different notification info based on notification type -->
<!-- ===================================================================================== -->
<div :class="['detail-container pr-1', isSwap ? 'ml-5' : 'ml-2']">
<div v-if="!isSwap">
<div class="caption font-weight-medium d-flex">
{{ notification.from.string }}:
<mew-transform-hash
:hash="notification.from.value"
class="ml-1 detail-hash"
/>
</div>

<div class="caption font-weight-medium d-flex">
{{ notification.amount.string }}:
{{ notification.amount.value }}
</div>
</div>
<div v-else>
<div class="caption font-weight-medium d-flex">
{{ notification.to.string }}:
<mew-transform-hash
:hash="notification.toObj.to"
class="ml-1 detail-hash"
/>
</div>
<div class="caption mew-heading-2">
<div class="d-inline-block mr-1">
{{ notification.fromObj.amount }}
<span class="textPrimary--text">{{
notification.fromObj.currency
}}</span>
</div>
<v-icon class="subtitle-1 d-inline-block">
mdi-arrow-right
</v-icon>
<div class="d-inline-block mr-3">
{{ notification.toObj.amount }}
<span class="textPrimary--text">{{
notification.toObj.currency
}}</span>
</div>
</div>
</div>
</div>
</v-col>
<v-col cols="4" class="text-right pr-2">
<mew-badge
:badge-title="notification.type.string"
:badge-type="getBadgeType"
/>
<div class="caption mt-1 textPrimary--text font-weight-medium">
{{ notification.timestamp.value }}
</div>
</v-col>
</v-row>
</v-container>

<!-- ===================================================================================== -->
<!-- Displays more info if the notification is expanded -->
<!-- ===================================================================================== -->
<div v-if="expanded" class="expanded-container capitalize">
<v-container class="pa-2">
<v-row v-for="(detail, idx) in getDetails" :key="idx">
<v-col cols="6" class="textPrimary--text">
{{ detail.string }}:
</v-col>
<v-col
v-if="!isHash(detail.string)"
cols="6"
:class="[getClasses(detail.value) + '--text', 'text-right']"
>
{{ detail.value }}
</v-col>
<v-col v-if="isHash(detail.string)" cols="6" class="text-right">
<v-tooltip
eager
open-on-hover
content-class="tooltip-inner"
color="titlePrimary--text"
top
>
<template #activator="{ on }">
<a :href="detail.link" target="_blank" v-on="on">
<mew-transform-hash :hash="detail.value" />
</a>
</template>
<span>{{ detail.value }}</span>
</v-tooltip>
</v-col>
</v-row>
</v-container>
</div>
</div>
</div>
</template>

@@ -544,7 +381,7 @@ export default {

.notification-container {
.detail-container {
max-width: 100%;
max-width: 85%;

.detail-hash {
max-width: 60%;