apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improved performance of sidebar rendering. Fixed RTL sidebar opening.

Browse Source
pull/5056/head
Bartek Igielski 9 years ago
parent 72d84cc2d3
commit 6fddb8b0d1
7 changed files with 92 additions and 89 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 65
      packages/rocketchat-theme/assets/stylesheets/base.less
  2. 25
      packages/rocketchat-theme/assets/stylesheets/rtl.less
  3. 64
      packages/rocketchat-ui-master/master/main.coffee
  4. 2
      packages/rocketchat-ui-master/master/main.html
  5. 17
      packages/rocketchat-ui/lib/menu.coffee
  6. 4
      packages/rocketchat-ui/views/app/burger.coffee
  7. 4
      packages/rocketchat-ui/views/app/burger.html

65
packages/rocketchat-theme/assets/stylesheets/base.less
Unescape View File

@ -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 {

25
packages/rocketchat-theme/assets/stylesheets/rtl.less
Unescape View File

@ -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,

64
packages/rocketchat-ui-master/master/main.coffee
Unescape View File

@ -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 ->

2
packages/rocketchat-ui-master/master/main.html
Unescape View File

@ -63,7 +63,7 @@
{{> spotlight}}
{{> videoCall overlay=true}}
<div id="user-card-popover"></div>
<div id="rocket-chat" class="{{embeddedVersion}} menu-nav menu-closed">
<div id="rocket-chat" class="{{embeddedVersion}} menu-nav">
<div class="connection-status">
{{> status}}
</div>

17
packages/rocketchat-ui/lib/menu.coffee
Unescape View File

@ -1,18 +1,23 @@
@menu = new class
init: ->
@container = $("#rocket-chat")
@mainContent = $('.main-content, .flex-tab-bar')
@list = $('.rooms-list')
Session.set("isMenuOpen", false)
isOpen: ->
return @container?.hasClass("menu-opened") is true
return Session.get("isMenuOpen")
open: ->
if not @isOpen()
@container?.removeClass("menu-closed").addClass("menu-opened")
Session.set("isMenuOpen", true)
if isRtl localStorage.getItem "userLanguage"
@mainContent?.css('transform', 'translateX(-260px)')
else
@mainContent?.css('transform', 'translateX(260px)')
close: ->
if @isOpen()
@container?.removeClass("menu-opened").addClass("menu-closed")
Session.set("isMenuOpen", false)
@mainContent?.css('transform', 'translateX(0)')
toggle: ->
if @isOpen()

4
packages/rocketchat-ui/views/app/burger.coffee
Unescape View File

@ -1,3 +1,5 @@
Template.burger.helpers
unread: ->
return Session.get 'unread'
return Session.get 'unread'
isMenuOpen: ->
if Session.equals('isMenuOpen', true) then 'menu-opened'

4
packages/rocketchat-ui/views/app/burger.html
Unescape View File

@ -1,5 +1,5 @@
<template name="burger">
<div class="burger">
<div class="burger {{isMenuOpen}}">
<i></i>
<i></i>
<i></i>
@ -9,4 +9,4 @@
</div>
{{/if}}
</div>
</template>
</template>

Write Preview
Loading…
Cancel
Save