scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-06 03:46:39 +08:00
Code Issues Projects Releases Packages Wiki Activity

Update notifications modal with new component

Browse source
This commit is contained in:
Anton 2024-01-15 16:09:19 +01:00
parent 427f7a7b2e
commit d4b68407ef
4 changed files with 106 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
app/assets/stylesheets/navigation/notifications.scss
View file

@ -4,14 +4,6 @@
.sci--navigation--notificaitons-flyout-container {
position: relative;
.sci--navigation--notificaitons-flyout-backdrop {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.has-unseen {
&::after {
align-items: center;
@ -31,99 +23,94 @@
white-space: nowrap;
}
}
}
.sci--navigation--notificaitons-flyout {
background-color: $color-white;
border-radius: 0 0 $border-radius-default $border-radius-default;
box-shadow: $flyout-shadow;
display: flex;
flex-direction: column;
height: calc(100vh - var(--top-navigation-height) - 2em);
height: calc(100vh - 8rem);
padding: 1.5rem;
position: absolute;
right: 0;
top: calc(var(--top-navigation-height) - 1.5rem);
width: 400px;
.sci--navigation--notificaitons-flyout-title {
@include font-h2;
.sci--navigation--notificaitons-flyout-title {
@include font-h2;
align-items: center;
display: flex;
margin-bottom: .625rem;
.sn-icon {
@include font-button;
cursor: pointer;
margin-left: auto;
}
}
hr {
margin: .625rem 0;
}
.sci-navigation--notificaitons-flyout-subtitle {
@include font-main;
line-height: 2.25rem;
margin-bottom: .625rem;
}
.sci--navigation--notificaitons-flyout-notifications {
margin-left: -1.5rem;
overscroll-behavior: contain;
padding: 0 1.5rem;
position: relative;
width: calc(100% + 3rem);
.next-page-loader {
align-items: center;
display: flex;
margin-bottom: .625rem;
justify-content: center;
margin: 1rem 0;
}
}
.sn-icon {
@include font-button;
.sci-navigation--notificaitons-flyout-notification {
border-bottom: $border-tertiary;
padding: 1rem 0;
.sci-navigation--notificaitons-flyout-notification-icon {
align-items: center;
background-color: $brand-primary;
border-radius: 50%;
color: $color-white;
display: flex;
grid-row: 1 / 5;
height: 2rem;
justify-content: center;
margin-right: .75rem;
width: 2rem;
&.deliver {
background-color: $brand-warning;
}
&.system {
background-color: $brand-success;
}
}
.sci-navigation--notificaitons-flyout-notification-date {
@include font-small;
color: $color-silver-chalice;
}
.sci-navigation--notificaitons-flyout-notification-title {
margin: .25rem 0;
&:not([data-seen="true"]) {
font-weight: bold;
}
}
.sci-navigation--notificaitons-flyout-notification-message {
&[data-notification="system"] {
cursor: pointer;
margin-left: auto;
}
}
hr {
margin: .625rem 0;
}
.sci-navigation--notificaitons-flyout-subtitle {
@include font-main;
line-height: 2.25rem;
margin-bottom: .625rem;
}
.sci--navigation--notificaitons-flyout-notifications {
margin-left: -1.5rem;
padding: 0 1.5rem;
position: relative;
width: calc(100% + 3rem);
.next-page-loader {
align-items: center;
display: flex;
justify-content: center;
margin: 1rem 0;
}
}
.sci-navigation--notificaitons-flyout-notification {
border-bottom: $border-tertiary;
padding: 1rem 0;
.sci-navigation--notificaitons-flyout-notification-icon {
align-items: center;
background-color: $brand-primary;
border-radius: 50%;
color: $color-white;
display: flex;
grid-row: 1 / 5;
height: 2rem;
justify-content: center;
margin-right: .75rem;
width: 2rem;
&.deliver {
background-color: $brand-warning;
}
&.system {
background-color: $brand-success;
}
}
.sci-navigation--notificaitons-flyout-notification-date {
@include font-small;
color: $color-silver-chalice;
}
.sci-navigation--notificaitons-flyout-notification-title {
margin: .25rem 0;
&:not([data-seen="true"]) {
font-weight: bold;
}
}
.sci-navigation--notificaitons-flyout-notification-message {
&[data-notification="system"] {
cursor: pointer;
}
}
}
}

6
app/javascript/vue/navigation/notifications/notifications_flyout.vue
View file

@ -5,7 +5,7 @@
<i class="sn-icon sn-icon-close" @click="$emit('close')"></i>
</div>
<hr>
<perfect-scrollbar ref="scrollContainer" class="sci--navigation--notificaitons-flyout-notifications">
<perfect-scrollbar @wheel="preventPropagation" ref="scrollContainer" class="sci--navigation--notificaitons-flyout-notifications">
<div class="sci-navigation--notificaitons-flyout-subtitle" v-if="todayNotifications.length">
{{ i18n.t('nav.notifications.today') }}
</div>
@ -73,6 +73,10 @@ export default {
}
},
methods: {
preventPropagation(e) {
e.stopPropagation();
e.preventDefault();
},
loadNotifications() {
if (this.nextPageUrl == null || this.loadingPage) return;

47
app/javascript/vue/navigation/top_menu.vue
View file

@ -20,23 +20,28 @@
:position="'right'"
:btnIcon="'sn-icon sn-icon-settings'"
></MenuDropdown>
<div v-if="user" class="sci--navigation--notificaitons-flyout-container" >
<button class="btn btn-light icon-btn btn-black"
<GeneralDropdown
v-if="user"
ref="notificationDropdown"
position="right"
class="sci--navigation--notificaitons-flyout-container">
<template v-slot:field>
<button class="btn btn-light icon-btn btn-black"
:title="i18n.t('nav.notifications.title')"
:class="{ 'has-unseen': unseenNotificationsCount > 0 }"
:data-unseen="unseenNotificationsCount"
data-toggle="dropdown"
@click="notificationsOpened = !notificationsOpened">
<i class="sn-icon sn-icon-notifications"></i>
</button>
<div v-if="notificationsOpened" class="sci--navigation--notificaitons-flyout-backdrop" @click="notificationsOpened = false"></div>
<NotificationsFlyout
v-if="notificationsOpened"
:notificationsUrl="notificationsUrl"
:unseenNotificationsCount="unseenNotificationsCount"
@update:unseenNotificationsCount="checkUnseenNotifications()"
@close="notificationsOpened = false" />
</div>
data-toggle="dropdown">
<i class="sn-icon sn-icon-notifications"></i>
</button>
</template>
<template v-slot:flyout >
<NotificationsFlyout
:notificationsUrl="notificationsUrl"
:unseenNotificationsCount="unseenNotificationsCount"
@update:unseenNotificationsCount="checkUnseenNotifications()"
@close="$refs.notificationDropdown.$refs.field.click();"/>
</template>
</GeneralDropdown>
<div v-if="user" class="dropdown" :title="i18n.t('nav.user_profile')">
<div class="sci--navigation--top-menu-user btn btn-light icon-btn btn-black" data-toggle="dropdown">
<img class="avatar w-6 h-6" :src="user.avatar_url">
@ -63,6 +68,7 @@ import NotificationsFlyout from './notifications/notifications_flyout.vue';
import DropdownSelector from '../shared/legacy/dropdown_selector.vue';
import SelectDropdown from '../shared/select_dropdown.vue';
import MenuDropdown from '../shared/menu_dropdown.vue';
import GeneralDropdown from '../shared/general_dropdown.vue';
export default {
name: 'TopMenuContainer',
@ -70,7 +76,8 @@ export default {
DropdownSelector,
NotificationsFlyout,
SelectDropdown,
MenuDropdown
MenuDropdown,
GeneralDropdown
},
props: {
url: String,
@ -88,7 +95,6 @@ export default {
helpMenu: null,
settingsMenu: null,
userMenu: null,
notificationsOpened: false,
unseenNotificationsCount: 0
};
},
@ -119,15 +125,6 @@ export default {
);
}
},
watch: {
notificationsOpened(newVal) {
if (newVal === true) {
document.body.style.overflow = 'hidden';
} else if (newVal === false) {
document.body.style.overflow = 'scroll';
}
}
},
methods: {
fetchData() {
$.get(this.url, (result) => {

3
app/javascript/vue/shared/general_dropdown.vue
View file

@ -33,7 +33,8 @@ export default {
btnText: { type: String, required: false },
btnIcon: { type: String, required: false },
caret: { type: Boolean, default: false },
alwaysShow: { type: Boolean, default: false }
alwaysShow: { type: Boolean, default: false },
closeDropdown: { type: Boolean, default: false }
},
data() {
return {