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

improve hamburger rendering 

fix test cases
This commit is contained in:
Sam 2015-08-26 13:44:48 +10:00
parent 6c08bd4265
commit 600ab5ad51
3 changed files with 89 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/discourse/components/hamburger-menu.js.es6
View File

@ -7,14 +7,21 @@ export default Ember.Component.extend({
visibilityChanged: function(){
if(this.get("visible")) {
$('html').on('click.close-humburger', (e) => {
if (this.get('isDestroyed')) {
$('html').off('click.close-humburger');
return true;
}
const $target = $(e.target);
if ($target.closest('.dropdown.categories').length > 0) {
return;
}
console.log(e.toElement || e.relatedTarget || e.target);
this.set("visible", false);
$('html').off('click.close-humburger');
return true;
});
} else {
$('html').off('click.close-humburger');

127
app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs
View File

@ -2,77 +2,78 @@
<div class='hamburger-header clearfix'>
<a href {{action "close"}} class='close-hamburger'>{{fa-icon 'times'}}</a>
</div>
<ul class="location-links">
{{#if currentUser.staff}}
<div class='hamburger-body'>
<ul class="location-links">
{{#if currentUser.staff}}
<li>
{{#link-to "admin" class="admin-link"}}
{{fa-icon "wrench"}} {{i18n 'admin_title'}}
{{/link-to}}
</li>
<li>
{{#link-to "adminFlags" class="flagged-posts-link"}}
{{fa-icon "flag"}} {{i18n 'flags_title'}}
{{#if currentUser.site_flagged_posts_count}}
<span title={{i18n 'notifications.total_flagged'}} class='badge-notification flagged-posts'>{{currentUser.site_flagged_posts_count}}</span>
{{/if}}
{{/link-to}}
</li>
{{/if}}
<li>
{{#link-to "admin" class="admin-link"}}
{{fa-icon "wrench"}} {{i18n 'admin_title'}}
{{#link-to "discovery.latest" class="latest-topics-link"}}
{{i18n 'filters.latest.title.zero'}}
{{/link-to}}
</li>
{{#if siteSettings.enable_badges}}
<li>
{{#link-to 'badges' class="badge-link"}}{{i18n 'badges.title'}}{{/link-to}}
</li>
{{/if}}
{{#if siteSettings.enable_user_directory}}
<li>{{#link-to 'users' class="user-directory-link"}}{{i18n "directory.title"}}{{/link-to}}</li>
{{/if}}
{{#if currentUser.show_queued_posts}}
<li>
{{#link-to 'queued-posts'}}
{{i18n "queue.title"}}
{{#if currentUser.post_queue_new_count}}
<span class='badge-notification flagged-posts'>{{currentUser.post_queue_new_count}}</span>
{{/if}}
{{/link-to}}
</li>
{{/if}}
{{plugin-outlet "site-map-links"}}
{{#if showKeyboardShortcuts}}
<li><a href {{action "keyboardShortcuts"}} class="keyboard-shortcuts-link">{{i18n 'keyboard_shortcuts_help.title'}}</a></li>
{{/if}}
<li>
{{#link-to "adminFlags" class="flagged-posts-link"}}
{{fa-icon "flag"}} {{i18n 'flags_title'}}
{{#if currentUser.site_flagged_posts_count}}
<span title={{i18n 'notifications.total_flagged'}} class='badge-notification flagged-posts'>{{currentUser.site_flagged_posts_count}}</span>
{{/if}}
{{/link-to}}
<a href={{faqUrl}} class="faq-link">{{i18n 'faq'}}</a>
</li>
{{/if}}
<li>
{{#link-to "discovery.latest" class="latest-topics-link"}}
{{i18n 'filters.latest.title.zero'}}
{{/link-to}}
</li>
{{#if siteSettings.enable_badges}}
<li>
{{#link-to 'badges' class="badge-link"}}{{i18n 'badges.title'}}{{/link-to}}
{{#link-to 'about' class="about-link"}}{{i18n 'about.simple_title'}}{{/link-to}}
</li>
{{/if}}
{{#if showMobileToggle}}
<li><a href class="mobile-toggle-link" {{action "toggleMobileView"}}>{{boundI18n mobileViewLinkTextKey}}</a></li>
{{/if}}
{{#if siteSettings.enable_user_directory}}
<li>{{#link-to 'users' class="user-directory-link"}}{{i18n "directory.title"}}{{/link-to}}</li>
{{/if}}
{{#if currentUser.show_queued_posts}}
<li>
{{#link-to 'queued-posts'}}
{{i18n "queue.title"}}
{{#if currentUser.post_queue_new_count}}
<span class='badge-notification flagged-posts'>{{currentUser.post_queue_new_count}}</span>
{{/if}}
{{/link-to}}
</li>
{{/if}}
{{plugin-outlet "site-map-links"}}
{{#if showKeyboardShortcuts}}
<li><a href {{action "keyboardShortcuts"}} class="keyboard-shortcuts-link">{{i18n 'keyboard_shortcuts_help.title'}}</a></li>
{{/if}}
<li>
<a href={{faqUrl}} class="faq-link">{{i18n 'faq'}}</a>
</li>
<li>
{{#link-to 'about' class="about-link"}}{{i18n 'about.simple_title'}}{{/link-to}}
</li>
{{#if showMobileToggle}}
<li><a href class="mobile-toggle-link" {{action "toggleMobileView"}}>{{boundI18n mobileViewLinkTextKey}}</a></li>
{{/if}}
{{plugin-outlet "site-map-links-last"}}
</ul>
{{#if categories}}
<ul class="category-links">
<li class="heading" title={{i18n 'filters.categories.help'}}>
{{#link-to "discovery.categories" class="categories-link"}}{{i18n 'filters.categories.title'}}{{/link-to}}
</li>
{{#each categories as |c|}}
{{hamburger-category category=c}}
{{/each}}
{{plugin-outlet "site-map-links-last"}}
</ul>
{{/if}}
<br>
{{#if categories}}
<ul class="category-links clearfix">
<li class="heading" title={{i18n 'filters.categories.help'}}>
{{#link-to "discovery.categories" class="categories-link"}}{{i18n 'filters.categories.title'}}{{/link-to}}
</li>
{{#each categories as |c|}}
{{hamburger-category category=c}}
{{/each}}
</ul>
{{/if}}
</div>
{{/if}}

19
app/assets/stylesheets/common/base/hamburger.scss
View File

@ -5,7 +5,7 @@
background-color: $secondary;
z-index: 1002;
height: 100%;
overflow: auto;
overflow: none;
transition: 0.3s ease-in-out;
@include transform(translateX(0));
@ -17,8 +17,23 @@
float: right;
color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
font-size: 1.5em;
margin-right: 0.5em;
margin-right: -10px;
margin-top: 0.1em;
padding: 0 4 4 4px;
z-index: 9999;
}
.hamburger-header {
position: absolute;
right: 20px;
}
.hamburger-body {
overflow-y: auto;
overflow-x: hidden;
position: absolute;
top: 40px;
bottom: 100px;
}