Skip to content
Snippets Groups Projects
Commit 5537f4c1 authored by Gabriel Engel's avatar Gabriel Engel
Browse files

Merge branch 'master' into subscription-manager 

* master:
  reduced constellation length
  fixed constellation pixel ratio
  fixed reversing arrow bug
  changed side-nav animation timing
  implemented delayed side-nav animation
  changed a-plus animation timing
  fixed side-nav icons alignment
  fixed flex-nav icons alignment
  changed flex-tab button ui
  Created and pushed by LingoHub. Project: 'Rocket.Chat' by User: 'gabriel.engel@gmail.com'.
  Created and pushed by LingoHub. Project: 'Rocket.Chat' by User: 'gabriel.engel@gmail.com'.

Conflicts:
	client/stylesheets/base.less
parents 2e39e271 1b6f34c5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client/lib/constallation.js
+ 28
− 8
View file @ 5537f4c1
......@@ -19,6 +19,25 @@ if (!window.requestAnimationFrame) {
* Makes a nice constellation on canvas
* @constructor Constellation
*/
function checkRatio(ctx, canvas) {
// finally query the various pixel ratios
var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1,
ratio = devicePixelRatio / backingStoreRatio;
var oldWidth = canvas.width;
var oldHeight = canvas.height;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
ctx.scale(ratio, ratio);
}
function Constellation (canvas, options) {
var $canvas = $(canvas),
context = canvas.getContext('2d'),
......@@ -38,7 +57,7 @@ if (!window.requestAnimationFrame) {
width: window.innerWidth,
height: window.innerHeight,
velocity: 0.1,
length: 100,
length: 150,
distance: 120,
radius: 150,
stars: []
......@@ -50,8 +69,8 @@ if (!window.requestAnimationFrame) {
var startTime;
function Star () {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.x = Math.random() * (window.innerWidth || canvas.width);
this.y = Math.random() * (window.innerHeight || canvas.height);
this.vx = (config.velocity - (Math.random() * 0.5));
this.vy = (config.velocity - (Math.random() * 0.5));
......@@ -72,10 +91,10 @@ if (!window.requestAnimationFrame) {
var star = config.stars[i];
if (star.y < 0 || star.y > canvas.height) {
if (star.y < 0 || star.y > (window.innerHeight || canvas.height) ) {
star.vx = star.vx;
star.vy = - star.vy;
} else if (star.x < 0 || star.x > canvas.width) {
} else if (star.x < 0 || star.x > (window.innerWidth || canvas.width) ) {
star.vx = - star.vx;
star.vy = star.vy;
}
......@@ -131,7 +150,6 @@ if (!window.requestAnimationFrame) {
for (i = 0; i < length; i++) {
config.stars.push(new Star());
star = config.stars[i];
star.create();
}
......@@ -173,8 +191,9 @@ if (!window.requestAnimationFrame) {
this.bind = function () {
$canvas.on('mousemove', function(e){
config.position.x = e.pageX - $canvas.offset().left;
config.position.y = e.pageY - $canvas.offset().top;
console.log($canvas.offset().left);
config.position.x = e.pageX;
config.position.y = e.pageY;
});
};
......@@ -183,6 +202,7 @@ if (!window.requestAnimationFrame) {
then = Date.now();
startTime = then;
this.setCanvas();
checkRatio(context, canvas);
this.setContext();
this.setInitialPosition();
this.loop(this.createStars);
......
client/lib/sideNav.coffee
+ 16
− 1
View file @ 5537f4c1
......@@ -3,6 +3,7 @@
sideNav = {}
flexNav = {}
arrow = {}
animating = false
toggleArrow = (status) ->
if arrow.hasClass "left" or status? is -1
......@@ -42,20 +43,34 @@
return false;
toggleFlex = (status) ->
return if animating == true
animating = true
if flexNav.opened or status? is -1
flexNav.opened = false
flexNav.addClass "hidden"
setTimeout ->
animating = false
, 350
return
if not flexNav.opened or status? is 1
flexNav.opened = true
flexNav.removeClass "hidden"
# added a delay to make sure the template is already rendered before animating it
setTimeout ->
flexNav.removeClass "hidden"
, 50
setTimeout ->
animating = false
, 500
openFlex = ->
return if animating == true
toggleArrow 1
toggleFlex 1
focusInput()
closeFlex = ->
return if animating == true
toggleArrow -1
toggleFlex -1
......
client/stylesheets/base.less
+ 76
− 16
View file @ 5537f4c1
......@@ -557,7 +557,7 @@ label.required:after {
}
&:after {
.transform(rotate(90deg));
.transition(transform .315s ease-out .2s, background .15s ease-out);
.transition(transform .315s ease-out .1s, background .15s ease-out);
}
&:before {
.transition(transform .315s ease-out .3s, background .15s ease-out);
......@@ -719,20 +719,25 @@ a.github-fork {
.info {
position: relative;
height: 100%;
padding: 10px 0px 10px 18px;
.thumb {
float: left;
height: 100%;
position: relative;
width: 60px;
padding: 8px;
width: 42px;
padding: 0;
height: 42px;
&:after {
content: " ";
display: block;
width: 44px;
height: 2px;
width: 4px;
height: 4px;
z-index: 10;
position: absolute;
bottom: 5px;
border-radius: 50%;
top: calc(50% - 4px);
border: 2px solid #DFDFDF;
left: -14px;
}
.avatar-initials {
line-height: 44px;
......@@ -741,7 +746,7 @@ a.github-fork {
.data {
float: left;
position: relative;
padding: 0 25px 0 5px;
padding: 0 25px 0 10px;
height: 100%;
display: table;
.calc(width, ~"100% - 60px");
......@@ -802,7 +807,7 @@ a.github-fork {
.transform(translateX(-100%));
}
.status {
padding-left: 30px;
padding-left: 38px;
position: relative;
&:after {
content: " ";
......@@ -813,8 +818,8 @@ a.github-fork {
border-radius: 50%;
z-index: 5;
position: absolute;
left: 12px;
.calc(top, ~"50% - 6px");
left: 18px;
.calc(top, ~"50% - 8px");
}
&.offline {
&:after {
......@@ -851,7 +856,10 @@ a.github-fork {
top: 17px;
}
i {
width: 18px;
width: 26px;
display: inline-block;
text-align: center;
margin-left: 0 -1px 0 1px;
}
a {
position: relative;
......@@ -872,6 +880,16 @@ a.github-fork {
text-decoration: none;
}
}
.icon-logout {
&:before {
margin-right: 0px;
}
}
.icon-camera {
&:before {
margin-left: 1px;
}
}
}
&.active .info,
.info:hover {
......@@ -888,7 +906,8 @@ a.github-fork {
// rooms-box
.flex-nav {
background-color: @primary-background-color;
//background-color: @primary-background-color;
background-color: transparent;
position: fixed;
top: 0;
left: 0;
......@@ -902,6 +921,17 @@ a.github-fork {
.custom-scroll(transparent, rgba(255, 255, 255, 0.05));
&.hidden {
.transform(translateX(-100%));
header, footer, .content {
.transform(translateX(-100%));
}
}
header,
footer,
.content {
.transition(transform .425s cubic-bezier(0, .8, .05, 1));
}
> section {
&:extend(.fill-all);
}
header {
display: table;
......@@ -914,6 +944,8 @@ a.github-fork {
min-height: @header-min-height;
height: @header-min-height;
padding-left: 15px;
.transition-delay(.05s);
background-color: @primary-background-color;
> div {
display: table-cell;
vertical-align: middle;
......@@ -947,6 +979,7 @@ a.github-fork {
background: #fff;
min-height: @footer-min-height;
background-color: @primary-background-color;
.transition-delay(.22s);
> div {
display: table-cell;
vertical-align: middle;
......@@ -966,6 +999,8 @@ a.github-fork {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
padding: 35px 10px;
.custom-scroll(transparent, rgba(255, 255, 255, 0.05));
.transition-delay(.135s);
background-color: @primary-background-color;
> .wrapper {
direction: ltr;
}
......@@ -1293,6 +1328,12 @@ a.github-fork {
color: rgba(255, 255, 255, 0.75);
}
}
.icon-cancel-circled:before {
margin-left: 2px;
}
.icon-logout {
margin-left: 1px;
}
}
i {
color: rgba(255, 255, 255, 0.35);
......@@ -1906,17 +1947,28 @@ a.github-fork {
position: absolute;
left: 0;
top: 0px;
background-color: @secondary-background-color;
background-color: @tertiary-background-color;
border: none;
height: 60px;
width: 28px;
width: 30px;
border-bottom: 1px solid @tertiary-background-color;
color: @secondary-font-color;
cursor: pointer;
.transform(translateX(-27px));
.transition(transform .3s ease-out .4s);
.transition(transform .25s ease-out .475s, background .075s ease-out .5s);
&:hover {
color: @primary-font-color;
.arrow {
.arrow {
&:before, &:after {
background-color: #4a4a4a;
}
}
}
}
.arrow {
&:before, &:after {
background-color: #7a7a7a;
}
}
i {
.transform-origin(50%, 50%, 0);
......@@ -1926,8 +1978,16 @@ a.github-fork {
margin-top: 1px;
}
.flex-opened & {
background-color: @secondary-background-color;
.transition-delay(0s);
.transform(translateX(0));
&:hover {
.arrow {
&:before, &:after {
background-color: #7a7a7a;
}
}
}
}
}
.search-form {
......
client/views/login/footer.html
+ 1
− 1
View file @ 5537f4c1
......@@ -2,7 +2,7 @@
<footer>
{{ > social}}
<a href="http://meteor.com" target="_blank" title="Proudly developed with Meteor" class="meteor">{{_ "footer.Proudly_developed"}}</a>
<a class="github-fork" href="https://github.com/RocketChat/Rocket.Chat">{{_ "footer.Fork_it_on_github"}}</a>
<a class="github-fork" target="_blank" href="https://github.com/RocketChat/Rocket.Chat">{{_ "footer.Fork_it_on_github"}}</a>
{{#if LanguageVersion}}<div class="switch-language"><a href="#" class="switch-language">{{LanguageVersion}}</a></div>{{/if}}
</footer>
</template>
public/landing/index.html
+ 1
− 1
View file @ 5537f4c1
......@@ -105,7 +105,7 @@
</nav>
</div>
<a href="http://meteor.com" target="_blank" title="Proudly developed with Meteor" class="meteor">Proudly developed with Meteor</a>
<a class="github-fork" href="https://github.com/RocketChat/Rocket.Chat">Fork it on github</a>
<a class="github-fork" target='_blank' href="https://github.com/RocketChat/Rocket.Chat">Fork it on github</a>
</footer>
<canvas class="connect"></canvas>
</div>
......
public/landing/style.css
+ 1
− 1
View file @ 5537f4c1
......@@ -2065,7 +2065,7 @@ a.github-fork:after {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 45px 0;
padding: 60px 0;
z-index: 10;
position: relative
}
......
public/scripts/jquery.constellation.js
+ 28
− 8
View file @ 5537f4c1
......@@ -19,6 +19,25 @@ if (!window.requestAnimationFrame) {
* Makes a nice constellation on canvas
* @constructor Constellation
*/
function checkRatio(ctx, canvas) {
// finally query the various pixel ratios
var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1,
ratio = devicePixelRatio / backingStoreRatio;
var oldWidth = canvas.width;
var oldHeight = canvas.height;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
ctx.scale(ratio, ratio);
}
function Constellation (canvas, options) {
var $canvas = $(canvas),
context = canvas.getContext('2d'),
......@@ -38,7 +57,7 @@ if (!window.requestAnimationFrame) {
width: window.innerWidth,
height: window.innerHeight,
velocity: 0.1,
length: 100,
length: 150,
distance: 120,
radius: 150,
stars: []
......@@ -50,8 +69,8 @@ if (!window.requestAnimationFrame) {
var startTime;
function Star () {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.x = Math.random() * (window.innerWidth || canvas.width);
this.y = Math.random() * (window.innerHeight || canvas.height);
this.vx = (config.velocity - (Math.random() * 0.5));
this.vy = (config.velocity - (Math.random() * 0.5));
......@@ -72,10 +91,10 @@ if (!window.requestAnimationFrame) {
var star = config.stars[i];
if (star.y < 0 || star.y > canvas.height) {
if (star.y < 0 || star.y > (window.innerHeight || canvas.height) ) {
star.vx = star.vx;
star.vy = - star.vy;
} else if (star.x < 0 || star.x > canvas.width) {
} else if (star.x < 0 || star.x > (window.innerWidth || canvas.width) ) {
star.vx = - star.vx;
star.vy = star.vy;
}
......@@ -131,7 +150,6 @@ if (!window.requestAnimationFrame) {
for (i = 0; i < length; i++) {
config.stars.push(new Star());
star = config.stars[i];
star.create();
}
......@@ -173,8 +191,9 @@ if (!window.requestAnimationFrame) {
this.bind = function () {
$canvas.on('mousemove', function(e){
config.position.x = e.pageX - $canvas.offset().left;
config.position.y = e.pageY - $canvas.offset().top;
console.log($canvas.offset().left);
config.position.x = e.pageX;
config.position.y = e.pageY;
});
};
......@@ -183,6 +202,7 @@ if (!window.requestAnimationFrame) {
then = Date.now();
startTime = then;
this.setCanvas();
checkRatio(context, canvas);
this.setContext();
this.setInitialPosition();
this.loop(this.createStars);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment