jQuery UI Dialog

Permalink
jQuery UI was pretty nascent when we created concrete5. Consequently, we created our own dialog class that functioned with a completely different API, and a completely different style, than what would ultimately become jQuery UI Dialog. We have appropriated large amounts of jQuery UI, however, because it's generally very good. However, there's a LOT of concrete5 code out there that isn't going to be re-written any time soon, and a lot of built-in code that I just don't see being re-written, simply for the sake of being re-written.

That said, jQuery UI dialog does a bit more than concrete5, and does it nicer. Our dialog class was only ever going to be modal, with only one dialog ever active. jQuery UI's dialog doesn't suffer from that limitation. Additionally, windows are resizable, more easily themeable, etc...

To that end, I have attempted to rewrite our ccm.dialog.js class so that it is essentially a wrapper class for jQuery UI dialog. If you call it the way you always use to call concrete5 dialogs, it will translate those calls into jQuery UI dialog calls, and call the jQuery UI dialog box. If you call it using arguments (which we never really did), or on a DIV element, then we will pass through the call directly to our jQuery UI dialog namespace (which we have named jqdialog()).

I'd like anyone interested in this to test it out. A caveat: 1) the theme that we're using for these dialogs isn't final. It's a just a random jQuery UI theme I thought was nice and decided to apply, to see just how themeable this dialog box would be.

# Installation

1. Download the attached zip. Unzip it.
2. Take all the css files in the archive and place them in the root of a concrete5 site. (Note: this has only been tested with the latest and greatest github source.)
3. Take all the JavaScript files in the archive and place them in the root of a concrete5 site.

Test away! I'm interested in any places in the concrete5 editing experience where this isn't working, any places in any existing add-ons that aren't working, and any existing jQuery UI tutorials on the web, with sample code, that aren't working. Some cursory jQuery UI demos from jqueryui.com all seem to work, and I believe all concrete5 code should be working in this dialog as well.

UPDATE: I've removed the attachment from this, since it's updated further down in the thread. Check out version 1.2.

andrew
View Replies:
adamjohnson replied on at Permalink Reply 2 Attachments
adamjohnson
Very nice. Just installed this and took it for a quick test drive. I can add/edit fine on the first thing I want to edit, but after I add/change the first block, the rest of the blocks become not clickable (perhaps a z-index issue?).

Also, I see scroll bars in most of the windows. Not sure if this is different from Mac to PC (I'm on a Windows 7 machine), but thought I'd mention it. Check out the screen shots.

Overall though, it feels robust and "snappier" than what's currently in 5.4.1.1. I also like the theme better (feel like C5's current modal gloss looks very web 2.0, circa 2005). But that is a whole different topic. Tested on a site with sample content, default theme, C5 5.4.1.1.
andrew replied on at Permalink Reply
andrew
Nice. Yeah, we are considering a visual refresh at some point in the future. This is just a custom jQuery UI theme that someone made that I thought looked nice (and I wanted to test whether the dialog could work with a theme that really overhauled everything.) Not surprised that there are some scrollbars, that will probably be ironed out at some point in the future with some tweaks to dialog size depending on how the new jQuery UI dialog theme works.

Additionally, I noticed some of the bugs you were talking about. Try this updated .zip file. I don't think I changed much, but I realized there was some code in the dialog class that really didn't need to be there.

Thanks for testing this out.

NOTE: I've removed the attachment from this post, as there's a newer one further down in the thread.
Shotster replied on at Permalink Reply
Shotster
Cool, seems like a nice solution, Andrew. I haven't tried it yet, but I'll just install it on my dev machine and report any issues.

-Steve
adamjohnson replied on at Permalink Reply
adamjohnson
Tried the new version. Fixed issues in the last version. Found one thing though: Layouts. Can you create a layout then click to add blocks? I was having trouble with this. See if you can replicate it.

As a note, I could click the + symbol and move up/down, then I was able to click to add blocks, but not on the first go around.
andrew replied on at Permalink Reply
andrew
Ah, I see. When I built the custom jQuery UI download I neglected to include the slider widget. I'll make sure that gets fixed. In the meantime you can fix this by downloading a full copy of the current jQuery UI library.
Phallanx replied on at Permalink Reply
Phallanx
I concur. This is a great UI improvement and gives CC5 a much slicker look and feel.

So far, only small pop-ups (like the block edits) seem to use it. Can it be extended to the other dialogs from the main menu bar ?(like the page designer and page properties).
andrew replied on at Permalink Reply 1 Attachment
andrew
Ok, another update.

1.2

- Fixes the slider/layout issue talked about elsewhere in this thread
- Works with the discussion add-on.
Mnkras replied on at Permalink Reply
Mnkras
Iv been playing around with it and it works fine for me :)
jgaris replied on at Permalink Reply
I love this, but I found 2 bugs when using with 5.4.1.1:

1. For any dialog that uses the color picker (for example when you use the "Design" dialog to add a border or background to a block), the color picker loads behind the dialog and can't be used.

2. When using any block that accesses the file manager (for example the Content Block when trying to Add Image), the popup menu to choose/view/edit/etc a file, is missing.

Tested on Chrome and Firefox
andrew replied on at Permalink Reply
andrew
Thanks for the feedback!

I see what you mean about the color picker. I've checked in a change to ccm.colorpicker.css which ups the color picker z-index. It can be downloaded from github.

I wasn't seeing #2, but I think that's because I did a similar change already for the menu z-index, which is checked into github.
dantheman replied on at Permalink Reply
dantheman
Should this work with the Concrete 5.4.2 release?

Kind regards

Dan
andrew replied on at Permalink Reply
andrew
It should, although I haven't tested it lately. I was going to integrate it into the latest version of concrete5, but I wanted a little more testing done before integrating it into 5.4.2. It's likely it'll be in 5.5 though (which will give us the opportunity to do a slight design refresh to the dialog boxes.)
Mnkras replied on at Permalink Reply
Mnkras
I saw some issues with dialog sizing, where at times it would be tiny and you had to drag out the corner.
Ricalsin replied on at Permalink Reply 1 Attachment
Ricalsin
Andrew, in the dashboard>system & maintenance>backup & restore when you try to restore a saved backup you get the attached screenshot: no buttons.

I haven't run into any other problems so far.
andrew replied on at Permalink Reply
andrew
Thanks. I have think I have this one fixed now.
bastien31 replied on at Permalink Reply
Hi,

I just read some discussions about the problems using jquery ui dialog. I try to understand (and to apply) the solution you described here but i don't success.

Can you develop ? just add some code for example.

In my case, i just want to use the dialog-confirm from jquery ui. So, i add in $(document).ready(function():
$( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
         "Delete": function() {
            $( this ).dialog( "close" );
         },
         Cancel: function() {
            $( this ).dialog( "close" );
         }
      }
   });


In the html, i put :
<div id="dialog-confirm" title="Do something ?">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>It's not working !!</p>
   </div>


The error is that there is no method .dialog for my object (the DIV i think). In 5.4.2, i thought that if I apply a .dialog on a DIV, i will be automatically redirect to the jquery ui function.

An idea ?
thanks
andrew replied on at Permalink Reply
andrew
No, not yet. This got bumped to 5.5.
bastien31 replied on at Permalink Reply
thanks for reply, Andrew.

and for when is forecasted the release of 5.5 (in order to know if i wait or if i implement by another way) ?