From dcc64f44f9f81d32c8071c6bdac86546eaeb57a0 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Wed, 27 May 2015 17:17:00 +0200 Subject: UI improvements * Implement visibility choice on board creation; * Rework the board header bar. Remove links to un-implemented features; * Implement a board star counter (visible if the board have >2 stars); * Define a new icon (a thin cross) to close elements; * Remove $(document).on('mouseover') event handlers that were basically fired hundreds of times for nothing, we now define a proper Tracker dependency to execute jquery-ui plugin initialization only when something has changed; * Bug fixes related to list scrolling. --- client/components/main/header.styl | 284 +++++++++------------------------- client/components/main/popup.js | 26 +++- client/components/main/popup.styl | 79 +--------- client/components/main/popup.tpl.jade | 5 +- 4 files changed, 97 insertions(+), 297 deletions(-) (limited to 'client/components/main') diff --git a/client/components/main/header.styl b/client/components/main/header.styl index 1177d930..248e2851 100644 --- a/client/components/main/header.styl +++ b/client/components/main/header.styl @@ -1,7 +1,5 @@ @import 'nib' -global-reset() - #header color: white transition: background-color 0.4s @@ -9,15 +7,16 @@ global-reset() #header-quick-access background-color: rgba(0, 0, 0, 0.2) - padding: 4px 10px - height: 16px + padding: 0px 10px + height: 28px font-size: 12px display: flex - ul li, #header-user-bar + #header-user-bar + ul li color: darken(white, 17%) - a + a, .fa color: inherit text-decoration: none @@ -27,240 +26,101 @@ global-reset() ul flex: 1 transition: opacity 0.2s - margin-left: 5px + margin: 4px 0 0 5px li display: block float: left width: auto color: darken(white, 15%) - padding: 0 4px 1px 4px - - &.separator - padding: 0 2px 1px 2px + padding: 2px 5px 0 &.current - font-style: italic + color: darken(white, 5%) &:first-child .fa-home margin-right: 5px - #header-main-bar - height: 30px - padding: 8px - - h1 - font-size: 19px - line-height: 1.7em - margin: 0 20px 0 10px - float: left - - &.header-board-menu - cursor: pointer - - .fa-angle-down - font-size: 0.8em - // line-height: 1.1em + a.js-create-board margin-left: 5px - .board-header-starred .fa - color: yellow - - .board-header-members - float: right + #header-user-bar + margin: 2px 0 .member - display: block - width: 32px + width: 24px height: @width + float: left + margin: 0 + margin-top: 1px - .add-board-member - color: white - display: flex - align-items: center - justify-content: center - border: 1px solid white - height: 32px - 2px - width: @height - - i.fa-plus - margin-top: 2px - - .header-btn:last-child - margin-right: 0 - - - -// #header { -// background: #138871; -// height: 30px; -// overflow: hidden; -// padding: 5px; -// position: relative; -// z-index: 10; -// } - -// .header-logo { -// bottom: 0; -// display: block; -// height: 25px; -// left: 50%; -// position: absolute; -// top: 8px; -// width: 80px; -// margin-left: - @width/2; -// text-align: center; -// z-index: 2; -// opacity: .5; -// transition: opacity ease-in 85ms; -// color: white; -// font-size: 22px; -// text-decoration: none; -// background-image: url('/logos/white_logo.png'); - -// &:hover { -// opacity: .8; -// color: white; -// } -// } - -// .header-btn.header-btn-feedback { -// background: rgba(255, 255, 255, .1); -// background: linear-gradient(to bottom, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .05) 100%); -// padding-left: 22px; -// margin-right: 16px; - -// .header-btn-icon { -// top: 1px; -// } -// } - -.header-btn { - border-radius: 3px; - user-select: none; - background: rgba(255, 255, 255, .3); - background: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .2) 100%); - color: #f3f3f3; - display: block; - float: left; - font-weight: 700; - height: 30px; - line-height: 30px; - padding: 0 10px; - position: relative; - margin-right: 8px; - min-width: 30px; - text-decoration: none; - cursor: pointer; - - .header-btn-icon { - font-size: 16px; - line-height: 28px; - position: absolute; - top: 0; - left: 0; - } - - &.new-notifications { - background: #ba1212; - - &:hover { - background: #d11515; - } - } - - &.header-member .member { - margin: 0; - border-top-left-radius: 3px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 3px; - - &:hover .member-avatar { - opacity: 1; - } - } - - &:hover { - background: rgba(255, 255, 255, .4); - background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .3) 100%); - color: #fff; - - .header-btn-count { - background: #d11515; - } - } - - &:active { - background: rgba(255, 255, 255, .4); - background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .3) 100%); - } - - &.upgrade { - margin-right: 16px; + .header-user-bar-name + margin: 4px 8px 0 0 + float: left - .icon-sm { - padding: 6px 2px 6px 4px; - } - } + #header-main-bar + height: 28px * 1.618034 - 6px + padding: 7px 10px 0 - &.upgrade, - &.header-boards { - padding-left: 4px; - } + h1 + font-size: 20px + line-height: 1.7em + padding: 0 10px + margin: 0 + margin-right: 10px + float: left + border-radius: 3px - &.header-boards { - padding-right: 4px; - } + &.is-clickable + cursor: pointer - &.header-login, - &.header-signup { - padding: 0 12px; - } + .board-header-btns + display: block + margin-top: 3px + width: auto - &.header-signup { - background: #48b512; - background: linear-gradient(to bottom, #48b512 0, #3d990f 100%); + // XXX Use a flexbox instead of floats? + &.left + float: left - &:hover { - background: #3d990f; - background: linear-gradient(to bottom, #3d990f 0, #327d0c 100%); - } + &.right + float: right - &:active { - background: #327d0c; - } - } + .board-header-btn + border-radius: 3px + color: darken(white, 5%) + padding: 0 + height: 28px + font-size: 13px + float: left + overflow: hidden + line-height: @height + margin: 0 2px - &.header-go-to-boards { - padding: 0 8px 0 38px; - } + i.fa + float: left + display: block + line-height: 28px + color: darken(white, 5%) + margin: 0 10px - &.header-go-to-boards .member { - border-top-left-radius: 3px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 3px; - position: absolute; - left: 0; - } -} + + span + margin-right: 10px -// .header-btn-text { -// padding: 0 8px; -// } + .board-header-btn-close + float: right -// .header-notification-list ul { -// margin-top: 8px; -// } + i.fa + margin: 0 6px -// .header-notification-list .action-comment { -// max-height: 250px; -// overflow-y: auto; -// } + .board-header-btn, + h1.is-clickable + &.is-hovered, + &:hover + background: rgba(0, 0, 0, .15) -// .header-user { -// position: absolute; -// top: 5px; -// right: 0; -// } + .separator + margin: 2px 4px + border-left: 1px solid rgba(255, 255, 255, .3) + height: 24px + float: left diff --git a/client/components/main/popup.js b/client/components/main/popup.js index 8abe1697..48847525 100644 --- a/client/components/main/popup.js +++ b/client/components/main/popup.js @@ -1,11 +1,21 @@ // XXX This event list must be abstracted somewhere else. -var endTransitionEvents = [ - 'webkitTransitionEnd', - 'otransitionend', - 'oTransitionEnd', - 'msTransitionEnd', - 'transitionend' -].join(' '); +function whichTransitionEvent() { + var t; + var el = document.createElement('fakeelement'); + var transitions = { + transition:'transitionend', + OTransition:'oTransitionEnd', + MozTransition:'transitionend', + WebkitTransition:'webkitTransitionEnd' + }; + + for (t in transitions) { + if (el.style[t] !== undefined) { + return transitions[t]; + } + } +} +var transitionEvent = whichTransitionEvent(); Popup.template.events({ click: function(evt) { @@ -32,7 +42,7 @@ Popup.template.onRendered(function() { container._uihooks = { removeElement: function(node) { $(node).addClass('no-height'); - $(container).one(endTransitionEvents, function() { + $(container).one(transitionEvent, function() { node.parentNode.removeChild(node); }); } diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl index 9faad876..141f4261 100644 --- a/client/components/main/popup.styl +++ b/client/components/main/popup.styl @@ -91,6 +91,10 @@ top: 0 right: 0 + + &.no-title .header + background: none + .content-wrapper width: 100% @@ -527,78 +531,3 @@ &.limited li.exceeds-limit display: none - -.pop-over-emoji-list li > a - padding: 2px 4px - - .emoji - margin: 0 6px - -.pop-over-card-list li > a - padding: 2px 4px - -.login-signup-popover - padding: 15px - - .form-tabs - display: none - - h1 - margin-bottom: 15px - - p - margin: 8px 0 - - .form-parts-container - position: relative - - .active-box - position: absolute - top: 0 - background: #e2e2e2 - border: 1px solid #c9c9c9 - border-radius: 3px - z-index: 1 - height: 100% - width: 49% - transition-property: all - transition-duration: .4s - opacity: 1 - - &.start - opacity: 0 - left: 25% - - .signup-form, - .login-form - position: relative - box-sizing: border-box - padding: 20px - width: 50% - z-index: 2 - opacity: .3 - transition-property: opacity - transition-duration: .2s - - .active - opacity: 1 - - - .js-signup-form-pos - left: 0 - - .login-form - position: absolute - top: 0 - - .login-form .icon-google - position: absolute - left: 5px - top: 3px - - .login-form .button.google - padding-left: 40px - margin: 0 0 15px 0 - - .js-login-form-pos - left: 50% diff --git a/client/components/main/popup.tpl.jade b/client/components/main/popup.tpl.jade index fa54c713..dade8449 100644 --- a/client/components/main/popup.tpl.jade +++ b/client/components/main/popup.tpl.jade @@ -1,13 +1,14 @@ .pop-over.clearfix( class="{{#unless title}}miniprofile{{/unless}}" class=currentBoard.colorClass + class="{{#unless title}}no-title{{/unless}}" style="display:block; left:{{offset.left}}px; top:{{offset.top}}px;") - .header.clearfix + .header a.back-btn.js-back-view(class="{{#unless hasPopupParent}}is-hidden{{/unless}}") i.fa.fa-chevron-left span.header-title= title a.close-btn.js-close-pop-over - i.fa.fa-times + i.fa.fa-times-thin .content-wrapper //- We display the all stack of popup content next to each other and move -- cgit v1.2.3-1-g7c22