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.
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.
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.
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.
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
-Steve
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.
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.
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.
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).
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).
Ok, another update.
1.2
- Fixes the slider/layout issue talked about elsewhere in this thread
- Works with the discussion add-on.
1.2
- Fixes the slider/layout issue talked about elsewhere in this thread
- Works with the discussion add-on.
Iv been playing around with it and it works fine for me :)
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
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
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.
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.
Should this work with the Concrete 5.4.2 release?
Kind regards
Dan
Kind regards
Dan
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.)
I saw some issues with dialog sizing, where at times it would be tiny and you had to drag out the corner.
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.
I haven't run into any other problems so far.
Thanks. I have think I have this one fixed now.
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():
In the html, i put :
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
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
No, not yet. This got bumped to 5.5.
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) ?
and for when is forecasted the release of 5.5 (in order to know if i wait or if i implement by another way) ?
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.