caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved offline status in the navigation bar

Browse Source
This commit is contained in:
benweet 2013-12-08 18:11:35 +00:00
parent 511ffafbf0
commit 8c29d27ecd
3 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/res/extensions/notifications.js
View File

@ -52,6 +52,13 @@ define([
jGrowl("<i class='icon-white " + iconClass + "'></i> " + _.escape(message).replace(/\n/g, '<br/>'), options); jGrowl("<i class='icon-white " + iconClass + "'></i> " + _.escape(message).replace(/\n/g, '<br/>'), options);
} }
var $offlineStatusElt;
var $extensionButtonsElt;
notifications.onReady = function() {
$offlineStatusElt = $('.navbar .offline-status');
$extensionButtonsElt = $('.navbar .extension-buttons');
};
notifications.onMessage = function(message) { notifications.onMessage = function(message) {
showMessage(message); showMessage(message);
}; };
@ -67,16 +74,13 @@ define([
}; };
notifications.onOfflineChanged = function(isOffline) { notifications.onOfflineChanged = function(isOffline) {
$offlineStatusElt.toggleClass('hide', !isOffline);
$extensionButtonsElt.toggleClass('hide', isOffline);
if(isOffline === true) { if(isOffline === true) {
showMessage("You are offline.", "icon-attention-circled msg-offline", { showMessage("You are offline.", "icon-attention-circled msg-offline");
sticky: true,
close: function() {
showMessage("You are back online!", "icon-signal");
}
});
} }
else { else {
$(".msg-offline").parents(".jGrowl-notification").trigger('jGrowl.beforeClose'); showMessage("You are back online!", "icon-signal");
} }
}; };

7
public/res/html/bodyIndex.html
View File

@ -45,6 +45,11 @@
</button></li> </button></li>
</ul> </ul>
<ul class="nav pull-right right-buttons"> <ul class="nav pull-right right-buttons">
<li class="offline-status hide">
<div class="text-danger">
<i class="icon-attention-circled"></i>offline
</div>
</li>
<li class="extension-buttons"></li> <li class="extension-buttons"></li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
@ -835,7 +840,7 @@
<p><b>Tip:</b> You can use a <p><b>Tip:</b> You can use a
<a href="http://jekyllrb.com/docs/frontmatter/" <a href="http://jekyllrb.com/docs/frontmatter/"
target="_blank">YAML front matter</a> to specify the title and the tags/labels of your publication.</p> target="_blank">YAML front matter</a> to specify the title and the tags/labels of your publication.</p>
<p><b>Interpreted variables:</b> <i>title, tags</i></p> <p><b>Interpreted variables:</b> <code>title</code>, <code>tags</code>, <code>published</code>, <code>date</code>.</p>
</blockquote> </blockquote>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">

15
public/res/styles/main.less
View File

@ -7,9 +7,9 @@
/* Colors */ /* Colors */
@logo-yellow: #FFD900; @logo-yellow: #FFD900;
@logo-blue: #3399FF; @logo-blue: #53a9ff;
@logo-orange: #FF610D; @logo-orange: #ff7606;
@logo-green: #8DC213; @logo-green: #a5cc0a;
@primary: #0080FF; @primary: #0080FF;
@secondary: @primary; @secondary: @primary;
@tertiary: @primary; @tertiary: @primary;
@ -43,7 +43,7 @@
// Panel buttons // Panel buttons
@panel-button-bg-color: #FFF; @panel-button-bg-color: #FFF;
@panel-button-border-fade: 75%; @panel-button-border-fade: 80%;
@panel-border-color: fade(@primary-desaturated, 10%); @panel-border-color: fade(@primary-desaturated, 10%);
@error-border: #FF6161; @error-border: #FF6161;
@ -469,6 +469,13 @@ a {
} }
} }
.offline-status > div {
display: inline-block;
vertical-align: middle;
height: @input-height-base;
padding: 9px 10px;
}
.left-buttons-dropdown, .right-buttons-dropdown { .left-buttons-dropdown, .right-buttons-dropdown {
> .nav { > .nav {
margin-left: 0; margin-left: 0;