Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

redo user menu adding small glyphs linking to various functions

This commit is contained in:
Sam 2015-08-31 12:02:00 +10:00
parent 82148fc200
commit 4d67bba44a
2 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/assets/javascripts/discourse/templates/components/user-menu.hbs
View File

@ -1,12 +1,27 @@
{{#menu-panel visible=visible}} {{#menu-panel visible=visible}}
<ul class='menu-links-header'> <div class='menu-links-header'>
<li>{{#link-to 'userActivity.bookmarks' currentUser}}<i class='fa fa-bookmark'></i> {{i18n 'user.bookmarks'}}{{/link-to}}</li> <ul class='menu-links-row'>
{{#if allowAnon}}
<li><a href {{action 'toggleAnon'}}><i class='fa fa-user-secret'></i> {{#if isAnon}}{{i18n 'switch_from_anon'}}{{else}}{{i18n 'switch_to_anon'}}{{/if}}</a></li>
{{/if}}
<li>{{#link-to 'user' currentUser class="user-activity-link" }}<i class='fa fa-user'></i> {{i18n 'user.profile'}}{{/link-to}}</li> <li>{{#link-to 'user' currentUser class="user-activity-link" }}<i class='fa fa-user'></i> {{i18n 'user.profile'}}{{/link-to}}</li>
{{#if allowAnon}}
{{#if isAnon}}
<li>
<a href {{action 'toggleAnon'}}>{{i18n 'switch_from_anon'}}</a>
</li>
{{/if}}
{{/if}}
<li class='glyphs'>
<a href="{{currentUser.path}}/activity/bookmarks" title="{{i18n 'user.bookmarks'}}" aria-label="{{i18n 'user.bookmarks'}}"><i class='fa fa-bookmark'></i></a>
<a href="{{currentUser.path}}/messages" title="{{i18n 'user.private_messages'}}" aria-label="{{i18n 'user.private_messages'}}"><i class='fa fa-envelope'></i></a>
{{#if allowAnon}}
{{#unless isAnon}}
<a href {{action 'toggleAnon'}} title="{{i18n 'switch_to_anon'}}" aria-label="{{i18n 'switch_to_anon'}}"><i class='fa fa-user-secret'></i></a>
{{/unless}}
{{/if}}
<a href="{{currentUser.path}}/preferences" title="{{i18n 'user.preferences'}}" aria-label="{{i18n 'user.preferences'}}"><i class='fa fa-gear'></i></a>
</li>
</ul> </ul>
</div>
<div class='notifications'> <div class='notifications'>
{{#conditional-loading-spinner condition=loadingNotifications containerClass="spinner-container"}} {{#conditional-loading-spinner condition=loadingNotifications containerClass="spinner-container"}}
@ -22,5 +37,6 @@
</ul> </ul>
{{/if}} {{/if}}
{{/conditional-loading-spinner}} {{/conditional-loading-spinner}}
{{plugin-outlet "user-menu-bottom"}}
</div> </div>
{{/menu-panel}} {{/menu-panel}}

23
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -218,27 +218,38 @@
} }
} }
ul.menu-links-header { div.menu-links-header {
width: 100%; width: 100%;
display: table; display: table;
table-layout: fixed; border-collapse: separate;
li:hover { border-spacing: 0 0.5em;
.menu-links-row {
display: table-row;
}
a:hover {
background-color: dark-light-diff($highlight, $secondary, 50%, -55%); background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
} }
a {
padding: 0.5em;
}
li { li {
display: table-cell; display: table-cell;
width: auto; width: auto;
text-align: center; text-align: center;
padding: 0.5em 0;
} }
li:first-child { li:first-child {
text-align: left; text-align: left;
padding-left: 0.5em;
} }
li:last-child { li:last-child {
text-align: right; text-align: right;
padding-right: 0.5em; }
a {
font-size: 1.1em;
}
.fa-user {
margin-right: 0.2em;
} }
} }