Skip to content

Commit

Permalink
make sidebar collapsible (#201)
Browse files Browse the repository at this point in the history 
* make sidebar collapsible

remove unnecessary overflow:visible (#sidebar_plugin_SpoolManager) css rule because it overrides the visibility setting in the .collapse class.

* use a modal dialog for sidebar spool selection

* disable the pointer style cursor when hovering over color preview (sidebar)

- set cursor to auto because the color preview is not clickable

* change css margin of the selected spools list (sidebar)

- results in a more balanced whitespace distribution

* refactoring: formatting html

* show vendors in sidebar

fixes #190

* in sidebar: remove "-" when material is missing

* fix sidebar css to better work with UI customization plugins

Co-authored-by: OllisGit <[email protected]>
  • Loading branch information
@TiziG @OllisGit
TiziG and OllisGit authored Oct 18, 2021
1 parent 00293e9 commit 0715e5f
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 62 deletions.
30 changes: 26 additions & 4 deletions octoprint_SpoolManager/static/css/SpoolManager.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,28 @@
#sidebar_select_spool_dialog .modal-body {
display: flex;
flex-direction: column;
}

#sidebar_select_spool_dialog .modal-body > *:nth-last-child(n+2) {
margin-bottom: 0.5em;
}

#sidebar_select_spool_dialog .filter {
display: flex;
}

#sidebar_select_spool_dialog .filter > *:nth-last-child(n+2) {
margin-right: 1.5em;
}

#sidebar_select_spool_dialog .table {
margin-bottom: 0;
}

#sidebar_select_spool_dialog .spool-label {
display: flex;
align-items: center;
}

.control-group.no-bottom-gap {
margin-bottom:3px
Expand All @@ -9,14 +33,11 @@
height: 100px;
}

#sidebar_plugin_SpoolManager.collapse.in {
overflow: visible;
}
#selectedSpools > div {
display: flex;
align-items: baseline;
min-height: 1.8em;
margin-bottom: 5px;
margin-top: 5px;
}
#selectedSpools > div > * {
flex-grow: 0;
Expand All @@ -31,6 +52,7 @@
margin-right: 0;
vertical-align: middle;
margin-top: -3px;
cursor: auto;
}
#selectedSpools > div > div > .btn-group {
vertical-align: middle;
Expand Down
22 changes: 21 additions & 1 deletion octoprint_SpoolManager/static/js/SpoolManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ $(function() {
self.printerProfilesViewModel = parameters[4];

self.pluginSettings = null;
self.sidebarSelectSpoolDialog = undefined;

self.apiClient = new SpoolManagerAPIClient(PLUGIN_ID, BASEURL);
self.spoolDialog = new SpoolManagerEditSpoolDialog();
Expand Down Expand Up @@ -341,6 +342,24 @@ $(function() {
self.selectSpoolForSidebar(toolIndex, null);
}

self.onStartup = function () {
self.sidebarSelectSpoolDialog = $("#sidebar_select_spool_dialog");
self.sidebarSelectSpoolModalToolIndex = ko.observable(null)
self.sidebarSelectSpoolDialog.on("shown", function () {
console.log("onShown");
})
}

self.sidebarSelectSpoolFromDialog = function (spoolItem) {
self.sidebarSelectSpoolDialog.modal("hide");
self.selectSpoolForSidebar(self.sidebarSelectSpoolModalToolIndex(), spoolItem);
}

self.sidebarOpenSelectSpoolDialog = function(toolIndex, item){
self.sidebarSelectSpoolModalToolIndex(toolIndex);
self.sidebarSelectSpoolDialog.modal("show");
}

self.loadSpoolsForSidebar = function() {
// update filament list length
var currentProfileData = self.settingsViewModel.printerProfiles.currentProfileData(),
Expand Down Expand Up @@ -995,7 +1014,8 @@ $('.dropdown-menu.keep-open').click(function(e) {
document.getElementById("settings_spoolmanager"),
document.getElementById("tab_spoolOverview"),
document.getElementById("modal-dialogs-spoolManager"),
document.getElementById("sidebar_spool_select")
document.getElementById("sidebar_spool_select"),
document.getElementById("sidebar_select_spool_dialog")
]
});
});
107 changes: 50 additions & 57 deletions octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,56 @@
<div id="sidebar_spool_select" class="control-group">
<!-- TODO support for multiple spools for multiple tools -->
{% include "SpoolManager_sidebar_dialogs.jinja2" %}

<div id="sidebar_spool_select">
<!-- TODO support for multiple spools for multiple tools -->

<div id="selectedSpools" data-bind="foreach: selectedSpoolsForSidebar">
<div>
<!-- ko if: $parent.selectedSpoolsForSidebar().length > 1 -->
<div>
<b><span data-bind="text: $index"></span>:</b>
</div>
<!-- /ko -->
<!-- ko ifnot: $data -->
<div class="spool-label">
No spool selected
</div>
<!-- /ko -->
<!-- ko if: $data -->
<div>
<span class="color-preview" data-bind="style: {'background-color': color}, attr: { title: colorName }"></span>
</div>
<div class="spool-label">
<span data-bind="text: material"></span> - <span data-bind="text: displayName"></span>
<span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}" class="spool-remaining" title="Remaining weight"></span>
</div>
<!-- /ko -->
<div>
<div class="btn-group">
<!-- ko if: $data -->
<button class="btn btn-mini" data-bind="click: $parent.editSpoolFromSidebar.bind($data, $index())" title="Edit Spool"><span class="icon-edit"></span></button>
<button class="btn btn-mini" data-bind="click: $parent.deselectSpoolForSidebar.bind($data, $index())" title="Deselect Spool"><span class="icon-remove"></span></button>
<div>
<!-- ko if: $parent.selectedSpoolsForSidebar().length > 1 -->
<div>
<b><span data-bind="text: $index"></span>:</b>
</div>
<!-- /ko -->
<!-- ko ifnot: $data -->
<div class="spool-label">
No spool selected
</div>
<div>
<div class="btn-group">
<button class="btn btn-mini"
data-bind="click: $parent.sidebarOpenSelectSpoolDialog.bind($data, $index())"
title="Change Spool"><span class="icon-refresh"></span></button>
</div>
</div>
<!-- /ko -->
<!-- ko if: $data -->
<div>
<span class="color-preview"
data-bind="style: {'background-color': color}, attr: { title: colorName }"></span>
</div>
<div class="spool-label">
<!-- ko if: material -->
<span data-bind="text: material"></span> -
<!-- /ko -->

<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>

<ul class="dropdown-menu dropdown-menu-right" data-bind="foreach: $parent.allSpoolsForSidebar">
<li>
<a href="#" data-bind="click: $root.selectSpoolForSidebar.bind($data, $parentContext.$index())">
<span class="color-preview" data-bind="style: {'background-color': $data.color}, attr: { title: $data.colorName }"></span>
<span class="filament-label">
<span><span data-bind="text: $data.material"></span> - <span data-bind="text: $data.displayName">FirstSpool</span></span>
<span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}" ></span>
</span>
</a>
</li>
</ul>

<span data-bind="text: displayName"></span>
<!-- ko if: vendor -->
(<span data-bind="text: vendor"></span>)
<!-- /ko -->
<span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"
class="spool-remaining" title="Remaining weight"></span>
</div>
</div>
</div>
</div>
<nobr>
<!-- Not needed autorelaod implemented <a href="#" data-bind="click: loadSpoolsForSidebar" title="Reload spools entries"><span class="icon-refresh"></span></a>-->
<div>
<span ><input style="vertical-align:text-bottom" type="checkbox" data-bind="checked: pluginSettings.hideEmptySpoolsInSidebar" > Hide empty spools</span>
<span ><input style="vertical-align:text-bottom" type="checkbox" data-bind="checked: pluginSettings.hideInactiveSpoolsInSidebar" > Hide inactive spools</span>
<div>
<div class="btn-group">
<button class="btn btn-mini" data-bind="click: $parent.editSpoolFromSidebar.bind($data, $index())"
title="Edit Spool"><span class="icon-edit"></span></button>
<button class="btn btn-mini"
data-bind="click: $parent.deselectSpoolForSidebar.bind($data, $index())"
title="Deselect Spool"><span class="icon-remove"></span></button>
<button class="btn btn-mini"
data-bind="click: $parent.sidebarOpenSelectSpoolDialog.bind($data, $index())"
title="Change Spool"><span class="icon-refresh"></span></button>
</div>
</div>
<!-- /ko -->
</div>
</nobr>

<div>
<small>Order: last used.</small>
</div>


</div>
</div>
47 changes: 47 additions & 0 deletions octoprint_SpoolManager/templates/SpoolManager_sidebar_dialogs.jinja2
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<div id="sidebar_select_spool_dialog" class="modal hide fade-in">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3>Select Spool</h3>
</div>
<div class="modal-body">
<div>
<p>Please select the spool for tool <span data-bind="text: sidebarSelectSpoolModalToolIndex()"></span></p>
<div class="filter">
<label>
<input style="vertical-align:baseline" type="checkbox"
data-bind="checked: pluginSettings.hideEmptySpoolsInSidebar">
Hide empty spools
</label>
<label>
<input style="vertical-align:baseline" type="checkbox"
data-bind="checked: pluginSettings.hideInactiveSpoolsInSidebar">
Hide inactive spools
</label>
</div>
</div>
<table class="table table-hover table-bordered">
<tbody data-bind="foreach: allSpoolsForSidebar()">
<tr class="entry clickable" data-bind="click: $root.sidebarSelectSpoolFromDialog.bind($data)">
<td class="spool-label">
<span class="color-preview"
data-bind="style: {'background-color': color}, attr: { title: colorName }"></span>
<span>
<!-- ko if: material -->
<span data-bind="text: material"></span> -
<!-- /ko -->
<span data-bind="text: displayName"></span>
<!-- ko if: vendor -->
(<span data-bind="text: vendor"></span>)
<!-- /ko -->
<span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"
class="spool-remaining" title="Remaining weight"></span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>
</div>
</div>

0 comments on commit 0715e5f

Please sign in to comment.