The sandbox description and code can be found at:
http://drupal.org/sandbox/dtengeri/1072510

I have requested for a CVS account before at:
http://drupal.org/node/941282

Motivation and description
Our goal was to make an online WYSIWYG theme editor for Drupal.

With our module you can design your actual theme on your Drupal site by a point and click method. You can modify almost all of available CSS properties only in a few clicks.

Some features of the module:

  • Turn on/off the editor mode without turning of the module.
  • Control the editor's availability by permissions.
  • Select any HTML element to edit it by a single click on it.
    Selectable elements:
    • only the clicked element
    • all same elements (all h1, all div, etc.)
    • all elements in the same class (.title, .block, etc.)
  • Set the value of CSS properties by clicking on images or using sliders. Don't need to write any CSS code.
  • The results will be shown immediately on your Drupal site.
  • Undo/redo your modifications.
  • Path Editor:
    • Easily select a container element of the selected item by clicking on one of its parent in the path editor.
    • Expand/modify the selected elements path (its place in the DOM) to select another element.
  • The toolbar has two modes:
    1. Floating mode allows you to move the toolbar everywhere on the site.
    2. In docked mode the toolbar will be sticked to the bottom of the page.

    The toolbar is collapsible in both modes.

  • Tooltip informations about the CSS properties for users who haven't worked with CSS before.
  • Save your modifications in a CSS file. The file generation is automatic, you don't have to edit manually any CSS files.
  • Turn on/off the generated CSS files at the theme's administration page. You can enable more CSS files at once or disable all if you don't want to use them anymore.

Comparison with existing modules:

Sweaver module provides a visual interace to modify a theme's style.
First, i want to mention that at the time we started the project, Sweaver wasn't reachable at the drupal.org's project page.
The Sweaver module's editor is configurable, it can be expanded by plugins on its admin page. you can add new CSS properties to the editor. We want to provide a simpler, all in one tool which contains everything to modify your site's CSS without the need of configure something in the background.

Sweaver contains a integration with ImageCache and has an interfeace where users can upload images. In this version of the proposed module we don't have such an interface. We are focusing now on the editing functionality.

Our first goal was to create a full theme generator, which allows users to download a full theme. This can be found at http://drupalthemecreator.org. While we're developing this we found that such an editor would be useful on every Drupal site, so we've made the proposed module.

CommentFileSizeAuthor
#2 dtc-6.x-1.0.zip76.63 KBdtengeri
#1 6review.jpg55.9 KBdstol
dtc-6.x-1.0.zip75.97 KBdtengeri

Comments

dstol’s picture

Assigned: Unassigned » dstol
Status: Needs review » Needs work
StatusFileSize
new55.9 KB

Few minor code things.
Comments belong on the line above what you're commenting on for instance...

$something = drupal_lookup_path('something'); //Lookup the path of

Isn't up to coding standards...
Should be like this...

// Lookup the path of
$something = drupal_lookup_path('something'); 

Also note that there is a space between the // and the beginning of the comment.

Functionally and UX is another story.

I'm confused as to why you've implemented a block to turn on and off the module. Typically, I'd expect enabling the module to turn the module on or there be some menu item to define the settings, on/off being one of them.

The biggest issue I noticed is that the UI appears all in the footer.

dtengeri’s picture

StatusFileSize
new76.63 KB

Dear dstol,

Thank you for your review!

I've attached the new version and you can find it in the git repository of the sandbox project too.

I've applied the conding standards of commments you mentioned.

There are two reasons which can cause the wrong display of the editor's UI:
1. You forgot to download the 3rd party plugins needed by the module.
2. You enabled the module before you downloaded the plugins.

To solve the 1. I've implemented the hook_requirements(), so now you aren't able to turn on the module if the plugins are missing.
This will solve 2. too.

You mentioned that it is confusing the use a block to turn on/off the editor. We've done this beacause in this way you can turn off the editor in one click. If we put the settings page somewhere in the administration section, then you have to navigate to that page which looks like this:
1. Click on the administration link of the navigation. This first click will allow you to edit that link's style.
2. You have to click the Follow this link in the popup to navigate to that page.
3. Click the Settings link of Dtc on the admin page.
4. Click the Follow this link.
5. and so on...

This is less user friendly than the clicking a link in a block.

dtengeri’s picture

Status: Needs work » Needs review

Changed status as per previous comment.

dstol’s picture

Status: Needs review » Needs work

I'll check out the code changes a little later, but I'm really going to strongly encourage you to rethink how you turn it on and off. I had to go into the module and spend about 5 minutes to figure out how to turn it on. The average site builder isn't going to be able to figure this out.

It might be a good idea to re-implement the on/off block as a 'toggle visibility' in the UI, rather then a block.

dtengeri’s picture

It sounds good.
I will create a Turn off button and put it somewhere in the UI and i will create the configuration page, where you can turn the editor on.

I will notify you if I've done with the changes and you don't need to review the code twice.

dstol’s picture

Thanks

dtengeri’s picture

Status: Needs work » Needs review

You can check out the code from the git now. It contains the requested modifications.

dstol’s picture

Status: Needs review » Needs work

Could you please run this though coder with the 'most' settings in the selection form. There are just a few issues it will take care of, trailing spaces and tabs in some spots.

You've got a few English misspellings in your readme (enbale, libararies, recommmend). I would also add some documentation for where you're supposed to unzip the plugins from your site to make it clear as possible.

There's a javascript error... Drupal.settings.dtc is undefined dtc_core.js?y (line 115) in Chrome 10 and FF4

dtengeri’s picture

Status: Needs work » Needs review

Thanks for the review!

I've corrected the tabs and trailing space problems and the mispellings.
Added some detailed description about the 3rd party libraries to the README.txt.
And finally corrected the JS error, thanks for the good description.

The changes are in the git now.

dtengeri’s picture

Any news?

dstol’s picture

Status: Needs review » Reviewed & tested by the community

Ah, sorry dtengeri, this fell off my radar.

All issues fixed. Coder reports no issues. Module works as expected. This code passes inspection and shows a decent knowledge of drupal API.

Thanks for your patience, and we welcome your contributions. Thanks so much.

And don't forget to come back and review somebody else's application.

rfay’s picture

Status: Reviewed & tested by the community » Fixed

Git vetted user role granted. Thanks for your patience in this process!

Please review the applications of others so we can get this queue down.

sarah_p’s picture

Component: new project application » theme

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

avpaderno’s picture

Assigned: dstol » Unassigned
Status: Closed (fixed) » Fixed

I am giving credits to the users who participated in this issue.

avpaderno’s picture

Title: Dtc » [D7] Dtc

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.