Skip to content

Commit 0715e5f

Browse files
TiziGOllisGit
TiziG
and
OllisGit
authoredOct 18, 2021
make sidebar collapsible (#201)
* 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]>
·
travis-build1.5.0
1 parent 00293e9 commit 0715e5f

File tree

4 files changed

+144
-62
lines changed

4 files changed

+144
-62
lines changed
 

‎octoprint_SpoolManager/static/css/SpoolManager.css

+26-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,28 @@
1+
#sidebar_select_spool_dialog .modal-body {
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
6+
#sidebar_select_spool_dialog .modal-body > *:nth-last-child(n+2) {
7+
margin-bottom: 0.5em;
8+
}
9+
10+
#sidebar_select_spool_dialog .filter {
11+
display: flex;
12+
}
113

14+
#sidebar_select_spool_dialog .filter > *:nth-last-child(n+2) {
15+
margin-right: 1.5em;
16+
}
17+
18+
#sidebar_select_spool_dialog .table {
19+
margin-bottom: 0;
20+
}
21+
22+
#sidebar_select_spool_dialog .spool-label {
23+
display: flex;
24+
align-items: center;
25+
}
226

327
.control-group.no-bottom-gap {
428
margin-bottom:3px
@@ -9,14 +33,11 @@
933
height: 100px;
1034
}
1135

12-
#sidebar_plugin_SpoolManager.collapse.in {
13-
overflow: visible;
14-
}
1536
#selectedSpools > div {
1637
display: flex;
1738
align-items: baseline;
1839
min-height: 1.8em;
19-
margin-bottom: 5px;
40+
margin-top: 5px;
2041
}
2142
#selectedSpools > div > * {
2243
flex-grow: 0;
@@ -31,6 +52,7 @@
3152
margin-right: 0;
3253
vertical-align: middle;
3354
margin-top: -3px;
55+
cursor: auto;
3456
}
3557
#selectedSpools > div > div > .btn-group {
3658
vertical-align: middle;

‎octoprint_SpoolManager/static/js/SpoolManager.js

+21-1
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ $(function() {
6868
self.printerProfilesViewModel = parameters[4];
6969

7070
self.pluginSettings = null;
71+
self.sidebarSelectSpoolDialog = undefined;
7172

7273
self.apiClient = new SpoolManagerAPIClient(PLUGIN_ID, BASEURL);
7374
self.spoolDialog = new SpoolManagerEditSpoolDialog();
@@ -341,6 +342,24 @@ $(function() {
341342
self.selectSpoolForSidebar(toolIndex, null);
342343
}
343344

345+
self.onStartup = function () {
346+
self.sidebarSelectSpoolDialog = $("#sidebar_select_spool_dialog");
347+
self.sidebarSelectSpoolModalToolIndex = ko.observable(null)
348+
self.sidebarSelectSpoolDialog.on("shown", function () {
349+
console.log("onShown");
350+
})
351+
}
352+
353+
self.sidebarSelectSpoolFromDialog = function (spoolItem) {
354+
self.sidebarSelectSpoolDialog.modal("hide");
355+
self.selectSpoolForSidebar(self.sidebarSelectSpoolModalToolIndex(), spoolItem);
356+
}
357+
358+
self.sidebarOpenSelectSpoolDialog = function(toolIndex, item){
359+
self.sidebarSelectSpoolModalToolIndex(toolIndex);
360+
self.sidebarSelectSpoolDialog.modal("show");
361+
}
362+
344363
self.loadSpoolsForSidebar = function() {
345364
// update filament list length
346365
var currentProfileData = self.settingsViewModel.printerProfiles.currentProfileData(),
@@ -995,7 +1014,8 @@ $('.dropdown-menu.keep-open').click(function(e) {
9951014
document.getElementById("settings_spoolmanager"),
9961015
document.getElementById("tab_spoolOverview"),
9971016
document.getElementById("modal-dialogs-spoolManager"),
998-
document.getElementById("sidebar_spool_select")
1017+
document.getElementById("sidebar_spool_select"),
1018+
document.getElementById("sidebar_select_spool_dialog")
9991019
]
10001020
});
10011021
});

‎octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2

+50-57
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,56 @@
1-
<div id="sidebar_spool_select" class="control-group">
2-
<!-- TODO support for multiple spools for multiple tools -->
1+
{% include "SpoolManager_sidebar_dialogs.jinja2" %}
2+
3+
<div id="sidebar_spool_select">
4+
<!-- TODO support for multiple spools for multiple tools -->
35

46
<div id="selectedSpools" data-bind="foreach: selectedSpoolsForSidebar">
5-
<div>
6-
<!-- ko if: $parent.selectedSpoolsForSidebar().length > 1 -->
7-
<div>
8-
<b><span data-bind="text: $index"></span>:</b>
9-
</div>
10-
<!-- /ko -->
11-
<!-- ko ifnot: $data -->
12-
<div class="spool-label">
13-
No spool selected
14-
</div>
15-
<!-- /ko -->
16-
<!-- ko if: $data -->
17-
<div>
18-
<span class="color-preview" data-bind="style: {'background-color': color}, attr: { title: colorName }"></span>
19-
</div>
20-
<div class="spool-label">
21-
<span data-bind="text: material"></span> - <span data-bind="text: displayName"></span>
22-
<span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}" class="spool-remaining" title="Remaining weight"></span>
23-
</div>
24-
<!-- /ko -->
25-
<div>
26-
<div class="btn-group">
27-
<!-- ko if: $data -->
28-
<button class="btn btn-mini" data-bind="click: $parent.editSpoolFromSidebar.bind($data, $index())" title="Edit Spool"><span class="icon-edit"></span></button>
29-
<button class="btn btn-mini" data-bind="click: $parent.deselectSpoolForSidebar.bind($data, $index())" title="Deselect Spool"><span class="icon-remove"></span></button>
7+
<div>
8+
<!-- ko if: $parent.selectedSpoolsForSidebar().length > 1 -->
9+
<div>
10+
<b><span data-bind="text: $index"></span>:</b>
11+
</div>
12+
<!-- /ko -->
13+
<!-- ko ifnot: $data -->
14+
<div class="spool-label">
15+
No spool selected
16+
</div>
17+
<div>
18+
<div class="btn-group">
19+
<button class="btn btn-mini"
20+
data-bind="click: $parent.sidebarOpenSelectSpoolDialog.bind($data, $index())"
21+
title="Change Spool"><span class="icon-refresh"></span></button>
22+
</div>
23+
</div>
24+
<!-- /ko -->
25+
<!-- ko if: $data -->
26+
<div>
27+
<span class="color-preview"
28+
data-bind="style: {'background-color': color}, attr: { title: colorName }"></span>
29+
</div>
30+
<div class="spool-label">
31+
<!-- ko if: material -->
32+
<span data-bind="text: material"></span> -
3033
<!-- /ko -->
31-
32-
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
33-
34-
<ul class="dropdown-menu dropdown-menu-right" data-bind="foreach: $parent.allSpoolsForSidebar">
35-
<li>
36-
<a href="#" data-bind="click: $root.selectSpoolForSidebar.bind($data, $parentContext.$index())">
37-
<span class="color-preview" data-bind="style: {'background-color': $data.color}, attr: { title: $data.colorName }"></span>
38-
<span class="filament-label">
39-
<span><span data-bind="text: $data.material"></span> - <span data-bind="text: $data.displayName">FirstSpool</span></span>
40-
<span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}" ></span>
41-
</span>
42-
</a>
43-
</li>
44-
</ul>
45-
34+
<span data-bind="text: displayName"></span>
35+
<!-- ko if: vendor -->
36+
(<span data-bind="text: vendor"></span>)
37+
<!-- /ko -->
38+
<span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"
39+
class="spool-remaining" title="Remaining weight"></span>
4640
</div>
47-
</div>
48-
</div>
49-
</div>
50-
<nobr>
51-
<!-- Not needed autorelaod implemented <a href="#" data-bind="click: loadSpoolsForSidebar" title="Reload spools entries"><span class="icon-refresh"></span></a>-->
52-
<div>
53-
<span ><input style="vertical-align:text-bottom" type="checkbox" data-bind="checked: pluginSettings.hideEmptySpoolsInSidebar" > Hide empty spools</span>
54-
<span ><input style="vertical-align:text-bottom" type="checkbox" data-bind="checked: pluginSettings.hideInactiveSpoolsInSidebar" > Hide inactive spools</span>
41+
<div>
42+
<div class="btn-group">
43+
<button class="btn btn-mini" data-bind="click: $parent.editSpoolFromSidebar.bind($data, $index())"
44+
title="Edit Spool"><span class="icon-edit"></span></button>
45+
<button class="btn btn-mini"
46+
data-bind="click: $parent.deselectSpoolForSidebar.bind($data, $index())"
47+
title="Deselect Spool"><span class="icon-remove"></span></button>
48+
<button class="btn btn-mini"
49+
data-bind="click: $parent.sidebarOpenSelectSpoolDialog.bind($data, $index())"
50+
title="Change Spool"><span class="icon-refresh"></span></button>
51+
</div>
52+
</div>
53+
<!-- /ko -->
5554
</div>
56-
</nobr>
57-
58-
<div>
59-
<small>Order: last used.</small>
60-
</div>
61-
62-
55+
</div>
6356
</div>

‎octoprint_SpoolManager/templates/SpoolManager_sidebar_dialogs.jinja2

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<div id="sidebar_select_spool_dialog" class="modal hide fade-in">
2+
<div class="modal-header">
3+
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
4+
<h3>Select Spool</h3>
5+
</div>
6+
<div class="modal-body">
7+
<div>
8+
<p>Please select the spool for tool <span data-bind="text: sidebarSelectSpoolModalToolIndex()"></span></p>
9+
<div class="filter">
10+
<label>
11+
<input style="vertical-align:baseline" type="checkbox"
12+
data-bind="checked: pluginSettings.hideEmptySpoolsInSidebar">
13+
Hide empty spools
14+
</label>
15+
<label>
16+
<input style="vertical-align:baseline" type="checkbox"
17+
data-bind="checked: pluginSettings.hideInactiveSpoolsInSidebar">
18+
Hide inactive spools
19+
</label>
20+
</div>
21+
</div>
22+
<table class="table table-hover table-bordered">
23+
<tbody data-bind="foreach: allSpoolsForSidebar()">
24+
<tr class="entry clickable" data-bind="click: $root.sidebarSelectSpoolFromDialog.bind($data)">
25+
<td class="spool-label">
26+
<span class="color-preview"
27+
data-bind="style: {'background-color': color}, attr: { title: colorName }"></span>
28+
<span>
29+
<!-- ko if: material -->
30+
<span data-bind="text: material"></span> -
31+
<!-- /ko -->
32+
<span data-bind="text: displayName"></span>
33+
<!-- ko if: vendor -->
34+
(<span data-bind="text: vendor"></span>)
35+
<!-- /ko -->
36+
<span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"
37+
class="spool-remaining" title="Remaining weight"></span>
38+
</span>
39+
</td>
40+
</tr>
41+
</tbody>
42+
</table>
43+
</div>
44+
<div class="modal-footer">
45+
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>
46+
</div>
47+
</div>

0 commit comments

Comments
 (0)
Please sign in to comment.