#16 Created simple drop down from user-img

robertdavidwest commented 7 years ago

This branch is not ready to be merged yet. I'm creating this pull request so that others can review the code and provide feedback as we develop

robertdavidwest commented 7 years ago

Here's an image of the current drop down after this first commit on the branch (menu appears on hover):

rgilman commented 7 years ago

This looks like a great start! I hope to dig into it more in the next few days. I have a Tuesday deadline for my TEDx talk and will have more time after that.

rgilman commented 7 years ago

My sense is that the drop down should have menu items that are personal to the member and aren't duplicated elsewhere in the nav (at least not prominently). Here's my draft list:

Edit My Profile (/members/[username]/profile/edit/). This is currently linked to the user avatar, the user's real name and then the Edit My Profile link. We don't need the user's real name or username since your hopefully know what your name is!
Change Avatar (/members/[username]/profile/change-avatar/). This can be a text link and perhaps also the link from the current avatar picture.
Messages (/members/[username]/messages/)
Compose Message (/members/[username]/compose/)
Email/Password Settings (/members/[username]/settings
Notification Settings (/members/[username]/settings/notifications/
Profile Settings (/members/[username]/settings/profile/)
Log Out (looks like this is a dynamic link)

That should give us a good start.

robertdavidwest commented 7 years ago

Great!

I was thinking the same thing about the type of menu items. I noticed that the side bar was not present on every page so I thought that we would not want to mimic its content on the user-img menu.

This gives me plenty to work with and now I think I see that removing the side bar is basically independent of this task.

rgilman commented 7 years ago

I've been seeing the sidebar basically moving into the secondary menu. Take a look at Issue 17

iangilman commented 6 years ago

Now that we're getting back to work on this project, should we take a look at this pull request and see about resurrecting it?

rgilman commented 6 years ago

This was based on a different starter theme so I doubt we could just merge it but there is likely a lot of re-useable code. It would be great to get the benefit of the work that Rob W did.

rgilman commented 6 years ago

I've looked at Robert W's code and feel there is at least some of it we can bring forward. First is the CSS for the dropdown:

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: None;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content span {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content span:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

To avoid conflict with the .dropdown class that David has been using, I suggest we replace .dropdown with .user-dropdown in the above.

The PHP part was in a template that we are no longer using and used functions from the "infinity" templating system that we are no longer using, so much of the code needs to be translated.

I've started coding something in bfcom/parts/nav-bftop.php. The relevant section is:

<div class="cell user-dropdown" style="width: 54px; height: 54px;"> 
    <a href="<?php bp_loggedin_user_link(); ?>"><?php bp_loggedin_user_avatar( 'type=full' ); ?></a>
    <div class="user-dropdown-content">
    Hi
    </div>
</div>

This works in my local dev instance. The next step will be to replace "Hi" with a function that gathers the content I described in my Aug 18, 2017 post above.

That function should go into bfcom/functions/bfcom-fn.php (We need to clean up these names!)

The function could be bfc_user_dropdown_content() and then use various bp functions to get the relevant content. My current best guide to bp functions is https://buddypress.wp-a2z.org/oik-plugins/buddypress/

@DavidScottBernstein, is developing this function something you'd be up for working on?

DavidScottBernstein commented 6 years ago

It looks like there are a lot of moving parts here. I'm not sure where to begin.

David.

On Sep 24, 2018, at 8:25 PM, Robert Gilman notifications@github.com wrote:

I've looked at Robert W's code and feel there is at least some of it we can bring forward. First is the CSS for the dropdown:

.dropdown { position: relative; display: inline-block; }

.dropdown-content { display: None; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }

.dropdown-content span { color: black; padding: 12px 16px; text-decoration: none; display: block; }

.dropdown-content span:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content { display: block; }

To avoid conflict with the .dropdown class that David has been using, I suggest we replace .dropdown with .user-dropdown in the above.

The PHP part was in a template that we are no longer using and used functions from the "infinity" templating system that we are no longer using, so much of the code needs to be translated.

I've started coding something in bfcom/parts/nav-bftop.php. The relevant section is:

Hi

This works in my local dev instance. The next step will be to replace "Hi" with a function that gathers the content I described in my Aug 18, 2017 post above.

That function should go into bfcom/functions/bfcom-fn.php (We need to clean up these names!)

The function could be bfc_user_dropdown_content() and then use various bp functions to get the relevant content. My current best guide to bp functions is https://buddypress.wp-a2z.org/oik-plugins/buddypress/ https://buddypress.wp-a2z.org/oik-plugins/buddypress/ @DavidScottBernstein https://github.com/DavidScottBernstein, is developing this function something you'd be up for working on?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ContextInstitute/bfcom/pull/21#issuecomment-424195533, or mute the thread https://github.com/notifications/unsubscribe-auth/AGxlMicZCSggc25yT0Bhg72B5J0Mf4TKks5ueaIwgaJpZM4O10xp.

David Scott Bernstein, David@ToBeAgile.com Developer/Speaker/Trainer/Coach. Principal consultant at To Be Agile http://tobeagile.com/. Author of Beyond Legacy Code: Nine Practices to Extend the Life (and Value) of Your Software http://beyondlegacycode.com/. Stay in touch: sign up for my newsletter https://tobeagile.com/signup/, follow me on Twitter: @ToBeAgile http://twitter.com/ToBeAgile.

iangilman commented 6 years ago

@DavidScottBernstein sounds like the first step is to try adding:

<div class="cell user-dropdown" style="width: 54px; height: 54px;"> 
    <a href="<?php bp_loggedin_user_link(); ?>"><?php bp_loggedin_user_avatar( 'type=full' ); ?></a>
    <div class="user-dropdown-content">
    Hi
    </div>
</div>

... in the appropriate part of bfcom/parts/nav-bftop.php. Then you can start adding items one by one.

rgilman commented 6 years ago

@DavidScottBernstein I hear you and can relate!

To make this perhaps even more confusing, I realized last night that the dropdown class is from Foundation. We can either roll our own for the learning benefit or we can make use of the existing functionality in Foundation. You can read about Foundation's dropdowns at https://foundation.zurb.com/sites/docs/dropdown.html and https://foundation.zurb.com/sites/docs/dropdown-menu.html . I suspect we'd want to use dropdown-menu for this.

I'll be unavailable for a couple of hours but after that I'll have some more ideas to share.

iangilman commented 6 years ago

This is superseded by #36; closing.

ContextInstitute / bfcom

#16 Created simple drop down from user-img #21