Merge pull request #1692 from fabrixxm/desktopnotifications
Desktop notifications
This commit is contained in:
commit
6eebfb2e13
14 changed files with 237 additions and 174 deletions
|
@ -169,3 +169,11 @@ h6 {
|
|||
span.oembed, h4 {
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
/* fields help text */
|
||||
.field .field_help {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
/* notifications unseen */
|
||||
.notify-unseen { background-color: #cceeFF; }
|
|
@ -65,5 +65,5 @@
|
|||
</nav>
|
||||
|
||||
<ul id="nav-notifications-template" style="display:none;" rel="template">
|
||||
<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
|
||||
<li class="{4}"><a href="{0}" title="{5}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
|
||||
</ul>
|
||||
|
|
|
@ -133,12 +133,61 @@
|
|||
{{include file="field_intcheckbox.tpl" field=$notify8}}
|
||||
</div>
|
||||
|
||||
{{include file="field_checkbox.tpl" field=$email_textonly}}
|
||||
|
||||
|
||||
<!--
|
||||
<div class="field">
|
||||
<button onclick="javascript:Notification.requestPermission(function(perm){if(perm === 'granted')alert('{{$desktop_notifications_success_message}}');});return false;">{{$desktop_notifications}}</button>
|
||||
<span class="field_help">{{$desktop_notifications_note}}</span>
|
||||
</div>
|
||||
-->
|
||||
{{include file="field_yesno.tpl" field=$desktop_notifications}}
|
||||
<script>
|
||||
(function(){
|
||||
var elm = $("#id_{{$desktop_notifications.0}}_onoff");
|
||||
var ckbox = $("#id_{{$desktop_notifications.0}}");
|
||||
|
||||
if (getNotificationPermission() === 'granted') {
|
||||
ckbox.val(1);
|
||||
elm.find(".off").addClass("hidden");
|
||||
elm.find(".on").removeClass("hidden");
|
||||
}
|
||||
if (getNotificationPermission() === null) {
|
||||
elm.parent(".field.yesno").hide();
|
||||
}
|
||||
|
||||
$("#id_{{$desktop_notifications.0}}_onoff").on("click", function(e){
|
||||
|
||||
if (Notification.permission === 'granted') {
|
||||
localStorage.setItem('notification-permissions', ckbox.val()==1 ? 'granted' : 'denied');
|
||||
} else if (Notification.permission === 'denied') {
|
||||
localStorage.setItem('notification-permissions', 'denied');
|
||||
|
||||
ckbox.val(0);
|
||||
elm.find(".on").addClass("hidden");
|
||||
elm.find(".off").removeClass("hidden");
|
||||
|
||||
} else if (Notification.permission === 'default') {
|
||||
Notification.requestPermission(function(choice) {
|
||||
if (choice === 'granted') {
|
||||
localStorage.setItem('notification-permissions', ckbox.val()==1 ? 'granted' : 'denied');
|
||||
|
||||
{{include file="field_checkbox.tpl" field=$email_textonly}}
|
||||
} else {
|
||||
localStorage.setItem('notification-permissions', 'denied');
|
||||
ckbox.val(0);
|
||||
elm.find(".on").addClass("hidden");
|
||||
elm.find(".off").removeClass("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//console.log(getNotificationPermission());
|
||||
|
||||
|
||||
})
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
@ -67,5 +67,5 @@
|
|||
</nav>
|
||||
|
||||
<ul id="nav-notifications-template" style="display:none;" rel="template">
|
||||
<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
|
||||
<li class="{4}"><a href="{0}" title="{5}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
|
||||
</ul>
|
||||
|
|
|
@ -514,6 +514,7 @@ header {
|
|||
margin: 0px;
|
||||
padding: 0px;
|
||||
/*width: 100%; height: 12px; */
|
||||
|
||||
z-index: 110;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
@ -846,6 +847,7 @@ aside .posted-date-selector-months {
|
|||
overflow: auto;
|
||||
height: auto;
|
||||
/*.contact-block-div { width:60px; height: 60px; }*/
|
||||
|
||||
}
|
||||
#contact-block .contact-block-h4 {
|
||||
float: left;
|
||||
|
@ -927,6 +929,7 @@ aside .posted-date-selector-months {
|
|||
margin-bottom: 2em;
|
||||
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
|
||||
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
|
||||
|
||||
}
|
||||
.widget h3 {
|
||||
padding: 0px;
|
||||
|
@ -1208,6 +1211,7 @@ section {
|
|||
height: 32px;
|
||||
margin-left: 16px;
|
||||
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
|
||||
|
||||
}
|
||||
.comment-edit-preview .contact-photo-menu-button {
|
||||
top: 15px !important;
|
||||
|
@ -2077,6 +2081,7 @@ ul.tabs li .active {
|
|||
min-height: 22px;
|
||||
padding-top: 6px;
|
||||
/* a { display: block;}*/
|
||||
|
||||
}
|
||||
#photo-caption {
|
||||
display: block;
|
||||
|
|
|
@ -514,6 +514,7 @@ header {
|
|||
margin: 0px;
|
||||
padding: 0px;
|
||||
/*width: 100%; height: 12px; */
|
||||
|
||||
z-index: 110;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
@ -846,6 +847,7 @@ aside .posted-date-selector-months {
|
|||
overflow: auto;
|
||||
height: auto;
|
||||
/*.contact-block-div { width:60px; height: 60px; }*/
|
||||
|
||||
}
|
||||
#contact-block .contact-block-h4 {
|
||||
float: left;
|
||||
|
@ -927,6 +929,7 @@ aside .posted-date-selector-months {
|
|||
margin-bottom: 2em;
|
||||
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
|
||||
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
|
||||
|
||||
}
|
||||
.widget h3 {
|
||||
padding: 0px;
|
||||
|
@ -1208,6 +1211,7 @@ section {
|
|||
height: 32px;
|
||||
margin-left: 16px;
|
||||
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
|
||||
|
||||
}
|
||||
.comment-edit-preview .contact-photo-menu-button {
|
||||
top: 15px !important;
|
||||
|
@ -2077,6 +2081,7 @@ ul.tabs li .active {
|
|||
min-height: 22px;
|
||||
padding-top: 6px;
|
||||
/* a { display: block;}*/
|
||||
|
||||
}
|
||||
#photo-caption {
|
||||
display: block;
|
||||
|
|
|
@ -514,6 +514,7 @@ header {
|
|||
margin: 0px;
|
||||
padding: 0px;
|
||||
/*width: 100%; height: 12px; */
|
||||
|
||||
z-index: 110;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
@ -846,6 +847,7 @@ aside .posted-date-selector-months {
|
|||
overflow: auto;
|
||||
height: auto;
|
||||
/*.contact-block-div { width:60px; height: 60px; }*/
|
||||
|
||||
}
|
||||
#contact-block .contact-block-h4 {
|
||||
float: left;
|
||||
|
@ -927,6 +929,7 @@ aside .posted-date-selector-months {
|
|||
margin-bottom: 2em;
|
||||
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
|
||||
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
|
||||
|
||||
}
|
||||
.widget h3 {
|
||||
padding: 0px;
|
||||
|
@ -1208,6 +1211,7 @@ section {
|
|||
height: 32px;
|
||||
margin-left: 16px;
|
||||
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
|
||||
|
||||
}
|
||||
.comment-edit-preview .contact-photo-menu-button {
|
||||
top: 15px !important;
|
||||
|
@ -2077,6 +2081,7 @@ ul.tabs li .active {
|
|||
min-height: 22px;
|
||||
padding-top: 6px;
|
||||
/* a { display: block;}*/
|
||||
|
||||
}
|
||||
#photo-caption {
|
||||
display: block;
|
||||
|
|
|
@ -1197,7 +1197,6 @@ ul.tabs {
|
|||
display: block;
|
||||
margin-left: 200px;
|
||||
color: @FieldHelpColor;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -109,7 +109,7 @@
|
|||
|
||||
</nav>
|
||||
<ul id="nav-notifications-template" style="display:none;" rel="template">
|
||||
<li><a href="{0}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
|
||||
<li class="{4}"><a href="{0}" title="{5}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
|
||||
</ul>
|
||||
|
||||
<div style="position: fixed; top: 3px; left: 5px; z-index:9999">{{$langselector}}</div>
|
||||
|
|
|
@ -97,44 +97,8 @@
|
|||
|
||||
</nav>
|
||||
<ul id="nav-notifications-template" style="display:none;" rel="template">
|
||||
<li><a href="{0}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
|
||||
<li class="{4}"><a href="{0}" title="{5}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
|
||||
</ul>
|
||||
<!--
|
||||
<div class="icon-flag" style="position: fixed; bottom: 10px; left: 20px; z-index:9;">{{$langselector}}</div>
|
||||
-->
|
||||
{{*
|
||||
|
||||
{{if $nav.logout}}<a id="nav-logout-link" class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" >{{$nav.logout.1}}</a> {{/if}}
|
||||
{{if $nav.login}}<a id="nav-login-link" class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}" title="{{$nav.login.3}}" >{{$nav.login.1}}</a> {{/if}}
|
||||
|
||||
<span id="nav-link-wrapper" >
|
||||
|
||||
{{if $nav.register}}<a id="nav-register-link" class="nav-commlink {{$nav.register.2}}" href="{{$nav.register.0}}" title="{{$nav.register.3}}" >{{$nav.register.1}}</a>{{/if}}
|
||||
|
||||
<a id="nav-help-link" class="nav-link {{$nav.help.2}}" target="friendica-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" >{{$nav.help.1}}</a>
|
||||
|
||||
{{if $nav.apps}}<a id="nav-apps-link" class="nav-link {{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}" >{{$nav.apps.1}}</a>{{/if}}
|
||||
|
||||
<a id="nav-search-link" class="nav-link {{$nav.search.2}}" href="{{$nav.search.0}}" title="{{$nav.search.3}}" >{{$nav.search.1}}</a>
|
||||
<a id="nav-directory-link" class="nav-link {{$nav.directory.2}}" href="{{$nav.directory.0}}" title="{{$nav.directory.3}}" >{{$nav.directory.1}}</a>
|
||||
|
||||
{{if $nav.admin}}<a id="nav-admin-link" class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" >{{$nav.admin.1}}</a>{{/if}}
|
||||
|
||||
{{if $nav.notifications}}
|
||||
<a id="nav-notify-link" class="nav-commlink {{$nav.notifications.2}}" href="{{$nav.notifications.0}}" title="{{$nav.notifications.3}}" >{{$nav.notifications.1}}</a>
|
||||
<span id="notify-update" class="nav-ajax-left"></span>
|
||||
{{/if}}
|
||||
{{if $nav.messages}}
|
||||
<a id="nav-messages-link" class="nav-commlink {{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" >{{$nav.messages.1}}</a>
|
||||
<span id="mail-update" class="nav-ajax-left"></span>
|
||||
{{/if}}
|
||||
|
||||
{{if $nav.manage}}<a id="nav-manage-link" class="nav-commlink {{$nav.manage.2}}" href="{{$nav.manage.0}}" title="{{$nav.manage.3}}">{{$nav.manage.1}}</a>{{/if}}
|
||||
{{if $nav.settings}}<a id="nav-settings-link" class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}">{{$nav.settings.1}}</a>{{/if}}
|
||||
{{if $nav.profiles}}<a id="nav-profiles-link" class="nav-link {{$nav.profiles.2}}" href="{{$nav.profiles.0}}" title="{{$nav.profiles.3}}" >{{$nav.profiles.1}}</a>{{/if}}
|
||||
|
||||
|
||||
</span>
|
||||
<span id="nav-end"></span>
|
||||
<span id="banner">{{$banner}}</span>
|
||||
*}}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue