Success

User tests: Successful: Unsuccessful:

avatar iamramtripathi
iamramtripathi
30 Aug 2013

This is the code for the the project "Improvements to the Template Manager for CMS 3". I've changed the way the Template Manager functions. It is fully dynamic, has new UI, supports all the template files formats and supports all the major file operations. I've also updated the CodeMirror plugin to version 3.16. CodeMirror now supports many additional features that may prove to be very handy when editing the files. The overall aim is to dramatically reduce the effort required for editing (or even creating new ones, yes it can be done!) the templates on a live site. I've listed below the features that need to be tested.

Tracker Item - http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_id=8549&tracker_item_id=31266

Pull the master before testing this. Otherwise it will throw an error.

Since the database has been modified, first do a dry save inside Options in com_templates and also inside CodeMirror Plugin Settings to update the tables`

->Template Manager

1) Extensions->Template Manager->Templates
2) Select a Template
3) Check the behavior of the following is as expected

  • Collapsible Tree
  • Editing of files
  • Save
  • Save & Close
  • Copy
  • Tree Inside ‘Manage Folders’ & ‘New File’ buttons
  • Create Folder
  • Delete Folder
  • Create File
  • Upload File
  • Delete File
  • Rename File
  • Repeat points 6-11 doing testing inside a particular folder
  • Create Module, Component, Layout overrides
  • Compile LESS - Find the /less/template.less, find the .site-title and change or add a style (eg, color:pink). Save, compile and refresh site. Check the site title has changed style.
  • Generate LESS error - Add random text after any semi-colon.
  • Cropping
  • Resizing
  • Upload Font
  • Font Preview
  • Copy File
  • Upload Zip file
  • Extract Zip file

CodeMirror Plugin update

For testing the features of codemirror, you first need to go to the codemirror plugin settings and do a dry save for updating the database table. After that come back to a template and test the following features.

Automatic Tag closing
Automatic bracket/braces/quotes closing
Tag matching in code
braces matching in code
code folding
Full Screen Editing
Light and Dark Themes
Code Maker Gutter
Auto focus

Change log - since 17/09/2013

  • Fixed hyphen bug
  • Added tabstate
  • Added copy file feature
  • Modified button names
  • Added an extra file type
  • Added upload limit in configuration file
  • Added file formats in configuration file
  • Corrected the regex to include a-z, A-Z, 0-9, '-', '_'
  • Changed the position of tree in modal windows
  • Changed the button for full screen mode
  • Corrected line wrapping in collapsible tree when text is long
  • Updated SQL
  • Added feature for uploading, preview and extracting zip files
  • Added all the language strings
  • Added Hathor override
  • SQL update file
  • Fixed a tree error
  • Added view overrides
avatar iamramtripathi iamramtripathi - open - 30 Aug 2013
avatar eddieajau
eddieajau - comment - 15 Sep 2013

Hi Ram. Good you give a brief summary of the changes that we need to be looking for while testing? Thanks in advance.

avatar iamramtripathi
iamramtripathi - comment - 15 Sep 2013

Hi @eddieajau . I've updated the description in the PR. :)

avatar eddieajau
eddieajau - comment - 15 Sep 2013

Thanks. I'm cleaning up the code style a bit. Will send you a PR soon.

avatar eddieajau
eddieajau - comment - 15 Sep 2013

Ram, I don't appear to be able to send you a pull request directly (your branch is just not showing up on the list in Github). Can you merge this branch with yours:
https://github.com/eddieajau/joomla-cms/tree/iamramtripathi-gsoc

It cleans up most of the CS issues in com_templates.

avatar iamramtripathi
iamramtripathi - comment - 15 Sep 2013

Done!

avatar eddieajau
eddieajau - comment - 15 Sep 2013

Thanks. I'll do some testing after work.

avatar iamramtripathi
iamramtripathi - comment - 15 Sep 2013

Sure. Thanks!

avatar eddieajau
eddieajau - comment - 16 Sep 2013

This ROCKS! Ok - some observations (anything marked "Backlog: ..." are notes we should record for a future version"

  • I can edit one file and move to another and make another edit. Only the "current file" saves. Backlog: We should warn a user, where they have made changes, that the changes will be lost.
  • I can edit an image and put a rubber-band on it. Can I do anything else?
  • Confirmed tree works on Safari 6.0.5 on OSX Lion.
  • In protostar expanding /language/en-GB results in the en-GB on two lines. Maybe the "-" is considered a line-break hyphen?
  • Confirmed changes to LESS compile and show on site.
  • Confirmed LESS error message shows.
  • F11 does not work for full screen on OSX Lion and Safari 6 - probably my hot key assignments. Backlog: add a button to click for FSM.
  • Confirmed you can't create a layout override when one already exists. Backlog: might need finer control over this in future.
  • What are "layouts" in the "Create Overrides" tab?
  • Would it help to have a note on the "Create Overrides" page like: "This is a frontend | backend template". Just a visual reminder if absent-minded people like me are wondering where some of the components and modules went :)
  • Create a file modal: I think the tree would be better on the left so there is a visual association with the main screen. You think?
  • Confirmed simple PHP file uploaded. Ironically, configuration.php threw an XSS error - not sure why. Maybe not a high priority to fix as you can workaround it.
  • When creating a new file, you must exclude the extension. I think it's worth adding a note on the page about that, or, just strip any extension that was provided and re-add the right one.
  • When renaming a file you need to exclude the extension. Same as previous point.
  • Are mandatory template files protected from the "Delete" button, like index.php?
  • http://docs.joomla.org/Help32:Extensions_Template_Manager_Templates_Edit needs to be created when feature is accepted.

I don't think there are any show stoppers there even if some things are a little rough for 3.2.0. I'll look through the code now.

avatar eddieajau
eddieajau - comment - 16 Sep 2013

Selected code observations:

TemplateHelper

  • Should isImage get the information from com_media's "Legal Image Extensions (File Types)" option?
  • Backlog: Allowable template file types will need to be configurable in the future.
  • Backlog: Maximum upload size in canUpload should be configurable or work of com_media's setting
  • Backlog: I would break all of the "checks" in canUpload into individual protected methods because that will make them easier to write unit tests. This file is a high priority for unit testing.

TemplatesModelTemplate

  • Backlog: File is a high priority for unit tests.
  • Should checkNewName have an addition where clause for extension type (and possibly client)?
->where(sprintf('%s = %s', $db->quoteName('type'), $db->quote('template')))
avatar eddieajau
eddieajau - comment - 16 Sep 2013

BTW, I think the "Description" tab is fine where it is. You have the most important and most used tab first :+1:

avatar dongilbert
dongilbert - comment - 16 Sep 2013

This is probably my favorite feature for 3.2. Great work @iamramtripathi!

avatar iamramtripathi
iamramtripathi - comment - 16 Sep 2013

Thanks Andrew, Don for the feedback. :+1:
In the next commit I'll try to address most of the concerns.

  • I'll try to figure out a way of warning the user for unsaved changes.
  • We can resize the image as well.
  • I'll fix the hyphen issue. Other people have also mentioned this issue.
  • I'll add a button as well for full screen mode.
  • Tree on the left makes sense. I'll change the position.
  • I'm going to modify the all the input functionality, be it upload, or any file/folder name.
  • index.php is protected from Delete as well as Rename
  • File types and Upload limit will come from the configuration.

I'll try to refine most of the rough edges within the time frame. Thanks again for testing! :)

avatar betweenbrain
betweenbrain - comment - 17 Sep 2013

This is awesome work @iamramtripathi! Good job!

What do you think about automatically adding <?php defined('_JEXEC') or die; to new PHP files?

avatar betweenbrain
betweenbrain - comment - 17 Sep 2013

Not sure if this is related to the dash issue other shave commented on, but I cannot create new directory like en-FR even though I see the error message Invalid folder name. Please chose a folder name containing a-z, A-Z, 0-9, - and _.

avatar betweenbrain
betweenbrain - comment - 17 Sep 2013

This is certainly an edge case, but when creating a template override for a component that doesn't have any view files (i.e. com_ajax) I get the appropriate errors that the component's view doesn't exist, and that the override couldn't be created, however the appropriate directory for the override is created (i.e. html/com_ajax)

avatar iamramtripathi
iamramtripathi - comment - 19 Sep 2013

@betweenbrain Thanks for testing it Matt. I've corrected the regex thing and added a few more things. I'll correct the issue that you mentioned in my next commit.

Would like to know what do you think of the changes.

avatar brianteeman
brianteeman - comment - 19 Sep 2013

Creating overrides

This is a great feature but its not quite right. It checks to see if an override exists for the component and it it is found then it doesnt create a new override. Which of course is correct.
However it is only checking for the existence of the component and not the individual views

Example

If you have an override in the existing template JUST for com_content/featured then you cant use the template manager to create any other overrides as it checks for the existence of com_content and not the individual views such as com_content/article

Many templates only provide overrides for a few of the views of a component and not all of them. For those templates this feature will not work

avatar iamramtripathi
iamramtripathi - comment - 20 Sep 2013

@brianteeman Hi Brian. Thanks a ton for testing this.

The issue you raised was perfectly valid. I worked on that and have changed that to overriding only a particular view. Please check that out and tell me what do you think. :)

avatar brianteeman
brianteeman - comment - 24 Sep 2013

Thanks - the changes to overrides is much better

avatar brianteeman
brianteeman - comment - 24 Sep 2013

Small change to the language file for en-GB

-COM_TEMPLATES_HOME_TEXT="You can select from a number of options for customizing the look of your templates. The Template Manager supports Source files, Image files, Font files, Zip archives and most of the operations that can be performed on those files. Just select a file and you are good to go. Check the documentation if you want to know more."
+COM_TEMPLATES_HOME_TEXT="You can select from a number of options for customising the look of your templates. The Template Manager supports Source files, Image files, Font files, Zip archives and most of the operations that can be performed on those files. Just select a file and you are good to go. Check the documentation if you want to know more."

avatar brianteeman
brianteeman - comment - 24 Sep 2013

Can it be changed so that the template preview toolbar icon has a target "_blank". That would be consistent than with the other links to the frontend of your site which all open in a new tab

avatar mbabker
mbabker - comment - 28 Sep 2013

Can you sync this up with master please? I want to try and get this merged in the next day or two.

avatar iamramtripathi
iamramtripathi - comment - 28 Sep 2013

@mbabker Done!

avatar mbabker
mbabker - comment - 28 Sep 2013

Thanks!

One last request - Could you add the files that are removed or renamed from what they were in 3.1.5 to the delete script? This should be the last admin task to get a smooth merge.

avatar javigomez
javigomez - comment - 2 Oct 2013

I'm not sure if I have done well but the list of removed files in this pulls I think is:

# deleted: administrator/components/com_templates/controllers/source.php
# deleted: administrator/components/com_templates/models/source.php
# deleted: administrator/components/com_templates/views/source/index.html
# deleted: administrator/components/com_templates/views/source/tmpl/edit.php
# deleted: administrator/components/com_templates/views/source/tmpl/edit_ftp.php
# deleted: administrator/components/com_templates/views/source/tmpl/index.html
# deleted: administrator/components/com_templates/views/source/view.html.php
# deleted: media/editors/codemirror/css/csscolors.css
# deleted: media/editors/codemirror/css/jscolors.css
# deleted: media/editors/codemirror/css/phpcolors.css
# deleted: media/editors/codemirror/css/sparqlcolors.css
# deleted: media/editors/codemirror/css/xmlcolors.css
# deleted: media/editors/codemirror/js/basefiles-uncompressed.js
# deleted: media/editors/codemirror/js/basefiles.js
# deleted: media/editors/codemirror/js/codemirror-uncompressed.js
# deleted: media/editors/codemirror/js/editor.js
# deleted: media/editors/codemirror/js/highlight.js
# deleted: media/editors/codemirror/js/mirrorframe.js
# deleted: media/editors/codemirror/js/parsecss.js
# deleted: media/editors/codemirror/js/parsedummy.js
# deleted: media/editors/codemirror/js/parsehtmlmixed.js
# deleted: media/editors/codemirror/js/parsejavascript.js
# deleted: media/editors/codemirror/js/parsephp.js
# deleted: media/editors/codemirror/js/parsephphtmlmixed.js
# deleted: media/editors/codemirror/js/parsesparql.js
# deleted: media/editors/codemirror/js/parsexml.js
# deleted: media/editors/codemirror/js/select.js
# deleted: media/editors/codemirror/js/stringstream.js
# deleted: media/editors/codemirror/js/tokenize.js
# deleted: media/editors/codemirror/js/tokenizejavascript.js
# deleted: media/editors/codemirror/js/tokenizephp.js
# deleted: media/editors/codemirror/js/undo.js
# deleted: media/editors/codemirror/js/util.js

avatar mbabker
mbabker - comment - 3 Oct 2013

@javigomez - Looks right based on how the files diff view on here reads and the fact that CodeMirror itself is updated (those are probably deleted between whatever version we're on now and the new version). So just add them to the list in the update script and we're good to go. We should be able to get this merged in the next 24 hours.

avatar iamramtripathi
iamramtripathi - comment - 3 Oct 2013

@mbabker - done!

avatar mbabker mbabker - close - 4 Oct 2013
avatar betweenbrain
betweenbrain - comment - 4 Oct 2013

@iamramtripathi Thanks for your hard work on this, it's great!

avatar garyamort garyamort - reference | - 2 Dec 13

Add a Comment

Login with GitHub to post a comment