pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wider scrollbars & no fade out

Browse source 
Increased scrollbar width of file list and plugin repository list to
10px (from 5px). Fixed scroll bar hiding itself on initialization due to
alwaysVisible not properly persisting the initial binding.

Enhance knockout binding syntax for slimScrolledForeach: slimscroll
initialization parameters may now be provided during data binding via
the additional slimscroll property accepted as part of the extended
foreach syntax, e.g.

slimScrolledForEach: {data: ..., slimscroll: {alwaysVisible: true, ...}}

Implements #2111
This commit is contained in:
Gina Häußge 2017-10-13 17:50:21 +02:00
parent af4f97f2df
commit fd53f47f86
9 changed files with 58 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/octoprint/plugins/pluginmanager/static/css/pluginmanager.css
View file

@ -1 +1 @@
table td.settings_plugin_plugin_manager_plugins_name,table th.settings_plugin_plugin_manager_plugins_name{text-overflow:ellipsis;text-align:left}table td.settings_plugin_plugin_manager_plugins_actions,table th.settings_plugin_plugin_manager_plugins_actions{text-align:center;width:80px}table td.settings_plugin_plugin_manager_plugins_actions a,table th.settings_plugin_plugin_manager_plugins_actions a{text-decoration:none;color:#000}table td.settings_plugin_plugin_manager_plugins_actions a.disabled,table th.settings_plugin_plugin_manager_plugins_actions a.disabled{color:#ccc;cursor:default}#settings_plugin_pluginmanager_repositorydialog .slimScrollDiv{margin-bottom:20px}#settings_plugin_pluginmanager_repositorydialog h4{position:relative}#settings_plugin_pluginmanager_repositorydialog h4 a.dropdown-toggle{color:inherit;text-decoration:none;font-size:14px}#settings_plugin_pluginmanager_repositorydialog h4 ul.dropdown-menu{font-size:14px}#settings_plugin_pluginmanager_repositorydialog .form-search{text-align:center;margin-bottom:5px!important}#settings_plugin_pluginmanager_repositorydialog .form-inline{padding:5px 10px 5px 5px;margin-bottom:0}#settings_plugin_pluginmanager_repositorydialog .form-inline .help-block{margin-bottom:0;font-size:85%}#settings_plugin_pluginmanager_repositorydialog #settings_plugin_pluginmanager_repositorydialog_unavailable{overflow:hidden;width:100%;height:300px;background-image:url(../img/repo_unavailable.png);text-align:center;display:table}#settings_plugin_pluginmanager_repositorydialog #settings_plugin_pluginmanager_repositorydialog_unavailable div{display:table-cell;vertical-align:middle}#settings_plugin_pluginmanager_repositorydialog #settings_plugin_pluginmanager_repositorydialog_list{overflow:hidden;width:auto;height:300px}#settings_plugin_pluginmanager_repositorydialog #settings_plugin_pluginmanager_repositorydialog_list .entry{border-bottom:1px solid #ddd;padding:5px 10px 5px 5px}#settings_plugin_pluginmanager_workingdialog_output .message{font-weight:700}#settings_plugin_pluginmanager_workingdialog_output .error{font-weight:700;color:#900}#settings_plugin_pluginmanager_workingdialog_output .stdout{color:#333}#settings_plugin_pluginmanager_workingdialog_output .stderr{color:#900}#settings_plugin_pluginmanager_workingdialog_output .call{color:#009}
table td.settings_plugin_plugin_manager_plugins_name,table th.settings_plugin_plugin_manager_plugins_name{text-overflow:ellipsis;text-align:left}table td.settings_plugin_plugin_manager_plugins_actions,table th.settings_plugin_plugin_manager_plugins_actions{text-align:center;width:80px}table td.settings_plugin_plugin_manager_plugins_actions a,table th.settings_plugin_plugin_manager_plugins_actions a{text-decoration:none;color:#000}table td.settings_plugin_plugin_manager_plugins_actions a.disabled,table th.settings_plugin_plugin_manager_plugins_actions a.disabled{color:#ccc;cursor:default}#settings_plugin_pluginmanager_repositorydialog .slimScrollDiv{margin-bottom:20px;padding-right:12px}#settings_plugin_pluginmanager_repositorydialog h4{position:relative}#settings_plugin_pluginmanager_repositorydialog h4 a.dropdown-toggle{color:inherit;text-decoration:none;font-size:14px}#settings_plugin_pluginmanager_repositorydialog h4 ul.dropdown-menu{font-size:14px}#settings_plugin_pluginmanager_repositorydialog .form-search{text-align:center;margin-bottom:5px!important}#settings_plugin_pluginmanager_repositorydialog .form-inline{padding:5px 10px 5px 5px;margin-bottom:0}#settings_plugin_pluginmanager_repositorydialog .form-inline .help-block{margin-bottom:0;font-size:85%}#settings_plugin_pluginmanager_repositorydialog #settings_plugin_pluginmanager_repositorydialog_unavailable{overflow:hidden;width:100%;height:300px;background-image:url(../img/repo_unavailable.png);text-align:center;display:table}#settings_plugin_pluginmanager_repositorydialog #settings_plugin_pluginmanager_repositorydialog_unavailable div{display:table-cell;vertical-align:middle}#settings_plugin_pluginmanager_repositorydialog #settings_plugin_pluginmanager_repositorydialog_list{overflow:hidden;width:auto;height:300px}#settings_plugin_pluginmanager_repositorydialog #settings_plugin_pluginmanager_repositorydialog_list .entry{border-bottom:1px solid #ddd;padding:5px 10px 5px 5px}#settings_plugin_pluginmanager_workingdialog_output .message{font-weight:700}#settings_plugin_pluginmanager_workingdialog_output .error{font-weight:700;color:#900}#settings_plugin_pluginmanager_workingdialog_output .stdout{color:#333}#settings_plugin_pluginmanager_workingdialog_output .stderr{color:#900}#settings_plugin_pluginmanager_workingdialog_output .call{color:#009}

9
src/octoprint/plugins/pluginmanager/static/js/pluginmanager.js
View file

@ -1077,15 +1077,6 @@ $(function() {
self.workingDialog = $("#settings_plugin_pluginmanager_workingdialog");
self.workingOutput = $("#settings_plugin_pluginmanager_workingdialog_output");
self.repositoryDialog = $("#settings_plugin_pluginmanager_repositorydialog");
$("#settings_plugin_pluginmanager_repositorydialog_list").slimScroll({
height: "306px",
size: "5px",
distance: "0",
railVisible: true,
alwaysVisible: true,
scrollBy: "102px"
});
};
self.onDataUpdaterPluginMessage = function(plugin, data) {

3
src/octoprint/plugins/pluginmanager/static/less/pluginmanager.less
View file

@ -24,7 +24,10 @@ table {
#settings_plugin_pluginmanager_repositorydialog {
.slimScrollDiv {
@scrollBar: 10px;
margin-bottom: 20px;
padding-right: @scrollBar + 2px;
}
h4 {

2
src/octoprint/plugins/pluginmanager/templates/pluginmanager_settings.jinja2
View file

@ -155,7 +155,7 @@
</form>
<div data-bind="visible: repositoryAvailable()">
<div id="settings_plugin_pluginmanager_repositorydialog_list" data-bind="slimScrolledForeach: repositoryplugins.paginatedItems">
<div id="settings_plugin_pluginmanager_repositorydialog_list" data-bind="slimScrolledForeach: {data: repositoryplugins.paginatedItems, slimscroll: {height: '306px', size: '10px', distance: 0, railVisible: true, alwaysVisible: true, scrollBy: '102px'} }">
<div class="entry">
<div class="row-fluid">
<div class="span9">

2
src/octoprint/static/css/octoprint.css
View file

File diff suppressed because one or more lines are too long

54
src/octoprint/static/js/app/bindings/slimscrolledforeach.js
View file

@ -1,17 +1,57 @@
ko.bindingHandlers.slimScrolledForeach = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
return ko.bindingHandlers.foreach.init(element, valueAccessor(), allBindings, viewModel, bindingContext);
makeTemplateValueAccessor: function(valueAccessor) {
var modelValue = valueAccessor(),
unwrappedValue = ko.utils.peekObservable(modelValue), // Unwrap without setting a dependency here
result, slimscroll;
// If unwrappedValue is the array, pass in the wrapped value on its own
// The value will be unwrapped and tracked within the template binding
// (See https://github.com/SteveSanderson/knockout/issues/523)
if ((!unwrappedValue) || typeof unwrappedValue.length === "number") {
result = { 'foreach': modelValue, 'templateEngine': ko.nativeTemplateEngine.instance };
slimscroll = {};
} else {
// If unwrappedValue.data is the array, preserve all relevant options and unwrap again value so we get updates
ko.utils.unwrapObservable(modelValue);
result = {
'foreach': unwrappedValue['data'],
'as': unwrappedValue['as'],
'includeDestroyed': unwrappedValue['includeDestroyed'],
'afterAdd': unwrappedValue['afterAdd'],
'beforeRemove': unwrappedValue['beforeRemove'],
'afterRender': unwrappedValue['afterRender'],
'beforeMove': unwrappedValue['beforeMove'],
'afterMove': unwrappedValue['afterMove'],
'templateEngine': ko.nativeTemplateEngine.instance
};
slimscroll = unwrappedValue['slimscroll'];
}
return {accessor: function() { return result; }, slimscroll: slimscroll};
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
slimscroll: function(element, options) {
options = options || {};
setTimeout(function() {
if (element.nodeName == "#comment") {
if (element.nodeName === "#comment") {
// foreach is bound to a virtual element
$(element.parentElement).slimScroll({scrollBy: 0});
$(element.parentElement).slimScroll(options);
} else {
$(element).slimScroll({scrollBy: 0});
$(element).slimScroll(options);
}
}, 10);
return ko.bindingHandlers.foreach.update(element, valueAccessor(), allBindings, viewModel, bindingContext);
},
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var prepped = ko.bindingHandlers["slimScrolledForeach"].makeTemplateValueAccessor(valueAccessor);
ko.bindingHandlers["slimScrolledForeach"].slimscroll(element, prepped.slimscroll);
return ko.bindingHandlers['template']['init'](element, prepped.accessor);
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var prepped = ko.bindingHandlers["slimScrolledForeach"].makeTemplateValueAccessor(valueAccessor);
var options = $.extend(prepped.slimscroll, {scrollBy: 0});
ko.bindingHandlers["slimScrolledForeach"].slimscroll(element, options);
return ko.bindingHandlers['template']['update'](element, prepped.accessor, allBindings, viewModel, bindingContext);
}
};
ko.virtualElements.allowedBindings.slimScrolledForeach = true;

12
src/octoprint/static/js/app/viewmodels/files.js
View file

@ -66,6 +66,7 @@ $(function() {
self.dropZoneBackground = undefined;
self.dropZoneLocalBackground = undefined;
self.dropZoneSdBackground = undefined;
self.listElement = undefined;
self.ignoreUpdatedFilesEvent = false;
@ -292,7 +293,7 @@ $(function() {
if (entryElement) {
// scroll to uploaded element
var entryOffset = entryElement.offsetTop;
$(".gcode_files").slimScroll({
self.listElement.slimScroll({
scrollTo: entryOffset + "px"
});
@ -790,14 +791,7 @@ $(function() {
}
});
$(".gcode_files").slimScroll({
height: "306px",
size: "5px",
distance: "0",
railVisible: true,
alwaysVisible: true,
scrollBy: "102px"
});
self.listElement = $(".gcode_files");
self.addFolderDialog = $("#add_folder_dialog");
self.addFolderDialog.on("shown", function() {

2
src/octoprint/static/less/octoprint.less
View file

@ -666,7 +666,7 @@ ul.dropdown-menu li a {
#files {
.gcode_files {
@padding: 5px;
@scrollBar: 5px;
@scrollBar: 10px;
@line-height: 20px;
padding-right: @scrollBar + 2px;

2
src/octoprint/templates/sidebar/files.jinja2
View file

@ -7,7 +7,7 @@
<div class="back-path"><small class="muted">{{ _('Currently in') }} <span data-bind="text: currentPath"></span></small></div>
</div>
<!-- ko slimScrolledForeach: filesAndFolders -->
<!-- ko slimScrolledForeach: {data: filesAndFolders, slimscroll: {height: "306px", size: "10px", distance: 0, railVisible: true, alwaysVisible: true, scrollBy: "102px"} } -->
<div class="entry" data-bind="attr: { id: $root.getEntryId($data) }, template: { name: $root.templateFor($data), data: $data }, css: $data.type"></div>
<!-- /ko -->