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

GD-457 [FEAT] Fliplet Viewer Notifications Inbox #52

Open
wants to merge 21 commits into
base: fliplet-viewer-inbox
Choose a base branch
from
Open

GD-457 [FEAT] Fliplet Viewer Notifications Inbox #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
fe6f52d
Updates to list Fliplet user notifications
hcarneiro Aug 24, 2023
73efc50
Tweaks
hcarneiro Aug 29, 2023
6fbab90
Fixes notifications query
hcarneiro Sep 5, 2023
8c217ee
Save interface settings
hcarneiro Sep 18, 2023
0296b1e
Clean up
hcarneiro Sep 22, 2023
006c2d2
Added comments
hcarneiro Sep 22, 2023
8f1fb0d
Resolved merge conflict by confirming deletion of the file
hcarneiro Sep 22, 2023
f4539d6
Style updates
hcarneiro Sep 25, 2023
607cd32
Name change
hcarneiro Sep 25, 2023
b875cdd
Handle notification tags and type
hcarneiro Sep 26, 2023
e64c77d
Fixed namespacing
hcarneiro Oct 10, 2023
e75b27f
Removed translations
hcarneiro Oct 10, 2023
3ba04e1
dependencies cleanup and name update
hcarneiro Oct 10, 2023
6101e12
css cleanup
hcarneiro Oct 10, 2023
031e027
Tweaks on handling actions
hcarneiro Oct 10, 2023
33dcf50
Remove badge update from inbox
hcarneiro Nov 30, 2023
957d96f
Handle payload and badge count
hcarneiro Nov 30, 2023
5ef8080
Add app assets
hcarneiro Nov 30, 2023
a4af668
renamed hook
hcarneiro Nov 30, 2023
44a62e2
Updates to handle push notifications and badges
hcarneiro Sep 27, 2024
1b26efb
Tweaks
hcarneiro Nov 19, 2024
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
6 changes: 3 additions & 3 deletions build.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="notifications-holder"
data-notification-inbox-1-0-0-id="{{id}}"
data-notification-inbox-1-0-0-uuid="{{uuid}}">
data-fv-notification-inbox-1-0-0-id="{{id}}"
data-fv-notification-inbox-1-0-0-uuid="{{uuid}}">
<div class="notifications-toolbar"><p>&nbsp;</p></div>
<div class="notifications">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
</div>
17 changes: 0 additions & 17 deletions css/app/build.css
View file
Open in desktop

This file was deleted.

114 changes: 76 additions & 38 deletions css/build.css
View file
Open in desktop
tonytlwu marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,66 +1,51 @@
[data-notification-inbox-1-0-0-id] {
[data-fv-notification-inbox-1-0-0-id] {
padding-top: 20px;
}

[data-notification-inbox-1-0-0-id] .notification {
[data-fv-notification-inbox-1-0-0-id] .notification {
position: relative;
width: 100%;
border-radius: 20px;
box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
margin-bottom: 20px;
padding: 20px 15px;
cursor: pointer;
}

[data-notification-inbox-1-0-0-id] .notification[data-notification-status="draft"] {
background-color: rgba(252, 248, 227, 0.58);
}

[data-notification-inbox-1-0-0-id] .notifications-toolbar {
[data-fv-notification-inbox-1-0-0-id] .notifications-toolbar {
margin-bottom: 20px;
}

[data-notification-inbox-1-0-0-id] .toolbar-read-all {
[data-fv-notification-inbox-1-0-0-id] .toolbar-read-all {
display: none;
}

[data-notification-inbox-1-0-0-id] .notifications-toolbar [data-settings],
[data-notification-inbox-1-0-0-id] .notifications-toolbar [data-refresh] {
[data-fv-notification-inbox-1-0-0-id] .notifications-toolbar [data-settings],
[data-fv-notification-inbox-1-0-0-id] .notifications-toolbar [data-refresh] {
opacity: 0.3;
cursor: pointer;
}

[data-notification-inbox-1-0-0-id] .notifications .notifications-new {
position: relative;
width: 100%;
border-radius: 20px;
box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
padding: 20px;
cursor: pointer;
text-align: center;
}

[data-notification-inbox-1-0-0-id] .no-notifications,
[data-notification-inbox-1-0-0-id] .notifications-error {
[data-fv-notification-inbox-1-0-0-id] .no-notifications,
[data-fv-notification-inbox-1-0-0-id] .notifications-error {
margin-bottom: 40px;
padding: 20px;
text-align: center;
opacity: 0.5;
}

[data-notification-inbox-1-0-0-id].notifications-has-unread .toolbar-read-all {
[data-fv-notification-inbox-1-0-0-id].notifications-has-unread .toolbar-read-all {
display: inline-block;
}

[data-notification-inbox-1-0-0-id] .notification .subtitle {
[data-fv-notification-inbox-1-0-0-id] .notification .subtitle {
text-transform: uppercase;
font-size: 12px;
opacity: 0.5;
}

[data-notification-inbox-1-0-0-id] .notification-linked .subtitle:after {
content: '\f0c1';
[data-fv-notification-inbox-1-0-0-id] .notification-linked .subtitle:after {
content: "\f0c1";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
Expand All @@ -78,45 +63,98 @@
margin-top: 4px;
}

[data-notification-inbox-1-0-0-id] .notification .title {
[data-fv-notification-inbox-1-0-0-id] .notification .tags {
margin-top: 4px;
}

[data-fv-notification-inbox-1-0-0-id] .notification .tags .tag {
font-size: 12px;
font-weight: 600;
border-radius: 4px;
padding: 4px 10px;
text-transform: uppercase;
color: #474974;
background-color: #eae9ec;
}

[data-fv-notification-inbox-1-0-0-id] .notification .tags .tag + .tag {
margin-left: 5px;
}

[data-fv-notification-inbox-1-0-0-id] .notification .tags .tag.warning {
color: #ed9119;
background-color: rgba(237, 145, 25, 0.2);
}

[data-fv-notification-inbox-1-0-0-id] .notification .tags .tag.danger {
color: #e03629;
background-color: rgba(224, 54, 41, 0.2);
}

[data-fv-notification-inbox-1-0-0-id] .notification .title {
position: relative;
margin: 10px 0 5px;
font-weight: 500;
line-height: 1.1;
color: #474974;
font-size: 16px;
font-weight: 700;
}

[data-notification-inbox-1-0-0-id] .notification .description {
[data-fv-notification-inbox-1-0-0-id] .notification .description {
font-size: 16px;
line-height: 1.5;
}

[data-notification-inbox-1-0-0-id] .notification .description p {
[data-fv-notification-inbox-1-0-0-id] .notification .description p {
margin-bottom: 0;
}

[data-notification-inbox-1-0-0-id] .notifications .fa-spinner,
[data-notification-inbox-1-0-0-id] .load-more .fa-spinner {
[data-fv-notification-inbox-1-0-0-id] .notifications .fa-spinner,
[data-fv-notification-inbox-1-0-0-id] .load-more .fa-spinner {
opacity: 0.2;
margin: 0 auto;
display: block;
}

[data-notification-inbox-1-0-0-id] .load-more .fa-spinner,
[data-notification-inbox-1-0-0-id] .load-more [data-load-more].loading {
[data-fv-notification-inbox-1-0-0-id] .load-more .fa-spinner,
[data-fv-notification-inbox-1-0-0-id] .load-more [data-load-more].loading {
display: none;
}

[data-notification-inbox-1-0-0-id] .load-more [data-load-more].loading + .fa-spinner {
[data-fv-notification-inbox-1-0-0-id] .load-more [data-load-more].loading + .fa-spinner {
display: block;
}

[data-fv-notification-inbox-1-0-0-id] .notification .notification-badge {
position: absolute;
top: -8px;
right: -8px;
z-index: 1;
min-width: 22px;
width: auto;
padding: 0 6px;
height: 22px;
line-height: 22px;
text-align: center;
font-size: 11px;
background-color: #fe5857;
color: #fff;
border-radius: 22px;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
}

[data-fv-notification-inbox-1-0-0-id] .notification.notification-read .notification-badge {
display: none;
}

@media screen and (min-width: 640px) {
[data-notification-inbox-1-0-0-id].notifications-holder {
[data-fv-notification-inbox-1-0-0-id].notifications-holder {
max-width: 700px;
margin: 0 auto;
}

[data-notification-inbox-1-0-0-id] .notification {
[data-fv-notification-inbox-1-0-0-id] .notification {
padding: 40px;
}
}
24 changes: 0 additions & 24 deletions interface.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,6 @@
</p>
</header>

<div class="form-group">
<div class="col-sm-4">
<label for="heading">Send notifications to your users</label>
</div>
<div class="col-sm-8">
<p><a href="#" class="btn btn-primary manage-notifications">Manage notifications</a></p>
</div>
</div>

<div class="form-group">
<div class="col-sm-4">
<label for="heading">App notification badge count</label>
Expand All @@ -45,21 +36,6 @@
</div>
</div>
</div>

<div class="form-group">
<div class="col-sm-4">
<label for="heading">Show sample notifications</label>
</div>
<div class="col-sm-8">
<div class="checkbox checkbox-icon">
<input type="checkbox" id="show_demo">
<label for="show_demo">
<span class="check"><i class="fa fa-check"></i></span> Enable
</label>
</div>
<p class="help-block">Sample notifications are only displayed in Fliplet Studio and Fliplet Viewer.</p>
</div>
</div>
</form>

</div>
6 changes: 3 additions & 3 deletions js/app/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var Notifications = new Fliplet.Registry.get('notification-inbox:1.0:app:core');
var Notifications = new Fliplet.Registry.get('fv-notification-inbox:1.0:app:core');

// Wait for sync hooks to register
Fliplet().then(function() {
Expand All @@ -7,7 +7,7 @@ Fliplet().then(function() {
Fliplet.Notifications.Scopes.get().then(function(scope) {
var data = { scope: scope };

Fliplet.Hooks.run('beforeNotificationsInit', data, options).then(
Fliplet.Hooks.run('beforeFvNotificationsInit', data, options).then(
function() {
var instance = new Notifications(data);

Expand All @@ -16,7 +16,7 @@ Fliplet().then(function() {
return instance;
});

Fliplet.Hooks.run('afterNotificationsInit', instance, counts);
Fliplet.Hooks.run('afterFvNotificationsInit', instance, counts);
});
}
);
Expand Down
Loading