use icons to toggle profile state as public or private

[Christopher Adams]

The first-run implementation of to toggle the state of a profile from public to private uses a drop-down menu and save button. This is not ideal from a UX point-of-view.

Instead, add a place for an icon to sit next to the person's name on the Profile page, as in:

Profile » Name [icon]

By default, the profile will be private and have a violet lock icon:

[root]/assets/icons/violet/private.png

The lock icon should be a link with "Public" as the title attribute in the link. Clicking the link should change the state of the profile from private to public.

If the profile is public, it will have a mariner colored check icon:

[root]/assets/icons/mariner/public.png

The title attribute in the link should read "Make Private" and clicking the link will change the Profile to private.

[Brad Phillips (brad-bradphillips)]

Ah, I've been trying to make this happen, but am having difficulties with the edit & edit-in-place forms. I've successfully created a new form on the aiki_users table (form 28) that is reserved specifically for publicity changes (and, as such, only alters that field in the db). I've also successfully brought in the edit form ajax-style when the icon is clicked.

I've been able to get the appropriate icons to display when a profile is private or public. I've also been able to manually edit the publicity using the (#(form:edit:(!(2)!))#) format, but there are two issues I'm having:

1. The edit only seems to work if I manually change the field in the form, via a text input. Any attempts at using hidden or autofields with values automatically inserted (from the url) like "is_public|People:Publicity:value:(!(3)!)" fail to successfully update the row in the table. I think this may relate to the on_submit event that still needs to be implemented in aiki, but need to talk to Bassel about.

2. Each of the form edit methods ( (#(form:edit)#) and in widget <edit></edit>) seem to require another step where the user has to click 'submit'. This means, a user clicks the image, then, even if the fields are set as autofield or hidden, a "submit" or "save" button has to be clicked for the changes to take affect. Maybe if there was a way to substitute the submission button with the image of the public or private icon, this could eliminate the multi-step issue.

Editing forms needs more documentation in aiki. I'm again at a stage where I feel like I'm just tossing aiki markup at a brick wall, in random combinations, until something sticks.

[Christopher Adams (christopheradams)]

It's getting there.

Can you change the location of the icon so that it sits on the same line as the "Profile » Name [icon]" ?

Ideally the state-change can be handled through AJAX, rather than re-loading the entire page. You should work toward that solution.

[Bassel Safadi (bassel)]

Brad, in this case you need to create an ajax post event that triggers on button click, normal calling of (#(form:edit)#) without manually adding a jquery post to the form will not work.

so you need both the form markup and to manually post to it via jquery, it's important to start from this page http://api.jquery.com/jQuery.post/ then let's skype/irc/email about the implementation

[Christopher Adams (christopheradams)]

Can you guys tackle this on Monday?

[Bassel Safadi (bassel)]

ok people. here is how aiki magic happen.. aiki support any kind of ajax by design, but no one in the entire world can implement every single ajax idea. that means features like toggle might need a bit of extra work. but if you can break down your task it will be super easy to implement. because aiki designed in a way to handle most of the ajax design and structure.

so the task from product designer point of view: we need a toggle button that switch the profile from public to private and vise versa..

the task from developer point of view: we need to toggle the is_public value from 0 to 1 and vise versa

here is how to do that on aiki, and trust me it's much more complicated if it wasn't aiki:

1- toggle or whatever product designer call those features are actually editing

2- from 1 that mean we need an edit form so we go and create a new widget on some link and add the edit form in it like brad did (#(form:edit:28:(!(2)!))#)

3- since this form exists we can view it and update data from it, but in this case Christopher wanted it to look sexy and didn't like the idea of editing the number manually, so instead he asked for icons that toggle. so we developers need the on click event over the icon to actually POST the data we want and in this case it's either 0 or 1.

4- we also need to know wither to post 1 or 0

5- we start the implementation in the profile widget number 109 where we have markup like:

<php if ((is_public)) = 1 then <div class="profile_container"><a href="[root]/publicity/edit/((userid))/NULL" id="make_profile_private"><img src="[root]/assets/icons/mariner/public.png" ></a></div> else <div class="profile_container"><a href="[root]/publicity/edit/((userid))/1" id="make_profile_public"><img src="[root]/assets/icons/violet/private.png" /></a></div> php>

which checks the value of is_public and display the correct icon.. note we have the items wrapped in profile_container class that we will use later.. also we have IDs on each link. one make_profile_private and the other is make_profile_public we need to use those IDs as selectors in the jquery script that we will write bellow in the same widget.

now we add this, and the magic happen, look bellow for line by line explanation on how this weird looking code work:

<script type="text/javascript">

//when document is fully loaded do the shit bellow
$(document).ready(function(){

//since this widget is called by ajax call from clicking on the user profile icon. keep the event listener open by using the live on click method.. if a user clicked on the make_profile_public button
$("#make_profile_public").live("click", function() {

//Post to the url where the widget publicity_edit has the the form for that table
//post the data is_public = 1 and the form_id = 28. and the record_id aka userid. in this case is coming from the database
$.post("[root]/publicity/edit/((userid))?noheaders=true&widget=publicity_edit", { is_public: "1", form_post_type: "save", form_id: "28", record_id: "((userid))", edit_form: "Submit" },

//if that worked do the following
   function(data) {

//update the html in profile container aka: change the icon and its link to the make private one
$(".profile_cont...

[Brad Phillips (brad-bradphillips)]

Great Bassel! I fixed the icon so that it will display on the same line, just after the name. This is working now!