From 534498c31377a1c0aaf4bee2665c4142e033b83b Mon Sep 17 00:00:00 2001 From: BillyBlaze Date: Mon, 27 Apr 2020 20:00:32 +0100 Subject: [PATCH] :art: Show information vertically Show information vertically instead of horizontal. When a user has alot of information then the bar would grow very big. This way we can show alot of information without interfering with the image Fixes #14 --- .../static/css/fullscreen.css | 72 +++++++++++++------ octoprint_fullscreen/static/js/fullscreen.js | 32 +++++---- .../templates/fullscreen.jinja2 | 46 +++++++----- 3 files changed, 95 insertions(+), 55 deletions(-) diff --git a/octoprint_fullscreen/static/css/fullscreen.css b/octoprint_fullscreen/static/css/fullscreen.css index f6fbada..6690a82 100644 --- a/octoprint_fullscreen/static/css/fullscreen.css +++ b/octoprint_fullscreen/static/css/fullscreen.css @@ -98,46 +98,76 @@ _:-ms-lang(x), _:-webkit-full-screen, .fullscreen img { width: 100vh; } .fullscreen + #fullscreen-bar { - display: block; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} +#fullscreen-bar, +#fullscreen-tool-info, +#fullscreen-tool-info .temp, +#fullscreen-print-info .estimated { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } #fullscreen-bar { pointer-events: all; display: none; position: absolute; - left: 0; right: 0; bottom: 0; - background: rgba(0,0,0,.5); font-size: 85%; color: #fff; - padding: 10px 20px 10px; -} -#fullscreen-bar * { - display: inline-block; + padding: 10px; } -#fullscreen-cancel, -#fullscreen-cancel .user-buttons, -#fullscreen-cancel button { - float: right; +#fullscreen-buttons .user-buttons { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-justify-content: flex-end; + -ms-justify-content: flex-end; + justify-content: flex-end; + margin: 5px 0; } -#fullscreen-cancel button { +#fullscreen-bar #fullscreen-buttons button { width: auto; margin: 0 0 0 10px; + -webkit-border-radius: 10px !important; + -ms-border-radius: 10px !important; + border-radius: 10px !important; +} +#fullscreen-tool-info p, +#fullscreen-print-info p { + text-align: right; + line-height: 10px; + margin: 2px 0; +} +#fullscreen-bar #fullscreen-tool-info p span, +#fullscreen-bar #fullscreen-print-info p > span { + margin: 0; + background: rgba(0, 0, 0, 0.25); + padding: 5px 10px; + display: inline-block; + line-height: 20px; + -webkit-border-radius: 10px !important; + -ms-border-radius: 10px !important; + border-radius: 10px !important; + overflow: hidden; } -#fullscreen-cancel p, -#fullscreen-info .temp p { - line-height: 30px; - margin: 0 10px 0 0; -} -#fullscreen_progressBar { - position: absolute; +#fullscreen-progress-bar { + position: fixed; left: 0; width: 100%; height: 5px; - border-radius: 0; - background: transparent; + background: transparent !important; bottom: 0; margin: 0; + -webkit-border-radius: 0; + -ms-border-radius: 0; + border-radius: 0; } .inlineFullscreen { overflow: hidden; diff --git a/octoprint_fullscreen/static/js/fullscreen.js b/octoprint_fullscreen/static/js/fullscreen.js index 96cbf3d..0ec1dae 100644 --- a/octoprint_fullscreen/static/js/fullscreen.js +++ b/octoprint_fullscreen/static/js/fullscreen.js @@ -29,14 +29,14 @@ $(function() { } self.tempModel = parameters[0]; - self.printer = parameters[2]; - self.settings = parameters[1]; + self.printer = parameters[1]; + self.printer.fsp = {}; - self.printer.printLayerProgress = ko.observable(''); - self.printer.hasLayerProgress = ko.observable(false); + self.printer.fsp.printLayerProgress = ko.observable(''); + self.printer.fsp.hasLayerProgress = ko.observable(false); - self.printer.isFullscreen = ko.observable(false); - self.printer.fullscreen = function() { + self.printer.fsp.isFullscreen = ko.observable(false); + self.printer.fsp.fullscreen = function() { $fullscreenContainer.toggleFullScreen(); } @@ -46,18 +46,18 @@ $(function() { touchtime = new Date().getTime(); $webcam.trigger("click"); onceOpenInlineFullscreen = false; - }, 0); + }, 100); } } self.onDataUpdaterPluginMessage = function (plugin, data) { if (plugin.indexOf('DisplayLayerProgress') !== -1) { - if (!self.printer.hasLayerProgress()) { - self.printer.hasLayerProgress(true); + if (!self.printer.fsp.hasLayerProgress()) { + self.printer.fsp.hasLayerProgress(true); } if (data.currentLayer && data.totalLayer) { - self.printer.printLayerProgress(data.currentLayer + ' / ' + data.totalLayer); + self.printer.fsp.printLayerProgress(data.currentLayer + ' / ' + data.totalLayer); } } }; @@ -90,7 +90,7 @@ $(function() { } } - if(self.printer.isFullscreen()) { + if(self.printer.fsp.isFullscreen()) { $fullscreenContainer.toggleFullScreen(); } touchtime = 0; @@ -101,19 +101,21 @@ $(function() { }); $(document).bind("fullscreenchange", function() { - self.printer.isFullscreen($(document).fullScreen()); + self.printer.fsp.isFullscreen($(document).fullScreen()); }); $info.insertAfter($container); $(".print-control #job_pause").clone().appendTo("#fullscreen-bar .user-buttons").attr('id', 'job_pause_clone'); - ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-cancel").get(0)); + ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-print-info").get(0)); + ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-buttons").get(0)); + ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-progress-bar").get(0)); } OCTOPRINT_VIEWMODELS.push({ construct: FullscreenViewModel, - dependencies: ["temperatureViewModel", "settingsViewModel", "printerStateViewModel"], + dependencies: ["temperatureViewModel", "printerStateViewModel"], optional: [], - elements: ["#fullscreen-info"] + elements: ["#fullscreen-tool-info"] }); }); diff --git a/octoprint_fullscreen/templates/fullscreen.jinja2 b/octoprint_fullscreen/templates/fullscreen.jinja2 index d9c8447..f01de35 100644 --- a/octoprint_fullscreen/templates/fullscreen.jinja2 +++ b/octoprint_fullscreen/templates/fullscreen.jinja2 @@ -1,31 +1,39 @@
-
-
- -

- -

-
+
+
+ +

+ +

+
+ -
-
-

{{ _('Print Time') }}:

-

{{ _('Print Time Left') }}:

-

{{ _('Layer') }}:

-
-
-
-
+
+
+

{{ _('Print Time') }}:

+

{{ _('Print Time Left') }}:

+

{{ _('Layer') }}:

+
+
+ - -
-
+ +
+
+
+
+ + + +
+
+