From 7121a96ebde66a6d589333a14d571878333ced66 Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sat, 30 Dec 2017 17:43:56 +0300 Subject: [PATCH 01/12] Simple realisation --- plugins/Sidebar/SidebarPlugin.py | 10 ++++++-- plugins/Sidebar/media/Sidebar.coffee | 28 ++++++++++++++++++++++ plugins/Sidebar/media/Sidebar.css | 35 +++++++++++++++++++++++++++- plugins/Sidebar/media/all.css | 35 +++++++++++++++++++++++++++- plugins/Sidebar/media/all.js | 15 ++++++++++-- 5 files changed, 117 insertions(+), 6 deletions(-) diff --git a/plugins/Sidebar/SidebarPlugin.py b/plugins/Sidebar/SidebarPlugin.py index bc0f22e2..888517a2 100644 --- a/plugins/Sidebar/SidebarPlugin.py +++ b/plugins/Sidebar/SidebarPlugin.py @@ -428,8 +428,14 @@ class UiWebsocketPlugin(object): body.append(_(u"""
- {_[Sign]} - {_[Publish]} + + {_[Sign and Publish]} + v + +
""")) diff --git a/plugins/Sidebar/media/Sidebar.coffee b/plugins/Sidebar/media/Sidebar.coffee index 9f891260..7fd1c7c0 100644 --- a/plugins/Sidebar/media/Sidebar.coffee +++ b/plugins/Sidebar/media/Sidebar.coffee @@ -354,6 +354,33 @@ class Sidebar extends Class @updateHtmlTag() return false + # Sign and publish content.json + $(document).on "click touchend", => + @tag.find("#button-sign-publish-menu").removeClass("visible") + @tag.find("#button-sign-publish-arrow").off("click touchend").on "click touchend", => + @tag.find("#button-sign-publish-menu").toggleClass("visible") + return false + + @tag.find("#button-sign-publish").off("click touchend").on "click touchend", => + inner_path = @tag.find("#input-contents").val() + + wrapper.ws.cmd "fileRules", {inner_path: inner_path}, (res) => + if wrapper.site_info.privatekey or wrapper.site_info.auth_address in res.signers + # Privatekey stored in users.json + wrapper.ws.cmd "sitePublish", {privatekey: "stored", inner_path: inner_path, sign: true}, (res) => + if res == "ok" + wrapper.notifications.add "sign", "done", "#{inner_path} Signed and published!", 5000 + + else + # Ask the user for privatekey + wrapper.displayPrompt "Enter your private key:", "password", "Sign", "", (privatekey) => # Prompt the private key + wrapper.ws.cmd "sitePublish", {privatekey: privatekey, inner_path: inner_path, sign: true}, (res) => + if res == "ok" + wrapper.notifications.add "sign", "done", "#{inner_path} Signed and published!", 5000 + + @tag.find("#button-sign-publish-menu").removeClass("visible") + return false + # Sign content.json @tag.find("#button-sign").off("click touchend").on "click touchend", => inner_path = @tag.find("#input-contents").val() @@ -372,6 +399,7 @@ class Sidebar extends Class if res == "ok" wrapper.notifications.add "sign", "done", "#{inner_path} Signed!", 5000 + @tag.find("#button-sign-publish-menu").removeClass("visible") return false # Publish content.json diff --git a/plugins/Sidebar/media/Sidebar.css b/plugins/Sidebar/media/Sidebar.css index c76bde0c..a3eb9b67 100644 --- a/plugins/Sidebar/media/Sidebar.css +++ b/plugins/Sidebar/media/Sidebar.css @@ -112,7 +112,7 @@ #checkbox-owned { margin-bottom: 25px; margin-top: 26px; margin-left: 11px; } .settings-owned { clear: both } #checkbox-owned ~ .settings-owned { opacity: 0; max-height: 0px; transition: all 0.3s linear; overflow: hidden } -#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 400px } +#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 408px } /* Globe */ .globe { width: 360px; height: 360px } @@ -124,6 +124,39 @@ .contents a { color: white } .contents a:active { background-color: #6B6B6B } +.contents + .flex { + padding-bottom: 65px; +} +#button-sign-publish { + position: relative; + padding: 0; + padding-left: 10px; + color: #000; + cursor: pointer; +} +#button-sign-publish-arrow { + display: inline-block; + padding: 5px 10px; +} + +#button-sign-publish-menu { + display: none; + width: 100%; + margin-top: 2px; + + position: absolute; + left: 0; + top: 100%; +} +#button-sign-publish-menu.visible { + display: inline-block; +} +#button-sign-publish-menu a { + width: 100%; + margin-left: 0; + margin-top: 1px; +} + /* Small screen */ @media screen and (max-width: 600px) { .sidebar .close { display: block } diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css index baf9b94c..fa85d369 100644 --- a/plugins/Sidebar/media/all.css +++ b/plugins/Sidebar/media/all.css @@ -166,7 +166,7 @@ #checkbox-owned { margin-bottom: 25px; margin-top: 26px; margin-left: 11px; } .settings-owned { clear: both } #checkbox-owned ~ .settings-owned { opacity: 0; max-height: 0px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear ; overflow: hidden } -#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 400px } +#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 408px } /* Globe */ .globe { width: 360px; height: 360px } @@ -178,6 +178,39 @@ .contents a { color: white } .contents a:active { background-color: #6B6B6B } +.contents + .flex { + padding-bottom: 65px; +} +#button-sign-publish { + position: relative; + padding: 0; + padding-left: 10px; + color: #000; + cursor: pointer; +} +#button-sign-publish-arrow { + display: inline-block; + padding: 5px 10px; +} + +#button-sign-publish-menu { + display: none; + width: 100%; + margin-top: 2px; + + position: absolute; + left: 0; + top: 100%; +} +#button-sign-publish-menu.visible { + display: inline-block; +} +#button-sign-publish-menu a { + width: 100%; + margin-left: 0; + margin-top: 1px; +} + /* Small screen */ @media screen and (max-width: 600px) { .sidebar .close { display: block } diff --git a/plugins/Sidebar/media/all.js b/plugins/Sidebar/media/all.js index 0a54d46f..c7f408e6 100644 --- a/plugins/Sidebar/media/all.js +++ b/plugins/Sidebar/media/all.js @@ -234,8 +234,7 @@ window.initScrollable = function () { @logStart("Preloading") wrapper.ws.cmd "sidebarGetHtmlTag", {}, (res) => @logEnd("Preloading") - @preload_html = res - */ + @preload_html = res */ this.fixbutton.on("mousedown touchstart", (function(_this) { return function(e) { if (e.button > 0) { @@ -607,6 +606,17 @@ window.initScrollable = function () { return false; }; })(this)); + $(document).on("click touchend", (function(_this) { + return function() { + return _this.tag.find("#button-sign-publish-menu").removeClass("visible"); + }; + })(this)); + this.tag.find("#button-sign-publish-arrow").off("click touchend").on("click touchend", (function(_this) { + return function() { + _this.tag.find("#button-sign-publish-menu").toggleClass("visible"); + return false; + }; + })(this)); this.tag.find("#button-sign").off("click touchend").on("click touchend", (function(_this) { return function() { var inner_path; @@ -639,6 +649,7 @@ window.initScrollable = function () { }); } }); + _this.tag.find("#button-sign-publish-menu").removeClass("visible"); return false; }; })(this)); From f2c76c0a3be29a1a0ab12f661e976c16e03f31ba Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sat, 30 Dec 2017 17:45:19 +0300 Subject: [PATCH 02/12] Lowercase --- plugins/Sidebar/SidebarPlugin.py | 2 +- plugins/Sidebar/media/all.js | 36 ++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/plugins/Sidebar/SidebarPlugin.py b/plugins/Sidebar/SidebarPlugin.py index 888517a2..4e7298a0 100644 --- a/plugins/Sidebar/SidebarPlugin.py +++ b/plugins/Sidebar/SidebarPlugin.py @@ -429,7 +429,7 @@ class UiWebsocketPlugin(object):
- {_[Sign and Publish]} + {_[Sign and publish]} v
{_[Sign]}
diff --git a/plugins/Sidebar/media/all.js b/plugins/Sidebar/media/all.js index c7f408e6..42dbb762 100644 --- a/plugins/Sidebar/media/all.js +++ b/plugins/Sidebar/media/all.js @@ -617,6 +617,42 @@ window.initScrollable = function () { return false; }; })(this)); + this.tag.find("#button-sign-publish").off("click touchend").on("click touchend", (function(_this) { + return function() { + var inner_path; + inner_path = _this.tag.find("#input-contents").val(); + wrapper.ws.cmd("fileRules", { + inner_path: inner_path + }, function(res) { + var ref; + if (wrapper.site_info.privatekey || (ref = wrapper.site_info.auth_address, indexOf.call(res.signers, ref) >= 0)) { + return wrapper.ws.cmd("sitePublish", { + privatekey: "stored", + inner_path: inner_path, + sign: true + }, function(res) { + if (res === "ok") { + return wrapper.notifications.add("sign", "done", inner_path + " Signed and published!", 5000); + } + }); + } else { + return wrapper.displayPrompt("Enter your private key:", "password", "Sign", "", function(privatekey) { + return wrapper.ws.cmd("sitePublish", { + privatekey: privatekey, + inner_path: inner_path, + sign: true + }, function(res) { + if (res === "ok") { + return wrapper.notifications.add("sign", "done", inner_path + " Signed and published!", 5000); + } + }); + }); + } + }); + _this.tag.find("#button-sign-publish-menu").removeClass("visible"); + return false; + }; + })(this)); this.tag.find("#button-sign").off("click touchend").on("click touchend", (function(_this) { return function() { var inner_path; From 581a18f83da6ae855a8bcb989eb8dae26dca842b Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sat, 30 Dec 2017 18:39:07 +0300 Subject: [PATCH 03/12] 'Publish' cuts off --- plugins/Sidebar/media/Sidebar.css | 2 +- plugins/Sidebar/media/all.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/Sidebar/media/Sidebar.css b/plugins/Sidebar/media/Sidebar.css index a3eb9b67..d9361ab8 100644 --- a/plugins/Sidebar/media/Sidebar.css +++ b/plugins/Sidebar/media/Sidebar.css @@ -112,7 +112,7 @@ #checkbox-owned { margin-bottom: 25px; margin-top: 26px; margin-left: 11px; } .settings-owned { clear: both } #checkbox-owned ~ .settings-owned { opacity: 0; max-height: 0px; transition: all 0.3s linear; overflow: hidden } -#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 408px } +#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 420px } /* Globe */ .globe { width: 360px; height: 360px } diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css index fa85d369..c0db1a18 100644 --- a/plugins/Sidebar/media/all.css +++ b/plugins/Sidebar/media/all.css @@ -166,7 +166,7 @@ #checkbox-owned { margin-bottom: 25px; margin-top: 26px; margin-left: 11px; } .settings-owned { clear: both } #checkbox-owned ~ .settings-owned { opacity: 0; max-height: 0px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear ; overflow: hidden } -#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 408px } +#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 420px } /* Globe */ .globe { width: 360px; height: 360px } From f9ac614147727918ae0b55fe328ff927c23e3b0f Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sat, 30 Dec 2017 19:22:49 +0300 Subject: [PATCH 04/12] Autoscroll --- plugins/Sidebar/media/Sidebar.coffee | 6 ++++++ plugins/Sidebar/media/Sidebar.css | 2 +- plugins/Sidebar/media/all.css | 2 +- plugins/Sidebar/media/all.js | 7 ++++++- 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/plugins/Sidebar/media/Sidebar.coffee b/plugins/Sidebar/media/Sidebar.coffee index 7fd1c7c0..3155b0bc 100644 --- a/plugins/Sidebar/media/Sidebar.coffee +++ b/plugins/Sidebar/media/Sidebar.coffee @@ -357,8 +357,14 @@ class Sidebar extends Class # Sign and publish content.json $(document).on "click touchend", => @tag.find("#button-sign-publish-menu").removeClass("visible") + @tag.find(".contents + .flex").removeClass("sign-publish-flex") @tag.find("#button-sign-publish-arrow").off("click touchend").on "click touchend", => @tag.find("#button-sign-publish-menu").toggleClass("visible") + @tag.find(".contents + .flex").toggleClass("sign-publish-flex") + + if @tag.find(".contents + .flex").hasClass("sign-publish-flex") + @tag.find(".content-wrapper").prop "scrollTop", 10000 + return false @tag.find("#button-sign-publish").off("click touchend").on "click touchend", => diff --git a/plugins/Sidebar/media/Sidebar.css b/plugins/Sidebar/media/Sidebar.css index d9361ab8..e6f2a673 100644 --- a/plugins/Sidebar/media/Sidebar.css +++ b/plugins/Sidebar/media/Sidebar.css @@ -124,7 +124,7 @@ .contents a { color: white } .contents a:active { background-color: #6B6B6B } -.contents + .flex { +.sign-publish-flex { padding-bottom: 65px; } #button-sign-publish { diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css index c0db1a18..6bf49bf1 100644 --- a/plugins/Sidebar/media/all.css +++ b/plugins/Sidebar/media/all.css @@ -178,7 +178,7 @@ .contents a { color: white } .contents a:active { background-color: #6B6B6B } -.contents + .flex { +.sign-publish-flex { padding-bottom: 65px; } #button-sign-publish { diff --git a/plugins/Sidebar/media/all.js b/plugins/Sidebar/media/all.js index 42dbb762..f7b1c33e 100644 --- a/plugins/Sidebar/media/all.js +++ b/plugins/Sidebar/media/all.js @@ -608,12 +608,17 @@ window.initScrollable = function () { })(this)); $(document).on("click touchend", (function(_this) { return function() { - return _this.tag.find("#button-sign-publish-menu").removeClass("visible"); + _this.tag.find("#button-sign-publish-menu").removeClass("visible"); + return _this.tag.find(".contents + .flex").removeClass("sign-publish-flex"); }; })(this)); this.tag.find("#button-sign-publish-arrow").off("click touchend").on("click touchend", (function(_this) { return function() { _this.tag.find("#button-sign-publish-menu").toggleClass("visible"); + _this.tag.find(".contents + .flex").toggleClass("sign-publish-flex"); + if (_this.tag.find(".contents + .flex").hasClass("sign-publish-flex")) { + _this.tag.find(".content-wrapper").prop("scrollTop", 10000); + } return false; }; })(this)); From d8ff0e174544b29d6a581a1ccb6f550c327d8bc0 Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sat, 30 Dec 2017 21:45:55 +0300 Subject: [PATCH 05/12] Add return false --- plugins/Sidebar/media/Sidebar.coffee | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/Sidebar/media/Sidebar.coffee b/plugins/Sidebar/media/Sidebar.coffee index 3155b0bc..d3b8c59b 100644 --- a/plugins/Sidebar/media/Sidebar.coffee +++ b/plugins/Sidebar/media/Sidebar.coffee @@ -414,6 +414,7 @@ class Sidebar extends Class @tag.find("#button-publish").addClass "loading" wrapper.ws.cmd "sitePublish", {"inner_path": inner_path, "sign": false}, => @tag.find("#button-publish").removeClass "loading" + return false # Close @tag.find(".close").off("click touchend").on "click touchend", (e) => From 905095317c8f26f899f3ed38de72e4b0a33d80a4 Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sat, 30 Dec 2017 21:46:53 +0300 Subject: [PATCH 06/12] Update all.js --- plugins/Sidebar/media/all.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugins/Sidebar/media/all.js b/plugins/Sidebar/media/all.js index f7b1c33e..f4b19251 100644 --- a/plugins/Sidebar/media/all.js +++ b/plugins/Sidebar/media/all.js @@ -699,12 +699,13 @@ window.initScrollable = function () { var inner_path; inner_path = _this.tag.find("#input-contents").val(); _this.tag.find("#button-publish").addClass("loading"); - return wrapper.ws.cmd("sitePublish", { + wrapper.ws.cmd("sitePublish", { "inner_path": inner_path, "sign": false }, function() { return _this.tag.find("#button-publish").removeClass("loading"); }); + return false; }; })(this)); this.tag.find(".close").off("click touchend").on("click touchend", (function(_this) { From 6a31ce3e2ecf5b94008aa6b69a053cff6c82f99f Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sat, 30 Dec 2017 22:01:52 +0300 Subject: [PATCH 07/12] Add vertical line --- plugins/Sidebar/media/Sidebar.css | 3 +++ plugins/Sidebar/media/all.css | 3 +++ 2 files changed, 6 insertions(+) diff --git a/plugins/Sidebar/media/Sidebar.css b/plugins/Sidebar/media/Sidebar.css index e6f2a673..9faa0da2 100644 --- a/plugins/Sidebar/media/Sidebar.css +++ b/plugins/Sidebar/media/Sidebar.css @@ -137,6 +137,9 @@ #button-sign-publish-arrow { display: inline-block; padding: 5px 10px; + padding-bottom: 7px; + border-left: 1px solid #888; + margin-left: 3px; } #button-sign-publish-menu { diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css index 6bf49bf1..8b48d73c 100644 --- a/plugins/Sidebar/media/all.css +++ b/plugins/Sidebar/media/all.css @@ -191,6 +191,9 @@ #button-sign-publish-arrow { display: inline-block; padding: 5px 10px; + padding-bottom: 7px; + border-left: 1px solid #888; + margin-left: 3px; } #button-sign-publish-menu { From 9546817ad26f01c609b6a7191c118b10b0aafc05 Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sun, 31 Dec 2017 16:10:00 +0300 Subject: [PATCH 08/12] Add menu --- plugins/Sidebar/SidebarPlugin.py | 14 +++--- plugins/Sidebar/media/Menu.coffee | 46 ++++++++++++++++++ plugins/Sidebar/media/Menu.css | 19 ++++++++ plugins/Sidebar/media/all.css | 24 +++++++++ plugins/Sidebar/media/all.js | 81 ++++++++++++++++++++++++++++++- 5 files changed, 176 insertions(+), 8 deletions(-) create mode 100644 plugins/Sidebar/media/Menu.coffee create mode 100644 plugins/Sidebar/media/Menu.css diff --git a/plugins/Sidebar/SidebarPlugin.py b/plugins/Sidebar/SidebarPlugin.py index 4e7298a0..e23d322c 100644 --- a/plugins/Sidebar/SidebarPlugin.py +++ b/plugins/Sidebar/SidebarPlugin.py @@ -428,13 +428,9 @@ class UiWebsocketPlugin(object): body.append(_(u"""
- - {_[Sign and publish]} - v - + + {_[Sign and publish]} + \u22EE
@@ -474,6 +470,10 @@ class UiWebsocketPlugin(object): body.append("") body.append("
") + body.append("
") + body.append("Template") + body.append("
") + self.response(to, "".join(body)) def downloadGeoLiteDb(self, db_path): diff --git a/plugins/Sidebar/media/Menu.coffee b/plugins/Sidebar/media/Menu.coffee new file mode 100644 index 00000000..3785009b --- /dev/null +++ b/plugins/Sidebar/media/Menu.coffee @@ -0,0 +1,46 @@ +class Menu + constructor: (@button) -> + @elem = $(".menu.template").clone().removeClass("template") + @elem.appendTo("body") + @items = [] + + show: -> + if window.visible_menu and window.visible_menu.button[0] == @button[0] # Same menu visible then hide it + window.visible_menu.hide() + @hide() + else + button_pos = @button.offset() + @elem.css({"top": button_pos.top+@button.outerHeight(), "left": button_pos.left}) + @button.addClass("menu-active") + @elem.addClass("visible") + if window.visible_menu then window.visible_menu.hide() + window.visible_menu = @ + + + hide: -> + @elem.removeClass("visible") + @button.removeClass("menu-active") + window.visible_menu = null + + + addItem: (title, cb) -> + item = $(".menu-item.template", @elem).clone().removeClass("template") + item.html(title) + item.on "click", => + if not cb(item) + @hide() + return false + item.appendTo(@elem) + @items.push item + return item + + + log: (args...) -> + console.log "[Menu]", args... + +window.Menu = Menu + +# Hide menu on outside click +$("body").on "click", (e) -> + if window.visible_menu and e.target != window.visible_menu.button[0] and $(e.target).parent()[0] != window.visible_menu.elem[0] + window.visible_menu.hide() diff --git a/plugins/Sidebar/media/Menu.css b/plugins/Sidebar/media/Menu.css new file mode 100644 index 00000000..e2afa16e --- /dev/null +++ b/plugins/Sidebar/media/Menu.css @@ -0,0 +1,19 @@ +.menu { + background-color: white; padding: 10px 0px; position: absolute; top: 0px; left: 0px; max-height: 0px; overflow: hidden; transform: translate(0px, -30px); pointer-events: none; + box-shadow: 0px 2px 8px rgba(0,0,0,0.3); border-radius: 2px; opacity: 0; transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out; +} +.menu.visible { opacity: 1; max-height: 350px; transform: translate(0px, 0px); transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; pointer-events: all } + +.menu-item { display: block; text-decoration: none; color: black; padding: 6px 24px; transition: all 0.2s; border-bottom: none; font-weight: normal; padding-left: 30px; } +.menu-item-separator { margin-top: 5px; border-top: 1px solid #eee } + +.menu-item:hover { background-color: #F6F6F6; transition: none; color: inherit; border: none } +.menu-item:active, .menu-item:focus { background-color: #AF3BFF; color: white; transition: none } +.menu-item.selected:before { + content: "L"; display: inline-block; transform: rotateZ(45deg) scaleX(-1); + font-weight: bold; position: absolute; margin-left: -17px; font-size: 12px; margin-top: 2px; +} + +@media only screen and (max-width: 800px) { +.menu, .menu.visible { position: absolute; left: unset !important; right: 20px; } +} \ No newline at end of file diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css index 8b48d73c..99082916 100644 --- a/plugins/Sidebar/media/all.css +++ b/plugins/Sidebar/media/all.css @@ -1,5 +1,29 @@ +/* ---- plugins/Sidebar/media/Menu.css ---- */ + + +.menu { + background-color: white; padding: 10px 0px; position: absolute; top: 0px; left: 0px; max-height: 0px; overflow: hidden; -webkit-transform: translate(0px, -30px); -moz-transform: translate(0px, -30px); -o-transform: translate(0px, -30px); -ms-transform: translate(0px, -30px); transform: translate(0px, -30px) ; pointer-events: none; + -webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.3); -o-box-shadow: 0px 2px 8px rgba(0,0,0,0.3); -ms-box-shadow: 0px 2px 8px rgba(0,0,0,0.3); box-shadow: 0px 2px 8px rgba(0,0,0,0.3) ; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px ; opacity: 0; -webkit-transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out; -o-transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out; transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out ; +} +.menu.visible { opacity: 1; max-height: 350px; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px) ; -webkit-transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; -moz-transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; -o-transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; -ms-transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out ; pointer-events: all } + +.menu-item { display: block; text-decoration: none; color: black; padding: 6px 24px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s ; border-bottom: none; font-weight: normal; padding-left: 30px; } +.menu-item-separator { margin-top: 5px; border-top: 1px solid #eee } + +.menu-item:hover { background-color: #F6F6F6; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none ; color: inherit; border: none } +.menu-item:active, .menu-item:focus { background-color: #AF3BFF; color: white; -webkit-transition: none ; -moz-transition: none ; -o-transition: none ; -ms-transition: none ; transition: none } +.menu-item.selected:before { + content: "L"; display: inline-block; -webkit-transform: rotateZ(45deg) scaleX(-1); -moz-transform: rotateZ(45deg) scaleX(-1); -o-transform: rotateZ(45deg) scaleX(-1); -ms-transform: rotateZ(45deg) scaleX(-1); transform: rotateZ(45deg) scaleX(-1) ; + font-weight: bold; position: absolute; margin-left: -17px; font-size: 12px; margin-top: 2px; +} + +@media only screen and (max-width: 800px) { +.menu, .menu.visible { position: absolute; left: unset !important; right: 20px; } +} + + /* ---- plugins/Sidebar/media/Scrollbable.css ---- */ diff --git a/plugins/Sidebar/media/all.js b/plugins/Sidebar/media/all.js index f4b19251..88a7742a 100644 --- a/plugins/Sidebar/media/all.js +++ b/plugins/Sidebar/media/all.js @@ -57,6 +57,86 @@ }).call(this); +/* ---- plugins/Sidebar/media/Menu.coffee ---- */ + + +(function() { + var Menu, + slice = [].slice; + + Menu = (function() { + function Menu(button) { + this.button = button; + this.elem = $(".menu.template").clone().removeClass("template"); + this.elem.appendTo("body"); + this.items = []; + } + + Menu.prototype.show = function() { + var button_pos; + if (window.visible_menu && window.visible_menu.button[0] === this.button[0]) { + window.visible_menu.hide(); + return this.hide(); + } else { + button_pos = this.button.offset(); + this.elem.css({ + "top": button_pos.top + this.button.outerHeight(), + "left": button_pos.left + }); + this.button.addClass("menu-active"); + this.elem.addClass("visible"); + if (window.visible_menu) { + window.visible_menu.hide(); + } + return window.visible_menu = this; + } + }; + + Menu.prototype.hide = function() { + this.elem.removeClass("visible"); + this.button.removeClass("menu-active"); + return window.visible_menu = null; + }; + + Menu.prototype.addItem = function(title, cb) { + var item; + item = $(".menu-item.template", this.elem).clone().removeClass("template"); + item.html(title); + item.on("click", (function(_this) { + return function() { + if (!cb(item)) { + _this.hide(); + } + return false; + }; + })(this)); + item.appendTo(this.elem); + this.items.push(item); + return item; + }; + + Menu.prototype.log = function() { + var args; + args = 1 <= arguments.length ? slice.call(arguments, 0) : []; + return console.log.apply(console, ["[Menu]"].concat(slice.call(args))); + }; + + return Menu; + + })(); + + window.Menu = Menu; + + $("body").on("click", function(e) { + if (window.visible_menu && e.target !== window.visible_menu.button[0] && $(e.target).parent()[0] !== window.visible_menu.elem[0]) { + return window.visible_menu.hide(); + } + }); + +}).call(this); + + + /* ---- plugins/Sidebar/media/RateLimit.coffee ---- */ @@ -809,7 +889,6 @@ window.initScrollable = function () { }).call(this); - /* ---- plugins/Sidebar/media/morphdom.js ---- */ From b89eb4f1e83489b2df89d7d2011380a552ad917c Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sun, 31 Dec 2017 18:01:54 +0300 Subject: [PATCH 09/12] Make button and style ':' sign --- plugins/Sidebar/SidebarPlugin.py | 2 +- plugins/Sidebar/media/Sidebar.css | 42 ++++++++----------------------- plugins/Sidebar/media/all.css | 42 ++++++++----------------------- 3 files changed, 23 insertions(+), 63 deletions(-) diff --git a/plugins/Sidebar/SidebarPlugin.py b/plugins/Sidebar/SidebarPlugin.py index e23d322c..c13821d4 100644 --- a/plugins/Sidebar/SidebarPlugin.py +++ b/plugins/Sidebar/SidebarPlugin.py @@ -428,7 +428,7 @@ class UiWebsocketPlugin(object): body.append(_(u"""
- + {_[Sign and publish]} \u22EE diff --git a/plugins/Sidebar/media/Sidebar.css b/plugins/Sidebar/media/Sidebar.css index 9faa0da2..04377111 100644 --- a/plugins/Sidebar/media/Sidebar.css +++ b/plugins/Sidebar/media/Sidebar.css @@ -124,40 +124,20 @@ .contents a { color: white } .contents a:active { background-color: #6B6B6B } -.sign-publish-flex { - padding-bottom: 65px; +#wrapper-sign-publish { + padding: 0; +} +#button-sign-publish, #menu-sign-publish { + display: inline-block; + margin: 5px 10px; + + text-decoration: none; } #button-sign-publish { - position: relative; - padding: 0; - padding-left: 10px; - color: #000; - cursor: pointer; + margin-right: 5px; } -#button-sign-publish-arrow { - display: inline-block; - padding: 5px 10px; - padding-bottom: 7px; - border-left: 1px solid #888; - margin-left: 3px; -} - -#button-sign-publish-menu { - display: none; - width: 100%; - margin-top: 2px; - - position: absolute; - left: 0; - top: 100%; -} -#button-sign-publish-menu.visible { - display: inline-block; -} -#button-sign-publish-menu a { - width: 100%; - margin-left: 0; - margin-top: 1px; +#menu-sign-publish { + margin-left: 5px; } /* Small screen */ diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css index 99082916..bcb83041 100644 --- a/plugins/Sidebar/media/all.css +++ b/plugins/Sidebar/media/all.css @@ -202,40 +202,20 @@ .contents a { color: white } .contents a:active { background-color: #6B6B6B } -.sign-publish-flex { - padding-bottom: 65px; +#wrapper-sign-publish { + padding: 0; +} +#button-sign-publish, #menu-sign-publish { + display: inline-block; + margin: 5px 10px; + + text-decoration: none; } #button-sign-publish { - position: relative; - padding: 0; - padding-left: 10px; - color: #000; - cursor: pointer; + margin-right: 5px; } -#button-sign-publish-arrow { - display: inline-block; - padding: 5px 10px; - padding-bottom: 7px; - border-left: 1px solid #888; - margin-left: 3px; -} - -#button-sign-publish-menu { - display: none; - width: 100%; - margin-top: 2px; - - position: absolute; - left: 0; - top: 100%; -} -#button-sign-publish-menu.visible { - display: inline-block; -} -#button-sign-publish-menu a { - width: 100%; - margin-left: 0; - margin-top: 1px; +#menu-sign-publish { + margin-left: 5px; } /* Small screen */ From 0f5658e65ea54dc642046cd2e549042be0bb91bc Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sun, 31 Dec 2017 18:56:17 +0300 Subject: [PATCH 10/12] Handle clicking ':' --- plugins/Sidebar/media/Sidebar.coffee | 19 ++++++++++++++----- plugins/Sidebar/media/Sidebar.css | 3 +++ plugins/Sidebar/media/all.css | 3 +++ plugins/Sidebar/media/all.js | 22 +++++++++++++++++----- 4 files changed, 37 insertions(+), 10 deletions(-) diff --git a/plugins/Sidebar/media/Sidebar.coffee b/plugins/Sidebar/media/Sidebar.coffee index d3b8c59b..cdccd3a3 100644 --- a/plugins/Sidebar/media/Sidebar.coffee +++ b/plugins/Sidebar/media/Sidebar.coffee @@ -358,15 +358,24 @@ class Sidebar extends Class $(document).on "click touchend", => @tag.find("#button-sign-publish-menu").removeClass("visible") @tag.find(".contents + .flex").removeClass("sign-publish-flex") - @tag.find("#button-sign-publish-arrow").off("click touchend").on "click touchend", => - @tag.find("#button-sign-publish-menu").toggleClass("visible") - @tag.find(".contents + .flex").toggleClass("sign-publish-flex") - if @tag.find(".contents + .flex").hasClass("sign-publish-flex") + menu = new Menu(@tag.find("#wrapper-sign-publish")) + menu.addItem "Sign" + menu.addItem "Publush" + + @tag.find("#menu-sign-publish").off("click touchend").on "click touchend", => + if window.visible_menu == menu + @tag.find(".contents + .flex").removeClass "active" + menu.hide() + else + @tag.find(".contents + .flex").addClass "active" @tag.find(".content-wrapper").prop "scrollTop", 10000 - + menu.show() return false + $("body").on "click", => + @tag.find(".contents + .flex").removeClass "active" + @tag.find("#button-sign-publish").off("click touchend").on "click touchend", => inner_path = @tag.find("#input-contents").val() diff --git a/plugins/Sidebar/media/Sidebar.css b/plugins/Sidebar/media/Sidebar.css index 04377111..4b0516d6 100644 --- a/plugins/Sidebar/media/Sidebar.css +++ b/plugins/Sidebar/media/Sidebar.css @@ -124,6 +124,9 @@ .contents a { color: white } .contents a:active { background-color: #6B6B6B } +.contents + .flex.active { + padding-bottom: 100px; +} #wrapper-sign-publish { padding: 0; } diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css index bcb83041..5b0a18d8 100644 --- a/plugins/Sidebar/media/all.css +++ b/plugins/Sidebar/media/all.css @@ -202,6 +202,9 @@ .contents a { color: white } .contents a:active { background-color: #6B6B6B } +.contents + .flex.active { + padding-bottom: 100px; +} #wrapper-sign-publish { padding: 0; } diff --git a/plugins/Sidebar/media/all.js b/plugins/Sidebar/media/all.js index 88a7742a..6ad58f7c 100644 --- a/plugins/Sidebar/media/all.js +++ b/plugins/Sidebar/media/all.js @@ -136,7 +136,6 @@ }).call(this); - /* ---- plugins/Sidebar/media/RateLimit.coffee ---- */ @@ -554,6 +553,7 @@ window.initScrollable = function () { }; Sidebar.prototype.onOpened = function() { + var menu; this.log("Opened"); this.scrollable(); this.tag.find("#checkbox-owned").off("click touchend").on("click touchend", (function(_this) { @@ -692,16 +692,27 @@ window.initScrollable = function () { return _this.tag.find(".contents + .flex").removeClass("sign-publish-flex"); }; })(this)); - this.tag.find("#button-sign-publish-arrow").off("click touchend").on("click touchend", (function(_this) { + menu = new Menu(this.tag.find("#wrapper-sign-publish")); + menu.addItem("Sign"); + menu.addItem("Publush"); + this.tag.find("#menu-sign-publish").off("click touchend").on("click touchend", (function(_this) { return function() { - _this.tag.find("#button-sign-publish-menu").toggleClass("visible"); - _this.tag.find(".contents + .flex").toggleClass("sign-publish-flex"); - if (_this.tag.find(".contents + .flex").hasClass("sign-publish-flex")) { + if (window.visible_menu === menu) { + _this.tag.find(".contents + .flex").removeClass("active"); + menu.hide(); + } else { + _this.tag.find(".contents + .flex").addClass("active"); _this.tag.find(".content-wrapper").prop("scrollTop", 10000); + menu.show(); } return false; }; })(this)); + $("body").on("click", (function(_this) { + return function() { + return _this.tag.find(".contents + .flex").removeClass("active"); + }; + })(this)); this.tag.find("#button-sign-publish").off("click touchend").on("click touchend", (function(_this) { return function() { var inner_path; @@ -889,6 +900,7 @@ window.initScrollable = function () { }).call(this); + /* ---- plugins/Sidebar/media/morphdom.js ---- */ From 5ff8d6be38bc40dc333502f264a49a11ae689b11 Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sun, 31 Dec 2017 19:42:27 +0300 Subject: [PATCH 11/12] Set font --- plugins/Sidebar/media/Sidebar.css | 4 ++++ plugins/Sidebar/media/all.css | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/plugins/Sidebar/media/Sidebar.css b/plugins/Sidebar/media/Sidebar.css index 4b0516d6..6a2bfc6e 100644 --- a/plugins/Sidebar/media/Sidebar.css +++ b/plugins/Sidebar/media/Sidebar.css @@ -1,3 +1,7 @@ +.menu { + font-family: Roboto, 'Segoe UI', 'Helvetica Neue'; +} + .drag-bg { width: 100%; height: 100%; position: fixed; } .fixbutton.dragging { cursor: -webkit-grabbing; } .fixbutton-bg:active { cursor: -webkit-grabbing; } diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css index 5b0a18d8..abb53b6e 100644 --- a/plugins/Sidebar/media/all.css +++ b/plugins/Sidebar/media/all.css @@ -76,6 +76,10 @@ /* ---- plugins/Sidebar/media/Sidebar.css ---- */ +.menu { + font-family: Roboto, 'Segoe UI', 'Helvetica Neue'; +} + .drag-bg { width: 100%; height: 100%; position: fixed; } .fixbutton.dragging { cursor: -webkit-grabbing; } .fixbutton-bg:active { cursor: -webkit-grabbing; } From bcc3b4d3acfaf9cbbbb273c6d565988cae3dd7de Mon Sep 17 00:00:00 2001 From: Ivanq Date: Sun, 31 Dec 2017 19:48:28 +0300 Subject: [PATCH 12/12] Add sign/publish code --- plugins/Sidebar/media/Sidebar.coffee | 58 +++++++-------- plugins/Sidebar/media/all.js | 101 +++++++++++++-------------- 2 files changed, 74 insertions(+), 85 deletions(-) diff --git a/plugins/Sidebar/media/Sidebar.coffee b/plugins/Sidebar/media/Sidebar.coffee index cdccd3a3..4f15c6bb 100644 --- a/plugins/Sidebar/media/Sidebar.coffee +++ b/plugins/Sidebar/media/Sidebar.coffee @@ -360,8 +360,32 @@ class Sidebar extends Class @tag.find(".contents + .flex").removeClass("sign-publish-flex") menu = new Menu(@tag.find("#wrapper-sign-publish")) - menu.addItem "Sign" - menu.addItem "Publush" + menu.addItem "Sign", => + inner_path = @tag.find("#input-contents").val() + + wrapper.ws.cmd "fileRules", {inner_path: inner_path}, (res) => + if wrapper.site_info.privatekey or wrapper.site_info.auth_address in res.signers + # Privatekey stored in users.json + wrapper.ws.cmd "siteSign", {privatekey: "stored", inner_path: inner_path, update_changed_files: true}, (res) => + if res == "ok" + wrapper.notifications.add "sign", "done", "#{inner_path} Signed!", 5000 + + else + # Ask the user for privatekey + wrapper.displayPrompt "Enter your private key:", "password", "Sign", "", (privatekey) => # Prompt the private key + wrapper.ws.cmd "siteSign", {privatekey: privatekey, inner_path: inner_path, update_changed_files: true}, (res) => + if res == "ok" + wrapper.notifications.add "sign", "done", "#{inner_path} Signed!", 5000 + + @tag.find(".contents + .flex").removeClass "active" + menu.hide() + + menu.addItem "Publish", => + inner_path = @tag.find("#input-contents").val() + wrapper.ws.cmd "sitePublish", {"inner_path": inner_path, "sign": false} + + @tag.find(".contents + .flex").removeClass "active" + menu.hide() @tag.find("#menu-sign-publish").off("click touchend").on "click touchend", => if window.visible_menu == menu @@ -393,36 +417,6 @@ class Sidebar extends Class if res == "ok" wrapper.notifications.add "sign", "done", "#{inner_path} Signed and published!", 5000 - @tag.find("#button-sign-publish-menu").removeClass("visible") - return false - - # Sign content.json - @tag.find("#button-sign").off("click touchend").on "click touchend", => - inner_path = @tag.find("#input-contents").val() - - wrapper.ws.cmd "fileRules", {inner_path: inner_path}, (res) => - if wrapper.site_info.privatekey or wrapper.site_info.auth_address in res.signers - # Privatekey stored in users.json - wrapper.ws.cmd "siteSign", {privatekey: "stored", inner_path: inner_path, update_changed_files: true}, (res) => - if res == "ok" - wrapper.notifications.add "sign", "done", "#{inner_path} Signed!", 5000 - - else - # Ask the user for privatekey - wrapper.displayPrompt "Enter your private key:", "password", "Sign", "", (privatekey) => # Prompt the private key - wrapper.ws.cmd "siteSign", {privatekey: privatekey, inner_path: inner_path, update_changed_files: true}, (res) => - if res == "ok" - wrapper.notifications.add "sign", "done", "#{inner_path} Signed!", 5000 - - @tag.find("#button-sign-publish-menu").removeClass("visible") - return false - - # Publish content.json - @tag.find("#button-publish").off("click touchend").on "click touchend", => - inner_path = @tag.find("#input-contents").val() - @tag.find("#button-publish").addClass "loading" - wrapper.ws.cmd "sitePublish", {"inner_path": inner_path, "sign": false}, => - @tag.find("#button-publish").removeClass "loading" return false # Close diff --git a/plugins/Sidebar/media/all.js b/plugins/Sidebar/media/all.js index 6ad58f7c..a77f8ceb 100644 --- a/plugins/Sidebar/media/all.js +++ b/plugins/Sidebar/media/all.js @@ -693,8 +693,54 @@ window.initScrollable = function () { }; })(this)); menu = new Menu(this.tag.find("#wrapper-sign-publish")); - menu.addItem("Sign"); - menu.addItem("Publush"); + menu.addItem("Sign", (function(_this) { + return function() { + var inner_path; + inner_path = _this.tag.find("#input-contents").val(); + wrapper.ws.cmd("fileRules", { + inner_path: inner_path + }, function(res) { + var ref; + if (wrapper.site_info.privatekey || (ref = wrapper.site_info.auth_address, indexOf.call(res.signers, ref) >= 0)) { + return wrapper.ws.cmd("siteSign", { + privatekey: "stored", + inner_path: inner_path, + update_changed_files: true + }, function(res) { + if (res === "ok") { + return wrapper.notifications.add("sign", "done", inner_path + " Signed!", 5000); + } + }); + } else { + return wrapper.displayPrompt("Enter your private key:", "password", "Sign", "", function(privatekey) { + return wrapper.ws.cmd("siteSign", { + privatekey: privatekey, + inner_path: inner_path, + update_changed_files: true + }, function(res) { + if (res === "ok") { + return wrapper.notifications.add("sign", "done", inner_path + " Signed!", 5000); + } + }); + }); + } + }); + _this.tag.find(".contents + .flex").removeClass("active"); + return menu.hide(); + }; + })(this)); + menu.addItem("Publish", (function(_this) { + return function() { + var inner_path; + inner_path = _this.tag.find("#input-contents").val(); + wrapper.ws.cmd("sitePublish", { + "inner_path": inner_path, + "sign": false + }); + _this.tag.find(".contents + .flex").removeClass("active"); + return menu.hide(); + }; + })(this)); this.tag.find("#menu-sign-publish").off("click touchend").on("click touchend", (function(_this) { return function() { if (window.visible_menu === menu) { @@ -745,57 +791,6 @@ window.initScrollable = function () { }); } }); - _this.tag.find("#button-sign-publish-menu").removeClass("visible"); - return false; - }; - })(this)); - this.tag.find("#button-sign").off("click touchend").on("click touchend", (function(_this) { - return function() { - var inner_path; - inner_path = _this.tag.find("#input-contents").val(); - wrapper.ws.cmd("fileRules", { - inner_path: inner_path - }, function(res) { - var ref; - if (wrapper.site_info.privatekey || (ref = wrapper.site_info.auth_address, indexOf.call(res.signers, ref) >= 0)) { - return wrapper.ws.cmd("siteSign", { - privatekey: "stored", - inner_path: inner_path, - update_changed_files: true - }, function(res) { - if (res === "ok") { - return wrapper.notifications.add("sign", "done", inner_path + " Signed!", 5000); - } - }); - } else { - return wrapper.displayPrompt("Enter your private key:", "password", "Sign", "", function(privatekey) { - return wrapper.ws.cmd("siteSign", { - privatekey: privatekey, - inner_path: inner_path, - update_changed_files: true - }, function(res) { - if (res === "ok") { - return wrapper.notifications.add("sign", "done", inner_path + " Signed!", 5000); - } - }); - }); - } - }); - _this.tag.find("#button-sign-publish-menu").removeClass("visible"); - return false; - }; - })(this)); - this.tag.find("#button-publish").off("click touchend").on("click touchend", (function(_this) { - return function() { - var inner_path; - inner_path = _this.tag.find("#input-contents").val(); - _this.tag.find("#button-publish").addClass("loading"); - wrapper.ws.cmd("sitePublish", { - "inner_path": inner_path, - "sign": false - }, function() { - return _this.tag.find("#button-publish").removeClass("loading"); - }); return false; }; })(this));