updated instances dropdown

SE/se-lib/Route/ViewObject.php

@@ -157,14 +157,13 @@ class Route_ViewObject extends Route_ViewTableAjax {
 							'ID' => $row['ID'],
 							'DESC' => $row['DESC'],
 							'TYPE' => $row['TYPE'],
-							'instances' => UI::h('div', ['class'=>"p5UI__dropdown-wrap"], [
+							'Typ' => UI::h('div', ['class'=>"p5UI__dropdown-wrap"], [
 								UI::h('button', [
 									// 'onClick' => "p5UI__dropdown(event, this, 'left bottom')",
 									'onClick' => "p5UI__dropdown(event, this, 'left bottom', {$jsRenderFunName}({$row['ID']}))",
 									'class' => "btn btn-xs btn-default p5UI__dropdown-btn"
 								], [
-									'<i class="glyphicon glyphicon-menu-hamburger"></i>',
-									" ustal instancje"
+									UI::h('i', ['class' => "glyphicon glyphicon-tags", 'title' => "Ustaw typ danych (instancje)"]),
 								]),
 								UI::h('div', ['class' => "p5UI__dropdown-content"]
 									, array_merge(

SE/se-lib/Route/ViewObject.php.instancesDropdown.js

@@ -166,41 +166,37 @@ var buildDropdown = function(pk) {
   )
 
   var render = function () {
-    // <div class="popover fade right in" role="tooltip" style="max-width: 600px; width: 400px; display: block; top: 281.5px; left: 68px;" id="popover623735">
-    //   <div class="arrow" style="top: 53.5px;"></div>
-    //   <div style="display:block;position:relative;">
-    //     <div class="popover-title">Więcej funkcji dla rekordu nr 163</div>
-    //     <button type="button" class="close" onclick="return hidePopover();" style="position:absolute;right:8px;top:6px;">×</button>
-    //   </div>
-    //   <div class="popover-content">
-    //     <ul class="list-unstyled popoverRowFunctions">
-    //       <li><a href="index.php?_route=TableMsgs&amp;_task=tableRow&amp;idTable=25873&amp;idRow=163" style="margin:0 2px;" title="Wiadomości" class="func_name-msgs"><span class="glyphicon glyphicon-envelope"></span> Wiadomości</a></li>
-    //       <li><a href="#HIST/163" style="margin:0 2px;" title="Historia" class="func_name-hist"><span class="glyphicon glyphicon-book"></span> Historia</a></li>
-    //     </ul>
-    //     <div class="popoverCellContent" style="white-space:normal">
-    //       <p class="text-muted">Pobieranie funkcji...</p><p></p>
-    //     </div>
-    //   </div>
-    // </div>
     var state = store.getState()
     if(DBG)console.log('RX:render()...')
     if (!_dropdownNode) return // throw 'Missing dropdownNode'
     if (!_btnNode) return // throw 'Missing btnNode'
     ReactDOM.render(
       h('div', {}, [
-        h('div', { style: { backgroundColor: '#f7f7f7', padding: '8px', borderBottom: '1px solid #ddd' } }, [
-          h('input', { type: 'text',
-            placeholder: 'Szukaj...',
-            className: 'p5UI__dropdown-input input-sm',
-            onChange: function (e) { store.dispatch({ type: 'filter', payload: e.target.value }); },
-            autoFocus: true,
-            value: state.query,
-          })
+        h('div', {
+          style: { backgroundColor: '#f7f7f7', padding: '8px 12px', borderBottom: '1px solid #ddd' },
+        }, [
+          h('div', { className: 'form-group', style: { padding: 0, margin: 0 } }, [
+            h('div', { className: 'input-group', style: { padding: 0, margin: 0 } }, [
+              h('input', { type: 'text',
+                placeholder: 'Szukaj...',
+                className: 'p5UI__dropdown-input form-control input-sm',
+                onChange: function (e) { store.dispatch({ type: 'filter', payload: e.target.value }); },
+                autoFocus: true,
+                value: state.query,
+              }),
+              h('span', { className: 'input-group-addon', style: { padding: '6px', backgroundColor: '#fff' } }, [
+                h('span', { className: 'glyphicon glyphicon-remove hover-gray', style: { cursor: 'pointer' },
+                  title: "wyczyść",
+                  onClick: function (e) { store.dispatch({ type: 'filter', payload: '' }); },
+                })
+              ])
+            ])
+          ])
         ]),
         h('div', { style: { backgroundColor: '#fff', padding: '0' } },
           state.filter.map(function (inst) {
-            return h('div', { className: 'p5UI__dropdown-item', style: {padding: '8px'} }, [
-              _renderReactBtnToggleInstance({ namespace: inst.namespace, store: store }),
+            return h('label', { className: 'p5UI__dropdown-item', style: {padding: '8px 12px'} }, [
+              _renderReactToggleInstance({ namespace: inst.namespace, store: store }),
               inst.label,
             ])
           })
@@ -210,35 +206,28 @@ var buildDropdown = function(pk) {
     );
     setTimeout(function () {
       if (!_dropdownNode) return false
-      if (!_dropdownNode.firstChild) return false
-      if (!_dropdownNode.firstChild.firstChild) return false
-      if (!_dropdownNode.firstChild.firstChild.firstChild) return false
-      _dropdownNode.firstChild.firstChild.firstChild.focus()
+      var searchNode = _dropdownNode.getElementsByTagName('input')[0]
+      if (!searchNode) return false
+      searchNode.focus()
     }, 100)
   }
-  var _renderReactBtnToggleInstance = function (props) {
+  var _renderReactToggleInstance = function (props) {
     var state = props.store.getState()
     if (-1 === state.item.instances.indexOf(props.namespace)) {
       if (-1 === state.waitingSet.indexOf(props.namespace)) {
-        return h('button', { style: { margin: '0 6px 0 0' },
-          className: 'btn btn-xs btn-default',
+        return h('input', { type: "checkbox", style: { margin: '0 6px 0 0' },
           onClick: function () { props.store.dispatch(_reducer_instance_set_send(props.namespace)); }
-        }, 'ustaw')
+        })
       } else {
-        return h('button', { style: { margin: '0 6px 0 0' },
-          className: 'btn btn-xs btn-default disabled',
-        }, 'ustaw...')
+        return h('input', { type: "checkbox", checked: "checked", disabled: "disabled", style: { margin: '0 6px 0 0' } })
       }
     } else {
       if (-1 === state.waitingUnSet.indexOf(props.namespace)) {
-        return h('button', { style: { margin: '0 6px 0 0' },
-          className: 'btn btn-xs btn-default',
+        return h('input', { type: "checkbox", checked: "checked", style: { margin: '0 6px 0 0' },
           onClick: function () { props.store.dispatch(_reducer_instance_unset_send(props.namespace)); }
-        }, 'usuń')
+        })
       } else {
-        return h('button', { style: { margin: '0 6px 0 0' },
-          className: 'btn btn-xs btn-default disabled',
-        }, 'usuń...')
+        return h('input', { type: "checkbox", style: { margin: '0 6px 0 0' } })
       }
     }
   }

SE/se-lib/tmpl/_layout_gora.php

@@ -16,36 +16,39 @@
 body { margin:0; font-size:12px; line-height:18px; }
 body { <?php echo UI::fixFooterPosition('body_style'); ?> }
 
-#SE-menu { font-size:13px; }
-#SE-menu { min-height:36px; }
-#SE-menu > .container-fluid { padding:0; }
-#SE-menu .navbar { margin-bottom:0; }
-#SE-menu .navbar-form { margin-top:0; margin-bottom:0; }
-#SE-menu .nav > li > a { padding: 8px 10px 8px; }
-#SE-menu { -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; }
-#SE-menu-sub { border-bottom:2px solid #C53000; background:#eee;}
-#SE-menu-sub .btn {margin:4px 2px;}
-
-#SE-menu .bookmark-item-rem {opacity:0.5;}
-#SE-menu .bookmark-item-add {opacity:0.5;}
-#SE-menu .bookmark-item-rem:hover {opacity:1;}
-#SE-menu .bookmark-item-add:hover {opacity:1;}
-
-.tbl-view td {border-color:#eee;}
-.tbl-view thead td {background:#f3f3f3;}
-.tbl-view tbody tr:hover td {background:#E6FFE6;}
+#SE-menu { font-size:13px }
+#SE-menu { min-height:36px }
+#SE-menu > .container-fluid { padding:0 }
+#SE-menu .navbar { margin-bottom:0 }
+#SE-menu .navbar-form { margin-top:0; margin-bottom:0 }
+#SE-menu .nav > li > a { padding: 8px 10px 8px }
+#SE-menu { -webkit-border-radius:0; -moz-border-radius:0; border-radius:0 }
+#SE-menu-sub { border-bottom:2px solid #C53000; background:#eee }
+#SE-menu-sub .btn { margin:4px 2px }
+
+#SE-menu .bookmark-item-rem { opacity:0.5 }
+#SE-menu .bookmark-item-add { opacity:0.5 }
+#SE-menu .bookmark-item-rem:hover { opacity:1 }
+#SE-menu .bookmark-item-add:hover { opacity:1 }
+
+.tbl-view td { border-color:#eee }
+.tbl-view thead td { background:#f3f3f3 }
+.tbl-view tbody tr:hover td { background:#E6FFE6 }
 .tbl-view tbody tr.tbl-row-0,
-.tbl-view tbody tr.row-0 {background:#f3f3f3;}
+.tbl-view tbody tr.row-0 { background:#f3f3f3 }
 .tbl-view tbody tr.tbl-row-1,
-.tbl-view tbody tr.row-1 {background:#fff;}
-.tbl-view input[type=text] {margin:0;padding:0;}
+.tbl-view tbody tr.row-1 { background:#fff }
+.tbl-view input[type=text] { margin:0; padding:0 }
 
 .se-main-menu {}
-.se-main-menu td:hover {background-color:#f3f3f3;}
+.se-main-menu td:hover { background-color:#f3f3f3 }
 
-.red{color:#f00;}
-.green{color:#0f0;}
-.blue{color:#00f;}
+.red { color:#f00 }
+.green { color:#0f0 }
+.blue { color:#00f }
+
+.hover-gray { color:#d3d3d3 }
+.hover-gray:hover { color:#808080 }
 
 .dropdown-menu a em {font-size:0.9em; color:#bbb;}