Skin Manager Interface Suggestions

[Chris Griego]

This topic is an ongoing list of suggestions primarily for the IPB skin editing interface to make it more robust and intuitive. If you have any relevant suggestions, please feel free to post them in this topic.

Glossary

• Revert: To change the database data back to the parent or master skin's data.
• Reset: To change the active data in the form back to what it was before the user started editing.
  

Skin Engine

• [3.0] Infinite inheritence / recursion (infinite levels of child skins).
• Enable HTML Logic and variables in the board wrapper. (e.g. cache the wrapper).
• The Board Guidelines link used to be displayed pretty-much anywhere you wanted to put "<!--IBF.RULES-->" in your templates, as a global macro, the default placement being the header. This behavior has unnecessarily changed in 2.0 and it restricts the use to only the global_header, as a template macro.
• Change HTML Logic syntax to utilize <elseif=""></elseif> instead of the current <if=""></if><else if=""></if><else></else>, which is a confusing syntax for HTML Logic and is hard to follow when reading longer, more complicated html logic.
• [?] A simple mixup of HTML Logic can cause blank white screens for both the forum and the AdminCP.
  

Skin Manager Home

• Add an entry on the skin's option list for Image Set that says what image folder the skin uses and shows the the icon if the image set is the default (1), a parent's image set, or specific to the child skin. It could also be a shortcut to exporting the image set.
• Show the total number of members using each skin, like in previous versions.
• Add a method for copying portions from on skin set to another, for example say you create a new parent skin and want to start off with another skin's stylesheet or macro set. Especially in the case of the macro set, there's no easy way to do that.
• Ability to edit member group skin access permissions and set different default skins for different member groups.
  

Edit Wrapper

• Add a Revert button and a Reset button.
  

Edit CSS - Advanced

• Add a Revert button and a Reset button.
• Add a button to jump to CSS Simple mode. Available, but hidden in the drop-down jump menu at the very bottom.
  

Edit CSS - Simple

• There is no Skin Manager breadcrumb.
• Have the color picker link at the top of the window open in a sized window like the other links instead of full screen.
• Add the "Show me where" and "Preview style" options found in the CSS Advanced mode.
• Add a Revert button, a Reset this style button, and a Reset All button.
• Add a button to jump to CSS Advanced mode. Available, but hidden in the drop-down at the very bottom.
  

Edit Macros Be sure to try out Edit Macros IH

• When editing a macro, have the popup show beneath the macro instead of at the top.
• Make keyboard tabbing on the edit/add macro popup follow a natural order.
• Either allow true editing of default macro's titles (renames instead of copies to a new one) or disable editing a default macro's title alltogether.
• Adding a macro with the same name as an exiting macro should cause an error, not replace it. (Actually it does something weird because reverting it reverts to the other before it, almost like a history except it's a side effect of a bug, not a feature.)
  

Manage HTML Templates

• [?] Reverting a template bit does not update the edited/unedited counts & indicators in the template list.
• Fix the glitch where selecting an HTML template after previously closing another displays the original's list of bits before the new template's bits are loaded. (Perhaps attach the expand event handler code to the iframe's onload event?)
• Use Ajax to save the html template bit to the server so that the textarea scroll and insertion point positions are not lost. Include notification that shows that the save is in progress and remove it when it is completed.
• It would be more intuitive if you could open an HTML template with the same row-sized click-area like you can select template bits with.
• Move "Edit Selected", "Add Template Bit", "X", and the HTML Template Title out of the scrollable area.
• Move the template/bit navigation above the bit edit textareas so things stay in a consistent spot. This interface is also familiar with applications such as iTunes.
• Do not reload all template bits textareas when saving one when editing multiple.
• Add a Revert entire template set button and revert entire template buttons.
• Add an Add Template button that forces the addition of a template bit and template.
• Add a description of HTML Logic. Include example code like the one in the header of the class_template.php file.
• "Restore Unedited Version" is ambiguous. Replace with "Revert" and "Reset".
• Add a keyboard shortcut (via javascript) that will Save the Template Bit that is focused.
• Instead of forcing someone to run to the Manage Language section to check what language values are available to me (new AdminCP window/tab), integrate a "Language Palette" into the Macro Look-up that will let me quickly review the available language data within the templates while editing. Use a chooser to jump from file to file that I'm viewing and from language set to language set.
• Make an enhanced Compare tool. This time use frames so that template content and previews do not interfere with the compare interface and it can be consistent with the IPB AdminCP style for a smoother user experience. The main change is that it should let you compare to any skin set, not just itself, most importantly including the master skin set. This can also replace the View Original tool. Reword it so it's more clear what each mode is: "Preview", "Preview without CSS", and "Source HTML".
  

Skin Import/Export

• Protect against importing a template set xml-archive as an image set and detect when an image set has been imported as a template set and provide approriately helpful error messages.
• Allow the image set to use to be chosen when importing the skin set. Then list the image set import above the skin set import.
• A linear multi-step skin importing wizard would be very helpful, but at the very least, move the importing options above the exporting options because the average admin will more likely import.
  

Easy Logo Changer

• Update the logo in more places, at least where the default skin uses the logo such as the Blog and Portal wrappers. Perhaps a standardized macro for the logo url would work better?
  

Languages

• Have the language bit name listed in a ready to copy and paste format. <ibf.lang.bit_name> {ipb.lang['bit_name']}.
  

Global

• Have changes on the Editor Preferences popup take effect immediately, removing the "Change" button.
• Change the Editor Preferences popup to have the area width/height as plain text inputs (not drop-downs) and drop-downs for the units (px, %, etc.) and add /- buttons (to be used with the changes taken effect immediately).
  

These suggestions were implemented!

• [2.1] Pass the 'com_section' or 'com_filename' to the global_board_header_component_link template bit so that it can be used if the skin uses graphics for component links.
• [2.1] A skin-accessible version variable akin to the AdminCP version code so the IPB version can be checked with HTML Logic. This allows skins to be backwards-compatible to an extent. {$this->ipsclass->acpversion}
• [2.1] Nestable HTML Logic.
• [2.1] Make macro values available to HTML Logic for use as skin-dependent pseudo-settings. {$this->ipsclass->skin['_macro']['MACRO_NAME']}
• [2.1] Make sure template bits are listed in the same order they are on the template bits list regardless of whether the bit is inherited or custom.
• [2.0] Make the hidden icon (eye) a toggle to hide/unhide the skin.
• [2.0] Make the default skin icon (window) a button to make that skin the default.
• [2.0] Fix the semantics on the Add Template button to Add Template Bit.
• [2.0] Have the "Search Templates..." input clear onclick.
• [2.0] List the template bits in some discerable order, at least list any ones that don't have specific names (all for now) in alphabetical order..
• [2.0] Change the template's folder icon if any bit within the template is edited at all from the default. If any changes are in that template then red, if all changes are inherited ones, green, if none, blue. This provides a simple summary that is similar found elsewhere in the skin manager.
  

[Skye]

cgriego, you have way, way too much time on your hands....but I do like your suggestion. :)

[Chris Griego]

I look at it as an investment, spend a small portion of time now and save me loads of time later. ;)

That's not actually the worst of it. I was almost done with this post and my email program crashed taking my browser with it before I posted it, so I had to redo the whole thing. :(

[Chris Griego]

[b]Skin Manager Home[/b]

- Make the hidden icon (eye) a toggle to hide/unhide the skin.

- Make the default skin icon (window) a button to make that skin the default.

I've received confirmation that these were added. ^_^

[Couch Potato™]

Nice suggestion and good to hear a fifth was added.

[Matt]

- Change the template's folder icon if any bit within the template is edited at all from the default. If any changes are in that template then red, if all changes are inherited ones, green, if none, blue. This provides a simple summary that is similar found elsewhere in the skin manager. Otherwise you have to scan three very narrow columns, which is good for details, but not for a summary.

<snip>

- Fix the semantics on the Add Template button to Add Template Bit.

Done...

[Chris Griego]

Getting warmer... :wub:

[Chris Griego]

Any more news on this? I'm especially interested in these parts...

- Why only one level of child skins? Why not endless?

- The <comment> tag mentioned in one of the news posts doesn't seem to be implemented.

- I remember being told IPB HTML Logic was going to be enabled for the wrapper and it isn't, yet.

[John]

I agree with everything Chris says. :P

[Skye]

This is somewhat a bump...but what Chris said is needed. For sure. :)

[xtremeduelist]

I agree with everything Chris says. :P

<{POST_SNAPBACK}>

:thumbsup:

[Chris Griego]

I updated the list with things to reflect the things that have made it in based on the customer's latest PF1. :)

I want to add this in for the things I'm especially interested in, it's a small change and without it the tab order on the inputs are really backwards. >_< (and changing macro names is still really buggy, especially if you revert).

[b]Edit Macros[/b]

- Add tabindex on the edit/add macro popup.

[eldiablozz]

cgriego your suggestions are always good ;)

[Ali]

cgriego your suggestions are always good ;)

<{POST_SNAPBACK}>

Heh, indeed, indeed my friend. I agree with most all (if not) all your suggestions Chris, very well put together. :)

[Skye]

What everyone else said...these need added. :)

[Chris Griego]

It's good to know I'm wubbed. :wub:

[Chris Griego]

Added some new ones to the list, needed to speed up skin editing, especially since you can't just Ctrl+S to update the template anymore. ;)

[b]Edit HTML Templates[/b]

- Insert the Save Template Bit(S) and Save and Reload Template Bit(s) buttons after each template bit. To save scrolling, optionally place to the right of the textarea?

- Add accesskey(s) to the submit button(s), especially the "Save and Reload Template Bit(s)" button.

<{POST_SNAPBACK}>

[JasonS]

Very nice list. Everything I could want is there. I agree on all fronts.

[Roadkill71]

Added some new ones to the list, needed to speed up skin editing, especially since you can't just Ctrl+S to update the template anymore. ;)

<{POST_SNAPBACK}>

Wonder where you got that idea ;)

[Chris Griego]

Wonder where you got that idea ;)

<{POST_SNAPBACK}>

Somebody complained that skin edit testing would no longer be as simple as Ctrl+S anymore. o:)

[Roadkill71]

[i]Somebody[/i] complained that skin edit testing would no longer be as simple as Ctrl+S anymore. o:)

<{POST_SNAPBACK}>

:-"

But this is one of the reasons i still would prefer a php->db synch option. But at least if these suggestions are used it'll at least make it easier to use the AdminCP for editing.

[Chris Griego]

This is a new one found in the engine that really bothers me.

- The Board Guidelines setup in the AdminCP used to be displayed pretty-much anywhere you put "<!--IBF.RULES-->" in your code, as a global macro, the default placement being the header. Plenty of people who edit their templates moved it, I myself moved it to a navigation bar in the end_var bit. This behavior has changed in 2.0 and it restricts the use only to the header, as a template macro. Please give it back.

[Matt]

Restored

[Chris Griego]

Thank you! :*

[Chris Griego]

- Include $ibforums->version akin to the AdminCP version code so the IPB version can be checked with HTML Logic.

<{POST_SNAPBACK}>

New bit there. I'm already told that this should be included in the next version of IPB. :)

This should make it possible for skins to compatible across versions now. :D