diff --git a/src/Ui/media/Infopanel.coffee b/src/Ui/media/Infopanel.coffee index b5e367a8..bf54fdbc 100644 --- a/src/Ui/media/Infopanel.coffee +++ b/src/Ui/media/Infopanel.coffee @@ -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 diff --git a/src/Ui/media/Wrapper.coffee b/src/Ui/media/Wrapper.coffee index b2a75f19..4311d873 100644 --- a/src/Ui/media/Wrapper.coffee +++ b/src/Ui/media/Wrapper.coffee @@ -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() diff --git a/src/Ui/media/Wrapper.css b/src/Ui/media/Wrapper.css index cfc1a9b5..d8b2b018 100644 --- a/src/Ui/media/Wrapper.css +++ b/src/Ui/media/Wrapper.css @@ -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 */ diff --git a/src/Ui/media/all.css b/src/Ui/media/all.css index 342d1302..358aabbc 100644 --- a/src/Ui/media/all.css +++ b/src/Ui/media/all.css @@ -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 */ diff --git a/src/Ui/media/all.js b/src/Ui/media/all.js index 6953a92f..fa921aea 100644 --- a/src/Ui/media/all.js +++ b/src/Ui/media/all.js @@ -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 ---- */ diff --git a/src/Ui/template/wrapper.html b/src/Ui/template/wrapper.html index eefb8d44..b8630fba 100644 --- a/src/Ui/template/wrapper.html +++ b/src/Ui/template/wrapper.html @@ -44,7 +44,6 @@ else if (window.opener && window.opener.location.toString()) { -
! Test notification×
@@ -52,7 +51,12 @@ else if (window.opener && window.opener.location.toString()) {
-
8 modified files
content.json, data.json
Sign & Publish + 8 +
+ 8 modified files
content.json, data.json +
+ Sign & Publish + ×