From 631092d78f2959ce10e700485dfa12500b505f26 Mon Sep 17 00:00:00 2001 From: Sacha Greif Date: Sat, 21 Mar 2015 18:43:35 +0900 Subject: [PATCH] working on dropdown open/close --- client/views/nav/dropdown_component.html | 5 +- client/views/nav/dropdown_component.js | 5 ++ packages/telescope-base/lib/base.js | 6 +- .../lib/client/scss/specific/_dropdown.scss | 31 ++++++++++ .../lib/client/scss/modules/_nav.scss | 59 ++++++++++++------- public/img/minus.svg | 13 ++++ public/img/plus.svg | 15 +++++ 7 files changed, 107 insertions(+), 27 deletions(-) create mode 100644 public/img/minus.svg create mode 100644 public/img/plus.svg diff --git a/client/views/nav/dropdown_component.html b/client/views/nav/dropdown_component.html index 4157ded04..573e53d43 100644 --- a/client/views/nav/dropdown_component.html +++ b/client/views/nav/dropdown_component.html @@ -32,7 +32,10 @@ dropdownLabel (String) [optional] {{/each}} {{#if showMore}} - {{_ "Show More"}} + + {{_ + {{_ + {{/if}} {{/with}} diff --git a/client/views/nav/dropdown_component.js b/client/views/nav/dropdown_component.js index 2a4055c49..e5e2583c3 100644 --- a/client/views/nav/dropdown_component.js +++ b/client/views/nav/dropdown_component.js @@ -40,6 +40,11 @@ Template[getTemplate('dropdownComponent')].helpers({ } }); +Template[getTemplate('dropdownComponent')].onRendered(function () { + var $dropdown = this.$('.dropdown'); + var height = $dropdown.height(); +}); + Template[getTemplate('dropdownComponent')].events({ 'click .show-more': function (e, t) { e.preventDefault(); diff --git a/packages/telescope-base/lib/base.js b/packages/telescope-base/lib/base.js index 5a7142ef6..65cd73413 100644 --- a/packages/telescope-base/lib/base.js +++ b/packages/telescope-base/lib/base.js @@ -34,12 +34,8 @@ STATUS_REJECTED=3; // ------------------------------------- Navigation -------------------------------- // -// array containing nav items; initialize with views menu and admin menu +// array containing nav items; primaryNav = [ - { - template: 'viewsMenu', - order: 10 - } ]; secondaryNav = [ diff --git a/packages/telescope-theme-base/lib/client/scss/specific/_dropdown.scss b/packages/telescope-theme-base/lib/client/scss/specific/_dropdown.scss index 5b5e1e283..57a0f889b 100644 --- a/packages/telescope-theme-base/lib/client/scss/specific/_dropdown.scss +++ b/packages/telescope-theme-base/lib/client/scss/specific/_dropdown.scss @@ -72,4 +72,35 @@ } .dropdown-top-label{ cursor: pointer; +} + +.show-more{ + border-top: 1px solid #ccc; + padding: 8px 0; + display: block; + text-align: center; + img{ + display: block; + height: 20px; + width: 20px; + opacity: 0.2; + margin: 0 auto; + } + &:hover{ + background: white(0.3); + img{ + opacity: 0.5; + } + } + .show-more-minus{ + display: none; + } + .dropdown-open &{ + .show-more-minus{ + display: block; + } + .show-more-plus{ + display: none; + } + } } \ No newline at end of file diff --git a/packages/telescope-theme-hubble/lib/client/scss/modules/_nav.scss b/packages/telescope-theme-hubble/lib/client/scss/modules/_nav.scss index f956498fb..5c4d248c9 100644 --- a/packages/telescope-theme-hubble/lib/client/scss/modules/_nav.scss +++ b/packages/telescope-theme-hubble/lib/client/scss/modules/_nav.scss @@ -116,40 +116,57 @@ $nav-width: 250px; background: #e1e4e5; overflow-y: auto; padding-bottom: 30px; - .dropdown-top-level{ - display: block; - border-bottom: 1px solid #ccc; - padding-bottom: 5px; - margin-bottom: 5px; - } - .menu-label{ - display: block; - } - .menu-description{ - // display: block; - display: none; - font-weight: normal; - } - .account-link{ - display: block; - font-weight: bold; - } + } + .logo{ + margin-bottom: 30px; } .header-submodule{ - margin-bottom: $grid-margin*3; + margin-bottom: 30px; + } + .primary-nav{ + display: flex; + flex-direction: column; + } + .search{ + order: 1; + } + .view{ + order: 2; + } + .categories{ + order: 3; } .dropdown-top-level{ cursor: default; + display: block; + border-bottom: 1px solid #ccc; + padding-bottom: 5px; + margin-bottom: 5px; + } + .menu-label{ + display: block; + } + .menu-description{ + // display: block; + display: none; + font-weight: normal; + } + .account-link{ + display: block; + font-weight: bold; } .dropdown-contents{ max-height: 90px; overflow: hidden; - margin-bottom: $grid-margin; + @include animate(max-height); } .dropdown-open .dropdown-contents{ - max-height: none; + max-height: 999px; } .notifications-menu{ display: none; } + .tagline{ + margin-top: 0px; + } } \ No newline at end of file diff --git a/public/img/minus.svg b/public/img/minus.svg new file mode 100644 index 000000000..425704bc1 --- /dev/null +++ b/public/img/minus.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/public/img/plus.svg b/public/img/plus.svg new file mode 100644 index 000000000..25d19489f --- /dev/null +++ b/public/img/plus.svg @@ -0,0 +1,15 @@ + + + + + +