search

rabbibotton / clog

CLOG - The Common Lisp Omnificent GUI
Other
1.49k stars 102 forks source link

Feature Request: editable original `Custom HTML [Block]` in the right side-panel `contents` (or other) field #182

Closed johndebord closed 2 years ago

johndebord commented 2 years ago

I'm not sure if this is the best approach (or if there's already a way to achieve the same result), but in addition to the new feature Custom HTML Block, it would be great if the original Custom HTML [Block] was also saved alongside the transformed HTML, so that the original HTML can be experimented with by hand.

For example the following HTML snippet:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Is transformed (so that CLOG can make use of it) to:

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" data-clog-name="dropdownMenuButton1" data-clog-type="button">    Dropdown button
</button>
<div class="placer ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" id="p-dropdownMenuButton1" data-panel-id="217-center" style="left: 0px; top: 0px; width: 172px; height: 36px; box-sizing: content-box; position: absolute;" tabindex="-1">
  <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;">
  </div>
  <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;">
  </div>
  <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;">
  </div>
</div>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" id="CLOGB3867279308" data-clog-name="none-ul-1" data-clog-type="ul">
  <li id="CLOGB3867279309" data-clog-name="none-li-2" data-clog-type="li">
    <a class="dropdown-item" href="#" id="CLOGB3867279310" data-clog-name="none-a-3" data-clog-type="link">Action
    </a>
    <div class="placer ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" id="p-CLOGB3867279310" data-panel-id="217-center" tabindex="-1" style="left: 0px; top: 0px; width: 0px; height: 0px; box-sizing: content-box; position: absolute;">
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;">
      </div>
      <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;">
      </div>
      <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;">
      </div>
    </div>
  </li>
  <div class="placer ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" id="p-CLOGB3867279309" data-panel-id="217-center" style="left: 0px; top: 0px; width: 0px; height: 0px; box-sizing: content-box; position: absolute;" tabindex="-1">
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;">
    </div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;">
    </div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;">
    </div>
  </div>
  <li id="CLOGB3867279311" data-clog-name="none-li-4" data-clog-type="li">
    <a class="dropdown-item" href="#" id="CLOGB3867279312" data-clog-name="none-a-5" data-clog-type="link">Another action
    </a>
    <div class="placer ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" id="p-CLOGB3867279312" data-panel-id="217-center" tabindex="-1" style="left: 0px; top: 0px; width: 0px; height: 0px; box-sizing: content-box; position: absolute;">
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;">
      </div>
      <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;">
      </div>
      <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;">
      </div>
    </div>
  </li>
  <div class="placer ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" id="p-CLOGB3867279311" data-panel-id="217-center" style="left: 0px; top: 0px; width: 0px; height: 0px; box-sizing: content-box; position: absolute;" tabindex="-1">
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;">
    </div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;">
    </div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;">
    </div>
  </div>
  <li id="CLOGB3867279313" data-clog-name="none-li-6" data-clog-type="li">
    <a class="dropdown-item" href="#" id="CLOGB3867279314" data-clog-name="none-a-7" data-clog-type="link">Something else here
    </a>
    <div class="placer ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" id="p-CLOGB3867279314" data-panel-id="217-center" tabindex="-1" style="left: 0px; top: 0px; width: 0px; height: 0px; box-sizing: content-box; position: absolute;">
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;">
      </div>
      <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;">
      </div>
      <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;">
      </div>
    </div>
  </li>
  <div class="placer ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" id="p-CLOGB3867279313" data-panel-id="217-center" tabindex="-1" style="left: 0px; top: 0px; width: 0px; height: 0px; box-sizing: content-box; position: absolute;">
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;">
    </div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;">
    </div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;">
    </div>
  </div>
</ul>
<div class="placer ui-draggable ui-draggable-handle ui-resizable ui-resizable-autohide" id="p-CLOGB3867279308" data-panel-id="217-center" tabindex="-1" style="left: 0px; top: 0px; width: 0px; height: 0px; box-sizing: content-box; position: absolute;">
  <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;">
  </div>
  <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;">
  </div>
  <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;">
  </div>
</div>

If I experimentally wanted to add a form instead of a list items in the original HTML snippet, I would transform it into:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-    <li><a class="dropdown-item" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <form class="row g-3">
+      <div class="col-auto">
+        <label for="staticEmail2" class="visually-hidden">Email</label>
+        <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
+      </div>
+      <div class="col-auto">
+        <label for="inputPassword2" class="visually-hidden">Password</label>
+        <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
+      </div>
+      <div class="col-auto">
+        <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
+      </div>
+    </form>
  </ul>
</div>

But this would require (to the best of my knowledge) that the original HTML snippet be saved so that it can be edited, or (the only alternative that I can think of) that an entirely new Custom HTML [Block] be dropped-in.

rabbibotton commented 2 years ago

The HTML you are quoting didn't come from cut and paste or saves and playing with that HTML is gong to mess things up. That little content square at the end of the properties should be looked at more as a debugger. That may be making a non-CLOG touched version of the original HTML stored along side when using a Custom HTML Block control.

As a rule thinking in CLOG is about not thinking in HTML. However there is a value in hand coding as well reason able to cut and paste and save .clog file (which are html).

I hope you will be patient with me, but will figure out how to get the builder mindset to sync up with an HTML mindset also and allow some blend to work even better. I think will be amazing.

Later today I'll try and figure a work flow, hopefully with your help, that combines the two smoother and see were we get.

I think first step is giving you a Custom HTML Block editor and also offer the ability to once it is ready, explode the custom HTML in to real controls you can add evens etc. Thoughts?

rabbibotton commented 2 years ago

You now have access to modify the original HTML on the custom HTML block. That was a great idea, as lets you place with html easily and then later can copy and paste it back or use the regular custom html control to turn it in to usable elements. Thanks!

johndebord commented 2 years ago

I think first step is giving you a Custom HTML Block editor and also offer the ability to once it is ready, explode the custom HTML in to real controls you can add evens etc. Thoughts?

That would be great. I also think the html contents textarea deserves its own window (using clog-ace); where all the HTML is properly indented and gets reformatted in real-time.

One thing that I'm seeing is that if I use this snippet as a Custom HTML Block:

<div>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
    </script>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li>
          <a class="dropdown-item" href="#">Action
          </a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Another action
          </a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Something else here
          </a>
        </li>
      </ul>
    </div>
</div>
</div>

It gets transformed into the html contents textarea as:

<div>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">    </script>    <div class="dropdown">      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">        Dropdown button      </button>      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">        <li>          <a class="dropdown-item" href="#">Action          </a>        </li>        <li>          <a class="dropdown-item" href="#">Another action          </a>        </li>        <li>          <a class="dropdown-item" href="#">Something else here          </a>        </li>      </ul>    </div></div>

And is rendered as: sc0

Wherethen, if I make a small change, CLOG seems to run into a problem: sc1

There's also a small bug where since the HTML is being regarded as a single control (block) in the left-side controls panel, double clicking seems to only affect the parent placer and not all of its children as well.

rabbibotton commented 2 years ago

Looo

rabbibotton commented 2 years ago

Looking in to the transformation of the HTML. When you use custom html block it only creates a single control, you can not access the children visually. If you use custom html it places each child control.

If a placer should not be created for child elements when us custom html block.

rabbibotton commented 2 years ago

"Where then, if I make a small change, CLOG seems to run into a problem:" This issue there is bootstrap can only be used in a widow not a panel as the css and javascript are conflicting.

rabbibotton commented 2 years ago

I fixed the escaping of \n and \r

rabbibotton commented 2 years ago

I working through all the properties with better input schemes, ace editor, better color selections etc. That will be soon.

rabbibotton commented 2 years ago

The double click when you freeze a custom block control does allow access to placers that should not exist, I will look in to best way to prevent their creation. The fix though overwrites the html with the original html entered (or any changes made).

rabbibotton commented 2 years ago

And I see that even on the bootstrap page once you edit the html some how the styles disappear. I will look at it tomorrow.

rabbibotton commented 2 years ago

Sorry for the mess of msgs, but now all working well. Changing html, freezing freezes all, load/save and render. As I said I will get to better ace based edit of html in near future.

rabbibotton commented 2 years ago

Also dropping the css and scrip for bootstrap in to a panel seems to work reasonably well now also, Also there is no reason now to wrap a custom html block in an outer div either anymore.

rabbibotton commented 2 years ago

I have added the ability now to convert the html block in to a div that when then the panel is save and reloaded will have access to the child controls. It is a bit hackish, but so is using html in a visual tool :) At some point I'll move it to a context menu on the panel when I get to that and with no need to reload. You can also do the following hack - you convert, copy the block, then you paste it and will have access in the paste to sub controls.

johndebord commented 2 years ago

This is great. I've been dropping in CSS and Githubissues.

  • Githubissues is a development platform for aggregating issues.