Close button for site modified files notification
This commit is contained in:
shortcutme
parent
8ddfbf37c3
commit
eb837e3685
6 changed files with 133 additions and 16 deletions
|
|
@ -2,17 +2,46 @@ class Infopanel
|
|||
constructor: (@elem) ->
|
||||
@visible = false
|
||||
|
||||
show: ->
|
||||
show: (closed=false) =>
|
||||
@elem.addClass("visible")
|
||||
if closed
|
||||
@close()
|
||||
else
|
||||
@open()
|
||||
|
||||
hide: ->
|
||||
updateEvents: =>
|
||||
@elem.off("click")
|
||||
@elem.find(".close").off("click")
|
||||
|
||||
if @elem.hasClass("closed")
|
||||
@elem.on "click", =>
|
||||
@onOpened()
|
||||
@open()
|
||||
else
|
||||
@elem.find(".close").on "click", =>
|
||||
@onClosed()
|
||||
@close()
|
||||
|
||||
hide: =>
|
||||
@elem.removeClass("visible")
|
||||
|
||||
setTitle: (line1, line2) ->
|
||||
close: =>
|
||||
@elem.addClass("closed")
|
||||
@updateEvents()
|
||||
return false
|
||||
|
||||
open: =>
|
||||
@elem.removeClass("closed")
|
||||
@updateEvents()
|
||||
return false
|
||||
|
||||
setTitle: (line1, line2) =>
|
||||
@elem.find(".line-1").text(line1)
|
||||
@elem.find(".line-2").text(line2)
|
||||
|
||||
setAction: (title, func) ->
|
||||
setAction: (title, func) =>
|
||||
@elem.find(".button").text(title).off("click").on("click", func)
|
||||
|
||||
|
||||
|
||||
window.Infopanel = Infopanel
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ class Wrapper
|
|||
@loading = new Loading(@)
|
||||
@notifications = new Notifications($(".notifications"))
|
||||
@infopanel = new Infopanel($(".infopanel"))
|
||||
@infopanel.onClosed = =>
|
||||
@ws.cmd("siteSetSettingsValue", ["modified_files_notification", false])
|
||||
@infopanel.onOpened = =>
|
||||
@ws.cmd("siteSetSettingsValue", ["modified_files_notification", true])
|
||||
@fixbutton = new Fixbutton()
|
||||
|
||||
window.addEventListener("message", @onMessageInner, false)
|
||||
|
|
@ -570,7 +574,8 @@ class Wrapper
|
|||
@ws.cmd "siteListModifiedFiles", [], (res) =>
|
||||
num = res.modified_files.length
|
||||
if num > 0
|
||||
@infopanel.show()
|
||||
closed = @site_info.settings.modified_files_notification == false
|
||||
@infopanel.show(closed)
|
||||
else
|
||||
@infopanel.hide()
|
||||
|
||||
|
|
|
|||
|
|
@ -108,12 +108,22 @@ a { color: black }
|
|||
.infopanel {
|
||||
position: absolute; z-index: 999; padding: 15px 15px; bottom: 55px; right: 50px; border: 1px solid #eff3fe; display: none;
|
||||
font-family: 'Lucida Grande', 'Segoe UI', Helvetica, Arial, sans-serif; box-shadow: 0px 10px 55px rgba(58, 39, 176, 0.17); background-color: white;
|
||||
border-left: 4px solid #9a61f8; border-top-left-radius: 4px; border-bottom-left-radius: 4px; transition: all 0.7s ease-in-out;
|
||||
border-left: 4px solid #9a61f8; border-top-left-radius: 4px; border-bottom-left-radius: 4px; transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.infopanel.visible { display: block; }
|
||||
.infopanel.closed { box-shadow: none; transform: translateX(100%); right: 0px; cursor: pointer; }
|
||||
.infopanel .message { font-size: 13px; line-height: 15px; display: inline-block; vertical-align: -9px; }
|
||||
.infopanel .message .line { max-width: 200px; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
|
||||
.infopanel .message .line-1 { font-weight: bold; }
|
||||
.infopanel .close { font-size: 16px; text-decoration: none; color: #AAA; padding: 5px; margin-right: -12px; vertical-align: 1px; display: inline-block; }
|
||||
.infopanel .close:hover { color: black }
|
||||
.infopanel .close:active, .infopanel .close:focus { color: #AF3BFF }
|
||||
.infopanel.closed .closed-num { opacity: 1; margin-left: -36px; pointer-events: inherit; }
|
||||
.infopanel .closed-num {
|
||||
position: absolute; margin-top: 6px; background-color: #9a61f8; color: white; width: 10px; text-align: center;
|
||||
padding: 4px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; font-size: 10px;
|
||||
opacity: 0; margin-left: 0px; pointer-events: none; transition: all 0.6s;
|
||||
}
|
||||
.body-sidebar .infopanel { right: 425px; }
|
||||
|
||||
/* Loading screen */
|
||||
|
|
|
|||
|
|
@ -122,12 +122,22 @@ a { color: black }
|
|||
.infopanel {
|
||||
position: absolute; z-index: 999; padding: 15px 15px; bottom: 55px; right: 50px; border: 1px solid #eff3fe; display: none;
|
||||
font-family: 'Lucida Grande', 'Segoe UI', Helvetica, Arial, sans-serif; -webkit-box-shadow: 0px 10px 55px rgba(58, 39, 176, 0.17); -moz-box-shadow: 0px 10px 55px rgba(58, 39, 176, 0.17); -o-box-shadow: 0px 10px 55px rgba(58, 39, 176, 0.17); -ms-box-shadow: 0px 10px 55px rgba(58, 39, 176, 0.17); box-shadow: 0px 10px 55px rgba(58, 39, 176, 0.17) ; background-color: white;
|
||||
border-left: 4px solid #9a61f8; border-top-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out ;
|
||||
border-left: 4px solid #9a61f8; border-top-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) ;
|
||||
}
|
||||
.infopanel.visible { display: block; }
|
||||
.infopanel.closed { -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; box-shadow: none ; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%) ; right: 0px; cursor: pointer; }
|
||||
.infopanel .message { font-size: 13px; line-height: 15px; display: inline-block; vertical-align: -9px; }
|
||||
.infopanel .message .line { max-width: 200px; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
|
||||
.infopanel .message .line-1 { font-weight: bold; }
|
||||
.infopanel .close { font-size: 16px; text-decoration: none; color: #AAA; padding: 5px; margin-right: -12px; vertical-align: 1px; display: inline-block; }
|
||||
.infopanel .close:hover { color: black }
|
||||
.infopanel .close:active, .infopanel .close:focus { color: #AF3BFF }
|
||||
.infopanel.closed .closed-num { opacity: 1; margin-left: -36px; pointer-events: inherit; }
|
||||
.infopanel .closed-num {
|
||||
position: absolute; margin-top: 6px; background-color: #9a61f8; color: white; width: 10px; text-align: center;
|
||||
padding: 4px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; font-size: 10px;
|
||||
opacity: 0; margin-left: 0px; pointer-events: none; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; -ms-transition: all 0.6s; transition: all 0.6s ;
|
||||
}
|
||||
.body-sidebar .infopanel { right: 425px; }
|
||||
|
||||
/* Loading screen */
|
||||
|
|
|
|||
|
|
@ -544,22 +544,70 @@ $.extend( $.easing,
|
|||
|
||||
|
||||
(function() {
|
||||
var Infopanel;
|
||||
var Infopanel,
|
||||
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
|
||||
|
||||
Infopanel = (function() {
|
||||
function Infopanel(elem) {
|
||||
this.elem = elem;
|
||||
this.setAction = bind(this.setAction, this);
|
||||
this.setTitle = bind(this.setTitle, this);
|
||||
this.open = bind(this.open, this);
|
||||
this.close = bind(this.close, this);
|
||||
this.hide = bind(this.hide, this);
|
||||
this.updateEvents = bind(this.updateEvents, this);
|
||||
this.show = bind(this.show, this);
|
||||
this.visible = false;
|
||||
}
|
||||
|
||||
Infopanel.prototype.show = function() {
|
||||
return this.elem.addClass("visible");
|
||||
Infopanel.prototype.show = function(closed) {
|
||||
if (closed == null) {
|
||||
closed = false;
|
||||
}
|
||||
this.elem.addClass("visible");
|
||||
if (closed) {
|
||||
return this.close();
|
||||
} else {
|
||||
return this.open();
|
||||
}
|
||||
};
|
||||
|
||||
Infopanel.prototype.updateEvents = function() {
|
||||
this.elem.off("click");
|
||||
this.elem.find(".close").off("click");
|
||||
if (this.elem.hasClass("closed")) {
|
||||
return this.elem.on("click", (function(_this) {
|
||||
return function() {
|
||||
_this.onOpened();
|
||||
return _this.open();
|
||||
};
|
||||
})(this));
|
||||
} else {
|
||||
return this.elem.find(".close").on("click", (function(_this) {
|
||||
return function() {
|
||||
_this.onClosed();
|
||||
return _this.close();
|
||||
};
|
||||
})(this));
|
||||
}
|
||||
};
|
||||
|
||||
Infopanel.prototype.hide = function() {
|
||||
return this.elem.removeClass("visible");
|
||||
};
|
||||
|
||||
Infopanel.prototype.close = function() {
|
||||
this.elem.addClass("closed");
|
||||
this.updateEvents();
|
||||
return false;
|
||||
};
|
||||
|
||||
Infopanel.prototype.open = function() {
|
||||
this.elem.removeClass("closed");
|
||||
this.updateEvents();
|
||||
return false;
|
||||
};
|
||||
|
||||
Infopanel.prototype.setTitle = function(line1, line2) {
|
||||
this.elem.find(".line-1").text(line1);
|
||||
return this.elem.find(".line-2").text(line2);
|
||||
|
|
@ -578,6 +626,7 @@ $.extend( $.easing,
|
|||
}).call(this);
|
||||
|
||||
|
||||
|
||||
/* ---- src/Ui/media/Loading.coffee ---- */
|
||||
|
||||
|
||||
|
|
@ -889,6 +938,16 @@ $.extend( $.easing,
|
|||
this.loading = new Loading(this);
|
||||
this.notifications = new Notifications($(".notifications"));
|
||||
this.infopanel = new Infopanel($(".infopanel"));
|
||||
this.infopanel.onClosed = (function(_this) {
|
||||
return function() {
|
||||
return _this.ws.cmd("siteSetSettingsValue", ["modified_files_notification", false]);
|
||||
};
|
||||
})(this);
|
||||
this.infopanel.onOpened = (function(_this) {
|
||||
return function() {
|
||||
return _this.ws.cmd("siteSetSettingsValue", ["modified_files_notification", true]);
|
||||
};
|
||||
})(this);
|
||||
this.fixbutton = new Fixbutton();
|
||||
window.addEventListener("message", this.onMessageInner, false);
|
||||
this.inner = document.getElementById("inner-iframe").contentWindow;
|
||||
|
|
@ -1054,7 +1113,7 @@ $.extend( $.easing,
|
|||
};
|
||||
|
||||
Wrapper.prototype.handleMessage = function(message) {
|
||||
var cmd, query;
|
||||
var cmd, query, ref;
|
||||
cmd = message.cmd;
|
||||
if (cmd === "innerReady") {
|
||||
this.inner_ready = true;
|
||||
|
|
@ -1698,10 +1757,11 @@ $.extend( $.easing,
|
|||
Wrapper.prototype.updateModifiedPanel = function() {
|
||||
return this.ws.cmd("siteListModifiedFiles", [], (function(_this) {
|
||||
return function(res) {
|
||||
var num;
|
||||
var closed, num;
|
||||
num = res.modified_files.length;
|
||||
if (num > 0) {
|
||||
_this.infopanel.show();
|
||||
closed = _this.site_info.settings.modified_files_notification === false;
|
||||
_this.infopanel.show(closed);
|
||||
} else {
|
||||
_this.infopanel.hide();
|
||||
}
|
||||
|
|
@ -1835,7 +1895,6 @@ $.extend( $.easing,
|
|||
}).call(this);
|
||||
|
||||
|
||||
|
||||
/* ---- src/Ui/media/WrapperZeroFrame.coffee ---- */
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,6 @@ else if (window.opener && window.opener.location.toString()) {
|
|||
<a class='fixbutton-bg' href="{homepage}/"></a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Notifications -->
|
||||
<div class='notifications'>
|
||||
<div class='notification template'><span class='notification-icon'>!</span> <span class='body'>Test notification</span><a class="close" href="#Close">×</a><div style="clear: both"></div></div>
|
||||
|
|
@ -52,7 +51,12 @@ else if (window.opener && window.opener.location.toString()) {
|
|||
|
||||
<!-- Infopanel -->
|
||||
<div class='infopanel'>
|
||||
<div class="message"><span class='line line-1'>8 modified files</span><br><span class='line line-2'>content.json, data.json</span></div> <a href="#Publish" class="button button-submit">Sign & Publish</a>
|
||||
<span class='closed-num'>8</span>
|
||||
<div class="message">
|
||||
<span class='line line-1'>8 modified files</span><br><span class='line line-2'>content.json, data.json</span>
|
||||
</div>
|
||||
<a href="#Publish" class="button button-submit">Sign & Publish</a>
|
||||
<a href="#Close" class="close">×</a>
|
||||
</div>
|
||||
|
||||
<!-- Loadingscreen -->
|
||||
|
|
|
|||
Loading…
Reference in a new issue