diff options
-rw-r--r-- | web/react/components/search_bar.jsx | 11 | ||||
-rw-r--r-- | web/react/components/sidebar_header.jsx | 10 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_headers.scss | 42 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 44 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_search.scss | 37 |
5 files changed, 100 insertions, 44 deletions
diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx index f21f0cd58..e39cf5d46 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -36,6 +36,9 @@ module.exports = React.createClass({ } } }, + clearFocus: function(e) { + $('.search-bar__container').removeClass('focused'); + }, handleClose: function(e) { e.preventDefault(); @@ -57,6 +60,7 @@ module.exports = React.createClass({ }, handleUserFocus: function(e) { e.target.select(); + $('.search-bar__container').addClass('focused'); }, performSearch: function(terms, isMentionSearch) { if (terms.length) { @@ -92,13 +96,14 @@ module.exports = React.createClass({ render: function() { return ( <div> - <div className="sidebar__collapse" onClick={this.handleClose}>Cancel</div> - <span className="glyphicon glyphicon-search sidebar__search-icon"></span> + <div className="sidebar__collapse" onClick={this.handleClose}><span className="fa fa-angle-left"></span></div> + <span onClick={this.clearFocus} className="search__clear">Cancel</span> <form role="form" className="search__form relative-div" onSubmit={this.handleSubmit}> + <span className="glyphicon glyphicon-search sidebar__search-icon"></span> <input type="text" ref="search" - className="form-control search-bar-box" + className="form-control search-bar" placeholder="Search" value={this.state.search_term} onFocus={this.handleUserFocus} diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index e7512934a..b6ca8c1a5 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -75,7 +75,7 @@ var NavbarDropdown = React.createClass({ return ( <ul className="nav navbar-nav navbar-right"> - <li className="dropdown"> + <li className="dropdown" id="myDropdown"> <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span className="dropdown__icon" dangerouslySetInnerHTML={{__html: Constants.MENU_ICON }} /> </a> @@ -107,6 +107,12 @@ module.exports = React.createClass({ }; }, + toggleDropdown: function(e) { + e.preventDefault(); + e.stopPropagation(); + $('.team__header').find('.dropdown-toggle').trigger('click'); + }, + render: function() { var me = UserStore.getCurrentUser(); @@ -116,7 +122,7 @@ module.exports = React.createClass({ return ( <div className="team__header theme"> - <a className="settings_link" href="#" data-toggle="modal" data-target="#user_settings1"> + <a href="#" onClick={this.toggleDropdown}> { me.last_picture_update ? <img className="user__picture" src={"/api/v1/users/" + me.id + "/image?time=" + me.update_at} /> : diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index 687e330a6..2c5f845d2 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -84,8 +84,31 @@ // Team Header in Sidebar .sidebar--left, .sidebar--menu { .team__header { - padding: 10px; + position: relative; @include legacy-pie-clearfix; + &:before { + @include single-transition(all, 0.05s, linear); + content: ""; + background: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + } + &:hover { + &:before { + background: rgba(black, 0.05); + } + .user__name { + color: #fff; + } + .navbar-right { + .dropdown-toggle { + @include opacity(1); + } + } + } a { color: #fff; } @@ -94,12 +117,11 @@ position: absolute; top: 10px; right: 22px; + z-index: 5; .dropdown-toggle { + @include single-transition(all, 0.1s, linear); padding: 10px; @include opacity(0.8); - &:hover { - @include opacity(1); - } } .dropdown-menu { li a { @@ -123,7 +145,9 @@ } .header__info { color: #fff; - padding-left: 4px; + padding: 10px 10px 10px 14px; + z-index: 1; + position: relative; } .team__name, .user__name { display: block; @@ -137,9 +161,11 @@ text-decoration: none; } .user__name { + @include single-transition(all, 0.1s, linear); font-size: 14px; font-weight: 400; color: #eee; + color: rgba(#fff, 0.8); } > .nav { > li { @@ -250,10 +276,10 @@ vertical-align: top; display: inline-block; width: 15px; - margin: 9px 4px 3px 0; + margin: 9px 6px 3px 0; &:hover { svg { - fill: #888; + fill: #777; } } a { @@ -263,6 +289,6 @@ svg { vertical-align: top; margin-top: 8px; - fill: #AAA; + fill: #aaa; } } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 719934638..f3f9cd477 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -448,28 +448,39 @@ } } .search-bar__container { - padding: 10px 8px 13px; + padding: 0; + height: 45px; background: $primary-color; color: #fff; + &.focused { + .sidebar__collapse { + @include translateX(-45px); + } + .search__form { + padding-left: 10px; + padding-right: 67px; + } + .search__clear { + display: block; + } + } .search__form { border: none; - padding: 0 60px 0 35px; + padding: 7px 20px 0 45px; + height: 45px; + position: relative; + @include single-transition(all, 0.2s, linear); .form-control { - line-height: normal; - background: none; + border: none; + padding: 0 10px 0 31px; + background: rgba(black, 0.2); + @include border-radius(3px); color: #fff; - border-radius: 0; - padding: 0; - border-bottom: 1px solid #FFF; - border-bottom: 1px solid rgba(#fff, 0.4); - &:focus { - border-bottom: 1px solid rgba(#fff, 0.8); - } } input[type=text] { - @include input-placeholder { + @include input-placeholder { color: #fff; - color: rgba(#fff, 0.6); + color: rgba(#fff, 0.5); } } } @@ -550,11 +561,6 @@ .sidebar--right__close { display: none; } - .search__form { - .glyphicon { - color: #fff; - } - } } .inner__wrap { &.move--right { @@ -650,7 +656,7 @@ display: block; } .access__report { - margin: 0 0 15px 15px; + margin: 0 0 15px 15px; } .access__date { div { diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss index 794358320..0d005bfe2 100644 --- a/web/sass-files/sass/partials/_search.scss +++ b/web/sass-files/sass/partials/_search.scss @@ -1,23 +1,37 @@ .search-bar__container { padding: 8px 8px 8px 0; } -.sidebar__collapse { - width: auto; - height: auto; +.search__clear { + display: none; position: absolute; - top: 1px; - right: 15px; + right: 0; + line-height: 45px; + margin-right: 13px; + z-index: 5; + cursor: pointer; +} +.sidebar__collapse { cursor: pointer; - padding: 1em 0; z-index: 5; + fill: #FFF; + position: absolute; + left: 0; + font-size: 33px; + width: 45px; + @include single-transition(all, 0.2s, linear); + @include translateX(0px); + text-align: center; + padding-right: 2px; + line-height: 42px; display: none; } .sidebar__search-icon { position: absolute; - left: 15px; - top: 18px; - font-size: 16px; - @include opacity(0.8); + top: 15px; + margin-left: 10px; + font-size: 14px; + color: #fff; + color: rgba(#fff, 0.5); display: none; } .search__form { @@ -30,9 +44,8 @@ .sidebar--right & { width: 100%; } - .search-bar-box { + .search-bar { height: 40px; - border: 1px solid #ddd; padding-right: 30px; box-shadow: none; .search-bar__container & { |