Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix activity counter

Browse source 
- counter now has a .js-counter class
- counter doesn't get removed from the dom, the counter gets hidden via css when its content is empty
- the logo is in a .logo div again
This commit is contained in:
Felix Niklas 2015-06-01 17:39:36 +02:00
parent f592796abd
commit ef0d569d33
3 changed files with 31 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
View file

@ -15,10 +15,10 @@ class App.OnlineNotificationWidget extends App.Controller
# rebuild widget on auth # rebuild widget on auth
@bind 'auth', (user) => @bind 'auth', (user) =>
if !user if !user
@el.find('activity-counter').html('') @el.find('.js-counter').text('')
else else
if !@access() if !@access()
@el.find('activity-counter').html('') @el.find('.js-counter').text('')
return return
@createContainer() @createContainer()
@ -38,13 +38,10 @@ class App.OnlineNotificationWidget extends App.Controller
counterUpdate: (count) => counterUpdate: (count) =>
if !count if !count
@el.find('.activity-counter').remove() @el.find('.js-counter').text('')
return return
if @el.find('.js-toggleNavigation .activity-counter')[0] @el.find('.js-counter').text(count)
@el.find('.js-toggleNavigation .activity-counter').html(count)
else
@toggle.append('<div class="activity-counter">' + count.toString() + '</div>')
markAllAsRead: => markAllAsRead: =>
@counterUpdate(0) @counterUpdate(0)

5
app/assets/javascripts/app/views/navigation.jst.eco
View file

@ -6,7 +6,10 @@
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
</div> </div>
</div> </div>
<svg class="icon-logo js-toggleNavigation"><use xlink:href="#icon-logo" /></svg> <div class="logo js-toggleNavigation">
<svg class="icon-logo"><use xlink:href="#icon-logo" /></svg>
<div class="activity-counter js-counter"></div>
</div>
<ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul> <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
</form> </form>

35
app/assets/stylesheets/zammad.css.scss
View file

@ -1765,7 +1765,7 @@ footer {
} }
.search { .search {
padding: 9px 2px 10px 10px; padding: 8px 5px 4px 10px;
border-bottom: 1px solid rgba(240, 250, 255, .05); border-bottom: 1px solid rgba(240, 250, 255, .05);
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
@ -1827,33 +1827,42 @@ footer {
margin-right: -46px; margin-right: -46px;
} }
.search.focused .icon-logo { .search.focused .logo {
opacity: 0; opacity: 0;
z-index: -1; z-index: -1;
} }
.search .icon-logo { .logo {
margin: 0 10px;
transition: 240ms;
position: relative; position: relative;
@extend .u-clickable, .zIndex-5; @extend .u-clickable, .zIndex-5;
margin: 0 10px;
transition: 240ms;
}
.logo .icon-logo {
position: relative;
} }
.logo .activity-counter { .logo .activity-counter {
height: 19px; height: 20px;
min-width: 19px; min-width: 21px;
position: absolute; position: absolute;
right: 0; right: -3px;
bottom: 0; bottom: 6px;
padding: 0 3px; padding: 0 4px;
font-size: 11px; font-size: 13px;
line-height: 17px; font-weight: 300;
line-height: 16px;
text-align: center; text-align: center;
color: white; color: white;
text-shadow: 0 1px 1px rgba(0,0,0,.21); text-shadow: 0 1px 1px rgba(0,0,0,.21);
background: hsl(360,71%,60%); background: hsl(360,71%,60%);
border-radius: 10px; border-radius: 10px;
border: 2px solid hsl(232,10%,16%); border: 2px solid hsl(233,10%,16%);
}
.logo .activity-counter:empty {
display: none;
} }
.search .custom-dropdown-menu { .search .custom-dropdown-menu {