Create a custom theme
1
7 votes
IP.Content 2.0 Dev Update: Interface Improvements to Pages
Posted by
bfarber
,
10 February 2010
·
1,909 views
The page manager, introduced with IP.Content 1.0, is a core feature to IP.Content. It allows you to create pages and folders, and manage those pages and folders, core functionality that IP.Content relies on for everything else. Page management has been pretty reliable and functional, but we decided we wanted to improve the interface for IP.Content 2.0 to make it sleeker, faster and even more functional.
Several interface tweaks have been (and are still being) implemented in IP.Content, and the page manager was one of the primary focuses of these interface enhancements. We'll quickly describe the major changes below.
Redesigned "buttons"
The IP.Board ACP interface utilizes a small "button" icon that is located to the far right of a row in the ACP that you can take action against. In most cases, you will click this button and then choose an option from a resulting dropdown menu. Here's a quick screenshot of one such button to give you an idea of what I'm referring to
While functional, Rikki has redesigned this area to allow for the more important buttons/options to be pulled out of the menu, while still allowing for the menu to contain further options you may need to take on a row, but likely won't be executing very often. This means that for your typical options (i.e. edit) you now have one click, instead of two. And it's a lot prettier to boot!
The folder rows allow you to quickly add a new folder or page under the selected folder, while the page rows allow you you to quickly edit the page. Additional options remain tucked neatly away in the dropdown menu, just a click away.
Quicker access to folders
In IP.Content 1.x, when you click on a folder you are taken to a new page that lists that folder's contents. If there is a subfolder, you can click on it to enter into that folder. While effective, if you have a deep folder structure, this can require some time to fully drill down to where you want to end go. There's an easier way than this, surely!
With IP.Content 2.0, when you click a folder, its contents will be returned via AJAX and displayed inline. Any subfolders will be listed, along with any files in the folder, right below the folder row that you clicked in (indented, to show "depth"). You can click on subfolders to return those results as well. here's a quick screenshot to show you what I'm talking about.
In this screenshot, I've clicked on "another-test" and then proceeded to click on "sub-another" to show its contents as well. With this method, you can quickly drill down into any directory without having to wait for several page loads to occur, improving resource usage and efficiency, while simultaneously reducing the time it takes to accomplish the same task as before.
Page filtering
When you just have 4 or 5 pages, it's not much of a task to find the one you need to edit. You can quickly browse the list of pages from the page manager and click on it to edit it. Once you start designing an entire site, however, and utilize folders to create sub-sections of the site, it can become increasingly difficult to find the exact page you are looking to edit. Setting aside any "difficulty" in navigating to where you need to get, if you have a 10-level directory structure, it obviously takes a little bit of time to drill that deep.
IP.Content 2.x features a new filtering field at the top of the page manager page. This filtering field utilizes live-search functionality to show you search results as you type into the field. You start off by typing in the name of the page you wish to edit. The display will switch to show you all search results for that page, and the folder the search result is contained within. From here you just click on the page and start editing. You can click the "x" icon to clear the search results and switch back to the normal page manager listing, all without any page refreshes.
If you know the name of the page you want to edit, but don't remember what folder it is contained within, this new filter capability can make it easier to find where you need to go without hassle.
More AJAX
We've utilized AJAX elsewhere on the page manager to make common actions quicker and smoother. For instance, if you click on a button to add a folder, and submit the new folder name, it is submitted to the server via AJAX and then displays inline where it should (i.e. as a subfolder of an existing folder, or in the main page manager root, depending on what folder you are adding your new folder to).
Deleting and emptying folders also utilize AJAX to accomplish these actions without the need for a full page refresh. Inline confirm prompts (newly restyled) ensure that you don't accidentally click the link without confirming that you truly want to empty or delete the folder.
Additionally, deleting pages also utilize AJAX to accomplish the task, again with the restyled confirm prompt to prevent you from accidentally removing something you didn't mean to.
Conclusion
Many of these new interface changes you will see introduced elsewhere in IP.Content, such as the new action buttons to trigger actions against a specific row of data. Other minor tweaks are being implemented elsewhere in the ACP as well, but we'll leave that for another blog entry.
As always, if you have any questions or feedback, we'd love to hear it!
Several interface tweaks have been (and are still being) implemented in IP.Content, and the page manager was one of the primary focuses of these interface enhancements. We'll quickly describe the major changes below.
Redesigned "buttons"
The IP.Board ACP interface utilizes a small "button" icon that is located to the far right of a row in the ACP that you can take action against. In most cases, you will click this button and then choose an option from a resulting dropdown menu. Here's a quick screenshot of one such button to give you an idea of what I'm referring to
While functional, Rikki has redesigned this area to allow for the more important buttons/options to be pulled out of the menu, while still allowing for the menu to contain further options you may need to take on a row, but likely won't be executing very often. This means that for your typical options (i.e. edit) you now have one click, instead of two. And it's a lot prettier to boot!
The folder rows allow you to quickly add a new folder or page under the selected folder, while the page rows allow you you to quickly edit the page. Additional options remain tucked neatly away in the dropdown menu, just a click away.
Quicker access to folders
In IP.Content 1.x, when you click on a folder you are taken to a new page that lists that folder's contents. If there is a subfolder, you can click on it to enter into that folder. While effective, if you have a deep folder structure, this can require some time to fully drill down to where you want to end go. There's an easier way than this, surely!
With IP.Content 2.0, when you click a folder, its contents will be returned via AJAX and displayed inline. Any subfolders will be listed, along with any files in the folder, right below the folder row that you clicked in (indented, to show "depth"). You can click on subfolders to return those results as well. here's a quick screenshot to show you what I'm talking about.
In this screenshot, I've clicked on "another-test" and then proceeded to click on "sub-another" to show its contents as well. With this method, you can quickly drill down into any directory without having to wait for several page loads to occur, improving resource usage and efficiency, while simultaneously reducing the time it takes to accomplish the same task as before.
Page filtering
When you just have 4 or 5 pages, it's not much of a task to find the one you need to edit. You can quickly browse the list of pages from the page manager and click on it to edit it. Once you start designing an entire site, however, and utilize folders to create sub-sections of the site, it can become increasingly difficult to find the exact page you are looking to edit. Setting aside any "difficulty" in navigating to where you need to get, if you have a 10-level directory structure, it obviously takes a little bit of time to drill that deep.
IP.Content 2.x features a new filtering field at the top of the page manager page. This filtering field utilizes live-search functionality to show you search results as you type into the field. You start off by typing in the name of the page you wish to edit. The display will switch to show you all search results for that page, and the folder the search result is contained within. From here you just click on the page and start editing. You can click the "x" icon to clear the search results and switch back to the normal page manager listing, all without any page refreshes.
If you know the name of the page you want to edit, but don't remember what folder it is contained within, this new filter capability can make it easier to find where you need to go without hassle.
More AJAX
We've utilized AJAX elsewhere on the page manager to make common actions quicker and smoother. For instance, if you click on a button to add a folder, and submit the new folder name, it is submitted to the server via AJAX and then displays inline where it should (i.e. as a subfolder of an existing folder, or in the main page manager root, depending on what folder you are adding your new folder to).
Deleting and emptying folders also utilize AJAX to accomplish these actions without the need for a full page refresh. Inline confirm prompts (newly restyled) ensure that you don't accidentally click the link without confirming that you truly want to empty or delete the folder.
Additionally, deleting pages also utilize AJAX to accomplish the task, again with the restyled confirm prompt to prevent you from accidentally removing something you didn't mean to.
Conclusion
Many of these new interface changes you will see introduced elsewhere in IP.Content, such as the new action buttons to trigger actions against a specific row of data. Other minor tweaks are being implemented elsewhere in the ACP as well, but we'll leave that for another blog entry.
As always, if you have any questions or feedback, we'd love to hear it!
