summaryrefslogtreecommitdiffstats
path: root/client/components/main
diff options
context:
space:
mode:
authorMaxime Quandalle <maxime@quandalle.com>2015-05-27 17:17:00 +0200
committerMaxime Quandalle <maxime@quandalle.com>2015-05-27 17:23:25 +0200
commitdcc64f44f9f81d32c8071c6bdac86546eaeb57a0 (patch)
treeb8977727227a3ddbb2874ea3f86f1e26e03c8835 /client/components/main
parent42f6dc686f313ba294e3cbcfb0ebde50678580fe (diff)
downloadwekan-dcc64f44f9f81d32c8071c6bdac86546eaeb57a0.tar.gz
wekan-dcc64f44f9f81d32c8071c6bdac86546eaeb57a0.tar.bz2
wekan-dcc64f44f9f81d32c8071c6bdac86546eaeb57a0.zip
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.
Diffstat (limited to 'client/components/main')
-rw-r--r--client/components/main/header.styl284
-rw-r--r--client/components/main/popup.js26
-rw-r--r--client/components/main/popup.styl79
-rw-r--r--client/components/main/popup.tpl.jade5
4 files changed, 97 insertions, 297 deletions
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