Browse Source

clear input button for combo elements

bohdan.kotenko 3 years ago
parent
commit
e4907e8b20
4 changed files with 24 additions and 3 deletions
  1. 1 1
      mix.exs
  2. 7 1
      priv/css/sortable.css
  3. 9 0
      priv/js/comboLookup.js
  4. 7 1
      src/elements/combo/element_comboLookup.erl

+ 1 - 1
mix.exs

@@ -4,7 +4,7 @@ defmodule NITRO.Mixfile do
   def project do
     [
       app: :nitro,
-      version: "6.11.1",
+      version: "6.11.2",
       description: "NITRO Nitrogen Web Framework",
       package: package(),
       deps: deps()

+ 7 - 1
priv/css/sortable.css

@@ -105,7 +105,8 @@ body {
   cursor: default;
 }
 
-.add-btn {
+.add-btn,
+.delete-btn {
   position: absolute;
   top: 8px;
   right: 10px;
@@ -118,3 +119,8 @@ body {
   height: 16px;
   background-color: #ffffff;
 }
+
+.delete-btn {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6666 4.27325L11.7266 3.33325L7.99992 7.05992L4.27325 3.33325L3.33325 4.27325L7.05992 7.99992L3.33325 11.7266L4.27325 12.6666L7.99992 8.93992L11.7266 12.6666L12.6666 11.7266L8.93992 7.99992L12.6666 4.27325Z' fill='%23757575'/%3E%3C/svg%3E%0A");
+  right: 30px;
+}

+ 9 - 0
priv/js/comboLookup.js

@@ -23,6 +23,15 @@ function comboLookupChange(dom) {
   }
 }
 
+function clearInput(dom) {
+  const input = qi(dom);
+  if (input) {
+    input.value = '';
+    input.removeAttribute('data-bind');
+  }
+  comboClear(dom);
+}
+
 function comboLookupClick(dom, feed, mod) {
   var char = event.which || event.keyCode;
   if (char ==  1 && !activeCombo && qi(dom).value == '') {

+ 7 - 1
src/elements/combo/element_comboLookup.erl

@@ -36,4 +36,10 @@ render_element(#comboLookup{id=Id, style=Style, value = Val, bind = Object,
                               ++ nitro:to_list(Module) ++ "')")
                           end},
                  #panel{id=form:atom([comboContainer, Id]),
-                        class = ['dropdown-content']}]}).
+                        class = ['dropdown-content']},
+                 case Disabled of
+                   true -> [];
+                   false -> #link{class = [button, sgreen, 'delete-btn'],
+                                  style = "min-width: 40px; text-align: center; height: fit-content; margin-left: 5px;",
+                                  onclick = nitro:jse("clearInput('" ++ Id ++ "')"),
+                                  body = <<"">>} end]}).