Fix for #33 this plugin was not compatible with the Themeify-plugin

octoprint_customControl/__init__.py

@@ -38,7 +38,7 @@ class CustomControlPlugin(octoprint.plugin.SettingsPlugin,
                 "js/customControl.js",
                 "js/customControlDialog.js",
             ],
-            css=["css/customControls.css"],
+            css=["css/customControls.min.css"],
             less=["less/customControls.less"]
         )
 

octoprint_customControl/static/css/customControls.css

@@ -1,40 +1,40 @@
-#customControls .innerSortable {
+#settings_plugin_customControl .innerSortable {
   width: 100%;
   min-height: 50px;
 }
-#customControls .custom_section_horizontal > .custom_control {
+.customControlEditor .custom_section_horizontal > .custom_control {
   display: inline-block;
 }
-#customControls .custom_section_vertical > .custom_control {
+.customControlEditor .custom_section_vertical > .custom_control {
   display: block;
 }
-#customControls .custom_section_vertical_section {
+.customControlEditor .custom_section_vertical_section {
   min-width: 15px;
   min-height: 15px;
   border: 1px dashed #000000;
 }
-#customControls .slider.slider-disabled .slider-track {
+.customControlEditor .slider.slider-disabled .slider-track {
   cursor: default !important;
 }
-#customControls input[disabled] {
+.customControlEditor input[disabled] {
   background: #fff !important;
   cursor: text !important;
 }
-#customControls .btn-group {
+.customControlEditor .btn-group {
   margin-bottom: 10px;
 }
-#customControls .btn-group.distance > .btn {
+.customControlEditor .btn-group.distance > .btn {
   width: 43px;
   padding: 3px 0;
   height: 30px;
 }
-#customControls .slider-handle {
+.customControlEditor .slider-handle {
   width: 14px;
   height: 14px;
   margin-left: -7px;
   margin-top: -3px;
 }
-#customControls .custom_section h1 {
+.customControlEditor .custom_section h1 {
   cursor: pointer;
   display: block;
   width: 100%;
@@ -47,7 +47,7 @@
   border-bottom: 1px solid #E5E5E5;
   font-weight: normal;
 }
-#customControls .custom_control .slider {
+.customControlEditor .custom_control .slider {
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 2px;

octoprint_customControl/static/css/customControls.min.css

@@ -0,0 +1 @@
+#settings_plugin_customControl .innerSortable{width:100%;min-height:50px}.customControlEditor .custom_section_horizontal>.custom_control{display:inline-block}.customControlEditor .custom_section_vertical>.custom_control{display:block}.customControlEditor .custom_section_vertical_section{min-width:15px;min-height:15px;border:1px dashed #000}.customControlEditor .slider.slider-disabled .slider-track{cursor:default!important}.customControlEditor input[disabled]{background:#fff!important;cursor:text!important}.customControlEditor .btn-group{margin-bottom:10px}.customControlEditor .btn-group.distance>.btn{width:43px;padding:3px 0;height:30px}.customControlEditor .slider-handle{width:14px;height:14px;margin-left:-7px;margin-top:-3px}.customControlEditor .custom_section h1{cursor:pointer;display:block;width:100%;padding:0;margin-bottom:10px;font-size:21px;line-height:40px;color:#333;border:0;border-bottom:1px solid #E5E5E5;font-weight:400}.customControlEditor .custom_control .slider{margin-left:10px;margin-right:10px;margin-bottom:2px}

octoprint_customControl/static/less/customControls.less

@@ -1,9 +1,11 @@
-#customControls {
+#settings_plugin_customControl {
     .innerSortable {
         width: 100%;
         min-height: 50px;
     }
+}
 
+.customControlEditor {
     .custom_section_horizontal > .custom_control {
         display:inline-block;
     }

octoprint_customControl/templates/customControl_hookedsettings.jinja2

@@ -4,7 +4,7 @@
 </div>
 
 <!-- "width: 588px" to be the same as teh real Control tab-->						
-<div class="innerSortable" style="width: 588px; clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
+<div class="customControlEditor innerSortable" style="width: 588px; clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
 
 <ul id="controlContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
 	<li>