From 6fddb8b0d12cf88dec82d79e6e81a2dbd9ddd314 Mon Sep 17 00:00:00 2001 From: Bartek Igielski Date: Sat, 26 Nov 2016 14:58:41 +0100 Subject: [PATCH] Improved performance of sidebar rendering. Fixed RTL sidebar opening. --- .../assets/stylesheets/base.less | 65 +++++++------------ .../assets/stylesheets/rtl.less | 25 +++---- .../rocketchat-ui-master/master/main.coffee | 64 +++++++++++------- .../rocketchat-ui-master/master/main.html | 2 +- packages/rocketchat-ui/lib/menu.coffee | 17 +++-- .../rocketchat-ui/views/app/burger.coffee | 4 +- packages/rocketchat-ui/views/app/burger.html | 4 +- 7 files changed, 92 insertions(+), 89 deletions(-) diff --git a/packages/rocketchat-theme/assets/stylesheets/base.less b/packages/rocketchat-theme/assets/stylesheets/base.less index 2180e15a49a..531027e54e2 100644 --- a/packages/rocketchat-theme/assets/stylesheets/base.less +++ b/packages/rocketchat-theme/assets/stylesheets/base.less @@ -656,6 +656,7 @@ label.required:after { position: absolute; top: 5px; left: 0px; + will-change: transform; .transition(transform .2s ease-out .1s); i { display: block; @@ -663,10 +664,7 @@ label.required:after { width: 20px; margin: 5px 0; opacity: .8; - .transition(transform .2s ease-out, width .2s ease-out); - &:nth-child(1) { - // .transition-delay(.06s); - } + .transition(transform .2s ease-out); &:nth-child(3) { .transition-delay(.1s); } @@ -685,6 +683,21 @@ label.required:after { z-index: 3; padding: 0px 4px; } + &.menu-opened { + i { + &:nth-child(1), + &:nth-child(3) { + opacity: 1; + .transform-origin(50%, 50%, 0); + } + &:nth-child(1) { + .transform(translate(-25%, 3px) rotate(-45deg) scale(0.5, 1)); + } + &:nth-child(3) { + .transform(translate(-25%, -3px) rotate(45deg) scale(0.5, 1)); + } + } + } } .arrow { @@ -1096,7 +1109,6 @@ label.required:after { .side-nav { position: fixed; - display: block; top: 0; bottom: 0; left: 0; @@ -1105,7 +1117,7 @@ label.required:after { overflow: visible; z-index: 100; padding: 12px 0 0 0; - .transition(transform .3s ease-out); + will-change: transform; &:before { content: " "; height: 1px; @@ -1569,6 +1581,7 @@ label.required:after { right: 40px; width: auto; height: auto; + will-change: transform; .transition(right .25s cubic-bezier(.5, 0, .1, 1)); &.flex-opened { right: @flex-tab-width + 40px; @@ -2710,6 +2723,7 @@ body:not(.is-cordova) { top: 0; right: 0; z-index: 130; + will-change: transform; .tab-button { position: relative; cursor: pointer; @@ -3904,21 +3918,16 @@ body:not(.is-cordova) { visibility: visible; display: inline-block; } - .side-nav { - top: 0; - // .transform(translateX(-100%)); - .transition(transform .3s ease-out); - } .main-content { left: 0; z-index: 120; - &.notransition { - .transition(transform .0s); - } } .main-content, .flex-tab-bar { .transition(transform .2s linear); + &.notransition { + .transition(transform .0s); + } } .fixed-title h2 { margin-left: 45px; @@ -3929,34 +3938,6 @@ body:not(.is-cordova) { .messages-box { padding: 0 10px; } - &.menu-opened { - .side-nav { - .transform(translateX(0)); - } - .burger { - i { - &:nth-child(1) { - opacity: 1; - width: 10px; - .transform-origin(50%, 50%, 0); - .transform(translateY(3px) rotate(-45deg)); - } - &:nth-child(2) { - //.transform(rotate(180deg)); - } - &:nth-child(3) { - opacity: 1; - width: 10px; - .transform-origin(50%, 50%, 0); - .transform(translateY(-3px) rotate(45deg)); - } - } - } - .main-content, - .flex-tab-bar { - .transform(translateX(@rooms-box-width)); - } - } } .sweet-alert { h2 { diff --git a/packages/rocketchat-theme/assets/stylesheets/rtl.less b/packages/rocketchat-theme/assets/stylesheets/rtl.less index f08412ad0ee..94569e73ece 100644 --- a/packages/rocketchat-theme/assets/stylesheets/rtl.less +++ b/packages/rocketchat-theme/assets/stylesheets/rtl.less @@ -416,21 +416,6 @@ .fixed-title h2 { margin-right: 45px; } - &.menu-opened { - .burger { - i { - &:nth-child(1) { - .transform(translateY(3px) rotate(45deg)); - } - &:nth-child(3) { - .transform(translateY(-3px) rotate(-45deg)); - } - } - } - .main-content { - .transform(translateX(-@rooms-box-width)); - } - } } } .burger { @@ -439,6 +424,16 @@ .unread-burger-alert { .left(4px); } + &.menu-opened { + i { + &:nth-child(1) { + .transform(translate(25%, 3px) rotate(45deg) scale(0.5, 1)); + } + &:nth-child(3) { + .transform(translate(25%, -3px) rotate(-45deg) scale(0.5, 1)); + } + } + } } .arrow { &:before, diff --git a/packages/rocketchat-ui-master/master/main.coffee b/packages/rocketchat-ui-master/master/main.coffee index 96e72c2c0d5..320c654f229 100644 --- a/packages/rocketchat-ui-master/master/main.coffee +++ b/packages/rocketchat-ui-master/master/main.coffee @@ -199,12 +199,10 @@ Template.main.helpers embeddedVersion: -> return 'embedded-view' if RocketChat.Layout.isEmbedded() - Template.main.events "click .burger": -> console.log 'room click .burger' if window.rocketDebug - chatContainer = $("#rocket-chat") menu.toggle() 'touchstart': (e, t) -> @@ -215,17 +213,18 @@ Template.main.events t.touchstartY = undefined t.movestarted = false t.blockmove = false + t.isRtl = isRtl localStorage.getItem "userLanguage" if $(e.currentTarget).closest('.main-content').length > 0 t.touchstartX = e.originalEvent.touches[0].clientX t.touchstartY = e.originalEvent.touches[0].clientY - t.mainContent = $('.main-content') + t.mainContent = $('.main-content, .flex-tab-bar') t.wrapper = $('.messages-box > .wrapper') 'touchmove': (e, t) -> if t.touchstartX? touch = e.originalEvent.touches[0] - diffX = t.touchstartX - touch.clientX - diffY = t.touchstartY - touch.clientY + diffX = touch.clientX - t.touchstartX + diffY = touch.clientY - t.touchstartY absX = Math.abs(diffX) absY = Math.abs(diffY) @@ -235,37 +234,58 @@ Template.main.events if t.blockmove isnt true and (t.movestarted is true or absX > 5) t.movestarted = true - if menu.isOpen() - t.left = 260 - diffX + if t.isRtl + if menu.isOpen() + t.diff = -260 + diffX + else + t.diff = diffX + + if t.diff < -260 + t.diff = -260 + if t.diff > 0 + t.diff = 0 else - t.left = -diffX + if menu.isOpen() + t.diff = 260 + diffX + else + t.diff = diffX - if t.left > 260 - t.left = 260 - if t.left < 0 - t.left = 0 + if t.diff > 260 + t.diff = 260 + if t.diff < 0 + t.diff = 0 t.mainContent.addClass('notransition') - t.mainContent.css('transform', 'translate('+t.left+'px)') + t.mainContent.css('transform', 'translate(' + t.diff + 'px)') t.wrapper.css('overflow', 'hidden') 'touchend': (e, t) -> if t.movestarted is true t.mainContent.removeClass('notransition') - t.mainContent.css('transform', ''); t.wrapper.css('overflow', '') - if menu.isOpen() - if t.left >= 200 - menu.open() + if t.isRtl + if menu.isOpen() + if t.diff >= -200 + menu.close() + else + menu.open() else - menu.close() + if t.diff <= -60 + menu.open() + else + menu.close() else - if t.left >= 60 - menu.open() + if menu.isOpen() + if t.diff >= 200 + menu.open() + else + menu.close() else - menu.close() - + if t.diff >= 60 + menu.open() + else + menu.close() Template.main.onRendered -> diff --git a/packages/rocketchat-ui-master/master/main.html b/packages/rocketchat-ui-master/master/main.html index ff577bb694a..ab94409a4bd 100644 --- a/packages/rocketchat-ui-master/master/main.html +++ b/packages/rocketchat-ui-master/master/main.html @@ -63,7 +63,7 @@ {{> spotlight}} {{> videoCall overlay=true}}
-